496 lines
20 KiB
Vue
496 lines
20 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<status-nav :titleVal="'订单管理'" :statusTitle="true"></status-nav>
|
||
<!-- 自定义二级分类 -->
|
||
<view class="isTopf bacf pad-zy30" :style="{top:statusHeight+'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;" :style="{color:activeIndex==indexn?publicColor:'#000000'}" v-for="(itemn,indexn) in statusList" :key="indexn">
|
||
{{itemn}}
|
||
<view v-if="activeIndex==indexn" class="activeD" :style="{background: publicColor}"></view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view :style="{paddingTop:(statusHeight+12+chuTop)+'px'}" class="pad-sx20 pad-zy32 pad-x180">
|
||
<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 v-if="item.is_only==0 && item.open_one==1 && item.is_group_make==1 && item.open_one_success==0" class="fon24 col9">{{item.group_make_end_at}}</view>
|
||
<view v-else 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.status_text}}</view>
|
||
<view v-if="item.virtual_check==1" class="bold col9">{{item.status_text}}</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 lazy-load @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 && item.orderStatus!=1" 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 && itemc.not_check_num!=0" class="mar-s10 posia col6" style="bottom: 20rpx; right: 0rpx;">待核验 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 disjbac">
|
||
<view>
|
||
<view class="" v-if="item.group">
|
||
<!-- <view v-if="item.is_only==0 && item.open_one==1 && item.is_group_make==1 && item.open_one_success==0" class="posir disjcac flexs" style="color: #010101;font-size: 24rpx;"> -->
|
||
<view v-if="item.is_only==0 && item.group.surplus > 0" class="posir disjcac flexs" style="color: #010101;font-size: 24rpx;">
|
||
<image src="../../static/public/weix.png" mode="" class="flexs" style="width: 50rpx;height: 50rpx;"></image>
|
||
分享给朋友
|
||
<button open-type="share"
|
||
:data-title="item.childrenList[0].title"
|
||
:data-is_activity="item.childrenList[0].is_activity"
|
||
:data-imgsrc="item.childrenList[0].imgSrc"
|
||
:data-id="item.childrenList[0].spu_activity_id || item.childrenList[0].sku_id"
|
||
class="posia-op">分享给朋友</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<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>
|
||
<view class="disjbac">
|
||
<view class="width100 disje">
|
||
<view class="" v-if="item.group">
|
||
<view v-if="item.group.surplus > 0">
|
||
<view @tap="comeing(item.orderNum)" v-if="item.is_only==0 && item.open_one==1 && item.is_group_make==1 && item.open_one_success==0" class="order-btn mar-y20">直接免拼</view>
|
||
</view>
|
||
</view>
|
||
<view @tap="transferFrame(index)" v-if="item.orderStatus != 0 && item.orderStatus != 5 && item.virtual_check==0 && item.orderStatus!=5" 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>
|
||
</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;" catchtouchmove="return">
|
||
<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="qsize" :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>
|
||
<!-- 底部tab -->
|
||
<foot-tab :titleList="titleList" :imgList="imgList" :newcurrent='-1'></foot-tab>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import yzQr from '@/components/yz-qr/yz-qr.vue';
|
||
export default {
|
||
components:{
|
||
yzQr
|
||
},
|
||
data() {
|
||
return {
|
||
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: '',
|
||
qsize: 162,
|
||
colorDark: '#000000',
|
||
colorLight: '#ffffff',
|
||
timer:null,
|
||
zanArr:[],
|
||
timeList:[],
|
||
orderInfo:{},
|
||
checkGrounpId:0,
|
||
}
|
||
},
|
||
computed: {
|
||
// 底部标题
|
||
titleList() {
|
||
return this.$store.state.titleList
|
||
},
|
||
// 底部图标
|
||
imgList() {
|
||
return this.$store.state.imgList
|
||
},
|
||
statusHeight() {
|
||
return this.$store.state.statusHeight
|
||
},
|
||
// 主题颜色
|
||
publicColor() {
|
||
return this.$store.state.publicColor
|
||
},
|
||
},
|
||
onShareAppMessage(res) {
|
||
var shareObj = {
|
||
title: res.target.dataset.title, // 默认是小程序的名称(可以写slogan等)
|
||
path: `/pagesB/shopDetail/shopDetail?id=${res.target.dataset.id}&category_id=0&is_activity=${res.target.dataset.is_activity}&share_id=${uni.getStorageSync('userId')}&invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面，必须是以‘/’开头的完整路径
|
||
imageUrl: res.target.dataset.imgsrc//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
|
||
};
|
||
return shareObj;
|
||
// return false;
|
||
},
|
||
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.disableShareEv();
|
||
this.checkZT(this.activeIndex);
|
||
this.checkList(this.activeIndex);
|
||
},
|
||
onLoad(options) {
|
||
options.index==undefined ? this.activeIndex = 0 : this.activeIndex = options.index;
|
||
const query = wx.createSelectorQuery()
|
||
query.select('#daoh').boundingClientRect((rect) => {
|
||
// console.log('状态栏+标题栏：',rect);
|
||
this.chuTop = rect.height
|
||
}).exec()
|
||
},
|
||
methods: {
|
||
comeing(coding){
|
||
this.$requst.post('user/open-one',{order_coding:coding}).then(res=>{
|
||
if(res.code==0){
|
||
this.$toolAll.tools.showToast('免拼成功');
|
||
this.checkList(this.activeIndex);
|
||
}
|
||
})
|
||
},
|
||
make(index,index2){
|
||
this.isHeyan = true;
|
||
this.text = `${this.orderList[index].orderNum}H${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.zanArr = [];
|
||
this.timeList = [];
|
||
}
|
||
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") {
|
||
statusNum = 2;
|
||
}
|
||
if(item.status=="check") statusNum = 3;
|
||
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,
|
||
is_activity:items.is_activity,
|
||
spu_id:items.spu_id,
|
||
spu_activity_id:items.spu_activity_id,
|
||
}
|
||
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,//是否单独购买,1、单独购买
|
||
virtual_check:item.virtual_check,
|
||
open_one:item.open_one,
|
||
open_one_success:item.open_one_success,
|
||
is_group_make:item.is_group_make,
|
||
group_make_end_at:item.group_make_end_at,
|
||
group_id:item.group_id,
|
||
status_text: item.group!=null && item.status_text!='已完成' && item.status_text!='待付款' ? (item.group.surplus > 0 ? '待拼成' : item.status_text) : item.status_text,//订单状态文字描述
|
||
group:item.group//拼团商品信息
|
||
}
|
||
this.zanArr.push(obj);
|
||
})
|
||
this.zanArr.forEach((item,index)=>{
|
||
if(item.group_make_end_at!='' && item.group_make_end_at!=null) {
|
||
let obj = {
|
||
id:item.id,
|
||
time:item.group_make_end_at,
|
||
nIndex:index
|
||
}
|
||
this.timeList.push(obj);
|
||
}
|
||
})
|
||
if(this.timeList!=0){
|
||
uni.showToast({
|
||
title:'加载中...',
|
||
icon:'none',
|
||
duration:100000
|
||
})
|
||
this.timer = setInterval(()=>{//定时器
|
||
if(this.timeList.length!=0){
|
||
this.timeList.forEach((item,index)=>{
|
||
if(item.id==this.zanArr[item.nIndex].id){
|
||
let endTime = new Date(this.timeList[index].time).getTime();//把结束时间转时间戳
|
||
let startTime = new Date().getTime() + 1000;//请求接口的时间递增，即：开始时间
|
||
if(startTime - endTime >=0) {//如果开始时间的时间戳 - 结束时间的时间戳 >= 0 活动结束
|
||
// this.checkList(this.activeIndex);
|
||
} else {
|
||
// 继续进行倒计时
|
||
this.zanArr[item.nIndex].group_make_end_at = this.$toolAll.tools.dayTime(this.timeList[index].time,startTime);
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},1000)
|
||
setTimeout(()=>{
|
||
uni.hideToast();
|
||
this.orderList = this.zanArr;
|
||
// this.search_result = true;
|
||
},1000)
|
||
} else {
|
||
uni.hideToast();
|
||
this.orderList = this.zanArr;
|
||
}
|
||
this.zanList = this.orderList;
|
||
if(index==0) {
|
||
this.orderList = this.zanList;
|
||
} else if(index==3){
|
||
|
||
} 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{
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 8rpx;
|
||
background: #3875F6;
|
||
width: 100%;
|
||
}
|
||
</style>
|