264 lines
7.5 KiB
Vue
264 lines
7.5 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { onMounted, ref } from "vue";
|
|||
|
|
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
|||
|
|
import { getShopList, type ShopDTO, ShopQuery, getModeText, getBalanceEnableText } from "@/api/shop/shop";
|
|||
|
|
import { type PaginationProps } from "@pureadmin/table";
|
|||
|
|
import { useRouter } from "vue-router";
|
|||
|
|
import { useWxStore } from "@/store/modules/wx";
|
|||
|
|
|
|||
|
|
import Search from "@iconify-icons/ep/search";
|
|||
|
|
import Refresh from "@iconify-icons/ep/refresh";
|
|||
|
|
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";
|
|||
|
|
const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;
|
|||
|
|
|
|||
|
|
defineOptions({
|
|||
|
|
name: "ShopCard"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const router = useRouter();
|
|||
|
|
const wxStore = useWxStore();
|
|||
|
|
const formRef = ref();
|
|||
|
|
const modalVisible = ref(false);
|
|||
|
|
const currentRow = ref<ShopDTO | null>(null);
|
|||
|
|
const searchFormParams = ref<ShopQuery>({
|
|||
|
|
shopName: "",
|
|||
|
|
corpid: wxStore.corpid
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const pageLoading = ref(false);
|
|||
|
|
const dataList = ref<ShopDTO[]>([]);
|
|||
|
|
const pagination = ref<PaginationProps>({
|
|||
|
|
total: 0,
|
|||
|
|
pageSize: 12,
|
|||
|
|
currentPage: 1,
|
|||
|
|
background: true
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
async function onSearch() {
|
|||
|
|
pagination.value.currentPage = 1;
|
|||
|
|
getList();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function getList() {
|
|||
|
|
try {
|
|||
|
|
pageLoading.value = true;
|
|||
|
|
const { data } = await getShopList({
|
|||
|
|
...searchFormParams.value,
|
|||
|
|
corpid: wxStore.corpid,
|
|||
|
|
pageSize: pagination.value.pageSize,
|
|||
|
|
pageNum: pagination.value.currentPage
|
|||
|
|
});
|
|||
|
|
dataList.value = data.rows;
|
|||
|
|
pagination.value.total = data.total;
|
|||
|
|
} finally {
|
|||
|
|
pageLoading.value = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const resetForm = formEl => {
|
|||
|
|
if (!formEl) return;
|
|||
|
|
formEl.resetFields();
|
|||
|
|
onSearch();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleViewDetail = (row: ShopDTO) => {
|
|||
|
|
currentRow.value = row;
|
|||
|
|
modalVisible.value = true;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
function getModeType(mode: number): "" | "success" | "warning" | "info" | "danger" {
|
|||
|
|
switch (mode) {
|
|||
|
|
case 0: return 'success';
|
|||
|
|
case 1: return 'info';
|
|||
|
|
case 2: return 'warning';
|
|||
|
|
case 3: return 'danger';
|
|||
|
|
default: return '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getBalanceType(enable: number): "" | "success" | "warning" | "info" | "danger" {
|
|||
|
|
return enable == 1 ? 'success' : 'danger';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
getList();
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="main">
|
|||
|
|
<div class="float-right w-full">
|
|||
|
|
<el-form ref="formRef" :inline="true" :model="searchFormParams"
|
|||
|
|
class="search-form bg-bg_color flex w-[99/100] pl-[22px] pt-[12px]">
|
|||
|
|
<el-form-item label="" prop="shopName">
|
|||
|
|
<el-input @keydown.enter.prevent="onSearch" v-model="searchFormParams.shopName" placeholder="请输入地址名称"
|
|||
|
|
clearable class="!w-[200px]" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" :icon="useRenderIcon(Search)" :loading="pageLoading" @click="onSearch">
|
|||
|
|
搜索
|
|||
|
|
</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item class="space-item">
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" :icon="useRenderIcon(AddFill)" @click="modalVisible = true; currentRow = null"
|
|||
|
|
style="margin-right: 10px;">
|
|||
|
|
新增地址
|
|||
|
|
</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
|
|||
|
|
<div class="grid-container">
|
|||
|
|
<el-row :gutter="12">
|
|||
|
|
<el-col v-for="(item, index) in dataList" :key="item.shopId" :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
|
|||
|
|
<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">
|
|||
|
|
<!-- 背景：浅灰色填充，模拟图片容器 -->
|
|||
|
|
<rect width="100%" height="100%" fill="#f8f8f8" rx="4" ry="4" /> <!-- 可选圆角，适配卡片风格 -->
|
|||
|
|
<!-- 图片图标：简化的“图片”符号（矩形+交叉线），直观关联“图片” -->
|
|||
|
|
<g stroke="#ccc" stroke-width="2" fill="none">
|
|||
|
|
<rect x="20" y="10" width="120" height="65" /> <!-- 图片框 -->
|
|||
|
|
<line x1="20" y1="10" x2="140" y2="75" /> <!-- 对角线1 -->
|
|||
|
|
<line x1="140" y1="10" x2="20" y2="75" /> <!-- 对角线2 -->
|
|||
|
|
</g>
|
|||
|
|
<!-- 说明文字：明确提示“未设置图片”，居中对齐 -->
|
|||
|
|
<text x="50%" y="92" font-size="12" fill="#888" text-anchor="middle" font-family="Arial, sans-serif">
|
|||
|
|
未设置图片
|
|||
|
|
</text>
|
|||
|
|
</svg>
|
|||
|
|
|
|||
|
|
<el-descriptions class="cabinet-info" :column="1">
|
|||
|
|
<!-- <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>
|
|||
|
|
</div>
|
|||
|
|
<el-divider class="divider" />
|
|||
|
|
<el-button class="detail-btn" link @click="handleViewDetail(item)">
|
|||
|
|
{{ item.shopName }}
|
|||
|
|
</el-button>
|
|||
|
|
</el-card>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<div class="pagination-wrapper">
|
|||
|
|
<el-pagination background layout="prev, pager, next" :page-size="pagination.pageSize"
|
|||
|
|
:total="pagination.total" v-model:current-page="pagination.currentPage" @current-change="getList"
|
|||
|
|
@size-change="getList" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<shop-form-modal v-model:visible="modalVisible" :row="currentRow" @refresh="getList" />
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.search-form {
|
|||
|
|
:deep(.el-form-item) {
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
margin-right: 12px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-descriptions__cell) {
|
|||
|
|
padding-bottom: 1px !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cabinet-card {
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
min-height: 190px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.cabinet-image {
|
|||
|
|
width: 50%;
|
|||
|
|
height: 130px;
|
|||
|
|
padding: 0 3px;
|
|||
|
|
object-fit: contain;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-content {
|
|||
|
|
flex: 1;
|
|||
|
|
margin: 0px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
|
|||
|
|
.cabinet-info {
|
|||
|
|
text-align: left;
|
|||
|
|
padding: 16px 0px;
|
|||
|
|
|
|||
|
|
.name,
|
|||
|
|
.type,
|
|||
|
|
.shop,
|
|||
|
|
.location,
|
|||
|
|
.template {
|
|||
|
|
width: 100%;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #606266;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
line-height: 1;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.name {
|
|||
|
|
width: 100%;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #303133;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.divider {
|
|||
|
|
margin: 5px 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-btn {
|
|||
|
|
width: 100%;
|
|||
|
|
border: 0;
|
|||
|
|
margin-top: auto;
|
|||
|
|
padding: 8px 0;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
color: var(--el-color-primary);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-container {
|
|||
|
|
margin: 12px 0;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.el-row {
|
|||
|
|
margin-bottom: -20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination-wrapper {
|
|||
|
|
position: relative;
|
|||
|
|
background: var(--el-bg-color);
|
|||
|
|
padding: 8px 12px;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
:deep(.el-pagination) {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 4px 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.space-item {
|
|||
|
|
flex: 1;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
</style>
|