feat(智能柜详情): 添加支付方式显示功能
在智能柜详情页面中,新增计算属性 currentPaymentMethods 用于根据店铺模式显示对应的支付方式标签。替换原有的借呗支付显示为多种支付方式的标签展示,提升用户体验。
This commit is contained in:
parent
363721b0c2
commit
1855bca307
|
@ -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)"
|
||||
|
|
Loading…
Reference in New Issue