251 lines
6.6 KiB
Vue
251 lines
6.6 KiB
Vue
|
<template>
|
|||
|
|
<view class="main">
|
|||
|
|
<!-- 头部 -->
|
|||
|
|
<status-nav navBarTitle="我的订单"></status-nav>
|
|||
|
|
<!-- 内容区 -->
|
|||
|
|
<view class="content" style="margin: 0;">
|
|||
|
|
<view class="order-nav" :style="{top:statusHeight+50+'px'}">
|
|||
|
|
<view class="item" :class="index==tagIndex?'active':''" v-for="(item,index) in tagList" :key="index" @tap="choseTag(index)">
|
|||
|
|
<text>{{item.name}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="order-items" v-if="ifLoading">
|
|||
|
|
<view class="section-other item" v-for="(item,index) in orderList" :key="index">
|
|||
|
|
<view class="code">
|
|||
|
|
<text>订单号：{{item.coding}}</text>
|
|||
|
|
<text :style="{color:item.status=='3'?'#959595':'#3a9e3a'}">{{item.status_name}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info" v-for="(item1,index1) in item.goods" :key="index1" @tap="goPage(`/pagesA/order/detail?id=${item.id}`)">
|
|||
|
|
<view class="left">
|
|||
|
|
<view class="img">
|
|||
|
|
<image :src="baseHttps + item1.goods_cover" mode="aspectFit"></image>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<view class="txt">{{item1.goods_name}}</view>
|
|||
|
|
<view class="sting">{{item1.sku_name}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="right">
|
|||
|
|
<view class="price">
|
|||
|
|
<text>￥</text>
|
|||
|
|
<text>{{item1.price.substr(0,item1.price.indexOf('.'))}}</text>
|
|||
|
|
<text>{{item1.price.substr(item1.price.indexOf('.'),item1.price.length)}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="number">共{{item1.num}}件</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="btns">
|
|||
|
|
<view class="btn orange" v-if="item.status=='0' && item.givenDate" @tap="payEv(item.coding)">去支付</view>
|
|||
|
|
<view class="btn" @tap="goPage(`/pagesA/order/detail?id=${item.id}`)">查看详情</view>
|
|||
|
|
<view class="btn orange-other" v-if="item.status=='2'" @tap="acceptedEv(item.coding)">确认收货</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="tc fs13 dark pt25 pb10" v-if="botLine">我也是有底线的~</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="kong" v-if="orderList.length == 0">
|
|||
|
|
<u-empty mode="list" text="订单是空的哟~">
|
|||
|
|
</u-empty>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 尾部 -->
|
|||
|
|
<foot-bar :current="2"></foot-bar>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
getOrderMy,
|
|||
|
|
postOrderPay,
|
|||
|
|
postOrderCheck,
|
|||
|
|
postOrderComplete
|
|||
|
|
} from "@/api/index";
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
statusHeight:uni.getSystemInfoSync().statusBarHeight, //状态栏高度
|
|||
|
|
baseHttps:`${getApp().globalData.hostapi}`, //接口链接
|
|||
|
|
tagList:[
|
|||
|
|
{name:'全部订单',index:'all'},
|
|||
|
|
{name:'待付款',index:'0'},
|
|||
|
|
{name:'已付款',index:'1'},
|
|||
|
|
{name:'待收货',index:'2'},
|
|||
|
|
{name:'已完成',index:'3'}
|
|||
|
|
] ,//订单分类
|
|||
|
|
tagIndex:0, //当前选择
|
|||
|
|
orderList:[], //订单列表
|
|||
|
|
ifLoading:false, //是否加载完成
|
|||
|
|
page:1,
|
|||
|
|
size:20,
|
|||
|
|
total:'',
|
|||
|
|
botLine:false,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad(op) {
|
|||
|
|
if(op.index) {
|
|||
|
|
const index = this.tagList.findIndex(user => user.index === op.index);
|
|||
|
|
this.tagIndex = index;
|
|||
|
|
console.log(op.index,index)
|
|||
|
|
};
|
|||
|
|
// 获取订单列表
|
|||
|
|
this.getOrderList();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onReachBottom() {
|
|||
|
|
if (this.total != this.orderList.length) {
|
|||
|
|
this.page++;
|
|||
|
|
this.getOrderList();
|
|||
|
|
}else {
|
|||
|
|
this.botLine = true;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 获取订单列表
|
|||
|
|
getOrderList(){
|
|||
|
|
this.ifLoading = false;
|
|||
|
|
let status = this.tagList[this.tagIndex].index;
|
|||
|
|
if(this.tagList[this.tagIndex].index == 'all') {
|
|||
|
|
status = '';
|
|||
|
|
}
|
|||
|
|
let params = {
|
|||
|
|
page:this.page,
|
|||
|
|
size:this.size,
|
|||
|
|
status:status
|
|||
|
|
}
|
|||
|
|
getOrderMy(params).then(res => {
|
|||
|
|
if(res.code == 0){
|
|||
|
|
console.log(res,'订单列表');
|
|||
|
|
this.ifLoading = true;
|
|||
|
|
this.total = res.data.total;
|
|||
|
|
// 拿未付款过期时间与当前时间作对比
|
|||
|
|
let currentDate = new Date();
|
|||
|
|
res.data.list.forEach(item=> {
|
|||
|
|
let givenDate = new Date(item.expired_at);
|
|||
|
|
if (givenDate.getTime() > currentDate.getTime()) {
|
|||
|
|
item.givenDate = true;
|
|||
|
|
} else if (givenDate.getTime() < currentDate.getTime()) {
|
|||
|
|
item.givenDate = false;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (this.page == 1) {
|
|||
|
|
this.orderList = [];
|
|||
|
|
}
|
|||
|
|
this.orderList = [...this.orderList, ...res.data.list];
|
|||
|
|
}else{
|
|||
|
|
this.$toolAll.tools.showToast(res.msg);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 选择
|
|||
|
|
choseTag(index){
|
|||
|
|
if(index!==this.tagIndex){
|
|||
|
|
this.tagIndex =index;
|
|||
|
|
// 获取订单列表
|
|||
|
|
this.page = 1;
|
|||
|
|
this.total = '';
|
|||
|
|
this.orderList = [];
|
|||
|
|
this.getOrderList();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 跳转
|
|||
|
|
goPage(url){
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:url
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 确认收货
|
|||
|
|
acceptedEv(coding){
|
|||
|
|
let that = this;
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确定要收货吗？',
|
|||
|
|
success: function (res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
let params = {
|
|||
|
|
coding:coding
|
|||
|
|
}
|
|||
|
|
postOrderComplete(params).then(res=>{
|
|||
|
|
if(res.code==0) {
|
|||
|
|
console.log(res,'确认收货');
|
|||
|
|
that.$toolAll.tools.showToast('已确认收货');
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
// 获取订单列表
|
|||
|
|
that.getOrderList();
|
|||
|
|
},800)
|
|||
|
|
} else {
|
|||
|
|
that.$toolAll.tools.showToast(res.msg)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
console.log('用户点击取消');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 去支付
|
|||
|
|
payEv(coding){
|
|||
|
|
let params = {
|
|||
|
|
coding:coding,
|
|||
|
|
}
|
|||
|
|
postOrderPay(params).then(res=>{
|
|||
|
|
if(res.code==0) {
|
|||
|
|
console.log(res,'立即支付');
|
|||
|
|
// 调用微信支付
|
|||
|
|
this.callPayMent(res.data,coding)
|
|||
|
|
} else {
|
|||
|
|
this.$toolAll.tools.showToast(res.msg)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 发起支付
|
|||
|
|
callPayMent(data, coding) {
|
|||
|
|
//调起微信支付
|
|||
|
|
wx.requestPayment({
|
|||
|
|
'timeStamp': data.timeStamp,
|
|||
|
|
'nonceStr': data.nonceStr,
|
|||
|
|
'package': data.package,
|
|||
|
|
"signType": data.signType,
|
|||
|
|
'paySign': data.paySign,
|
|||
|
|
'success': (res) => { // 接口调用成功的回调函数
|
|||
|
|
console.log('支付成功:', res);
|
|||
|
|
// 成功状态
|
|||
|
|
this.successEv(coding);
|
|||
|
|
},
|
|||
|
|
'fail': (res) => { // 接口调用失败的回调函数
|
|||
|
|
this.$toolAll.tools.showToast('您已取消支付');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 成功状态
|
|||
|
|
successEv(coding) {
|
|||
|
|
let params = {
|
|||
|
|
coding:coding
|
|||
|
|
}
|
|||
|
|
postOrderCheck(params).then(res => {
|
|||
|
|
if (res.code == 0) {
|
|||
|
|
|
|||
|
|
this.$toolAll.tools.showToast('支付成功');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pagesA/order/order?index=1'
|
|||
|
|
})
|
|||
|
|
}, 1000)
|
|||
|
|
} else {
|
|||
|
|
this.$toolAll.tools.showToast(res.msg);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style scoped>
|
|||
|
|
|
|||
|
|
</style>
|