From 5546e6ccbb57f5ccd6418e25d1dd1e8d61aab215 Mon Sep 17 00:00:00 2001
From: YeMingfei666 <1619116647@qq.com>
Date: Wed, 17 Dec 2025 18:42:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=A4=87=E6=B3=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/product/components/modal.vue          |   97 +
 pages/product/components/shoppingCartes.vue | 1778 ++++++++++---------
 pages/product/index.vue                     |    2 +-
 3 files changed, 993 insertions(+), 884 deletions(-)
 create mode 100644 pages/product/components/modal.vue

diff --git a/pages/product/components/modal.vue b/pages/product/components/modal.vue
new file mode 100644
index 0000000..5d90202
--- /dev/null
+++ b/pages/product/components/modal.vue
@@ -0,0 +1,97 @@
+<template>
+  <view>
+    <up-popup
+      :show="show"
+      mode="center"
+      :safeAreaInsetBottom="mode === 'bottom' ? true : false"
+    >
+      <view class="popup-content">
+        <view class="top u-flex u-row-between">
+          <text class="font-bold u-font-32 color-333">{{ title }}</text>
+          <up-icon size="18" name="close" @click="show = false"></up-icon>
+        </view>
+        <up-line></up-line>
+        <scroll-view style="max-height: 50vh" :scroll-y="true">
+          <slot></slot>
+        </scroll-view>
+        <template v-if="showBottom">
+          <up-line></up-line>
+
+          <view class="bottom">
+            <view class="btn cancel" @click="close">{{ cancelText }}</view>
+            <view class="btn success" @click="confirm">{{ confirmText }}</view>
+          </view>
+        </template>
+      </view>
+    </up-popup>
+  </view>
+</template>
+
+<script setup>
+const props = defineProps({
+  mode: {
+    type: String,
+    default: "center",
+  },
+  title: {
+    type: String,
+    default: "标题",
+  },
+  confirmText: {
+    type: String,
+    default: "确认",
+  },
+  cancelText: {
+    type: String,
+    default: "取消",
+  },
+  showBottom: {
+    type: Boolean,
+    default: true,
+  },
+});
+const show = defineModel({
+  type: Boolean,
+  default: false,
+});
+const emits = defineEmits(["close", "confirm"]);
+function close() {
+  show.value = false;
+  emits("close");
+}
+function confirm() {
+  emits("confirm");
+}
+</script>
+<style lang="scss">
+.popup-content {
+  background: #fff;
+  width: 640rpx;
+  border-radius: 18rpx;
+}
+.top {
+  padding: 40rpx 48rpx;
+}
+.bottom {
+  padding: 48rpx 52rpx;
+  display: flex;
+  justify-content: space-between;
+  gap: 50rpx;
+  .btn {
+    flex: 1;
+    text-align: center;
+    padding: 18rpx 60rpx;
+    border-radius: 100rpx;
+    font-size: 32rpx;
+    border: 2rpx solid transparent;
+    &.success {
+      background-color: $my-main-color;
+      color: #fff;
+    }
+    &.cancel {
+      border-color: $my-main-color;
+      color: $my-main-color;
+    }
+  }
+}
+</style>
diff --git a/pages/product/components/shoppingCartes.vue b/pages/product/components/shoppingCartes.vue
index 646991c..fe4bac1 100644
--- a/pages/product/components/shoppingCartes.vue
+++ b/pages/product/components/shoppingCartes.vue
@@ -1,922 +1,934 @@
 <template>
-  <view>
-    <up-popup
-      :show="showCart"
-      :round="20"
-      :safeAreaInsetBottom="false"
-      :zIndex="98"
-      :overlayStyle="{ zIndex: 98 }"
-      @close="close"
-    >
-      <view class="cart-list-wrap">
-        <!-- 	<view class="cart-header flex-between">
+	<view>
+		<up-popup :show="showCart" :round="20" :safeAreaInsetBottom="false" :zIndex="98" :overlayStyle="{ zIndex: 98 }"
+			@close="close">
+			<view class="cart-list-wrap">
+				<!-- 	<view class="cart-header flex-between">
 					<view class="num">已点 {{ cartLists_count }} 份</view>
 					<view class="clear" @click="cartclear">
 						<up-icon name="trash" color="#999"></up-icon>
 						<text class="t">清空</text>
 					</view>
 				</view> -->
-        <scroll-view scroll-y class="scroll-view">
-          <view class="list-wrap" :class="[nextFullAmountActivty?'pb-20': '']">
-            <view v-if="cartList.length > 0">
-              <view class="ShoppingCart flex-between">
-                <view> 购物车 </view>
-                <view class="flex-between" @click="cartclear">
-                  <up-icon name="trash" color="#999" size="20"></up-icon>
-                  <text class="clear-btn">清空购物车</text>
-                </view>
-              </view>
-              <view
-                class="shop-item"
-                v-for="(item, index) in cartList"
-                :key="item.id"
-              >
-                <view class="shop-item-content">
-                  <view class="cover" v-if="item.productId != -999">
-                    <view class="limit-discount" v-if="showLimitDiscount(item)">
-                      限时折扣
-                    </view>
-                    <up-image
-                      :src="item.coverImg"
-                      width="124rpx"
-                      height="124rpx"
-                      mode="aspectFill"
-                      radius="10"
-                    ></up-image>
-                  </view>
-                  <view class="info">
-                    <view class="name">
-                      {{
+				<scroll-view scroll-y class="scroll-view">
+					<view class="list-wrap" :class="[nextFullAmountActivty?'pb-20': '']">
+						<view v-if="cartList.length > 0">
+							<view class="ShoppingCart flex-between">
+								<view> 购物车 </view>
+								<view class="flex-between" @click="cartclear">
+									<up-icon name="trash" color="#999" size="20"></up-icon>
+									<text class="clear-btn">清空购物车</text>
+								</view>
+							</view>
+							<view class="shop-item" v-for="(item, index) in cartList" :key="item.id">
+								<view class="shop-item-content">
+									<view class="cover" v-if="item.productId != -999">
+										<view class="limit-discount" v-if="showLimitDiscount(item)">
+											限时折扣
+										</view>
+										<up-image :src="item.coverImg" width="124rpx" height="124rpx" mode="aspectFill"
+											radius="10"></up-image>
+									</view>
+									<view class="info">
+										<view class="name">
+											{{
                         item.cartListinfo.is_temporary == 1
                           ? "临时菜"
                           : item.name
                       }}
-                    </view>
-                    <view class="select-sku-wrap" v-if="item.type == 'sku'">
-                      <text v-for="i in item.skuList" :key="i.id">
-                        {{ item.cartListinfo.sku_id == i.id ? i.name : "" }}
-                      </text>
-                    </view>
-                    <view class="select-sku-wrap" v-if="item.type == 'package'">
-                      <view
-                        v-for="(a, b) in dataprocessing(item.cartListinfo)"
-                        :key="b"
-                      >
-                        <!-- <view>{{a.title}}</view> -->
-                        <text
-                          v-for="i in a.goods"
-                          :key="i.proId"
-                          style="margin-left: 4rpx"
-                        >
-                          {{ i.proName }}
-                        </text>
-                      </view>
-                    </view>
-                    <view class="price-wrap" style="padding-top: 0">
-                      <view class="price">
-                        <text class="i">¥</text>
-                        <goodsPrice
-                          :limitDiscount="limitDiscount"
-                          :cart="item"
-                          :shopUserInfo="shopUserInfo"
-                          :shopInfo="shopInfo"
-                        ></goodsPrice>
+										</view>
+										<view class="select-sku-wrap" v-if="item.type == 'sku'">
+											<text v-for="i in item.skuList" :key="i.id">
+												{{ item.cartListinfo.sku_id == i.id ? i.name : "" }}
+											</text>
+										</view>
+										<view class="select-sku-wrap" v-if="item.type == 'package'">
+											<view v-for="(a, b) in dataprocessing(item.cartListinfo)" :key="b">
+												<!-- <view>{{a.title}}</view> -->
+												<text v-for="i in a.goods" :key="i.proId" style="margin-left: 4rpx">
+													{{ i.proName }}
+												</text>
+											</view>
+										</view>
+										<view class="u-font-24 color-666 u-flex">
+											<text style="max-width: 296rpx;" class="u-line-1">备注：</text>
+											<image @click="editRemark(item)"
+												src="https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/3/9fe4df7c6c8b4290aa5f78282b143900.png"
+												style="width: 34rpx;height: 34rpx;"></image>
+										</view>
+										<view class="price-wrap" style="padding-top: 0">
+											<view class="price">
+												<text class="i">¥</text>
+												<goodsPrice :limitDiscount="limitDiscount" :cart="item"
+													:shopUserInfo="shopUserInfo" :shopInfo="shopInfo"></goodsPrice>
 
-                        <text
-                          class="originalprice" v-if="showLimitDiscount(item)"
-                          >{{ item.salePrice }}</text
-                        >
+												<text class="originalprice"
+													v-if="showLimitDiscount(item)">{{ item.salePrice }}</text>
 
-                        <!-- <text class="originalprice"
+												<!-- <text class="originalprice"
 													v-if="item.originPrice">¥{{item.originPrice}}</text>
 												<text class="unit" v-if="item.unitName">/{{item.unitName}}</text> -->
-                      </view>
+											</view>
 
-                      <view class="operation-wrap">
-                        <view class="btn">
-                          <up-icon
-                            color="#E8AD7B"
-                            name="minus-circle"
-                            size="18"
-                          ></up-icon>
-                          <view
-                            class="btnClick"
-                            @click="cartListadd(item, '-')"
-                          ></view>
-                        </view>
-                        <text class="num">{{ ifcartNumber(item) }}</text>
-                        <view class="btn" v-if="item.type != 'package'">
-                          <!-- <up-icon name="plus-circle-fill"
+											<view class="operation-wrap">
+												<view class="btn">
+													<up-icon color="#E8AD7B" name="minus-circle" size="18"></up-icon>
+													<view class="btnClick" @click="cartListadd(item, '-')"></view>
+												</view>
+												<text class="num">{{ ifcartNumber(item) }}</text>
+												<view class="btn" v-if="item.type != 'package'">
+													<!-- <up-icon name="plus-circle-fill"
 														:color="{shopInfo.isVip ==1 && shopInfo.isMemberPrice==1? '#CECECE' : '#E9AB7A'"
 														size="25"></up-icon> -->
-                          <up-icon
-                            name="plus-circle-fill"
-                            color="#E8AD7B"
-                            size="18"
-                          ></up-icon>
-                          <view
-                            class="btnClick"
-                            @click="cartListadd(item, '+')"
-                          ></view>
-                        </view>
-                      </view>
-                    </view>
-                  </view>
-                </view>
-              </view>
-            </view>
-          </view>
-        </scroll-view>
-      </view>
-    </up-popup>
-  </view>
+													<up-icon name="plus-circle-fill" color="#E8AD7B"
+														size="18"></up-icon>
+													<view class="btnClick" @click="cartListadd(item, '+')"></view>
+												</view>
+											</view>
+										</view>
+
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</up-popup>
+
+
+		<model v-model="modelData.show" title="单品备注" @confirm="modelDataConfirm">
+			<view class="u-p-40">
+				<up-input v-model="modelData.item.cartListinfo.remark" placeholder="备注"></up-input>
+			</view>
+		</model>
+	</view>
 </template>
 
 <script setup>
-import { ref, defineProps, computed, defineEmits, watch } from "vue";
-import { productStore } from "@/stores/user.js";
-import goodsPrice from "@/components/goods-price.vue";
-import * as orderUtils from "@/utils/order-utils.js";
+	import {
+		ref,
+		defineProps,
+		computed,
+		defineEmits,
+		watch,
+		reactive
+	} from "vue";
+	import {
+		productStore
+	} from "@/stores/user.js";
+	import goodsPrice from "@/components/goods-price.vue";
+	import * as orderUtils from "@/utils/order-utils.js";
+	import model from './modal.vue'
+	const modelData = reactive({
+		show: false,
+		item: {
+			cartListinfo:{
+				remark: ''
+			}
+		}
+	})
 
-// 定义自定义事件
-const emits = defineEmits(["customevent", "close", "clickcancelOrder"]);
+	function editRemark(item) {
+		console.log('editRemark', item)
+		modelData.item = item
+		modelData.show = true
+	}
 
-const props = defineProps({
-  nextFullAmountActivty: {
-    type: Object,
-  },
-  cartList: {
-    type: Array,
-  },
-  cartLists_count: {
-    type: Number,
-    default: 0,
-  },
-  showCart: {
-    type: Boolean,
-  },
-  orderinfo: {
-    type: Object,
-    default: {
-      detailMap: {},
-    },
-  },
-  //限时折扣
-  limitDiscount: {
-    type: Object,
-    default: {},
-  },
-});
+	function modelDataConfirm() {
+		emits('customevent', {
+			id: modelData.item.cartListinfo.id,
+			product_id: modelData.item.cartListinfo.product_id,
+			sku_id: modelData.item.cartListinfo.sku_id,
+			number: modelData.item.cartListinfo.number,
+			type: "shopping",
+			table_code: uni.cache.get('tableCode'),
+			shop_id: uni.cache.get('shopId'),
+			operate_type: "edit",
+			remark:modelData.item.cartListinfo.remark
+		})
+		modelData.show = false
+	}
+
+	// 定义自定义事件
+	const emits = defineEmits(["customevent", "close", "clickcancelOrder", 'updateRemark']);
+
+	const props = defineProps({
+		nextFullAmountActivty: {
+			type: Object,
+		},
+		cartList: {
+			type: Array,
+		},
+		cartLists_count: {
+			type: Number,
+			default: 0,
+		},
+		showCart: {
+			type: Boolean,
+		},
+		orderinfo: {
+			type: Object,
+			default: {
+				detailMap: {},
+			},
+		},
+		//限时折扣
+		limitDiscount: {
+			type: Object,
+			default: {},
+		},
+	});
 
 
-function showLimitDiscount(item){
-  if (!props.limitDiscount||!props.limitDiscount.id) {
-    return false;
-  }
-  return orderUtils.canUseLimitTimeDiscount(
-    item,
-    props.limitDiscount,
-    shopInfo.value,
-    shopUserInfo.value,
-    "id"
-  );
-}
+	function showLimitDiscount(item) {
+		if (!props.limitDiscount || !props.limitDiscount.id) {
+			return false;
+		}
+		return orderUtils.canUseLimitTimeDiscount(
+			item,
+			props.limitDiscount,
+			shopInfo.value,
+			shopUserInfo.value,
+			"id"
+		);
+	}
 
-watch(
-  () => props.cartList,
-  (newCartList) => {
-    console.log("购物车数据变化", newCartList);
-  },
-  {
-    deep: true,
-  }
-);
-const shopInfo = ref(uni.cache.get("shopInfo"));
-const shopUserInfo = ref(uni.cache.get("shopUserInfo"));
+	watch(
+		() => props.cartList,
+		(newCartList) => {
+			console.log("购物车数据变化", newCartList);
+		}, {
+			deep: true,
+		}
+	);
+	const shopInfo = ref(uni.cache.get("shopInfo"));
+	const shopUserInfo = ref(uni.cache.get("shopUserInfo"));
 
-function returnRealPrice(cart) {
-  const price = orderUtils.returnPrice({
-    goods: cart,
-    shopInfo: shopInfo,
-    limitDiscount: props.limitDiscount.id ? props.limitDiscount : null,
-    shopUserInfo: shopUserInfo,
-  });
-  if (goods.name == "纯生纯生纯生") {
-    console.log("returnRealPrice", price);
-  }
-  return price;
-}
+	function returnRealPrice(cart) {
+		const price = orderUtils.returnPrice({
+			goods: cart,
+			shopInfo: shopInfo,
+			limitDiscount: props.limitDiscount.id ? props.limitDiscount : null,
+			shopUserInfo: shopUserInfo,
+		});
+		if (goods.name == "纯生纯生纯生") {
+			console.log("returnRealPrice", price);
+		}
+		return price;
+	}
 
-// 定义 ifcartNumber 计算属性方法
-const ifcartNumber = computed(() => {
-  return (item) => {
-    // 如果 item 为空或者 cartNumber 不是字符串类型，返回 0
-    if (!item || typeof item.cartNumber !== "string") {
-      return 0;
-    }
-    let numValue = parseFloat(item.cartNumber);
-    if (isNaN(numValue)) {
-      // 如果转换结果是 NaN，说明 cartNumber 不是有效的数字字符串，返回 0
-      return 0;
-    }
-    // type string  商品类型 single-单规格商品 sku-多规格商品 package-套餐商品 weight-称重商品 coupon-团购券
-    if (item.type === "weight") {
-      // 如果类型是称重重量，将值保留两位小数
-      return parseFloat(numValue.toFixed(2));
-    } else {
-      // 如果类型是整数，将值转换为整数
-      return Math.round(numValue);
-    }
-    // 如果类型不匹配，返回原始值
-    return item.cartNumber;
-  };
-});
+	// 定义 ifcartNumber 计算属性方法
+	const ifcartNumber = computed(() => {
+		return (item) => {
+			// 如果 item 为空或者 cartNumber 不是字符串类型，返回 0
+			if (!item || typeof item.cartNumber !== "string") {
+				return 0;
+			}
+			let numValue = parseFloat(item.cartNumber);
+			if (isNaN(numValue)) {
+				// 如果转换结果是 NaN，说明 cartNumber 不是有效的数字字符串，返回 0
+				return 0;
+			}
+			// type string  商品类型 single-单规格商品 sku-多规格商品 package-套餐商品 weight-称重商品 coupon-团购券
+			if (item.type === "weight") {
+				// 如果类型是称重重量，将值保留两位小数
+				return parseFloat(numValue.toFixed(2));
+			} else {
+				// 如果类型是整数，将值转换为整数
+				return Math.round(numValue);
+			}
+			// 如果类型不匹配，返回原始值
+			return item.cartNumber;
+		};
+	});
 
-const close = () => {
-  emits("close", false);
-};
-// 购物车加减
-const cartListadd = async (item, i) => {
-  // 是否起售 如果小于或者大于都是1
-  const cartNumberFloat = parseFloat(item.cartNumber);
-  const suitNum =
-    item.suitNum >= cartNumberFloat && i == "-" ? item.cartNumber : 1;
+	const close = () => {
+		emits("close", false);
+	};
+	// 购物车加减
+	const cartListadd = async (item, i) => {
+		// 是否起售 如果小于或者大于都是1
+		const cartNumberFloat = parseFloat(item.cartNumber);
+		const suitNum =
+			item.suitNum >= cartNumberFloat && i == "-" ? item.cartNumber : 1;
 
-  emits("customevent", {
-    id: item.cartListId ? item.cartListId : "",
-    type: "shopping",
-    table_code: uni.cache.get("tableCode"),
-    shop_id: uni.cache.get("shopId"),
-    operate_type:
-      calculateValue(item.cartNumber, i, suitNum) == "del"
-        ? "del"
-        : item.cartListId && item.cartNumber > 0
-        ? "edit"
-        : "add",
-    product_id: item.id,
-    sku_id: item.skuId,
-    number: await calculateValue(item.cartNumber, i, suitNum),
-    is_print: 1,
-    suitNum: item.suitNum,
-  });
-};
+		emits("customevent", {
+			id: item.cartListId ? item.cartListId : "",
+			type: "shopping",
+			table_code: uni.cache.get("tableCode"),
+			shop_id: uni.cache.get("shopId"),
+			operate_type: calculateValue(item.cartNumber, i, suitNum) == "del" ?
+				"del" : item.cartListId && item.cartNumber > 0 ?
+				"edit" : "add",
+			product_id: item.id,
+			sku_id: item.skuId,
+			number: await calculateValue(item.cartNumber, i, suitNum),
+			is_print: 1,
+			suitNum: item.suitNum,
+		});
+	};
 
-const dataprocessing = computed(() => {
-  return (item) => {
-    let res = null;
-    try {
-      res = JSON.parse(item.pro_group_info);
-    } catch (error) {
-      //TODO handle the exception
-    }
-    return res;
-  };
-});
+	const dataprocessing = computed(() => {
+		return (item) => {
+			let res = null;
+			try {
+				res = JSON.parse(item.pro_group_info);
+			} catch (error) {
+				//TODO handle the exception
+			}
+			return res;
+		};
+	});
 
-const clickcancelOrder = (i, key) => {
-  emits("clickcancelOrder", {
-    i,
-    key,
-  });
-  emits("customevent", {
-    type: "shopping",
-    table_code: uni.cache.get("tableCode"),
-    shop_id: uni.cache.get("shopId"),
-    operate_type: "clearOrder",
-  });
-};
+	const clickcancelOrder = (i, key) => {
+		emits("clickcancelOrder", {
+			i,
+			key,
+		});
+		emits("customevent", {
+			type: "shopping",
+			table_code: uni.cache.get("tableCode"),
+			shop_id: uni.cache.get("shopId"),
+			operate_type: "clearOrder",
+		});
+	};
 
-const calculateValue = (cartNumber, i, step = 1) => {
-  if (i == "+") {
-    const result = parseFloat(cartNumber) + parseFloat(step);
-    return result.toFixed(2);
-  } else {
-    // 当减到0返回del
-    const result = parseFloat(cartNumber) - parseFloat(step);
-    return result == 0 ? "del" : result.toFixed(2);
-  }
-};
+	const calculateValue = (cartNumber, i, step = 1) => {
+		if (i == "+") {
+			const result = parseFloat(cartNumber) + parseFloat(step);
+			return result.toFixed(2);
+		} else {
+			// 当减到0返回del
+			const result = parseFloat(cartNumber) - parseFloat(step);
+			return result == 0 ? "del" : result.toFixed(2);
+		}
+	};
 
-// 菜品备注修改
-const productBlur = (item) => {
-  let params = {
-    skuId: item.skuId,
-    num: item.number, //数量
-    type: item.type,
-    isVip: item.isVip,
-    productId: item.productId, //商品id
-    note: item.note,
-    shopId: this.shopId,
-    userId: uni.cache.get("userInfo").id,
-    tableId: this.tableCode,
-  };
-  this.$emit("addCart", params);
-};
+	// 菜品备注修改
+	const productBlur = (item) => {
+		let params = {
+			skuId: item.skuId,
+			num: item.number, //数量
+			type: item.type,
+			isVip: item.isVip,
+			productId: item.productId, //商品id
+			note: item.note,
+			shopId: this.shopId,
+			userId: uni.cache.get("userInfo").id,
+			tableId: this.tableCode,
+		};
+		this.$emit("addCart", params);
+	};
 
-// 清空购物车
-const cartclear = () => {
-  emits("customevent", {
-    type: "shopping",
-    table_code: uni.cache.get("tableCode"),
-    shop_id: uni.cache.get("shopId"),
-    operate_type: "cleanup",
-  });
-};
+	// 清空购物车
+	const cartclear = () => {
+		emits("customevent", {
+			type: "shopping",
+			table_code: uni.cache.get("tableCode"),
+			shop_id: uni.cache.get("shopId"),
+			operate_type: "cleanup",
+		});
+	};
 </script>
 
 <style lang="scss">
-.clear-btn {
-  color: #333;
-  font-size: 24rpx;
-  font-weight: 500;
-}
-.cart-list-wrap {
-  .cart-header {
-    display: flex;
-    height: 72rpx;
-    background-color: #f2f2f2;
-    align-items: center;
-    justify-content: space-between;
-    padding: 20upx 28rpx;
-    border-radius: 20upx 20upx 0 0;
-
-    .num {
-      font-weight: 400;
-      font-size: 28rpx;
-      color: #333333;
-    }
-
-    .clear {
-      display: flex;
-      align-items: center;
-
-      .t {
-        font-size: 24upx;
-        color: #999;
-        margin-left: 4upx;
-      }
-    }
-  }
-
-  .scroll-view {
-    max-height: 60vh;
-    margin-bottom: 190rpx;
-
-    .list-wrap {
-      padding: 0 28rpx;
-      &.pb-20{
-        padding-bottom: 20px;
-      }
-      .ShoppingCart {
-        font-size: 30rpx;
-        text-align: left;
-        padding: 20rpx 0;
-        font-weight: 700;
-        border-bottom: 1rpx solid #cecece;
-        color: #000;
-      }
-
-      .shop-item:last-child {
-        border-bottom: 1rpx solid #cecece;
-        padding-bottom: 20rpx;
-      }
-
-      .shop-item {
-        margin-top: 15rpx;
-        display: flex;
-        flex-direction: column;
-
-        .shop-item-content {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          .cover {
-            position: relative;
-            .limit-discount {
-              position: absolute;
-              background: #cc5617;
-              font-size: 24rpx;
-              color: #fff;
-              border-radius: 20rpx 0 20rpx 0;
-              padding: 2rpx 10rpx;
-              z-index: 1;
-            }
-          }
-        }
-
-        .shop-item-remark {
-          display: flex;
-          align-items: center;
-          padding-right: 180rpx;
-          margin-top: 10rpx;
-
-          .label {
-            font-size: 28rpx;
-            color: #666;
-            margin-right: 20rpx;
-          }
-        }
-
-        .langcover {
-          position: relative;
-        }
-
-        .langcover::after {
-          content: "加载中..";
-          position: absolute;
-          top: 0;
-          left: 0;
-          height: 100%;
-          width: 100%;
-          background-color: #e8e8e8;
-          color: #6b6b6b;
-          border-radius: 10rpx;
-          text-align: center;
-          line-height: 180rpx;
-          z-index: 1;
-        }
-
-        .info {
-          flex: 1;
-          padding-left: 20rpx;
-
-          .name {
-            font-size: 28upx;
-            font-weight: bold;
-            color: #333;
-            margin-bottom: 5rpx;
-          }
-
-          .select-sku-wrap {
-            font-weight: 400;
-            font-size: 24rpx;
-            color: #999999;
-          }
-
-          .price-wrap {
-            margin-top: 16rpx;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-
-            .price {
-              display: flex;
-              align-items: baseline;
-
-              .i,
-              .num {
-                font-weight: bold;
-                font-size: 32rpx;
-                color: #333333;
-              }
-
-              .i {
-              }
-
-              .price {
-                font-family: Source Han Sans CN, Source Han Sans CN;
-                font-weight: bold;
-                font-size: 32rpx;
-                color: #333333;
-              }
-
-              .originalprice {
-                color: #999;
-                margin-left: 10rpx;
-                font-weight: 400;
-                font-size: 24rpx;
-                text-decoration: line-through;
-              }
-
-              .unit {
-                font-family: Source Han Sans CN, Source Han Sans CN;
-                font-weight: 400;
-                font-size: 36rpx;
-                color: #333333;
-              }
-
-              .lineThrough {
-                font-weight: normal;
-                text-decoration: line-through;
-                color: #999 !important;
-                font-size: 24rpx !important;
-              }
-            }
-
-            .sku-wrap {
-              padding: 6upx 16upx;
-              background-color: #ffd100;
-              border-radius: 12upx;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              position: relative;
-
-              .t {
-                font-size: 24upx;
-                font-weight: bold;
-              }
-
-              .dot {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 20upx;
-                position: absolute;
-                padding: 2upx 12upx;
-                border-radius: 8upx;
-                background-color: #eb5232;
-                color: #fff;
-                position: absolute;
-                top: -14upx;
-                right: -8upx;
-              }
-            }
-
-            .operation-wrap {
-              display: flex;
-              align-items: center;
-
-              .num {
-                font-size: 32upx;
-                padding: 0 16upx;
-              }
-
-              .btn {
-                position: relative;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                position: relative;
-
-                .btnClick {
-                  width: 100rpx;
-                  height: 100rpx;
-                  position: absolute;
-                  // bottom: 0;
-                }
-
-                .btnClick.l {
-                  right: 0;
-                }
-
-                .btnClick.r {
-                  left: 0;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .card {
-    position: relative;
-
-    .cardcalorders {
-      position: relative;
-      padding: 20rpx 0;
-      font-size: 35rpx;
-      font-weight: bold;
-      border-bottom: 1rpx solid #cecece;
-      color: #000;
-
-      .absolute {
-        position: absolute;
-        right: 0;
-        top: 2rpx;
-        font-size: 24rpx;
-      }
-    }
-
-    .card_item {
-      display: flex;
-      flex-direction: column;
-      position: relative;
-
-      .head {
-        display: flex;
-        justify-content: space-between;
-
-        .head_left {
-          width: 100%;
-          display: flex;
-          justify-content: space-between;
-          padding: 20rpx 0;
-          border-bottom: 1rpx solid #cecece;
-
-          .placeNum {
-            font-weight: 700;
-            font-size: 27rpx;
-            color: #3e3d3d;
-          }
-
-          .placeTime {
-            font-weight: 400;
-            font-size: 32rpx;
-            color: #999;
-
-            .t {
-              margin-left: 4rpx;
-              font-size: 24rpx;
-            }
-          }
-        }
-      }
-
-      .shop-info {
-        border-bottom: 2rpx dashed #e5e5e5;
-
-        .item {
-          margin: 30rpx 0;
-          display: flex;
-
-          .info {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            padding-left: 16upx;
-
-            .productName {
-              font-weight: bold;
-              font-size: 28rpx;
-              color: #333333;
-              margin-top: 20rpx;
-            }
-
-            .productSkuName {
-              font-weight: 400;
-              font-size: 24rpx;
-              color: #999999;
-              display: -webkit-box;
-              -webkit-box-orient: vertical;
-              -webkit-line-clamp: 3;
-              overflow: hidden;
-              text-overflow: ellipsis;
-            }
-
-            .n {
-              font-size: 24upx;
-              color: #999;
-            }
-          }
-
-          .price {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-end;
-
-            .priceAmount {
-              font-weight: 500;
-              font-size: 28rpx;
-              color: #333333;
-              margin-top: 26rpx;
-            }
-
-            .num {
-              font-weight: 400;
-              font-size: 24rpx;
-              color: #999999;
-              margin-top: 22rpx;
-            }
-          }
-        }
-      }
-
-      .status {
-        align-self: flex-end;
-        width: 92rpx;
-        height: 40rpx;
-        line-height: 40rpx;
-        text-align: center;
-        background: #999999;
-        border-radius: 10rpx 10rpx 10rpx 10rpx;
-        font-weight: 400;
-        font-size: 22rpx;
-        color: #ffffff;
-        margin-top: 32rpx;
-      }
-
-      .totalAmount {
-        width: 100%;
-        display: flex;
-        justify-content: flex-end;
-        align-items: flex-end;
-        padding: 32rpx 0;
-        border-bottom: 2rpx dashed #e5e5e5;
-
-        .label {
-          font-weight: bold;
-          font-size: 28rpx;
-          color: #333333;
-        }
-
-        .price {
-          font-weight: bold;
-          font-size: 36rpx;
-          color: #333333;
-        }
-      }
-
-      .semicircle_icon {
-        width: 100%;
-        position: absolute;
-        top: -22.5rpx;
-        left: 0;
-        display: flex;
-        justify-content: space-between;
-
-        .semicircle_left_icon {
-          width: 45rpx;
-          height: 45rpx;
-          margin-left: -22.5rpx;
-          background-color: #f9f9f9;
-          border-radius: 50%;
-          // box-shadow: inset -20rpx 0rpx 22rpx -20rpx rgba(87, 86, 86, 0.35);
-        }
-
-        .semicircle_right_icon {
-          width: 45rpx;
-          height: 45rpx;
-          margin-right: -22.5rpx;
-          background-color: #f9f9f9;
-          border-radius: 50%;
-          // box-shadow: inset 13rpx 0rpx 16rpx -9rpx rgba(87, 86, 86, 0.35);
-        }
-      }
-    }
-
-    .cell-item {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 32rpx 34rpx 0 34rpx;
-
-      .label {
-        font-weight: bold;
-        font-size: 32rpx;
-        color: #333333;
-        padding-bottom: 32rpx;
-      }
-
-      .val {
-        display: flex;
-        align-items: flex-end;
-        padding-bottom: 32rpx;
-        border-bottom: 2rpx dashed #e5e5e5;
-
-        view:nth-child(1) {
-          font-weight: 400;
-          font-size: 24rpx;
-          color: #999999;
-          margin-right: 42rpx;
-        }
-
-        view:nth-child(2) {
-          display: flex;
-          align-items: flex-end;
-          font-weight: bold;
-          font-size: 36rpx;
-          color: #333333;
-        }
-      }
-
-      .val.column {
-        display: flex;
-        flex-direction: column;
-
-        .productCoupon {
-          display: flex;
-          align-items: flex-end;
-          margin: 0 0 10rpx 0;
-
-          .name {
-            font-weight: 400;
-            font-size: 26rpx;
-            color: #999;
-            margin: 0;
-          }
-
-          .num {
-            font-weight: 400;
-            font-size: 26rpx;
-            color: #999;
-            margin: 0 30rpx;
-            line-height: 20rpx;
-          }
-
-          .amount {
-            font-weight: bold;
-            font-size: 26rpx;
-            color: #333;
-          }
-        }
-      }
-    }
-
-    .favorable {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0 30rpx;
-      box-sizing: border-box;
-      padding-bottom: 26rpx;
-      padding-top: 26rpx;
-      border-bottom: 2rpx solid #e5e5e5;
-
-      .favorable_left {
-        display: flex;
-        align-items: center;
-
-        .icon {
-          width: 40rpx;
-          height: 40rpx;
-          margin-right: 16rpx;
-        }
-
-        .name {
-          font-size: 28rpx;
-          font-weight: 400rpx;
-          color: #333;
-        }
-      }
-
-      .favorable_right {
-        display: flex;
-        align-items: center;
-
-        .favorable_right_text {
-          font-size: 24rpx;
-          color: #999;
-          font-weight: 400rpx;
-        }
-      }
-
-      .favorable_right {
-        .column {
-          display: flex;
-          flex-direction: column;
-          align-items: flex-end;
-
-          .favorable_right_text {
-            margin-bottom: 10rpx;
-
-            text:nth-child(1) {
-              font-size: 26rpx;
-              color: #999;
-            }
-
-            text:nth-child(2) {
-              font-size: 26rpx;
-              color: #999;
-              margin: 0 30rpx;
-            }
-
-            text:nth-child(3) {
-              font-size: 26rpx;
-              color: #333;
-            }
-          }
-        }
-      }
-
-      .favorable_right.column {
-        align-items: flex-start;
-      }
-    }
-
-    .favorable.column {
-      align-items: flex-start;
-    }
-
-    .cell-item.column {
-      align-items: flex-start;
-    }
-
-    .total-wrap {
-      width: 100%;
-      display: flex;
-      justify-content: flex-end;
-      align-items: flex-end;
-      padding: 0 34rpx;
-      font-weight: bold;
-      font-size: 28rpx;
-      color: #333333;
-      margin-top: 64rpx;
-
-      .price {
-        font-weight: bold;
-        font-size: 36rpx;
-      }
-    }
-
-    .order_footer {
-      display: flex;
-      flex-direction: column;
-      padding: 34rpx;
-      position: relative;
-    }
-  }
-}
+	.clear-btn {
+		color: #333;
+		font-size: 24rpx;
+		font-weight: 500;
+	}
+
+	.cart-list-wrap {
+		.cart-header {
+			display: flex;
+			height: 72rpx;
+			background-color: #f2f2f2;
+			align-items: center;
+			justify-content: space-between;
+			padding: 20upx 28rpx;
+			border-radius: 20upx 20upx 0 0;
+
+			.num {
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #333333;
+			}
+
+			.clear {
+				display: flex;
+				align-items: center;
+
+				.t {
+					font-size: 24upx;
+					color: #999;
+					margin-left: 4upx;
+				}
+			}
+		}
+
+		.scroll-view {
+			max-height: 60vh;
+			margin-bottom: 190rpx;
+
+			.list-wrap {
+				padding: 0 28rpx;
+
+				&.pb-20 {
+					padding-bottom: 20px;
+				}
+
+				.ShoppingCart {
+					font-size: 30rpx;
+					text-align: left;
+					padding: 20rpx 0;
+					font-weight: 700;
+					border-bottom: 1rpx solid #cecece;
+					color: #000;
+				}
+
+				.shop-item:last-child {
+					border-bottom: 1rpx solid #cecece;
+					padding-bottom: 20rpx;
+				}
+
+				.shop-item {
+					margin-top: 15rpx;
+					display: flex;
+					flex-direction: column;
+
+					.shop-item-content {
+						display: flex;
+						justify-content: center;
+						align-items: center;
+
+						.cover {
+							position: relative;
+
+							.limit-discount {
+								position: absolute;
+								background: #cc5617;
+								font-size: 24rpx;
+								color: #fff;
+								border-radius: 20rpx 0 20rpx 0;
+								padding: 2rpx 10rpx;
+								z-index: 1;
+							}
+						}
+					}
+
+					.shop-item-remark {
+						display: flex;
+						align-items: center;
+						padding-right: 180rpx;
+						margin-top: 10rpx;
+
+						.label {
+							font-size: 28rpx;
+							color: #666;
+							margin-right: 20rpx;
+						}
+					}
+
+					.langcover {
+						position: relative;
+					}
+
+					.langcover::after {
+						content: "加载中..";
+						position: absolute;
+						top: 0;
+						left: 0;
+						height: 100%;
+						width: 100%;
+						background-color: #e8e8e8;
+						color: #6b6b6b;
+						border-radius: 10rpx;
+						text-align: center;
+						line-height: 180rpx;
+						z-index: 1;
+					}
+
+					.info {
+						flex: 1;
+						padding-left: 20rpx;
+
+						.name {
+							font-size: 28upx;
+							font-weight: bold;
+							color: #333;
+							margin-bottom: 5rpx;
+						}
+
+						.select-sku-wrap {
+							font-weight: 400;
+							font-size: 24rpx;
+							color: #999999;
+						}
+
+						.price-wrap {
+							margin-top: 8rpx;
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+
+							.price {
+								display: flex;
+								align-items: baseline;
+
+								.i,
+								.num {
+									font-weight: bold;
+									font-size: 32rpx;
+									color: #333333;
+								}
+
+								.i {}
+
+								.price {
+									font-family: Source Han Sans CN, Source Han Sans CN;
+									font-weight: bold;
+									font-size: 32rpx;
+									color: #333333;
+								}
+
+								.originalprice {
+									color: #999;
+									margin-left: 10rpx;
+									font-weight: 400;
+									font-size: 24rpx;
+									text-decoration: line-through;
+								}
+
+								.unit {
+									font-family: Source Han Sans CN, Source Han Sans CN;
+									font-weight: 400;
+									font-size: 36rpx;
+									color: #333333;
+								}
+
+								.lineThrough {
+									font-weight: normal;
+									text-decoration: line-through;
+									color: #999 !important;
+									font-size: 24rpx !important;
+								}
+							}
+
+							.sku-wrap {
+								padding: 6upx 16upx;
+								background-color: #ffd100;
+								border-radius: 12upx;
+								display: flex;
+								align-items: center;
+								justify-content: center;
+								position: relative;
+
+								.t {
+									font-size: 24upx;
+									font-weight: bold;
+								}
+
+								.dot {
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									font-size: 20upx;
+									position: absolute;
+									padding: 2upx 12upx;
+									border-radius: 8upx;
+									background-color: #eb5232;
+									color: #fff;
+									position: absolute;
+									top: -14upx;
+									right: -8upx;
+								}
+							}
+
+							.operation-wrap {
+								display: flex;
+								align-items: center;
+
+								.num {
+									font-size: 32upx;
+									padding: 0 16upx;
+								}
+
+								.btn {
+									position: relative;
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									position: relative;
+
+									.btnClick {
+										width: 100rpx;
+										height: 100rpx;
+										position: absolute;
+										// bottom: 0;
+									}
+
+									.btnClick.l {
+										right: 0;
+									}
+
+									.btnClick.r {
+										left: 0;
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+
+		.card {
+			position: relative;
+
+			.cardcalorders {
+				position: relative;
+				padding: 20rpx 0;
+				font-size: 35rpx;
+				font-weight: bold;
+				border-bottom: 1rpx solid #cecece;
+				color: #000;
+
+				.absolute {
+					position: absolute;
+					right: 0;
+					top: 2rpx;
+					font-size: 24rpx;
+				}
+			}
+
+			.card_item {
+				display: flex;
+				flex-direction: column;
+				position: relative;
+
+				.head {
+					display: flex;
+					justify-content: space-between;
+
+					.head_left {
+						width: 100%;
+						display: flex;
+						justify-content: space-between;
+						padding: 20rpx 0;
+						border-bottom: 1rpx solid #cecece;
+
+						.placeNum {
+							font-weight: 700;
+							font-size: 27rpx;
+							color: #3e3d3d;
+						}
+
+						.placeTime {
+							font-weight: 400;
+							font-size: 32rpx;
+							color: #999;
+
+							.t {
+								margin-left: 4rpx;
+								font-size: 24rpx;
+							}
+						}
+					}
+				}
+
+				.shop-info {
+					border-bottom: 2rpx dashed #e5e5e5;
+
+					.item {
+						margin: 30rpx 0;
+						display: flex;
+
+						.info {
+							flex: 1;
+							display: flex;
+							flex-direction: column;
+							padding-left: 16upx;
+
+							.productName {
+								font-weight: bold;
+								font-size: 28rpx;
+								color: #333333;
+								margin-top: 20rpx;
+							}
+
+							.productSkuName {
+								font-weight: 400;
+								font-size: 24rpx;
+								color: #999999;
+								display: -webkit-box;
+								-webkit-box-orient: vertical;
+								-webkit-line-clamp: 3;
+								overflow: hidden;
+								text-overflow: ellipsis;
+							}
+
+							.n {
+								font-size: 24upx;
+								color: #999;
+							}
+						}
+
+						.price {
+							display: flex;
+							flex-direction: column;
+							align-items: flex-end;
+
+							.priceAmount {
+								font-weight: 500;
+								font-size: 28rpx;
+								color: #333333;
+								margin-top: 26rpx;
+							}
+
+							.num {
+								font-weight: 400;
+								font-size: 24rpx;
+								color: #999999;
+								margin-top: 22rpx;
+							}
+						}
+					}
+				}
+
+				.status {
+					align-self: flex-end;
+					width: 92rpx;
+					height: 40rpx;
+					line-height: 40rpx;
+					text-align: center;
+					background: #999999;
+					border-radius: 10rpx 10rpx 10rpx 10rpx;
+					font-weight: 400;
+					font-size: 22rpx;
+					color: #ffffff;
+					margin-top: 32rpx;
+				}
+
+				.totalAmount {
+					width: 100%;
+					display: flex;
+					justify-content: flex-end;
+					align-items: flex-end;
+					padding: 32rpx 0;
+					border-bottom: 2rpx dashed #e5e5e5;
+
+					.label {
+						font-weight: bold;
+						font-size: 28rpx;
+						color: #333333;
+					}
+
+					.price {
+						font-weight: bold;
+						font-size: 36rpx;
+						color: #333333;
+					}
+				}
+
+				.semicircle_icon {
+					width: 100%;
+					position: absolute;
+					top: -22.5rpx;
+					left: 0;
+					display: flex;
+					justify-content: space-between;
+
+					.semicircle_left_icon {
+						width: 45rpx;
+						height: 45rpx;
+						margin-left: -22.5rpx;
+						background-color: #f9f9f9;
+						border-radius: 50%;
+						// box-shadow: inset -20rpx 0rpx 22rpx -20rpx rgba(87, 86, 86, 0.35);
+					}
+
+					.semicircle_right_icon {
+						width: 45rpx;
+						height: 45rpx;
+						margin-right: -22.5rpx;
+						background-color: #f9f9f9;
+						border-radius: 50%;
+						// box-shadow: inset 13rpx 0rpx 16rpx -9rpx rgba(87, 86, 86, 0.35);
+					}
+				}
+			}
+
+			.cell-item {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 32rpx 34rpx 0 34rpx;
+
+				.label {
+					font-weight: bold;
+					font-size: 32rpx;
+					color: #333333;
+					padding-bottom: 32rpx;
+				}
+
+				.val {
+					display: flex;
+					align-items: flex-end;
+					padding-bottom: 32rpx;
+					border-bottom: 2rpx dashed #e5e5e5;
+
+					view:nth-child(1) {
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #999999;
+						margin-right: 42rpx;
+					}
+
+					view:nth-child(2) {
+						display: flex;
+						align-items: flex-end;
+						font-weight: bold;
+						font-size: 36rpx;
+						color: #333333;
+					}
+				}
+
+				.val.column {
+					display: flex;
+					flex-direction: column;
+
+					.productCoupon {
+						display: flex;
+						align-items: flex-end;
+						margin: 0 0 10rpx 0;
+
+						.name {
+							font-weight: 400;
+							font-size: 26rpx;
+							color: #999;
+							margin: 0;
+						}
+
+						.num {
+							font-weight: 400;
+							font-size: 26rpx;
+							color: #999;
+							margin: 0 30rpx;
+							line-height: 20rpx;
+						}
+
+						.amount {
+							font-weight: bold;
+							font-size: 26rpx;
+							color: #333;
+						}
+					}
+				}
+			}
+
+			.favorable {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 0 30rpx;
+				box-sizing: border-box;
+				padding-bottom: 26rpx;
+				padding-top: 26rpx;
+				border-bottom: 2rpx solid #e5e5e5;
+
+				.favorable_left {
+					display: flex;
+					align-items: center;
+
+					.icon {
+						width: 40rpx;
+						height: 40rpx;
+						margin-right: 16rpx;
+					}
+
+					.name {
+						font-size: 28rpx;
+						font-weight: 400rpx;
+						color: #333;
+					}
+				}
+
+				.favorable_right {
+					display: flex;
+					align-items: center;
+
+					.favorable_right_text {
+						font-size: 24rpx;
+						color: #999;
+						font-weight: 400rpx;
+					}
+				}
+
+				.favorable_right {
+					.column {
+						display: flex;
+						flex-direction: column;
+						align-items: flex-end;
+
+						.favorable_right_text {
+							margin-bottom: 10rpx;
+
+							text:nth-child(1) {
+								font-size: 26rpx;
+								color: #999;
+							}
+
+							text:nth-child(2) {
+								font-size: 26rpx;
+								color: #999;
+								margin: 0 30rpx;
+							}
+
+							text:nth-child(3) {
+								font-size: 26rpx;
+								color: #333;
+							}
+						}
+					}
+				}
+
+				.favorable_right.column {
+					align-items: flex-start;
+				}
+			}
+
+			.favorable.column {
+				align-items: flex-start;
+			}
+
+			.cell-item.column {
+				align-items: flex-start;
+			}
+
+			.total-wrap {
+				width: 100%;
+				display: flex;
+				justify-content: flex-end;
+				align-items: flex-end;
+				padding: 0 34rpx;
+				font-weight: bold;
+				font-size: 28rpx;
+				color: #333333;
+				margin-top: 64rpx;
+
+				.price {
+					font-weight: bold;
+					font-size: 36rpx;
+				}
+			}
+
+			.order_footer {
+				display: flex;
+				flex-direction: column;
+				padding: 34rpx;
+				position: relative;
+			}
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/pages/product/index.vue b/pages/product/index.vue
index 50796cb..86b51b7 100644
--- a/pages/product/index.vue
+++ b/pages/product/index.vue
@@ -318,7 +318,7 @@
 		<shopindex ref="showShopInfoRef"></shopindex>
 		<!-- 购物车 -->
 		<shoppingCartes :cartLists_count="cartLists_count" :cartList="matchedProducts" :showCart="showCart"
-			:limitDiscount="limitTimeDiscountRes" @customevent="websocketsendMessage" @close="showCart = !showCart"
+			:limitDiscount="limitTimeDiscountRes" @customevent="websocketsendMessage" @close="showCart = !showCart"  
 			:orderinfo="orderinfo" @clickcancelOrder="clickcancelOrder" v-if="cartLists_count > 0"
 			:nextFullAmountActivty="nextFullAmountActivty"></shoppingCartes>