cashier_admin_app/pagesOrder/detail/components/list.vue

<template>
	<view class="default-box-padding bg-fff border-r-12 u-m-t-20" v-if="data.length">
		<view class="u-font-32 font-bold">
			<text>共</text>
			<text class="color-main font-bold"> {{goodsNumber}}</text>
			<text>份菜品</text>
		</view>
		<view class="u-m-b-20 u-m-t-20" v-for="(order,orderIndex) in data" :key="orderIndex">
			<view class="u-font-32"> 第{{ order.placeNum }}次下单
			</view>
			<view class="u-m-t-20 list">
				<view class="item  u-m-b-20" v-for="(item,index) in order.info" :key="index">
					<view class="u-flex u-col-top">
						<view>
							<image class="img" :src="item.coverImg||item.productImg" mode=""></image>
						</view>
						<view class="u-p-l-30 u-flex-1">
							<view class="u-flex u-row-between u-col-top">
								
								<view class="">
									<view class="u-flex">
										<view class="tui" v-if="item.status=='return'">
											已退
										</view>
										<view :class="{'line-th':item.status=='return'}">{{item.name||item.productName}}</view>
									</view>
									<view class="color-999 u-font-24 u-m-t-10">{{item.productSkuName||''}}</view>
								</view>
								<view class="u-text-right">
									<template v-if="item.status=='return'">
										<view >￥0.00</view>
										<view  class="line-th color-666 u-font-24">￥{{item.salePrice||item.price}}</view>
									</template>
									<template v-else>
										<view >￥{{item.salePrice||item.price}}</view>
									</template>
									<view class="u-m-t-10 u-font-24">X{{item.number||item.num}}</view>
								</view>
							</view>
						</view>
					</view>
					<template v-if="orderInfo.status=='unpaid'">
						<view class="u-flex u-row-right gap-20 u-m-t-20" v-if="item.status!='return'">
							<!-- <my-button :height="60" color="#333" plain type="cancel" shape="circle">更多操作</my-button> -->
							<my-button :width="168" :height="60" plain shape="circle" @tap="tuicai(item,index)">退菜</my-button>
						</view>
					</template>
					<template v-if="orderInfo.status=='closed'">
						<view class="u-flex u-row-right gap-20 u-m-t-20" v-if="item.status!='return'">
							<my-button :width="168" :height="60" plain shape="circle" @tap="tuikuan(item,index)">退款</my-button>
						</view>
					</template>
				</view>
			</view>
			<view class="bg-gray u-p-20 u-m-t-20">
				<view>备注</view>
				<view class="u-m-t-10">{{orderInfo.remark}}</view>
			</view>
		</view>

		<view class="u-m-t-40">
			<view class="u-flex u-row-between border-bottom u-p-b-20">
				<view>
					<template v-if="orderInfo.status=='unpaid'">
						<view class="tag no-pay">
							未支付
						</view>
					</template>
					
				</view>
				
				<view>
					<text>小计￥</text>
					<text class="font-bold u-font-32">{{allPrice}}</text>
				</view>
			</view>

			<view class="u-flex u-row-between u-m-t-20">
				<view></view>
				<view>
					<text>总计￥</text>
					<text class="font-bold u-font-32">{{seatFee*1+allPrice*1}}</text>
				</view>
			</view>
			<view class="u-m-t-30">
				<my-button @tap="printOrder" type="cancel" :color="color.ColorMain">重新打印</my-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue';
	import color from '@/commons/color.js'
	const emits=defineEmits(['tuicai','tuikuan','printOrder'])
	function tuicai(item,index){
		emits('tuicai',item,index)
	}
	function tuikuan(item,index){
		emits('tuikuan',item,index)
	}
	function printOrder(){
		emits('printOrder')
	}
	const props = defineProps({
		orderInfo:{
			type: Object,
			default: () => {}
		},
		data: {
			type: Array,
			default: () => []
		},
		seatFee:{
			type:[String,Number],
			default:0
		}
	})
	const allPrice = computed(() => {
		return props.data.reduce((prve, cur) => {
			const curTotal=cur.info.filter(v=>v.isGift !== "true"&& v.status !== "return").reduce((a,b)=>{
				return a+(b.salePrice||b.price) * (b.number||b.num)
			},0)
			return prve + curTotal
		}, 0).toFixed(2)
	})
	
	const goodsNumber = computed(() => {
		let result = 0
		result = props.data.reduce((a, b) => {
			const bTotal = b.info.reduce((prve, cur) => {
				return prve + (cur.number||cur.num) * 1;
			}, 0);
			return a + bTotal
		}, 0)
		return result
	})
	
</script>

<style lang="scss" scoped>
	.img {
		width: 70rpx;
		height: 70rpx;
	}

	.border-bottom {
		border-color: rgb(240, 240, 240);
	}
	.line-th{
		text-decoration: line-through;
	}
	.tag {
		padding: 2rpx 8rpx;
		border-radius: 8rpx;

		&.no-pay {
			background-color: rgb(170, 170, 170);
			color: #fff;
		}
	}
	.tui{
		background-color: rgb(239, 239, 239);
		border-radius: 4rpx;
		margin-right: 6rpx;
		color: #666;
		padding: 0 4rpx;
		font-size: 20rpx;
	}
	
</style>