xc-app/pages/mine/collect copy.vue

<!-- 我的收藏 -->
<template>
	<view class="collect-page">
		<NavCom title="我的收藏"></NavCom>
		<!-- <emptyCom title="您当前暂无收藏产品，快去逛逛商城吧" v-if="list.length === 0">
			<view class="empty-btn" @click="goShopping">去逛商城</view>
		</emptyCom> -->
		<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">
			<template v-for="(item,index) in list">
				<view class="list-item" :key="index" @click="goDetail(item)">
					<image class="item-img" :src="item.coverResource.url" mode=""></image>
					<view class="shop-info">
						<view class="shop-name">{{item.name}}</view>
						<view class="shop-footer">
							<view class="footer-price">
								<view class="price">¥{{item.sellPrice}}</view>
								<view class="shu"></view>
								<view class="point">
									<image src="@/static/mine/jf.png" mode="" class="point-img"></image>
									{{item.mallPoint}}
								</view>
							</view>
							<view class="cancel" @click.stop="cancel(item)">取消收藏</view>
						</view>
					</view>
				</view>
			</template>
			<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
		</scroll-view>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import { favorItemList,delFavorItem } from '@/API/shop.js'
	import { favorItemApi,favorItemDelApi } from '@/API/user.js'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight
	import NavCom from '@/pages/components/nav.vue'
	export default{
	mixins: [myMixins],
		data(){
			return{
				statusBarHeight,
				list:[],
				page:1,
				total:0
			}
		},
		components:{
			NavCom
		},
		mounted() {
			this.getList()
		},
		methods:{
			goDetail(item){
				console.log(item)
				if(item.status === 0){
					this.$api.msg('该商品已下架')
					return
				}
				uni.navigateTo({
					url:`/pages/product/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-image: url('@/static/index/bg.png');
		background-size: 100%;
	}
	.collect-page{
		.empty-btn{
			margin-top: 60rpx;
			width: 324rpx;
			height: 100rpx;
			background: #70E3DE;
			border-radius: 50rpx;
			font-size: 32rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.list{
			padding-top: 130rpx;
			height: 100vh;
			// padding: 20rpx 32rpx;
			.list-item{
				width: 706rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				padding: 25rpx 34rpx 16rpx 19rpx;
				margin-bottom: 19rpx;
				margin-left: 22rpx;
				position: relative;
				.item-img{
					width: 159rpx;
					height: 159rpx;
					background-repeat: no-repeat;
					background-size: 100%;
					background-position: 50%;
					border-radius: 10rpx;
				}
				.shop-info{
					margin-left: 29rpx;
					.shop-name{
						width: 439rpx;
						height: 69rpx;
						font-size: 26rpx;
						color: #333333;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
					.shop-footer{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 50rpx;
						.footer-price{
							display: flex;
							align-items: center;
							.price{
								font-weight: bold;
								font-size: 28rpx;
								color: #F04236;
							}
							.shu{
								width: 1rpx;
								height: 24rpx;
								border-left: 1rpx solid #C9C9C9;
								margin: 0 17rpx;
							}
							.point{
								font-weight: 300;
								font-size: 24rpx;
								color: #888888;
								display: flex;
								align-items: center;
								.point-img{
									margin-right: 8rpx;
									width: 30rpx;
									height: 31rpx;
								}
							}
						}
						.cancel{
							width: 133rpx;
							height: 48rpx;
							border-radius: 24rpx;
							border: 1px solid #F04134;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 21rpx;
							color: #F04236;
						}
					}
					.clover{
						display: flex;
						align-items: center;
						margin-top: 36rpx;
						font-size: 20rpx;
						color: #8EE3D1;
						.clover-img{
							width: 36rpx;
							height: 36rpx;
							margin-right: 6rpx;
						}
					}
					.shop-price{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 6rpx;
						.price{
							color: #ED2C52;
							font-size: 36rpx;
							// display: flex;
							// align-items: center;
							.price-symbol{
								font-size: 24rpx;
							}
						}
						.cancel{
							z-index: 11;
							font-size: 28rpx;
							color: #666666;
							border: 2rpx solid #D3D2D8;
							width: 158rpx;
							height: 60rpx;
							border-radius: 30rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}
	}
</style>