From 8a27209c841f8c9d70337055773b6bb5eed52828 Mon Sep 17 00:00:00 2001
From: sszdot <szdot@qq.com>
Date: Wed, 8 Jan 2025 15:47:38 +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=E8=A1=A5=E9=BD=90=E4=B9=8B=E5=89=8D=E4=B8=BA=E5=86=99?=
 =?UTF-8?q?=E7=9A=84=20=20=E6=8F=90=E4=BA=A4=E7=94=A8=E6=88=B7=E4=B8=8B?=
 =?UTF-8?q?=E5=8D=95=E5=A4=87=E6=B3=A8=E5=8A=9F=E8=83=BD=20=E3=80=90?=
 =?UTF-8?q?=E8=BF=87=20=20=E7=A8=8B=E3=80=91=EF=BC=9A=E4=BB=8E=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E5=BA=93=E6=8B=BF=20=E4=B8=8B=E5=8D=95=E5=A4=87?=
 =?UTF-8?q?=E6=B3=A8=E9=A2=84=E8=AE=BE=E5=88=97=E8=A1=A8=20+=20=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E8=BE=93=E5=85=A5=E2=80=99=E5=85=B6=E4=BB=96?=
 =?UTF-8?q?=E2=80=98=E7=9A=84=E5=8A=9F=E8=83=BD=20=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E6=A3=80=E6=9F=A5=E5=AD=97=E6=95=B0=20=E9=99=90=E5=88=B6?=
 =?UTF-8?q?=E5=AD=97=E6=95=B0=E7=AD=89=20=E3=80=90=E5=BD=B1=20=20=E5=93=8D?=
 =?UTF-8?q?=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：构建过程或辅助工具的变动
---
 pages/shop/confirm.vue | 113 ++++++++++++++++++++++++++++++++++-------
 1 file changed, 96 insertions(+), 17 deletions(-)

diff --git a/pages/shop/confirm.vue b/pages/shop/confirm.vue
index 41be0b2..4b147db 100644
--- a/pages/shop/confirm.vue
+++ b/pages/shop/confirm.vue
@@ -49,7 +49,7 @@
 		</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="fb fz36 m-b-24 l-h-18 borderBDas">价格明细</view>
 			<view class="flex msb fb m-b-12">
 				<view class="fz28">商品小计</view>
 				<view class="fz36">¥{{total | formatPrice}}</view>
@@ -68,13 +68,9 @@
 			</view>
 		</view>
 		<!-- 客户备注 -->
-		<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>
+		<cell cellTit="备注" :cellCon="remarkDescription | truncate(8)" @click="handledrRemarkShow"></cell>
+		<!-- 底部空白占位 -->
+		<view class="extra-space1"></view>
 		<!-- 提交订单 -->
 		<view class="subBox flex mr mu p-t-24 p-b-24">
 			<view class="fz24 fcb m-r-12 l-h-18">
@@ -84,13 +80,50 @@
 				<view class="fb fz36">¥{{fullPrice | 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 class="fz32 flex column mac mc fci rad8 m-r-24 checkBox" @click="handleCheckout"
+				:class="isPressed?'bg-g':'bg-m'">
 				<view>提交订单</view>
 				<view>Checkout</view>
 			</view>
 		</view>
-	</view>
+		<!-- 客户备注 折叠面板 -->
+		<u-popup :show="remarkShow" round="10" mode="bottom" @close="closeRemark" zIndex="10080">
+			<view class="p-24">
+				<!-- title -->
+				<view class="flex mc md">
+					<view class="fz32">备注</view>
+				</view>
+				<!-- list -->
+				<view class="ofa m-t-12 m-b-12 flex column" style="max-height: 60vh;">
+					<view v-for="(item,index) in remark_presup" :key='index' @click="currentRemark=index"
+						class="flex mac msb fz28 borderBDas m-t-12" style="height: 60rpx;">
+						<view>{{item}}</view>
+						<view class="border rad-c radioBox" :class="currentRemark===index?'border-m bg-m':''">
+							<u-icon name="checkbox-mark" size="40rpx" color="#fff"
+								v-if="currentRemark===index"></u-icon>
+						</view>
+					</view>
+					<view class="flex mac msb fz28 m-t-12" style="height: 60rpx;"
+						@click="currentRemark=remark_presup.length+1">
+						<view class="flex mub">
+							<view>其他</view>
+							<view class="fz24 fcb m-l-12" v-if="currentRemark===remark_presup.length+1">{{ remarkValue.length }}/{{ txtmaxlength }}</view>
+						</view>
+						<view class="border rad-c radioBox"
+							:class="currentRemark===remark_presup.length+1?'border-m bg-m':''">
+							<u-icon name="checkbox-mark" size="40rpx" color="#fff"
+								v-if="currentRemark===remark_presup.length+1"></u-icon>
+						</view>
+					</view>
+					<view @click="currentRemark=remark_presup.length+1">
+						<u-input class="border" v-model="remarkValue" type="textarea" placeholder="请填写你的订单备注"
+							:maxlength="txtmaxlength" :border="false" :auto-height="true" />
+					</view>
+				</view>
+				<!-- 占位 -->
+				<view class="extra-space1"></view>
+			</view>
+		</u-popup>
 	</view>
 </template>
 
@@ -98,14 +131,19 @@
 	import {
 		calculateTotal,
 		formatPrice,
-		totalPrice
+		totalPrice,
+		truncate
 	} from '@/utils/index.js'
 
 	export default {
 		data() {
 			return {
 				isPressed: false, //提交按钮是否锁定
-				remark: '' //用户备注
+				remark: '', //用户备注 提交时候的值
+				remarkShow: false, //用户备注弹出层
+				currentRemark: -1, // 当前选中的备注索引
+				remarkValue: '', // 备注输入的内容
+				txtmaxlength: 30, //备注其他文本框最多字数限制
 			}
 		},
 		computed: {
@@ -117,6 +155,27 @@
 			shopCon() {
 				return this.$store.state.shopCon
 			},
+			//备注预设列表
+			remark_presup() {
+				if (this.shopCon !== null && this.shopCon.remark_presup !== '[]') {
+					return JSON.parse(this.shopCon.remark_presup)
+				} else {
+					return []
+				}
+			},
+			//备注缩略显示
+			remarkDescription() {
+				if (this.currentRemark !== -1) {
+					if (this.currentRemark === this.remark_presup.length + 1) {
+						if (this.remarkValue) {
+							return this.remarkValue
+						}
+					} else {
+						return this.remark_presup[this.currentRemark]
+					}
+				}
+				return '口味、偏好等要求'
+			},
 			//预估送达时间
 			estimated() {
 				return 30
@@ -157,6 +216,12 @@
 			}
 		},
 		methods: {
+			handledrRemarkShow() {
+				this.remarkShow = true
+			},
+			closeRemark() {
+				this.remarkShow = false
+			},
 			//计算购物车总价
 			totalPrice,
 			//提交订单
@@ -166,6 +231,13 @@
 				}
 				this.isPressed = true
 				//提交订单
+				if(this.currentRemark!==-1){
+					if(this.currentRemark===this.remark_presup.length+1){
+						this.remark=this.remarkValue
+					}else{
+						this.remark=this.remark_presup[this.currentRemark]
+					}
+				}
 				uni.$u.http.post('/Api/Check/checkout', {
 					cartList: JSON.stringify(this.cartList), //购物车列表
 					shop_id: this.$store.state.shop_id, //商铺id
@@ -212,6 +284,7 @@
 		filters: {
 			calculateTotal, //计算spu单价
 			formatPrice, //格式化价格
+			truncate //文本截取
 		},
 		onShow() {
 			//购物车没有信息 跳转到订单查询页面
@@ -234,10 +307,6 @@
 		bottom: 0rpx;
 	}
 
-	.backBox {
-		margin-bottom: 194rpx;
-	}
-
 	.colorBar {
 		height: 5rpx;
 		background-image: url('/static/colorBar.png');
@@ -246,4 +315,14 @@
 		background-position: center;
 		/* 居中显示 */
 	}
+
+	.checkBox {
+		width: 220rpx;
+		height: 100rpx;
+	}
+
+	.radioBox {
+		width: 40rpx;
+		height: 40rpx;
+	}
 </style>
\ No newline at end of file