wxThird/pages/index/paint.vue

<template>
	<view class="box">
		<view class="top">
			<view class="left">
				<image :src="carInfo.brandLogo" mode="widthFix" class="brandLogo" v-if="carInfo.brandLogo">
					<img src="../../static/timg/nocar.png" alt="" class="brandLogo" v-else>
					<view class="car" v-if="carInfo.carModel">{{carInfo.carModel}}</view>
					<view class="car" v-else>暂无</view>
				</image>
			</view>
			<image src="../../static/img/big_rightArrow.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
		</view>

		<view class="main" v-if="itemList">
			<view class="mainLeft">
				<view class="mainLeftLine" v-for="(item,index) in itemList" :class="{lineLeftActive:leftIndex==index}"
					@click="leftClick(item,index)">
					<span class="leftTitle">{{item.name}}</span>
					<view class="lineNum" v-show="item.num!=0">{{item.num}}</view>
				</view>
			</view>


			<view class="mainRight">
				<view class="rightTop">{{itemList[leftIndex].name}}</view>
				<view class="mainRightLine" v-for="(item2,index) in itemList[leftIndex].list" :key="index">
					<view class="itemTop">
						<view class="itemName">{{item2.ItemName}}</view>

						<span class="rightState" v-if="item2.open==false" @click="changeState(item2)">展开<image
								src="../../static/img/icon_arrow_down.png" mode=""
								style="width: 20rpx;height: 11rpx; padding: 5rpx 8rpx;"></image>
						</span>

						<span class="rightState" v-else @click="changeState(item2)">收起<image
								src="../../static/img/icon_arrow_up.png" mode=""
								style="width: 20rpx;height: 11rpx; padding: 5rpx 8rpx;"></image>
						</span>

					</view>

					<!--  -->
					<view class="itemBox" v-if="item2.open==true">
						<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="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 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>

<script>
	export default {
		data() {
			return {
				carInfo: '',
				itemList: [],
				leftIndex: 0,
				selectItemList: [],
				sumMoney: 0,
			}
		},
		onShow() {
			this.carInfo = this.$store.state.carInfo
			console.log("车=",this.carInfo);
		},
		onLoad() {
			this.getData();
		},
		methods: {
			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
				
			},
			leftClick(item, index) {
				this.leftIndex = index
			},
			getData() {
				uni.showLoading({
					title: '加载中'
				});

				this.$http('openSheetMetalSprayPaint/queryPackageList', {

					// id: this.id,
				}, 'GET').then(res => {
					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) {
							item['open'] = false
						}
					})
					}
					
					this.itemList = List;
					
					console.log('列表=',this.itemList);

				})
			},
		}
	}
</script>

<style>
	.box {
		min-height: 100vh;
		background-color: #f4f5f7;
	}

	.top {

		background-color: #FFFFFF;
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left {
		display: flex;
		align-items: center;
	}

	.car {

		font-size: 28rpx;

		color: #333333;
		line-height: 40rpx;
		margin-left: 10rpx;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.brandLogo {
		width: 42rpx;
		height: 42rpx;
	}

	.main {
		display: flex;
		height: calc(100vh - 310rpx);
	}

	.mainLeft {
		width: 154rpx;
		background: #F4F5F7;
	}

	.mainLeftLine {
		color: #3C3C3C;
		padding: 30rpx 20rpx;
		font-size: 26rpx;
		text-align: center;
		position: relative;
	}

	.leftTitle {
		color: #333333;
		font-weight: bold;
		font-size: 26rpx;
	}

	.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;
	}

	.mainRight {
		width: 596rpx;
		background-color: #FFFFFF;
	}

	.rightTop {
		padding: 13rpx 24rpx;
		background-color: #F9F9F9;

		font-size: 26rpx;

		color: #959595;
		line-height: 37rpx;
	}

	.mainRightLine {
		padding: 30rpx 0;
		margin: 0 24rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.itemTop {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.itemName {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.rightState {
		font-size: 24rpx;
		color: #6666666;

	}

	.itemBox {
		display: flex;
		justify-content: space-around;
		/* border-bottom: 1rpx solid #EEEEEE; */
		padding-top: 30rpx;
	}

	.type {
		border-radius: 10rpx;

		border: 2rpx solid #CCCCCC;
		
		width: 50%;
		text-align: center;
	}
	.marginLeft{
		margin-left: 20rpx;
	}
	.typeName{
		height: 57rpx;
		color: #666666;
		font-size: 26rpx;
		line-height: 57rpx;
		border-bottom: 2rpx solid #EEEEEE;

	}
	.orangeLine{
		border: 2rpx solid #FF0000;
	}
	.orangeColor{
		color: #FF0000;
		
	}
	.renminbi{
		font-size: 22rpx;
		
	}
	.money{
		height: 76rpx;
		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>