1.会员卡

2.钣喷

pages/index/paint.vue

@@ -41,20 +41,90 @@
 
 					<!--  -->
 					<view class="itemBox" v-if="item2.open==true">
-						<view class="type" :class="{orangeLine:item2.type==1}" @click="select(item2,'1')">
+						<view class="type" :class="{orangeLine:item2.type==1}" @click="select(item2)">
 							<view class="typeName" :class="{orangeColor:item2.type==1}">喷漆</view>
 							<view class="money"><span class="renminbi">￥</span>{{item2.PSalePrice?item2.PSalePrice:'0'}}</view>
 						</view>
-						<view class="type marginLeft" :class="{orangeLine:item2.type==2}" @click="select(item2,'2')">
+						<view class="type marginLeft" :class="{orangeLine:item2.type==2}" @click="select2(item2)">
 							<view class="typeName" :class="{orangeColor:item2.type==2}">钣金喷漆</view>
 							<view class="money"><span class="renminbi">￥</span>{{item2.BPSalePrice?item2.BPSalePrice:'0'}}</view>
 						</view>
-					</view>
-				</view>
+					</view>
+					
+					
+				</view>
+				
 			</view>
 		</view>
 
-
+		
+		<!-- 底部 -->
+			<view class="bottom">
+				<view class="bottomLeft">
+					<view class="caidan" @click="caidanClick">
+						<image src="../../static/timg/icon_qingdan@2x.png" mode="" class="caidanImg"></image>
+						<view class="total" v-if="selectItemList.length>0">{{selectItemList.length}}</view>
+					</view>
+					<view>
+						<view class="heji"> <span class="heji1">合计</span> <span class="hejiNum">￥{{sumMoney}}</span> </view>
+						<view class="hejiMs">合计数量：{{selectItemList.length}}</view>
+					</view>
+				</view>
+				<view class="settlement" @click="settlement">确定</view>
+			</view>
+			
+			<view class="caidanTk" v-show="qingdanShow" @click="qingdanShow=false">
+				<view class="tkCont">
+					<view class="caidanTkTop">
+						<view class="tkTopTitle">清单</view>
+						<view class="topTopright">
+							<view class="empty" @click.stop="empty">清空</view>
+							<view class="close" @click="qingdanShow=false">X</view>
+						</view>
+					</view>
+					
+					<view class="tkMain" @click.stop>
+						<scroll-view scroll-y="true" class="tkMainSv">
+							<view class="qingdanLine" v-for="(item,index) in orderData">
+								<view class="mainTitle">{{item.name}}</view>
+								
+								<view class="goodsItem" v-for="(v,i) in item.listGoodsAll">
+									<view >
+										<image :src="v.picUrl" mode="" class="goodsImg" v-if="v.picUrl"></image>
+										<image src="../../static/img/noimg.png" mode="" class="goodsImg " v-else></image>
+									</view>
+									<view class="goodsItemRight" >
+										<view class="goodsItemName">{{v.showName}}</view>
+										<view class="goodsItemBottom">
+											<view class="goodssalePrice">￥{{v.salePrice||v.salePrice==0?v.salePrice:'-'}}}</view>
+											<view class="goodsNum">x{{v.qty}}</view>
+										</view>
+									</view>
+								</view>
+								<view class="goodsItem" v-for="(v,i) in item.listItem">
+									<view>
+										<image :src="v.picUrl" mode="" class="goodsImg" v-if="v.picUrl"></image>
+										<image src="../../static/img/icon_xiangmu.png" mode="" class="goodsImg " v-else></image>
+									</view>
+									<view class="goodsItemRight" >
+										<view class="goodsItemName">{{v.itemName}}</view>
+										<view class="goodsItemBottom">
+											<view class="goodssalePrice">￥{{v.salePrice||v.salePrice==0?v.salePrice:'-'}}</view>
+											<view class="goodsNum">x{{v.qty}}</view>
+										</view>
+									</view>
+								</view>
+							</view>
+					        <view class="ckBottom"></view>
+						</scroll-view>
+					</view>
+					
+				</view>
+				
+				
+			</view>
+		
+		
 	</view>
 </template>
 
@@ -64,7 +134,9 @@
 			return {
 				carInfo: '',
 				itemList: [],
-				leftIndex: 0,
+				leftIndex: 0,
+				selectItemList: [],
+				sumMoney: 0,
 			}
 		},
 		onShow() {
@@ -75,12 +147,79 @@
 			this.getData();
 		},
 		methods: {
-			select(item,type){
-				console.log('type'+type);
-				item.type = type
+			select(item){
+				
+				if(item.type != 1){
+					item.type = 1;
+				}
+			else {
+					item.type = 0;
+				}
+				console.log('type==',item.type);
+				this.sumNum();
+			},
+			select2(item){
+				
+				if(item.type != 2){
+					item.type = 2;
+				}
+				else {
+					item.type = 0;
+				}
+				console.log('type2==',item.type);
+				this.sumNum();
+			},
+			sumNum(){
+				
+				let item = this.itemList[this.leftIndex];
+				
+				if(this.sumCount){
+					this.sumCount = this.sumCount - item.num;
+				}
+				
+				var count = 0;
+				item.list.forEach((v, index) => {
+					if(v.type != 0){
+						count += 1;
+						
+					}
+					})
+				
+				item.num = count;
+				
+				//组合选中的
+				if(this.selectItemList.length){
+					this.selectItemList = [];
+				}
+				this.sumMoney = 0;
+				for (var i = 0; i < this.itemList.length; i++) {
+					this.itemList[i].list.forEach((item, index) => {
+					if(item.type == 1){
+						let dic = {
+							"id":item.ID,
+							"name":item.ItemName + "(喷漆)",
+							"money":item.PSalePrice
+						}
+						this.selectItemList.push(dic);
+						this.sumMoney += item.PSalePrice;
+					}
+					else if(item.type == 2){
+						let dic = {
+							"id":item.ID,
+							"name":item.ItemName + "(钣金喷漆)",
+							"money":item.BPSalePrice
+						}
+						this.selectItemList.push(dic);
+						this.sumMoney += item.BPSalePrice;
+					}
+				})
+				}
+				console.log('selectItemList==',this.selectItemList);
+				
 			},
 			changeState(item) {
-				item.open = !item.open
+				item.open = !item.open
+				
 			},
 			leftClick(item, index) {
 				this.leftIndex = index
@@ -97,6 +236,11 @@
 					uni.hideLoading();
 					let List = res.data;
 					
+					List.forEach((item, index) => {
+					for (const key in item) {
+						item['num'] = 0
+					}
+					})
 					for (var i = 0; i < List.length; i++) {
 						List[i].list.forEach((item, index) => {
 						for (const key in item) {
@@ -211,9 +355,10 @@
 	}
 
 	.mainRightLine {
-		padding: 30rpx 24rpx;
+		padding: 30rpx 0;
+		margin: 0 24rpx;
 		background-color: #FFFFFF;
-
+		border-bottom: 1rpx solid #EEEEEE;
 	}
 
 	.itemTop {
@@ -237,8 +382,8 @@
 	.itemBox {
 		display: flex;
 		justify-content: space-around;
-		border-bottom: 1rpx solid #EEEEEE;
-		padding: 30rpx 0;
+		/* border-bottom: 1rpx solid #EEEEEE; */
+		padding-top: 30rpx;
 	}
 
 	.type {
@@ -276,5 +421,256 @@
 		line-height: 76rpx;
 		font-size: 32rpx;
 		color: #FF0000;
+	}
+	
+	
+	.main{
+		display: flex;
+		height: calc(100vh - 410rpx);
+	}
+	.mainscrollView{
+		height: calc(100vh - 410rpx);
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+		box-sizing: content-box;
+		margin-bottom: 120rpx;
+	}
+	/*  #ifdef MP-WEIXIN  */
+	.main{
+		display: flex;
+		height: calc(100vh - 310rpx);
+	}
+	.mainscrollView{
+		height: calc(100vh - 310rpx);
+	}
+	/*  #endif  */
+	.mainLeft{
+		width: 146rpx;
+		background: #F5F5F5;
+	}
+	.mainRight{
+		width: 604rpx;
+	}
+	.mainLeftLine{
+		color: #3C3C3C;
+		padding: 30rpx 20rpx;
+		font-size: 24rpx;
+		text-align: center;
+		position: relative;
+	}
+	.lineNum{
+		position: absolute;
+		background: #FF270A;
+		width: 40rpx;
+		height: 26rpx;
+		text-align: center;
+		line-height: 26rpx;
+		font-size: 20rpx;
+		color: #FFFFFF;
+		border-radius: 13rpx;
+		top: 10rpx;
+		right: 10rpx;
+	}
+	.lineLeftActive{
+		background: #FFFFFF;
+	}
+	.nock{
+		width: 22rpx;
+		height: 22rpx;
+		border-radius: 50%;
+		border:2px solid #AEAEAE;
+		margin-top: 2rpx;
+		margin-right: 10rpx;
+	}
+	.imgPrivacy{
+		width: 36rpx;
+		height: 36rpx;
+		/* margin-top: 2rpx; */
+		/* margin-right: 10rpx; */
+	}
+	.contTopRight{
+		display: flex;
+		align-items: center;
+		width: 38rpx;
+		height: 36rpx;
+		margin-right: 10rpx;
+	}
+	.mainRightLine{
+		padding: 20rpx 20rpx 0 20rpx;
+	
+	}
+	.contTop{
+		display: flex;
+		justify-content: space-between;	
+	}
+	.listPackgeName{
+		font-size: 26rpx;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 600;
+		color: #3C3C3C;
+	}
+	.listPackgeMs{
+		font-size: 22rpx;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #999999;
+		padding-top: 5rpx;
+		line-height: 30rpx;
+	}
+	.contZk{
+		border-bottom: 1px solid #EEEEEE;
+		padding-bottom: 20rpx;
+	}
+	.goodsImg{
+		width: 120rpx;
+		height: 120rpx;
+		
+		border-radius: 11rpx;
+	}
+	.goodsItemLIne{
+		display: flex;
+		padding-top: 20rpx;
+		padding-bottom: 20rpx;
+	}
+	.goodsCont{
+		display: flex;
+		flex-direction:column;
+		justify-content: space-between;
+		padding-left: 20rpx;
+	}
+	.goodsContTop{
+		display: flex;
+		justify-content: space-between;
+		width: 400rpx;
+	}
+	.goodsItemName{
+		font-size: 26rpx;
+		font-weight: 400;
+		color: #3C3C3C;
+		width: 78%;
+		
+	}
+	.salePrice{
+		font-size: 32rpx;
+		font-weight: 500;
+		color: #FF4F00;
+	}
+	.replaceBox{
+		width: 100rpx;
+	}
+	.replace{
+		width: 75rpx;
+		height: 37rpx;
+		border-radius: 19rpx;
+		border: 2rpx solid #B9B9B9;
+		text-align: center;
+		line-height: 35rpx;
+		color: #707070;
+		font-size: 22rpx;
+		margin-left: 25rpx;
+	}
+	.contZkMain{
+		padding-top: 20rpx;
+	}
+	.asa{
+		width: 44rpx;
+		height: 44rpx;
+		line-height: 44rpx;
+		text-align: center;
+		background: #F4F5F7;
+		font-size: 30rpx;
+	}
+	.goodsCOntBOttom{
+		display: flex;
+		justify-content: space-between;
+	}
+	.as{
+		display: flex;
+		
+	}
+	.goodsPrice{
+		display: flex;justify-content: space-between;
+		padding-top: 10rpx;
+	}
+	.goodsPriceNum{
+		color: #F8F8F8;
+		font-size: 28rpx;
+	}
+	.asNum{
+		font-size: 24rpx;color: #333333;
+		padding: 0 18rpx;
+		height: 44rpx;
+		line-height: 44rpx;
+		background: #F4F5F7;
+		margin-left: 1px;
+		margin-right: 1px;
+	}
+	.itemNum{
+		font-size: 24rpx;
+		font-weight: 400;
+		color: #999999;
+	}
+	.bottom{
+		display: flex;
+		justify-content: space-between;
+	}
+	.caidanImg{
+		width: 50rpx;
+		height: 50rpx;
+	}
+	.bottomLeft{
+		display: flex;
+	}
+	.caidan{
+		padding-left: 33rpx;
+		padding-top: 35rpx;
+		padding-right: 33rpx;
+		position: relative;
+	}
+	.total{
+		position: absolute;
+		width: 40rpx;
+		height: 26rpx;
+		background: #FF270A;
+		line-height: 26rpx;
+		text-align: center;
+		color: #FFFFFF;
+		font-size: 20rpx;
+		top: 25rpx;
+		right: 15rpx;
+		border-radius: 13rpx;
+	}
+	.heji1{
+		font-size: 24rpx;
+		font-weight: 500;
+		color: #666666;
+	}
+	.hejiNum{
+		font-size: 32rpx;
+		font-family: PingFangSC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #FF4F00;
+	}
+	.hejiMs{
+		font-size: 24rpx;
+	    padding-top: 5rpx;
+		color: #999999;
+	}
+	.heji{
+		padding-top: 23rpx;
+	}
+	.settlement{
+		width: 203rpx;
+		height: 74rpx;
+		background: #D53533;
+		border-radius: 37rpx;
+		text-align: center;
+		line-height: 74rpx;
+		font-size: 30rpx;
+		font-family: PingFangSC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #FEFFFE;
+		margin-top: 23rpx;
+		margin-right: 32rpx;
 	}
 </style>

pages/index/vipCard.vue

@@ -97,28 +97,29 @@
 				</view>
 
 				</view>
-				<!-- 使用条款-->
-
-				<view class="shiyongBox" v-if="shiyongShow" @click="shiyongShow=false">
-					<view class="shiyongCont" @click.stop="">
-						<view class="shiyongContTop">
-							<view class="shiyongContTopTitle">使用条款</view>
-							<image src="../../static/img/icon_close.png" alt="" class="shiyongContTopX"
-								@click="shiyongShow=false"></image>
-						</view>
-						<view class="shiyonghtml">
-							<view v-html="useComment" v-if="useComment"></view>
-							<view v-else class="shiyongno">使用条款暂无内容</view>
-						</view>
-					</view>
-				</view>
-
+				
 
 
 			</view>
 
 			<!-- 无数据空白页 -->
-			<nodata v-if="vipData.cardTimeList.length==0"></nodata>
+			<nodata v-if="vipData.cardTimeList.length==0"></nodata>
+			
+			<!-- 使用条款-->
+			<view class="shiyongBox" v-if="shiyongShow" @click="shiyongShow=false">
+				<view class="shiyongCont" @click.stop="">
+					<view class="shiyongContTop">
+						<view class="shiyongContTopTitle">使用条款</view>
+						<image src="../../static/img/icon_close.png" alt="" class="shiyongContTopX"
+							@click="shiyongShow=false"></image>
+					</view>
+					<view class="shiyonghtml">
+						<view v-html="useComment" v-if="useComment"></view>
+						<view v-else class="shiyongno">使用条款暂无内容</view>
+					</view>
+				</view>
+			</view>
+			
 		</view>
 
 		<!-- 储值 -->
@@ -194,27 +195,28 @@
 				
 				</view>
 				
-				<!-- 使用条款-->
-
-				<view class="shiyongBox" v-if="shiyongShow" @click="shiyongShow=false">
-					<view class="shiyongCont" @click.stop="">
-						<view class="shiyongContTop">
-							<view class="shiyongContTopTitle">使用条款</view>
-							<image src="../../static/img/icon_close.png" alt="" class="shiyongContTopX"
-								@click="shiyongShow=false"></image>
-						</view>
-						<view class="shiyonghtml">
-							<view v-html="useComment" v-if="useComment"></view>
-							<view v-else class="shiyongno">使用条款暂无内容</view>
-						</view>
-					</view>
-				</view>
-
+				
 
 			</view>
 
 			<!-- 无数据空白页 -->
-			<nodata v-if="vipData.carMoneyList.length==0"></nodata>
+			<nodata v-if="vipData.carMoneyList.length==0"></nodata>
+			
+			<!-- 使用条款-->
+			<view class="shiyongBox" v-if="shiyongShow" @click="shiyongShow=false">
+				<view class="shiyongCont" @click.stop="">
+					<view class="shiyongContTop">
+						<view class="shiyongContTopTitle">使用条款</view>
+						<image src="../../static/img/icon_close.png" alt="" class="shiyongContTopX"
+							@click="shiyongShow=false"></image>
+					</view>
+					<view class="shiyonghtml">
+						<view v-html="useComment" v-if="useComment"></view>
+						<view v-else class="shiyongno">使用条款暂无内容</view>
+					</view>
+				</view>
+			</view>
+			
 		</view>
 
 	</view>