From 847a4f3a29a4fbde5e8b55979dd060a63f20b4f3 Mon Sep 17 00:00:00 2001
From: sszdot <szdot@qq.com>
Date: Wed, 11 Dec 2024 19:15:21 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=B1=BB=20=20=E5=9E=8B=E3=80=91?=
 =?UTF-8?q?=EF=BC=9Afeat=20=E3=80=90=E5=8E=9F=20=20=E5=9B=A0=E3=80=91?=
 =?UTF-8?q?=EF=BC=9A=20=E3=80=90=E8=BF=87=20=20=E7=A8=8B=E3=80=91=EF=BC=9A?=
 =?UTF-8?q?=E6=96=B0=E7=9A=84=E5=9C=B0=E5=9D=80=E5=9B=BE=E7=89=87=20?=
 =?UTF-8?q?=E3=80=90=E5=BD=B1=20=20=E5=93=8D=E3=80=91=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动
---
 App.vue              |   6 +--
 pages/shop/order.vue | 111 +++++++++++++++++++++++++++++++------------
 static/colorBar.png  | Bin 0 -> 164 bytes
 3 files changed, 83 insertions(+), 34 deletions(-)
 create mode 100644 static/colorBar.png

diff --git a/App.vue b/App.vue
index fa75234..21eb7f0 100644
--- a/App.vue
+++ b/App.vue
@@ -257,15 +257,15 @@
 	}
 
 	.fz24 {
-		font-size: $uni-font-size-sm;
+		font-size: 24rpx;
 	}
 
 	.fz28 {
-		font-size: $uni-font-size-base;
+		font-size: 28rpx;
 	}
 
 	.fz32 {
-		font-size: $uni-font-size-lg;
+		font-size: 32rpx;
 	}
 
 	.fz36 {
diff --git a/pages/shop/order.vue b/pages/shop/order.vue
index eebb888..ac6a49d 100644
--- a/pages/shop/order.vue
+++ b/pages/shop/order.vue
@@ -7,56 +7,84 @@
 			</view>
 		</u-navbar>
 		<!-- 地址框 -->
-		<view class="m-24 p-24 bg-w siteBox rad8 boxshadow">
-			<view class="flex md msb borderBDas p-b-24">
+		<view class="m-l-24 m-r-24 m-t-24 p-t-24 p-b-24 bg-w rad8 boxshadow">
+			<view class="flex md msb p-b-24 p-l-24 p-r-24">
 				<view class="flex md">
 					<u--image src="/static/icons/site-48.svg" width="75rpx" height="75rpx" />
-					<view class="m-l-24 fz36 fcm fb">{{siteCon.sitename}}</view>
+					<view class="m-l-24 fz36 fb">收货站点：<font class="fcm">{{siteCon.sitename}}</font>
+					</view>
 				</view>
 				<view>
 					<u--image src="/static/icons/pulldown-40.svg" width="40rpx" height="40rpx" />
 				</view>
 			</view>
-			<view class="flex m-t-24 fz28 msb">
+			<view class="colorBar"></view>
+			<view class="flex m-t-24 p-l-24 p-r-24 fz28 msb">
 				<view>配置物流</view>
 				<view>{{shopCon.name}}</view>
 			</view>
-			<view class="flex m-t-12 fz28 msb">
+			<view class="flex m-t-12 p-l-24 p-r-24 fz28 msb">
 				<view>送达时间</view>
 				<view>预估30分钟之后送达</view>
 			</view>
 		</view>
 		<!-- 订单详情 -->
-		<view class="fb fz36 m-24">商品详情</view>
-		<view class="m-24 m-t-12 flex column">
+		<view class="m-l-24 m-r-24 m-t-24 p-24 bg-w rad8 boxshadow">
+			<view class="fb fz36 m-b-24">餐品详情</view>
 			<!-- cart -->
-			<view class="flex" v-for="(item,index) in cartList" :key="index">
-				<view class="rad8" style="width:192rpx;height: 144rpx;">
-					<u--image :src="item.photo" width="192rpx" height="144rpx"></u--image>
-				</view>
-				<view class="flex1 flex column p-24">
-					<view class="fz28 m-b-24">{{item.spu_name}}</view>
-					<view v-for="(i,index) in item.sku_nameG" :key="index" v-if="item.sku_nameG.length>1"
-						class="fz24 fcb l-h-12">1 X {{i}}</view>
-					<view class="fz32 fcm fb m-t-24" style="height: 36rpx;">¥{{item | calculateTotal}}</view>
+			<view class="flex m-t-24 msb" v-for="(item,index) in cartList" :key="index">
+				<view class="flex">
+					<u--image :src="item.photo" width="192rpx" height="144rpx" />
+					<view class="m-l-24 flex column">
+						<view class="fz32 m-b-12">{{item.spu_name}}</view>
+						<view class="fz24 fcb" v-for="(i,index) in item.sku_nameG" :key="index"
+							v-if="item.sku_nameG.length>1">
+							X1 {{i}}
+						</view>
+						<view class="fz24 m-t-12">X{{item.countG[0]}}</view>
+					</view>
 				</view>
+				<view class="fz36 fb m-l-12">¥{{item | calculateTotal}}</view>
 			</view>
 		</view>
 		<!-- 价格明细 -->
-		<view class="fb fz36 m-24">价格明细</view>
-		<view class="flex msb m-l-24 m-r-24 fz32">
-			<view>商品小计</view>
-			<view>¥{{total | formatPrice}}</view>
+		<view class="m-l-24 m-r-24 m-t-24 p-24 bg-w rad8 boxshadow">
+			<view class="fb fz36 m-b-24 borderBDas p-b-12">价格明细</view>
+			<view class="flex msb fb m-b-12">
+				<view class="fz28">商品小计</view>
+				<view class="fz36">¥{{total | formatPrice}}</view>
+			</view>
+			<view class="flex msb fz28 m-b-12">
+				<view>外送费</view>
+				<view>¥5.00</view>
+			</view>
+			<view class="flex msb fz28 m-b-24 p-b-24 borderBDas">
+				<view>打包服务费</view>
+				<view>¥2.00</view>
+			</view>
+			<view class="flex mr mac">
+				<view class="fcb fz24">合计</view>
+				<view class="m-l-12 fz36 fb">¥{{total | formatPrice}}</view>
+			</view>
 		</view>
 		<!-- 客户备注 -->
-		<textarea class="border" v-model="remark"></textarea>
-		<!-- 提交订单 -->
-		<view class="subBox flex mr mac">
-			<view class="m-r-24 fb">
-				<text class="fz24">合计：</text>
-				<text class="fz44">¥{{total | formatPrice}}</text>
+		<view class="flex msb m-l-24 m-r-24 m-t-24 p-24 bg-w rad8 boxshadow backBox">
+			<view class="fz28">备注</view>
+			<view class="fcb fz28 flex mac">
+				<view class="fz24">口味、偏好等要求</view>
+				<u-icon name="arrow-right" size="28rpx"></u-icon>
 			</view>
-			<view class="fz32 flex column mac mc fci rad16 m-r-24" style="width:220rpx;height:100rpx;"
+		</view>
+		<!-- 提交订单 -->
+		<view class="subBox flex mr mu p-t-24 p-b-24">
+			<view class="fz24 fcb m-r-12 l-h-18">
+				合计
+			</view>
+			<view class="flex column m-r-12">
+				<view class="fb fz36">¥{{total | formatPrice}}</view>
+				<view class="fz24">共{{totalCount}}件</view>
+			</view>
+			<view class="fz32 flex column mac mc fci rad8 m-r-24" style="width:220rpx;height:100rpx;"
 				@click="handleCheckout" :class="isPressed?'bg-g':'bg-m'">
 				<view>提交订单</view>
 				<view>Checkout</view>
@@ -86,7 +114,7 @@
 				return this.$store.state.siteList.find(item => item.id === this.$store.state.site_id.toString())
 			},
 			//商铺信息
-			shopCon(){
+			shopCon() {
 				return this.$store.state.shopCon
 			},
 			//购物车列表
@@ -97,6 +125,16 @@
 			total() {
 				return this.totalPrice(this.$store.state.cartList)
 			},
+			//购物车货品总数 ps:sku的总数
+			totalCount() {
+				let total = 0
+				for (let i = 0; i < this.cartList.length; i++) {
+					for (let j = 0; j < this.cartList[i].countG.length; j++) {
+						total += this.cartList[i].countG[j]
+					}
+				}
+				return total
+			},
 			//用户信息
 			userInfo() {
 				return this.$store.state.userInfo
@@ -107,7 +145,7 @@
 			totalPrice,
 			//提交订单
 			handleCheckout() {
-				if (this.isPressed) {//防止提交订单按钮重复点击
+				if (this.isPressed) { //防止提交订单按钮重复点击
 					return
 				}
 				this.isPressed = true
@@ -169,13 +207,24 @@
 
 <style lang="scss" scoped>
 	.subBox {
-		height: 150rpx;
+		height: 122rpx;
 		background-color: $uni-bg-color;
 		z-index: 10076;
 		width: 100vw;
 		position: fixed;
 		bottom: 0rpx;
 	}
-	.siteBox{
+
+	.backBox {
+		margin-bottom: 194rpx;
+	}
+
+	.colorBar {
+		height: 5rpx;
+		background-image: url('/static/colorBar.png');
+		background-size: contain;
+		/* 防止图像重复 */
+		background-position: center;
+		/* 居中显示 */
 	}
 </style>
\ No newline at end of file
diff --git a/static/colorBar.png b/static/colorBar.png
new file mode 100644
index 0000000000000000000000000000000000000000..f180db71af3c5ea768eb5121d240384a373e4eca
GIT binary patch
literal 164
zcmeAS@N?(olHy`uVBq!ia0vp^ia^ZD!3HEx-)!{<Qj#UE5hcO-X(i=}MX3yqDfvmM
z3ZA)%>8U}fi7AzZCsS>JirhS1978H@C8anppO<KP#=Me+?al)x0c$VAJ--`#C+X+2
zd%Uk<`=jvjvPwUz0pDW>YlfqO%ugA1D6?H+OmOGf!tB7HaDYL<-iYl$F3%~Ti42~u
KelF{r5}E+Dfia%|

literal 0
HcmV?d00001