4878c43571
【原 因】：把订单 相关页面都放到新增的order目录 【过 程】： 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
157 lines
4.3 KiB
Vue
157 lines
4.3 KiB
Vue
<template>
|
||
<view class="mealsBox rad8 flex column m-r-24 m-l-24 m-b-24 p-24 bg-w boxshadow">
|
||
<view class="flex">
|
||
<view class="flex3 ofh">
|
||
<view class="fz24 fcb m-t-12">订单号：{{order.order_sn}}</view>
|
||
<view class="fz24 fcb">{{order.order_time | parseTime}}</view>
|
||
<view class="fz32 l-h-18 fb">取餐点：{{order.receive_site_name}}</view>
|
||
<view class="m-t-12">
|
||
<scroll-view class="scroll-view_H" scroll-x="true">
|
||
<view class="scroll-view-item_H m-r-12" v-for="(ps,index) in order.product_snapshot"
|
||
:key="index">
|
||
<u--image :src="ps.spu_photo[0]" width="147rpx" height="110rpx" radius="4rpx" />
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<view class="flex1 flex column md">
|
||
<view class="fz28 fb fcm l-h-18">{{ orderStatusDisplay }}</view>
|
||
<view class="priceBox fz36 fb">
|
||
¥{{fullPrice}}
|
||
</view>
|
||
<view class="fz24 fcb">共{{order.total_num}}件</view>
|
||
</view>
|
||
</view>
|
||
<view class="m-t-24 flex mr">
|
||
<navigator v-if="showPayButton" :url="`/pages/shop/pay?order_sn=${order.order_sn}&fullPrice=${fullPrice}`" hover-class="navigator-hover">
|
||
<view class="nullBut bg-m fci rad8 fz28 flex mac mc">
|
||
立即支付
|
||
</view>
|
||
</navigator>
|
||
<view v-if="showPickupNumber" class="numberBut bg-m fci rad8 fz28 fb flex mac mc m-l-24">
|
||
{{ foodSn }}
|
||
</view>
|
||
<navigator v-if="showAfterSaleButton" class="m-l-24" :url="`/pages/shop/refund?order_sn=${order.order_sn}`" hover-class="navigator-hover">
|
||
<view class="nullBut border fcb rad8 fz28 flex mac mc">
|
||
申请售后
|
||
</view>
|
||
</navigator>
|
||
<view v-if="showRefundDetailsButton" class="nullBut border fcb rad8 fz28 flex mac mc m-l-24">
|
||
退款详情
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
parseTime,
|
||
formatPrice
|
||
} from '@/utils/index.js'
|
||
export default {
|
||
name: 'orderItem',
|
||
data() {
|
||
return {
|
||
foodSn: '取餐号', //取餐号 文字轮播
|
||
intervalId: null, // 存储定时器ID，用于清除定时器
|
||
}
|
||
},
|
||
created() {
|
||
this.intervalId = setInterval(() => {
|
||
this.foodSn = this.foodSn === '取餐号' ? this.order.food_sn : '取餐号'
|
||
}, 1200)
|
||
},
|
||
destroyed() {
|
||
// 清除定时器，避免内存泄漏
|
||
clearInterval(this.intervalId);
|
||
},
|
||
computed: {
|
||
//订单总价格
|
||
fullPrice(){
|
||
return this.formatPrice(Number(this.order.transport_price) + Number(this.order.pack_price) + Number(this.order.total_price))
|
||
},
|
||
// 是否显示 "立即支付" 按钮
|
||
showPayButton() {
|
||
return this.order.main_status === '未付款';
|
||
},
|
||
// 是否显示 "取餐号"
|
||
showPickupNumber() {
|
||
return this.order.main_status === '已付款' && this.order.refund_status === '未申请';
|
||
},
|
||
// 是否显示 "申请售后" 按钮
|
||
showAfterSaleButton() {
|
||
return this.order.main_status === '已付款' && this.order.refund_status === '未申请';
|
||
},
|
||
// 是否显示 "退款详情" 按钮
|
||
showRefundDetailsButton() {
|
||
return this.order.refund_status !== '未申请' && this.order.main_status !== '已完成';
|
||
},
|
||
// 显示订单状态
|
||
orderStatusDisplay() {
|
||
if (this.order.main_status === '未付款') {
|
||
return '待支付';
|
||
}
|
||
if (this.order.main_status === '已付款' && this.order.refund_status === '未申请') {
|
||
return this.order.shipment_status;
|
||
}
|
||
switch (this.order.refund_status) {
|
||
case '申请中':
|
||
return '申请中';
|
||
case '已同意':
|
||
return '商家同意退款';
|
||
case '主动退':
|
||
return '商家退单';
|
||
case '拒绝退':
|
||
return '商家拒绝退款';
|
||
default:
|
||
return '';
|
||
}
|
||
},
|
||
// 显示退款状态
|
||
refundStatusDisplay() {
|
||
switch (this.order.refund_status) {
|
||
case '申请中':
|
||
return '申请中';
|
||
case '已同意':
|
||
return '商家同意退款';
|
||
case '主动退':
|
||
return '商家退单';
|
||
case '拒绝退':
|
||
return '商家拒绝退款';
|
||
default:
|
||
return '';
|
||
}
|
||
},
|
||
},
|
||
methods:{
|
||
formatPrice //价格格式化
|
||
},
|
||
props: {
|
||
order: {
|
||
type: Object,
|
||
deep: true
|
||
}
|
||
},
|
||
filters: {
|
||
parseTime, //日期 格式化
|
||
formatPrice //价格 格式化
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.scroll-view_H {
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
}
|
||
|
||
.scroll-view-item_H {
|
||
display: inline-block;
|
||
height: 110rpx;
|
||
line-height: 110rpx;
|
||
}
|
||
|
||
.priceBox {
|
||
margin-top: 85rpx;
|
||
}
|
||
</style> |