|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <ion-page>
|
|
|
+ <ion-page ref="page">
|
|
|
<ion-header>
|
|
|
<ion-toolbar>
|
|
|
<ion-buttons slot="start">
|
|
|
@@ -14,11 +14,19 @@
|
|
|
</div>
|
|
|
<div class="top">
|
|
|
<div class="status">
|
|
|
- <ion-icon :icon="icons.timeOutline"></ion-icon>
|
|
|
+ <ion-icon :icon="icons.walletOutline" v-if="orderInfo.status == 'NOT_PAID'"></ion-icon>
|
|
|
+ <ion-icon :icon="icons.closeCircleOutline" v-if="orderInfo.status == 'CANCELED'"></ion-icon>
|
|
|
+ <ion-icon :icon="icons.albumsOutline" v-if="orderInfo.status == 'CONFIRMED'"></ion-icon>
|
|
|
+ <ion-icon :icon="icons.timeOutline" v-if="orderInfo.status == 'SELLING'"></ion-icon>
|
|
|
+ <ion-icon :icon="icons.walletOutline" v-if="orderInfo.status == 'SOLD_NOT_PAID'"></ion-icon>
|
|
|
+ <ion-icon :icon="icons.checkmarkCircleOutline" v-if="orderInfo.status == 'SOLD'"></ion-icon>
|
|
|
<div class="status">
|
|
|
{{ $t('order.status.' + orderInfo.status) }}
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="status-desc">
|
|
|
+ {{ $t('order.statusDesc.' + orderInfo.status) }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<div class="product">
|
|
|
@@ -54,7 +62,13 @@
|
|
|
<div class="order-detail">
|
|
|
<div class="detail-item">
|
|
|
<div class="name">{{ $t('order.payMethod') }}</div>
|
|
|
- <div class="val">{{ $t('order.payMethodName.balance') }}</div>
|
|
|
+ <div class="val">
|
|
|
+ {{
|
|
|
+ orderInfo.status === 'NOT_PAID'
|
|
|
+ ? $t('order.status.' + orderInfo.status)
|
|
|
+ : $t('order.payMethodName.balance')
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<div class="time-content">
|
|
|
@@ -72,62 +86,73 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <van-popup v-model="show" class="getsold">
|
|
|
- <div class="title">委托代卖</div>
|
|
|
- <div class="sold-list">
|
|
|
- <div class="sold-item">
|
|
|
- <div class="name">原价</div>
|
|
|
- <div class="val">¥{{ orderInfo.totalPrice }}</div>
|
|
|
- </div>
|
|
|
- <div class="sold-item">
|
|
|
- <div class="name">加价</div>
|
|
|
- <van-stepper v-model="value" input-width="60px" step="1" integer min="1" :max="maxRiseRate" />
|
|
|
+ <ion-modal ref="modal" :is-open="show" :presentingElement="presentingElement">
|
|
|
+ <ion-header>
|
|
|
+ <ion-toolbar>
|
|
|
+ <ion-title>{{ $t('delegate.title') }}</ion-title>
|
|
|
+ <ion-buttons slot="end">
|
|
|
+ <ion-button @click="show = false">{{ $t('cancel') }}</ion-button>
|
|
|
+ </ion-buttons>
|
|
|
+ </ion-toolbar>
|
|
|
+ </ion-header>
|
|
|
+ <div v-if="show" class="getsold">
|
|
|
+ <div class="sold-list">
|
|
|
+ <div class="sold-item">
|
|
|
+ <div class="name">原价</div>
|
|
|
+ <div class="val">¥{{ orderInfo.totalPrice }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="sold-item">
|
|
|
+ <div class="name">加价</div>
|
|
|
+ <van-stepper
|
|
|
+ v-model="value"
|
|
|
+ input-width="60px"
|
|
|
+ step="1"
|
|
|
+ integer
|
|
|
+ min="1"
|
|
|
+ :max="maxRiseRate"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="sold-item">
|
|
|
+ <div class="name">卖价</div>
|
|
|
+ <div class="val bold">¥{{ soldValue }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="sold-item">
|
|
|
- <div class="name">卖价</div>
|
|
|
- <div class="val bold">¥{{ soldValue }}</div>
|
|
|
+ <div class="tips">
|
|
|
+ 注：委托平台代卖服务，每次最高可将商品价格提高{{ maxRiseRate }}%，平台会收取{{
|
|
|
+ serviceValue
|
|
|
+ }}%的托管服务费用
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="tips">
|
|
|
- 注：委托平台代卖服务，每次最高可将商品价格提高{{ maxRiseRate }}%，平台会收取{{
|
|
|
- serviceValue
|
|
|
- }}%的托管服务费用
|
|
|
- </div>
|
|
|
|
|
|
- <van-button class="button" :disabled="loading" block type="primary" round @click="sale">
|
|
|
- 支付手续费 ¥{{ serviceCharge }}</van-button
|
|
|
- >
|
|
|
- </van-popup>
|
|
|
+ <van-button class="button" :disabled="loading" block type="primary" @click="sale">
|
|
|
+ 支付手续费 ¥{{ serviceCharge }}
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ </ion-modal>
|
|
|
</ion-content>
|
|
|
- <ion-footer>
|
|
|
+ <ion-footer v-if="orderInfo.status == 'NOT_PAID' || orderInfo.status == 'CONFIRMED'">
|
|
|
<div class="bottom">
|
|
|
<div>
|
|
|
<div class="order-button" v-if="orderInfo.status == 'NOT_PAID'">
|
|
|
- <span> {{ $t('balance.symbol') }}</span>
|
|
|
- <span> {{ $t('order.totalPayment') }}</span>
|
|
|
- <van-button class="btn-pay" type="primary" @click="pay">{{ $t('order.payNow') }}</van-button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div
|
|
|
- class="order-button"
|
|
|
- v-else-if="orderInfo.status == 'SOLD_NOT_CONFIRMED' && !orderInfo.delegationId"
|
|
|
- >
|
|
|
- <!-- <van-button color="#AAACAD" round plain @click="confirmPayment">未收到款</van-button> -->
|
|
|
- <!-- <van-button type="primary" round @click="confirmReceipt">确认收款</van-button> -->
|
|
|
+ <span class="price">
|
|
|
+ <span class="label">{{ $t('order.totalPayment') }}</span>
|
|
|
+ <span class="gt sym"> {{ $t('balance.symbol') }}</span>
|
|
|
+ <span class="gt num">
|
|
|
+ {{ orderInfo.totalPrice ? orderInfo.totalPrice.toFixed(2) : '' }}</span
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ <van-button class="btn-pay" type="primary" @click="pay" style="width: 150px">{{
|
|
|
+ $t('order.payNow')
|
|
|
+ }}</van-button>
|
|
|
</div>
|
|
|
|
|
|
<div class="order-button" v-else-if="orderInfo.status == 'CONFIRMED'">
|
|
|
<!-- <van-button color="#AAACAD" round plain @click="applyShip">申请发货</van-button> -->
|
|
|
- <van-button type="primary" round @click="show = true" v-if="delegationActive"
|
|
|
- >委托代卖
|
|
|
+ <van-button type="primary" class="full" @click="show = true" v-if="delegationActive">
|
|
|
+ {{ $t('delegate.title') }}
|
|
|
+ </van-button>
|
|
|
+ <van-button color="#aaacad" class="full" @click="showTip" v-else
|
|
|
+ >{{ $t('delegate.title') }}
|
|
|
</van-button>
|
|
|
- <van-button color="#aaacad" round @click="showTip" v-else>委托代卖 </van-button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="order-button" v-else-if="orderInfo.status == 'SHIPPED'">
|
|
|
- <!-- <van-button color="#AAACAD" round plain @click="confirmPayment">未收到款</van-button> -->
|
|
|
- <van-button type="primary" round @click="receive"> 确认收货</van-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -139,11 +164,9 @@ import { mapState } from 'pinia'
|
|
|
import { useUserStore } from '@/stores/user'
|
|
|
import { orderStatus } from '../status'
|
|
|
import { parse } from 'date-fns'
|
|
|
-import { IonIcon } from '@ionic/vue'
|
|
|
-import { timeOutline } from 'ionicons/icons'
|
|
|
+import { timeOutline, walletOutline, albumsOutline, closeCircleOutline, checkmarkCircleOutline } from 'ionicons/icons'
|
|
|
export default {
|
|
|
name: 'orderDetail',
|
|
|
- components: { IonIcon },
|
|
|
data() {
|
|
|
return {
|
|
|
orderStatus,
|
|
|
@@ -159,10 +182,18 @@ export default {
|
|
|
loading: false,
|
|
|
payType: 'balance',
|
|
|
icons: {
|
|
|
- timeOutline
|
|
|
- }
|
|
|
+ timeOutline,
|
|
|
+ walletOutline,
|
|
|
+ albumsOutline,
|
|
|
+ closeCircleOutline,
|
|
|
+ checkmarkCircleOutline
|
|
|
+ },
|
|
|
+ presentingElement: null
|
|
|
}
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.presentingElement = this.$refs.page.$el
|
|
|
+ },
|
|
|
computed: {
|
|
|
...mapState(useUserStore, ['user']),
|
|
|
pic() {
|
|
|
@@ -193,7 +224,7 @@ export default {
|
|
|
this.$http
|
|
|
.get('/order/get/' + this.$route.query.id)
|
|
|
.then(res => {
|
|
|
- this.orderInfo = { ...res, status: 'NOT_PAID' }
|
|
|
+ this.orderInfo = { ...res, status: 'CONFIRMED' }
|
|
|
if (res.productId) {
|
|
|
return this.$http.get('/product/get/' + res.productId)
|
|
|
}
|
|
|
@@ -296,7 +327,7 @@ export default {
|
|
|
}, 1000)
|
|
|
})
|
|
|
.catch(e => {
|
|
|
- return this.$toast(e.error)
|
|
|
+ return this.$toast.error(e.error)
|
|
|
})
|
|
|
},
|
|
|
confirmReceipt() {
|
|
|
@@ -317,7 +348,7 @@ export default {
|
|
|
}, 1000)
|
|
|
})
|
|
|
.catch(e => {
|
|
|
- return this.$toast(e.error)
|
|
|
+ return this.$toast.error(e.error)
|
|
|
})
|
|
|
},
|
|
|
sale() {
|
|
|
@@ -376,7 +407,7 @@ export default {
|
|
|
.catch(e => {
|
|
|
this.$toast.clear()
|
|
|
this.loading = false
|
|
|
- return this.$toast(e.error)
|
|
|
+ return this.$toast.error(e.error)
|
|
|
})
|
|
|
} else if (this.payType === 'balance') {
|
|
|
this.$toast.loading('支付中')
|
|
|
@@ -391,7 +422,7 @@ export default {
|
|
|
this.getInfo()
|
|
|
})
|
|
|
.catch(e => {
|
|
|
- this.$toast(e.error)
|
|
|
+ this.$toast.error(e.error)
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
@@ -419,7 +450,7 @@ export default {
|
|
|
}, 1000)
|
|
|
})
|
|
|
.catch(e => {
|
|
|
- return this.$toast(e.error)
|
|
|
+ return this.$toast.error(e.error)
|
|
|
})
|
|
|
})
|
|
|
.catch(() => {})
|
|
|
@@ -442,7 +473,7 @@ export default {
|
|
|
}, 1000)
|
|
|
})
|
|
|
.catch(e => {
|
|
|
- return this.$toast(e.error)
|
|
|
+ return this.$toast.error(e.error)
|
|
|
})
|
|
|
},
|
|
|
pay() {
|
|
|
@@ -456,7 +487,7 @@ export default {
|
|
|
}, 1000)
|
|
|
})
|
|
|
.catch(e => {
|
|
|
- this.$toast(e.error)
|
|
|
+ this.$toast.error(e.error)
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
@@ -492,7 +523,7 @@ export default {
|
|
|
margin-right: 6px;
|
|
|
}
|
|
|
}
|
|
|
- .desc {
|
|
|
+ .status-desc {
|
|
|
margin-top: 6px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
@@ -648,26 +679,51 @@ export default {
|
|
|
.order-button {
|
|
|
height: 50px;
|
|
|
display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- align-items: center;
|
|
|
+ .f();
|
|
|
padding: 0 15px;
|
|
|
width: 100%;
|
|
|
-
|
|
|
+ .price {
|
|
|
+ .f();
|
|
|
+ align-items: baseline;
|
|
|
+ flex-grow: 1;
|
|
|
+ .label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: var(--ion-color-step-400);
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .sym {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
.van-button {
|
|
|
width: 110px;
|
|
|
height: 39px;
|
|
|
line-height: 39px;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
+ .full {
|
|
|
+ flex-grow: 1;
|
|
|
+ margin-left: 12px;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
}
|
|
|
.bottom {
|
|
|
width: 100%;
|
|
|
background-color: var(--ion-color-dark-contrast);
|
|
|
}
|
|
|
+ion-backdrop {
|
|
|
+ opacity: 0.3;
|
|
|
+ background: var(--ion-color-step-950);
|
|
|
+}
|
|
|
.getsold {
|
|
|
- width: 300px;
|
|
|
- height: 405px;
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
+ // width: 300px;
|
|
|
+ // height: 405px;
|
|
|
+ background: var(--ion-background-color);
|
|
|
border-radius: 4px;
|
|
|
padding: 15px 20px;
|
|
|
box-sizing: border-box;
|
|
|
@@ -682,11 +738,10 @@ export default {
|
|
|
.sold-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- height: 28px;
|
|
|
padding: 22px 0 10px;
|
|
|
border-bottom: 1px solid #f2f4f5;
|
|
|
.name {
|
|
|
- font-size: 18px;
|
|
|
+ font-size: 14px;
|
|
|
font-weight: bold;
|
|
|
color: rgba(0, 0, 0, 1);
|
|
|
line-height: 25px;
|
