初始化
This commit is contained in:
443
pages/mine/mineOrder.vue
Normal file
443
pages/mine/mineOrder.vue
Normal file
@@ -0,0 +1,443 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user