|
@@ -1,7 +1,7 @@
|
|
|
<!--
|
|
<!--
|
|
|
商城订单详情
|
|
商城订单详情
|
|
|
用途:订单列表/支付回跳进入;展示状态、收货、商品、金额与售后入口
|
|
用途:订单列表/支付回跳进入;展示状态、收货、商品、金额与售后入口
|
|
|
- 排版:分区卡片 + 绿主色状态头,避免大段挤在一起
|
|
|
|
|
|
|
+ 拼团单:主状态结合 groupBuyStatus(1拼团中 2成功 3失败 4已取消),不能只看 status / payStatus
|
|
|
-->
|
|
-->
|
|
|
<template>
|
|
<template>
|
|
|
<view class="detail-page">
|
|
<view class="detail-page">
|
|
@@ -10,12 +10,9 @@
|
|
|
<view class="hero-bg"></view>
|
|
<view class="hero-bg"></view>
|
|
|
<view class="hero-inner">
|
|
<view class="hero-inner">
|
|
|
<view class="hero-left">
|
|
<view class="hero-left">
|
|
|
- <text class="hero-status">{{ data.status | constantfilter('ORDER_STATUS') }}</text>
|
|
|
|
|
|
|
+ <text class="hero-status">{{ displayStatus }}</text>
|
|
|
<text v-if="statusHint" class="hero-hint">{{ statusHint }}</text>
|
|
<text v-if="statusHint" class="hero-hint">{{ statusHint }}</text>
|
|
|
- <text
|
|
|
|
|
- v-if="data.groupBuyId > 0 && data.groupBuyStatus"
|
|
|
|
|
- class="hero-group"
|
|
|
|
|
- >{{ data.groupBuyStatus | constantfilter('GROUP_BUY_STATUS') }}</text>
|
|
|
|
|
|
|
+ <text v-if="groupBuySuccessTag" class="hero-group">{{ groupBuySuccessTag }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
<image v-if="statusImg" class="hero-img" :src="statusImg" mode="aspectFit" />
|
|
<image v-if="statusImg" class="hero-img" :src="statusImg" mode="aspectFit" />
|
|
|
</view>
|
|
</view>
|
|
@@ -199,12 +196,12 @@
|
|
|
<text class="footer-price__num">{{ money(data.actPrice) }}</text>
|
|
<text class="footer-price__num">{{ money(data.actPrice) }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="footer-actions">
|
|
<view class="footer-actions">
|
|
|
- <template v-if="Number(data.status) === 1">
|
|
|
|
|
|
|
+ <template v-if="showPayButton">
|
|
|
<button class="foot-btn foot-btn--primary" @click="payFn">立即支付</button>
|
|
<button class="foot-btn foot-btn--primary" @click="payFn">立即支付</button>
|
|
|
</template>
|
|
</template>
|
|
|
<template v-else>
|
|
<template v-else>
|
|
|
<button class="foot-btn foot-btn--ghost" @click="goViewRefund">售后记录</button>
|
|
<button class="foot-btn foot-btn--ghost" @click="goViewRefund">售后记录</button>
|
|
|
- <button class="foot-btn foot-btn--ghost" @click="goRefund">申请售后</button>
|
|
|
|
|
|
|
+ <button v-if="showApplyRefund" class="foot-btn foot-btn--ghost" @click="goRefund">申请售后</button>
|
|
|
</template>
|
|
</template>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -214,12 +211,23 @@
|
|
|
<script>
|
|
<script>
|
|
|
/**
|
|
/**
|
|
|
* 商城订单详情:状态 / 收货 / 商品 / 费用 / 售后入口
|
|
* 商城订单详情:状态 / 收货 / 商品 / 费用 / 售后入口
|
|
|
- * 底栏「售后记录」进本单售后列表;「申请售后」进申请页
|
|
|
|
|
|
|
+ * 拼团单结合 groupBuyStatus 展示主状态;未成团不开放申请售后
|
|
|
*/
|
|
*/
|
|
|
import { mapGetters } from 'vuex'
|
|
import { mapGetters } from 'vuex'
|
|
|
import orderItem from '@/components/module/app-order-item'
|
|
import orderItem from '@/components/module/app-order-item'
|
|
|
import ListModule from '@/components/module/app-order-list'
|
|
import ListModule from '@/components/module/app-order-list'
|
|
|
import { getDetail } from '@/api/order'
|
|
import { getDetail } from '@/api/order'
|
|
|
|
|
+import {
|
|
|
|
|
+ canShowApplyRefundAction,
|
|
|
|
|
+ canShowWaitPayAction,
|
|
|
|
|
+ getGroupBuyStatus,
|
|
|
|
|
+ getOrderDisplayHint,
|
|
|
|
|
+ getOrderDisplayStatus,
|
|
|
|
|
+ GROUP_BUY_STATUS_SUCCESS,
|
|
|
|
|
+ isGroupBuyClosed,
|
|
|
|
|
+ isGroupBuyFulfillable,
|
|
|
|
|
+ isGroupBuyOrder
|
|
|
|
|
+} from '@/utils/orderStatus'
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
name: 'detail',
|
|
name: 'detail',
|
|
@@ -240,13 +248,38 @@ export default {
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
|
...mapGetters({ shopUser: 'getShopUser' }),
|
|
...mapGetters({ shopUser: 'getShopUser' }),
|
|
|
- /** 状态配图:与商城 ORDER_STATUS 取值对齐 */
|
|
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 顶部主状态:拼团单结合成团结果,已付未成团显示拼团中而不是待配送
|
|
|
|
|
+ */
|
|
|
|
|
+ displayStatus() {
|
|
|
|
|
+ return getOrderDisplayStatus(this.data)
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 已成团成功时在主状态旁标明活动结果;拼团中/失败已写入主状态,不再重复
|
|
|
|
|
+ */
|
|
|
|
|
+ groupBuySuccessTag() {
|
|
|
|
|
+ if (!isGroupBuyOrder(this.data)) {
|
|
|
|
|
+ return ''
|
|
|
|
|
+ }
|
|
|
|
|
+ if (getGroupBuyStatus(this.data) !== GROUP_BUY_STATUS_SUCCESS) {
|
|
|
|
|
+ return ''
|
|
|
|
|
+ }
|
|
|
|
|
+ return '拼团成功'
|
|
|
|
|
+ },
|
|
|
|
|
+ /** 状态配图:拼团未成团成功时不展示配送图标,避免误当成待发货 */
|
|
|
statusImg() {
|
|
statusImg() {
|
|
|
const status = Number(this.data.status)
|
|
const status = Number(this.data.status)
|
|
|
const base = this.$constant.imgUrl + '/retail/order/'
|
|
const base = this.$constant.imgUrl + '/retail/order/'
|
|
|
|
|
+ // 团已失败或取消时不展示待付款图,避免与最终状态和隐藏的支付按钮冲突
|
|
|
|
|
+ if (isGroupBuyClosed(this.data)) {
|
|
|
|
|
+ return ''
|
|
|
|
|
+ }
|
|
|
if (status === 1) {
|
|
if (status === 1) {
|
|
|
return base + 'wait-pay.png'
|
|
return base + 'wait-pay.png'
|
|
|
}
|
|
}
|
|
|
|
|
+ if (isGroupBuyOrder(this.data) && !isGroupBuyFulfillable(this.data)) {
|
|
|
|
|
+ return ''
|
|
|
|
|
+ }
|
|
|
if (status === 2) {
|
|
if (status === 2) {
|
|
|
return base + 'wait-delivery.png'
|
|
return base + 'wait-delivery.png'
|
|
|
}
|
|
}
|
|
@@ -258,28 +291,17 @@ export default {
|
|
|
}
|
|
}
|
|
|
return ''
|
|
return ''
|
|
|
},
|
|
},
|
|
|
- /** 状态下方一句提示,帮助用户理解当前该做什么 */
|
|
|
|
|
|
|
+ /** 状态下方一句提示:拼团单说明成团后再履约 */
|
|
|
statusHint() {
|
|
statusHint() {
|
|
|
- const status = Number(this.data.status)
|
|
|
|
|
- if (status === 1) {
|
|
|
|
|
- return '请尽快完成支付,超时订单可能自动取消'
|
|
|
|
|
- }
|
|
|
|
|
- if (status === 2) {
|
|
|
|
|
- return '商家备货中,请耐心等待配送'
|
|
|
|
|
- }
|
|
|
|
|
- if (status === 3) {
|
|
|
|
|
- return '鲜花配送途中,注意查收'
|
|
|
|
|
- }
|
|
|
|
|
- if (status === 4) {
|
|
|
|
|
- return '订单已完成,感谢您的惠顾'
|
|
|
|
|
- }
|
|
|
|
|
- if (status === 5) {
|
|
|
|
|
- return '订单已取消'
|
|
|
|
|
- }
|
|
|
|
|
- if (status === 6) {
|
|
|
|
|
- return '订单已退款'
|
|
|
|
|
- }
|
|
|
|
|
- return ''
|
|
|
|
|
|
|
+ return getOrderDisplayHint(this.data)
|
|
|
|
|
+ },
|
|
|
|
|
+ /** 待付款且团未关闭:立即支付 */
|
|
|
|
|
+ showPayButton() {
|
|
|
|
|
+ return canShowWaitPayAction(this.data)
|
|
|
|
|
+ },
|
|
|
|
|
+ /** 申请售后:接口 canApplyRefund 允许,且拼团单须成团成功 */
|
|
|
|
|
+ showApplyRefund() {
|
|
|
|
|
+ return canShowApplyRefundAction(this.data)
|
|
|
},
|
|
},
|
|
|
/** 配送时间展示:日期 + 时段文案 */
|
|
/** 配送时间展示:日期 + 时段文案 */
|
|
|
reachTimeText() {
|
|
reachTimeText() {
|
|
@@ -339,12 +361,16 @@ export default {
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
/**
|
|
/**
|
|
|
- * 进申请售后页;分销已结算则拦截
|
|
|
|
|
|
|
+ * 进申请售后页;分销已结算、拼团未成功则拦截
|
|
|
*/
|
|
*/
|
|
|
goRefund() {
|
|
goRefund() {
|
|
|
if (!this.data.id) {
|
|
if (!this.data.id) {
|
|
|
return
|
|
return
|
|
|
}
|
|
}
|
|
|
|
|
+ if (isGroupBuyOrder(this.data) && !isGroupBuyFulfillable(this.data)) {
|
|
|
|
|
+ uni.showToast({ title: '拼团未成功,暂无法申请售后', icon: 'none' })
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
if (Number(this.data.distOrderSettled) === 1) {
|
|
if (Number(this.data.distOrderSettled) === 1) {
|
|
|
uni.showToast({ title: '分销佣金已结算,无法申请售后', icon: 'none' })
|
|
uni.showToast({ title: '分销佣金已结算,无法申请售后', icon: 'none' })
|
|
|
return
|
|
return
|