mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-12 20:08:59 +08:00
88fc1b0b2a
- buyer(95) / seller(169) / im(53) / manager(280) 共 597 个组件全部从 Options API 转换为 <script setup> - 四端 vuex 全部移除，状态管理统一迁移至 pinia 4（stores/ 目录） - util.js 等基础设施去除 vm 首参依赖；全局属性（$Message/$filters 等）在 script 内改为具名导入 - 被外部 ref 访问的公共组件均已补齐 defineExpose（清单见各端 MIGRATION-VUE3.md） - 各端 eslint 启用 vue/component-api-style 防止新代码回退 Options API - 四端 yarn build 全部通过；迁移约定与注意事项已更新至各端 MIGRATION-VUE3.md
132 lines
3.2 KiB
Vue
132 lines
3.2 KiB
Vue
<template>
|
|
<div class="shop">
|
|
<div class="wap-content">
|
|
<div class="query-wrapper">
|
|
<div class="query-item">
|
|
<div>店铺名称</div>
|
|
<el-input
|
|
v-model="params.storeName"
|
|
placeholder="请输入店铺名称"
|
|
clearable
|
|
style="width: 150px"
|
|
@clear="resetSearch"
|
|
@keyup.enter="resetSearch"
|
|
/>
|
|
</div>
|
|
<div class="query-item">
|
|
<el-button type="primary" @click="resetSearch">搜索</el-button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div v-loading="loading" class="wap-content-list">
|
|
<div
|
|
v-for="(item, index) in shopsData"
|
|
:key="index"
|
|
class="wap-content-item"
|
|
:class="{ active: selected == index }"
|
|
@click="clickShop(item, index)"
|
|
>
|
|
<div>
|
|
<img class="shop-logo" :src="item.storeLogo" alt="" />
|
|
</div>
|
|
<div class="wap-content-desc">
|
|
<div class="wap-content-desc-title">{{ item.storeName }}</div>
|
|
<div class="self-operated" :class="{ theme_color: item.selfOperated }">
|
|
{{ item.selfOperated ? "自营" : "非自营" }}
|
|
</div>
|
|
<div
|
|
class="wap-sku"
|
|
:class="{ theme_color: item.storeDisable === 'OPEN' }"
|
|
>
|
|
{{ item.storeDisable === "OPEN" ? "开启中" : "未开启" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-pagination
|
|
v-model:current-page="params.pageNumber"
|
|
class="pageration"
|
|
size="small"
|
|
layout="total, prev, pager, next, jumper"
|
|
:total="total"
|
|
:page-size="params.pageSize"
|
|
@current-change="changePageSize"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { reactive, ref } from "vue";
|
|
import { getShopListData } from "@/api/shops.js";
|
|
|
|
const emit = defineEmits(["selected"]);
|
|
|
|
const loading = ref(false);
|
|
const total = ref(0);
|
|
const params = reactive({
|
|
pageNumber: 1,
|
|
pageSize: 12,
|
|
storeDisable: "OPEN",
|
|
storeName: "",
|
|
});
|
|
const shopsData = ref([]);
|
|
const selected = ref(9999999999);
|
|
|
|
// created
|
|
init();
|
|
|
|
function resetSearch() {
|
|
shopsData.value = [];
|
|
params.pageNumber = 1;
|
|
init();
|
|
}
|
|
function changePageSize(v) {
|
|
params.pageNumber = v;
|
|
init();
|
|
}
|
|
function init() {
|
|
loading.value = true;
|
|
getShopListData(params).then((res) => {
|
|
if (res.success) {
|
|
total.value = res.result.total;
|
|
shopsData.value = res.result.records;
|
|
}
|
|
loading.value = false;
|
|
});
|
|
}
|
|
function clickShop(val, i) {
|
|
selected.value = i;
|
|
val = { ...val, ___type: "shops" };
|
|
emit("selected", [val]);
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import "../style.scss";
|
|
.shop {
|
|
display: flex;
|
|
}
|
|
.self-operated {
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
.wap-content-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
height: 340px;
|
|
min-height: 120px;
|
|
}
|
|
.shop-logo {
|
|
object-fit: cover;
|
|
}
|
|
.active {
|
|
background: url("../../../assets/selected.png") no-repeat;
|
|
background-position: right;
|
|
background-size: 10%;
|
|
}
|
|
.pageration {
|
|
margin-top: 12px;
|
|
justify-content: flex-end;
|
|
}
|
|
</style>
|