perry-mall/pagesA/myOrder/myOrder.vue

507 lines
20 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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 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.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 && 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 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="disjbac">
<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;">
<image src="../../static/public/weix.png" mode="" class="flexs" style="width: 50rpx;height: 50rpx;"></image>
分享给朋友
<button open-type="share" :data-id="index" class="posia-op">分享给朋友</button>
</view>
<view class="width100 disje">
<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 @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 {
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: '',
qsize: 162,
colorDark: '#000000',
colorLight: '#ffffff',
timer:null,
zanArr:[],
timeList:[],
orderInfo:{},
checkGrounpId:0,
titleList:[],//tab标题
imgList:[],//tab图标
}
},
onShareAppMessage(res) {
var ya = this;
let orderIndex = res.target.dataset.id;
this.orderInfo = this.orderList[orderIndex];
this.$requst.post('user/record',{type:'content',action:'share',id:this.orderInfo.childrenList[0].spu_id}).then(res=>{console.log('分享成功:',res);},error=>{})
let maiOjb = {
e:4,//内容分享
c:this.orderInfo.childrenList[0].spu_id*1,
t:new Date().getTime()//当前时间戳
}
this.$toolAll.tools.maiDian(maiOjb);
var shareObj = {
     title: `${ya.orderInfo.childrenList[0].title}`, // 默认是小程序的名称(可以写slogan等)
     path: `/pagesB/shopDetail/shopDetail?id=${ya.orderInfo.childrenList[0].spu_activity_id}&category_id=0&share_id=${ya.orderInfo.group_id}&invite_code=${uni.getStorageSync('invite_code')}&shareCate=1&checkGrounpId=${ya.orderInfo.childrenList[0].spu_activity_id}&is_activity=1`, // 默认是当前页面,必须是以‘/’开头的完整路径
     imageUrl: ya.orderInfo.childrenList[0].imgSrc//自定义图片路径可以是本地文件路径、代码包文件路径或者网络图片路径支持PNG及JPG不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
  };
  return shareObj;
},
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;
this.$requst.post('index/mini-program-setting').then(res=>{
// log('数据:',res);
if(res.code==0){
if(res.data.length!=0){
if(res.data.footBar.length!=0){//底部导航
res.data.footBar.forEach(item=>{
let newName = item.name
let newObj = {
iconPath:this.$http + item.icon[0],
selectedIconPath:this.$http + item.icon[1],
}
if(item.key=="home"){
this.imgList[0] = newObj
this.titleList[0] = newName
}
if(item.key=="category"){
this.imgList[1] = newObj
this.titleList[1] = newName
}
if(item.key=="service"){
this.imgList[2] = newObj
this.titleList[2] = newName
}
if(item.key=="shop"){
this.imgList[3] = newObj
this.titleList[3] = newName
}
if(item.key=="my"){
this.imgList[4] = newObj
this.titleList[4] = newName
}
})
uni.setStorageSync('footTitle',this.titleList)
uni.setStorageSync('footimg',this.imgList)
this.titleList = uni.getStorageSync('footTitle')
this.imgList = uni.getStorageSync('footimg')
}
}
}
},error=>{})
},
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")
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,
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,
is_group_make:item.is_group_make,
open_one_success:item.open_one_success,
group_make_end_at:item.group_make_end_at,
group_id:item.group_id
}
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){
console.log(1234);
} 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>