3-18 上线 处理后台返回 不同字段的值 并合成一个数组 页面上在取值

  根据需求

无论是哪个节点 实际需求那里取的是distributionInfoList里面的值

如果有发货信息 就取sendGoodDetailInfo 里面的值

但是待签收状态 消耗库存 只有组件的发货信息 是从 storageDeduct 取值

审核，备货，代签收，签收审核，完成 这五个节点下  组件逆变器，并网箱显示的页面是不一样的

数据就需要处理成这个结构

如下图，没有截图完全

<template>
	<view class="page_detail">
		<common-header>发货详情</common-header>
		<!-- 审核详情有两个tab  项目和配货-->
		<!-- 备货详情有两个tab 项目和配货 -->
		<!-- 签收详情有三个tab 项目配货和发货 -->
		<!-- 已完成详情有三个tab   项目配货和发货 -->

		<view class="tablist" style="background-color: #fff;position:fixed;width:100%"
			v-if="shipInfo.applyStatus && shipInfo.applyStatus!='CLOSED'">
			<u-tabs-swiper ref="tabs" name="cate_name" :current="current" font-size="32" bar-width="128"
				@change="subTabChange(1,$event)" :list="subtab" :is-scroll="false">
			</u-tabs-swiper>
		</view>


		<view class="list-content" :style="{paddingTop:(shipInfo.applyStatus!='CLOSED'?'110rpx':'32rpx')}">
			<!-- 项目 -->
			<view v-if="current==0">
				<view class="list-item" v-for="(item,index) in applyShipMentVOList" :key="index">
					<!-- {{item.projectNumber}} -->
					<view class="list-title">
						<view>发货申请单号: <span>{{shipInfo.id}}</span></view>
						<view class="copybox" @click="handleCopy(shipInfo.id)">
							<image src="@/static/yl_img/copy.png" mode="aspectFit"></image>
							<span>复制</span>
						</view>
					</view>
					<view class="list-detail">
						<view class="line">
							<view class="line_key">承租人：</view>
							<view class="line_value">{{item.tenant}}/{{item.tenantPhone}}</view>

						</view>
						<view class="line">
							<view class="line_key">安装地址：</view>
							<view class="line_value">{{item.installationAddress}}</view>
						</view>
						<view class="line">
							<view class="line_key">业务人员：</view>
							<view class="line_value">{{item.salesmanName}}/{{item.salesmanPhone}}</view>
						</view>
						<!-- {{formatTotal(item.componentVO.componentBlocks,item.componentVO.powerOfSingleComponent)}}{{'(' + item.componentVO.componentBlocks + '*' + item.componentVO.powerOfSingleComponent + ')'}} -->
						<view class="line">
							<view class="line_key">组件:</view>
							<view class="line_value" v-if="item.componentVO">
								{{item.designCapacity}}{{'('+item.componentVO.componentBlocks+'*'+item.componentVO.powerOfSingleComponent+')'}}
							</view>
							<view v-else>--</view>
						</view>
						<view class="line">
							<view class="line_key">逆变器:</view>
							<view class="line_value" v-if="item.inverterVO">
								{{ item.inverterVO.inverterQuantity + '*' + item.inverterVO.inverterCapacity + 'kW'}}
							</view>
							<view v-else>--</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 配货 /发货-->
			<view v-if="current==1">

				<!--司机/发货 -->
				<view class="tab-detail" v-if="sendGoodInfo&& shipInfo.applyStatus=='TO_BE_SIGNED'">
					<view class="tab-line">
						<view class="line-key">发货：</view>
						<view class="line-value">
							<view>{{sendGoodInfo.createTime}}</view>
						</view>
					</view>
					<view class="tab-line">
						<view class="line-key">司机：</view>
						<view class="line-value">
							<view>{{sendGoodInfo.driverName}}/{{sendGoodInfo.driverPhone}}</view>
						</view>
					</view>
					<view class="tab-line">
						<view class="line-key">车牌：</view>
						<view class="line-value">
							<view>{{sendGoodInfo.plateNumber}}</view>
						</view>
					</view>
					<view class="tab-line">
						<view class="line-key">仓库：</view>
						<view class="line-value">
							<view>{{sendGoodInfo.warehouse}}</view>
						</view>
					</view>
					<view class="tab-line">
						<view class="line-key">备注：</view>
						<view class="line-value">
							<view>{{sendGoodInfo.remark||'- -'}}</view>
						</view>
					</view>
				</view>

				<!--  备货中是有地址的，签收里面没有地址 -->
				<view class="address-box" v-if="shipInfo">
					<view class="line1">
						<span>{{shipInfo.consigneeName}}</span>
						<span style="margin-left: 10rpx;">{{shipInfo.consigneePhone}}</span>
					</view>
					<view class="line2">{{shipInfo.consigneeArea}} </view>
					<view class="line2">{{shipInfo.consigneeAddress}} </view>

				</view>

				<!-- 整车装发 -->
				<view class="tab-detail">
					<view class="title">
						{{loadingInfo && loadingInfo.sendGoodType=='CAR'?'整车装发':'消耗库存'}}
					</view>
					<view v-if="loadingInfo.sendGoodType=='STORAGE'|| loadingInfo.sendGoodType==null">
						当前组件可用库存满足实际需求。
						该清单中，逆变器和并网箱，需单独物流配送。
					</view>
					<view v-else>
						<view class="tab-line">
							<view class="line-key">车型匹配：</view>
							<view class="line-value">
								<view>{{loadingInfo.carModelName||'--'}}</view>
								<image src="../../../../static/help.png" mode="aspectFit" @click="handleHelp()"></image>
							</view>

						</view>
						<view class="tab-line">
							<view class="line-key">组件实际需求(块)：</view>
							<view class="line-value">{{loadingInfo.actualRequest||'--'}}</view>
						</view>
						<view class="tab-line">
							<view class="line-key">组件整车请购(块)：</view>
							<view class="line-value">{{loadingInfo.numberOfMaxPallets||'--'}}</view>
						</view>
					</view>


				</view>

				<view class="cell_box">
					<view class="cell-tab">
						<view v-for="(item,index) in cellList" :key="index"
							:class="cellTab==index?'cell-tab-item active':'cell-tab-item'" @click="handleCellTab(item)">
							{{item.text}}

						</view>
					</view>

				</view>
				<!-- 待审核状态下 组件 逆变器显示的 没有方框 并网箱显示的是写死的 -->
				<view v-if="shipInfo.sendGoodType=='CAR'">
					<view v-for="(item,ind) in cellList[cellTab].list" :key="ind">
						<view v-if="shipInfo.applyStatus=='TO_BE_REVIEWED' && cellTab!=2">
							<view class="general_item">
								<view>
									<view class="title">
										{{item.equipmentModel}}
									</view>
									<view class="sub-title">实际需求(块)：{{item.allCount}}</view>
								</view>
							</view>

						</view>
						<view v-else-if="shipInfo.applyStatus=='APPROVAL'">
							<view class="general_item">
								<view class="title">
									{{item.equipmentModel}}
								</view>
								<view class="sub-title">实际需求(块)：{{item.allCount}}</view>
								<view class="general_box" v-for="(sub,i) in item.subList" :key='i'>
									<view class="line">配货型号：{{sub.equipmentModel||'--'}}</view>
									<view class="line">配货品牌：{{sub.brand||'--'}}</view>
									<view class="line">配货数量(块)：{{sub.allCount||'--'}}</view>
									<view class="line">备注：{{sub.remark||'--'}}</view>
								</view>
							</view>
						</view>
						<view
							v-else-if="cellTab!=2&&(shipInfo.applyStatus=='IN_STOCK'|| shipInfo.applyStatus=='TO_BE_SIGNED' || shipInfo.applyStatus=='COMPLETED')">
							<view class="general_item">
								<view class="title">
									{{item.equipmentModel}}
								</view>
								<view class="sub-title">实际需求(块)：{{item.allCount}}</view>
								<view class="general_box" v-for="(sub,i) in item.subList" :key='i'>
									<view class="line">配货型号：{{sub.equipmentModel || '--'}}</view>
									<view class="line">配货品牌：{{sub.brand||'--'}}</view>
									<view class="line">配货数量(块)：{{sub.allCount || '--'}}</view>
									<view class="line">备注：{{sub.remark||'--'}}</view>

								</view>

							</view>
						</view>
						<view
							v-else-if="cellTab==2 && (shipInfo.applyStatus=='IN_STOCK'|| shipInfo.applyStatus=='TO_BE_SIGNED' || shipInfo.applyStatus=='COMPLETED')">
							<view class="general_item">

								<view class="general_box" v-for="(sub,i) in item.subList" :key='i'>
									<view class="line">配货型号：{{sub.equipmentModel || '--'}}</view>
									<view class="line">配货品牌：{{sub.brand||'--'}}</view>
									<view class="line">配货数量(块)：{{sub.allCount || '--'}}</view>
									<view class="line">备注：{{sub.remark||'--'}}</view>
								</view>
							</view>
						</view>
						<view v-else-if="shipInfo.applyStatus=='TO_BE_REVIEWED' && cellTab==2">
							<view class="general_item">
								<view class="title">
									并网箱
								</view>
								<view class="general_box">该清单中，并网箱相关数量规格，默认同逆变器一比一匹配。</view>
							</view>
						</view>
						<view v-else>
							<view class="general_item">
								<view class="title">
									{{item.equipmentModel}}
								</view>
								<view class="sub-title">实际需求(块)：{{item.allCount}}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<!-- STORAGE-->
					<view v-for="(item,ind) in cellList[cellTab].list" :key="ind">
						<view v-if="shipInfo.applyStatus=='TO_BE_REVIEWED' && cellTab!=2">
							<view class="general_item">
								<view class="title">
									{{item.equipmentModel}}
								</view>
								<view class="sub-title">实际需求(块)：{{item.allCount}}</view>
								<view class="general_box" v-for="(sub,i) in item.subList" :key='i'>
									<view class="line">配货品牌：{{sub.brand||'--'}}</view>
									<view class="line">配货数量(块)：{{sub.allCount || '--'}}</view>
								</view>

							</view>

						</view>
						<view v-else-if="shipInfo.applyStatus=='APPROVAL'">

							<view class="general_item">
								<view class="title">
									{{item.equipmentModel}}
								</view>
								<view class="sub-title">实际需求(块)：{{item.allCount}}</view>
								<view class="general_box" v-for="(sub,i) in item.subList" :key='i'>
									<view class="line">配货型号：{{sub.equipmentModel||'--'}}</view>
									<view class="line">配货品牌：{{sub.brand||'--'}}</view>
									<view class="line">配货数量(块)：{{sub.allCount || '--'}}</view>
									<view class="line">备注：{{sub.remark||'--'}}</view>
								</view>

							</view>
						</view>
						<view
							v-else-if="cellTab==0&& (shipInfo.applyStatus=='IN_STOCK'||shipInfo.applyStatus=='TO_BE_SIGNED' || shipInfo.applyStatus=='COMPLETED')">
							<view class="general_item">
								<view class="title">
									{{item.equipmentModel}}
								</view>
								<view class="sub-title">实际需求(块)：{{item.allCount}}</view>
								<view class="general_box" v-for="(sub,i) in item.subList" :key='i'>
									<view class="line">配货品牌：{{sub.brand||'--'}}</view>
									<view class="line">配货数量(块)：{{sub.allCount || '--'}}</view>
								</view>
							</view>
						</view>
						<view
							v-else-if="cellTab==1&& (shipInfo.applyStatus=='IN_STOCK'||shipInfo.applyStatus=='TO_BE_SIGNED' || shipInfo.applyStatus=='COMPLETED')">
							<view class="general_item">
								<view class="title">
									{{item.equipmentModel}}
								</view>
								<view class="sub-title">实际需求(块)：{{item.allCount}}</view>
								<view class="general_box" v-for="(sub,i) in item.subList" :key='i'>
									<view class="line">配货型号：{{sub.equipmentModel || '--'}}</view>
									<view class="line">配货品牌：{{sub.brand || '--'}}</view>
									<view class="line">配货数量(块)：{{sub.allCount || '--'}}</view>
									<view class="line">备注：{{sub.remark || '--'}}</view>
								</view>
							</view>
						</view>
						<view
							v-else-if="cellTab==2&& (shipInfo.applyStatus=='IN_STOCK'|| shipInfo.applyStatus=='TO_BE_SIGNED' || shipInfo.applyStatus=='COMPLETED')">
							<view class="general_item">
								<view class="general_box" v-for="(sub,i) in item.subList" :key='i'>
									<view class="line">配货型号：{{sub.equipmentModel || '--'}}</view>
									<view class="line">配货品牌：{{sub.brand||'--'}}</view>
									<view class="line">配货数量(块)：{{sub.allCount || '--'}}</view>
									<view class="line">备注：{{sub.remark||'--'}}</view>
								</view>
							</view>
						</view>
						<view v-else-if="shipInfo.applyStatus=='TO_BE_REVIEWED' && cellTab==2">
							<view class="general_item">
								<view class="title">
									并网箱
								</view>
								<view class="general_box">该清单中，并网箱相关数量规格，默认同逆变器一比一匹配。</view>
							</view>
						</view>
						<view v-else>
							<view class="general_item">
								<view class="title">
									{{item.equipmentModel}}
								</view>
								<view class="sub-title">实际需求(块)：{{item.allCount}}</view>
							</view>
						</view>
					</view>
					<view class="general_item"
						v-if="cellList[cellTab].list.length == 0 && shipInfo.applyStatus=='APPROVAL'">

						<view class="general_box">
							<view class="line">配货型号：--</view>
							<view class="line">配货品牌：--</view>
							<view class="line">配货数量(块)：--</view>
							<view class="line">备注：--</view>
						</view>
					</view>
					<view class="general_item"
						v-if="cellList[cellTab].list.length == 0 && shipInfo.applyStatus=='IN_STOCK' && cellTab==2">
						<view class="general_box">
							<view class="line">配货型号：--</view>
							<view class="line">配货品牌：--</view>
							<view class="line">配货数量(块)：--</view>
							<view class="line">备注：--</view>
						</view>
					</view>
					<view class="general_item"
						v-if="cellList[cellTab].list.length == 0 && shipInfo.applyStatus=='TO_BE_SIGNED' && cellTab==2">
						<view class="general_box">
							<view class="line">配货型号：--</view>
							<view class="line">配货品牌：--</view>
							<view class="line">配货数量(块)：--</view>
							<view class="line">备注：--</view>
						</view>
					</view>

				</view>





			</view>

		</view>
		<!-- 底部按钮 -->
		<view class="btn_box"
			v-if="(shipInfo.applyStatus=='TO_BE_SIGNED'|| shipInfo.applyStatus=='APPROVAL' ||shipInfo.applyStatus=='COMPLETED' )&& current==1 ">
			<view class="btn deactive" @click="toSignLog"> 签收审核日志</view>
			<view class="btn active" @click="toSignInformation">
				{{shipInfo.applyStatus=='APPROVAL' || shipInfo.applyStatus=='COMPLETED'?'签收信息':!shipInfo.againSign?'去签收':'重新签收'}}
			</view>
		</view>


		<u-modal ref="uModal" @confirm="handleOk()" :async-close="true" border-radius='32'
			:confirm-style="{'color':'#1C1C28','border-left':'1rpx solid #e4e7ed'}" :show-cancel-button='false'
			confirm-text='知道了' :show-title='false' v-model="showpopupModal">
			<view class="showpopupModal-slot">
				<rich-text :nodes="showpopupContent"></rich-text>
			</view>
		</u-modal>

	</view>




</template>

<script>
	import {
		getDistributionInfoList,
		shipMentRequestDetail,
		getSendGoodInfoList,
		getSendGoodInfoAndSignLogList
	} from '@/api/deliverGoods.js'
	export default {
		data() {
			return {
				id: '',
				type: '',
				cellTab: 0,
				subtab: [{
						cate_name: '项目',
						index: 0
					},
					{
						cate_name: '配货/发货',
						index: 1
					}
				],
				numTab: [{
					value: '全部',
					index: 0
				}],
				current: 0,
				showNoData: false,
				showpopupModal: false,
				showpopupContent: '',
				numCurrent: '',
				shipInfo: {},
				applyShipMentVOList: [], //项目列表
				DetailInfoList: [], //配货列表
				SendGoodInfoList: [],
				sendGoodDetail: [],
				loadingInfo: {},
				sendGoodInfo: {},
				distributionInfoList: [],
				cellList: [{
						text: '组件',
						type: 'COMPONENT',
						index: 0,
						list: []
					},
					{
						text: '逆变器',
						type: 'INVERTER',
						index: 1,
						list: [],
					}, {
						text: '并网箱',
						type: 'PARALLEL_CAGE',
						index: 2,
						list: [],
					}
				],

			}
		},
		methods: {
			handleOk() {
				this.showpopupModal = false
			},
			handleHelp() {
				this.showpopupModal = true
				this.showpopupContent = `${this.shipInfo.carModelName||'--'}` + `<br>` +
					`组件方案：${this.shipInfo.loadingScheme||'--'}` + `<br>` +
					`单托块数：${this.shipInfo.numberOfSinglePallets||'--'}` + `<br>` +
					`可申请装载组件(托)：${this.shipInfo.minLoadableComponents||'--'}～${this.shipInfo.maxLoadableComponents||'--'}` +
					`<br>` +
					`可申请装载组件(块)：${this.shipInfo.numberOfMinPallets||'--'}～${this.shipInfo.numberOfMaxPallets||'--'}`
			},

			subTabChange(type, e) {
				this.current = e
			},
			handleCellTab(item) {
				this.cellTab = item.index

			},
			handleCopy(value) {
				console.log(value)
				uni.setClipboardData({
					data: value, //复制的内容
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '已复制到剪贴板',
									icon: 'none'
								});
							}
						});
					}
				})
			},
			//去带签收信息列表
			toSignInformation() {
				this.$Nav.go('/pages/my/goods/deliver/signInformation', {
					shipMentRequestId: this.shipInfo.id,
					sendGoodInfoId: this.sendGoodInfo.id,
					applyStatus: this.shipInfo.applyStatus
				})
			},
			//签收日志 
			toSignLog() {
				this.$Nav.go('/pages/my/goods/deliver/signLog', {
					shipMentRequestId: this.shipInfo.id
				})

			},
			//项目列表 和详情
			shipMentRequestDetail() {

				shipMentRequestDetail({
					shipMentRequestId: this.id
				}).then(res => {
					let {
						code,
						result: {
							applyShipMentVOList,
							applyStatus
						}
					} = res.data
					this.applyStatus = applyStatus
					this.shipInfo = res.data.result
					this.applyShipMentVOList = applyShipMentVOList

					this.subtab[0].cate_name = `项目(${applyShipMentVOList.length})`
				}).catch(err => {})
			},
			//配货/发货 信息  处理数据的地方是这里
			getDistributionInfoList() {

				getDistributionInfoList({
					shipMentRequestId: this.id
				}).then(res => {
					let {
						code,
						result: {
							loadingInfo,
							distributionInfoList,
							sendGoodInfo,
							sendGoodDetail
						}
					} = res.data
					this.loadingInfo = loadingInfo
					this.sendGoodInfo = sendGoodInfo
					let detailList = sendGoodDetail || []
					console.log(this.shipInfo)
				


					distributionInfoList.forEach((item, index) => {
						let ind = -1;
						if (item.equipmentType == 'COMPONENT') {
							ind = 0
						} else if (item.equipmentType == 'INVERTER') {
							ind = 1
						} else {
							ind = 2
						}
						let subList = detailList.filter(v => item.equipmentModel == v.actualMatchModel)
						if (subList.length == 0 && this.type == 'IN_STOCK') {
							subList = [{}]
						}
						item.subList = subList
						item.actualCount = item.allCount
						this.cellList[ind].list.push(item)
					})
					if (loadingInfo.sendGoodType == 'STORAGE') {
						//如果消耗库存就从loadinginfo里面取数据
						let tempList = loadingInfo.storageDeduct || []
						let componentList = tempList.map(v => {
							return {
								actualMatchModel: v.actualMatchModel,
								equipmentModel: v.componentModel,
								brand: v.componentBrand,
								allCount: v.componentNumber
							}
						})
						this.cellList[0].list.forEach(item => {
							item.subList = componentList.filter(v => v.actualMatchModel == v
								.equipmentModel)
						})
					}
					let subList = detailList.filter(v => !v.actualMatchModel)
					if (subList.length == 0 && this.type == 'IN_STOCK') {
						subList = [{}]
					}
					this.cellList[2].list.push({
						subList
					})

				}).catch(err => {})

			},
		
			//去签收详情
			toSignDetail(item) {
				this.$Nav.go('/pages/my/goods/deliver/signGoodsDetail', {
					item: JSON.stringify(item)
				})
			},

			handleNum(status = '') {
				this.numCurrent = status
			},
			formatTotal(num, power) {
				let number = 0
				if (power.indexOf('kW') > -1) {
					number = power.split('kW')[0] * num
				} else {
					number = power * num
				}
				return number.toFixed(2) + 'kW'
			},
			getCount(key, list) {
				var count = list.reduce((acc, cur) => {
					return acc + cur[key]
				}, 0)
				return count
			},
			formatText(type, isAll) {
				if (isAll == 'all') {
					return '全部' + this.SendGoodInfoList.length
				} else {
					let num = this.SendGoodInfoList.map(item => item.sendStatus == type).length
					return num
				}
			}
		},

		mounted() {

		},
		onLoad(option) {
			this.type = option.type
			this.id = option.id
			console.log("onLoad")
			if (option.num == '1') {
				this.current = 1
			}
			// if (option.id) {
			// 	this.shipMentRequestDetail()
			// 	this.getDistributionInfoList()

			// }
			// if (this.type == 'TO_BE_SIGNED' || this.type == 'COMPLETED') {
			// 	this.subtab.push({
			// 		cate_name: `发货`,
			// 		index: 2
			// 	})

			// }

		},
		onShow() {
			if (this.id) {
				this.cellList = [{
						text: '组件',
						type: 'COMPONENT',
						index: 0,
						list: []
					},
					{
						text: '逆变器',
						type: 'INVERTER',
						index: 1,
						list: [],
					}, {
						text: '并网箱',
						type: 'PARALLEL_CAGE',
						index: 2,
						list: [],
					}
				]
				this.shipMentRequestDetail()
				this.getDistributionInfoList()
				// if (this.type == 'TO_BE_SIGNED' || this.type == 'COMPLETED') {
				// 	this.getSendGoodInfoList()
				// }

			}
		}
	}
</script>
<style lang="scss">
	.page_detail {
		.noDataPage {
			position: absolute !important;
			bottom: 0;
		}
	}
</style>
<style lang="scss">
	.tablist /deep/.u-badge {
		font-size: 32rpx !important;
		color: #0181ff !important;
		transform: translateY(12px) translateX(-48px) scale(0.8) !important;
	}

	.tablist /deep/.u-badge--bg--error {
		background-color: #fff;
	}


	.list-content {
		padding: 32rpx 32rpx;
		padding-top: 110rpx;
		padding-bottom: 200rpx;
		background-color: #F5F5F5;
		min-height: calc(100vh - 92rpx);
		// height: 100vh;

		.list-item {
			background-color: #fff;
			margin-bottom: 32rpx;
			font-size: 28rpx;
			color: #585b60;
			border-radius: 16rpx;
			z-index: 1;

			.list-title {
				display: flex;
				justify-content: space-between;
				padding: 24rpx 32rpx;
				border-bottom: 2rpx solid #EDEDF2;

				span {
					margin-left: 16rpx;
					color: #000000;
				}

				.copybox {
					color: #0181FF;

					uni-image {
						width: 44rpx;
						height: 44rpx;
						vertical-align: text-top;
					}

					span {
						color: #0181FF;
					}
				}

				.statusbox {
					// font-size: 28rpx;
				}
			}

			.list-detail {
				padding: 32rpx;
				box-sizing: border-box;

				.line {
					display: flex;
					margin-bottom: 24rpx;

					.line_key {
						width: 138rpx;
						color: #585b60;
					}

					.other {
						width: 88rpx;
					}

					.line_value {
						color: #000000;
						margin-left: 28rpx;
					}
				}
			}


		}

		.goods_num {
			display: flex;
			color: #585B60;
			font-size: 28rpx;
			margin-bottom: 32rpx;

			view {
				margin-right: 24rpx;
				border-radius: 40rpx;
				padding: 18rpx 30rpx;
				background-color: #fff;
				// border: 2rpx solid #	;
			}

			.num_act {
				background-color: #1D6FFF;
				color: #fff;
			}
		}
	}

	.address-box {
		padding: 32rpx;
		box-sizing: border-box;
		color: #585b60;
		background-color: #fff;
		margin-bottom: 32rpx;
		border-radius: 16rpx;

		.line1 {
			font-size: 32rpx;
			margin-bottom: 16rpx;
		}

		.line2 {
			width: 80%;
			font-size: 28rpx;
		}
	}

	.tab-detail {
		padding: 32rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #585B60;
		background-color: #fff;
		margin-bottom: 32rpx;
		border-radius: 16rpx;

		.title {
			color: #585B60;
			font-size: 32rpx;
			margin-bottom: 40rpx;
		}

		.tab-line {
			display: flex;
			justify-content: space-between;
			line-height: 48rpx;

			.line-value {
				display: flex;
				align-items: center;

				uni-image {
					width: 32rpx;
					height: 34rpx;
					margin-left: 32rpx;
					// display: inline-block;
				}
			}
		}
	}

	.cell_box {
		margin: 32rpx 0;
	}

	.cell-tab {
		width: 100%;
		height: 112rpx;
		background: #E8F4EE;
		border-radius: 64px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 16rpx;

		.cell-tab-item {
			width: 160rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #E8F4EE;
			text-align: center;
			color: #000000;
		}

		.active {
			color: #fff;
			background: rgba(87, 183, 176, 0.7);
			border-radius: 40rpx;

		}
	}




	.general_item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		box-sizing: border-box;
		color: #585B60;
		font-size: 28rpx;
		margin-bottom: 32rpx;

		.title {
			color: #585B60;
			margin-bottom: 32rpx;
			font-weight: 600;
		}

		.sub-title {
			margin-bottom: 32rpx;
		}

		.general_box {
			padding: 24rpx 32rpx;
			border: 2rpx solid #EDEDF2;
			border-radius: 16rpx;
			margin-top: 24rpx;

			&:first-child {
				margin-top: 0;
			}

			.line {
				line-height: 52rpx;
			}
		}
	}


	.cell_list {
		.cell {
			margin-bottom: 32rpx;

			.cell_title {
				display: flex;
				justify-content: space-between;
				font-weight: 600;
				height: 80rpx;
				line-height: 80rpx;
				background: #d7e7ff;
				border-radius: 16rpx;
				box-shadow: 0px 2px 6px 0px undefined;
				padding: 0 32rpx;
				font-size: 28rpx;

			}

			.cell_detail {
				margin-top: 10rpx;
				background: #ffffff;
				border-radius: 8px 0px 0px 0px;

				/deep/.u-tr {
					font-size: 24rpx;
				}

				/deep/.u-th {
					background-color: #fff;
					height: 76rpx;
					font-size: 24rpx;
					font-weight: 400;
				}

				.u-td {
					height: 76rpx;
					padding: 0 5px;
					font-size: 24rpx;
				}

			}
		}
	}

	.slot-content {
		padding: 40rpx 50rpx;
		text-align: center;
		color: #000000;
	}

	.showpopupModal-slot {
		padding: 40rpx 50rpx;
		color: #000000;
		text-align: left;
	}

	.btn_box {
		width: 100%;
		height: 160rpx;
		background-color: #fff;
		box-shadow: 0px -2px 6px 0px #EDEDF2;
		border-radius: 80rpx 80rpx 0px 0px;
		position: fixed;
		bottom: 0;
		// padding-top: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 80rpx;

		.btn {
			// height: 80rpx;
			border-radius: 40rpx;
		}

		.deactive {
			border: 2rpx solid #C3C3C9;
			padding: 16rpx 40rpx;
		}

		.active {
			background: #0181FF;
			color: #fff;
			padding: 24rpx 100rpx;

		}
	}
</style>