372 lines
15 KiB
Vue
372 lines
15 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<status-nav :titleVal="'订单管理'" :statusTitle="true"></status-nav>
|
||
<!-- 自定义二级分类 -->
|
||
<view class="isTopf bacf pad-zy30" :style="{top:statusHNH+'px'}">
|
||
<scroll-view scroll-x>
|
||
<view id="daoh" class="disjbac pad-s20">
|
||
<view @tap="chooseNav(indexn)" class="posir pad-s20 pad-zy20 pad-x30 flexs mar-y10" style="text-align: center;" :class="activeIndex==indexn?'activeD':''" :style="{color:activeIndex==indexn?'#3875F6':'#000000'}" v-for="(itemn,indexn) in statusList" :key="indexn">{{itemn}}</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view :style="{paddingTop:(statusHNH+12+chuTop)+'px'}" class="pad-sx20 pad-zy32">
|
||
<view v-if="orderList.length!=0" v-for="(item,index) in orderList" :key="index" class="radius20 bacf pad20 mar-x20 order-item-box">
|
||
<view @tap="goDetail(item.id)" class="bbot disjbac pad-x20 mar-x20"><view class="fon28 col3 bold">{{item.isShop==0?'商城订单':'积分商城订单'}}</view><view class="fon24 col9">{{item.establish}}</view></view>
|
||
<view @tap="goDetail(item.id)" class="disjbac fon24">
|
||
<view class="col3">订单号：{{item.orderNum}}</view>
|
||
<view v-if="item.virtual_check==0" class="bold" :class="(item.orderStatus==1 || item.orderStatus==2 || item.orderStatus==3) ? 'colf8':'col9'">{{['','待付款','待发货','待核验','待收货','交易完成'][item.orderStatus]}}</view>
|
||
<view v-if="item.virtual_check==1" class="bold col9">已核验</view>
|
||
</view>
|
||
<view v-for="(itemc,indexc) in item.childrenList" :key="indexc" class="fon26 col3 disjbac pad-sx50 disjbac bbot posir" :style="{paddingBottom:itemc.is_virtual!=0?'70rpx':'50rpx'}">
|
||
<image @tap="goDetail(item.id)" :src="itemc.imgSrc" class="flexs" mode="aspectFill"></image>
|
||
<view @tap="goDetail(item.id)" class="width100 disjb fc" style="height: 166rpx;">
|
||
<view>
|
||
<view class="fon28 col3 bold clips2">{{itemc.title}}</view>
|
||
<view class="order-sy">{{itemc.sku_name}}</view>
|
||
</view>
|
||
<view class="disjbac mar-s10">
|
||
<view class="colf8 fon32 bold"><span v-if="item.isShop==0">￥</span><span v-else>积分：</span>{{itemc.price}}<span class="fon28 col6 mar-z20 font4">x{{itemc.num}}</span></view>
|
||
<view @tap.stop="make(index,indexc)" v-if="itemc.is_virtual!=0 && itemc.check_type=='frontend' && itemc.not_check_num!=0" class="order-btn">线下核销</view>
|
||
<view v-if="itemc.is_virtual!=0 && itemc.check_type!='frontend'" class="order-btn" style="background-color: #CCCCCC;">线上核销</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="itemc.is_virtual!=0" class="disjbac mar-s10 posia colf8" style="bottom: 20rpx;">已核验 x{{itemc.not_check_num}}</view>
|
||
</view>
|
||
<!-- <view class="fon28 col3 pad-s20 disjbac">
|
||
<view class="flexs"><span v-if="item.isShop==0">合计：<span v-if="item.is_only!=1">{{item.total}}</span><span v-if="item.is_only==1">{{item.total}}</span> +<span v-if="item.coin!=0">{{item.coin}}孔雀币</span></span><span v-else>合计积分：{{item.total}}</span></view>
|
||
<view class="width100 disac" style="justify-content: flex-end;">
|
||
<view @tap="transferFrame(index)" v-if="item.orderStatus != 0 && item.orderStatus != 5" class="order-cancle">取消订单</view>
|
||
<view @tap="payMentEv(index)" v-if="item.orderStatus == 1" class="order-btn">付款</view>
|
||
<view @tap="isHeyan=true" v-if="item.orderStatus == 3" class="order-btn">线下核销</view>
|
||
<view class="order-btn">单人拼团</view>
|
||
<view @tap="confirmReceipt(item.id)" v-if="item.orderStatus == 4" class="order-btn">确认收货</view>
|
||
</view>
|
||
</view> -->
|
||
<view class="fon28 col3">
|
||
<view class="mar-sx20 disje"><span v-if="item.isShop==0">合计：<span v-if="item.is_only!=1">{{item.total}}</span><span v-if="item.is_only==1">{{item.total}}</span> <span v-if="item.coin!=0">+{{item.coin}}孔雀币</span></span><span v-else>合计积分：{{item.total}}</span></view>
|
||
<view class="width100 disje">
|
||
<view v-if="item.is_only==0 && item.open_one==1" class="order-btn mar-y20">直接免拼</view>
|
||
<view @tap="transferFrame(index)" v-if="item.orderStatus != 0 && item.orderStatus != 5 && item.virtual_check==0" class="order-cancle">取消订单</view>
|
||
<view @tap="payMentEv(index)" v-if="item.orderStatus == 1" class="order-btn">付款</view>
|
||
<!-- <view class="order-btn" v-if="item.is_only==1">单人拼团</view> -->
|
||
<view @tap="confirmReceipt(item.id)" v-if="item.orderStatus == 4" class="order-btn">确认收货</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<nothing-page v-if="orderList.length==0" :content="`暂无更多订单列表`"></nothing-page>
|
||
</view>
|
||
<!-- 待核验弹框 -->
|
||
<view v-if="isHeyan" @tap="isHeyan=false" class="disjcac tc posAll" style="z-index: 3;">
|
||
<view class="bacf width100 radius20 pad30 posir" style="margin: 0 128rpx;" @tap.stop="isHeyan=true">
|
||
<view class="fon28 col3">订单二维码</view>
|
||
<view class="mar-sx30">
|
||
<yz-qr ref="qrPath" :text="text" :size="size" :colorDark="colorDark" :colorLight="colorLight"></yz-qr>
|
||
<!-- <image src="/static/public/member-head.png" class="order-hx-img" mode="aspectFill"></image> -->
|
||
</view>
|
||
<view class="fon24 col3">
|
||
<view class=" mar-s40 mar-x20">工作人员扫码核销订单</view>
|
||
<view>订单未完成前请勿出示二维码</view>
|
||
</view>
|
||
<image @tap.stop="closeEv" src="/static/public/closequan.png" class="posia heyan-close" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<!-- 取消订单弹框 -->
|
||
<view v-if="isCancle" @tap.stop="isCancle=false" class="posAll">
|
||
<view class="bacf posixzy order-cancle-tk" @tap.stop="isCancle=true">
|
||
<view>
|
||
<view class="bbot pad-sx20 posir">
|
||
<view class="fon28 bold col3 width100" style="text-align: center;">取消订单</view>
|
||
<image class="posia order-close-btn" @tap.stop="isCancle=false" src="/static/public/cha-close.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="pad-zy32 pad-sx20 col5b">
|
||
<view class="fon24 linh40">
|
||
<view>温馨提示：</view>
|
||
<view>订单取消需要提交工作人员审核，商品金额将原路径返还账户，订单一旦取消，系统无法恢复。</view>
|
||
</view>
|
||
<view @tap.stop="chooseReason(indexy)" v-for="(itemy,indexy) in reasonList" :key="indexy" class="disac mar-s40">
|
||
<image v-if="itemy.isActive" src="/static/public/chooseFS.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
|
||
<image v-else src="/static/public/cancle-FS.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
|
||
<view class="mar-z20 fon28">{{itemy.title}}</view>
|
||
</view>
|
||
<!-- 确认取消按钮 -->
|
||
<view @tap.stop="confirmEv" class="confirm-btn">确认取消</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import yzQr from '@/components/yz-qr/yz-qr.vue';
|
||
export default {
|
||
components:{
|
||
yzQr
|
||
},
|
||
data() {
|
||
return {
|
||
statusHNH:uni.getStorageSync('statusHNH'),
|
||
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||
chuTop:'',//导航高度
|
||
activeIndex:'',
|
||
statusList:['全部','待付款','待发货','待核验','待收货','已完成'],
|
||
// 取消订单原因
|
||
reasonList:[
|
||
{title:'不想要了/买多了/买错了',isActive:true},
|
||
{title:'地址信息填写错误',isActive:false},
|
||
{title:'其他原因',isActive:false},
|
||
],
|
||
isHeyan:false,//是否线下审核
|
||
isCancle:false,//是否取消订单
|
||
orderList:[],
|
||
zanList:[],//暂存列表数据
|
||
page:1,
|
||
size:10,
|
||
total:'',//总数
|
||
isZanw:true,
|
||
tag:'',//默认全部 waiting=待付款 paid=已付款待发货 shipped=已发货 completed=已完成 check=待核验
|
||
current:0,//选中的订单
|
||
remarks:'',//原因
|
||
times:0,//点击次数
|
||
canvasQrPath: '',
|
||
text: 'hello',
|
||
size: 162,
|
||
colorDark: '#000000',
|
||
colorLight: '#ffffff',
|
||
timer:null
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
if(this.total!=this.orderList.length){
|
||
this.page++
|
||
this.checkList(this.activeIndex)//调用自主预约列表事件
|
||
} else {
|
||
if(this.isZanw) this.$toolAll.tools.showToast('暂无更多记录','none',1000)
|
||
this.isZanw = false
|
||
}
|
||
},
|
||
onUnload() {
|
||
this.closeEv();
|
||
},
|
||
onShow() {
|
||
this.$toolAll.tools.isLogin();
|
||
this.checkZT(this.activeIndex);
|
||
this.checkList(this.activeIndex);
|
||
},
|
||
onLoad(options) {
|
||
const query = wx.createSelectorQuery()
|
||
query.select('#daoh').boundingClientRect((rect) => {
|
||
// console.log('状态栏+标题栏：',rect);
|
||
this.chuTop = rect.height
|
||
}).exec()
|
||
options.index==undefined ? this.activeIndex = 0 : this.activeIndex = options.index;
|
||
},
|
||
methods: {
|
||
make(index,index2){
|
||
this.isHeyan = true;
|
||
this.text = `${this.orderList[index].orderNum},${this.orderList[index].childrenList[index2].id}`;
|
||
let params = {
|
||
order_coding:this.orderList[index].orderNum,
|
||
id:this.orderList[index].childrenList[index2].id,
|
||
not_check_num:this.orderList[index].childrenList[index2].not_check_num
|
||
}
|
||
this.timer = setInterval(()=>{
|
||
this.$requst.post('order/check-result',params).then(res=>{
|
||
if(res.code==0){
|
||
if(res.data.result==1){
|
||
this.isHeyan = false;
|
||
this.$toolAll.tools.showToast('已完成');
|
||
this.checkList(this.activeIndex);
|
||
clearInterval(this.timer);
|
||
}
|
||
}
|
||
})
|
||
},3000)
|
||
// var that = this;
|
||
// setTimeout(function() {
|
||
// that.canvasQrPath = that.$refs.qrPath.canvasQrPath;
|
||
// console.log('获取二维码地址:', that.canvasQrPath)
|
||
// }, 1000)
|
||
},
|
||
closeEv(){
|
||
this.isHeyan = false;
|
||
clearInterval(this.timer);
|
||
},
|
||
checkZT(index){
|
||
if(index==0){this.tag=""}
|
||
if(index==1){this.tag="waiting"}
|
||
if(index==2){this.tag="paid"}
|
||
if(index==3){this.tag="check"}
|
||
if(index==4){this.tag="shipped"}
|
||
if(index==5){this.tag="completed"}
|
||
},
|
||
chooseNav(index){
|
||
this.page =1;
|
||
this.activeIndex = index;
|
||
this.checkZT(index);
|
||
this.checkList(index);
|
||
},
|
||
checkList(index){//查询订单列表
|
||
this.$requst.post('user/order',{page:this.page,size:this.size,tag:this.tag}).then(res=>{
|
||
if(res.code==0){
|
||
if(this.page==1) {
|
||
uni.pageScrollTo({//回到顶部
|
||
scrollTop: 0,
|
||
duration: 0
|
||
});
|
||
this.orderList = [];
|
||
}
|
||
this.total = res.data.total;
|
||
if(res.data.list.length!=0){
|
||
res.data.list.forEach(item=>{
|
||
let statusNum = 0;
|
||
if(item.status=="waiting") statusNum = 1;
|
||
if(item.status=="paid" && item.has_virtual==1) {
|
||
statusNum = 3;
|
||
}
|
||
if(item.status=="paid" && item.has_virtual==0) {
|
||
statusNum = 2;
|
||
}
|
||
// if(item.status=="check")
|
||
if(item.status=="shipped") statusNum = 4;
|
||
if(item.status=="completed") statusNum = 5;
|
||
let nprice = '';
|
||
if(item.is_score==0) nprice = this.$toolAll.tools.addXiaoShu(item.price/100);
|
||
if(item.is_score==1) nprice = item.score;
|
||
let nchildren = [];
|
||
item.skus.forEach(items=>{
|
||
let childrenPrice = '';
|
||
if(item.is_score==0) childrenPrice = items.price/100
|
||
if(item.is_score==1) childrenPrice = items.score
|
||
let objs = {
|
||
id:items.id,
|
||
imgSrc:this.$http + items.spu_cover,
|
||
title:items.spu_name,
|
||
sku_name:items.sku_name,
|
||
price:childrenPrice,
|
||
num:items.num,
|
||
not_check_num:items.not_check_num,
|
||
check_type:items.check_type,
|
||
is_virtual:items.is_virtual,
|
||
activity_type:items.activity_type
|
||
}
|
||
nchildren.push(objs);
|
||
})
|
||
let obj = {
|
||
id:item.id,
|
||
establish:item.created_at,//创建时间
|
||
orderNum:item.coding,//订单号
|
||
childrenList:nchildren,
|
||
orderStatus:statusNum,//1 待付款，2 待发货，3 待核验，4 待收货，5 交易已完成
|
||
isShop:item.is_score,//0 商城订单,1 积分商城订单
|
||
total: nprice,//合计
|
||
coin:item.coin,//孔雀币
|
||
is_only:item.is_only,//是否单独购买
|
||
virtual_check:item.virtual_check,
|
||
// open_one:item.open_one
|
||
}
|
||
this.orderList.push(obj);
|
||
})
|
||
this.zanList = this.orderList;
|
||
if(index==0) {
|
||
this.orderList = this.zanList;
|
||
} else {
|
||
this.orderList = this.zanList.filter(item=>{
|
||
return item.orderStatus==index;
|
||
});
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
payMentEv(index){//付款
|
||
this.$requst.post('order/pay',{order_coding:this.orderList[this.current].orderNum}).then(res=>{
|
||
if(res.code==0){
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
appId:res.data.payment_params.appId,//appId
|
||
timeStamp: res.data.payment_params.timeStamp,//时间戳
|
||
nonceStr: res.data.payment_params.nonceStr,//随机字符串
|
||
package: res.data.payment_params.package,//package
|
||
signType: res.data.payment_params.signType,//MD5
|
||
paySign: res.data.payment_params.sign,//签名
|
||
success:(res)=> {
|
||
this.$requst.post('order/paid',{order_coding:this.orderList[this.current].orderNum}).then(res=>{
|
||
if(res.code==0){
|
||
this.$toolAll.tools.showToast('付款成功');
|
||
this.checkList(this.activeIndex)
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
|
||
})
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
hexiaoEv(){//核销事件
|
||
this.$requst.post('order/check').then(res=>{
|
||
if(res.code==0){
|
||
|
||
}
|
||
})
|
||
},
|
||
transferFrame(index){//调起取消原因弹框
|
||
this.isCancle = true;
|
||
this.current = index;
|
||
this.reasonList.forEach(item=>{
|
||
item.isActive = false;
|
||
})
|
||
this.reasonList[0].isActive = true;
|
||
},
|
||
chooseReason(index){//取消订单原因选择事件
|
||
this.reasonList.forEach(item=>item.isActive = false);
|
||
this.reasonList[index].isActive = true;
|
||
this.remarks = this.reasonList[index].title;
|
||
},
|
||
confirmEv(){//确认取消订单事件
|
||
if(this.times==0){
|
||
this.times++;
|
||
this.$toolAll.tools.showToast('正在取消...');
|
||
this.$requst.post('order/cancel',{order_coding:this.orderList[this.current].orderNum,remarks:this.remarks}).then(res=>{
|
||
if(res.code==0){
|
||
this.isCancle = false;
|
||
this.orderList.splice(this.current,1);
|
||
this.page = 1;
|
||
this.checkList(this.activeIndex);
|
||
this.$toolAll.tools.showToast('取消成功');
|
||
this.times = 0;
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
})
|
||
}
|
||
},
|
||
confirmReceipt(id){//确认收货事件
|
||
this.$requst.post('order/accepted',{order_id:id}).then(res=>{
|
||
if(res.code==0){
|
||
this.$toolAll.tools.showToast('收货成功');
|
||
this.checkList(this.activeIndex);
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
})
|
||
},
|
||
goDetail(id){//去订单详情
|
||
uni.navigateTo({
|
||
url:`/pagesB/orderDetail/orderDetail?id=${id}`
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.activeD::after{
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 8rpx;
|
||
background: #3875F6;
|
||
width: 100%;
|
||
}
|
||
</style>
|