feat(支付): 添加支付方式映射及展示逻辑
新增支付方式选项配置和模式到支付方式的映射 在店铺表单和卡片中展示当前模式支持的支付方式标签 移除原有的借呗支付选择控件,改为自动根据模式显示支付方式
This commit is contained in:
parent
877fa5f1db
commit
fb862b7267
|
@ -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],
|
||||
};
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue