You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
3.0 KiB
122 lines
3.0 KiB
<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" :src="item.goods.cover" @click="enterDetail(index)"></image>
|
|
<view style="width: 480rpx;">
|
|
<view class="lf-font-32 lf-line-1" @click="enterDetail(index)">{{ item.goods.name }}</view>
|
|
<view class="lf-row-between lf-m-t-20">
|
|
<view class="lf-flex">
|
|
<image class="shop-img" :src="item.goods.store.cover"></image>
|
|
<view class="lf-m-l-10 lf-font-28 lf-line-1 shop-name">{{ item.goods.store.name }}</view>
|
|
</view>
|
|
<view @click="switchCollect(index)">
|
|
<u-icon name="heart-fill" color="#ff0f00" v-if="item.is_collect"></u-icon>
|
|
<u-icon name="heart" v-else></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="lf-m-t-20 lf-font-24 lf-color-gray">{{ item.created_at_text }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 加载 -->
|
|
<view class="loading-more">
|
|
<text v-if="list.length" :class="{'loading-more-text': loadingClass}">{{ loadingText }}</text>
|
|
<my-nocontent v-else></my-nocontent>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return {
|
|
list: [],
|
|
loadingClass: true,
|
|
loadingText: '正在加载中',
|
|
page: 1,
|
|
isPage: true,
|
|
pageSize: 20
|
|
}
|
|
},
|
|
onLoad(){
|
|
this.getCollectList();
|
|
},
|
|
methods: {
|
|
getCollectList(){
|
|
// TODO 接口传参
|
|
this.$http(this.API.API_COLLECT_LIST).then(res => {
|
|
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);
|
|
}
|
|
})
|
|
},
|
|
// 切换收藏状态
|
|
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;
|
|
.goods-img{
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
border-radius: 20rpx;
|
|
background-color: #EEEEEE;
|
|
}
|
|
.shop-img{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #EEEEEE;
|
|
}
|
|
.shop-name{
|
|
width: 340rpx;
|
|
color: #555555;
|
|
}
|
|
}
|
|
}
|
|
</style>
|