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,'1')">
							<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="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>
</template>

<script>
	export default {
		data() {
			return {
				carInfo: '',
				itemList: [],
				leftIndex: 0,
			}
		},
		onShow() {
			this.carInfo = this.$store.state.carInfo
			console.log("车=",this.carInfo);
		},
		onLoad() {
			this.getData();
		},
		methods: {
			select(item,type){
				console.log('type'+type);
				item.type = type
			},
			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;
					
					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 24rpx;
		background-color: #FFFFFF;

	}

	.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: 30rpx 0;
	}

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