hm-examples/pagesA/myOrder/myOrder.vue

496 lines
20 KiB
Vue
Raw Normal View History

2022-04-25 06:38:26 +00:00
<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>
2022-04-25 06:38:26 +00:00
</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
},
2022-04-25 06:38:26 +00:00
},
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{
2022-04-25 06:38:26 +00:00
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 8rpx;
background: #3875F6;
width: 100%;
}
</style>