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 @click="goCarlist" 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>
				</view>

				<view class="tkMain" @click.stop>
					<view class="selectItem" v-for="(item,index) in selectItemList" :key="index">
						<view class="name">{{item.name}}</view>
						<view class="priceRight">
							<view class="price">¥ {{item.money?item.money:0}}</view>
							<image @click="deleteItem(item,index)" src="../../static/img/icon_delete.png" mode=""
								style="width: 26rpx;height: 26rpx;margin-left: 10rpx;"></image>
						</view>
					</view>

				</view>

			</view>


		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				carInfo: '',
				itemList: [],
				leftIndex: 0,
				selectItemList: [],
				sumMoney: 0,
				qingdanShow: false,
			}
		},
		onShow() {
			this.carInfo = this.$store.state.carInfo
			console.log("车=", this.carInfo);
		},
		onLoad() {
			this.getData();
		},
		methods: {
			goCarlist() {
				uni.navigateTo({
					url: '../user/addCar/cailist'
				})
			},
			empty() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定要清空已选项目吗',
					success: function(res) {
						if (res.confirm) {
							that.selectItemList = [];
							that.qingdanShow = false;
							that.getData();
						}
					}


				});

			},
			deleteItem(item, index) {

				// 更新数据
				for (var i = 0; i < this.itemList.length; i++) {
					let dic = this.itemList[i];

					dic.list.forEach((item2, index) => {

						if (item.id == item2.ID) {

							item2.type = 0;
							dic.num -= 1;

						}

					})

				}


				this.selectItemList.splice(index, 1);
			},
			caidanClick() {
				this.qingdanShow = !this.qingdanShow
			},
			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];

				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;
		width: 600rpx;
		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;
		overflow-y: scroll;
		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;
	}

	.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 {

		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -2px 20px 0px rgba(153, 153, 153, 0.2);
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
		z-index: 11;

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

	.caidanTk {
		height: calc(100vh);
		width: 100vw;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		left: 0;
		top: 0;

	}

	.tkCont {
		height: 70vh;
		/* margin-top: calc(40vh ); */
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.caidanTkTop {
		width: 750rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0px 0px;
		display: flex;
		justify-content: space-between;
	}


	.topTopright {
		/* display: flex; */
		padding-top: 29rpx;
		margin-right: 24rpx;
	}

	.tkTopTitle {
		line-height: 90rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #3C3C3C;
		padding-left: 24rpx;
	}

	.empty {
		width: 86rpx;
		height: 42rpx;
		background: #EEEEEE;
		border-radius: 21rpx;
		text-align: center;
		color: #666666;
		font-size: 24rpx;
		line-height: 42rpx;

	}

	.tkMain {

		background: #FFFFFF;
		height: calc(70vh - 90rpx);
	}

	.selectItem {
		background-color: #FFFFFFF;
		padding: 30rpx 24rpx 0;
		display: flex;
		justify-content: space-between;

		color: #333333;
		font-size: 26rpx;
		align-items: center;
	}

	.priceRight {
		display: flex;
		align-items: center;
	}
</style>