text

components/cm-module/listTemplate/immediatelyList.vue

@@ -1,6 +1,13 @@
 <template>
 	<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}}
+					<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" 
@@ -23,35 +30,77 @@
 			<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':''}">
-			<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-view ladder" v-if="item.ladderPriceFlag == '1'">阶梯价</text>
-									<text class="price-larger">￥{{item.retailPrice.toFixed(2)}}</text>
+		
+		<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>
+									<button class="add-cart-btn" @click.stop="operationHanld(item)">选择数量</button>
 								</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>
+						<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 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>
+								<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="iconfont icon-wenhao" @click.stop="repurchModel"></text>
+										</view>
+									</view>
+									<button class="add-cart-btn zuhe_btn" @click.stop="operationHanld(item)">选择数量</button>
 								</view>
 							</view>
-							<button class="add-cart-btn" @click.stop="operationHanld(item)">选择数量</button>
 						</view>
-					</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>
+						<view class="foot_conten" >
+							<view class="zuhe_foot-box">
+								<text>种类:10</text>
+								<text>总数:12450</text>
+								<text>总额:1215421</text>
+							</view>
+							<button type="default" class="buycart" @click.stop="operationHanld(item)">加入购物车</button>
+						</view>
+					</scroll-view>
+				</swiper-item>
+			</swiper>
 		</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">
@@ -106,6 +155,11 @@
 				cartQuantity: 0,
 				showRegularBtn: false,
 				isPrecedence:false,
+				tabIndex:0,
+				tabBars:[
+					{name:'单一商品',id:'danyi'},
+					{name:'组合商品',id:'zuhe'}
+				]
 			}
 		},
 		created() {
@@ -123,6 +177,9 @@
 					this.getProductAgainInfo(true);
 				}
 			},
+			changeTab(index){
+				this.tabIndex = index;
+				},
 			setScrollHeight() {
 				const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
 				this.windowHeight = windowHeight - 1;
@@ -219,6 +276,74 @@
 </script>
 
 <style lang="scss">
+	.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;
+	}
+	.zuhe_foot-box{
+		width: 70%;
+		float: left;
+	}
+	.zuhe_foot-box text{
+		margin-right: 30rpx;
+	}
+	.foot_conten .buycart{
+		width: 162rpx;
+		height: 64rpx;
+		background: #EFAF00 !important;
+		color: #fff;
+		font-size: 28rpx;
+		border-radius: 36rpx;
+		text-align: center;
+		line-height: 64rpx;
+		margin-top: 25rpx
+	}
+	.price-none{
+		font-size: 24rpx;
+		color: #666666;
+		}
+	.zuhe_title{
+		background:#FFFFFF;
+		height: 76rpx;
+		color: #E15616;
+		font-size: 28rpx;
+		border-bottom: 2rpx solid #E15616;
+		line-height: 76rpx;
+		padding-left: 30rpx;;
+	}
+	.nav-tab-line{
+		color: #E15616;	
+		position: absolute;
+		top: 20rpx;
+		right: 4rpx;
+		font-weight: bold
+		}
+	.addstyle{
+			background: linear-gradient(-42deg, transparent 28rpx, #E15616 0) top right;
+			color: #FFFFFF;
+		}
+	.tabstyle{
+		width: 128rpx;
+		height: 64rpx;
+		font-size: 26rpx;
+		display: inline-block;
+		border-radius: 10rpx;
+		text-align: center;
+		line-height: 64rpx;
+		border: 2rpx solid #EEEEEE;
+		position: relative;
+		margin-right: 12rpx;
+		
+		}
 	.commodity-list-wrapper {
 		scroll-view {
 			height: 100%;
@@ -249,14 +374,14 @@
 		left: 0;
 		z-index: 999;
 		.search-from{
-			width: 582rpx;
+			width: 326rpx;
 			height: 64rpx;
 			background: #F7F7F7;
 			border-radius: 14rpx;
 			float: left;
 			position: relative;
 			.input{
-				width: 500rpx;
+				// width: 500rpx;
 				height: 64rpx;
 				float: left;
 				line-height: 64rpx;
@@ -287,13 +412,14 @@
 			}
 		}
 		.search-btn{
-			width: 120rpx;
+			// width: 120rpx;
 			line-height: 64rpx;
 			text-align: center;
 			font-size: $font-size-28;
 			color: $color-system;
 			float: left;
 			background: #FFFFFF;
+			margin-left: 10rpx;
 		}
 	}
 	.all-type-list-content {
@@ -312,8 +438,21 @@
 			border: 2rpx solid #f3f3f3;
 		}
 	}
+	.zuhe-list-content{
+		width: 655rpx;
+		// height: 214rpx;
+		background: #fff;
+		border: 2px solid #FFF0DE;
+		display: flex;
+		flex-direction: row;
+		box-sizing: content-box;
+		margin-top: 10rpx;
+		border-radius: 14rpx;
+		margin: 10rpx auto;
+		padding: 20rpx;
+	}
 	.list-details-info {
-		width: 442rpx;
+		width: 100%;
 		flex-direction: column;
 		font-size: 26rpx;
 		position: relative;
@@ -393,11 +532,23 @@
 					font-size: $font-size-30;
 					display: inline-block;
 				}
+				.zuhe_price-larger{
+					color: #666666;
+					float: left;
+				}
+				.price-two{
+					color: #666666;
+					float: left;
+					margin-left: 25rpx;
+				}
+				.zuhe_list_zj{
+					color: #FF2A2A;
+				}
 				.price-view{
 					display: inline-block;
-					width: 78rpx;
-					border-radius: 18rpx;
-					font-size: $font-size-20;
+					width: 40rpx;
+					border-radius: 10rpx;
+					font-size: $font-size-24;
 					text-align: center;
 					color: #FFFFFF;
 					height: 36rpx;
@@ -411,6 +562,14 @@
 					}
 				}
 			}
+			.zuhe_list_price .price-view{
+				margin-top: 20rpx;
+				float: right;
+				margin-right: 0;
+			}
+			.zuhe_list_price{
+				width: 70%;
+			}
 			.list-price-none{
 				width: 100%;
 				.price-none{
@@ -431,12 +590,20 @@
 			height: 64rpx;
 			line-height: 64rpx;
 			border-radius: 32rpx;
-			color: #fff;
+			color: #333333;
 			font-size: 26rpx;
 			margin-right: 0;
-			background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
+			// background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
+			background: #FFFFFF;
+			border: 2rpx solid #C9C9C9;
+		}
+		.zuhe_btn{
+			float: right;
 		}
 	}
+	.zuhe_list_price{
+		display: block !important;
+	}
 	.cart-icon {
 		width: 92rpx;
 		height: 92rpx;
@@ -460,4 +627,7 @@
 			right: 0;
 		}
 	}
+	.zuhe_list_text{
+		margin-top: 20rpx;
+	}
 </style>

components/cm-module/modelAlert/immediately-Alert.vue

@@ -1,40 +0,0 @@
-<template name='alert'>
-	<!--阶梯价格弹窗 -->
-	<view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
-		<!-- 遮罩层 -->
-		<view class="mask"></view>
-		<view class="jieti_box">
-			<view class="jieti_box_one">
-				<view class="jieti_left" v-for="(ladder,index) in  ladderPriceList" :key="index">
-					<view>起订量:</view>
-					<view class="ladder-a">1-10</view>
-				</view>
-				<view class="jieti_right" v-for="(ladder,index) in  ladderPriceList" :key="index">
-					<view>价格:</view>
-					<view class="">￥12000.00</view>
-				</view>
-			</view>
-			<view id="addbtn"  >
-				知道了
-			</view>
-		</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			openjietiConfim(){//阶梯价格弹窗
-				this.specClass = 'show';
-			},
-		}
-	}
-</script>
-
-<style>
-
-</style>

seller/pages/cart/immediately.vue

@@ -3,7 +3,8 @@
 		<immediately-list ref="productList" 
 						  :search-status="true" 
 						  @operationConfim="hanldOperationConfim"
-						  @goCartPage="hanldToCartPage">
+						  @goCartPage="hanldToCartPage"
+						  >
 		</immediately-list>
 		<!--底部选择模态层弹窗组件 -->
 		<view class="popup spec" :class="specClass"  @touchmove.stop.prevent="discard" @tap="hideSpec">
@@ -15,6 +16,7 @@
 						<image :src="handleData.mainImage" mode=""></image>
 					</view>
 					<view class="layer-nunbox">
+						<view class="layer-nunbox-m">商品编码:{{item.price1Text}}</view>
 						<view class="layer-nunbox-t">
 							<view class="layer-nunbox-text">数量:</view>
 							<view class="number-box">
@@ -36,6 +38,29 @@
 				</view>
 			</view>
 		</view>
+		
+		
+		<!-- 加入购物车 -->
+		<view class="popup spec" :class="specClass"  @touchmove.stop.prevent="discard" @tap="hideSpec">
+			<!-- 遮罩层 -->
+			<view class="mask"></view>
+			<view class="layer" @tap.stop="discard">
+				<view class="content">
+					<view class="number-left">
+						<text>种类：</text>
+						<text>数量：</text>
+					</view>
+					<view class="number-right">
+						<view class="text">
+							总额：
+						</view>
+					</view>
+				</view>
+				<view class="btn">
+					<view class="button add" @click="getAddProductCart">确定</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -266,6 +291,7 @@
 					font-size: $font-size-28;
 					border-radius: 14rpx;
 					background: $btn-confirm;
+					margin-top: 20rpx;
 				}
 			}
 		}
@@ -306,29 +332,30 @@
 			}
 		}
 		.layer-smimg{
-			width: 114rpx;
-			height: 114rpx;
+			width: 158rpx;
+			height: 158rpx;
 			float: left;
 			border-radius: 10rpx;
 			margin-right: 24rpx;
 			image{
-				width: 114rpx;
-				height: 114rpx;	
+				width: 158rpx;
+				height: 158rpx;	
 				border-radius: 10rpx;
 			}
 		}
 		.layer-nunbox{
 			justify-content: space-between;
 			align-items: center;
-			width: 536rpx;
+			width: 510rpx;
 			height: 88rpx;
-			padding: 13rpx 0 0 0;
+			padding: 10rpx 0 0 0;
 			float: left;
 			.layer-nunbox-t{
 				width: 100%;
 				height:44rpx;
 				position:relative;
 				display: flex;
+				margin-top: 10rpx;
 				.layer-nunbox-text{
 					line-height: 44rpx;
 					font-size: $font-size-28;