From e55314af71fa031d3c58d1135e663ebbfe0e2190 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?LAPTOP-D7TKRI82=5C=E9=82=93?= <52643018@qq.com>
Date: Wed, 23 Jun 2021 16:45:31 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=8E=A5=E6=8E=A5=E5=8F=A3]=20=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/api.js               |   3 +-
 pages/goodsDetail/index.vue |   7 +-
 pages/index/index.vue       | 178 +++++++++++++++++++++---------------
 pages/login/index.vue       |   2 +-
 4 files changed, 112 insertions(+), 78 deletions(-)

diff --git a/common/api.js b/common/api.js
index 8c3c39d..4255537 100644
--- a/common/api.js
+++ b/common/api.js
@@ -1,10 +1,11 @@
 // appId: 正式 null | 测试 wxb35ef055a4dd8ad4
 export const DEV = "dev"; // dev 测试 | prod 正式
 export const VERSION = '1.0.0'; // 版本号
-export const DEVURL = 'http://192.168.3.8:8000'; // 测试服请求地址
+export const DEVURL = 'http://gxsky.lanzulive.com'; // 测试服请求地址
 export const PRODURL = ''; // 正式服请求地址
 
 /* 首页相关接口 */
+export const API_CATEGORY_LIST = '/api/category/list'; // 首页-分类
 export const API_GOODS_LIST = '/api/goods/list'; // 首页-分类下商品列表
 
 // 用户订单
diff --git a/pages/goodsDetail/index.vue b/pages/goodsDetail/index.vue
index e5f48dd..84c2060 100644
--- a/pages/goodsDetail/index.vue
+++ b/pages/goodsDetail/index.vue
@@ -81,11 +81,12 @@
 	export default {
 		data(){
 			return {
-				current: 0 // 轮播下标
+				current: 0, // 轮播下标
+				goods_id: 0
 			}
 		},
-		onLoad(){
-			
+		onLoad(options){
+			this.goods_id = options.id;
 		},
 		methods: {
 			
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 5170813..85e19c1 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -3,23 +3,26 @@
 		<view class="ctab">
 			<u-tabs :list="tab_list" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs>
 		</view>
-		<view class="com" v-for="(tab, tabIndex) in tab_list" v-if="tabIndex == current" :key="tabIndex">
-			<view class="lf-row-between list" v-for="(item, index) in tab.list" :key="index">
+		<view class="com" v-for="(tab, tabIndex) in tab_list" v-if="tabIndex == current" :key="tab.id">
+			<view class="lf-row-between list" v-for="(item, index) in tab.list" :key="item.id" @click="toDetail(item)">
 				<view class="left">
-					<image src="../../static/tu.png" mode=""></image>
+					<image :src="item.cover" mode=""></image>
 				</view>
 				<view class="right">
-					<view class="lf-line-2 title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
-					<view class="lf-row-between tips">
+					<view class="lf-line-2 title">{{ item.name }}</view>
+					<view class="lf-flex tips">
 						<view class="u-line-progress">
-							<u-line-progress :percent="25" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
+							<u-line-progress :percent="item.specs[0].sold_percent" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
 						</view>
-						<text class="progress">已抢25%</text>
-						<text class="bought">2.4万人已购买</text>
+						<text class="progress">{{ item.specs[0].sold_percent_text }}</text>
+						<text class="bought">{{ item.specs[0].sold_stock_text }}</text>
 					</view>
 					<view class="lf-row-between price">
-						<text>￥</text><text>19</text>.<text>90</text>
-						<text>￥39.00</text>
+						<text class="lf-font-bold">
+							<text class="lf-font-24">￥</text>
+							<text class="lf-font-42">{{ item.specs[0].selling_price }}</text>
+						</text>
+						<text class="lf-font-24">￥{{ item.specs[0].original_price }}</text>
 						<button>立即抢购</button>
 					</view>
 				</view>
@@ -38,60 +41,87 @@
 <script>
 	export default {
 		data() {
-			let shared = {
-				loadingClass: false,
-				loadingText: '没有更多数据啦~',
-				page: 1,
-				isPage: true
-			}
 			return {
-				tab_list: [{
-					name: '推荐',
-					list: [1, 2, 3, 4,5,6,7,8],
-					...shared
-				}, {
-					name: '每日必抢',
-					list: [],
-					...shared
-				}, {
-					name: '生活用品',
-					list: [1],
-					...shared
-				},{
-					name: '家政服务',
-					list: [],
-					...shared
-				},{
-					name: '美食部落',
-					list: [],
-					...shared
-				},{
-					name: '奶茶夏日',
-					list: [],
-					...shared
-				},{
-					name: '奶茶夏日',
-					list: [],
-					...shared
-				}],
+				tab_list: [],
 				current: 0, // tab下表
+				pageSize: 10
 			}
 		},
 		onLoad() {
-			this.$http(this.API.API_GOODS_LIST, {data: 1}).then(res => {
-				console.log(res);
-			}).catch(err => err);
+			this.getCategoryList();
 		},
 		methods: {
+			// 切换tab
 			change(index) {
 				this.current = index;
 			},
+			// 获取分类tab
+			getCategoryList(){
+				this.$http(this.API.API_CATEGORY_LIST).then(res => {
+					let res_list = res.data || [];
+					let tab_list = res_list.map(item => {
+						return {
+							id: item.id,
+							name: item.name,
+							type: item.type,
+							list: [],
+							loadingClass: true,
+							loadingText: '正在加载中',
+							page: 1,
+							isPage: true
+						}
+					})
+					this.tab_list = tab_list;
+					this.getGoodsList();
+				})
+			},
+			// 获取分类下的商品列表
+			getGoodsList(){
+				let per_page = this.pageSize;
+				let tab_item = this.tab_list[this.current];
+				this.$http(this.API.API_GOODS_LIST, {
+					category_id: tab_item.id,
+					type: tab_item.type,
+					page: tab_item.page,
+					per_page
+				}).then(res => {
+					console.log("res", res);
+					
+					let isPage = res.data.has_more_page;
+					tab_item.isPage = isPage;
+					if(isPage){
+						tab_item.loadingClass = true;
+						tab_item.loadingText = '正在加载中';
+					}else{
+						tab_item.loadingClass = false;
+						tab_item.loadingText = '没有更多数据啦~';
+					}
+					if(tab_item.page == 1){
+						tab_item.list = res.data.items;
+					}else{
+						tab_item.list.push(...res.data.items);
+					}
+				})
+			},
+			// 去到详情页
+			toDetail(item){
+				this.$url('/pages/goodsDetail/index?id='+ item.id);
+			}
 		},
 		onReachBottom(){
-			console.log("页面触底")
+			let tab_item = this.tab_list[this.current];
+			if(tab_item.isPage){
+				tab_item.page = tab_item.page + 1;
+				this.getGoodsList();
+			}
 		},
 		onPullDownRefresh(){
-			console.log("下拉刷新");
+			let tab_item = this.tab_list[this.current];
+			tab_item.page = 1;
+			tab_item.isPage = true;
+			tab_item.loadingClass = true;
+			tab_item.loadingText = '正在加载中';
+			this.getGoodsList();
 			uni.stopPullDownRefresh()
 		}
 	}
@@ -102,6 +132,7 @@
 	.title {
 		font-size: 28rpx;
 		color: $u-content-color;
+		height: 88rpx;
 	}
 	
 	// tab
@@ -159,29 +190,30 @@
 				.price{
 					overflow: hidden;
 					color:#FF0000;
-					text{
-						font-size: 48rpx;
-						color:#FF0000;
-						font-weight: 500;
-					}
-					text:nth-child(1){
-						color: #FF0000;
-						font-size: 28rpx;
-					}
-					text:nth-child(2){
-						color: #FF0000;
-						font-size: 48rpx;
-					}
-					text:nth-child(3){
-						color: #FF0000;
-						font-size: 28rpx;
-					}
-					text:nth-child(4){
-						color: #777777;
-						font-size: 28rpx;
-						text-decoration:line-through;
-						font-weight: 400;
-					}
+					
+					// text{
+					// 	font-size: 48rpx;
+					// 	color:#FF0000;
+					// 	font-weight: 500;
+					// }
+					// text:nth-child(1){
+					// 	color: #FF0000;
+					// 	font-size: 28rpx;
+					// }
+					// text:nth-child(2){
+					// 	color: #FF0000;
+					// 	font-size: 48rpx;
+					// }
+					// text:nth-child(3){
+					// 	color: #FF0000;
+					// 	font-size: 28rpx;
+					// }
+					// text:nth-child(4){
+					// 	color: #777777;
+					// 	font-size: 28rpx;
+					// 	text-decoration:line-through;
+					// 	font-weight: 400;
+					// }
 					button{
 						width: 160rpx;
 						height: 60rpx;
diff --git a/pages/login/index.vue b/pages/login/index.vue
index c153ccc..75de457 100644
--- a/pages/login/index.vue
+++ b/pages/login/index.vue
@@ -16,7 +16,7 @@
 					<text class="lf-m-l-20">微信快捷登录</text>
 				</button>
 				<view class="lf-m-t-40 lf-font-28" @click="$url('/pages/login/accountLogin')">使用手机号登录</view>
-				<view class="mask" v-if="!checked" @click="$msg('您未同意授权')"></view>
+				<view class="mask" v-if="!checked" @click="$msg('您未同意协议条款')"></view>
 			</block>
 		</view>
 		<!-- 服务条款 -->