JP-ChargeTeam51/pages/searchPile/stationAndPile/stationDetails.vue

<template>
	<view>
		<ujp-navbar title="站点详情">
			<view slot="right" style="margin-right: 10px;" @click="openModalBl=true">
				
				<view class="iconfont service">
					&#xe60d;
				</view>
			</view>
		</ujp-navbar>

		<u-alert-tips type="warning" @click="noticeShow=false" icon="volume-up-fill"
			v-show="noticeShow&&stationDetail.station&&stationDetail.station.maxSoc&&stationDetail.station.maxSoc!=100"
			:descStyle="{
			     fontSize: '28rpx',
			     color: '#ef7a30',
		 }" :show-icon="true"
			:description="'【充电SOC限制】为保障充电安全，并积极响应主管部门对新能源汽车充电安全工作，从即日起，该站充电设施SOC上限阈值为'+(stationDetail&&stationDetail.station&&stationDetail.station.maxSoc?stationDetail.station.maxSoc:'')+'%，即充电量达到满充电量'+(stationDetail&&stationDetail.station&&stationDetail.station.maxSoc?stationDetail.station.maxSoc:'')+'%时，充电设施将自动结束充电。'">

		</u-alert-tips>
		<u-notice-bar mode="vertical" font-size="36" :more-icon="true" @click="noticeShow=true"
			v-show="!noticeShow&&stationDetail.station&&stationDetail.station.maxSoc&&stationDetail.station.maxSoc!=100"
			:list="['【充电SOC限制】为保障充电安全，并积极响应主管部门对新能源汽车充电安全工作，从即日起，该站充电设施SOC上限阈值为'+(stationDetail&&stationDetail.station&&stationDetail.station.maxSoc?stationDetail.station.maxSoc:'')+'%，即充电量达到满充电量'+(stationDetail&&stationDetail.station&&stationDetail.station.maxSoc?stationDetail.station.maxSoc:'')+'%时，充电设施将自动结束充电。']">
		</u-notice-bar>


		<view class="head" v-if="stationDetail.station!=null">
			<img @click="previewImage(stationDetail.station.image)" :src="stationDetail.station.image" mode=""></img>
		</view>
		<!-- 站点详情 -->
		<view class="stationDetail">
			<view class="stationDetailHead">
				
			
			<!-- 标题 -->
			<view class="title">
				{{stationDetail.station.name}}
			</view>
			<!-- 标签 -->
			<view class="tags sign">
				<view class="tags1 sign-1"
					v-if="station.giveDiscount&&station.discountRatio&&station.discountRatio!=100">
					会员服务费{{discountRatio10(station.discountRatio)}}折</view>

				<view class="tags1 sign-3" v-if="station.category=='超充'">160kW超充站</view>
				<view class="tags1 sign-4" v-if="stationDetail.station.nightLowPriceEnabled">
					夜间超低价</view>

				<view class="tags1 sign-2" v-if="stationDetail.station.tagList.length != 0"
					v-for="(tagName,tagIndex) in stationDetail.station.tagList" :key="tagIndex">{{tagName}}</view>
			</view>
			<u-line color="#EEF2F0" margin="24rpx 0"></u-line>
			<!-- 定位 -->
			<template   v-if="stationDetail&&stationAddressList&&stationAddressList.length"  >
				
		
				<view class="position" v-for="(item ,i) in stationAddressList" :key="i" >
					
					<view class="block">
						{{item.areaTitle}}
					</view>
					<view class="address">
						{{item.address}}
					</view>
					<view class="distance"  @click="map(item)" >
						<view class="distance-icon">
							<img src="../../../assets/img/riFill-navigation-fill@1x.png" alt="">
						</view>
						<view class="distance-text">
							{{item.distance!=null&&item.distance>0.1 ? item.distance.toFixed(1)+'公里':'小于100米'}}
						</view>
					</view>
				</view>
					</template>
				<view class="position"  v-else   >
					
					<view class="address">
						{{stationDetail.station.address}}
					</view>
					<view class="distance"  @click="map()" >
						<view class="distance-icon">
							<img src="../../../assets/img/riFill-navigation-fill@1x.png" alt="">
						</view>
						<view class="distance-text"  v-if="stationDetail.station.distance">
							{{stationDetail.station.distance!=null&&stationDetail.station.distance>0.1 ? stationDetail.station.distance.toFixed(1)+'公里':'小于100米'}}
							
						</view>
					</view>
				</view>
			</view>
			<view class="stationDetailBody">
				
			
			<!-- 充电桩类型 -->
			<view class="type" v-if="numShowBl">
				<view class="type-box" 
				v-if="stationDetail.station.superNum"
				:class="{
					'checked':flag=='super',
					numShowview2:(stationDetail.station.superNum==0||stationDetail.station.slowNum==0||stationDetail.station.fastNum-stationDetail.station.superNum==0)
				}"
				  @click="flag!='super'?flag='super':flag=''">
					<view class="box-top">
						<view class="super">
							超
						</view>
						<view class="pile-type">
							直流超充
						</view>
					</view>
					<view class="pile-amount">
						<view class="super">
							{{stationDetail.station.superAvailableNum}}空闲
						</view>
						<view class="cut">
							|
						</view>
						<view class="sum">
							{{stationDetail.station.superNum}}总
						</view>
					</view>
					<!-- 尖角 -->
					<view class="angle" v-if="flag=='super'">
					</view>
				
				</view>
				<view class="type-box"
				 v-if="stationDetail.station.fastNum-stationDetail.station.superNum"
				:class="{
					'checked':flag=='fast',
					numShowview2:(stationDetail.station.superNum==0||stationDetail.station.slowNum==0||stationDetail.station.fastNum-stationDetail.station.superNum==0),
					numShowviewleft:stationDetail.station.slowNum
				}"
				 @click="flag!='fast'?flag='fast':flag=''">
					<view class="box-top">
						<view class="fast">
							快
						</view>
						<view class="pile-type">
							直流快充
						</view>
					</view>
					<view class="pile-amount">
						<view class="fast">
							{{stationDetail.station.fastAvailableNum-stationDetail.station.superAvailableNum}}空闲
						</view>
						<view class="cut">
							|
						</view>
						<view class="sum">
							{{stationDetail.station.fastNum-stationDetail.station.superNum}}总
						</view>
					</view>
					<!-- 尖角 -->
					<view class="angle" v-if="flag=='fast'">
					</view>

				</view>
				<view class="type-box" 
				v-if="stationDetail.station.slowNum"
				 :class="{
					 'checked':flag=='slow',
					numShowview2:(stationDetail.station.superNum==0||stationDetail.station.slowNum==0||stationDetail.station.fastNum-stationDetail.station.superNum==0)
				}"
				 @click="flag!='slow'?flag='slow':flag=''">
					<view class="box-top">
						<view class="slow">
							慢
						</view>
						<view class="pile-type">
							交流慢充
						</view>
					</view>
					<view class="pile-amount">
						<view class="free">
							{{stationDetail.station.slowAvailableNum}}空闲
						</view>
						<view class="cut">
							|
						</view>
						<view class="sum">
							{{stationDetail.station.slowNum}}总
						</view>
					</view>
					<!-- 尖角 -->
					<view class="angle" v-if="flag=='slow'">

					</view>
				</view>


			</view>
			<!-- 充电桩状态 -->
			<view class="pile-state" >
				<!-- 总计 -->
				<view class="statistics" >
					<view class="free">
						{{pilestate.num1}} 空闲
					</view>
					<view class="cut">
						|
					</view>
					<view class="busy">
						{{pilestate.num2}} 占用
					</view>
					<view class="cut">
						|
					</view>
					<view class="malfunction">
						{{pilestate.num3}}故障
					</view>
				</view>
				<!-- 充电枪详情 -->
				<view class="gun-details">
					<view class="item" v-for="(item,index) in stationDetailDevices" 
					v-show="getShow(item)"
					
					:key="index">
					<view class="itemShowOpen">
					<view class="itemView">
						<!-- 充电桩状态 -->
						<view class="state" 	v-if="item.device.online" :class="{
							//预约
							'charging a ':item.enableShare&&!item.enableShareWithinTime&&item.device.online,
							
							'charging b ':item.enableShare&&item.workStatus!=0,
							'charging c ':item.workStatus==2,
							//插枪
							'off-line a ':(item.workStatus == 0&&item.insertStatus&&stationDetail.station.stationType!=50),
							'off-line b':item.isRed&&item.workStatus!=2,
						}">
							<view class="state-icon">
								<img src="../../../assets/img/pileIcon.png" alt="">
							</view>
							<view class="state-text" v-if="item.workStatus == 0&&item.insertStatus&&stationDetail.station.stationType!=50">
								已插枪
							</view>
							<view class="state-text" v-else>
								<span v-if="item.workStatusText.length<4">{{item.workStatusText}}</span>
								<span v-else-if="item.workStatusText.length==4" style="    display: flex; flex-direction: column;">
									<span>{{item.workStatusText.substring(0,2)}}</span>
									<span>{{item.workStatusText.substring(2)}}</span>
								</span>
								<span v-else>{{item.workStatusText}}</span>
							</view>
						</view>
						<view class="state off-line" v-else>
							<view class="state-icon">
								<img src="../../../assets/img/pileIcon.png" alt="">
							</view>
							<view class="state-text ">
								离线
							</view>
						</view>
						
						<!-- 详细信息 -->
						<view class="infos">
							<view class="gun-name">
								<span v-if="item.sortNo">{{item.sortNo}}号<text>/</text></span>{{item.device.name}}{{item.device.gunList.length>1?'枪'+item.channelNo:''}}
							</view>
							<view class="else"  @click="setOpen(item)">
								<view class="gun-type" :class="{
									colorCA9DFF:item.device.chargingType=='超充',
									color185AC6:item.device.chargingType=='快充',
									color00B962:item.device.chargingType=='慢充',
								}">
									{{item.device.interfaceType}}{{item.device.chargingType}}
								</view>|
								<view class="voltage">
									{{item.device.chargingPower!=null?item.device.chargingPower+'kW':''}}
								</view>
								<view class="more">
									
									<u-icon v-show="openlist.get(item.id)" name="arrow-down" color="#999999" size="12"></u-icon>
									
									<u-icon v-show="!openlist.get(item.id)" name="arrow-up" color="#999999" size="12"></u-icon>
								</view>
							</view>
						</view>
						</view>
						
						<template v-if="!item.isRed&&item.enableShare&&item.enableShareWithinTime&&item.device.online">
							<!-- 充电按钮 -->
							<view class="charge"
								v-if="!enableAppointmentBl(item)"
								@click="book(item,item.isAppointment&&!item.insertStatus)"
																	:class="item.isAppointment&&!item.insertStatus?'':'not-open-tag'"
							>
								预约
							</view>
							<!-- 充电按钮 -->
							<view class="charge"
								:style="item.haveLock&&item.lockStatus==1?'background-color:#009ED7':''"
								@click="book2(item,item.enableShare&&item.enableShareWithinTime)"
								:class="{
									'not-open-tag':!(item.enableShare&&item.enableShareWithinTime),
									'not-enable-Appointment':enableAppointmentBl(item)
								}"
							>
								充电
							</view>
						</template>
						<!-- 电量 -->
												<view class="electric-quantity" 
												:class="{
												
													'not-enable-Appointment2':enableAppointmentBl(item)
												}"
												v-if="item.workStatus == 2 ">
													<img src="../../../assets/img/electricQuantity.png" alt="">
													<view class="percentage">
														{{item.soc?item.soc+'%':'充电中'}}
													</view>
												</view>
												
					</view>
					<view class="open-time" v-show="openlist&&openlist.get(item.id)" >
						<table>
							<tr v-if="pricesInfoCurrent">
								<td colspan="2">当前电价:
								<b style="color:#080808;margin-left: 4px;"
										v-if="(station&&station.giveDiscount||pricesInfoCurrent2.discountServicePrice)&&(!personInfo||personInfo.userType==1)">{{((pricesInfoCurrent.servicePrice*1000+pricesInfoCurrent.electricityPrice*1000)/1000).toFixed(2)}}元/度</b>
								<b  v-else style="color:#080808;margin-left: 4px;">{{pricesInfoCurrent.costPrice.toFixed(2)}}元/度</b>
									
								</td>
						
							</tr>
							<tr v-if="item.device.deviceAddress">
								<td colspan="2">充电桩地址:
									<span style="  margin-left: 4px;">{{item.device.deviceAddress}}</span>
								</td>
						
							</tr>
							<tr>
								<td>开放充电时段:</td>
						
						
								<td
									v-if="!item.enableShare||!(item.sharedWeekSettingList&&item.sharedWeekSettingList.length)">
									充电功能未开放</td>
						
						
								<template v-else v-for="(time,index) in  item.sharedWeekSettingList">
						
									<td :key="index" v-if="index==0">{{time.startTime}}-{{time.endTime}}</td>
						
								</template>
						
							</tr>
							<template v-if="item.enableShare" v-for="(time,index) in  item.sharedWeekSettingList">
						
								<tr :key="index" v-if="index==1">
									<td></td>
									<td>{{time.startTime}}-{{time.endTime}}</td>
								</tr>
						
							</template>
						
						
						
							<tr>
								<td>开放预约时段:</td>
						
						
								<td
									v-if="enableAppointmentBl(item)">
									预约功能未开放
								</td>
								<template v-else v-for="(time,index) in  item.reserveWeekSettingList">
									<td :key="index" v-if="index==0">{{time.startTime}}-{{time.endTime}}</td>
								</template>
							</tr>
							<template v-if="item.enableAppointment"
								v-for="(time,index) in  item.reserveWeekSettingList">
						
								<tr :key="index" v-if="index==1">
									<td></td>
									<td>{{time.startTime}}-{{time.endTime}}</td>
								</tr>
						
							</template>
						
						
						</table>
					</view>
				</view>
				
				</view>
				
			</view>

			<!-- 价格信息 -->
			<view class="price-infos" v-if="pricesInfoCurrent2">
				<view class="title">
					价格信息<text>（{{pricesInfoCurrent2.startTime}}-{{pricesInfoCurrent2.endTime}}）</text>
				</view>
				
				<view class="classify" v-if="(!personInfo||personInfo.userType==1)&&station&&(station.giveDiscount||(pricesInfoCurrent2.discountServicePrice))">
					<view class="item item-visitor">
						<view class="visitor">
							游客价
						</view>
						<view class="unit-price">
							<text>{{(pricesInfoCurrent2.servicePrice+pricesInfoCurrent2.electricityPrice).toFixed(2)}}</text>
							
							<text class="unit">元/度</text>
						</view>
					</view>

					<view class="item item-member">
						<view class="visitor">
							会员价
						</view>
						<view class="unit-price">
							
							<text>{{pricesInfoCurrent2.costPrice.toFixed(2)}}</text>
							
							<text class="unit">元/度</text>
							<text class="register" @click="gotoUrl('pages/login/login')">注册</text>
						</view>
					</view>
				</view>
				<view class="classify" v-else>
					
				
					<view class="item item-member-all">
						<view class="visitor">
							当前电价
						</view>
						<view class="unit-price">
							
							<text>{{pricesInfoCurrent2.costPrice.toFixed(2)}}</text>
							
							<text class="unit">元/度</text>
							
						</view>
					</view>
				</view>
				<!-- 提示 -->
				<p class="hint">*该价格为含服务费价格，实际价格以扫码价格为准。</p>
				<!-- 表格 -->
				<view class="chat-box">
					<view class="chat-infos">
						<view class="item">
							<view class="name">
								<view class="icon icon1">

								</view>
								<view class="text">
									时段
								</view>
							</view>
							<view class="value">
								{{pricesInfoCurrent2.startTime}}-{{pricesInfoCurrent2.endTime}}
							</view>

						</view>
						<view class="item">
							<view class="name">
								<view class="icon icon2">
									
								</view>
								<view class="text">
									电价
									
								</view>
							</view>
							<view class="value">
								{{pricesInfoCurrent2.electricityPrice.toFixed(2)}}元/度
							</view>

						</view>
						<view class="item">
							<view class="name">
								<view class="icon icon3">

								</view>
								<view class="text">
									服务费
								</view>
							</view>
							<view class="value"  v-if="station">
								<span v-if="(personInfo&&personInfo.userType==2)&&(station.giveDiscount||(pricesInfoCurrent2.discountServicePrice))">
								{{pricesInfoCurrent2.discountServicePrice.toFixed(2)}}元/度</span>
								<span v-else>{{pricesInfoCurrent2.servicePrice.toFixed(2)}}元/度</span>
							</view>
							
						</view>
					</view>
					
				</view>
				<view class="chat_hhh">
					<view class="chatTime" v-for="(item,i) in pricesInfo"
						:style="'width:'+getW(item)"
						 :class="{
							 current1: pricesInfoCurrent.startTime==item.startTime,
							 
							current2: pricesInfoCurrent2.startTime==item.startTime,
						 }"
						 @click="pricesInfoCurrent2=item"
					>
						
						<template v-if="station">
							<template  v-if="(personInfo&&personInfo.userType==2)&&(station.giveDiscount||(item.discountServicePrice))">
								<span class="chats1" :style="'height:'+getH(item.discountServicePrice)">{{item.discountServicePrice}}</span>
								
							</template>
							<template  v-else>
								<span class="chats1" :style="'height:'+getH(item.servicePrice)">{{item.servicePrice}}</span>
								
							</template>
						</template>
						
						
						
						<span class="chats2" :style="'height:'+getH(item.electricityPrice)">
							<span>{{item.electricityPrice}}</span>
							<span class="chats0" v-if="pricesInfoCurrent.startTime==item.startTime" >
								<span>当前</span>
								<span>时段</span>
								
							</span>
							<span class="chats9" v-else >
								<span>当前</span>
								<span>时段</span>
								
							</span>
						</span>
					</view>
				</view>
				<view class="chat_hhh_time">
					<span>00:00</span>
					<span>12:00</span>
					<span>24:00</span>
				</view>
			</view>
			
			<!-- 附加信息 -->
			<view class="overhead-infos"  v-if="stationDetail&&(stationDetail.station.describe||stationDetail.station.parkingDescription)">
				<view class="item"  v-if="stationDetail.station.describe" >
					<view class="title">
						营业时间
					</view>
					<view class="value">
						{{stationDetail.station.describe}}<text></text>
					</view>
				</view>
				<u-line margin="24rpx 0 " color="#F0F0F2"></u-line>
				<view class="item"  v-if="stationDetail.station.parkingDescription" >
					<view class="title">
						停车费
					</view>
					<view class="value" @click="()=>{if(stationDetail.station.parkingSimpleDescription){parkingTips=true}}">
						{{stationDetail.station.parkingDescription}}
						<text  v-if="stationDetail.station.parkingSimpleDescription" ><u-icon name="arrow-right" color="#999999" size="28"></u-icon></text>
					</view>
				</view>
			</view>
		</view>
</view>
<u-modal v-model="parkingTips" title="新能源汽车停车费说明" :title-style="{fontSize: '40rpx'}" confirm-text="知道了"
				confirm-color="#53b56b">
				<view style="padding: 15px;" v-html="stationDetail.station.parkingSimpleDescription"></view>
			</u-modal>
			<u-modal v-model="show" confirm-text="去看空闲桩" cancel-text="查看处罚规则" confirm-color="#00B962">
				<view class="" style="padding: 15px 20px;">
					因您近期存在预约超时未前往充电的违约行为，平台为保证每位车主的合理权益，
					对您作出停用预约充电功能1天的处罚。
					您可于<span style="color: #00b962;">2022年6月20日09时45分</span>后使用此功能。
				</view>
			</u-modal>
			<u-modal v-model="openModalBl" @confirm="confirmPhoneBl" confirm-text="拨打电话" confirm-color="#606266"
				:show-cancel-button="true" ref="uModal" :asyncClose="true" title="客服电话" :content="consumerPhone"
				:content-style="{fontSize: '24px',color: '#101010'}"></u-modal>
	</view>
</template>

<script>
	import * as indexAPI from '@/apis/index.js'
	import * as WxJsApi from '@/utils/wxJsApi.js'
	import MapLoader from '@/utils/AMap'

	import * as api from "@/apis/site.js"
	let _self;

	export default {
		data() {
			return {
				openModalBl: false,
				showNt: false,
				showNtStep: 0,
				showNtValue: 30,
				pricesInfoCurrent: null,
				pricesInfoCurrent2:null,
				noticeShow: false,
				parkingTips: false,
				stationId: '',
				pricesInfo: [],
				devicesId: '',
				elderMode: false,
				userId: '',
				show: false,
				showtips: true,

				list: [{
						"name": "充电桩"
					},
					{
						"name": "价格说明"
					}
				],
				current: 0,
				currentPos: {
					/*						name:'荆鹏软件园充电站',
											longitude: 112.28468,
											latitude: 30.307094,*/
				},
				stationAddressList: [],
				station: {},
				stationDetail: {

					devices: [],
					slowPrice: null,
					station: {},
					fastPrice: null

				},
				openlist: null,
				personInfo: null,
				info: {
					station: {

						time: '周一到周日 07:00~22:00(节假日除外)',
						/*						id:1,
												name:'荆鹏软件园充电站',
												longitude: 112.28468,
												latitude: 30.307094,
												type:'交流慢充',
												distance:0.1,
												address:'湖北省荆州市沙市区江津东路附155号'*/
					},
					prices: [

					],
					park: {
						price: '2小时免费停车'
					},
					uuid: '',
					setIntervalBool: true,
					priceList: [],
					platform: '',
					personInfo: {},
					consumerPhone: "",
					devices: {
						idleNum: 1,
						total: 6,
						items: [

						]
					},
				},
				flag: "",
				pilestate:{}
			}
		},

		onLoad(op) {
			uni.getSystemInfo({
				success: (res) => {
					// console.log("----------")
					// console.log(res.platform)
					this.platform = res.platform
				}
			})
			_self = this;

			//			document.getElementsByTagName('body')[0].style.setProperty('--mode',1)

			if (op.jg == '1') {
				this.current = 1;
			}
			if (op != null) {

				if (op.id != null && op.id != undefined) {
					this.stationId = op.id;

					this.getPriceList(op.id)

					this.getChargingStationDetail()


				}

			}
		},
		onHide() {
			this.setIntervalBool = false
			if (this.uuid) {
				clearInterval(this.uuid)
				this.uuid = '';
			}
		},
		onShow() {
			this.setIntervalBool = true
			if (!this.uuid) {
				this.uuid = setInterval(() => {
					if (this.setIntervalBool) {
						this.getChargingStationDetail(true)
					}
				}, 5 * 1000)
			}
		},
		onUnload() {
			if (this.uuid) {
				clearInterval(this.uuid)

			}
		},
		onReady() {

			var consumerPhone = this.carhelp.getConfig().consumerPhone
			// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if (consumerPhone) {
				this.consumerPhone = consumerPhone
			}

			this.elderMode = this.carhelp.get('getElderModeClass') == '长辈模式';

			if (this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')

			if (this.carhelp.getPersonInfo()) {
				this.userId = this.carhelp.getPersonInfo().id;
				this.personInfo = this.carhelp.getPersonInfo()


			}
			WxJsApi.getWxConfig(['getLocation', 'openLocation', 'addEventListener', 'scanQRCode']).then((res) => {
				// //(res)
			}).catch(error => {
				//(res)
			})

		},
		computed: {
			 
			numShowBl() {
				//true  tab false line

				var superNum = this.stationDetail.station.superNum;

				var fastNumZ = this.stationDetail.station.fastNum;
				var fastNum = fastNumZ - superNum;

				var slowNum = this.stationDetail.station.slowNum;
				if (superNum && fastNum == 0 && slowNum == 0) {
					return false
				}
				if (fastNum && superNum == 0 && slowNum == 0) {
					return false
				}
				if (slowNum && fastNum == 0 && superNum == 0) {
					return false
				}


				return true;
			},
			stationDetailDevices() {
				var sz = [];
				for (var i in this.stationDetail.devices) {
					var item = this.stationDetail.devices[i]
					for (var j in item.gunList) {
						var gun = item.gunList[j]
						gun.device = item;

						sz.push(gun);
					}
				}
				sz = sz.sort(function(it1, it2) {
					var i = 1;
					if (it1.device.online) {
						i = 1
					}
					if (it1.enableShare && !it1.enableShareWithinTime) {
						i = 1
					}
					i = it1.workStatus == 0 ? -1 : 1
					if (it2.workStatus == 0) {
						i = 1
					}
					if (!it2.enableShare || it2.enableShare && !it2.enableShareWithinTime) {
						i = -1
					}
					//console.log(it1,i)
					return i
				})

				return sz
			}
			
		},
		watch:{
			flag(b){
				this.pilestate=this.getpilestate()
			}
		},
		methods: {
			getpilestate() {
				var num1=0
				var num2=0
				var num3=0
				for (var i in this.stationDetailDevices) {
					var item = this.stationDetailDevices[i]
					if(this.getShow(item)){
						
						if(item.isRed&&item.workStatus!=2||!item.device.online){
							num3++
						}else if(item.workStatusText=='空闲中'){
							num1++
						}else{
							num2++
						}
						
					}
					
				}
				
				return {
					num1:num1,
					num2:num2,
					num3:num3
				}
			},
			getShow(item){
				if(this.flag==''){
					return true
				}else if(this.flag=='super'&&item.device.chargingType=='超充'){
					return true
				}else if(this.flag=='fast'&&item.device.chargingType=='快充'){
					return true
				}else if(this.flag=='slow'&&item.device.chargingType=='慢充'){
					return true
				}else {
					return false
				}
				
			},
			getH(item){
				
				return  item*100+'px'
			},
			getW(item){
				var t1=item.endTime.substring(0,2)
				var t2=item.startTime.substring(0,2)
				var k=parseInt(t1)-parseInt(t2);
				return  100/24*k+"%"
			},
			changeFlag() {
				this.flag = !this.flag
			},
			enableAppointmentBl(item) {
				return !item.enableAppointment || !(item.reserveWeekSettingList && item.reserveWeekSettingList.length);
			},
			confirmPhoneBl() {
				this.openModalBl = false;

				uni.makePhoneCall({
					phoneNumber: this.consumerPhone //仅为示例
				});

			},
			confirmPhone() {

				if (this.stationDetail.station && this.stationDetail.station.contactPhone) {
					uni.makePhoneCall({
						phoneNumber: this.stationDetail.station.contactPhone //仅为示例
					});
				}

			},
			getChargingStationDetail(bl) {
				if (!this.stationId) {

					return false
				}
				var _self = this;
				if (!bl) {
					uni.showLoading({

					})
				}

				let data = {
					stationId: this.stationId
				};
				var distance = null;
				if (bl && this.stationDetail && this.stationDetail.station) {
					distance = this.stationDetail.station.distance
					//防止重新获取定位
				}

				api.getChargingStationDetail(data).then(function(res) {
					uni.hideLoading()

					if (res && res.result && res.data) {

						let data = res.data;

						_self.stationDetail = data;
						//console.log(data)
						if (_self.stationDetail.station.contactPhone) {
							_self.consumerPhone = _self.stationDetail.station.contactPhone
						}

						if (_self.stationAddressList.length == 0) {
							_self.stationAddressList = _self.stationDetail.stationAddressList
						}

						if (_self.stationDetail.station.parkingDescription != null && _self.stationDetail.station
							.parkingSimpleDescription != null) {
							var tagList = _self.stationDetail.station.tagList;
							for (var i = 0; i < tagList.length; i++) {
								if (tagList[i] == _self.stationDetail.station.parkingDescription) {
									tagList.splice(i, 1);
								}
							}
							_self.stationDetail.station.tagList = tagList;
						}

						if (distance) {
							_self.stationDetail.station.distance = distance
						}
						var totalNum = 0;
						// _self.stationDetail.station.chargingType1=0;
						// _self.stationDetail.station.chargingType2=0;
						// _self.stationDetail.station.chargingType3=0;

						// _self.stationDetail.station.chargingType1run=0;
						// _self.stationDetail.station.chargingType2run=0;
						// _self.stationDetail.station.chargingType3run=0;
						// for(var  i in _self.stationDetail.devices ){
						// 	var device=_self.stationDetail.devices[i]
						// 	var keyset="";
						// 	if(device.chargingType=='超充'){
						// 		keyset="chargingType1";
						// 	}
						// 	if(device.chargingType=='快充'){
						// 		keyset="chargingType2";
						// 	}
						// 	if(device.chargingType=='慢充'){
						// 		keyset="chargingType3";
						// 	}
						// 	for (let j = 0; j < device.gunList.length; j++) {

						// 		if(device.gunList[j].workStatus==0){
						// 			_self.stationDetail.station[keyset+"run"]++;
						// 		}
						// 		_self.stationDetail.station[keyset]++;
						// 	}
						// }
						if (_self.openlist == null) {
							_self.openlist = new Map();


							for (var i in _self.stationDetail.devices) {
								var device = _self.stationDetail.devices[i]
								totalNum += device.gunList.length
								for (let j = 0; j < device.gunList.length; j++) {

									_self.openlist.set(device.gunList[j].id, false);
								}
								//console.log(_self.stationDetail.station)

							}
							_self.list[0].name = "充电桩(" + totalNum + ")"
						}


						if (_self.stationDetail.station.distance == null && !bl) {
							_self.getPoint();
						}
						_self.pilestate=_self.getpilestate()
					}

				})
			},
			setOpen(item) {
				
				var obj = this.openlist.get(item.id)
				if (obj) {
					obj = false;
					
				} else {
					obj = true
				}
				this.openlist.set(item.id, obj)
				this.$forceUpdate()
			},

			change(index) {
				this.current = index;
				this.items = this.list[index].items;
			},
			previewImage(img) {
				let imgs = [];
				imgs.push(img);
				uni.previewImage({
					urls: imgs,
					current: 0
				})
			},
			book2(item, bl) {
				if (bl) {

				} else {
					return
				}
				uni.navigateTo({
					url: '/pages/searchPile/stationAndPile/chargingPileDetails?isback=1&id=' + item.gunNo,
				})
				////('book'+JSON.stringify(item))
			},
			book(item, bl) {
				if (bl) {

				} else {
					uni.showToast({
						title: '当前设备不可预约'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/searchPile/apointment/apointmentRecharge?id=' + item.gunNo,
				})
				////('book'+JSON.stringify(item))
			},
			getPoint() {

				//			//('getPoint')
				WxJsApi.getLocation().then((res) => {

					var latitude = parseFloat(res.latitude);
					var longitude = parseFloat(res.longitude);
					var startLngLat = {
						longitude: longitude,
						latitude: latitude
					};
					var endLngLat = {
						longitude: _self.stationDetail.station.longitude,
						latitude: _self.stationDetail.station.latitude
					};
					_self.calculateDistance(startLngLat, endLngLat);
					_self.calculateDistanceList(startLngLat)
					/*uni.showToast({
						title:'getPoint'+JSON.stringify(res)
					})*/
					////('当前位置' +JSON.stringify(data))

					//this.latitude2 = latitude;
					//this.longitude2 = longitude;
					/*uni.showToast({
						title:JSON.stringify(res)
					})*/
					//this.message=JSON.stringify(res)
				}).catch(error => {
					// uni.showToast({
					// 	title: error //'getPoint'+JSON.stringify()
					// })
				})
			},
			calculateDistanceList(startLngLat) {
				if (_self.stationDetail && _self.stationDetail.stationAddressList && _self.stationDetail.stationAddressList
					.length) {

				} else {
					return
				}
				var list = _self.stationDetail.stationAddressList;
				MapLoader().then(AMap1 => {

					for (var i in list) {
						var endLngLat = list[i]
						var lnglat = new AMap.LngLat(startLngLat.longitude, startLngLat.latitude);
						var myDistance = lnglat.distance([endLngLat.longitude, endLngLat.latitude]);

						endLngLat.distance = myDistance / 1000;
						endLngLat.time = myDistance / 500;
					}
					_self.stationAddressList = list;
					_self.$forceUpdate()
					//console.log("11111111111111")
					//console.log(_self.stationDetail.stationAddressList)


				})

			},
			calculateDistance(startLngLat, endLngLat) {
				var _this = this;
				//直线距离
				MapLoader().then(AMap1 => {
					var lnglat = new AMap.LngLat(startLngLat.longitude, startLngLat.latitude);
					var myDistance = lnglat.distance([endLngLat.longitude, endLngLat.latitude]);
					_self.stationDetail.station.distance = myDistance / 1000;
					_self.stationDetail.station.time = myDistance / 500;
				})

				//
				return
				//驾车距离
				var _this = this;
				MapLoader().then(AMap1 => {

					this.AMap = AMap;

					var map = new AMap.Map("container", {
						center: [116.397559, 39.89621],
						zoom: 14
					});
					var lnglat = new AMap.LngLat(117.186602, 34.261579);

					//AMap.Walking
					AMap.plugin('AMap.Driving', function() {
						var driving = new AMap.Driving({
							// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
							policy: AMap.DrivingPolicy.LEAST_TIME
						})

						//var startLngLat = [116.379028, 39.865042]
						//var endLngLat = [116.427281, 39.903719]
						var startLngLat2 = [startLngLat.longitude, startLngLat.latitude]
						var endLngLat2 = [endLngLat.longitude, endLngLat.latitude]


						driving.search(startLngLat2, endLngLat2, function(status, result) {
							//(result)
							//(result.routes[0].time)//秒
							//(result.routes[0].distance)//米
							_self.stationDetail.station.distance = result.routes[0].distance /
								1000;
							_self.stationDetail.station.time = result.routes[0].time / 60;

						})

					})


				}, e => {
					//_this.mui.toast('地图加载失败');
					//('地图加载失败', e)
					console.log(e)
				})
			},
			getScanCode() {

				WxJsApi.scanQRCode(1).then(res => {
					if (res) {
						indexAPI.scanCode(res).then((response) => {

						}).catch(error => {
							uni.showToast({
								title: error,
								icon: "none"
							})
						})
					}
				}).catch(error => {

				})

			},
			getPriceList(id) {
				var formatNum = function(num) {
					let res = Number(num);
					return res < 10 ? '0' + res : res;
				};
				let data = {
					stationId: id
				};
				api.getChargingStationPrice(data).then((res) => {

					if (res.data.prices.length) {

						let date = new Date();
						this.station = res.data.chargingStation
						let hours = date.getHours();
						let minutes = date.getMinutes();
						let seconds = date.getSeconds();
						let date_str = formatNum(hours) + ':' + formatNum(minutes); //+ ' ' +formatWeek;


						this.pricesInfo = res.data.prices[0].priceList
						//console.log(this.pricesInfo)

						for (var i in this.pricesInfo) {
							var obj = this.pricesInfo[i]

							if (date_str >= obj.startTime && date_str <= obj.endTime) {
								obj.current = true;
								this.pricesInfoCurrent = obj
								this.pricesInfoCurrent2 = obj
								if (obj.electricityPrice == 0 || this.station.stationType == 50) {
									this.showtips = false
								}
							}

						}
					}

				})
			},


			navigate(item) {
				if (item) {
					if (item.areaTitle) {
						item.name = _self.stationDetail.station.name
					}

				} else {
					item = _self.stationDetail.station
				}
				//console.log(item)
				uni.showLoading({

				})
				WxJsApi.openLocation({
					latitude: parseFloat(item.latitude), //目的地latitude
					longitude: parseFloat(item.longitude), //目的地longitude
					name: item.name,
					address: item.address,
					scale: 15, //地图缩放大小，可根据情况具体调整
					success(res) {
						uni.hideLoading()
					},
					complete() {
						//	uni.hideLoading()
					}
				});
				// //('station'+JSON.stringify(_self.stationDetail.station))
				// window.location.href = "https://uri.amap.com/marker?position=" + _self.stationDetail.station.longitude +
				// 	"," + _self.stationDetail.station.latitude + "&name=" + _self.stationDetail.station.name;

			},
			charge() {
				//('扫码充电')
				//#ifdef MP-WEIXIN
				uni.scanCode({
					success: function(res) {
						uni.navigateTo({
							url: 'chargingPileDetails?pile=' + encodeURIComponent(JSON.stringify(data))
						})

					}
				})
				return;
				//#endif

				//('扫码充电1')
				uni.navigateTo({
					url: 'chargingPileDetails'
				})

			},
			priceDetail(t, id) {
				uni.navigateTo({
					url: 'chargePriceDetails?stationId=' + _self.stationDetail.station.id + "&type=" + t + "&id=" +
						id
				})
			},
			map(item) {
				this.navigate(item)
				//var item= _self.stationDetail.station
				//window.location.href="https://uri.amap.com/marker?position="+ item.longitude+","+item.latitude+"&name="+item.name;

				// //('map'+JSON.stringify(_self.station))
				// _self.station.address = 'xxxxxxxxxxxxx'
				// //this.carhelp.set(_self.stationDetail.station.id,_self.station);
				// uni.navigateTo({
				// 	url: 'stationDetailsMap?stationId=' + _self.stationDetail.station.id
				// 	//url:'stationDetailsMap?station='+encodeURIComponent(JSON.stringify(_self.station))

				// })
			},
			theme(type) {
				if (type == 'elder') {
					document.getElementsByTagName('body')[0].setAttribute('data-theme', type);

				} else {
					document.getElementsByTagName('body')[0].setAttribute('data-theme', type);

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.oldTextClassF{
		.stationDetail .title{
			font-size: 62rpx;
			
		}
		.stationDetail .position .address{
			font-size: 38rpx;
		}
		.stationDetail .type .type-box .box-top .pile-type{
			font-size: 38rpx;
			color: #101010;
		}
		.stationDetail .pile-state .gun-details .item .itemShowOpen .itemView .infos .gun-name{
			font-size: 48rpx;
		}
		.stationDetail .price-infos .title{
			font-size: 38rpx;
		}
		
	}
	.service {
		font-size: 24px;
		color: #101010;
		
	}
	page {
		background-color: #F2F2F2;

	}

	.head {
		width: 100%;
		height: 360rpx;

		img {
			width: 100%;
			height: 100%;
		}
	}

	// 站点详情
	.stationDetail {
		
		background-color: #F2F2F2;
		// background: linear-gradient(180deg, rgba(255,255,255,1) 59%,rgba(255,255,255,0) 100%);
		border-radius: 24rpx 24rpx 0px 0px;
		margin-top: -48rpx;
		color: #101010;
		z-index: 999;
		position: absolute;
		left: 0;
		right: 0;
		padding-bottom: 100rpx;
		.stationDetailHead{
			border-radius: 24rpx 24rpx 0px 0px;
				background-color: #FFF;
				padding: 24rpx 32rpx 12rpx 32rpx;
		}
		.stationDetailBody{
				padding: 24rpx 32rpx;
		}
		// 标题
		.title {
			color: rgba(16, 16, 16, 1);
			font-size: 40rpx;
			font-weight: bold;
		}

		// 标签
		.tags {
			display: flex;
			margin-top: 8rpx;
			flex-wrap: wrap;
			.tags1 {
				//border: 1px solid rgba(255, 139, 0, 1);
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 4px;
				//color: rgba(255, 139, 0, 1);
				font-size: 24rpx;
				text-align: center;
				padding: 0 8rpx 0 8rpx;
				margin-right: 16rpx;
				margin-bottom: 8rpx;
			}


			.sign-1 {
				background-color: rgba(255, 255, 255, 100);
				color: rgba(255, 139, 0, 100);
				border: 1px solid rgba(255, 139, 0, 100);
			}

			.sign-3 {
				background-color: rgba(255, 255, 255, 100);
				color: #8161FF;
				border: 1px solid #8161FF;
			}

			.sign-4 {
				background-color: rgba(255, 255, 255, 100);
				color: #00B962;
				border: 1px solid #00B962;
			}

			.sign-2 {
				background-color: rgba(255, 255, 255, 100);
				color: rgba(153, 153, 153, 100);
				border: 1px solid rgba(204, 204, 204, 100);
			}
		}

		// 定位
		.position {
			display: flex;
			justify-content: space-between;
			margin-bottom: 24rpx;

			.block {
				width: 96rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 50px;
				background-color: rgba(0, 185, 98, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 22rpx;
				text-align: center;
				padding:0 4rpx;
			}

			.address {
				width: 460rpx;
				//margin-left: 16rpx;
				color: rgba(16, 16, 16, 1);
				font-size: 32rpx;
				line-height: 44rpx;
			}

			.distance {
				display: flex;
				flex-direction: column;
				align-items: center;

				.distance-icon {
					width: 40rpx;
					height: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: rgba(0, 185, 98, 1);
					border-radius: 999px;
				}

				.distance-text {
					color: rgba(153, 153, 153, 1);
					font-size: 24rpx;
					margin-top: 16rpx;
				}
			}
		}

		// 充电桩类型
		.type {
			display: flex;
			justify-content: space-between;

			.checked {
				background-color: rgba(20, 23, 43, 1) !important;

				.pile-type {
					color: #fff !important;
				}

				.cut {
					color: #fff !important;
				}
			}
			.numShowview{
				width: 100% !important;
			}
			.numShowview2{
				width: 49% !important;
			}
			.type-box {
				//width: 334rpx;
				padding: 8rpx 0;
				width: 32%;
				border-radius: 8rpx;
				background-color: rgba(255, 255, 255, 1);
				position: relative;

				.box-top {
					display: flex;
					align-items: center;
					justify-content: center;
					.super,.fast,.slow{
						width: 40rpx;
						height: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 8rpx;
						
						color: rgba(255, 255, 255, 1);
						font-size: 20rpx
					}
					.super{
						background-color: #8161FF;
					}
					.fast {
						background-color: #1677FF;
					}

					.slow {
						background-color: #00B962;
					}

					.pile-type {
						color: #303133;
						font-size: 32rpx;
						margin-left: 4rpx;
					}
				}

				.pile-amount {
					display: flex;
					justify-content: center;
					.super{
						color:#8161FF;
						
						margin-right: 8rpx;
					}
					.fast{
						color: #1677FF;
						margin-right: 8rpx;
					}
					.free {
						color: #00B962;
						margin-right: 8rpx;
					}

					.sum {
						color: #999;
						margin-left: 8rpx;
					}
				}
			}

			// 尖角
			.angle {
				position: absolute;
				width: 0;
				height: 0;
				display: inline-block;
				border-top: 16rpx solid #000000;
				border-left: 16rpx solid transparent;
				border-right: 16rpx solid transparent;
				bottom: -16rpx;
				left: 167rpx;
			}
		}


		// 充电桩状态
		.pile-state {
			border-radius: 8px 8px 0 0;
			margin-top: 32rpx;
			background-color: rgba(255, 255, 255, 1);
			padding: 24rpx;

			// 总计
			.statistics {
				width: 406rpx;
				border: 1px solid rgba(204, 204, 204, 1);
				padding: 0 16rpx;
				height: 48rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #777777;

				.cut {
					color: #8FCFB1;
				}

			}

			// 充电枪详情
			.gun-details {

				.item{
					.open-time{
						border-bottom: 1px solid rgba(238, 242, 240, 100);
						// padding-left: 150rpx;
						// padding-bottom: 40rpx;
						    display: flex;
							    justify-content: center;
						line-height: 18px;
						font-size: 14px;
						color: rgb(136, 136, 136);
						
						p {
							text-indent: 112px;
						}
					}
					.itemShowOpen{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.itemView {
							margin-top: 24rpx;
							display: flex;
							align-items: center;

							.state {
								width: 100rpx;
								border-radius: 4px;
								background: linear-gradient(180deg, rgba(98, 228, 167, 1) 0%, rgba(0, 180, 95, 1) 100%);
								padding: 8rpx 0;
								display: flex;
								flex-direction: column;
								align-items: center;

								.state-text {
									color: rgba(255, 255, 255, 1);
									font-size: 22rpx;
								}
							}

							//充电中
							.charging {
								background: linear-gradient(180deg, rgba(154, 192, 255, 1) 0%, rgba(22, 119, 255, 1) 100%);
							}

							// 离线
							.off-line {
								background: linear-gradient(180deg, rgba(209, 204, 204, 1) 0%, rgba(148, 145, 145, 1) 100%);
							}

							// 详细信息
							.infos {
								margin-left: 16rpx;

								.gun-name {
									color: rgba(51, 51, 51, 1);
									font-size: 36rpx;
									font-weight: bold;
									    width: 320rpx;
									 white-space: nowrap;
									overflow: hidden;
									    text-overflow: ellipsis;
										
									text {
										color: #D6D6D6;
										font-weight: normal;
									}
								}
							}

							.else {
								display: flex;
								align-items: center;
								margin-top: 8rpx;

								.gun-type {
									//color: rgba(22, 119, 255, 1);
									margin-right: 8rpx;
								}

								.voltage {
									margin: 0 8rpx;
								}
							}
						}
					}
				}
				// 充电按钮
				.charge {
					width: 96rpx;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 50px;
					background-color: rgba(0, 185, 98, 1);
					color: rgba(255, 255, 255, 1);

					text-align: center;
					
					
				}
				.not-open-tag {
					background-color: rgba(192, 196, 208, 100);
				
				}
				.not-enable-Appointment{
					width: 168rpx ;
					height: 56rpx  ;
					line-height: 56rpx;
					font-size: 32rpx;
				}

				.electric-quantity {
					width: 126rpx;
					height: 52rpx;
					
					position: relative;

					img {
						width: 100%;
					}

					.percentage {
						    text-align: center;
						width: 86rpx;
						color: rgba(255, 255, 255, 1);
						font-size: 24rpx;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);

					}
					
				}
				
			}
		}

		// 价格信息
		.price-infos {
			background-color: #fff;
			padding: 24rpx;
			border-radius: 0 0 8px 8px;

			.title {
				color: rgba(51, 51, 51, 1);
				font-weight: bold;
				font-size: 32rpx;

				text {
					color: #777777;
					font-weight: normal;
				}
			}

			// 分类
			.classify {
				display: flex;
				justify-content: space-between;
				margin-top: 24rpx;

				.item {
					border-radius: 4px;
					background-color: rgba(230, 245, 237, 1);
					padding: 22rpx;
					
					.unit-price {
						font-size: 56rpx;
					}

					.unit {
						color: rgba(119, 119, 119, 1);
						font-size: 28rpx
					}
				}

				// 游客价
				.item-visitor {
					color: #333333;
					width: 39%;
				}

				// 会员价
				.item-member {
					color: #27B148;
					width: 60%;
				}
				// 会员价
				.item-member-all {
					color: #27B148;
					width: 100%;
				}
				
				.register {
					padding: 4rpx 12rpx;
					height: 24px;
					border-radius: 50px;
					background: linear-gradient(87.64deg, rgba(253, 129, 69, 1) 1.81%, rgba(252, 63, 3, 1) 100.04%);
					color: rgba(255, 255, 255, 1);
					font-size: 14px;
					text-align: center;
					margin-left: 38rpx;
				}
			}

			// 提示
			.hint {
				margin-top: 16rpx;
				color: rgba(119, 119, 119, 1);
			}

			// 图表
			.chat-box {
				border-radius: 4px;
				background-color: rgba(249, 249, 249, 1);
				padding: 24rpx;

				.chat-infos {

					.item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 32rpx;

						.name {
							display: flex;
							align-items: center;

							.icon {
								width: 56rpx;
								height: 28rpx;

								margin-right: 8rpx;
							}

							.icon1 {
								border: 2px solid rgba(0, 0, 0, 1);
							}

							.icon2 {

								background-color: rgba(87, 228, 160, 1);
							}

							.icon3 {
								background-color: rgba(220, 220, 220, 1);
							}

							.text {
								color: rgba(102, 102, 102, 1);
								font-size: 32rpx;
							}
						}

						.value {
							color: rgba(16, 16, 16, 1);
							font-size: 32rpx;
							font-weight: bold;
						}
					}
				}

				

			}

		}
		.chat_hhh_time{
			    display: flex;
			    justify-content: space-between;
		}
		.chat_hhh {
			background: #f9f9f9;
			text-align: center;
			min-height: 160px;
			    display: flex;
				font-size: 20rpx;
				.current1{
					.chats2{
						//border: 1px solid red;
					}
				}
				.current2{
					.chats1{
						border: 1px solid #333333;
						
						
						border-bottom: 0px;
					}
					.chats2{
						border: 1px solid #333333;
						background: #26FF6B !important;
						
						border-top: 0px;
					}
					
				}
				.chatTime{
					    min-width: 68rpx;
					 display: flex;
					 flex-direction: column;
					justify-content: flex-end;
					border :1px solid #f9f9f9;
					.chats0{
						    // background-color: #ff8b17;
						    // color: #ffecdd;
						    display: flex;
						    justify-content: center;
						  
							flex-wrap:wrap;
							flex-direction: column;
					}
					.chats9{
						       opacity: 0;
						    display: flex;
						    justify-content: center;
						  
							flex-wrap:wrap;
							flex-direction: column;
					}
					.chats1{
						background: #dcdcdc;
						min-height: 30rpx
					}
					.chats2{
						background: #80e0a6;
						    display: flex;
						    flex-direction: column;
						    justify-content: space-between;
					}
				}
		}
		// 附加信息
		.overhead-infos {
			margin-top: 24rpx;
			background-color: #fff;
			padding: 24rpx;
			border-radius: 8px;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;


				.title {
					color: rgba(119, 119, 119, 1);
					font-size: 32rpx;

				}

				.value {
					color: rgba(51, 51, 51, 1);
				}
			}
		}
	}
	.color185AC6 {
		color: #185AC6
	}
	
	.color00B962 {
		color: #00B962
	}
	
	.colorCA9DFF {
		color: #8161FF;
	}
</style>