food_wechat/components/orderItem/orderItem.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">
					¥{{Number(order.transport_price) + Number(order.pack_price) + Number(order.total_price) | formatPrice}}
				</view>
				<view class="fz24 fcb">共{{order.total_num}}件</view>
			</view>
		</view>
		<view class="m-t-24 flex mr">
			<view v-if="showPayButton" class="nullBut bg-m fci rad8 fz28 flex mac mc m-l-24">
				立即支付
			</view>
			<view v-if="showPickupNumber" class="numberBut bg-m fci rad8 fz28 fb flex mac mc m-l-24">
				{{ foodSn }}
			</view>
			<view v-if="showAfterSaleButton" class="nullBut border fcb rad8 fz28 flex mac mc m-l-24">
				申请售后
			</view>
			<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: {
			// 计算属性：是否显示 "立即支付" 按钮
			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 '';
				}
			},
		},
		props: {
			order: {
				type: Object,
				deep: true
			}
		},
		filters: {
			parseTime, //日期 格式化
			formatPrice //价格 格式化
		},
	}
</script>

<style lang="scss" scoped>
	.spuGmap {
		height: 110rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item_H {
		display: inline-block;
		height: 110rpx;
		line-height: 110rpx;
	}

	.priceBox {
		margin-top: 85rpx;
	}

	.numberBut {
		width: 130rpx;
		height: 48rpx;
	}

	.nullBut {
		width: 159rpx;
		height: 48rpx;
	}
</style>