328 lines
12 KiB
Vue
328 lines
12 KiB
Vue
<template>
|
||
<view class="pad-x20">
|
||
<!-- 状态栏 -->
|
||
<status-nav :navBarTitle="'我的订单'"></status-nav>
|
||
<view :style="{paddingTop: statusBarHeight +'px'}">
|
||
<!-- 导航栏 -->
|
||
<view style="position: sticky;z-index: 10;" :style="{ top: statusBarHeight +'px'}">
|
||
<swiper-tab id="tab" :list="navList" v-model="current" @input="clickTab" itemColor="#000000" lineColor="#000000"></swiper-tab>
|
||
</view>
|
||
<swiper :style="{ height: swiperHeight - statusBarHeight +'px'}" class="pad-zy30 fon30" :current="current" @change="swiperChange">
|
||
<swiper-item v-for="(item,index) in navList.length" :key="index">
|
||
<scroll-view scroll-y @scrolltolower="scrollBottomEv" style="height: 100%;">
|
||
<!-- 列表数据 -->
|
||
<view class="radius20 mar-s20 bacf6" v-for="(item1,index1) in orderList[index]" :key="index1">
|
||
<view @tap="goDetail(item1.id)" class="disjbac col0 fon30 pad30" style="border-bottom: 1rpx solid #d3d3d3;">
|
||
<view>订单号：{{item1.coding}}</view>
|
||
<view class="" :style="{color: ['','#f83030','#f83030','#61cf00','#8c8c9b','#8c8c9b'][item1.status]}">{{['','待付款','待发货','待收货','已完成','已取消'][item1.status]}}</view>
|
||
</view>
|
||
<view v-for="(item2,index2) in item1.skuList" :key="index2" class="fon26 col3 disjbac pad-sx50 mar-zy30 disjbac borbot posir">
|
||
<image @tap="goDetail(item1.id)" :src="item2.sku_cover" class="flexs mar-y20 radius30" style="width: 224rpx;height: 224rpx;" mode="aspectFill"></image>
|
||
<view @tap="goDetail(item1.id)" class="width100 disjb fc" style="height: 224rpx;">
|
||
<view class="fon28 col3 bold clips2 line-h50">{{item2.spu_name}}</view>
|
||
<view class="disac fw">
|
||
<view class="order-sy mar-y40" v-for="(item3,index3) in item2.spec_info" :key="index3">{{item3}}</view>
|
||
</view>
|
||
<view class="colpeili disjbac"><span class="order-price">￥{{item2.price}}</span><span class="fon24">x{{item2.num}}</span></view>
|
||
</view>
|
||
</view>
|
||
<view class="colpeili pad30 disjbac" style="border-top: 1rpx solid #d3d3d3;">
|
||
<view class="order-price">合计：{{item1.totalPrice}}</view>
|
||
<view class="disjbac">
|
||
<!-- 取消订单 -->
|
||
<view @tap="transferFrame(index1)" v-if="item1.status==1 || item1.status==2" class="order-btn">取消订单</view>
|
||
<!-- 立即支付 -->
|
||
<view @tap="payMentEv(item1.coding)" v-if="item1.status==1" class="order-btn" style="background-color: #f83030;color: #FFFFFF;">立即支付</view>
|
||
<!-- 确认收获 -->
|
||
<view @tap="confirmReceipt(item1.id)" v-if="item1.status==3" class="order-btn" style="background-color: #000000;color: #FFFFFF;">确认收货</view>
|
||
<!-- 再次购买 -->
|
||
<view @tap="againBuy(index1)" v-if="item1.status==4 || item1.status==5" class="order-btn">再次购买</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 暂无更多数据 -->
|
||
<pitera v-if="total==orderList[current].length"></pitera>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</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 pitera from '@/components/nothing/pitera.vue';
|
||
export default {
|
||
components:{
|
||
pitera
|
||
},
|
||
data() {
|
||
return {
|
||
statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 50,
|
||
swiperHeight:uni.getSystemInfoSync().windowHeight,
|
||
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||
chuTop:'',//导航高度
|
||
navList:[{title:'全部'},{title:'待付款'},{title:'待发货'},{title:'待收货'},{title:'已完成'},{title:'已取消'}],
|
||
// 取消订单原因
|
||
reasonList:[
|
||
{title:'不想要了/买多了/买错了',isActive:true},
|
||
{title:'地址信息填写错误',isActive:false},
|
||
{title:'其他原因',isActive:false},
|
||
],
|
||
isCancle:false,//是否取消订单
|
||
orderList:[[],[],[],[],[],[]],
|
||
zanList:[],//暂存列表数据
|
||
page:1,
|
||
size:200,
|
||
total:'',//总数
|
||
isZanw:true,
|
||
tag:'',//默认全部 waiting=待付款 paid=已付款待发货 shipped=已发货 completed=已完成 check=待核验
|
||
current:0,//选中的订单
|
||
remarks:'',//原因
|
||
times:0,//点击次数
|
||
timer:null,
|
||
zanArr:[],
|
||
timeList:[],
|
||
orderInfo:{},
|
||
checkGrounpId:0,
|
||
orderCoding:''//选中的订单编号
|
||
}
|
||
},
|
||
onShareAppMessage(res) {
|
||
var shareObj = {
|
||
title: ``, // 默认是小程序的名称(可以写slogan等)
|
||
path: ``, // 默认是当前页面，必须是以‘/’开头的完整路径
|
||
imageUrl: ''//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
|
||
};
|
||
return shareObj;
|
||
},
|
||
onReady() {
|
||
// 获取ID为tab元素的信息
|
||
uni.createSelectorQuery().in(this).select('#tab').boundingClientRect().exec(rect => {
|
||
this.swiperHeight = this.swiperHeight - rect[0].height
|
||
});
|
||
},
|
||
onUnload() {
|
||
uni.removeStorageSync('isorderDetail')
|
||
},
|
||
onShow() {
|
||
if(uni.getStorageSync('isorderDetail')==1){
|
||
// 调用查询事件
|
||
this.checkList();
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
options.index==undefined ? this.current = 0 : this.current = options.index;
|
||
if(uni.getStorageSync('phone_active')){
|
||
this.$toolAll.tools.clearShare();
|
||
if(this.current==0){
|
||
// 调用查询事件
|
||
this.checkList();
|
||
}
|
||
} else {
|
||
uni.setStorageSync('outside',2);
|
||
uni.setStorageSync('existCode',options.invite_code);
|
||
uni.setStorageSync('transientUrl',`/pagesA/myOrder/myOrder?index=0`);
|
||
uni.navigateTo({
|
||
url:'/pages/login/login'
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
// 触底事件
|
||
scrollBottomEv(){
|
||
if(this.total!=this.orderList[this.current].length){
|
||
this.page++
|
||
this.checkList();
|
||
}
|
||
},
|
||
// 状态判断事件
|
||
statejubEv(){
|
||
if(this.current == 0) this.tag = "";
|
||
if(this.current == 1) this.tag = "waiting";
|
||
if(this.current == 2) this.tag = "paid";
|
||
if(this.current == 3) this.tag = "shipped";
|
||
if(this.current == 4) this.tag = "completed";
|
||
if(this.current == 5) this.tag = "closed";
|
||
// 调用查询我的订单列表事件
|
||
this.checkList();
|
||
},
|
||
// tab点击事件
|
||
clickTab(index){
|
||
this.current = index;
|
||
this.statejubEv();
|
||
},
|
||
// 列表滑动事件
|
||
swiperChange(e){
|
||
this.current = e.detail.current;
|
||
this.statejubEv();
|
||
},
|
||
checkList(){//查询我的订单列表事件
|
||
this.$requst.post('/api/user/order',{page:this.page,size:this.size,tag:this.tag}).then(res=>{
|
||
if(res.code==0){
|
||
if(this.page==1) this.orderList[this.current] = [];
|
||
// 设置总数
|
||
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") statusNum = 2;
|
||
if(item.status=="shipped") statusNum = 3;
|
||
if(item.status=="completed") statusNum = 4;
|
||
if(item.status=="closed") statusNum = 5;
|
||
let obj = {
|
||
id:item.id,
|
||
skuList:item.skus,
|
||
totalPrice:item.price,
|
||
status:statusNum,
|
||
coding:item.coding
|
||
}
|
||
this.orderList[this.current].push(obj);
|
||
})
|
||
}
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||
},
|
||
payMentEv(coding){//付款
|
||
if(this.times==0){
|
||
this.times++;
|
||
this.$requst.post('/api/order/pay',{order_coding:coding}).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('/api/order/paid',{order_coding:this.orderList[this.current][index].coding}).then(res=>{
|
||
if(res.code==0){
|
||
this.$toolAll.tools.showToast('付款成功');
|
||
// 调用查询列表事件
|
||
this.implementListEv();
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
|
||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||
},
|
||
fail:()=> {
|
||
this.$toolAll.tools.showToast('取消支付');
|
||
// 调用查询列表事件
|
||
this.implementListEv();
|
||
}
|
||
});
|
||
}
|
||
})
|
||
}
|
||
},
|
||
transferFrame(index){//调起取消原因弹框
|
||
this.isCancle = true;
|
||
this.orderCoding = this.orderList[this.current][index].coding;
|
||
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('/api/order/cancel',{order_coding:this.orderCoding,remarks:this.remarks}).then(res=>{
|
||
if(res.code==0){
|
||
this.isCancle = false;
|
||
this.$toolAll.tools.showToast('取消成功');
|
||
// 调用查询列表事件
|
||
this.implementListEv();
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||
}
|
||
},
|
||
confirmReceipt(id){//确认收货事件
|
||
this.$requst.post('/api/order/accepted',{order_id:id}).then(res=>{
|
||
if(res.code==0){
|
||
this.$toolAll.tools.showToast('收货成功');
|
||
// 调用查询列表事件
|
||
this.implementListEv();
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||
},
|
||
goDetail(id){//去订单详情
|
||
uni.navigateTo({
|
||
url:`/pagesB/orderDetail/orderDetail?id=${id}`
|
||
})
|
||
},
|
||
// 执行查询列表事件
|
||
implementListEv(){
|
||
setTimeout(()=>{
|
||
this.times = 0;
|
||
this.page = 1;
|
||
this.checkList();
|
||
},2000)
|
||
},
|
||
// 再次购买事件
|
||
againBuy(index){
|
||
let newList = [];
|
||
this.orderList[this.current][index].skuList.forEach(item=>{
|
||
let obj = {
|
||
id:item.spu_id,//商品id
|
||
imgSrc:item.spu_cover,//商品图片
|
||
coding:item.coding,//商品coding
|
||
price:item.price,//商品价格
|
||
num:item.num,//商品数量
|
||
title:item.spu_name,//商品名称
|
||
}
|
||
newList.push(obj);
|
||
})
|
||
uni.setStorageSync('orderList',newList);
|
||
uni.navigateTo({url:'/pagesA/getReadyDan/getReadyDan'});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.activeD::after{
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 8rpx;
|
||
background: #3875F6;
|
||
width: 100%;
|
||
}
|
||
|
||
.order-price{color: #f83030;}
|
||
|
||
</style>
|