444 lines
10 KiB
Vue
444 lines
10 KiB
Vue
<template>
|
|
<view class="order">
|
|
<u-navbar title="我的订单" @leftClick="leftClick" placeholder bg-color="#fff0e7"></u-navbar>
|
|
<view class="tabs-wrap">
|
|
<u-tabs
|
|
:list="tabList"
|
|
:current="currentType"
|
|
lineColor="#E39B46"
|
|
lineHeight="12rpx"
|
|
:activeStyle="{
|
|
color: '#333333',
|
|
fontSize: '26rpx',
|
|
fontWeight: 'bold'
|
|
}"
|
|
:inactiveStyle="{
|
|
color: '#333333',
|
|
fontSize: '26rpx',
|
|
}"
|
|
@click="changeTab"
|
|
>
|
|
</u-tabs>
|
|
</view>
|
|
<view class="order-inner">
|
|
<scroll-view style="height: 100%;"
|
|
scroll-y="true"
|
|
refresher-enabled
|
|
:refresher-triggered="refreshState"
|
|
@refresherrefresh="onScrollRefresh"
|
|
@scrolltolower="loadMoreData"
|
|
>
|
|
<template v-if="currentOrder.length > 0">
|
|
<view class="order-item" v-for="item in currentOrder" :key="item.id" >
|
|
<view class="order-hd">
|
|
<view class="order-id">订单号 {{ item.id }}</view>
|
|
<view class="order-time">{{ item.create_time }}</view>
|
|
</view>
|
|
<view class="order-address">
|
|
<view class="name">
|
|
<view style="min-width: 55%; display: flex;">
|
|
<view class="name-left">
|
|
{{ item.send_address[0] }}
|
|
</view>
|
|
<view class="name-icon">
|
|
<image src="../../static/mine/m_order_arrow.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="name-right" style="flex: 1;">
|
|
{{ item.take_address[0] }}
|
|
</view>
|
|
</view>
|
|
<view class="address-text">
|
|
<view class="address-text-inner" >
|
|
{{ item.send_address[2] }}
|
|
</view>
|
|
<view class="address-text-inner">
|
|
{{ item.take_address[2] }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="order-opera">
|
|
<template v-if="currentType === 0">
|
|
<u-button text="取消付款" plain shape="circle" @click="confirmCancel(item)"></u-button>
|
|
<u-button text="去付款" type="warning" plain shape="circle" @click="selectPayMent(item)"></u-button>
|
|
</template>
|
|
<!-- <template v-else-if="currentType === 1"> -->
|
|
<u-button text="查看预览" type="warning" plain shape="circle" @click="jumpPage(item)"></u-button>
|
|
<u-button @click="toViewLogistics(item)" v-if="currentType==2||currentType==3" text="物流详情" type="warning" plain shape="circle" ></u-button>
|
|
<!-- </template> -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<view class="no-data" v-if="currentOrder.length <= 0">
|
|
暂无订单
|
|
</view>
|
|
<u-modal
|
|
showCancelButton
|
|
:show="show"
|
|
:title="title"
|
|
:content="content"
|
|
:cancelText="cancelText"
|
|
:confirmText="confirmText"
|
|
confirmColor="#E08745"
|
|
@cancel="show = false"
|
|
@confirm="cancelOrder"
|
|
>
|
|
</u-modal>
|
|
<u-popup :show="showPopup" closeOnClickOverlay @close="showPopup = false">
|
|
<view class="popup-content">
|
|
<PayPatter v-model="pay_payment"></PayPatter>
|
|
|
|
<view class="popup-footer">
|
|
<u-button class="v-default" shape="circle" @click="showPopup = false">取消</u-button>
|
|
<u-button class="v-primary" shape="circle" type="primary" @click="onRePayment(currentPayInfo)">确认</u-button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { rePayment, cancelPayment, getOrderList } from '@/request/yyf.js';
|
|
import PayPatter from '@/components/Pay-patter/Pay-patter.vue';
|
|
|
|
export default {
|
|
components: {
|
|
PayPatter
|
|
},
|
|
data() {
|
|
return {
|
|
currentType: 0,
|
|
orderType: '0',
|
|
show: false, // 弹窗状态
|
|
title: "警告",
|
|
content: "确认取消订单吗？",
|
|
confirmText: "确认",
|
|
cancelText: "取消",
|
|
currentId: '',
|
|
orderList: {
|
|
'0': [],
|
|
'1': [],
|
|
'2': [],
|
|
'3': [],
|
|
'4': [],
|
|
},
|
|
params: {
|
|
'0': { page: 1 },
|
|
'1': { page: 1 },
|
|
'2': { page: 1 },
|
|
'3': { page: 1 },
|
|
'4': { page: 1 },
|
|
},
|
|
total: {
|
|
'0': { total: 0 },
|
|
'1': { total: 0 },
|
|
'2': { total: 0 },
|
|
'3': { total: 0 },
|
|
'4': { total: 0 },
|
|
},
|
|
showPopup: false,
|
|
pay_payment: '',
|
|
currentPayInfo: {},
|
|
refreshState: false
|
|
}
|
|
},
|
|
computed: {
|
|
tabList() {
|
|
return [
|
|
{ name: '待付款', type: '0', badge: { value: this.orderNum['0'] || 0 } },
|
|
{ name: '待寄出', type: '1', badge: { value: this.orderNum['1'] || 0 } },
|
|
{ name: '已寄出', type: '2', badge: { value: this.orderNum['2'] || 0 } },
|
|
{ name: '被退回', type: '3', badge: { value: this.orderNum['3'] || 0 } },
|
|
{ name: '已取消', type: '4', badge: { value: this.orderNum['4'] || 0 } },
|
|
]
|
|
},
|
|
currentOrder() {
|
|
return this.orderList[this.currentType]
|
|
},
|
|
orderNum() {
|
|
return this.$storeMine.orderNum;
|
|
},
|
|
},
|
|
watch: {
|
|
'$Route'(newVal) {
|
|
console.log(newVal);
|
|
}
|
|
},
|
|
methods: {
|
|
jumpPage(item) {
|
|
this.$Router.push({
|
|
path: '/pages/preview/preview',
|
|
query: {
|
|
...item
|
|
}
|
|
})
|
|
},
|
|
toViewLogistics(data){
|
|
uni.navigateTo({
|
|
url:'pages/waybill-info/waybill-info?id='+data.id,
|
|
|
|
})
|
|
// console.log(data);
|
|
},
|
|
leftClick() {
|
|
this.$Router.replace('/pages/mine/mine');
|
|
},
|
|
changeTab({ index, type }) {
|
|
if(type === this.currentType) {
|
|
return
|
|
}
|
|
this.currentType = index;
|
|
this.orderType = type;
|
|
|
|
if(this.orderList[this.currentType].length <= 0) {
|
|
this.queryData();
|
|
}
|
|
},
|
|
confirmCancel({ id }) {
|
|
this.currentId = id;
|
|
this.show = true;
|
|
},
|
|
async cancelOrder() {
|
|
const { data } = await cancelPayment({
|
|
id: this.currentId
|
|
});
|
|
if(data.code === 1) {
|
|
uni.$u.toast('订单已取消');
|
|
this.show = false;
|
|
this.refreshData();
|
|
this.$actionsMine.onGetOrderNum();
|
|
} else {
|
|
uni.$u.toast(data.msg);
|
|
}
|
|
},
|
|
selectPayMent(item) {
|
|
this.currentPayInfo = { ...item };
|
|
console.log(item);
|
|
this.showPopup = true;
|
|
},
|
|
// 重新支付
|
|
async onRePayment(item) {
|
|
let { message, affix, thumb, mail_type, coupon, send_type, pay_payment, send_address, take_address, id } = item;
|
|
|
|
// this.$store.letterInfo = {};
|
|
// this.$store.letterInfo.message = message;
|
|
// this.$store.letterInfo.mail_type = mail_type;
|
|
// this.$store.letterInfo.thumb = thumb;
|
|
// this.$store.letterInfo.affix = affix;
|
|
// this.$store.letterInfo.coupon = coupon;
|
|
// this.$store.letterInfo.send_type = send_type;
|
|
// this.$store.letterInfo.pay_payment = pay_payment;
|
|
|
|
// this.$store.letterInfo.send_address = send_address.reduce((total, item)=> total + ' ' + item);
|
|
// this.$store.letterInfo.take_address = take_address.reduce((total, item)=> total + ' ' + item);
|
|
|
|
// // console.log(this.$store.letterInfo);
|
|
|
|
// this.$Router.push({
|
|
// path: '/pages/confirmOrder/confirmOrder',
|
|
// query: {
|
|
// ...item
|
|
// }
|
|
// })
|
|
|
|
|
|
const { data } = await rePayment({
|
|
id,
|
|
pay_payment: this.pay_payment
|
|
})
|
|
|
|
if (data.code === 1) {
|
|
if(this.pay_payment === 1) {
|
|
uni.showToast({
|
|
title: data.msg,
|
|
});
|
|
this.refreshData();
|
|
} else {
|
|
// #ifdef H5
|
|
location.href = data.data.pay.url;
|
|
// #endif
|
|
|
|
// #ifdef MP-WEIXIN
|
|
uni.showToast({
|
|
title: "小程序支付暂未配置",
|
|
icon: "error",
|
|
});
|
|
// #endif
|
|
}
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: data.msg,
|
|
icon: 'error'
|
|
})
|
|
}
|
|
},
|
|
// 刷新
|
|
refreshData() {
|
|
this.orderList[this.currentType] = [];
|
|
this.params[this.currentType].page = 1;
|
|
this.queryData();
|
|
},
|
|
onScrollRefresh() {
|
|
this.refreshState = true;
|
|
this.refreshData()
|
|
},
|
|
async queryData() {
|
|
const { data } = await getOrderList({
|
|
...this.params[this.currentType],
|
|
status: this.currentType,
|
|
order: 'desc'
|
|
})
|
|
|
|
if(data.code === 1) {
|
|
this.total[this.currentType].total = data.data.total;
|
|
this.orderList[this.currentType].push(...data.data.data);
|
|
}
|
|
setTimeout(()=>{
|
|
this.refreshState = false;
|
|
}, 1000)
|
|
},
|
|
loadMoreData() {
|
|
if(this.total[this.currentType].total > this.orderList[this.currentType].length) {
|
|
this.params[this.currentType].page += 1;
|
|
this.queryData();
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
let { type } = this.$Route.query;
|
|
this.currentType = parseInt(type);
|
|
this.orderType = type;
|
|
this.$actionsMine.onGetOrderNum();
|
|
|
|
this.queryData();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/deep/.u-tabs__wrapper__nav__line {
|
|
bottom: 0;
|
|
}
|
|
|
|
/deep/.u-tabs__wrapper__nav__item {
|
|
box-sizing: border-box;
|
|
min-width: 20%;
|
|
}
|
|
|
|
/deep/.u-badge--error {
|
|
margin-left: 0 !important;
|
|
background-color: transparent;
|
|
color: #000;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.order {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.tabs-wrap {
|
|
}
|
|
|
|
.order-inner {
|
|
flex: 1;
|
|
overflow: auto;
|
|
background-color: rgba(255, 255, 255, .33);
|
|
padding: 35rpx 30rpx;
|
|
|
|
.order-item {
|
|
box-sizing: border-box;
|
|
padding: 42rpx 40rpx;
|
|
background-color: #fff;
|
|
border-radius: 40rpx;
|
|
margin-bottom: 40rpx;
|
|
|
|
.order-hd {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #333;
|
|
font-size: 26rpx;
|
|
font-family: OPPOSans-Medium, OPPOSans;
|
|
}
|
|
|
|
.order-address {
|
|
padding-top: 33rpx;
|
|
.name {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
&-icon {
|
|
padding: 0 28rpx;
|
|
image {
|
|
width: 190rpx;
|
|
height: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
.address-text {
|
|
padding-top: 10rpx;
|
|
display: flex;
|
|
.address-text-inner {
|
|
width: 50%;
|
|
font-size: 24rpx;
|
|
font-family: OPPOSans-Medium, OPPOSans;
|
|
font-weight: 500;
|
|
color: #ababab;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
margin-right: 5%;
|
|
&:last-child {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.order-opera {
|
|
margin-top: 46rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
/deep/.u-button {
|
|
margin: 0 0 0 20rpx;
|
|
padding: 12rpx 22rpx;
|
|
height: auto;
|
|
background-color: transparent;
|
|
border-width: 2rpx;
|
|
width: auto;
|
|
}
|
|
|
|
/deep/.u-button--warning {
|
|
color: #f9ae3d;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-data {
|
|
padding: 100rpx 0;
|
|
text-align: center;
|
|
color: #ababab;
|
|
}
|
|
}
|
|
|
|
.popup-content {
|
|
padding: 40rpx;
|
|
.popup-footer {
|
|
padding-top: 40rpx;
|
|
display: flex;
|
|
.v-default {
|
|
margin-right: 20rpx;
|
|
}
|
|
.v-primary {
|
|
background-color: #E39B46;
|
|
border-color: #E39B46;;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|