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

新增支付方式选项配置和模式到支付方式的映射
在店铺表单和卡片中展示当前模式支持的支付方式标签
移除原有的借呗支付选择控件,改为自动根据模式显示支付方式
This commit is contained in:
dzq 2025-06-16 15:36:04 +08:00
parent 877fa5f1db
commit fb862b7267
3 changed files with 65 additions and 10 deletions

14
src/utils/maps/payment.ts Normal file
View File

@ -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],
};

View File

@ -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"
class="cabinet-image">
<svg v-if="!item.coverImg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" width="160"
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="balance">借呗支付<el-tag :type="getBalanceType(item.balanceEnable)">{{ getBalanceEnableText(item.balanceEnable) }}</el-tag></el-descriptions-item>
<el-descriptions-item class="mode">运行模式</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,

View File

@ -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"
class="cabinet-image">
<svg v-if="!formData.coverImg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 100" width="160"
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>