[新增] 完成我的收藏页面UI

pages.json

@@ -84,6 +84,12 @@
 				"navigationBarTitleText": "推荐",
 				"disableScroll": true
 			}
+		},
+		{
+			"path": "pages/collect/index",
+			"style": {
+				"navigationBarTitleText": "我的收藏"
+			}
 		}
 	],
 	"globalStyle": {

pages/collect/index.vue

@@ -0,0 +1,153 @@
+<template>
+	<view>
+		<view class="list-box">
+			<view class="lf-row-between list-item" v-for="(item, index) in list" :key="item.id">
+				<image class="goods-img" mode="aspectFill" :src="item.goods.cover" @click="enterDetail(index)"></image>
+				<view style="width: 458rpx;">
+					<view class="lf-font-28 lf-line-2" style="height: 80rpx;" @click="enterDetail(index)">{{ item.goods.name }}</view>
+					<view class="lf-m-t-15 lf-font-24 lf-color-gray">{{ item.created_at_text }}</view>
+					
+					<view class="lf-row-between lf-m-t-20">
+						<lf-price price="3599.00"></lf-price>
+						<view class="collect-btn" :class="{'cancel': index == 1}">
+							<u-icon name="lock-fill"></u-icon>
+							<text>{{ index == 1 ? '收藏' : '已收藏' }}</text>
+						</view>
+					</view>
+					
+				</view>
+			</view>
+		</view>
+		<!-- 加载 -->
+		<view class="loading-more">
+			<text v-if="list.length" :class="{'loading-more-text': loadingClass}">{{ loadingText }}</text>
+			<lf-nocontent v-else></lf-nocontent>
+		</view>
+		<!-- 回到顶部 -->
+		<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				list: [],
+				loadingClass: true,
+				loadingText: '正在加载中',
+				page: 1,
+				isPage: true,
+				pageSize: 20,
+				skeletonLoading: true
+			}
+		},
+		onLoad(){
+			this.getCollectList();
+		},
+		methods: {
+			getCollectList(){
+				this.list = [{
+					id: 1,
+					goods: {cover: '', name: '小毛驴', store: {name: '家具家电'}},
+					is_collect: true,
+					created_at_text: '2021.07.07'
+				},{
+					id: 2,
+					goods: {cover: '', name: '小毛驴', store: {name: '家具家电'}},
+					is_collect: true,
+					created_at_text: '2021.07.07'
+				}];
+				
+				return;
+				this.$http(this.API.API_COLLECT_LIST).then(res => {
+					this.skeletonLoading = false;
+					this.isPage = res.data.has_more_page;
+					let list = res.data.items.map(item => {
+						item.is_collect = true; // 默认都收藏了
+						return item;
+					});
+					if(!res.data.has_more_page){
+						this.loadingClass = false;
+						this.loadingText = '已显示全部数据~';
+					}
+					if(this.page == 1){
+						this.list = list;
+					}else{
+						this.list.push(...list);
+					}
+				}).catch(err => {
+					this.skeletonLoading = false;
+				})
+			},
+			// 切换收藏状态
+			switchCollect(index){
+				let goods_id = this.list[index].goods_id;
+				this.$http(this.API.API_COLLECT_DEAL, {goods_id}).then(res => {
+					this.list[index].is_collect = Boolean(res.data.user.is_collect);
+				})
+			},
+			// 进入商品详情页
+			enterDetail(index){
+				let goods_id = this.list[index].goods_id;
+				this.$url('/pages/goodsDetail/index?id='+ goods_id);
+			}
+		},
+		onReachBottom(){
+			if(this.isPage){
+				this.page = this.page + 1;
+				this.getCollectList();
+			}
+		},
+		onPullDownRefresh(){
+			this.page = 1;
+			this.isPage = true;
+			this.loadingClass = true;
+			this.loadingText = '正在加载中';
+			this.getCollectList();
+			uni.stopPullDownRefresh();
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.list-box{
+		width: 750rpx;
+		height: auto;
+		padding: 0 32rpx;
+		box-sizing: border-box;
+		.list-item{
+			border-bottom: 1rpx solid #EEEEEE;
+			padding: 30rpx 0;
+			align-items: flex-start;
+			.goods-img{
+				width: 210rpx;
+				height: 210rpx;
+				border-radius: 20rpx;
+				background-color: #EEEEEE;
+			}
+			.shop-img{
+				width: 50rpx;
+				height: 50rpx;
+				border-radius: 50%;
+			}
+			.shop-name{
+				width: 305rpx; 
+				color: #555555;
+			}
+		}
+	}
+	.collect-btn{
+		width: 155rpx;
+		height: 63rpx;
+		border-radius: 32rpx;
+		border: 2rpx solid #1998FE;
+		text-align: center;
+		line-height: 63rpx;
+		color: #1998FE;
+		font-size: 24rpx;
+	}
+	.cancel{
+		border: 2rpx solid #555555;
+		color: #555555;
+	}
+</style>