Pārlūkot izejas kodu

首页改版,新增更多商品列表页面

yuwenjun 3 gadi atpakaļ
vecāks
revīzija
bac1d6c579

+ 1 - 1
common/css/common.scss

@@ -1,5 +1,5 @@
 .clearfix:after {
-  content: ".";
+  content: "";
   display: block;
   height: 0;
   clear: both;

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 0
common/css/iconfont.scss


+ 7 - 1
pages.json

@@ -71,8 +71,14 @@
 				"navigationBarTitleText":"商品详情",
 				"navigationStyle":"custom"
 			}
+		},
+		{
+			"path": "pages/goods/good-floorMore",
+			"style": {
+				"navigationBarTitleText": "商品列表",
+				"enablePullDownRefresh":true
+			}
 		}
-
 	],
 	"subPackages": [{
 		"root": "pages/user/", //个人中心模块

+ 1 - 1
pages/goods/search.vue

@@ -164,7 +164,7 @@
 				if(loadMore) {
 					this.listQuery.pageNum += 1;
 				}
-				this.ProductService.QueryProductList(this.listQuery).then(response =>{
+				this.ProductService.GetProductList(this.listQuery).then(response =>{
 					this.isShowWrapper = true
 					const data = response.data;
 					const dataList = data.list;

+ 2 - 0
pages/tabBar/cart/index.vue

@@ -619,6 +619,8 @@
 						},1000)
 					}).catch(error =>{
 						this.$util.msg(error.msg,2000)
+					}).finally(()=>{
+						this.GetCartNumber()
 					})
 				}
 				this.modal = false;

+ 108 - 78
pages/tabBar/index/index.vue

@@ -1,5 +1,6 @@
 <template>
-	<view class="container home clearfix">
+	<view class="home tui-skeleton clearfix">
+		<tui-skeleton v-if="skeletonShow"  :isLoading	="true" :loadingType="2"></tui-skeleton>
 		<!-- 首页自定义导航栏 -->
 		<view class='navbar-wrap' :style="{height:(CustomBar+55)+'px',paddingTop:StatusBar+'px'}" :class="inputActive"> 
 		  	<view class="navbar-text" 
@@ -16,29 +17,41 @@
 			</view>
 		</view>
 		<!-- 主页内容 -->
-		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading	="true" :loadingType="2"></tui-skeleton>
-		<view class="container-home tui-skeleton" :style="{paddingTop:CustomBar+'px'}">
+		<view class="container-home " :style="{paddingTop:CustomBar+'px'}">
 			<!-- 轮播 -->
 			<banner :list="bannerImageList"></banner>
 		</view>	
 		<!-- 商品列表 -->
-		<view class="container-section tui-skeleton clearfix">
-			<view class="product-list" v-for="(pro,index) in productList" :key="index" @click.stop="Details(pro)">
-				<view class="product-list-image">
-					<image class="product-image" :src="pro.mainImage" mode=""></image>
-					<!-- 推荐 -->
-					<image class="product-icon" :src="StaticUrl+'recommend.png'" mode="" v-if="pro.recommend === '1'"></image>
+		<view class="container-section">
+			<view class="clearfix" v-for="(floor,index1) in productFloor" :key="index1">
+				<!-- 楼层标题区域 -->
+				<view class="tui-group-name">
+					<view class="tui-group-title ">
+						<view class="tui-group-l">{{floor.title}}</view>
+						<view class="tui-group-r" @click="NavToDetailPage(floor)" v-if="floor.productList.length>=6">
+							<text>更多</text> <tui-icon name="arrowright" :size="20" margin="0 0 0 -4rpx"></tui-icon>
+						</view>
+					</view>
+					<view class="tui-sub__desc">{{floor.description}}</view>
 				</view>
-				<view class="product-list-msg">
-					<view class="product-msg-name">{{ pro.name }}</view>
-					<view class="product-list-tag" v-if="pro.activeStatus == 1">
-						<text class="tag tag-02">活动价</text>
+				<!-- 商品列表区域 -->
+				<view class="product-list" v-for="(pro,index2) in floor.productList" :key="index2" @click.stop="Details(pro)">
+					<view class="product-list-image">
+						<image class="product-image" :src="pro.mainImage" mode=""></image>
+						<!-- 推荐 -->
+						<image class="product-icon" :src="StaticUrl+'recommend.png'" mode="" v-if="pro.recommend === '1'"></image>
 					</view>
-					<view class="product-list-pri">
-						<view class="price">¥{{ pro.price | PriceFormat}}</view>
-						<view class="carts" @click.stop="handAddCarts(pro)">
-							<view class="carts-add">
-								<text class="iconfont icon-gouwuche"></text>
+					<view class="product-list-msg">
+						<view class="product-msg-name">{{ pro.name }}</view>
+						<view class="product-list-tag" v-if="pro.activeStatus == 1">
+							<text class="tag tag-02">活动价</text>
+						</view>
+						<view class="product-list-pri">
+							<view class="price">¥{{ pro.price | PriceFormat}}</view>
+							<view class="carts" @click.stop="handAddCarts(pro)">
+								<view class="carts-add">
+									<text class="iconfont icon-gouwuche"></text>
+								</view>
 							</view>
 						</view>
 					</view>
@@ -85,7 +98,7 @@
 				modallayer:false,
 				skeletonShow: true,
 				userIdentity:'',
-				productList:[],//商品列表
+				productFloor:[],//商品列表
 				bannerImageList:[],//轮播
 				pageNum:1,
 				pageSize:20,
@@ -111,31 +124,27 @@
 			...mapMutations(['login','logout']),
 			async GetWxAuthorize(){
 				const wechatCode = await authorize.getCode('weixin');// 根据微信的code获取用户登录状态:1已登录过 -1未登录过
-				this.UserService.UserWechatAuthorLogin(
-					{ 
-						code:wechatCode,
-					}	
-				)
-				.then(response =>{
-					const _data = JSON.parse(response.data);
-					uni.setStorageSync('openId',_data.openId)
-					this.userId = _data.userId;						
-					this.userIdentity = _data.userIdentity;						
-					this.$store.commit('updateStatus',_data)
-					this.login(_data);
-					this.GetHomeBnnner()
-					this.GetHomeProductList()
-				})
-				.catch(error =>{
-					const _data = JSON.parse(error.data);
-					this.logout()
-					this.$store.commit('updateStatus',_data)
-					uni.setStorageSync('openId',_data.openId)
-					this.GetHomeBnnner()
-					this.GetHomeProductList()
-				})
+				this.UserService.UserWechatAuthorLogin({ code:wechatCode }	)
+					.then(response =>{
+						const _data = JSON.parse(response.data);
+						uni.setStorageSync('openId', _data.openId)
+						this.userId = _data.userId;						
+						this.userIdentity = _data.userIdentity;						
+						this.$store.commit('updateStatus',_data)
+						this.login(_data);
+						this.GetHomeBanner()
+						this.GetHomeProductList()
+					})
+					.catch(error =>{
+						const _data = JSON.parse(error.data);
+						this.logout()
+						this.$store.commit('updateStatus',_data)
+						uni.setStorageSync('openId',_data.openId)
+						this.GetHomeBanner()
+						this.GetHomeProductList()
+					})
 			},		
-			GetHomeBnnner(){//初始化首页数据	
+			GetHomeBanner(){//初始化首页数据	
 				this.CommonService.GetProductCarousel().then(response =>{
 					let data = response.data;
 					this.bannerImageList = data
@@ -145,38 +154,21 @@
 				})
 			},
 			GetHomeProductList(){//初始化首页商品数据
-				this.ProductService.QueryProductList(
-					{
-						pageNum:1,
-						pageSize:this.pageSize,
-					}
-				)
+				this.ProductService.QueryProductFloor()
 				.then(response =>{
-					let data = response.data;
-					this.productList = data.list
-					this.hasNextPage = data.hasNextPage
+					this.productFloor = response.data;
 					this.GetCartNumber();
 				})
 				.catch(error =>{
 					this.$util.msg(error.msg,2000)
 				})
 			},
-			GetOnReachBottomProductList(){//上滑加载更多
-				this.pageNum+=1
-				this.ProductService.QueryProductList(
-					{
-						pageNum:this.pageNum,
-						pageSize:this.pageSize,
-					}
+			NavToDetailPage(floor) {
+				console.log('跳转');
+				//跳转
+				this.$api.navigateTo(
+					`/pages/goods/good-floorMore?floorId=${floor.floorId}&title=${floor.title}`
 				)
-				.then(response =>{
-					let data = response.data;
-					this.hasNextPage = data.hasNextPage
-					this.productList = this.productList.concat(data.list) 
-				})
-				.catch(error =>{
-					this.$util.msg(error.msg,2000)
-				})
 			},
 			Details(pro){
 				this.$api.navigateTo(`/pages/goods/product?productId=${pro.productId}`)
@@ -242,16 +234,20 @@
 				this.isScrollTop = false
 			}	
 		},
-		onPullDownRefresh() {//下拉刷新
-			// this.getHomeInformation()
-			uni.stopPullDownRefresh()
-		},
-		onReachBottom() {
-			console.log("用户把这个页面上拉100时触发我的")
-			if(this.hasNextPage){
-				this.GetOnReachBottomProductList()
-			}	
+		//下拉刷新
+		onPullDownRefresh() {
+			this.GetHomeBanner()
+			this.GetHomeProductList()
+			setTimeout(()=>{
+				uni.stopPullDownRefresh()
+			}, 2000)
 		},
+		// onReachBottom() {
+		// 	console.log("用户把这个页面上拉100时触发我的")
+		// 	if(this.hasNextPage){
+		// 		this.GetOnReachBottomProductList()
+		// 	}	
+		// },
 		onShareAppMessage(res){//分享转发
 			if (res.from === 'button') {
 		      // 来自页面内转发按钮
@@ -263,7 +259,7 @@
 			}
 		},
 		onShow(){
-
+			this.GetCartNumber()
 		}
 	}
 </script>
@@ -383,7 +379,7 @@
 			margin-bottom: 24rpx;
 			background-color: #FFFFFF;
 			border-radius: 16rpx;
-			&:nth-child(2n){
+			&:nth-child(2n+1){
 				margin-right: 0;
 			}
 			.product-list-image{
@@ -492,4 +488,38 @@
 			}
 		}
 	}
+	.tui-group-name {
+		width: 100%;
+		height: 92rpx;
+		padding: 20rpx 0;
+	}
+	.tui-group-title {
+		width: 100%;
+		float: left;
+		.tui-group-l {
+			float: left;
+			font-size: 34rpx;
+			font-weight: bold;
+			text-align: left;
+			line-height: 49rpx;
+			color: #333;
+		}
+		.tui-group-r {
+			float: right;
+			font-size: $font-size-26;
+			text-align: right;
+			line-height: 49rpx;
+			color: #999999;
+			.icon-xiayibu {
+				font-size: $font-size-30;
+				color: #999999;
+			}
+		}
+	}
+	.tui-sub__desc {
+		width: 100%;
+		float: left;
+		color: rgba(153, 153, 153, 0.9);
+		font-size: $font-size-26;
+	}
 </style>

+ 4 - 1
pages/tabBar/user/index.vue

@@ -150,7 +150,10 @@ export default {
 	onPullDownRefresh() {
 		//下拉刷新
 		if (this.hasLogin) {
-			this.GetWxAuthorize()
+			this.GetUserInfo()
+			setTimeout(()=>{
+				uni.stopPullDownRefresh()
+			},2000)
 		}else{
 			uni.stopPullDownRefresh()
 		}

+ 1 - 0
services/config.env.js

@@ -3,6 +3,7 @@ if(process.env.NODE_ENV === 'development'){
     // 开发环境
     // URL_CONFIG = 'http://192.168.2.75:8011'	 //采美测试地址
 	// URL_CONFIG = 'http://192.168.2.67:8011'	 //裴裴联调地址
+	// URL_CONFIG = 'http://192.168.2.68:8011'	 //涛涛联调地址
 	URL_CONFIG = 'https://mall2c-b.caimei365.com'
 	// URL_CONFIG = 'https://mall2c.caimei365.com'
 }else{

+ 24 - 1
services/product.service.js

@@ -7,12 +7,35 @@ export default class ProductService {
 		this.name = 'ProductService'
 	}
 	/**
-	 * @查询搜索商品列表
+	 * @description 获取楼层数据
+	 */
+	QueryProductFloor (data = {}) {
+		return this.AjaxService.get({ 
+			url:'/product/floor', 
+			data, 
+			isLoading: false ,
+		})
+	}
+	/**
+	 * @description 获取楼层商品详情
 	 * @param:name 商品名称关键词
 	 * @param:pageNum 页码
 	 * @param:pageSize 条数
 	 */
 	QueryProductList (data = {}) {
+		return this.AjaxService.get({ 
+			url:'/product/floor/detail', 
+			data, 
+			isLoading: false ,
+		})
+	}
+	/**
+	 * @description 获取商品列表
+	 * @param:name 商品名称关键词
+	 * @param:pageNum 页码
+	 * @param:pageSize 条数
+	 */
+	GetProductList (data = {}) {
 		return this.AjaxService.get({ 
 			url:'/product/list', 
 			data, 

Daži faili netika attēloti, jo izmaiņu fails ir pārāk liels