feat(支付): 添加支付方式映射及展示逻辑

新增支付方式选项配置和模式到支付方式的映射
在店铺表单和卡片中展示当前模式支持的支付方式标签
移除原有的借呗支付选择控件，改为自动根据模式显示支付方式

src/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 = {
+  0: [0, 3],
+  1: [0, 1],
+  2: [0, 1],
+  3: [0, 3],
+  4: [2],
+};

src/views/cabinet/shop/card.vue

@@ -12,6 +12,7 @@ import View from "@iconify-icons/ep/view";
 import AddFill from "@iconify-icons/ri/add-circle-line";
 import ShopFormModal from "./shop-form-modal.vue";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
+import { paymentMethodOptions, modeToPaymentMethodMap } from "@/utils/maps/payment";
 const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;
 
 defineOptions({
@@ -87,6 +88,15 @@ function getBalanceType(enable: number): "" | "success" | "warning" | "info" | "
 onMounted(() => {
   getList();
 });
+
+function getPaymentMethods(mode: number): Array<{ label: string; type: string }> {
+  if (!mode) return [];
+  const methodValues = modeToPaymentMethodMap[mode] || [];
+  return methodValues.map(value => {
+    const option = paymentMethodOptions.find(item => item.value === value);
+    return option ? { label: option.label, type: option.type } : null;
+  }).filter(Boolean) as Array<{ label: string; type: string }>;
+}
 </script>
 
 <template>
@@ -119,8 +129,8 @@ onMounted(() => {
             <el-card class="cabinet-card" :body-style="{ padding: '8px 10px' }">
               <div class="card-content">
                 <img v-if="item.coverImg" :src="item.coverImg" alt="" class="cabinet-image">
-                <svg v-if="!item.coverImg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" width="160" height="100"
+                <svg v-if="!item.coverImg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" width="160"
-                  class="cabinet-image">
+                  height="100" class="cabinet-image">
                   <!-- 背景：浅灰色填充，模拟图片容器 -->
                   <rect width="100%" height="100%" fill="#f8f8f8" rx="4" ry="4" /> <!-- 可选圆角，适配卡片风格 -->
                   <!-- 图片图标：简化的“图片”符号（矩形+交叉线），直观关联“图片” -->
@@ -135,10 +145,19 @@ onMounted(() => {
                   </text>
                 </svg>
 
-                <el-descriptions class="cabinet-info" :column="1">
+                <el-descriptions class="cabinet-info" :column="2">
                   <!-- <el-descriptions-item class="type">模式：{{ item.belongType === 0 ? '借还模式' : '固资模式' }}</el-descriptions-item> -->
-                  <el-descriptions-item class="mode">运行模式：<el-tag :type="getModeType(item.mode)">{{ getModeText(item.mode) }}</el-tag></el-descriptions-item>
+                  <el-descriptions-item class="mode">运行模式：</el-descriptions-item>
-                  <el-descriptions-item class="balance">借呗支付：<el-tag :type="getBalanceType(item.balanceEnable)">{{ getBalanceEnableText(item.balanceEnable) }}</el-tag></el-descriptions-item>
+                  <el-descriptions-item class="mode"><el-tag :type="getModeType(item.mode)">{{
+                    getModeText(item.mode) }}</el-tag></el-descriptions-item>
+                  <!-- <el-descriptions-item class="payment-methods">支付方式：
+                  </el-descriptions-item>
+                  <el-descriptions-item v-for="method in getPaymentMethods(item.mode)" class="payment-methods">
+                    <el-tag :key="method.label"
+                      :type="method.type as '' | 'success' | 'info' | 'warning' | 'danger'" style="margin-right: 5px;">
+                      {{ method.label }}
+                    </el-tag>
+                  </el-descriptions-item> -->
                 </el-descriptions>
               </div>
               <el-divider class="divider" />
@@ -195,7 +214,7 @@ onMounted(() => {
 
     .cabinet-info {
       text-align: left;
-      padding: 16px 0px;
+      padding: 26px 0px;
 
       .name,
       .type,

src/views/cabinet/shop/shop-form-modal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref, watch, onMounted } from "vue";
+import { ref, watch, onMounted, computed } from "vue";
 import { ElMessage } from "element-plus";
+import { paymentMethodOptions, modeToPaymentMethodMap } from "@/utils/maps/payment";
 import { addShop, updateShop, ShopDTO, UpdateShopCommand, AddShopCommand } from "@/api/shop/shop";
 import { useWxStore } from "@/store/modules/wx";
 import Upload from "@iconify-icons/ep/upload";
@@ -40,6 +41,8 @@ const rules = {
   coverImg: [{ required: true, message: "请上传封面图", trigger: "change" }]
 };
 
+
+
 watch(
   () => props.visible,
   val => {
@@ -108,6 +111,15 @@ const beforeAvatarUpload = (rawFile) => {
   }
   return true;
 };
+
+const currentPaymentMethods = computed(() => {
+  if (!formData.value.mode) return [];
+  const methodValues = modeToPaymentMethodMap[formData.value.mode] || [];
+  return methodValues.map(value => {
+    const option = paymentMethodOptions.find(item => item.value === value);
+    return option ? { label: option.label, type: option.type } : null;
+  }).filter(Boolean);
+});
 </script>
 
 <template>
@@ -124,8 +136,8 @@ const beforeAvatarUpload = (rawFile) => {
         <el-upload class="avatar-uploader" :action="VITE_APP_BASE_API + '/file/upload'" :show-file-list="false"
           :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
           <img v-if="formData.coverImg" :src="formData.coverImg" class="avatar" />
-          <svg v-if="!formData.coverImg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" width="160" height="100"
+          <svg v-if="!formData.coverImg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" width="160"
-            class="cabinet-image">
+            height="100" class="cabinet-image">
             <!-- 背景：浅灰色填充，模拟图片容器 -->
             <rect width="100%" height="100%" fill="#f8f8f8" rx="4" ry="4" /> <!-- 可选圆角，适配卡片风格 -->
             <!-- 图片图标：简化的“图片”符号（矩形+交叉线），直观关联“图片” -->
@@ -156,11 +168,21 @@ const beforeAvatarUpload = (rawFile) => {
           <el-option label="耗材模式" :value="4" />
         </el-select>
       </el-form-item>
-      <el-form-item label="借呗支付" prop="balanceEnable">
+      <!-- <el-form-item label="借呗支付" prop="balanceEnable">
         <el-select v-model="formData.balanceEnable" placeholder="请选择借呗支付状态">
           <el-option label="正常使用" :value="1" />
           <el-option label="禁止使用" :value="0" />
         </el-select>
+      </el-form-item> -->
+      <el-form-item label="支付方式">
+        <el-tag 
+          v-for="method in currentPaymentMethods" 
+          :key="method.label" 
+          :type="method.type" 
+          style="margin-right: 5px;"
+        >
+          {{ method.label }}
+        </el-tag>
       </el-form-item>
     </el-form>
     <template #footer>