<template>
|
<view class="box">
|
<view class="cate">
|
<view @click="changeRow(item)" :class="active === index ? 'cate-item active' : 'cate-item'" v-for="(item, index) in cate" :key="index">
|
{{item.name}}
|
<view class="cate-item-xiab" v-if="active === index"></view>
|
</view>
|
</view>
|
<view class="list">
|
<view class="list-item" v-for="(item, index) in dataList" :key="index">
|
<view class="a" @click="jumpOrderDetail(item.id)">
|
<view class="a-left">
|
<view :class="'a-left-tips '+(item.receiveType==1?'shop-top-tips-a':'shop-top-tips-b')">{{item.receiveType==1?'自提':'配送'}}</view>
|
<text>订单号：{{item.code}}</text>
|
</view>
|
<text v-if="item.status ==0" class="a-right">待支付</text>
|
<text v-if="item.status ==1" class="a-right">{{item.receiveType==1?'待自提':'待发货'}}</text>
|
<text v-if="item.status ==2" class="a-right">待收货</text>
|
<text v-if="item.status ==3" class="a-right grey">交易完成</text>
|
<text v-if="item.status ==4" class="a-right grey">已取消</text>
|
<text v-if="item.status ==6" class="a-right grey">已退款</text>
|
</view>
|
<view class="b" @click="jumpOrderDetail(item.id)">
|
<view class="b-item" v-for="(item1, index1) in (item.goodsorderDetailList||[])" >
|
<view class="b-item-image">
|
<image :src="item1.imgurl||'/static/static/default2.png'" mode="widthFix"></image>
|
</view>
|
<view class="b-item-title">{{item1.name||''}}</view>
|
<view class="b-item-jia">
|
<text>¥{{(item1.price||0).toFixed(2)}}</text>
|
<text>x{{item1.goodsNum||0}}</text>
|
</view>
|
</view>
|
</view>
|
<view class="c">
|
<view class="c-label">
|
<view class="c-label-title">实付款：</view>
|
<view class="c-label-price">
|
<text>{{(item.price||0).toFixed(2)}}</text>
|
<text></text>
|
</view>
|
</view>
|
<view class="c-btns" v-if="userType ==1">
|
<view class="c-btns-item blue" @click="contactPhone(item)">联系客户</view>
|
<view class="c-btns-item bg" v-if="item.status==1 && item.receiveType==1" @click="hexiaoOrder(item)">自提核销</view>
|
</view>
|
<view class="c-btns" v-if="userType !=1">
|
<view class="c-btns-item grey" @click="cancelOrder(item)" v-if="item.status==0 || item.status==1">取消订单</view>
|
<view class="c-btns-item grey" @click="deleteOrder(item)" v-if="item.status==4">删除订单</view>
|
<view class="c-btns-item blue" @click="openQrcode(item)" v-if="item.status==1 && item.receiveType==1">自提码</view>
|
<view class="c-btns-item blue" @click="payOrder(item)" v-if="item.status==0">去支付</view>
|
<view class="c-btns-item blue" @click="doneOrder(item)" v-if="item.status==2">确认收货</view>
|
</view>
|
</view>
|
<view class="d" v-if="item.memberInfo" @click="jumpOrderDetail(item.id)">
|
订单备注：{{item.memberInfo||''}}
|
</view>
|
</view>
|
<view v-if="!hasNext" class="nomore">已加载全部</view>
|
</view>
|
<u-popup :show="showPhone" round="15" mode="bottom" :safeAreaInsetBottom="true" @close="contactPhone()" :closeable="true" :closeOnClickOverlay="true">
|
<view class="phone">
|
<view class="phone-head">
|
<view></view>
|
<text>联系客户</text>
|
</view>
|
<!-- <view class="phone-item">
|
<view>
|
<image style="width: 36rpx;height: 36rpx" src="/static/icon/ic_kefu.png" mode="widthFix"></image>
|
<button open-type="contact" plain="true" bindcontact="handleContact">在线客服</button>
|
</view>
|
<view class="line" v-if="serverPhone && serverPhone.length"></view>
|
</view> -->
|
<view class="phone-item" >
|
<view>
|
<image src="/static/icon/ic_call@2x.png" mode="widthFix" @click="contactPhoneDo()" ></image>
|
<text>{{linkItem.linkname||''}} </text>
|
<text style="margin-left: 10px;"> {{linkItem.linkphone||''}}</text>
|
</view>
|
</view>
|
<view style="width: 100%; height: 30rpx;"></view>
|
<!-- <view class="phone-botton" @click="contactPhone()" >关闭</view> -->
|
</view>
|
</u-popup>
|
<!-- 确认收货 -->
|
<u-popup :show="showDone" round="15" :safeAreaInsetBottom="false" mode="center">
|
<view class="tc">
|
<view class="tc-contemt">
|
<view class="tc-contemt-title">确认收货提醒</view>
|
<view class="tc-contemt-nr">
|
您确认已经收到商品了吗？
|
</view>
|
</view>
|
<view class="tc-btn">
|
<view class="tc-btn-item" @click="showDone = false;currentOrder=null;">取消</view>
|
<view class="tc-btn-item" style="color: #004096;" @click="doneOrderDo()">确认收货</view>
|
</view>
|
</view>
|
</u-popup>
|
<!-- 取消订单 -->
|
<u-popup :show="showCancel" round="15" :safeAreaInsetBottom="false" mode="center">
|
<view class="tc">
|
<view class="tc-contemt">
|
<view class="tc-contemt-title">确定取消提醒</view>
|
<view class="tc-contemt-nr">
|
您确认取消该订单吗？
|
</view>
|
</view>
|
<view class="tc-btn">
|
<view class="tc-btn-item" @click="showCancel = false;currentOrder=null;">我再想想</view>
|
<view class="tc-btn-item" style="color: red;" @click="cancelOrderDo">确认取消</view>
|
</view>
|
</view>
|
</u-popup>
|
<!-- 删除订单 -->
|
<u-popup :show="showDelete" round="15" :safeAreaInsetBottom="false" mode="center">
|
<view class="tc">
|
<view class="tc-contemt">
|
<view class="tc-contemt-title">确认删除提醒</view>
|
<view class="tc-contemt-nr">
|
您确认删除该订单吗？
|
</view>
|
</view>
|
<view class="tc-btn">
|
<view class="tc-btn-item" @click="showDelete = false;currentOrder=null;">我再想想</view>
|
<view class="tc-btn-item" style="color: red;" @click="deleteOrderDo">确认删除</view>
|
</view>
|
</view>
|
</u-popup>
|
<u-popup :show="showQrcode" round="15" @close="openQrcode()" :safeAreaInsetBottom="false" mode="bottom" :closeable="true" :closeOnClickOverlay="false">
|
<view class="tc" style="width: 100%;">
|
<view class="tc-contemt">
|
<view class="tc-contemt-title" style="text-align: center;">自提码</view>
|
<view class="tc-contemt-nr" style="border: 1rpx solid #f2f2f2;width: 150px;height: 150px;">
|
<image style="border: 1rpx solid #f2f2f2;width: 150px;height: 150px;" v-if="currentOrder && currentOrder.qrCodeBase64" :src="currentOrder.qrCodeBase64" model="widthFix" ></image>
|
</view>
|
<view class="tc-contemt-title" style="text-align: center;">{{currentOrder.exchangeCode|| ''}}</view>
|
</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
import QRCode from 'qrcode';
|
export default {
|
computed: {
|
...mapState(['navHeight', 'statusbarHeight','shopInfo', 'shopToken'])
|
},
|
data() {
|
return {
|
i: '',
|
currentOrder:null,
|
showDone:false,
|
showCancel:false,
|
showDelete:false,
|
showQrcode:false,
|
showPay:false,
|
showPhone:false,
|
loading:false,
|
active:0,
|
currentPage:1,
|
total:0,
|
hasNext:true,
|
userType:null,
|
dataList:[],
|
shop:{},
|
linkItem:{},
|
cate:[],
|
cate1: [
|
{ name: '全部', id: '' ,index:0},
|
{ name: '待支付', id: 0 ,index:1},
|
{ name: '待发货/自提', id: 1,index:2 }
|
],
|
cate0: [
|
{ name: '全部', id: '' ,index:0},
|
{ name: '待支付', id: 0 ,index:1},
|
{ name: '待发货/自提', id: 1,index:2 },
|
{ name: '待收货', id: 2 ,index:3},
|
]
|
};
|
},
|
onLoad(options) {
|
console.log(options )
|
this.active = 0
|
this.cate =[]
|
this.userType = Number(options.userType)
|
if(this.userType == 1){
|
this.shop ={}
|
this.checkShopLogin()
|
this.shop = this.shopInfo || {}
|
this.cate =this.cate1;
|
}else{
|
this.cate =this.cate0;
|
}
|
if (options.status) {
|
this.active = Number(options.status)
|
this.i = this.cate[this.active].id
|
}
|
this.getFirstPageData()
|
var that =this
|
uni.$on('updateOrder',function(data){
|
console.log('监听到事件来自 update ，携带参数 msg 为：' ,data);
|
if(data.delete == 1){
|
//删除订单，强制刷新数据
|
that.getFirstPageData()
|
}else if(data.info!=null && data.info.orderId!=null){
|
console.log('监听到事件来自 update 01：' ,data);
|
that.dataList.forEach((item,index)=>{
|
if(item.id==data.info.orderId){
|
console.log('监听到事件来自 update 02：' ,data);
|
item.status = data.info.orderStatus
|
}
|
})
|
}
|
|
})
|
},
|
onShow() {
|
this.showDone=false
|
this.showCancel=false
|
this.showDelete=false
|
this.showQrcode=false
|
this.showPay=false
|
this.showPhone=false
|
this.loading=false,
|
this.currentOrder=null
|
},
|
onReachBottom(){
|
this.getDataList();
|
},
|
methods: {
|
async openQrcode(item){
|
this.currentOrder = null
|
var that =this
|
if(!this.showQrcode){
|
this.currentOrder = item
|
if(this.currentOrder.qrCodeBase64 == undefined && this.currentOrder.qrCodeBase64==null){
|
try {
|
const ocanvas = uni.createOffscreenCanvas({ type: "2d" });
|
const qrCodeBase64 = await QRCode.toDataURL(ocanvas,this.currentOrder.exchangeCode, {
|
scale: 1, // 二维码的缩放比例，可以根据需要调整
|
width: 150, // 二维码的宽度，可以根据需要调整
|
margin: 1 // 二维码周围的空白边距，可以根据需要调整
|
});
|
this.currentOrder.qrCodeBase64 =qrCodeBase64
|
that.showQrcode = true
|
} catch (err) {
|
uni.showToast({
|
title:'生成自提码失败',
|
icon:'error'
|
})
|
}
|
}else{
|
that.showQrcode = true
|
}
|
}else{
|
this.showQrcode = false
|
}
|
},
|
hexiaoOrder(item){
|
uni.navigateTo({
|
url:'/pagesA/pages/write-off-a/write-off-a?id='+item.id
|
})
|
},
|
cancelOrder(item){
|
this.currentOrder = null
|
this.showCancel = !this.showCancel
|
if(this.showCancel){
|
this.currentOrder = item
|
}
|
},
|
deleteOrder(item){
|
this.currentOrder = null
|
this.showDelete = !this.showDelete
|
if(this.showDelete){
|
this.currentOrder = item
|
}
|
},
|
|
payOrder(item){
|
},
|
doneOrder(item){
|
this.currentOrder = null
|
this.showDone = !this.showDone
|
if(this.showDone){
|
this.currentOrder = item
|
}
|
},
|
async doneOrderDo(){
|
if(this.userType == 1 || this.currentOrder==null || this.currentOrder.id == null) {
|
return
|
}
|
var that =this
|
let res = await this.$u.api.affirmOrder({ orderId: this.currentOrder.id });
|
if (res.code === 200 ) {
|
//修改订单状态
|
this.dataList.forEach(item=>{
|
if(item.id==this.currentOrder.id){
|
item.status =3
|
}
|
})
|
this.doneOrder()
|
}else{
|
/* uni.showToast({
|
title:res.message||'确定收货失败！',
|
icon:'error'
|
}) */
|
}
|
},
|
async cancelOrderDo(){
|
if(this.userType == 1 || this.currentOrder==null || this.currentOrder.id == null) {
|
return
|
}
|
var that =this
|
let res = await that.$u.api.cancelOrder({ orderId: this.currentOrder.id });
|
if (res.code === 200 ) {
|
//修改订单状态
|
this.dataList.forEach(item=>{
|
if(item.id==this.currentOrder.id){
|
item.status = 4
|
}
|
})
|
this.cancelOrder()
|
}else{
|
/* uni.showToast({
|
title:res.message||'取消订单失败！',
|
icon:'error'
|
}) */
|
}
|
},
|
async deleteOrderDo(){
|
if(this.userType == 1 || this.currentOrder==null || this.currentOrder.id == null) {
|
return
|
}
|
var that =this
|
let res = await that.$u.api.delOrder({ orderId: this.currentOrder.id });
|
if (res.code === 200 ) {
|
//修改订单状态
|
/* var tindex = -1;
|
this.dataList.forEach((item,index)=>{
|
if(item.id==this.currentOrder.id){
|
tindex = index
|
}
|
})
|
if(tindex>=0){
|
this.dataList.splice(tindex,1)
|
} */
|
this.getFirstPageData()
|
}else{
|
/* uni.showToast({
|
title:res.message||'删除订单失败！',
|
icon:'error'
|
}) */
|
}
|
},
|
contactPhone(item){
|
this.showPhone = !this.showPhone
|
this.linkItem = item ||{}
|
console.log("==================================",this.showPhone)
|
},
|
contactPhoneDo(){
|
if(this.linkItem.linkphone !=null && this.linkItem.linkphone!=''){
|
uni.makePhoneCall({
|
phoneNumber: this.linkItem.linkphone
|
})
|
}
|
},
|
changeRow( item) {
|
this.active=item.index
|
this.i = item.id
|
this.getFirstPageData()
|
},
|
getFirstPageData(){
|
this.currentPage = 0
|
this.hasNext=true
|
this.total=0
|
this.dataList=[]
|
this.getDataList()
|
},
|
async getDataList(){
|
if(this.loading || !this.hasNext){
|
return
|
}
|
this.loading=true
|
this.currentPage = this.currentPage+1
|
if(this.currentPage == 1){
|
this.hasNext =true
|
this.dataList=[]
|
}
|
var that =this
|
let res ={};
|
if(this.userType == 1){
|
res = await that.$u.api.shopOrderPage({
|
capacity:10,
|
model: {
|
receiveType: 1,
|
status: this.i
|
},
|
page:this.currentPage
|
});
|
}else{
|
res = await that.$u.api.orderPage({
|
capacity:10,
|
model: {
|
receiveType: 1,
|
status: this.i
|
},
|
page:this.currentPage
|
});
|
}
|
console.log(res)
|
if (res.code === 200 ) {
|
if ( res.data && res.data.page ===this.currentPage) {
|
res.data.records = res.data.records||[]
|
that.dataList.push(...res.data.records)
|
that.total=res.data.total
|
if( this.currentPage >= res.data.pageCount||0){
|
that.hasNext=false
|
}else{
|
that.hasNext=true
|
}
|
}
|
}
|
this.loading=false
|
},
|
jumpOrderDetail(id){
|
uni.navigateTo({
|
url: '/pagesA/pages/order-details/order-details?userType='+this.userType+'&id='+id
|
})
|
},
|
checkShopLogin(){
|
var that =this
|
if( this.shopInfo ==null || this.shopInfo.id==null || this.shopToken==null || this.shopToken==''){
|
uni.navigateTo({
|
url: '/pages/login/login'
|
})
|
}
|
}
|
}
|
}
|
</script>
|
<style>
|
page {
|
background-color: #F9F9FB;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
.list {
|
width: 100%;
|
padding: 22rpx 30rpx;
|
padding-bottom: 60rpx;
|
box-sizing: border-box;
|
.list-item {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
border-radius: 16rpx;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.a {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.a-left {
|
display: flex;
|
align-items: center;
|
.a-left-tips {
|
padding: 0 6rpx;
|
height: 40rpx;
|
line-height: 40rpx;
|
border-radius: 8rpx;
|
font-weight: 400;
|
font-size: 22rpx;
|
color: #FFFFFF;
|
margin-right: 16rpx;
|
}
|
.shop-top-tips-a {
|
background: #00B775;
|
border: 1rpx solid #00B775;
|
}
|
.shop-top-tips-b {
|
background: #004096;
|
border: 1rpx solid #004096;
|
}
|
text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #222222;
|
}
|
}
|
.a-right {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #E4001D;
|
}
|
.grey{
|
color: #999999 !important;
|
}
|
}
|
.d{
|
width: 100%;
|
padding:20rpx 20rpx;
|
margin-top: 22rpx;
|
background: #F8F9FB;
|
border-radius: 8rpx;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #666666;
|
line-height: 36rpx;
|
text-align: left;
|
font-style: normal;
|
}
|
.b {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
margin-top: 22rpx;
|
.b-item {
|
width: 100%;
|
height: 136rpx;
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
margin-bottom: 22rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.b-item-image {
|
flex-shrink: 0;
|
width: 136rpx;
|
height: 136rpx;
|
border-radius: 8rpx;
|
overflow: hidden;
|
border: 1rpx solid #E5E5E5;
|
margin-right: 20rpx;
|
image {
|
width: 100%;
|
}
|
}
|
.b-item-title {
|
flex: 1;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
margin-right: 30rpx;
|
display: -webkit-box;
|
-webkit-line-clamp: 2; /* 限制文本为2行 */
|
-webkit-box-orient: vertical;
|
overflow: hidden;
|
}
|
.b-item-jia {
|
flex-shrink: 0;
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
text {
|
&:nth-child(1) {
|
font-weight: 500;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #999999;
|
margin-top: 14rpx;
|
}
|
}
|
}
|
}
|
}
|
.c {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 24rpx;
|
.c-label {
|
display: flex;
|
align-items: center;
|
.c-label-title {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #333333;
|
}
|
.c-label-price {
|
display: flex;
|
align-items: baseline;
|
text {
|
&:nth-child(1) {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
&::before {
|
content: '￥';
|
font-weight: 600;
|
font-size: 26rpx;
|
color: #222222;
|
}
|
}
|
&:nth-child(2) {
|
font-weight: 600;
|
font-size: 26rpx;
|
color: #222222;
|
}
|
}
|
}
|
}
|
.c-btns {
|
display: flex;
|
align-items: center;
|
.blue {
|
border: 1rpx solid #004096;
|
color: #004096 !important;
|
}
|
.grey {
|
border: 1rpx solid #666666;
|
color: #666666 !important;
|
}
|
.bg{
|
background: #004096;
|
border-radius: 34rpx;
|
border: 1rpx solid #004096;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #FFFFFF !important;
|
line-height: 40rpx;
|
text-align: center;
|
font-style: normal;
|
}
|
.c-btns-item {
|
padding: 0 24rpx;
|
box-sizing: border-box;
|
height: 64rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 34rpx;
|
// border: 1rpx solid #B2B2B2;
|
font-weight: 400;
|
font-size: 28rpx;
|
// color: #666666;
|
margin-right: 20rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
}
|
}
|
}
|
}
|
}
|
.cate {
|
width: 100%;
|
height: 90rpx;
|
display: flex;
|
align-items: center;
|
background: #FFFFFF;
|
position: sticky;
|
top: 0;
|
left: 0;
|
z-index: 999;
|
.cate-item {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #666666;
|
position: relative;
|
.cate-item-xiab {
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translate(-50%, 0);
|
width: 40rpx;
|
height: 6rpx;
|
background-color: #004096;
|
}
|
}
|
}
|
}
|
</style>
|
