test

components/cm-module/listTemplate/immediatelyList.vue

@@ -2,15 +2,15 @@
 	<view class="container commodity-list-wrapper" :style="{'overflow':(showSkeleton? 'hidden' : 'auto'),'height': (showSkeleton? windowHeight + 'px' : 'auto')}">
 		<view class="good-search clearfix" v-if="searchStatus">
 			<view class="nav-tab-bar u-f-ajc">
-				<block v-for="(tab,index) in tabBars" :key='tab.id'>
-					<view class="tabstyle u-f-ajc" :class="{'addstyle':tabIndex==index}" @click="changeTab(index)">{{tab.name}}
+				<block v-for="(tab,index) in tabBars" :key='tab.id' :class="{ current: tabIndex === index }">
+					<view class="tabstyle u-f-ajc" :class="{'addstyle':tabIndex==index}" @tap="changeTab(index)">{{tab.name}}
 					<i v-if='(tabIndex==index)' class='nav-tab-line'>√</i>
 					</view>
 				</block>
 			</view>
 			<view class="search-from name">
 				<text class="iconfont icon-iconfonticonfontsousuo1"></text>
-				<input class="input" 
+				<input class="input"  
 					   type="text" 
 					   focus
 					   confirm-type="search" 
@@ -21,8 +21,8 @@
 					   maxlength="20"/>
 				<text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
 			</view>
-			<view class="search-btn">
-				<button class="search-btn" type="default" @click.stop="searchOpertor">搜索</button>
+			<view class="search-btn" :class="tabIndex">
+				<button class="search-btn" type="default" @click.stop="searchOpertor(tabIndex)" >搜索</button>
 			</view>
 		</view>
 		<list-skeleton v-if="showSkeleton"></list-skeleton>
@@ -30,77 +30,83 @@
 			<image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"></image>
 			<text class="error-text">{{isShowEmptyText}}</text>
 		</view>
-		
+		<!-- 单一商品 -->
 		<view class="product-container" v-else :style="{paddingTop:searchStatus?'112rpx':''}" >
-			<swiper :current="tabIndex" style="height: 1190rpx;">
-				<swiper-item>
-					<scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower" scroll-y v-if="productList.length > 0">
-						<view v-for="(item,index) in productList" :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 class="list-details-info">
-								<text class="list-details-title">{{item.name}}</text>
-								<text class="list-details-specs">规格：{{item.unit?item.unit:''}}</text>
-								<text class="list-details-miniQuantity">起订量：{{item.minBuyNumber}}</text>
-								<view class="list-details-price">
-									<view class="list-shop">
-										<view class="list-price" >
-											<text class="price-view activity" v-if="item.isShowActFlg">活动价</text>
-											<text class="price-larger">￥{{item.retailPrice.toFixed(2)}}</text>
-											<text class="price-view ladder" v-if="item.ladderPriceFlag == '1'">阶</text>
-										</view>
-										<view class="list-price-none" v-if="item.repurchasePriceState">
-											<text class="price-none">￥{{item.discountPrice}}</text>
-											<text class="iconfont icon-wenhao" @click.stop="repurchModel"></text>
-										</view>
+			<view :class="tabIndex" v-if="tabIndex === 0">
+				<scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower" scroll-y v-if="productList.length > 0">
+					<view v-for="(item,index) in productList" :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 class="list-details-info">
+							<text class="list-details-title">{{item.name}}</text>
+							<text class="list-details-specs">规格：{{item.unit?item.unit:''}}</text>
+							<text class="list-details-miniQuantity">起订量：{{item.minBuyNumber}}</text>
+							<view class="list-details-price">
+								<view class="list-shop">
+									<view class="list-price" >
+										<text class="price-view activity" v-if="item.isShowActFlg">活动价</text>
+										<text class="price-larger">￥{{item.retailPrice.toFixed(2)}}</text>
+										<text class="price-view ladder" v-if="item.ladderPriceFlag == '1'">阶</text>
+									</view>
+									<view class="list-price-none" v-if="item.repurchasePriceState">
+										<text class="price-none">￥{{item.discountPrice}}</text>
+										<text class="iconfont icon-wenhao" @click.stop="repurchModel"></text>
 									</view>
-									<button class="add-cart-btn" @click.stop="operationHanld(item)">选择数量</button>
 								</view>
+								<button class="add-cart-btn" @click.stop="operationHanld(item)">选择数量</button>
 							</view>
 						</view>
-						<view v-if="showLoading && productList.length > 4 && !showRegularBtn">
-							<view class="loading-wrapper loading-wrapper-now" v-if="loadingNow">{{loadingText}}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view>
-							<view class="loading-wrapper loading-wrapper-btm" v-else>———<text class="btm-text">已至底部</text>———</view>
-						</view>
-					</scroll-view>
-				</swiper-item>
-				<!-- 组合商品list -->
-				<swiper-item>
-					<scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower" scroll-y>
-						<view class="zuhe_title">组合组合组合组合组合</view>
-						<view v-for="(item,index) in productList" :key="index" :id="item.id" class="zuhe-list-content commodity-list" @click.stop="navToDetailPage(item.productID)">
+					</view>
+					<view v-if="showLoading && productList.length > 4 && !showRegularBtn">
+						<view class="loading-wrapper loading-wrapper-now" v-if="loadingNow">{{loadingText}}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view>
+						<view class="loading-wrapper loading-wrapper-btm" v-else>———<text class="btm-text">已至底部</text>———</view>
+					</view>
+				</scroll-view>
+			</view>
+			<!-- 组合商品 -->
+			<view :class="tabIndex"  v-if="tabIndex === 1">
+				<scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower" scroll-y>
+					<view class="all-zuhe-list" v-for="(item,index) in combinationProduct" :key="index" :id="item.id">
+						<view class="zuhe_title" >{{item.name}}</view>
+						<view v-for="(pros,proIndex) in item.combinationProductList" :key="proIndex" :id="pros.productID" class="zuhe-list-content commodity-list" @click.stop="navToDetailPage(prop.productID)">
 							<view class="list-details-info">
-								<text class="list-details-title zuhe_list_text">商品编码：{{item.name}}</text>
-								<text class="list-details-specs zuhe_list_text">{{item.name}}</text>
+								<text class="list-details-title zuhe_list_text">商品编码：{{pros.productCode}}</text>
+								<text class="list-details-specs zuhe_list_text">{{pros.name}}</text>
 								<view class="list-details-price zuhe_list_price">
 									<view class="list-shop">
 										<view class="list-price zuhe_list_price" >
-											<text class="zuhe_price-larger zuhe_list_text" >价格:￥{{item.retailPrice.toFixed(2)}}</text>
-											<text class="price-two zuhe_list_text">总价:<text class="zuhe_list_zj">￥ 12451.00</text></text>
-											<text class="price-view ladder" v-if="item.ladderPriceFlag == '1'">阶</text>
-											<text class="price-view activity" v-if="item.isShowActFlg">活动价</text>
-									    </view>
-										<view class="list-price-none" v-if="item.repurchasePriceState">
-											<!--  -->
-											<text class="price-none">价格：￥{{item.discountPrice}}</text>
-											<text class="price-two">总价：<span>￥12401.00</span></text>
+											<text class="zuhe_price-larger zuhe_list_text" >价格:￥{{pros.retailPrice.toFixed(2)}}</text>
+											<text class="price-two zuhe_list_text">
+												总价:<text class="zuhe_list_zj">￥ {{pros.totalPrice.toFixed(2)}}</text>
+											<text class="price-view ladder" v-if="pros.ladderPriceFlag == '1'">阶</text>
+											</text>
+											<text class="price-view activity" v-if="pros.actStatus == '1'">活动价</text>
+										</view>
+										<view class="list-price-none" v-if="pros.repurchasePriceState">
+											<text class="price-none">价格：￥{{pros.discountPrice}}</text>
 											<text class="iconfont icon-wenhao" @click.stop="repurchModel"></text>
 										</view>
+										<view class="count">
+											<view class="number-box">
+												<view  class="iconfont icon-jianhao"  @click.stop="changeCountSub(pros)"></view>
+												<input class="btn-input" type="number" maxlength='4' v-model="pros.initProductNum" @blur="changeNnmber($event,pros)">
+												<view  class="iconfont icon-jiahao"   @click.stop="changeCountAdd(pros)"></view>
+											</view>
+										</view>
 									</view>
-									<button class="add-cart-btn zuhe_btn" @click.stop="operationHanld(item)">选择数量</button>
 								</view>
 							</view>
 						</view>
 						<view class="foot_conten" >
 							<view class="zuhe_foot-box">
-								<text>种类:10</text>
-								<text>总数:12450</text>
-								<text>总额:1215421</text>
+								<text>种类:{{item.productKind}}</text>
+								<text>总数:{{item.productTotalNum}}</text>
+								<text>总额:{{item.productTotalAmount}}</text>
 							</view>
-							<button type="default" class="buycart" @click.stop="operationHanld(item)">加入购物车</button>
+							<button type="default" class="buycart" @click.stop="addCart(item.combinationProductList)">加入购物车</button>
 						</view>
-					</scroll-view>
-				</swiper-item>
-			</swiper>
+					</view>
+				</scroll-view>
+			</view>
 		</view>
 		<view class="cart-icon" @click="toCartPage">
 			<text v-if="cartQuantity > 0" class="uni-badge uni-badge-error uni-small uni-badge--small icon-num">
@@ -117,7 +123,7 @@
 	import listSkeleton from '@/components/cm-module/listTemplate/listSkeleton'
 	import modalLayer from "@/components/modal-layer"
 	import uniStars from '@/components/uni-stars/uni-stars.vue'
-	import { getSellerProduct  } from "@/api/seller.js"
+	import { getSellerProduct,getcombinationProduct } from "@/api/seller.js"
 	import { mapState,mapMutations } from 'vuex';
 	export default{
 		name:'productList',
@@ -144,6 +150,8 @@
 				clubUserId: '',
 				scrollHeight: '',
 				productList: [],
+				combinationProduct:[],
+				zuheProductList:[],//组合商品列表
 				showLoading: false,
 				loadingNow: true,
 				loadingText: '上拉加载更多',
@@ -155,11 +163,12 @@
 				cartQuantity: 0,
 				showRegularBtn: false,
 				isPrecedence:false,
+				ladderPriceList:[],//是否 阶梯
 				tabIndex:0,
 				tabBars:[
 					{name:'单一商品',id:'danyi'},
 					{name:'组合商品',id:'zuhe'}
-				]
+				],
 			}
 		},
 		created() {
@@ -174,12 +183,14 @@
 		methods:{
 			scrolltolower() {
 				if(this.hasNextPage && this.pullFlag) {
-					this.getProductAgainInfo(true);
+					if(tabIndex ==0){
+						this.getProductAgainInfo(true);
+					}else if(tabIndex==1){
+						getcombinationProduct(true);
+					}
+					
 				}
 			},
-			changeTab(index){
-				this.tabIndex = index;
-				},
 			setScrollHeight() {
 				const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
 				this.windowHeight = windowHeight - 1;
@@ -195,6 +206,7 @@
 				getSellerProduct(params).then(response =>{
 					this.isShowWrapper = true
 					const responseData = response.data;
+					console.log(responseData)
 					if(responseData.results && responseData.results.length > 0){
 						this.hasNextPage = responseData.hasNextPage;
 						this.isShowEmpty = false;
@@ -237,17 +249,124 @@
 					this.$util.msg(error.msg,2000);
 				})
 			},
-			searchOpertor(){//搜索商品
-				if(this.searchInputVal == ''){
-					this.$util.msg('请输入商品关键词',2000)
+			searchOpertor(tabIndex){//搜索商品
+				if(tabIndex == 0){
+					if(this.searchInputVal == ''){
+						this.$util.msg('请输入商品关键词',2000)
+					}else{
+						this.pageNum = 1
+						this.showSkeleton = true;
+						this.getProductAgainInfo();
+					}
 				}else{
 					this.pageNum = 1
 					this.showSkeleton = true;
-					this.getProductAgainInfo();
+					this.getcombinationProduct();
+				}
+			},
+			getcombinationProduct(loadMore){//组合搜索商品
+				this.showLoading = true;
+				this.loadingNow = true;
+				this.loadingText = '加载中';
+				this.isShowEmpty = false;				
+				if(loadMore) {this.pageNum += 1;}
+				let params = {clubUserId:this.clubUserId,pageNum:this.pageNum,pageSize:this.pageSize,searchWord:this.searchInputVal}
+				getcombinationProduct(params).then(response =>{
+					this.isShowWrapper = true
+					const responseData = response.data;
+					// responseData.forEach((item,index){
+					// 	if(item.index!=0){
+							
+					// 	}
+					// }}
+					if(responseData.results && responseData.results.length > 0){
+						this.hasNextPage = responseData.hasNextPage;
+						this.isShowEmpty = false;
+						if(loadMore) {
+							console.log('1111')
+							this.combinationProduct = [...this.combinationProduct,...responseData.results];
+						} else {
+							console.log('2222')
+							this.combinationProduct = [...responseData.results];
+							
+							this.showSkeleton = false;
+						}
+						// 防上拉暴滑
+						this.pullFlag = false;
+						setTimeout(()=>{
+							this.pullFlag = true;
+						},500)
+						// 底部提示文案
+						if(this.hasNextPage) {
+							this.loadingText = '上拉加载更多';
+						} else {
+							this.showLoading = true;
+							this.loadingNow = false;
+						}
+					} else {
+						this.isShowEmpty = true;
+						this.isShowEmptyText ='暂无相关商品'
+					}
+				}).catch(error =>{
+					this.$util.msg(error.msg,2000);
+				})
+			},
+			changeCountAdd(pros){//商品数量加加
+				console.log(pros)
+				if(pros.initProductNum == 0){
+					pros.initProductNum = pros.minBuyNumber
+					this.processActivityPrice(pros)
+				}else if(pros.initProductNum >= pros.minBuyNumber){
+					pros.initProductNum++
+					this.processActivityPrice(pros)
+				}
+			},
+			changeCountSub(pros){//商品数量减减
+				if(pros.initProductNum==0){
+					this.$util.msg(`采购数量不能小于0`,2000);
+					return
+				}else{
+					pros.initProductNum--
+					this.processActivityPrice(pros)
+				}
+			},
+			changeNnmber(e,pros){//输入商品数量更新
+				let _value = e.detail.value;
+				if(!this.$api.isNumber(_value)){
+					pros.initProductNum = pros.minBuyNumber
+				}else if(_value < pros.minBuyNumber){	
+					this.$util.msg(`该商品最小起订量为${pros.minBuyNumber}`,2000);
+					pros.initProductNum = pros.minBuyNumber
+				}else{
+					pros.initProductNum = e.detail.value
+					this.processActivityPrice(pros)
+				}
+			},
+			processActivityPrice(pros){//单独处理活动价格和阶梯价格
+				let ladderPriceList = pros.ladderPriceList;
+				if(pros.ladderPriceFlag == '0' || pros.actStatus == 1){
+					pros.totalPrice = pros.initProductNum*pros.retailPrice
+				}else{
+					ladderPriceList.forEach((item,index)=>{
+						if(pros.initProductNum>=item.buyNum){
+							pros.retailPrice = item.buyPrice
+							pros.totalPrice = pros.initProductNum*item.buyPrice
+						}
+					})
 				}
 			},
 			operationHanld(prop){
-				this.$emit('operationConfim',prop)
+				this.$emit('operationConfim',prop);
+			},
+			addCart(prop){
+				console.log(prop)
+				},
+			changeTab(index){
+				this.tabIndex = index;
+				if(index == 0){
+					this.loadingNow = false;
+				}
+				this.$emit('changetab',index);
 			},
 			navToDetailPage(id) {
 				this.isModallayer = true;
@@ -276,22 +395,22 @@
 </script>
 
 <style lang="scss">
+	.all-zuhe-list{
+		background: #FFFFFF;
+	}
 	.foot_conten{
 		width: 100%;
-		position: fixed;
-		left:0px; 
-		bottom:100rpx; 
-		z-index: 9999;
 		background: #fff;
 		font-size: 28rpx;
 		text-align: center;
 		height: 120rpx;
 		line-height: 120rpx;
-		display: inline-block;
+		display: inherit;
+		margin-bottom: 20rpx;
 	}
 	.zuhe_foot-box{
-		width: 70%;
 		float: left;
+		margin-left: 40rpx;
 	}
 	.zuhe_foot-box text{
 		margin-right: 30rpx;
@@ -305,7 +424,7 @@
 		border-radius: 36rpx;
 		text-align: center;
 		line-height: 64rpx;
-		margin-top: 25rpx
+		bottom: -25rpx;
 	}
 	.price-none{
 		font-size: 24rpx;
@@ -316,7 +435,7 @@
 		height: 76rpx;
 		color: #E15616;
 		font-size: 28rpx;
-		border-bottom: 2rpx solid #E15616;
+		border-bottom: 4rpx solid #E15616;
 		line-height: 76rpx;
 		padding-left: 30rpx;;
 	}
@@ -538,8 +657,8 @@
 				}
 				.price-two{
 					color: #666666;
-					float: left;
-					margin-left: 25rpx;
+					float: right;
+					
 				}
 				.zuhe_list_zj{
 					color: #FF2A2A;
@@ -563,12 +682,41 @@
 				}
 			}
 			.zuhe_list_price .price-view{
-				margin-top: 20rpx;
-				float: right;
-				margin-right: 0;
+				margin-left:10rpx;
 			}
 			.zuhe_list_price{
 				width: 70%;
+				overflow: hidden;
+			}
+			.count{
+				margin-top: 10rpx;
+				float: right;
+				border: 1px solid #EEEEEE;
+				border-radius: 10rpx;
+				.number-box{
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					.iconfont{
+						font-size: $font-size-24;
+						padding:0 16rpx;
+						color: $text-color;
+						text-align: center;
+						line-height: 48rpx;
+						font-weight: bold;
+					}
+					.btn-input{
+						width: 48rpx;
+						height: 48rpx;
+						line-height: 48rpx;
+						background: #F8F8F8;
+						border-radius: 4rpx;
+						text-align: center;
+						font-size: $font-size-24;
+						border-right: 1px solid #EEEEEE;
+						border-left: 1px solid #EEEEEE;
+					}
+				}
 			}
 			.list-price-none{
 				width: 100%;

components/cm-module/productDetails/cm-attributes.vue

@@ -14,7 +14,10 @@
 		<view class="wrap-info">
 			<view class="info-viewT" :class="goodsData.isNoneDisabled ? 'none' : ''">
 				<view class="info-viewL tui-skeleton-fillet">品牌：<text>{{product.brandName == null? '其他' : product.brandName}}</text></view>
-				<view class="info-viewR tui-skeleton-fillet">包装规格：<text>{{product.unit}}</text></view>														
+				<view class="info-viewR tui-skeleton-fillet">包装规格：<text>{{product.unit}}</text></view>		
+			</view>
+			<view class="info-viewT" v-if="product.productCode!=''&&product.productCode!=null">
+				<view class="info-viewL tui-skeleton-fillet">商品编码：<text>{{product.productCode}}</text></view>
 			</view>
 		</view>
 		<view class="wrap-seve" :class="goodsData.isNoneDisabled ? 'none' : ''">
@@ -54,7 +57,12 @@
 </script>
 
 <style lang="scss">	
-
+	.bmCode{
+	float: left;
+	width: 702rpx;
+	padding: 20rpx 24rpx 0 24rpx;
+	border-bottom: 1px solid #F8F8F8	
+	}
 </style>