zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 商品的核销逻辑

Browse Source
This commit is contained in:
zoujing
2026-03-16 22:28:24 +08:00
parent f5c3a3ca2d
commit 40c37ea2e1
4 changed files with 122 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Qrcode/index.vue
View File

@@ -93,7 +93,7 @@ const props = defineProps({
},
loadingText: {
type: String,
default: "二维码生成中",
default: "",
},
});

109
src/pages-order/order/components/OrderQrcode/index.vue
View File

@@ -18,51 +18,46 @@
<view class="bg-white border-box rounded-12 flex flex-col flex-items-center flex-justify-center p-12 mb-12 mx-12">
<view class="flex flex-col w-full">
<view class="flex w-full flex-row flex-items-center flex-justify-between py-4">
<view >
<view class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
{{ props.orderData.commodityName }}
</view>
<view class="border-box font-size-12 color-99A0AE line-height-16">
{{ props.orderData.commodityAddress }}
{{ selectedVoucher.name }}
</view>
</view>
<view v-if="props.selectedVoucher" class="flex flex-row mt-8">
<view class="bg-F5F7FA text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ props.selectedVoucher.count }}{{ props.selectedVoucher.unit }}
<view v-if="selectedVoucher" class="flex flex-row">
<view class="bg-F5F7FA text-color-600 font-size-12 p-4 rounded-4 mr-4">总计{{ selectedVoucher.count }}{{ selectedVoucher.unit }}
</view>
<view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ props.selectedVoucher.count -
props.selectedVoucher.writeOffCount }}{{ props.selectedVoucher.unit }}可用</view>
<view class="bg-theme-color-50 theme-color-500 font-size-12 p-4 rounded-4">剩{{ selectedVoucher.count - selectedVoucher.writeOffCount }}{{ selectedVoucher.unit }}可用</view>
</view>
</view>
<view class="flex flex-col w-full flex-items-center flex-justify-center border-box rounded-8 border mt-12">
<view class="flex flex-row flex-justify-between border-box w-full mt-16 px-12">
<view class="bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">凭证1</view>
<view class="text-color-500 font-size-14 px-12 line-height-24 rounded-12">此码仅可核销1份</view>
<view class="flex flex-col w-full flex-items-center flex-justify-center border-box rounded-8 border pt-16 pb-32 mt-12">
<view class="flex flex-row flex-justify-between border-box w-full px-12">
<view class="bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">凭证{{ selectedVoucherList.length > 1 ? currentVoucherIndex + 1 : '' }}</view>
<view class="text-color-500 font-size-14 px-12 line-height-24 rounded-12">此码仅可核销{{ selectedVoucher.count - selectedVoucher.writeOffCount }}份</view>
</view>
<view class="flex flex-items-center flex-justify-center mt-20 p-20 rounded-12 border borderColor"
:style="{ borderColor: props.selectedVoucher?.color }">
:style="{ borderColor: selectedVoucher?.color }">
<Qrcode v-if="showQrcode" :size="props.size" :unit="props.unit" :val="qrcodeVal" :loadMake="true"
:onval="true" />
</view>
<view class="mt-20 mb-24 bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">{{
props.selectedVoucher?.name }}
<view v-if="false" class="mt-20 bg-theme-color-50 theme-color-500 font-size-14 px-12 line-height-24 rounded-12">
{{ selectedVoucher.name }}
</view>
</view>
<view class="flex flex-row w-full flex-items-center flex-justify-between mt-16 mb-24">
<view v-if="selectedVoucherList.length > 1" class="flex flex-row w-full flex-items-center flex-justify-between mt-16 mb-24">
<view class="actions-btn" @click.stop="upAction">
<uni-icons type="left" size="16" color="#171717" />
</view>
<view class="flex flex-col">
<view class="flex flex-row flex-justify-center flex-items-center">
<view class="theme-color-500 font-size-16">1</view>
<view class="text-color-600 font-size-12">/3</view>
<view class="theme-color-500 font-size-16">{{ currentVoucherIndex + 1 }}</view>
<view class="text-color-600 font-size-12">/{{ selectedVoucherList.length }}</view>
</view>
<view class="text-color-600 font-size-14">扫码后点击下一张</view>
@@ -72,7 +67,7 @@
<uni-icons type="right" size="16" color="#171717" />
</view>
</view>
<view v-else class="mb-24"></view>
</view>
</view>
@@ -117,7 +112,7 @@ const props = defineProps({
});
// Events定义
const emit = defineEmits(["close", "update:modelValue"]);
const emit = defineEmits(["close", "update:modelValue", "update:selectedVoucherIndex"]);
// 弹窗引用
const popupRef = ref(null);
@@ -125,10 +120,26 @@ const popupRef = ref(null);
// 控制二维码渲染
const showQrcode = ref(false);
// 当前选择的凭证索引
const currentVoucherIndex = ref(props.selectedVoucherIndex || 0);
const selectedVoucherList = computed(() => {
const list = props.orderData?.commodityPackageConfig || [];
if (!Array.isArray(list)) return [];
return list.filter((item) => item?.packageStatus === 0);
});
// 二维码内容
const selectedVoucher = computed(() => {
const list = selectedVoucherList.value || [];
if (!list.length) return null;
const idx = Math.min(Math.max(Number(currentVoucherIndex.value || 0), 0), list.length - 1);
return list[idx] || null;
});
const qrcodeVal = computed(() => {
const orderId = props.orderData?.orderId || "";
const voucherName = props.selectedVoucher?.name || "";
const voucherName = selectedVoucher.value?.name || "";
return orderId ? `${orderId}&${voucherName}` : "";
});
@@ -162,17 +173,65 @@ watch(
{ immediate: true }
);
// 同步外部 prop -> 内部 index（初始化/外部变更）
watch(
() => props.selectedVoucherIndex,
(newIdx) => {
const len = selectedVoucherList.value.length;
let idx = Number(newIdx || 0);
if (len && idx >= len) idx = 0;
currentVoucherIndex.value = idx;
},
{ immediate: true }
);
// 当可用凭证列表变化时，确保 currentVoucherIndex 不越界
watch(
selectedVoucherList,
(list) => {
const len = list.length;
if (len === 0) {
if (currentVoucherIndex.value !== 0) {
currentVoucherIndex.value = 0;
}
return;
}
if (currentVoucherIndex.value >= len) {
currentVoucherIndex.value = 0;
}
},
{ immediate: true }
);
// 当内部索引变化时，通知父组件（避免无用循环）
watch(
() => currentVoucherIndex.value,
(val, oldVal) => {
if (val !== props.selectedVoucherIndex) {
emit("update:selectedVoucherIndex", val);
}
}
);
const handleClose = () => {
emit("update:modelValue", false);
emit("close");
};
const upAction = () => {
console.log("点击了上一张");
const len = selectedVoucherList.value.length;
if (!len) return;
let idx = Number(currentVoucherIndex.value || 0) - 1;
if (idx < 0) idx = len - 1;
currentVoucherIndex.value = idx;
};
const downAction = () => {
console.log("点击了下一张");
const len = selectedVoucherList.value.length;
if (!len) return;
let idx = Number(currentVoucherIndex.value || 0) + 1;
if (idx >= len) idx = 0;
currentVoucherIndex.value = idx;
};
</script>

15
src/pages-order/order/components/VoucherList/index.vue
View File

@@ -4,7 +4,8 @@
核销凭证列表
</text>
<view class="flex flex-items-center flex-justify-between py-12 border-bottom"
<view class="flex flex-items-center flex-justify-between py-12"
:class="[index+1 === props.orderData.commodityPackageConfig.length ? '' : 'border-bottom']"
v-for="(item, index) in props.orderData.commodityPackageConfig" :key="item.name">
<view class="flex flex-col">
<text class="text-color-900 font-size-16">{{ item.name }}</text>
@@ -14,8 +15,9 @@
</view>
</view>
<view class="flex flex-items-center bg-theme-color-500 px-14 py-8 rounded-8" @click="handleShowQrcode(item, index)">
<text class="color-white font-size-14">出示凭证</text>
<view class="flex flex-items-center px-14 py-8 rounded-8" :class="[item.packageStatus === 0 ? 'bg-theme-color-500' : 'bg-gray']" @click="handleShowQrcode(item, index)">
<text v-if="item.packageStatus === 0" class="font-size-14 color-white" >出示凭证</text>
<text v-else class="font-size-14 text-color-300">已核销</text>
</view>
</view>
</view>
@@ -36,6 +38,13 @@ const props = defineProps({
const handleShowQrcode = (item, index) => {
console.log("显示核销凭证二维码，凭证信息：", item);
if (item.packageStatus !== 0) {
uni.showToast({
title: "该凭证已核销使用",
icon: "none",
});
return;
}
emit("selected", { item, index });
};

24
src/static/scss/padding.scss
View File

@@ -297,6 +297,30 @@
padding-bottom: 24px;
}
.p-32 {
padding: 32px;
}
.pt-32 {
padding-top: 32px;
}
.pb-32 {
padding-bottom: 32px;
}
.pl-32 {
padding-left: 32px;
}
.pr-32 {
padding-right: 32px;
}
.px-32 {
padding-left: 32px;
padding-right: 32px;
}
.py-32 {
padding-top: 32px;
padding-bottom: 32px;
}
.pb-safe-area {
padding-bottom: Max(env(safe-area-inset-bottom), 12px);
}