From ecff4204e4f27e87c79d78b2f3cc3b6db0bbf981 Mon Sep 17 00:00:00 2001
From: YeMingfei666 <1619116647@qq.com>
Date: Thu, 18 Dec 2025 10:38:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=B4=AD=E7=89=A9=E8=BD=A6?=
 =?UTF-8?q?=E5=A4=87=E6=B3=A8=E5=8A=9F=E8=83=BD,=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=94=AF=E4=BB=98=E6=96=B9=E5=BC=8F=E9=80=89=E6=8B=A9=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E5=9B=9E=E6=98=BE=E9=97=AE=E9=A2=98,=E5=8F=96?=
 =?UTF-8?q?=E6=B6=88=E9=80=89=E6=8B=A9=E4=BC=98=E6=83=A0=E5=88=B8=E5=9B=9E?=
 =?UTF-8?q?=E6=98=BE=E9=80=89=E6=8B=A9=E6=95=B0=E9=87=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/paymentMethod.vue                | 355 ++++++++++----------
 pages/order/components/order-item.vue       |   2 +-
 pages/product/components/shoppingCartes.vue |   2 +-
 3 files changed, 175 insertions(+), 184 deletions(-)

diff --git a/components/paymentMethod.vue b/components/paymentMethod.vue
index 7b3aad7..6196bc2 100644
--- a/components/paymentMethod.vue
+++ b/components/paymentMethod.vue
@@ -1,49 +1,35 @@
 <template>
-  <!-- 支付方式 -->
-  <view class="paymentMethod">
-    <view class="paymentMethod_content">
-      <view class="paymentMethod_title">支付方式</view>
-      <up-radio-group
-        v-model="radiovalue.type"
-        iconPlacement="right"
-        @change="groupChanges"
-        :size="28"
-        placement="column"
-      >
-        <block v-for="(item, index) in paymentMethodList" :key="index">
-          <view
-            class="method_list"
-            @click="groupChanges(item.type)"
-            :class="{ disabled: returnDisabled(item) }"
-          >
-            <view class="method_list_top">
-              <view class="method_list_top_left">
-                <image class="icon" :src="item.url" mode="aspectFill" />
-                <view class="method_list_top_cen">
-                  <view class="name"> {{ item.name }} </view>
-                  <view class="method_list_bom" v-if="item.name == '余额支付'">
-                    <text class="balance">
-                      当前余额￥{{ orderVIP ? orderVIP.amount || 0 : 0 }}</text
-                    >
-                    <text class="topUpNow" @click="goRecharge">去充值</text>
-                  </view>
-                </view>
-              </view>
-              <up-radio
-                :disabled="returnDisabled(item)"
-                activeColor="#E8AD7B"
-                icon-size="18"
-                size="18"
-                :name="item.type"
-              >
-              </up-radio>
-            </view>
-          </view>
-        </block>
-      </up-radio-group>
-    </view>
-    <slot name="bottom"></slot>
-  </view>
+	<!-- 支付方式 -->
+	<view class="paymentMethod">
+		<view class="paymentMethod_content">
+			<view class="paymentMethod_title">支付方式</view>
+			<up-radio-group v-model="radiovalue.type" iconPlacement="right" @change="groupChanges" :size="28"
+				placement="column">
+				<block v-for="(item, index) in paymentMethodList" :key="index">
+					<view class="method_list" @click="groupChanges(item.type)"
+						:class="{ disabled: returnDisabled(item) }">
+						<view class="method_list_top">
+							<view class="method_list_top_left">
+								<image class="icon" :src="item.url" mode="aspectFill" />
+								<view class="method_list_top_cen">
+									<view class="name"> {{ item.name }} </view>
+									<view class="method_list_bom" v-if="item.name == '余额支付'">
+										<text class="balance">
+											当前余额￥{{ orderVIP ? orderVIP.amount || 0 : 0 }}</text>
+										<text class="topUpNow" @click="goRecharge">去充值</text>
+									</view>
+								</view>
+							</view>
+							<up-radio :disabled="returnDisabled(item)" activeColor="#E8AD7B" icon-size="18" size="18"
+								:name="item.type">
+							</up-radio>
+						</view>
+					</view>
+				</block>
+			</up-radio-group>
+		</view>
+		<slot name="bottom"></slot>
+	</view>
 </template>
 
 <script setup>
@@ -56,6 +42,7 @@ import {
   watch,
   watchEffect,
   defineExpose,
+  onMounted // 新增：用于初始化默认值
 } from "vue";
 
 const props = defineProps({
@@ -77,18 +64,17 @@ const props = defineProps({
   },
   disablePayType: {
     type: Array,
-    default: () => {
-      return [];
-    },
+    default: () => [],
   },
 });
 
+// 工具函数 - 深拷贝对象（切断引用）
+const deepClone = (obj) => {
+  return JSON.parse(JSON.stringify(obj));
+};
+
 function returnDisabled(item) {
-  if (props.disablePayType.includes(item.name)) {
-    return true;
-  } else {
-    return false;
-  }
+  return props.disablePayType.includes(item.name);
 }
 
 const orderVIP = ref(null);
@@ -101,6 +87,7 @@ const orderVIPfun = (data) => {
   orderVIP.value = data;
 };
 
+// 支付方式列表（保持不变）
 const paymentMethodList = ref([
   // #ifdef MP-WEIXIN
   {
@@ -126,80 +113,94 @@ const paymentMethodList = ref([
   },
 ]);
 
-const paymentMethodName = ref([
-  {
-    name: "余额支付",
-    type: 1,
-    url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png",
-    payType: "accountPay",
-  },
-  {
-    name: "微信支付",
-    type: 2,
-    url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png",
-    payType: "wechatPay",
-  },
-  {
-    name: "支付宝支付",
-    type: 3,
-    url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/alipay.png",
-    payType: "aliPay",
-  },
-]);
-
-// const radiovalue = ref(2); // 支付方式
+// 修复核心：defineModel 先声明为空对象（无本地变量依赖）
 const radiovalue = defineModel({
   type: Object,
-  default: () => {
-    return {
-      name: "微信支付",
-      type: 2,
-      url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png",
-      payType: "wechatPay",
-    };
-  },
+  default: () => ({}), // 基础默认值，不引用任何本地变量
 });
 
+// 新增：在 onMounted 中初始化 defineModel 的真实默认值
+onMounted(() => {
+  // 1. 找到默认的微信支付项（兼容不同平台）
+  let defaultItem = paymentMethodList.value.find(item => item.type === 2);
+  // 兜底：如果没有微信支付（如支付宝平台），取第一个可用项
+  if (!defaultItem) {
+    defaultItem = paymentMethodList.value[0];
+  }
+  // 2. 深拷贝后赋值，避免引用污染
+  if (defaultItem) {
+    radiovalue.value = deepClone(defaultItem);
+  }
+
+  // 3. 触发一次 disablePayType 的监听逻辑（确保初始值符合禁用规则）
+  const canUsePayType = paymentMethodList.value.filter((item) => {
+    return !props.disablePayType.includes(item.name);
+  });
+  if (canUsePayType.length > 0 && !canUsePayType.find(v => v.type === radiovalue.value.type)) {
+    radiovalue.value = deepClone(canUsePayType[0]);
+  }
+});
+
+// 修复：watch 监听 disablePayType（调整逻辑，依赖 radiovalue 已初始化）
 watch(
   () => props.disablePayType,
   (newval) => {
-	console.log('props.disablePayType',newval)
+    console.log('props.disablePayType', newval);
+    // 加兜底：radiovalue 未初始化时不处理
+    if (Object.keys(radiovalue.value).length === 0) return;
+
     const canUsePayType = paymentMethodList.value.filter((item) => {
-      return  !newval.includes(item.name);
+      return !newval.includes(item.name);
     });
-    if (canUsePayType.find((v) => v.type == radiovalue.value.type)) {
-      return;
+    if (canUsePayType.length === 0) return;
+
+    const currentValid = canUsePayType.find((v) => v.type === radiovalue.value.type);
+    if (!currentValid) {
+      radiovalue.value = deepClone(canUsePayType[0]);
     }
-    radiovalue.value = canUsePayType[0];
   },
   {
-    immediate: true,
+    immediate: false, // 改为 false，避免在 radiovalue 初始化前执行
+    deep: true,
   }
 );
 
-// * 监听支付方式切换
+// 支付方式切换逻辑（保持之前的修复）
 const groupChanges = (type) => {
-  if (props.freeCheck && type == 1) {
+  console.log('type（原始入参）', type);
+  const typeNum = Number(type);
+  if (isNaN(typeNum)) {
+    uni.showToast({ title: "支付方式选择异常", icon: "none" });
     return;
   }
-  const item = paymentMethodList.value.find((v) => v.type == type);
 
-  if (item && returnDisabled(item)) {
-    uni.showToast({
-      title: "当前支付方式不可用",
-      icon: "none",
-    });
+  if (props.freeCheck && typeNum === 1) {
     return;
   }
-  // if (props.payAmount <= 0 && type != 1) {
-  // 	return;
-  // }
-  radiovalue.value = item;
+
+  console.log('paymentMethodList', paymentMethodList.value);
+  const item = paymentMethodList.value.find((v) => v.type === typeNum);
+  console.log('匹配到的item', item);
+
+  if (!item) {
+    uni.showToast({ title: "当前支付方式不存在", icon: "none" });
+    return;
+  }
+
+  if (returnDisabled(item)) {
+    uni.showToast({ title: "当前支付方式不可用", icon: "none" });
+    return;
+  }
+
+  radiovalue.value = deepClone(item);
 };
 
-watch(()=> radiovalue.value.type,(newval)=>{
-	emits("groupChange", radiovalue.value);
-})
+// 监听 radiovalue 变化触发事件
+watch(() => radiovalue.value.type, (newval) => {
+  if (newval) { // 加兜底：避免初始值为空时触发
+    emits("groupChange", radiovalue.value);
+  }
+});
 
 // 去充值
 const goRecharge = () => {
@@ -207,23 +208,10 @@ const goRecharge = () => {
     return;
   }
   uni.navigateTo({
-    url: "/pages/user/member/czzx?shopId=" + orderVIP.value.shopId,
+    url: `/pages/user/member/czzx?shopId=${orderVIP.value?.shopId || ''}`,
   });
-  // if (orderVIP.value.isVip) {
-  //   uni.navigateTo({
-  //     url: "/pages/user/member/czzx?shopId=" + orderVIP.value.shopId,
-  //   });
-  //   return;
-  // }
-  // uni.navigateTo({
-  //   url: "/user/vip/buy-vip?shopId=" + orderVIP.value.shopId,
-  // });
-
-  // uni.pro.navigateTo('user/member/index', {
-  // 	shopId: orderVIP.value.shopId
-  // })
 };
-// 将方法暴露给父组件
+
 defineExpose({
   groupChanges,
   orderVIPfun,
@@ -231,79 +219,82 @@ defineExpose({
 </script>
 
 <style lang="scss">
-.paymentMethod {
-  box-sizing: border-box;
-  margin-top: 30rpx;
-  background-color: #fff;
-  border-radius: 20rpx;
+	.paymentMethod {
+		box-sizing: border-box;
+		margin-top: 30rpx;
+		background-color: #fff;
+		border-radius: 20rpx;
 
 
-  .paymentMethod_content {
-    padding: 30rpx 30rpx 0 30rpx;
-    box-sizing: border-box;
+		.paymentMethod_content {
+			padding: 30rpx 30rpx 0 30rpx;
+			box-sizing: border-box;
 
-    .paymentMethod_title {
-      font-weight: 500;
-      font-size: 32rpx;
-      color: #333333;
-      box-sizing: border-box;
-    }
+			.paymentMethod_title {
+				font-weight: 500;
+				font-size: 32rpx;
+				color: #333333;
+				box-sizing: border-box;
+			}
 
-    .method_list {
-      padding: 40rpx 0;
-      box-sizing: border-box;
-      &.disabled {
-        opacity: 0.6;
-      }
-      .method_list_top {
-        display: flex;
-        justify-content: space-between;
+			.method_list {
+				padding: 40rpx 0;
+				box-sizing: border-box;
 
-        .method_list_top_left {
-          display: flex;
-          align-items: center;
+				&.disabled {
+					opacity: 0.6;
+				}
 
-          .icon {
-            width: 54.67rpx !important;
-            height: 48rpx !important;
-            margin-right: 22rpx;
-          }
+				.method_list_top {
+					display: flex;
+					justify-content: space-between;
 
-          .name {
-            font-size: 32rpx;
-            font-weight: 500;
-            color: #333;
-          }
+					.method_list_top_left {
+						display: flex;
+						align-items: center;
 
-          .method_list_top_cen {
-            display: flex;
-            flex-direction: column;
-          }
-        }
-      }
+						.icon {
+							width: 54.67rpx !important;
+							height: 48rpx !important;
+							margin-right: 22rpx;
+						}
 
-      .method_list_bom {
-        display: flex;
-        align-items: center;
+						.name {
+							font-size: 32rpx;
+							font-weight: 500;
+							color: #333;
+						}
 
-        .balance {
-          margin-right: 20rpx;
-          font-size: 24rpx;
-        }
+						.method_list_top_cen {
+							display: flex;
+							flex-direction: column;
+						}
+					}
+				}
 
-        .topUpNow {
-          color: #ff803d;
-          font-size: 28rpx;
-        }
-      }
-    }
+				.method_list_bom {
+					display: flex;
+					align-items: center;
 
-    .method_list:nth-child(odd) {
-      border-bottom: 2rpx solid #e5e5e5;
-    }
-    .method_list:nth-child(2) {
-      padding-bottom: 22rpx;
-    }
-  }
-}
+					.balance {
+						margin-right: 20rpx;
+						font-size: 24rpx;
+					}
+
+					.topUpNow {
+						color: #ff803d;
+						font-size: 28rpx;
+					}
+				}
+			}
+
+			.method_list:nth-child(odd) {
+				border-bottom: 2rpx solid #e5e5e5;
+			}
+
+			.method_list:nth-child(2) {
+				padding-bottom: 22rpx;
+			}
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/pages/order/components/order-item.vue b/pages/order/components/order-item.vue
index 067d2da..b0b67be 100644
--- a/pages/order/components/order-item.vue
+++ b/pages/order/components/order-item.vue
@@ -29,7 +29,7 @@
           <text class="productSkuName" v-if="item.skuName">{{
             item.skuName
           }}</text>
-		  <text class="color-666 u-font-24 u-m-t-4" v-if="item.remark">备注：{{item.remark}}</text>
+		  <view class="color-666 u-font-24 u-m-t-4" style="max-width: 328rpx;word-break: break-all;" v-if="item.remark">备注：{{item.remark}}</view>
           <template v-if="showLimitDiscount(item)">
             <text
               class="limitDiscount-time"
diff --git a/pages/product/components/shoppingCartes.vue b/pages/product/components/shoppingCartes.vue
index 27ff0c2..a2c52f0 100644
--- a/pages/product/components/shoppingCartes.vue
+++ b/pages/product/components/shoppingCartes.vue
@@ -99,7 +99,7 @@
 
 		<model v-model="modelData.show" title="单品备注" @confirm="modelDataConfirm">
 			<view class="u-p-40">
-				<up-input v-model="modelData.item.cartListinfo.remark" placeholder="备注"></up-input>
+				<up-input v-model="modelData.item.cartListinfo.remark" placeholder="备注(50字以内)" :maxlength="50"></up-input>
 			</view>
 		</model>
 	</view>