From 6e49347de2c879873db79c9941053101f0fe8408 Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Sat, 21 Jun 2025 16:33:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=94=AF=E4=BB=98):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E6=94=AF=E4=BB=98=E6=96=B9=E5=BC=8F=E9=80=BB=E8=BE=91=E4=BB=A5?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=BA=97=E9=93=BA=E6=A8=A1=E5=BC=8F=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增支付方式映射文件，支持根据店铺模式显示不同支付选项
重构结算组件，动态显示支持的支付方式并处理支付逻辑
在商品列表选择店铺时保存选中店铺信息
---
 src/common/utils/maps/payment.ts          |  14 +++
 src/pages/product/ProductList.vue         |   1 +
 src/pages/product/components/checkout.vue | 143 ++++++++++++----------
 src/pinia/stores/product.ts               |   9 +-
 4 files changed, 99 insertions(+), 68 deletions(-)
 create mode 100644 src/common/utils/maps/payment.ts

diff --git a/src/common/utils/maps/payment.ts b/src/common/utils/maps/payment.ts
new file mode 100644
index 0000000..ff83145
--- /dev/null
+++ b/src/common/utils/maps/payment.ts
@@ -0,0 +1,14 @@
+export const paymentMethodOptions = [
+  { label: '微信支付', value: 0, type: 'primary' },
+  { label: '借呗支付', value: 1, type: 'success' },
+  { label: '要呗支付', value: 2, type: 'info' },
+  { label: '余额支付', value: 3, type: 'warning' },
+];
+
+export const modeToPaymentMethodMap: Record<number, number[]> = {
+  0: [0],
+  1: [0, 1],
+  2: [0, 1],
+  3: [0],
+  4: [2],
+};
\ No newline at end of file
diff --git a/src/pages/product/ProductList.vue b/src/pages/product/ProductList.vue
index 16998e1..baf9339 100644
--- a/src/pages/product/ProductList.vue
+++ b/src/pages/product/ProductList.vue
@@ -61,6 +61,7 @@ const showAb98BindPopup = ref(false);
 function handleShopSelect(selectedShopId: number) {
   shopId.value = selectedShopId;
   showShopList.value = false;
+  productStore.setSelectedShop(shopList.value.find(shop => shop.shopId === selectedShopId)!);
   productStore.getGoods(selectedShopId);
   cartStore.clearCart();
   activeCategory.value = 0;
diff --git a/src/pages/product/components/checkout.vue b/src/pages/product/components/checkout.vue
index aa9c572..d2c1b0f 100644
--- a/src/pages/product/components/checkout.vue
+++ b/src/pages/product/components/checkout.vue
@@ -1,25 +1,42 @@
 <script setup lang="ts">
-import { useCartStore } from "@/pinia/stores/cart"
-import { useWxStore } from "@/pinia/stores/wx"
-import { useAb98UserStore } from '@/pinia/stores/ab98-user'
-import { storeToRefs } from "pinia"
-import { showConfirmDialog } from "vant"
-import { submitOrderApi } from "@/common/apis/shop"
-import type { SubmitOrderRequestData, WxJsApiPreCreateResponse } from "@/common/apis/shop/type"
-import { useRouter } from 'vue-router'
+import { useCartStore } from "@/pinia/stores/cart";
+import { useWxStore } from "@/pinia/stores/wx";
+import { useAb98UserStore } from '@/pinia/stores/ab98-user';
+import { storeToRefs } from "pinia";
+import { showConfirmDialog } from "vant";
+import { submitOrderApi } from "@/common/apis/shop";
+import type { SubmitOrderRequestData, WxJsApiPreCreateResponse } from "@/common/apis/shop/type";
+import { useRouter } from 'vue-router';
+import { useProductStore } from "@/pinia/stores/product";
+// 导入支付方式映射
+import { paymentMethodOptions, modeToPaymentMethodMap } from "@/common/utils/maps/payment";
 
-const router = useRouter()
+const router = useRouter();
 
-const cartStore = useCartStore()
-const { cartItems, totalPrice } = storeToRefs(cartStore)
+const cartStore = useCartStore();
+const { cartItems, totalPrice } = storeToRefs(cartStore);
 
-const wxStore = useWxStore()
-const { openid, balance, corpidLogin, userid: qyUserid, name: qyName } = storeToRefs(wxStore)
+const wxStore = useWxStore();
+const { openid, balance, corpidLogin, userid: qyUserid, name: qyName } = storeToRefs(wxStore);
 
-const ab98UserStore = useAb98UserStore()
-const { tel, userid: ab98Userid, name } = storeToRefs(ab98UserStore)
+const ab98UserStore = useAb98UserStore();
+const { tel, userid: ab98Userid, name } = storeToRefs(ab98UserStore);
 
-const selectedPayment = ref<'wechat' | 'balance' | 'approval'>('wechat');
+const productStore = useProductStore();
+
+// 根据店铺模式计算支持的支付方式
+const supportedPayments = computed(() => {
+  const shopMode = productStore.selectedShop?.mode || 0;
+  const allowedValues = modeToPaymentMethodMap[shopMode] || [];
+  // 筛选条件：
+  // 1. 支付方式值必须在店铺模式允许的列表中
+  // 2. 微信支付(值为0)仅当非企业微信登录时才显示
+  return paymentMethodOptions.filter(option => allowedValues.includes(option.value)
+  && (option.value !== 0 || !corpidLogin.value));
+});
+
+// 初始化选中的支付方式为第一个支持的选项
+const selectedPayment = ref<string>(supportedPayments.value[0]?.value.toString() || '0');
 const contact = ref("");
 const applyRemark = ref("");
 const submitting = ref(false);
@@ -28,28 +45,13 @@ const isApproval = computed(() => {
   return cartItems.value.some(item => item.product.belongType == 1);
 });
 
-watch(corpidLogin, (newValue) => {
-  if (isApproval.value) {
-    selectedPayment.value = 'approval';
-  } else {
-    if (newValue) {
-      selectedPayment.value = 'balance';
-    } else {
-      selectedPayment.value = 'wechat';
-    }
-  }
-}, { immediate: true });
-watch(isApproval, (newValue) => {
-  if (newValue) {
-    selectedPayment.value = 'approval';
-  } else {
-    if (corpidLogin.value) {
-      selectedPayment.value = 'balance';
-    } else {
-      selectedPayment.value = 'wechat';
-    }
-  }
-})
+// 支付方式value到类型的映射
+const paymentValueToType: Record<string, 'wechat' | 'balance' | 'approval'> = {
+  '0': 'wechat',
+  '1': 'balance',
+  '2': 'approval',
+  '3': 'balance'
+};
 
 function callWxJsApi(paymentInfo: WxJsApiPreCreateResponse) {
   return new Promise((resolve, reject) => {
@@ -127,7 +129,8 @@ async function handleSubmit() {
         quantity: item.quantity,
         cellId: item.product.cellId,
       })),
-      paymentType: selectedPayment.value,
+      // 根据选中的支付方式value获取对应的类型
+      paymentType: paymentValueToType[selectedPayment.value] || 'wechat',
       mobile: tel.value,
       name: isInternal === 2 ? qyName.value : name.value,
       applyRemark: applyRemark.value,
@@ -141,28 +144,35 @@ async function handleSubmit() {
       throw new Error("订单提交失败")
     }
 
-    if (selectedPayment.value === 'wechat') {
+    if (selectedPayment.value == '0') { // 微信支付
       if (data.paymentInfo) {
         await callWxJsApi(data.paymentInfo);
       }
-    } else if (selectedPayment.value === 'balance') {
-      // 余额支付成功处理
+    } else if (selectedPayment.value == '1') { // 借呗支付
+      wxStore.setBalance(data.newBalance || 0);
+      try {
+        await showConfirmDialog({
+          title: "支付成功",
+          message: `借呗支付成功，剩余余额：¥${data.newBalance?.toFixed(2)}`
+        })
+      } catch (error) {}
+    } else if (selectedPayment.value == '2') { // 要呗支付
+      try {
+        await showConfirmDialog({
+          title: "提交领用申请成功",
+          message: `请等待管理员审批`
+        })
+      } catch (error) {}
+    } else if (selectedPayment.value == '3') { // 余额支付
       wxStore.setBalance(data.newBalance || 0);
       try {
         await showConfirmDialog({
           title: "支付成功",
           message: `余额支付成功，剩余余额：¥${data.newBalance?.toFixed(2)}`
         })
-      } catch (error) {
-      }
-    } else if (selectedPayment.value === 'approval') {
-      // 审批支付成功处理
-      try {
-        await showConfirmDialog({
-          title: "提交领用申请成功",
-          message: `请等待管理员审批`
-        })
-      } catch (error) { }
+      } catch (error) {}
+    } else { // 新增支付方式
+      // 处理逻辑
     }
 
     router.push({
@@ -225,25 +235,24 @@ async function handleSubmit() {
         <van-field v-model="applyRemark" label="领用说明" type="textarea" rows="2" autosize />
       </van-cell-group> -->
 
+      <!-- 支付方式 -->
       <van-cell-group v-if="!isApproval" class="contact-form">
-        <van-cell v-if="!corpidLogin" :class="['payment-option', { selected: selectedPayment === 'wechat' }]"
-          @click="selectedPayment = 'wechat'">
-          <van-icon name="wechat" class="method-icon" />
-          <span class="method-label">微信支付</span>
-          <div class="empty"></div>
-          <van-icon v-if="selectedPayment === 'wechat'" name="success" class="check-icon" />
-        </van-cell>
-
-        <van-cell v-if="balance && balance > 0"
-          :class="['payment-option', { selected: selectedPayment === 'balance', disabled: balance < totalPrice }]"
-          @click="selectedPayment = 'balance'">
-          <van-icon name="balance-o" class="method-icon" />
+        <van-cell 
+          v-for="method in supportedPayments" 
+          :key="method.value"
+          :class="['payment-option', { selected: selectedPayment === method.value.toString(), disabled: method.value === 1 && (balance < totalPrice) }]"
+          @click="selectedPayment = method.value.toString()"
+        >
+          <van-icon 
+            :name="method.value === 0 ? 'wechat' : method.value === 1 ? 'balance-o' : method.value === 2 ? 'credit-card' : 'wallet'"
+            class="method-icon"
+          />
           <span class="method-label">
-            借呗支付
-            <span class="balance-amount">（当前：¥{{ balance.toFixed(2) }}）</span>
+            {{ method.label }}
+            <span v-if="method.value === 1" class="balance-amount">（当前：¥{{ balance.toFixed(2) }}）</span>
           </span>
           <div class="empty"></div>
-          <van-icon v-if="selectedPayment === 'balance'" name="success" class="check-icon" />
+          <van-icon v-if="selectedPayment === method.value.toString()" name="success" class="check-icon" />
         </van-cell>
       </van-cell-group>
 
diff --git a/src/pinia/stores/product.ts b/src/pinia/stores/product.ts
index 18a1feb..5100c7d 100644
--- a/src/pinia/stores/product.ts
+++ b/src/pinia/stores/product.ts
@@ -1,3 +1,4 @@
+import { ShopEntity } from "@/common/apis/shop/type"
 import { pinia } from "@/pinia"
 import { getShopGoodsApi } from "@@/apis/shop"
 
@@ -19,6 +20,11 @@ export const useProductStore = defineStore("product", () => {
   const labels = ref<{ id: number, name: string }[]>([]);
   const categories = ref<Product[]>([]);
   const shopId = ref<number|null>(null);
+  const selectedShop = ref<ShopEntity|null>(null);
+
+  const setSelectedShop = (shop: ShopEntity) => {
+    selectedShop.value = shop;
+  }
 
   const getGoods = async (shopId_?: number) => {
     if (shopId_ && shopId_ > 0) {
@@ -58,7 +64,8 @@ export const useProductStore = defineStore("product", () => {
       console.error("获取商品数据失败:", error)
     }
   }
-  return { labels, categories, shopId, getGoods }
+  return { labels, categories, shopId, selectedShop, 
+    getGoods, setSelectedShop }
 })
 
 /**