增加备注

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>

pages/product/components/shoppingCartes.vue

@@ -1,13 +1,7 @@
 <template>
 	<view>
-    <up-popup
+		<up-popup :show="showCart" :round="20" :safeAreaInsetBottom="false" :zIndex="98" :overlayStyle="{ zIndex: 98 }"
-      :show="showCart"
+			@close="close">
-      :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>
@@ -26,23 +20,14 @@
 									<text class="clear-btn">清空购物车</text>
 								</view>
 							</view>
-              <view
+							<view class="shop-item" v-for="(item, index) in cartList" :key="item.id">
-                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
+										<up-image :src="item.coverImg" width="124rpx" height="124rpx" mode="aspectFill"
-                      :src="item.coverImg"
+											radius="10"></up-image>
-                      width="124rpx"
-                      height="124rpx"
-                      mode="aspectFill"
-                      radius="10"
-                    ></up-image>
 									</view>
 									<view class="info">
 										<view class="name">
@@ -58,34 +43,27 @@
 											</text>
 										</view>
 										<view class="select-sku-wrap" v-if="item.type == 'package'">
-                      <view
+											<view v-for="(a, b) in dataprocessing(item.cartListinfo)" :key="b">
-                        v-for="(a, b) in dataprocessing(item.cartListinfo)"
-                        :key="b"
-                      >
 												<!-- <view>{{a.title}}</view> -->
-                        <text
+												<text v-for="i in a.goods" :key="i.proId" style="margin-left: 4rpx">
-                          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
+												<goodsPrice :limitDiscount="limitDiscount" :cart="item"
-                          :limitDiscount="limitDiscount"
+													:shopUserInfo="shopUserInfo" :shopInfo="shopInfo"></goodsPrice>
-                          :cart="item"
-                          :shopUserInfo="shopUserInfo"
-                          :shopInfo="shopInfo"
-                        ></goodsPrice>
 
-                        <text
+												<text class="originalprice"
-                          class="originalprice" v-if="showLimitDiscount(item)"
+													v-if="showLimitDiscount(item)">{{ item.salePrice }}</text>
-                          >{{ item.salePrice }}</text
-                        >
 
 												<!-- <text class="originalprice"
 													v-if="item.originPrice">¥{{item.originPrice}}</text>
@@ -94,33 +72,21 @@
 
 											<view class="operation-wrap">
 												<view class="btn">
-                          <up-icon
+													<up-icon color="#E8AD7B" name="minus-circle" size="18"></up-icon>
-                            color="#E8AD7B"
+													<view class="btnClick" @click="cartListadd(item, '-')"></view>
-                            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
+													<up-icon name="plus-circle-fill" color="#E8AD7B"
-                            name="plus-circle-fill"
+														size="18"></up-icon>
-                            color="#E8AD7B"
+													<view class="btnClick" @click="cartListadd(item, '+')"></view>
-                            size="18"
-                          ></up-icon>
-                          <view
-                            class="btnClick"
-                            @click="cartListadd(item, '+')"
-                          ></view>
 												</view>
 											</view>
 										</view>
+
 									</view>
 								</view>
 							</view>
@@ -129,19 +95,65 @@
 				</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 {
-import { productStore } from "@/stores/user.js";
+		ref,
-import goodsPrice from "@/components/goods-price.vue";
+		defineProps,
-import * as orderUtils from "@/utils/order-utils.js";
+		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: ''
+			}
+		}
+	})
 
-// 定义自定义事件
+	function editRemark(item) {
-const emits = defineEmits(["customevent", "close", "clickcancelOrder"]);
+		console.log('editRemark', item)
+		modelData.item = item
+		modelData.show = true
+	}
 
-const props = defineProps({
+	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,
 		},
@@ -166,11 +178,11 @@ const props = defineProps({
 			type: Object,
 			default: {},
 		},
-});
+	});
 
 
-function showLimitDiscount(item){
+	function showLimitDiscount(item) {
-  if (!props.limitDiscount||!props.limitDiscount.id) {
+		if (!props.limitDiscount || !props.limitDiscount.id) {
 			return false;
 		}
 		return orderUtils.canUseLimitTimeDiscount(
@@ -180,21 +192,20 @@ function showLimitDiscount(item){
 			shopUserInfo.value,
 			"id"
 		);
-}
+	}
 
-watch(
+	watch(
 		() => props.cartList,
 		(newCartList) => {
 			console.log("购物车数据变化", newCartList);
-  },
+		}, {
-  {
 			deep: true,
 		}
-);
+	);
-const shopInfo = ref(uni.cache.get("shopInfo"));
+	const shopInfo = ref(uni.cache.get("shopInfo"));
-const shopUserInfo = ref(uni.cache.get("shopUserInfo"));
+	const shopUserInfo = ref(uni.cache.get("shopUserInfo"));
 
-function returnRealPrice(cart) {
+	function returnRealPrice(cart) {
 		const price = orderUtils.returnPrice({
 			goods: cart,
 			shopInfo: shopInfo,
@@ -205,10 +216,10 @@ function returnRealPrice(cart) {
 			console.log("returnRealPrice", price);
 		}
 		return price;
-}
+	}
 
-// 定义 ifcartNumber 计算属性方法
+	// 定义 ifcartNumber 计算属性方法
-const ifcartNumber = computed(() => {
+	const ifcartNumber = computed(() => {
 		return (item) => {
 			// 如果 item 为空或者 cartNumber 不是字符串类型，返回 0
 			if (!item || typeof item.cartNumber !== "string") {
@@ -230,13 +241,13 @@ const ifcartNumber = computed(() => {
 			// 如果类型不匹配，返回原始值
 			return item.cartNumber;
 		};
-});
+	});
 
-const close = () => {
+	const close = () => {
 		emits("close", false);
-};
+	};
-// 购物车加减
+	// 购物车加减
-const cartListadd = async (item, i) => {
+	const cartListadd = async (item, i) => {
 		// 是否起售 如果小于或者大于都是1
 		const cartNumberFloat = parseFloat(item.cartNumber);
 		const suitNum =
@@ -247,21 +258,18 @@ const cartListadd = async (item, i) => {
 			type: "shopping",
 			table_code: uni.cache.get("tableCode"),
 			shop_id: uni.cache.get("shopId"),
-    operate_type:
+			operate_type: calculateValue(item.cartNumber, i, suitNum) == "del" ?
-      calculateValue(item.cartNumber, i, suitNum) == "del"
+				"del" : item.cartListId && item.cartNumber > 0 ?
-        ? "del"
+				"edit" : "add",
-        : 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(() => {
+	const dataprocessing = computed(() => {
 		return (item) => {
 			let res = null;
 			try {
@@ -271,9 +279,9 @@ const dataprocessing = computed(() => {
 			}
 			return res;
 		};
-});
+	});
 
-const clickcancelOrder = (i, key) => {
+	const clickcancelOrder = (i, key) => {
 		emits("clickcancelOrder", {
 			i,
 			key,
@@ -284,9 +292,9 @@ const clickcancelOrder = (i, key) => {
 			shop_id: uni.cache.get("shopId"),
 			operate_type: "clearOrder",
 		});
-};
+	};
 
-const calculateValue = (cartNumber, i, step = 1) => {
+	const calculateValue = (cartNumber, i, step = 1) => {
 		if (i == "+") {
 			const result = parseFloat(cartNumber) + parseFloat(step);
 			return result.toFixed(2);
@@ -295,10 +303,10 @@ const calculateValue = (cartNumber, i, step = 1) => {
 			const result = parseFloat(cartNumber) - parseFloat(step);
 			return result == 0 ? "del" : result.toFixed(2);
 		}
-};
+	};
 
-// 菜品备注修改
+	// 菜品备注修改
-const productBlur = (item) => {
+	const productBlur = (item) => {
 		let params = {
 			skuId: item.skuId,
 			num: item.number, //数量
@@ -311,26 +319,27 @@ const productBlur = (item) => {
 			tableId: this.tableCode,
 		};
 		this.$emit("addCart", params);
-};
+	};
 
-// 清空购物车
+	// 清空购物车
-const cartclear = () => {
+	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 {
+	.clear-btn {
 		color: #333;
 		font-size: 24rpx;
 		font-weight: 500;
-}
+	}
-.cart-list-wrap {
+
+	.cart-list-wrap {
 		.cart-header {
 			display: flex;
 			height: 72rpx;
@@ -364,9 +373,11 @@ const cartclear = () => {
 
 			.list-wrap {
 				padding: 0 28rpx;
-      &.pb-20{
+
+				&.pb-20 {
 					padding-bottom: 20px;
 				}
+
 				.ShoppingCart {
 					font-size: 30rpx;
 					text-align: left;
@@ -390,8 +401,10 @@ const cartclear = () => {
 						display: flex;
 						justify-content: center;
 						align-items: center;
+
 						.cover {
 							position: relative;
+
 							.limit-discount {
 								position: absolute;
 								background: #cc5617;
@@ -454,7 +467,7 @@ const cartclear = () => {
 						}
 
 						.price-wrap {
-            margin-top: 16rpx;
+							margin-top: 8rpx;
 							display: flex;
 							align-items: center;
 							justify-content: space-between;
@@ -470,8 +483,7 @@ const cartclear = () => {
 									color: #333333;
 								}
 
-              .i {
+								.i {}
-              }
 
 								.price {
 									font-family: Source Han Sans CN, Source Han Sans CN;
@@ -918,5 +930,5 @@ const cartclear = () => {
 				position: relative;
 			}
 		}
-}
+	}
 </style>