czg_team/cashier_wx
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加购物车备注功能,修复支付方式选择切换回显问题,取消选择优惠券回显选择数量问题

Browse Source
This commit is contained in:
YeMingfei666
2025-12-18 10:38:50 +08:00
parent aabe680071
commit ecff4204e4
3 changed files with 175 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

355
components/paymentMethod.vue
View File

@@ -1,49 +1,35 @@
<template> <template>
<!-- 支付方式 --> <!-- 支付方式 -->
<view class="paymentMethod"> <view class="paymentMethod">
<view class="paymentMethod_content"> <view class="paymentMethod_content">
<view class="paymentMethod_title">支付方式</view> <view class="paymentMethod_title">支付方式</view>
<up-radio-group <up-radio-group v-model="radiovalue.type" iconPlacement="right" @change="groupChanges" :size="28"
v-model="radiovalue.type" placement="column">
iconPlacement="right" <block v-for="(item, index) in paymentMethodList" :key="index">
@change="groupChanges" <view class="method_list" @click="groupChanges(item.type)"
:size="28" :class="{ disabled: returnDisabled(item) }">
placement="column" <view class="method_list_top">
> <view class="method_list_top_left">
<block v-for="(item, index) in paymentMethodList" :key="index"> <image class="icon" :src="item.url" mode="aspectFill" />
<view <view class="method_list_top_cen">
class="method_list" <view class="name"> {{ item.name }} </view>
@click="groupChanges(item.type)" <view class="method_list_bom" v-if="item.name == '余额支付'">
:class="{ disabled: returnDisabled(item) }" <text class="balance">
> 当前余额￥{{ orderVIP ? orderVIP.amount || 0 : 0 }}</text>
<view class="method_list_top"> <text class="topUpNow" @click="goRecharge">去充值</text>
<view class="method_list_top_left"> </view>
<image class="icon" :src="item.url" mode="aspectFill" /> </view>
<view class="method_list_top_cen"> </view>
<view class="name"> {{ item.name }} </view> <up-radio :disabled="returnDisabled(item)" activeColor="#E8AD7B" icon-size="18" size="18"
<view class="method_list_bom" v-if="item.name == '余额支付'"> :name="item.type">
<text class="balance"> </up-radio>
当前余额￥{{ orderVIP ? orderVIP.amount || 0 : 0 }}</text </view>
> </view>
<text class="topUpNow" @click="goRecharge">去充值</text> </block>
</view> </up-radio-group>
</view> </view>
</view> <slot name="bottom"></slot>
<up-radio </view>
: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> </template>
<script setup> <script setup>
@@ -56,6 +42,7 @@ import {
watch, watch,
watchEffect, watchEffect,
defineExpose, defineExpose,
onMounted // 新增：用于初始化默认值
} from "vue"; } from "vue";
const props = defineProps({ const props = defineProps({
@@ -77,18 +64,17 @@ const props = defineProps({
}, },
disablePayType: { disablePayType: {
type: Array, type: Array,
default: () => { default: () => [],
return [];
},
}, },
}); });
// 工具函数 - 深拷贝对象（切断引用）
const deepClone = (obj) => {
return JSON.parse(JSON.stringify(obj));
};
function returnDisabled(item) { function returnDisabled(item) {
if (props.disablePayType.includes(item.name)) { return props.disablePayType.includes(item.name);
return true;
} else {
return false;
}
} }
const orderVIP = ref(null); const orderVIP = ref(null);
@@ -101,6 +87,7 @@ const orderVIPfun = (data) => {
orderVIP.value = data; orderVIP.value = data;
}; };
// 支付方式列表（保持不变）
const paymentMethodList = ref([ const paymentMethodList = ref([
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
{ {
@@ -126,80 +113,94 @@ const paymentMethodList = ref([
}, },
]); ]);
const paymentMethodName = ref([ // 修复核心：defineModel 先声明为空对象（无本地变量依赖）
{
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); // 支付方式
const radiovalue = defineModel({ const radiovalue = defineModel({
type: Object, type: Object,
default: () => { default: () => ({}), // 基础默认值，不引用任何本地变量
return {
name: "微信支付",
type: 2,
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png",
payType: "wechatPay",
};
},
}); });
// 新增：在 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( watch(
() => props.disablePayType, () => props.disablePayType,
(newval) => { (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) => { 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)) { if (canUsePayType.length === 0) return;
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) => { 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; return;
} }
const item = paymentMethodList.value.find((v) => v.type == type);
if (item && returnDisabled(item)) { if (props.freeCheck && typeNum === 1) {
uni.showToast({
title: "当前支付方式不可用",
icon: "none",
});
return; return;
} }
// if (props.payAmount <= 0 && type != 1) {
// return; console.log('paymentMethodList', paymentMethodList.value);
// } const item = paymentMethodList.value.find((v) => v.type === typeNum);
radiovalue.value = item; 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)=>{ // 监听 radiovalue 变化触发事件
emits("groupChange", radiovalue.value); watch(() => radiovalue.value.type, (newval) => {
}) if (newval) { // 加兜底：避免初始值为空时触发
emits("groupChange", radiovalue.value);
}
});
// 去充值 // 去充值
const goRecharge = () => { const goRecharge = () => {
@@ -207,23 +208,10 @@ const goRecharge = () => {
return; return;
} }
uni.navigateTo({ 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({ defineExpose({
groupChanges, groupChanges,
orderVIPfun, orderVIPfun,
@@ -231,79 +219,82 @@ defineExpose({
</script> </script>
<style lang="scss"> <style lang="scss">
.paymentMethod { .paymentMethod {
box-sizing: border-box; box-sizing: border-box;
margin-top: 30rpx; margin-top: 30rpx;
background-color: #fff; background-color: #fff;
border-radius: 20rpx; border-radius: 20rpx;
.paymentMethod_content { .paymentMethod_content {
padding: 30rpx 30rpx 0 30rpx; padding: 30rpx 30rpx 0 30rpx;
box-sizing: border-box; box-sizing: border-box;
.paymentMethod_title { .paymentMethod_title {
font-weight: 500; font-weight: 500;
font-size: 32rpx; font-size: 32rpx;
color: #333333; color: #333333;
box-sizing: border-box; box-sizing: border-box;
} }
.method_list { .method_list {
padding: 40rpx 0; padding: 40rpx 0;
box-sizing: border-box; box-sizing: border-box;
&.disabled {
opacity: 0.6;
}
.method_list_top {
display: flex;
justify-content: space-between;
.method_list_top_left { &.disabled {
display: flex; opacity: 0.6;
align-items: center; }
.icon { .method_list_top {
width: 54.67rpx !important; display: flex;
height: 48rpx !important; justify-content: space-between;
margin-right: 22rpx;
}
.name { .method_list_top_left {
font-size: 32rpx; display: flex;
font-weight: 500; align-items: center;
color: #333;
}
.method_list_top_cen { .icon {
display: flex; width: 54.67rpx !important;
flex-direction: column; height: 48rpx !important;
} margin-right: 22rpx;
} }
}
.method_list_bom { .name {
display: flex; font-size: 32rpx;
align-items: center; font-weight: 500;
color: #333;
}
.balance { .method_list_top_cen {
margin-right: 20rpx; display: flex;
font-size: 24rpx; flex-direction: column;
} }
}
}
.topUpNow { .method_list_bom {
color: #ff803d; display: flex;
font-size: 28rpx; align-items: center;
}
}
}
.method_list:nth-child(odd) { .balance {
border-bottom: 2rpx solid #e5e5e5; margin-right: 20rpx;
} font-size: 24rpx;
.method_list:nth-child(2) { }
padding-bottom: 22rpx;
} .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> </style>

2
pages/order/components/order-item.vue
View File

@@ -29,7 +29,7 @@
<text class="productSkuName" v-if="item.skuName">{{ <text class="productSkuName" v-if="item.skuName">{{
item.skuName item.skuName
}}</text> }}</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)"> <template v-if="showLimitDiscount(item)">
<text <text
class="limitDiscount-time" class="limitDiscount-time"

2
pages/product/components/shoppingCartes.vue
View File

@@ -99,7 +99,7 @@
<model v-model="modelData.show" title="单品备注" @confirm="modelDataConfirm"> <model v-model="modelData.show" title="单品备注" @confirm="modelDataConfirm">
<view class="u-p-40"> <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> </view>
</model> </model>
</view> </view>