订单管理页面

2024-09-14 18:27:50 +08:00
parent 5a973af47a
commit 2ce6ad9d8a
13 changed files with 1000 additions and 0 deletions
--- a/pagesOrder/detail/components/list.vue
+++ b/pagesOrder/detail/components/list.vue
@@ -0,0 +1,144 @@
+<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" mode=""></image>
+						</view>
+						<view class="u-p-l-30 u-flex-1">
+							<view class="u-flex u-row-between u-col-top">
+								
+								<view class="u-flex">
+									<view class="tui" v-if="item.status=='return'">
+										已退
+									</view>
+									<view :class="{'line-th':item.status=='return'}">{{item.name}}</view>
+								</view>
+								<view class="u-text-right">
+									<view>￥{{item.salePrice}}</view>
+									<view v-if="item.status=='return'" class="line-th color-666 u-font-24">￥{{item.salePrice}}</view>
+									<view class="u-m-t-10 u-font-24">X{{item.number}}</view>
+								</view>
+							</view>
+						</view>
+					</view>
+					<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>
+				</view>
+			</view>
+			<view class="bg-gray u-p-20 u-m-t-20">
+				<view>备注</view>
+				<view class="u-m-t-10">无</view>
+			</view>
+		</view>
+
+		<view class="u-m-t-40">
+			<view class="u-flex u-row-between border-bottom u-p-b-20">
+				<view class="tag no-pay">
+					未支付
+				</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'])
+	function tuicai(item,index){
+		emits('tuicai',item,index)
+	}
+	const props = defineProps({
+		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.number
+			},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 * 1;
+			}, 0);
+			return a + bTotal
+		}, 0)
+		return result
+	})
+	function printOrder(){
+		
+	}
+</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>