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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
common/store/index.js
View File

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

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> <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> </view>
<swiper :current="swiperCurrent" @animationfinish="animationfinish" style="height: 130px"> <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个 --> <!-- 最多显示3个 -->
<sitem :info="info" v-for="(info, index) in groupList.slice(0, 3)" :key="index"></sitem> <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> <u-empty text="暂无拼团商品" mode="list" color="#000" v-if="!groupList.length"></u-empty>
@ -67,19 +67,18 @@ export default {
color: #999; color: #999;
} }
} }
.label{ // .label{
display: flex; // display: flex;
font-size: 24rpx; // font-size: 24rpx;
color: #999; // color: #999;
>text{ // >text{
margin-right: 34rpx; // margin-right: 34rpx;
} // }
} // }
.list{ .list{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 21rpx; margin-top: 21rpx;
} }
} }
</style> </style>

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

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

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

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

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

@ -16,7 +16,7 @@ export default {
}, },
methods: { methods: {
toDetailsPage() { 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) { if (res.errCode == 0) {
const goods = { const goods = {
goods: res.data, goods: res.data,

2
pageB/components/sdetails/guige.vue
View File

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

2
pageB/components/sdetails/tloos.vue
View File

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

61
pageB/sdetails/index.vue
View File

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

46
pageC/groupBuy/index.vue
View File

@ -3,10 +3,11 @@
<view> <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> <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> </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"> <swiper-item class="swiper-item" v-for="(_, index) in tabList" :key="index">
<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom"> <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> <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> <u-empty text="暂无商品" mode="list" color="#000" v-if="!pinTuanList.length"></u-empty>
</scroll-view> </scroll-view>
</swiper-item> </swiper-item>
@ -14,27 +15,32 @@
</view> </view>
</template> </template>
<script> <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 { export default {
data() { data() {
return { return {
tabList: [], tabList: [],
current: Number, current: -1,
swiperCurrent: 0, swiperCurrent: 0,
page: 0, page: 0,
pinTuanList: [], pinTuanList: [],
swiperHeight: '',
timer: '', // 限制下拉刷新
} }
}, },
components: { components: {
SpecialGoods loadmore,
SpecialGoods,
}, },
onLoad() { onLoad() {
this.getGoodsClass(); this.getGoodsClass();
this.setViewHeight();
}, },
watch: { watch: {
current(index) { current(index) {
// console.log(this.tabList); // console.log(this.tabList);
this.getPinTuanList(this.tabList[index].gc_id); this.getPinTuanList({id: this.tabList[index].gc_id });
} }
}, },
methods: { methods: {
@ -48,13 +54,13 @@ export default {
}) })
}, },
// 拼团列表 // 拼团列表
getPinTuanList(id) { async getPinTuanList({ id, page }) {
this.$u.api.getPinTuanList({ const res = await this.$u.api.getPinTuanList({
page: this.page, page: this.page,
gc_id: id, gc_id: id,
}).then(res => {
this.pinTuanList = res.data;
}) })
this.pinTuanList = res.data;
return res.data.length;
}, },
// tabs通知swiper切换 // tabs通知swiper切换
tabsChange(index) { tabsChange(index) {
@ -74,8 +80,26 @@ export default {
}, },
// scroll-view到底部加载更多 // scroll-view到底部加载更多
onreachBottom() { 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> </script>

9
pageE/mine/MineConcerns.vue
View File

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

16
pages/shop/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<view class="shop"> <scroll-view class="shop" scroll-y @scrolltolower="onreachBottom">
<view class="top"> <view class="top">
<image src="/static/image/shop/1.png" class="local"></image> <image src="/static/image/shop/1.png" class="local"></image>
<view class="add" @click="chooseArea=true"> <view class="add" @click="chooseArea=true">
@ -7,7 +7,7 @@
<image src="/static/image/shop/2.png"></image> <image src="/static/image/shop/2.png"></image>
</view> </view>
<view @click="sousuo"> <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> </view>
<image src="/static/image/shop/3.png" class="mnue" @click="toClassifyPage"></image> <image src="/static/image/shop/3.png" class="mnue" @click="toClassifyPage"></image>
</view> </view>
@ -48,12 +48,12 @@
<image class="lingquan"></image> <image class="lingquan"></image>
<youhq></youhq> <youhq></youhq>
<view class="hr" style="margin-top:40rpx"></view> <view class="hr" style="margin-top:40rpx"></view>
<list></list> <list ref="recommendGoods"></list>
<view class="cart" @click="toCartPage"> <view class="cart" @click="toCartPage">
<image src="/static/image/common/3.png"></image> <image src="/static/image/common/3.png"></image>
</view> </view>
<u-picker mode="region" :params="areaParams" v-model="chooseArea" @confirm="setArea"></u-picker> <u-picker mode="region" :params="areaParams" v-model="chooseArea" @confirm="setArea"></u-picker>
</view> </scroll-view>
</template> </template>
<script> <script>
import shopitem from "@/components/shop/shop-item/index" 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 group from "@/components/shop/group/index"
import youhq from "@/components/shop/youhq/index" import youhq from "@/components/shop/youhq/index"
import list from "../../components/shop/list/index" import list from "../../components/shop/list/index"
export default { export default {
name:"shop", name:"shop",
components:{ components:{
@ -175,7 +174,10 @@ export default {
clickImage(index) { clickImage(index) {
console.log(index); console.log(index);
console.log(this.list[index]); console.log(this.list[index]);
},
// 下拉加载更多推荐商品
onreachBottom() {
this.$refs.recommendGoods.loadMore();
}, },
setArea(e) { setArea(e) {
// console.log(e); // console.log(e);
@ -196,6 +198,8 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.shop { .shop {
height: calc(100vh - var(--window-top));
box-sizing: border-box;
padding: 0 33rpx 100rpx; padding: 0 33rpx 100rpx;
.top{ .top{
width: 100%; width: 100%;