You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
2.3 KiB
105 lines
2.3 KiB
6 months ago
|
<script setup lang="ts">
|
||
|
|
import { collectMerchantApi } from '~/server/userApi'
|
||
|
|
import { PageQuery } from '~/types/global'
|
||
|
|
import { reactive, ref } from 'vue'
|
||
|
|
import MerchantList from '~/components/merchantList.vue'
|
||
|
|
|
||
|
|
const isShowFollow = ref<boolean>(true)
|
||
|
|
/**
|
||
|
|
* 收藏列表
|
||
|
|
*/
|
||
|
|
const where = reactive<PageQuery>({
|
||
|
|
page: 1,
|
||
|
|
limit: 12,
|
||
|
|
})
|
||
|
|
const {
|
||
|
|
data: tableData,
|
||
|
|
refresh,
|
||
|
|
pending: listLoading,
|
||
|
|
} = await useAsyncData(async () => collectMerchantApi(where), {
|
||
|
|
default: () => ({
|
||
|
|
list: [],
|
||
|
|
total: 0,
|
||
|
|
}),
|
||
|
|
})
|
||
|
|
// 分页数据
|
||
|
|
const pageChange = (e: number) => {
|
||
|
|
where.page = e
|
||
|
|
refresh()
|
||
|
|
}
|
||
|
|
|
||
|
|
const getIsCollect = () => {
|
||
|
|
refresh()
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="collect h-100%">
|
||
|
|
<div class="acea-row header mb-25px">
|
||
|
|
<div class="font18">全部店铺({{ tableData.total }})</div>
|
||
|
|
</div>
|
||
|
|
<div v-loading="listLoading">
|
||
|
|
<div v-if="tableData.total>0">
|
||
|
|
<div class="collect-mer">
|
||
|
|
<merchant-list
|
||
|
|
:list="tableData.list"
|
||
|
|
@handleSubmitSuccess="refresh"
|
||
|
|
:isShowFollow="isShowFollow"
|
||
|
|
></merchant-list>
|
||
|
|
</div>
|
||
|
|
<div class="acea-row row-middle mt-20px">
|
||
|
|
<el-pagination
|
||
|
|
background
|
||
|
|
layout="prev, pager, next"
|
||
|
|
:total="tableData.total"
|
||
|
|
class="page-item"
|
||
|
|
:page-size="where.limit"
|
||
|
|
:current-page="where.page"
|
||
|
|
@update:current-page="pageChange"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else class="w-100% h-96%">
|
||
|
|
<empty-page title="暂无收藏呦~">
|
||
|
|
<template v-slot:emptyImage>
|
||
|
|
<img src="@/assets/images/wushoucang.png">
|
||
|
|
</template>
|
||
|
|
</empty-page>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.collect-mer{
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(4, 1fr);
|
||
|
|
grid-row-gap: 15px;
|
||
|
|
grid-column-gap: 15px;
|
||
|
|
grid-template-rows: auto;
|
||
|
|
}
|
||
|
|
@import '@/assets/scss/checkbox.scss';
|
||
|
|
.top-20px {
|
||
|
|
top: 20px !important;
|
||
|
|
left: 10px !important;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
.smegma {
|
||
|
|
background-color: rgba(0, 0, 0, 0.2);
|
||
|
|
transition: opacity 0.5s ease-in-out;
|
||
|
|
width: 228px;
|
||
|
|
height: 100%;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 999;
|
||
|
|
}
|
||
|
|
.allSelect {
|
||
|
|
/*width: 90px;*/
|
||
|
|
margin-left: 20px;
|
||
|
|
margin-right: 20px;
|
||
|
|
position: relative;
|
||
|
|
.checkAll {
|
||
|
|
margin-left: 30px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|