loadmore 7.23

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

View File

@ -11,6 +11,7 @@ const store = new Vuex.Store({
goods_id: '', // 拼团商品 id
pintuangroup_headid: '', // 拼团团长id 有为开团 无为参团
groupbuyInfo: {}, // 秒杀详情
loadmore: {}, // 下拉加载返回的数据
},
getters: {
getOrderAddress(state) {
@ -45,6 +46,9 @@ const store = new Vuex.Store({
setGroupHeadId(state, id) {
state.pintuangroup_headid = id;
},
setLoadMore(state, info) {
state.loadmore = info;
},
}
})
export default store;

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>

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>

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>

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

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,

View File

@ -57,7 +57,7 @@ export default {
watch:{
select(){
// console.log(this.select)
this.$emit("sel",this.select)
this.$emit("sel", this.select);
}
}
}

View File

@ -100,8 +100,8 @@ export default {
},
watch:{
sel(){
// console.log(this.sel)
this.$emit('xuanze',this.sel)
console.log(this.sel)
this.$emit('xuanze', this.sel)
}
}
}

View File

@ -125,6 +125,9 @@
</view>
</template>
<script>
/*
* 详情是请求完存在store的在这里从store取值
**/
import navs from "../components/sdetails/navs"
import tloos from "../components/sdetails/tloos"
export default {
@ -152,7 +155,23 @@ export default {
components:{
navs,
tloos
},
},
onShow() {
// if(this.pintuan_id) {
// this.$u.api.getPinTuanDetails({
// pintuan_id: this.pintuan_id
// }).then(res => {
// if(res.errCode == 0) {
// const goods = {
// goods: res.data.data,
// type: 2,
// }
// this.$store.commit('setGoodsDetails', goods);
// this.$store.commit('setGoodsId', this.pintuan_id);
// }
// })
// }
},
onLoad() {
this.init();
},
@ -225,25 +244,25 @@ export default {
this.settlementOrder({num: info.value});
}
},
// getGoodsDetails(id) {
// this.id = id;
// this.$u.api.getGoodsDetails({ id: id }).then((res)=>{
// if (res.errCode == 0) {
// this.goodsInfo = res.data.goods;
// let list = [];
// res.data.goods_image[0].forEach(item => {
// let temp = {
// image: item
// }
// list.push(temp);
// })
// this.list = list;
// this.info = res.data.goods;
// this.glist = res.data.spec_list;
// // console.log(this.goodsInfo.mobile_body);
// }
// })
// },
getGoodsDetails(id) {
this.id = id;
this.$u.api.getGoodsDetails({ id: id }).then((res)=>{
if (res.errCode == 0) {
this.goodsInfo = res.data.goods;
let list = [];
res.data.goods_image[0].forEach(item => {
let temp = {
image: item
}
list.push(temp);
})
this.list = list;
this.info = res.data.goods;
this.glist = res.data.spec_list;
// console.log(this.goodsInfo.mobile_body);
}
})
},
//
/*
* @params {Number} type 拼团或者开团
@ -285,8 +304,8 @@ export default {
// console.log(this.involvemenGroupInfo);
},
xuanze(id){
// console.log(id)
this.getGoodsDetails(this.glist[id])
console.log(id)
// this.getGoodsDetails(this.glist[id])
},
setTitle() {
let title = '';

View File

@ -3,10 +3,11 @@
<view>
<u-tabs-swiper ref="uTabs" :list="tabList" name="gc_name" :current="current" @change="tabsChange" :is-scroll="true" active-color="#FF780F" swiperWidth="750" height="88" :show-bar="false"></u-tabs-swiper>
</view>
<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" >
<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" :style="{height: swiperHeight}">
<swiper-item class="swiper-item" v-for="(_, index) in tabList" :key="index">
<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
<SpecialGoods v-for="(item, index) in pinTuanList" :key="index" :item="item" type='group'></SpecialGoods>
<!-- <loadmore ref="loadmore" @callback="getPinTuanList" bgColor="#FFF"></loadmore> -->
<u-empty text="暂无商品" mode="list" color="#000" v-if="!pinTuanList.length"></u-empty>
</scroll-view>
</swiper-item>
@ -14,27 +15,32 @@
</view>
</template>
<script>
import SpecialGoods from "../../components/shop/special-shop/index"
import loadmore from "@/components/loadmore/index";
import SpecialGoods from "../../components/shop/special-shop/index";
export default {
data() {
return {
tabList: [],
current: Number,
current: -1,
swiperCurrent: 0,
page: 0,
pinTuanList: [],
swiperHeight: '',
timer: '', //
}
},
components: {
SpecialGoods
loadmore,
SpecialGoods,
},
onLoad() {
this.getGoodsClass();
this.setViewHeight();
},
watch: {
current(index) {
// console.log(this.tabList);
this.getPinTuanList(this.tabList[index].gc_id);
this.getPinTuanList({id: this.tabList[index].gc_id });
}
},
methods: {
@ -48,13 +54,13 @@ export default {
})
},
//
getPinTuanList(id) {
this.$u.api.getPinTuanList({
async getPinTuanList({ id, page }) {
const res = await this.$u.api.getPinTuanList({
page: this.page,
gc_id: id,
}).then(res => {
this.pinTuanList = res.data;
})
this.pinTuanList = res.data;
return res.data.length;
},
// tabsswiper
tabsChange(index) {
@ -74,8 +80,26 @@ export default {
},
// scroll-view
onreachBottom() {
}
this.$$refs.loadmore.reachBottom();
// if(!this.timer) return false;
// this.loadStatus = "loading";
// this.page++;
// this.getPinTuanList().then(length => {
// if(length == 0) {
// this.page--;
// this.status = 'nomore';
// } else {
// this.status = 'loading';
// }
// }).catch(() => {
// this.loadStatus = "nomore";
// this.page--;
// })
},
setViewHeight() {
const res = uni.getSystemInfoSync();
this.swiperHeight = res.windowHeight - (88 / 2) + 'px';
},
}
};
</script>

View File

@ -32,10 +32,10 @@ export default {
</script>
<style lang="scss" scoped>
.concerns {
padding: 35rpx 30rpx 0;
.u-index-anchor {
background-color: #ffffff !important;
}
// padding: 35rpx 30rpx 0;
// .u-index-anchor {
// background-color: #ffffff !important;
// }
.list-cell {
display: flex;
box-sizing: border-box;
@ -43,6 +43,7 @@ export default {
width: 100%;
overflow: hidden;
margin: 50rpx 0;
padding: 0 30rpx;
> image {
width: 70rpx;
height: 70rpx;

View File

@ -1,5 +1,5 @@
<template>
<view class="shop">
<scroll-view class="shop" scroll-y @scrolltolower="onreachBottom">
<view class="top">
<image src="/static/image/shop/1.png" class="local"></image>
<view class="add" @click="chooseArea=true">
@ -7,7 +7,7 @@
<image src="/static/image/shop/2.png"></image>
</view>
<view @click="sousuo">
<u-search placeholder="日照香炉生紫烟" v-model="keyword" :show-action="false" bg-color="#fff" border-color="#999999" :disabled="true"></u-search>
<u-search placeholder="" v-model="keyword" :show-action="false" bg-color="#fff" border-color="#999999" :disabled="true"></u-search>
</view>
<image src="/static/image/shop/3.png" class="mnue" @click="toClassifyPage"></image>
</view>
@ -48,12 +48,12 @@
<image class="lingquan"></image>
<youhq></youhq>
<view class="hr" style="margin-top:40rpx"></view>
<list></list>
<list ref="recommendGoods"></list>
<view class="cart" @click="toCartPage">
<image src="/static/image/common/3.png"></image>
</view>
<u-picker mode="region" :params="areaParams" v-model="chooseArea" @confirm="setArea"></u-picker>
</view>
</scroll-view>
</template>
<script>
import shopitem from "@/components/shop/shop-item/index"
@ -63,7 +63,6 @@ import seckill from "@/components/shop/seckill/index"
import group from "@/components/shop/group/index"
import youhq from "@/components/shop/youhq/index"
import list from "../../components/shop/list/index"
export default {
name:"shop",
components:{
@ -175,7 +174,10 @@ export default {
clickImage(index) {
console.log(index);
console.log(this.list[index]);
},
//
onreachBottom() {
this.$refs.recommendGoods.loadMore();
},
setArea(e) {
// console.log(e);
@ -195,7 +197,9 @@ export default {
}
</script>
<style lang="scss" scoped>
.shop{
.shop {
height: calc(100vh - var(--window-top));
box-sizing: border-box;
padding: 0 33rpx 100rpx;
.top{
width: 100%;