Browse Source

commit -m 商品列表

zhengjinyi 4 years ago
parent
commit
79d89e7224

+ 6 - 1
components/thorui/tui-loadmore/tui-loadmore.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="tui-loadmore">
+	<view class="tui-loadmore" v-if="visible">
 		<view :class="['tui-loading-'+index, (index==3 && type)?'tui-loading-'+type:'']"></view>
 		<view class="tui-loadmore-tips">{{text}}</view>
 	</view>
@@ -14,6 +14,11 @@
 				type: String,
 				default: "正在加载..."
 			},
+			//是否可见
+			visible: {
+				type: Boolean,
+				default: false
+			},
 			//loading 样式 :1,2,3
 			index: {
 				type: Number,

+ 7 - 2
components/thorui/tui-nomore/tui-nomore.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="tui-nomore-class tui-loadmore-none">
+	<view class="tui-nomore-class tui-loadmore-none" v-if="visible">
 		<view :class="[isDot?'tui-nomore-dot':'tui-nomore']">
 			<view :style="{backgroundColor:backgroundColor}" :class="[isDot?'tui-dot-text':'tui-nomore-text']">{{isDot?dotText:text}}</view>
 		</view>
@@ -10,8 +10,13 @@
 	export default {
 		name: "tuiNomore",
 		props: {
+			//是否可见
+			visible: {
+				type: Boolean,
+				default: false
+			},
 			//当前页面背景颜色
-			backgroundColor: {
+			backgroundColor: { 
 				type: String,
 				default: "#fafafa"
 			},

+ 216 - 66
pages/goods/goods-classify.vue

@@ -41,17 +41,17 @@
 			</view>
 			<template v-else>
 				<view class="container-list" :style="{'height':scrollHeight+'px'}">
-					<view v-for="(item,index) in listData" :key="index" :id="item.id" class="all-type-list-content commodity-list" @click.stop="navToDetailPage(item.productID)">
-						<image mode='widthFix' :src="item.mainImage"  class="list-img" alt="list-img"></image>
+					<view v-for="(item,index) in listData" :key="index" :id="item.p_id" class="all-type-list-content commodity-list" @click.stop="navToDetailPage(item.p_id)">
+						<image mode='widthFix' :src="item.p_image"  class="list-img" alt="list-img"></image>
 						<view class="list-details-info">
-							<text class="list-details-title">{{item.name}}</text>
-							<text class="list-details-specs">规格:{{item.unit}}</text>
-							<view class="list-details-specs" v-if="item.productCode!=''&&item.productCode!=null">商品编码:{{item.productCode}}</view>
+							<text class="list-details-title">{{item.p_name}}</text>
+							<text class="list-details-specs">规格:{{item.p_unit}}</text>
+							<view class="list-details-specs" v-if="item.p_code!=''&&item.p_code!=null">商品编码:{{item.p_code}}</view>
 							<view class="list-details-price">
 								<template v-if="userIdentity == 3">
 									<view class="floor-item-act" v-if="item.actStatus==1">
 										<view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
-											{{item.promotions.name}}<text v-if="item.price1TextFlag != '1' && item.supplierId === shopId">:¥{{ item.price | NumFormat }}</text>
+											{{item.promotions.name}}<text v-if="item.p_price_flag != '1' && item.supplierId === shopId">:¥{{ item.price | NumFormat }}</text>
 										</view>
 										<view class="floor-tags" v-else>{{item.promotions.name}}</view>	
 									</view>
@@ -62,7 +62,7 @@
 								<template v-else>
 									<view class="floor-item-act" v-if="item.actStatus==1">
 										<view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
-											{{item.promotions.name}}<text v-if="hasLogin && item.price1TextFlag != '1'">:¥{{ item.price | NumFormat }}</text>
+											{{item.promotions.name}}<text v-if="hasLogin && item.p_price_flag != '1'">:¥{{ item.price | NumFormat }}</text>
 										</view>
 										<view class="floor-tags" v-else>{{item.promotions.name}}</view>	
 									</view>
@@ -71,40 +71,60 @@
 									</view>
 								</template>
 								<view v-if="hasLogin" class="list-price">
-									<view v-if="userIdentity == 1">
-										<text class="price-larger" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
-										  ¥{{ (PromotionsFormat(item.promotions) ? item.price1 : item.retailPrice) | NumFormat }}
-										</text>
-									</view>	
-									<view v-if="userIdentity == 4">
-										<view class="price-larger" v-if="item.price1TextFlag == '1'">
+									<template v-if="userIdentity == 1">
+										<text v-if="priceLoading" class="price-larger small">正在获取价格...</text>
+										<template v-else>
+											<text class="price-larger" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
+												¥{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price) | NumFormat}}
+											</text>
+										</template>
+									</template>	
+									<template v-if="userIdentity == 4">
+										<view class="price-larger" v-if="item.p_price_flag == '1'">
 											<text class="txt">¥未公开价格</text>
 										</view>
-										<view v-else>
-											<view class="price-larger" v-if="item.price1TextFlag == '2'">
-												<text class="txt">¥价格仅会员可见</text>
-											</view>
-											<template v-else>
-												<text class="price-larger" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
-												  ¥{{ (PromotionsFormat(item.promotions) ? item.price1 : item.retailPrice) | NumFormat }}
-												</text>
-											</template>
+										<view class="price-larger" v-if="item.p_price_flag == '2'">
+											<text class="txt">¥价格仅会员可见</text>
 										</view>
-									</view>
-									<view v-if="userIdentity == 2">
-										<view class="price-larger" v-if="item.price1TextFlag == '1'">
+										<text v-else-if="priceLoading" class="price-larger small">正在获取价格...</text>
+										<template v-else>
+											<text class="price-larger" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
+												¥{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price) | NumFormat}}
+											</text>
+										</template>
+									</template>
+									<template v-if="userIdentity == 3">
+										<template v-if="item.supplierId === shopId">
+											<view class="price-larger" v-if="item.p_price_flag == '1'">
+												<text class="txt">¥未公开价格</text>
+											</view>
+											<text v-else-if="priceLoading" class="price-larger small">正在获取价格...</text>
+											<text v-else class="price-larger" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
+												¥{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price) | NumFormat}}
+											</text>
+										</template>
+										<template v-else>
+											<view  class="list-login-now">
+												<text class="p-no">¥</text>
+												<uni-grader :grade="Number(item.p_price_grade)"></uni-grader>
+											</view>
+										</template>
+									</template>
+									<template v-if="userIdentity == 2">
+										<view class="price-larger" v-if="item.p_price_flag == '1'">
 											<text class="txt">¥未公开价格</text>
 										</view>
+										<text v-else-if="priceLoading" class="price-larger small">正在获取价格...</text>
 										<template v-else>
 											<text class="price-larger" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
-											  ¥{{ (PromotionsFormat(item.promotions) ? item.price1 : item.retailPrice) | NumFormat }}
+												¥{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price) | NumFormat}}
 											</text>
 										</template>
-									</view>
+									</template>
 								</view>	
 								<view  v-else class="list-login-now">
 									<text class="p-no">¥</text>
-									<uni-stars :stars="parseInt(item.price1Grade)" :font-size='36' :width-info="180"></uni-stars>
+									<uni-grader :grade="Number(item.p_price_grade)"></uni-grader>
 								</view>
 							</view>
 						</view>
@@ -118,15 +138,36 @@
 		</template>
 		<!--右抽屉-->
 		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
-			<view class="drawer-container clearfix" :style="{paddingTop:CustomBar+10+'px'}">
-				<view class="drawer-title">{{ setNavigationBarTitle }}</view>
-				
-				<view class="drawer-input btn">
-					<view class="drawer-btn clear" @click="handSearchClear">重置</view>
+			<view class="drawer-container clearfix" :style="{paddingTop:CustomBar+'px'}">
+				<view class="drawer-title">{{ classData.name }}</view>
+				<view class="drawer-main">
+					<template v-if="classData.smalltypeList">
+						<view class="drawer-item-cell" v-for="(item,index) in classData.smalltypeList" :key="index">
+							<view class="drawer-item-title">{{ item.name }}</view>
+							<view class="drawer-item-main" v-if="item.tinytypeList">
+								<text class="drawer-item-text" :class="tiny.isChecked ? 'checked' : ''" v-for="(tiny,tinyIndex) in item.tinytypeList" :key="tinyIndex"  @click="SearchCondition(3,item,tiny)">{{ tiny.name }}</text>
+							</view>
+							<view class="drawer-item-main" v-else>
+								<text class="drawer-item-text" :class="item.isChecked ? 'checked' : ''" @click="SearchCondition(2,item)">全部商品</text>
+							</view>
+						</view>
+					</template>
+					<template v-else>
+						<view class="drawer-item-cell">
+							<view class="drawer-item-main none">
+								<text class="drawer-item-text" :class="classData.isChecked ? 'checked' : ''" @click="SearchCondition(1,classData)">全部商品</text>
+							</view>
+						</view>
+					</template>
+				</view>
+				<view class="drawer-input btn" :style="{bottom :isIphoneX ? '68rpx' : '34rpx'}">
+					<view class="drawer-btn clear" @click="closeDrawer">取消</view>
 					<view class="drawer-btn comfrim" @click="handSearchList">确定</view>
 				</view>
 			</view>
 		</tui-drawer>
+		<!-- 透明模态层 -->
+		<modal-layer v-if='isModallayer'></modal-layer>
 	</view>
 </template>
 
@@ -134,22 +175,30 @@
 	import { mapState,mapMutations} from 'vuex';
 	import listSkeleton from '@/components/cm-module/listTemplate/listSkeleton'
 	import customFloor from '@/components/cm-custom/custom-floor' 		 //自定义导航
+	import uniGrader from '@/components/uni-grade/uni-grade.vue'
+	import modalLayer from "@/components/modal-layer"
+	
+	
 	const defaultListQuery = {
 			id:0,
 			pageNum:1,
 			pageSize:10,
 			sortField:'',
-			sortType:0,
+			sortType:1,
 			idType:0,//一级
 	};
 	export default{
 		components:{
 			customFloor,
-			listSkeleton
+			listSkeleton,
+			uniGrader,
+			modalLayer
 		},
 		data(){
 			return{
+				shopID:0,
 				tabIndex:0,
+				isModallayer:false,
 				isSearchSalesFirst:true,
 				isSearchMoodFirst:true,
 				isSearchPriceFirst:true,
@@ -159,9 +208,10 @@
 				headerBtnPosi:	this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
 				systeminfo: this.setSysteminfo(),		 //获取设备信息
 				CustomBar:this.CustomBar,// 顶部导航栏高度
+				isIphoneX:this.$store.state.isIphoneX,
 				emptyText: '该分类暂时还没有商品哟,去逛逛别的吧~',
 				isRequest:false,
-				showSkeleton: false,
+				showSkeleton: true,
 				showEmpty: false,
 				userID: 0,
 				userIdentity:'',
@@ -175,9 +225,10 @@
 				totalPage: 0,
 				nomoreText: '上拉显示更多',
 				rightDrawer: false,
-				setNavigationBarTitle:'',
 				classifyType:0,
-			}
+				classData:{},
+				searchCheckedId:null
+			}	
 		},
 		onLoad(option) {
 			console.log(option)
@@ -195,10 +246,10 @@
 			initOption(option) {
 				this.listQuery.id = option.id;
 				this.listQuery.idType = this.classifyType = Number(option.classType);
-				this.setNavigationBarTitle = option.title
 				uni.setNavigationBarTitle({title:option.title});
 				this.$api.getComStorage('userInfo').then((resolve) =>{
 					this.userID = resolve.userID ? resolve.userID : 0
+					this.shopID = resolve.shopID ? resolve.shopID : 0
 					this.userIdentity = resolve.userIdentity
 					this.isRequest = true
 					this.GetProductListInfo()
@@ -212,6 +263,7 @@
 			GetProductOneClassly(){//根据分类ID 查询二三级分类
 				this.CommonService.GetProductOneClassly({typeId:this.listQuery.id,idType:this.classifyType,source :'crm'}).then(response =>{
 					console.log(response.data)
+					this.classData = response.data
 				}).catch(error =>{
 					this.$util.msg(error.msg,2000)
 				})
@@ -220,12 +272,12 @@
 				this.ProductService.GetSearchProductTypeData(this.listQuery).then(response =>{
 					const resData = JSON.parse(response.data);
 					const resList = resData.items;
+					this.showSkeleton = false
 					if(resList && resList.length > 0){
 						this.showEmpty = false
 						this.totalPage = resData.total;
 						this.listData = [...resList];
 						this.GetProductPrice()
-						this.showSkeleton = false
 						// 防上拉暴滑
 						this.pullFlag = false;
 						setTimeout(()=>{ this.pullFlag = true; },500)
@@ -234,9 +286,15 @@
 							this.pullUpOn = false
 							this.nomoreText = '上拉显示更多'
 						} else {
-							this.pullUpOn = false
-							this.loadding = false
-							this.nomoreText = '已至底部'
+							if(this.listData.length>4){
+								this.pullUpOn = false
+								this.loadding = false
+								this.nomoreText = '已至底部'
+							}else{
+								this.pullUpOn = true
+								this.loadding = false
+								this.nomoreText = '已至底部'
+							}
 						}
 					} else {
 						this.showEmpty = true;
@@ -253,7 +311,6 @@
 					this.totalPage = resData.total;
 					this.listData = [...this.listData,...resList];
 					this.GetProductPrice()
-					this.showSkeleton = false
 					// 防上拉暴滑
 					this.pullFlag = false;
 					setTimeout(()=>{ this.pullFlag = true; },500)
@@ -273,11 +330,11 @@
 			GetProductPrice(){//获取价格
 				let productIdArr = [];
 				this.listData.map(item=>{// 0公开价格 1不公开价格 2仅对会员机构公开
-					productIdArr.push(item.productID)
+					productIdArr.push(item.p_id)
 				})
 				this.productIds = productIdArr.join(",");
 				this.ProductService.querySearchProductPrice({userId: this.userID,productIds:this.productIds}).then(response =>{
-					if (response.data) {
+					if(response.data) {
 						this.listData = this.ReturnNewProducts(this.listData,response.data);
 					}
 					this.priceLoading = false;
@@ -289,7 +346,7 @@
 				let NewArray = []
 				Array.map(item=>{
 					for (let i = 0; i < list.length; i++) {
-						if( item.productID == list[i].productId ){
+						if( item.p_id == list[i].productId ){
 							NewArray.push(Object.assign(item,list[i])) 
 						}
 					}
@@ -301,48 +358,90 @@
 				console.log(index)
 				if (index == 0) {
 					this.tabIndex = 0
-					this.isSearchSalesFirst = true;
-					this.isSearchMoodFirst = true;
-					this.isSearchPriceFirst = true;
+					this.isSearchSalesFirst = true
+					this.isSearchMoodFirst = true
+					this.isSearchPriceFirst = true
+					this.listQuery.sortType = ''
 					this.GetProductListInfo();
 				} else if (index == 1) {
 					this.tabIndex = 1
 					this.isSearchSalesFirst = false
-					this.isSearchMoodFirst = true;
-					this.isSearchPriceFirst = true;
+					this.isSearchMoodFirst = true
+					this.isSearchPriceFirst = true
 					this.isSearchSales = !this.isSearchSales
 					if(this.isSearchSales){
-						this.listQuery.sorttype = 5
+						this.listQuery.sortType = 1
 					}else{
-						this.listQuery.sorttype = 6
+						this.listQuery.sortType = 0
 					}
-					this.listQuery.sortfield = 'sales'
+					this.listQuery.sortField = 'p_sales'
 				} else if (index == 2) {
 					this.tabIndex = 2
-					this.isSearchSalesFirst = true;
-					this.isSearchPriceFirst = true;
+					this.isSearchSalesFirst = true
+					this.isSearchPriceFirst = true
 					this.isSearchMoodFirst= false
 					this.isSearchMood = !this.isSearchMood
 					if(this.isSearchMood){
-						this.listQuery.sorttype = 3
+						this.listQuery.sortType = 1
 					}else{
-						this.listQuery.sorttype = 4
+						this.listQuery.sortType = 0
 					}
+					this.listQuery.sortField = 'p_favorite'
 				} else if (index == 3) {
 					this.tabIndex = 3
-					this.isSearchSalesFirst = true;
-					this.isSearchMoodFirst = true;
+					this.isSearchSalesFirst = true
+					this.isSearchMoodFirst = true
 					this.isSearchPriceFirst= false
 					this.isSearchPrice = !this.isSearchPrice
 					if(this.isSearchPrice){
-						this.listQuery.sorttype = 1
+						this.listQuery.sortType = 1
 					}else{
-						this.listQuery.sorttype = 2
+						this.listQuery.sortType = 0
 					}
+					this.listQuery.sortField = 'p_price'
 				} else if (index == 4) {
 					this.searchClickFn()
 				}
-				// this.getQueryGoodslist()
+				this.GetProductListInfo()
+			},
+			handSearchList(){//确定筛选
+				if(this.searchCheckedId == ''){
+					this.listQuery.id = this.classData.bigTypeID
+				}else{
+					this.listQuery.id = this.searchCheckedId
+				}
+				this.leftDrawer = false;
+				this.rightDrawer = false;
+				this.GetProductListInfo()
+			},
+			SearchCondition(type,item,tiny){//选择筛选分类
+				this.listQuery.idType = type
+				switch(type){
+					case 1:
+						console.log('1级分类全部商品',item);
+						item.isChecked = !item.isChecked
+						this.searchCheckedId = item.bigTypeID
+						break;
+					case 2:
+						console.log('2级分类全部商品',item);
+						item.isChecked = !item.isChecked
+						if(item.isChecked){
+							this.searchCheckedId = item.smallTypeID
+						}else{
+							this.searchCheckedId = ''
+						}
+						break;
+					case 3:
+						console.log('3级分类',tiny);
+						tiny.isChecked = !tiny.isChecked
+						if(tiny.isChecked){
+							this.searchCheckedId = tiny.tinyTypeID
+						}else{
+							this.searchCheckedId = ''
+						}
+						break;
+				}
+				
 			},
 			navToDetailPage(id) {
 				this.isModallayer = true;
@@ -395,6 +494,7 @@
 		},
 		onReachBottom() {
 			if(this.totalPage>this.listData.length) {
+				console.log('2222222222222')
 				this.loadding = true
 				this.pullUpOn = true
 				this.GetOnReachBottomData()
@@ -680,7 +780,9 @@
 	/*screen*/
 	.drawer-container {
 		width: 560rpx;
-		padding: 80rpx 30rpx;
+		height: 100%;
+		padding: 80rpx 0;
+		box-sizing: border-box;
 		.drawer-title{
 			width: 100%;
 			height: 72rpx;
@@ -693,6 +795,52 @@
 			font-weight: bold;
 			background-color: #F7F7F7;
 		}
+		.drawer-main{
+			width: 100%;
+			height: auto;
+			box-sizing: border-box;
+			padding: 0 30rpx;
+			.drawer-item-cell{
+				width: 100%;
+				height: auto;
+				float: left;
+				.drawer-item-title{
+					width: 100%;
+					height: 82rpx;
+					line-height: 82rpx;
+					text-align: left;
+					font-size: $font-size-26;
+					color: $text-color;
+					float: left;
+				}
+				.drawer-item-main{
+					width: 100%;
+					height: auto;
+					float: left;
+					&.none{
+						margin-top: 24rpx;
+					}
+					.drawer-item-text{
+						display: inline-block;
+						float: left;
+						padding: 0 30rpx;
+						height: 56rpx;
+						border-radius: 28rpx;
+						background-color: #F7F7F7;
+						line-height: 56rpx;
+						text-align: center;
+						color: #999999;
+						font-size: $font-size-26;
+						margin-right: 24rpx;
+						margin-bottom: 24rpx;
+						&.checked{
+							background-color: #fef6f3;
+							color: $color-system;
+						}
+					}
+				}
+			}
+		}
 		.drawer-input{
 			width: 100%;
 			height: 80rpx;
@@ -707,6 +855,8 @@
 				border: none;
 				margin-top: 40rpx;
 				display: flex;
+				position: absolute;
+				left: 0;
 			}
 			.drawer-btn{
 				width: 210rpx;