feat(智能柜详情): 添加支付方式显示功能

在智能柜详情页面中,新增计算属性 currentPaymentMethods 用于根据店铺模式显示对应的支付方式标签。替换原有的借呗支付显示为多种支付方式的标签展示,提升用户体验。
This commit is contained in:
dzq 2025-07-07 08:51:03 +08:00
parent 363721b0c2
commit 1855bca307
1 changed files with 19 additions and 6 deletions

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getSmartCabinetDetailApi, type SmartCabinetDTO, getBalanceEnableText } from "@/api/cabinet/smart-cabinet";
import { CabinetCellQuery, changeGoodsCellsStock, clearGoodsCells, getCabinetCellList, type CabinetCellDTO } from "@/api/cabinet/cabinet-cell";
@ -25,6 +25,7 @@ import { CabinetMainboardDTO, deleteMainboard, getMainboardList, updateMainboard
import { getShopById, ShopDTO, getModeText } from "@/api/shop/shop";
import { useBtnPermissionStore } from "@/store/modules/btnPermission";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { modeToPaymentMethodMap, paymentMethodOptions } from "@/utils/maps/payment";
defineOptions({
name: "SmartCabinetDetail"
@ -82,6 +83,15 @@ const currentCellId = ref<number>();
const cellFormVisible = ref(false);
const cellEditVisible = ref(false);
const currentPaymentMethods = computed(() => {
if (typeof shopInfo.value.mode !== 'number') return [];
const methodValues = modeToPaymentMethodMap[shopInfo.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);
});
function handleConfigure(row: CabinetCellDTO) {
if (row.goodsId) {
currentCell.value = row;
@ -351,8 +361,12 @@ onMounted(() => {
@click="gatewayConfigVisible = true">
配置
</el-button></el-descriptions-item>
<el-descriptions-item label="借呗支付">{{ getBalanceEnableText(shopInfo.balanceEnable)
}}</el-descriptions-item>
<el-descriptions-item label="支付方式">
<el-tag v-for="method in currentPaymentMethods" :key="method.label" :type="method.type"
style="margin-right: 5px;">
{{ method.label }}
</el-tag>
</el-descriptions-item>
<!-- <el-descriptions-item label="商品模式">
{{ cabinetInfo.belongType === 0 ? '借还模式' : '固资模式' }}
</el-descriptions-item> -->
@ -419,9 +433,8 @@ onMounted(() => {
class="cell-btn">
格口配置
</el-button>
<el-button v-if="!item.goodsId && item.isRented && shopInfo && shopInfo.mode == 3"
link type="primary" @click="handleAb98ViewDetail(item.ab98UserId, item.name)"
class="cell-btn">
<el-button v-if="!item.goodsId && item.isRented && shopInfo && shopInfo.mode == 3" link type="primary"
@click="handleAb98ViewDetail(item.ab98UserId, item.name)" class="cell-btn">
{{ item.name }}
</el-button>
<!-- <el-button v-if="item.goodsId" type="warning" link :icon="useRenderIcon(EditPen)"