From 59362ebc7c4ed517e3d08ce480e361fa9df664ad Mon Sep 17 00:00:00 2001
From: ghusermoon <2673031505@qq.com>
Date: Thu, 23 Jul 2020 20:58:56 +0800
Subject: [PATCH] loadmore 7.23

---
 common/store/index.js               |  4 ++
 components/loadmore/index.vue       | 61 ++++++++++++++++++++++++++++
 components/shop/group/index.vue     | 19 +++++----
 components/shop/group/item.vue      | 24 +++++------
 components/shop/list/index.vue      | 58 ++++++++++++++++++++------
 components/shop/list/item.vue       |  2 +-
 pageB/components/sdetails/guige.vue |  2 +-
 pageB/components/sdetails/tloos.vue |  4 +-
 pageB/sdetails/index.vue            | 63 +++++++++++++++++++----------
 pageC/groupBuy/index.vue            | 46 ++++++++++++++++-----
 pageE/mine/MineConcerns.vue         |  9 +++--
 pages/shop/index.vue                | 18 +++++----
 12 files changed, 227 insertions(+), 83 deletions(-)
 create mode 100644 components/loadmore/index.vue

diff --git a/common/store/index.js b/common/store/index.js
index 9301ea3..9ddea79 100644
--- a/common/store/index.js
+++ b/common/store/index.js
@@ -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;
\ No newline at end of file
diff --git a/components/loadmore/index.vue b/components/loadmore/index.vue
new file mode 100644
index 0000000..e52261f
--- /dev/null
+++ b/components/loadmore/index.vue
@@ -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>
\ No newline at end of file
diff --git a/components/shop/group/index.vue b/components/shop/group/index.vue
index d9e89fe..f13d33c 100644
--- a/components/shop/group/index.vue
+++ b/components/shop/group/index.vue
@@ -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>
\ No newline at end of file
diff --git a/components/shop/group/item.vue b/components/shop/group/item.vue
index b3dabb8..1dc51fe 100644
--- a/components/shop/group/item.vue
+++ b/components/shop/group/item.vue
@@ -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>
\ No newline at end of file
diff --git a/components/shop/list/index.vue b/components/shop/list/index.vue
index 9df9885..89cdc9c 100644
--- a/components/shop/list/index.vue
+++ b/components/shop/list/index.vue
@@ -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
diff --git a/components/shop/list/item.vue b/components/shop/list/item.vue
index d229628..71fe6ea 100644
--- a/components/shop/list/item.vue
+++ b/components/shop/list/item.vue
@@ -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,
diff --git a/pageB/components/sdetails/guige.vue b/pageB/components/sdetails/guige.vue
index d37f122..59a695b 100644
--- a/pageB/components/sdetails/guige.vue
+++ b/pageB/components/sdetails/guige.vue
@@ -57,7 +57,7 @@ export default {
     watch:{
         select(){
             // console.log(this.select)
-            this.$emit("sel",this.select)
+            this.$emit("sel", this.select);
         }
     }
 }
diff --git a/pageB/components/sdetails/tloos.vue b/pageB/components/sdetails/tloos.vue
index dcd043d..8039406 100644
--- a/pageB/components/sdetails/tloos.vue
+++ b/pageB/components/sdetails/tloos.vue
@@ -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)
         }
     }
 }
diff --git a/pageB/sdetails/index.vue b/pageB/sdetails/index.vue
index 0f90939..de2c8bf 100644
--- a/pageB/sdetails/index.vue
+++ b/pageB/sdetails/index.vue
@@ -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 = '';
diff --git a/pageC/groupBuy/index.vue b/pageC/groupBuy/index.vue
index f804460..a63ac9b 100644
--- a/pageC/groupBuy/index.vue
+++ b/pageC/groupBuy/index.vue
@@ -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>
diff --git a/pageE/mine/MineConcerns.vue b/pageE/mine/MineConcerns.vue
index ea85215..57b8e39 100644
--- a/pageE/mine/MineConcerns.vue
+++ b/pageE/mine/MineConcerns.vue
@@ -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;
diff --git a/pages/shop/index.vue b/pages/shop/index.vue
index 78e8802..4038d54 100644
--- a/pages/shop/index.vue
+++ b/pages/shop/index.vue
@@ -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%;