theluyuan/deming
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

loadmore 7.23

Browse Source
This commit is contained in:
ghusermoon
2020-07-23 20:58:56 +08:00
parent be9f2ec1c7
commit 59362ebc7c
12 changed files with 227 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
components/loadmore/index.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<view class="loadmore">
<u-loadmore :status="loadStatus" :bgColor="bgColor" margin-bottom="20"></u-loadmore>
</view>
</template>
<script>
/*
* @description 下拉加载
* @property {String} bgColor 背景色
* @property {Number} page 初始页码
* @event {Function} callback 下拉刷新请求的接口
**/
export default {
data() {
return {
loadStatus: 'loadmore',
timer: true,
tpage: Number,
}
},
props: {
bgColor: String,
page: Number,
},
created() {
this.tpage = this.page;
},
methods: {
reachBottom() {
if(!this.timer) return false;
this.loadStatus = "loading";
this.tpage++;
this.$emit('callback', { page: this.tpage });
// this.$emit('callback', { page: this.tpage }).then(length => {
// if(length == 0) {
// this.tpage--;
// this.status = 'nomore';
// } else {
// this.status = 'loading';
// }
// }).catch(() => {
// this.loadStatus = "nomore";
// this.tpage--;
// })
// this.$parent.callback({ page: this.tpage }).then(length => {
// if(length == 0) {
// this.tpage--;
// this.status = 'nomore';
// } else {
// this.status = 'loading';
// }
// }).catch(() => {
// this.loadStatus = "nomore";
// this.tpage--;
// })
}
}
};
</script>
<style lang="scss" scoped>
</style>

19
components/shop/group/index.vue
View File

@@ -8,7 +8,7 @@
<u-tabs-swiper ref="group" :list="classifyList" name="gc_name" :is-scroll="true" active-color="#FF780F" :current="current" font-size="24" :show-bar="false" @change="tabsChange" height="88"></u-tabs-swiper>
</view>
<swiper :current="swiperCurrent" @animationfinish="animationfinish" style="height: 130px">
<swiper-item class="swiper-item" v-for="(_, i) in classifyList" :key="i">
<swiper-item class="swiper-item list" v-for="(_, i) in classifyList" :key="i">
<!-- 最多显示3个 -->
<sitem :info="info" v-for="(info, index) in groupList.slice(0, 3)" :key="index"></sitem>
<u-empty text="暂无拼团商品" mode="list" color="#000" v-if="!groupList.length"></u-empty>
@@ -67,19 +67,18 @@ export default {
color: #999;
}
}
.label{
display: flex;
font-size: 24rpx;
color: #999;
>text{
margin-right: 34rpx;
}
}
// .label{
// display: flex;
// font-size: 24rpx;
// color: #999;
// >text{
// margin-right: 34rpx;
// }
// }
.list{
display: flex;
justify-content: space-between;
margin-top: 21rpx;
}
}
</style>

24
components/shop/group/item.vue
View File

@@ -3,8 +3,8 @@
<image class="head" :src="info.pintuan_image"></image>
<text class="title u-line-1">{{ info.pintuan_goods_name }}</text>
<view class="price">
<text>￥{{ info.pintuan_goods_price }}</text>
<text>立即购买</text>
<view>￥{{ info.pintuan_goods_price }}</view>
<view>立即拼团</view>
</view>
</view>
</template>
@@ -38,33 +38,33 @@ export default {
<style lang="scss" scoped>
.item{
width: 210rpx;
overflow: hidden;
.head{
width: 210rpx;
height: 131rpx;
border-radius: 6rpx;
}
.title{
display: inline-block;
width: 100%;
font-size: 26rpx;
color: #333;
margin-top: 16rpx;
margin-top: 10rpx;
}
.price{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 19rpx;
>text:first-child{
// display: flex;
// align-items: center;
// justify-content: space-between;
margin-top: 10rpx;
> view:first-child{
font-size: 26rpx;
color: #FF3131;
margin-bottom: 4rpx;
}
>text:last-child{
> view:last-child{
font-size: 22rpx;
color: #FDD360;
}
}
}
</style>

58
components/shop/list/index.vue
View File

@@ -16,10 +16,14 @@
<!-- </scroll-view> -->
</swiper-item>
</swiper>
<!-- 加载更多 -->
<u-loadmore :status="loadStatus" bgColor="#FFF" margin-top="20"></u-loadmore>
<!-- <loadmore ref="loadmore" @callback="getGoodsRecommend" bgColor="#FFF" :page="page"></loadmore> -->
</view>
</template>
<script>
import item from "./item"
import item from "./item";
import loadmore from "@/components/loadmore/index";
export default {
name:"list",
data() {
@@ -29,21 +33,48 @@ export default {
goodsList: [],
classifyList: [],
swiperHeight: '',
page: 1, // 从 1 开始
loadStatus: 'loadmore',
timer: true,
}
},
components:{
item
components: {
item,
loadmore
},
watch: {
current(index) {
const id = this.classifyList[index].gc_id;
this.getGoodsRecommend(id);
this.getGoodsRecommend({gc_id: id});
}
},
created() {
this.getGoodsClassRecommend();
},
methods: {
loadMore(page) {
if(!this.timer) return false;
this.loadStatus = "loading";
this.page++;
this.getGoodsRecommend({
gc_id: this.classifyList[this.current].gc_id,
page: this.page,
reload: false,
}).then(length => {
console.log(length);
if(length == 0) {
this.page--;
this.loadStatus = 'nomore';
} else {
this.loadStatus = 'loading';
}
}).catch(() => {
this.loadStatus = "nomore";
this.page--;
})
// this.$refs.loadmore.reachBottom();
// this.getGoodsRecommend(this.classifyList[this.current].gc_id);
},
getGoodsClassRecommend(gc_id) {
this.$u.api.getGoodsClassRecommend().then(res => {
if (res.errCode == 0) {
@@ -54,17 +85,18 @@ export default {
}
})
},
getGoodsRecommend(gc_id) {
this.$u.api.getGoodsRecommend({
page: 1,
async getGoodsRecommend({ page = this.page, gc_id, reload = true } = {}) {
const res = await this.$u.api.getGoodsRecommend({
page: page,
gc_id: gc_id,
}).then(res => {
if (res.errCode == 0) {
this.goodsList = res.data.goodsList;
// console.log(this.goodsList);
this.setSwiperHeight();
}
})
if (res.errCode == 0) {
if(reload) this.goodsList = res.data.goodsList;
else this.goodsList.push(...res.data.goodsList);
// console.log(this.goodsList);
this.setSwiperHeight();
}
return res.data.goodsList.length;
},
setSwiperHeight() {
// height: 230px, margin-bottom: 13

2
components/shop/list/item.vue
View File

@@ -16,7 +16,7 @@ export default {
},
methods: {
toDetailsPage() {
this.$u.api.getGoodsDetails({ id: this.info.goods_id }).then((res)=>{
this.$u.api.getGoodsDetails({ id: this.info.goods_id }).then(res => {
if (res.errCode == 0) {
const goods = {
goods: res.data,