loadmore 7.23
This commit is contained in:
parent
be9f2ec1c7
commit
59362ebc7c
@ -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;
|
61
components/loadmore/index.vue
Normal file
61
components/loadmore/index.vue
Normal 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>
|
@ -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>
|
@ -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>
|
@ -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
|
||||
|
@ -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,
|
||||
|
@ -57,7 +57,7 @@ export default {
|
||||
watch:{
|
||||
select(){
|
||||
// console.log(this.select)
|
||||
this.$emit("sel",this.select)
|
||||
this.$emit("sel", this.select);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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 = '';
|
||||
|
@ -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;
|
||||
},
|
||||
// tabs通知swiper切换
|
||||
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>
|
||||
|
@ -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;
|
||||
|
@ -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%;
|
||||
|
Loading…
Reference in New Issue
Block a user