xc-app/pages/mine/collect.vue

<!-- 我的收藏 -->
<template>
	<view class="collect-page">
		<HeaderCom></HeaderCom>
		<view style="padding-top: 200rpx;" v-if="list.length === 0">
			<empty></empty>
		</view>
		<scroll-view @scrolltolower="lowerBottom" scroll-y="true" class="list" v-if="list.length > 0">
			<view class="item" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
				<view class="shop">
					<image :src="item.coverResource.url" mode="aspectFit" class="shop-icon"></image>
				</view>
				<view class="detail">
					<view class="name">{{item.name}}</view>
					<view class="opc">
						<view class="left">
							<view class="price">
								<text class="sym">¥ {{item.sellPrice}}</text>
							</view>
							<view class="shu"></view>
							<view class="point">
								<image src="@/static/an/point.gif" mode="" class="point-icon"></image>{{item.mallPoint}}
							</view>
						</view>
						<view class="cancel" @click.stop="cancel(item)">取消收藏</view>
					</view>
				</view>
			</view>
			<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
		</scroll-view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/mine/collect"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import { favorItemList,delFavorItem } from '@/API/shop.js'
	import { favorItemApi,favorItemDelApi } from '@/API/user.js'
	import HeaderCom from '@/pages/components/header.vue'
	export default{
	mixins: [myMixins],
		data(){
			return{
				list:[],
				page:1,
				total:0
			}
		},
		components:{
			HeaderCom
		},
		mounted() {
			this.getList()
		},
		methods:{
			goDetail(item){
				console.log(item)
				if(item.status === 0){
					this.$api.msg('该商品已下架')
					return
				}
				uni.navigateTo({
					url:`/pages/shop/detail?id=${item.productId}`
				})
			},
			// 跳转商城
			goShopping(){
				uni.switchTab({
					url:`/pages/product/product`
				})
			},
			getList(){
				uni.showLoading()
				favorItemApi({page:this.page,size:10}).then(res => {
					uni.hideLoading()
					if(res.code === 200){
						if(this.page > 1){
							this.list = [...this.list,...res.data.content]
						}else{
							this.list = res.data.content
						}
						this.total = res.data.total
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			lowerBottom(){
				if(this.total == this.list.length){
					return
				}
				this.page = this.page + 1;
				this.getList()
			},
			cancel(item){
				uni.showLoading()
				// favorItemProduct(`?ids=${item.id}`).then(res => {
				// 	uni.hideLoading()
				// 	if(res.code === 200){
				// 		this.$api.msg('取消收藏')
				// 		this.getList()
				// 	}else{
				// 		this.$api.msg(res.message)
				// 	}
				// }).catch(err => {
				// 	uni.hideLoading()
				// })
				// `?ids=${item.id}`
				favorItemDelApi({id:item.id}).then(res => {
					uni.hideLoading()
					if(res.code === 200){
						this.$api.msg('取消成功')
						this.getList()
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
	}
	.collect-page{
		padding-top: 112rpx;
		.list{
			height: calc(100vh - 112rpx);
			padding: 0 32rpx;
			.item{
				width: 686rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 24rpx;
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;
				.shop{
					width: 160rpx;
					height: 160rpx;
					border-radius: 34rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-image: url('@/static/new/shop-bg.png');
					background-size: contain;
					.shop-icon{
						width: 142rpx;
						height: 132rpx;
					}
				}
				.detail{
					margin-left: 24rpx;
					width: 454rpx;
					.name{
						width: 454rpx;
						height: 80rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.opc{
						margin-top: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							display: flex;
							align-items: center;
							.price{
								font-weight: 500;
								font-size: 32rpx;
								color: #0080FF;
								.sym{
									font-weight: bold;
									font-size: 24rpx;
								}
							}
							.shu{
								width: 2rpx;
								height: 24rpx;
								background: #D9D9D9;
								margin: 0 16rpx;
							}
							.point{
								display: flex;
								align-items: center;
								font-weight: 500;
								font-size: 32rpx;
								color: #000000;
								.point-icon{
									margin-right: 8rpx;
									width: 48rpx;
									height: 48rpx;
								}
							}
						}
						.cancel{
							width: 128rpx;
							height: 56rpx;
							background: #F5F5F5;
							border-radius: 8rpx;
							font-weight: bold;
							font-size: 24rpx;
							color: #666666;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}
	}
</style>