LJH_Shop/web/app/pages/member/collect.vue

<template>
    <div class="w-full min-h-[70vh]  bg-page pt-6">
        <div class="main-container flex justify-between" >
            <sidebar></sidebar>
            <el-card class="box-card flex-1 ml-4" shadow="never" v-loading="goodsTableData.loading">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
                    <el-tab-pane :label="t('productCollection')" name="product"></el-tab-pane>
                    <el-tab-pane :label="t('storeCollection')" name="store"></el-tab-pane>
                </el-tabs>
                <div v-if="activeName == 'product'">
                    <div v-if="goodsTableData.data.length && !goodsTableData.loading">
                        <div class="flex flex-wrap min-h-[500px]">
                            <template v-for="(item,index) in goodsTableData.data" :key="index">
                                <div class="w-[224px] p-[16px] bg-[#fff] h-[344px] mb-[20px] cursor-pointer goods-item border-[1px] border-solid border-[#efefef]" :class="{'mr-[20px]': (index + 1) % 5 }" @click="toGoodsDetail(item.goods.goods_id)">
                                    <div class="w-[192px] h-[192px]">
                                        <el-image class="w-[192px] h-[192px]" :src="img(item.goods_cover_thumb_mid ? item.goods_cover_thumb_mid : '')" fit="cover" />
                                    </div>
                                    <div class="mt-[12px] font-bold text-[22px] text-[var(--el-color-primary)]">¥{{item.goods_sku.price}}</div>
                                    <div class="mt-[12px] flex items-center multi-hidden text-[14px] leading-[20px] text-[#5a5a5a] h-[40px]">
                                        {{item.goods_name}}
                                    </div>
                                    <div class="flex justify-between items-center mt-[12px]">
                                        <div class="flex items-center">
                                            <span class="iconfont icon-Vector-25 text-[#999] mr-[6px]"></span>
                                            <span v-if="item.site" class="text-[14px] text-[#999] max-w-[100px] truncate">{{ item.site.site_name}}</span>
                                        </div>
                                        <span title="取消收藏" class="text-[16px] text-[var(--el-color-primary)] iconfont icon-yishoucang cursor-pointer" @click.stop="cancelCollectGoods(item.goods.goods_id)"></span>
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div class="mt-[16px] flex justify-end">
                            <el-pagination v-model:current-page="goodsTableData.page" v-model:page-size="goodsTableData.limit" layout="total, sizes, prev, pager, next, jumper" :total="goodsTableData.total" @size-change="loadGoodsList()" @current-change="loadGoodsList" />
                        </div>
                    </div>
                    <div class="min-h-[300px]" v-if="!goodsTableData.data.length && !goodsTableData.loading">
                        <el-empty description="暂无数据" :image-size="200" :image="img('static/resource/images/system/empty.png')"/>
                    </div>
                </div>
                <div v-if="activeName == 'store'">
                    <div v-if="shopTableData.data.length">
                        <div class="flex flex-wrap">
                            <template v-for="(item,index) in shopTableData.data" :key="index">
                                <div class="px-[15px] flex flex-col items-center justify-center w-[210px] h-[240px] box-border border-[1px] border-solid border-[#efefef]" :class="{'mr-[20px]': (index + 1)% 3}">
                                    <div class="w-[61px] h-[61px] mt-[30px] mb-[15px]">
                                        <img :src="img(item.site.icon)" class="max-h-[61px] max-w-full align-middle"  v-if="item.site.icon"/>
                                        <img src="@/assets/images/shop_default.png" class="max-h-[61px] max-w-full align-middle"  v-else/>
                                    </div>
                                    <div class="font-700 text-[#333] text-[16px]">{{item.site.site_name}}</div>
                                    <div class="mt-[20px] w-[100%] px-[12px] flex items-center justify-between">
                                        <el-button link @click="toShopDetail(item.site.site_id)">进店逛逛</el-button>
                                        <div class="w-[1px] h-[20px] bg-[#f3f3f3]"></div>
                                        <el-button link @click="cancelCollectShop(item.site.site_id,0)">取消关注</el-button>
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div class="mt-[16px] flex justify-end">
                            <el-pagination v-model:current-page="shopTableData.page" v-model:page-size="shopTableData.limit" layout="total, sizes, prev, pager, next, jumper" :total="shopTableData.total" @size-change="loadShopList()" @current-change="loadShopList" />
                        </div>
                    </div>
                    <div class="min-h-[300px]" v-if="!shopTableData.data.length">
                        <el-empty description="暂无数据" :image-size="200" :image="img('static/resource/images/system/empty.png')"/>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { UploadProps } from 'element-plus'
import { getCollectList, cancelCollect} from '@/addon/mall/api/goods'
import { getShopFollowList , editShopCollect} from '@/addon/mall/api/shop'
import { useRouter } from 'vue-router'

const router = useRouter()
const activeName = ref('product')
// 获取会员列表
const goodsTableData = reactive({
    page: 1,
    limit: 10,
    total: 0,
    loading: true,
    data: []
})
const loadGoodsList = (page: number = 1) => {
    goodsTableData.loading = true
    goodsTableData.page = page

    getCollectList({
        page: goodsTableData.page,
        limit: goodsTableData.limit,
    }).then(res => {
        goodsTableData.loading = false
        goodsTableData.data = res.data.data
        goodsTableData.total = res.data.total
    }).catch(() => {
        goodsTableData.loading = false
    })
}
loadGoodsList()
// 获取店铺列表
const shopTableData = reactive({
    page: 1,
    limit: 10,
    total: 0,
    loading: true,
    data: []
})
const loadShopList = (page: number = 1) => {
    shopTableData.loading = true
    shopTableData.page = page

    getShopFollowList({
        page: shopTableData.page,
        limit: shopTableData.limit,
    }).then(res => {
        shopTableData.loading = false
        shopTableData.data = res.data.data
        shopTableData.total = res.data.total
    }).catch(() => {
        shopTableData.loading = false
    })
}
loadShopList()

const handleClick = (event:any) => {
    activeName.value = event
}

// 店铺详情
const toShopDetail = (id:any) => {
	router.push(`/shop/detail?site_id=${id}`)
}
// 店铺取消关注
const cancelCollectShop = (id:any,is_follow:any) =>{
    editShopCollect({
		site_id: id,
		is_follow: is_follow
	}).then(res => {
        loadShopList()
    })
}

// 商品详情
const toGoodsDetail = (goods_id:number) => {
	router.push(`/goods/detail?id=${goods_id}`)
}
// 商品取消收藏
const cancelCollectGoods= (goods_id:number)=>{
    cancelCollect(goods_id).then(res => {
        loadGoodsList()
    })
}

</script>

<style lang="scss" scoped>
.box-card{
    border: none !important;
}
.text-color{
    color: var(--jjext-color-brand);
}
</style>