LJH_Shop/niucloud/addon/mall/uni-app/pages/collect/index.vue

<template>
	<view class="bg-[#F6F6F6] min-h-screen overflow-hidden order-list" :style="themeColor()">
		<view class="fixed left-0 top-0 right-0 z-10 box-border px-[30rpx] bg-white">
            <view class="flex whitespace-nowrap justify-between">
				<view :class="['text-[28rpx] leading-[90rpx] flex-1 text-center', { 'class-select': collectState === item.status}]" @click="orderStateFn(item.status)" v-for="(item, index) in collectList">{{ item.name }}</view>
			</view>
		</view>

		<mescroll-body ref="mescrollRef" top="90rpx" @init="mescrollInit" @down="downCallback" @up="getCollectFn">
			<view class="mx-[30rpx] mt-[20rpx]" v-if="list.length">
				<view v-if="collectState == 'goods'">
                    <template v-for="(item, index) in list" :key="index">
                        <view class="mb-[20rpx] bg-[#fff] p-[20rpx] rounded-[16rpx]">
                            <view class="flex box-border" @click="toLink(item.goods.goods_id)">
                                <view class="w-[150rpx] h-[150rpx]">
                                    <u--image class="rounded-[10rpx] overflow-hidden" width="150rpx" height="150rpx" :src="img(item.goods.goods_cover ? item.goods.goods_cover : '')" model="aspectFill">
                                        <template #error>
                                            <u-icon name="photo" color="#999" size="50"></u-icon>
                                        </template>
                                    </u--image>
                                </view>
                                <view class="ml-[20rpx] flex flex-1 flex-col justify-between box-border">
                                    <view class="text-[28rpx] text-item  leading-[40rpx] text-[#303133]">
                                        {{ item.goods_name }}
                                    </view>
									<view class="flex justify-end items-center">
										<view @click.stop="cancelCollectGoods(item.goods.goods_id)">
											<u-button :customStyle="{width:'150rpx',height:'56rpx',color:'#333', fontSize:'24rpx',lineHeight:'56rpx',margin:'0rpx'}" shape="circle" :text="t('uncollect')"></u-button>
										</view>
									</view>
                                </view>
                            </view>
                        </view>
                    </template>
                </view>
                <view v-else>
                    <template v-for="(item, index) in list" :key="index">
                        <view class="mb-[20rpx] bg-[#fff] p-[20rpx] rounded-[16rpx] flex justify-between items-center box-border" @click="toShopDetail(item.site.site_id)">
                            <view class="flex items-center">
                                <u--image class="rounded-[10rpx] overflow-hidden" width="60rpx" height="60rpx" :src="img(item.site.icon ? item.site.icon : '')" model="aspectFill">
                                    <template #error>
                                        <u-icon name="photo" color="#999" size="20"></u-icon>
                                    </template>
                                </u--image>
                                <view class="ml-[20rpx]">{{item.site.site_name}}</view>
                            </view>
							<view @click.stop="cancelCollectShop(item.site.site_id,0)">
								<u-button :customStyle="{width:'150rpx',height:'56rpx',color:'#333', fontSize:'24rpx',lineHeight:'56rpx',margin:'0rpx'}" shape="circle" :text="t('followed')"></u-button>
							</view>
                        </view>
                    </template>
                </view>
			</view>
			<mescroll-empty :option="{tip : '暂无数据'}" v-if="!list.length && loading"></mescroll-empty>
		</mescroll-body>
		
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { t } from '@/locale'
import { img, redirect } from '@/utils/common';
import { getCollectList, cancelCollect } from '@/addon/mall/api/goods';
import { getShopFollowList , editShopCollect} from '@/addon/mall/api/shop';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
let list = ref<Array<Object>>([]);
let loading = ref<boolean>(false);
let collectState = ref('goods')
let collectList = ref([{ name: '商品',status: 'goods'},{ name: '店铺',status: 'shop'}]);

const getCollectFn = (mescroll) => {
	loading.value = false;
	let data: object = {
		page: mescroll.num,
		limit: mescroll.size
	};
    const api = collectState.value == 'goods' ? getCollectList : getShopFollowList
	api(data).then((res) => {
		let newArr = (res.data.data as Array<Object>);
		//设置列表数据
		if (mescroll.num == 1) {
			list.value = []; //如果是第一页需手动制空列表
		}
		list.value = list.value.concat(newArr);
		mescroll.endSuccess(newArr.length);
		loading.value = true;
	}).catch(() => {
		loading.value = true;
		mescroll.endErr(); // 请求失败, 结束加载
	})
}

const orderStateFn = (status) => {
	collectState.value = status
	list.value = [];
	getMescroll().resetUpScroll();
};

// 取消店铺关注
const cancelCollectShop = (id:any,is_follow:any) =>{
    editShopCollect({
		site_id: id,
		is_follow: is_follow
	}).then(res => {
        list.value = [];
	    getMescroll().resetUpScroll();
    })
}
// 商品取消收藏
const cancelCollectGoods= (goods_id:number)=>{
    cancelCollect(goods_id).then(res => {
        list.value = [];
	    getMescroll().resetUpScroll();
    })
}
//进入店铺
const toShopDetail = (id) => {
	redirect({ url: '/app/pages/site/index', param: { site_id: id } })
}
// 商品详情
const toLink = (id) => {
	redirect({ url: '/addon/mall/pages/goods/detail', param: { goods_id: id } })
}
</script>
<style>
.order-list .mescroll-body {
	padding-bottom: constant(safe-area-inset-bottom) !important;
	padding-bottom: env(safe-area-inset-bottom) !important;
}
</style>
<style lang="scss" scoped>
.text-item {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.font-scale {
	transform: scale(0.75);
}

.text-color {
	color: var(--primary-color);
}

.bg-color {
	background-color: var(--primary-color);
}

.class-select {
	position: relative;
	font-weight: 500;
	color: var(--primary-color);
	&::before {
		content: "";
		position: absolute;
		bottom: 0;
		height: 4rpx;
		border-radius: 4rpx;
		background-color: var(--primary-color);
		width: 40rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}
.noData{
	height: calc(100vh - 130rpx - constant(safe-area-inset-bottom));
	height: calc(100vh - 130rpx - env(safe-area-inset-bottom));
 }
</style>