JP-ChargeTeam51/pages/index/index.vue

<template>
	<view>
		<ujp-navbar title="月卡购买" :show="false"></ujp-navbar>

		<!-- 头部图片 -->
		<view class="background">
			<view class="banner">
				<ujp-swiper bg-color="#fff" :img-mode="'scaleToFill'" height="120" :list="bannerList"
					@click="clickBanner" :name="'picUrl'">
				</ujp-swiper>

			</view>



			<!-- 选项列表 -->
			<view class="option-list">

				<view class="list-item" @click="getScanCode">
					<view class="icon iconfont" style="background: linear-gradient(45deg,#00B962,#5FE4A6);">
						&#xe61a;
					</view>
					<view class="text oldTextjp2" oldstyle="font-size: 18px;">
						扫码充电
					</view>

				</view>
				<view class="list-item" @click="fastRecharge">
					<view class="icon iconfont" style="background: linear-gradient(45deg,#23AD9B,#4BD2C0);">
						&#xe629;
					</view>
					<view class="text oldTextjp2" oldstyle="font-size: 18px;">
						快速充值
					</view>

				</view>
				<view class="list-item" @click="chargingRecord">
					<view class="icon iconfont" style="background: linear-gradient(45deg,#407DE4,#6FA5FF );">
						&#xe625;
					</view>
					<view class="text oldTextjp2" oldstyle="font-size: 18px;">
						充电记录
					</view>

				</view>
				<view class="list-item" @click="toSearchPile">
					<view class="icon iconfont" style="background: linear-gradient(45deg,#6366FF,#9D9FFF);">
						&#xe622;
					</view>
					<view class="text oldTextjp2" oldstyle="font-size: 18px;">
						附近站点
					</view>

				</view>

			</view>
			<!-- 充值活动 -->
			<view class=" top-up" v-if="activityList.length > 0 && !activityListShow">
				<view class="card-box">

					<view class="card" v-for="(item,index) in activityList" :key="item.id"
						@click="rechargeActivity(item)">
						<img :src="item.picUrl" alt="">
					</view>
				</view>
			</view>

			<u-modal v-if="false" v-model="showNt" class="showOss" :show-title="false" :show-confirm-button="false">
				<view class="slot-content">

					<u-image width="600" style="margin: auto;min-height: 250px;" mode="widthFix" v-show="showNtStep==0"
						src="@/assets/img/nt/f5surprised-1.png">

						<view slot="loading" style="height: 200px;">
							<u-loading mode="flower" size="186">

							</u-loading>

						</view>

					</u-image>
					<view style="color: #ecc07d;
							font-size: 64rpx;
							position: relative;
							top: -220rpx;
							right: -100rpx; width: 400rpx;" @click="showNtStepClick" v-show="showNtStep==0">
						<span>.</span>
					</view>

					<u-image width="600" style="margin: auto;;min-height: 250px;" mode="widthFix"
						v-show="showNtStep==1" src="@/assets/img/nt/f5surprised-2.png">

					</u-image>
					<u-image width="600" style="margin: auto;;min-height: 250px;" mode="widthFix"
						v-show="showNtStep==2" src="@/assets/img/nt/nt-activity-3.png">

					</u-image>
					<u-image width="500" style="color: #FFFFFF;
							font-size: 64rpx;
							position: relative;
							top: -540rpx;
							right: -60rpx;height: 0;
						" mode="widthFix" v-show="showNtStep==2" src="@/assets/img/nt/f5surprised-3.png">

					</u-image>

					<u-image width="36px" v-show="showNtStep==1||showNtStep==2" style="margin: auto; " mode="widthFix"
						@click="showNt=false" src="../../assets/img/if-close-line-circled.png"></u-image>
					<view style="color: #ecc07d;
							font-size: 72rpx;
							position: relative;
							top: -280rpx;
							right: -144rpx; width: 310rpx;" @click="showNtStepClick" v-show="showNtStep==2">
						<span>.</span>
					</view>
					<view style="color: #FFFFFF;
							font-size: 64rpx;
							position: relative;
							top: -688rpx;
							right: -80rpx;" :style="{
						right:showNtValue>99?'-80rpx':(showNtValue>9?'-95rpx':'-110rpx')
					}" v-show="showNtStep==1"><b>{{showNtValue}}</b>
						<span style="font-size: 28rpx;">元</span>
					</view>

					<view style="color: #ecc07d;
					 		font-size: 72rpx;
					 		position: relative;
					 		top: -390rpx;
					 		right: -144rpx; width: 310rpx;" @click="showNtStepClick" v-show="showNtStep==1">
						<span>.</span>
					</view>

					<view v-show="showNtStep==1" style="color: #ecc07d;
					 		font-size: 32rpx;
					 		position: relative;
					 		top: -180rpx;
					 		right: -60rpx; width: 440rpx;">注:逢5红包用完后下次才可以领取新红包哦！</view>


				</view>
			</u-modal>


			<u-modal v-model="showOss" class="showOss" :show-title="false" :show-confirm-button="false">
				<view class="slot-content">
					<u-image width="250px" style="margin: auto;min-height: 250px;" mode="widthFix"
						@click="clickBanner(showOssIndex,true)" :src="showOssImg">

						<view slot="loading" style="height: 200px;">
							<u-loading mode="flower" size="186">

							</u-loading>

						</view>

					</u-image>
					<u-image width="36px" style="margin: auto;" mode="widthFix" @click="showOss=false"
						src="../../assets/img/if-close-line-circled.png"></u-image>

				</view>
			</u-modal>
			<!-- 专享优惠券 -->
<!-- 
<view class="couponmain" v-if="false&&bannerListTop[showTopIndex].topmodel=='coupon'">
						<view class="main">

							
							<view class="exclusive">
								<p class="exclusive1">恭喜你</p>
								<p class="exclusive2">获得{{bannerListTop[showTopIndex].value}}元月卡卷</p>
								<view class="img">
									<img src="../../assets/img/Frame915.png" alt="">

									<view class="num">
										{{bannerListTop[showTopIndex].value}}<span class="unit">元</span>
									</view>

									<view class="unit2">月卡优惠券</view>
									<view class="ticket-info">
										<view class="ticket-name">
											{{bannerListTop[showTopIndex].text}}

										</view>

									</view>
								</view>
								<view class="exclusive-text"> 持月卡在指定站点充电,充电服务费全免</view>
								<button class="exclusive-btn" @click="clickBannerTop()" shape="circle">立即开通</button>


							</view>

						</view>
					</view> -->
			<u-modal v-model="showTop" class="showOss" :show-title="false" :show-confirm-button="false">
				<view class="slot-content" >
					<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000"
									:duration="500">
							<swiper-item class="swiperitem" v-for="(item,i) in bannerListTop" :key="i">
										
					
					
					<u-image width="250px;"  bgColor="#ff000000" style="margin: auto;min-height: 250px;"
						mode="widthFix" @click="clickBannerTopI(i)" :src="item.picUrl">
						<view slot="loading" style="height: 200px;">
							<u-loading mode="flower" size="186">
					
							</u-loading>
					
						</view>
					
					</u-image>
					
						</swiper-item>
						<swiper-item class="swiperitem" v-if="showNt">
							
							
								<u-image width="600" style="margin: auto;min-height: 250px;" mode="widthFix" v-show="showNtStep==0"
									src="@/assets/img/nt/f5surprised-1.png">
							
									<view slot="loading" style="height: 200px;">
										<u-loading mode="flower" size="186">
							
										</u-loading>
							
									</view>
							
								</u-image>
								<view style="color: #ecc07d;
										font-size: 64rpx;
										position: relative;
										top: -220rpx;
										right: -100rpx; width: 400rpx;" @click="showNtStepClick" v-show="showNtStep==0">
									<span>.</span>
								</view>
							
								<u-image width="600" style="margin: auto;;min-height: 250px;" mode="widthFix"
									v-show="showNtStep==1" src="@/assets/img/nt/f5surprised-2.png">
							
								</u-image>
								<u-image width="600" style="margin: auto;min-height: 250px;" mode="widthFix"
									v-show="showNtStep==2" src="@/assets/img/nt/nt-activity-3.png">
							
								</u-image>
								<u-image width="500" style="color: #FFFFFF;
										font-size: 64rpx;
										position: relative;
										top: -540rpx;
										right: -60rpx;height: 0;
									" mode="widthFix" v-show="showNtStep==2" src="@/assets/img/nt/f5surprised-3.png">
							
								</u-image>
							
								<u-image width="36px" v-show="showNtStep==1||showNtStep==2" style="margin: auto; " mode="widthFix"
									@click="showNt=false" src="../../assets/img/if-close-line-circled.png"></u-image>
								<view style="color: #ecc07d;
										font-size: 72rpx;
										position: relative;
										top: -280rpx;
										right: -144rpx; width: 310rpx;" @click="showNtStepClick" v-show="showNtStep==2">
									<span>.</span>
								</view>
								<view style="color: #FFFFFF;
										font-size: 64rpx;
										position: relative;
										top: -688rpx;
										right: -80rpx;" :style="{
									right:showNtValue>99?'-80rpx':(showNtValue>9?'-95rpx':'-110rpx')
								}" v-show="showNtStep==1"><b>{{showNtValue}}</b>
									<span style="font-size: 28rpx;">元</span>
								</view>
							
								<view style="color: #ecc07d;
								 		font-size: 72rpx;
								 		position: relative;
								 		top: -390rpx;
								 		right: -144rpx; width: 310rpx;" @click="showNtStepClick" v-show="showNtStep==1">
									<span>.</span>
								</view>
							
								<!-- <view v-show="showNtStep==1" style="color: #ecc07d;
								 		font-size: 32rpx;
								 		position: relative;
								 		top: -180rpx;
								 		right: -60rpx; width: 440rpx;">注:逢5红包用完后下次才可以领取新红包哦！</view> -->
							
							
							
						</swiper-item>
					</swiper>
				
				
					<u-image width="36px"
						style="margin: auto; margin-top: 10px;" mode="widthFix" @click="showTop=false"
						src="../../assets/img/if-close-line-circled.png"></u-image>

				</view>
			</u-modal>
			<!-- 模式选择 -->

			<u-mask :show="show">

				<view class="wrap">


					<view class="shema" @tap.stop>
						<view class="title">
							设置浏览模式
						</view>
						<view class="">
							<u-radio-group v-model="value">
								<u-radio v-for="(item, index) in list" :key="index" :name="item.name"
									:disabled="item.disabled" active-color="#00B962">
									{{item.name}}
									<p v-if="item.name == '长辈模式'">字体更大 看的清楚</p>
									<p v-if="item.name == '标准模式'">信息丰富 功能全面</p>
								</u-radio>

							</u-radio-group>
						</view>
						<view class="hint">可在 {{""}}我的-设置 {{""}}页面中切换</view>
						<view class="btn-box">
							<u-button class="choice-btn" type="success" shape="circle"
								@click="elderClick">我选好了</u-button>
						</view>
					</view>
				</view>
			</u-mask>





			<!-- <view class="top-up-title oldTextjp" oldstyle="font-size:20px;"><text class="line"></text>最新活动</view>
			<view class="img-box">
				<view class="img-1" v-for="(item,index) in activityList" :key="item.id"
					@click="rechargeActivity(item)">
					<img :src="item.picUrl" alt="">
				</view>
			</view> -->
		</view>
		<!-- 最新活动 -->
		<view class=" top-up" v-if="activityList.length > 0 && activityListShow">
			<view class="top-up-title oldTextjp" oldstyle="font-size:20px;"><text class="line"></text>最新活动</view>
			<view class="img-box2">
				<view class="left-image" :style="{backgroundImage: 'url(' + activityDateList.picUrl + ')'}"
					@click="rechargeActivity(activityDateList)">
					<p>{{activityDateList.name}}</p>
					<view class="time-activities">
						距活动结束仅剩 <text class="time">{{description}}</text>
					</view>
				</view>
				<view class="right-image">

					<img class="margin-bottom" v-for="(item,index) in activityList" :key="item.id"
						@click="rechargeActivity(item)" :src="item.narrowUrl" alt="">
					<!-- <img class="margin-bottom" src="../../assets/img/topup2.png" alt="" @click="rechargeActivity(0)">
					<img class="margin-bottom" src="../../assets/img/topup3.png" alt="" @click="rechargeActivity(1)"> -->
				</view>

			</view>
		</view>



		<template v-if="message == 'getLocation:ok' && stationList.length != 0 && chargeList.length == 0">
			<view class=" top-up">
				<view class="top-up-title oldTextjp" oldstyle="font-size:20px;"><text class="line"></text>附近站点
					<view class="pack-up" v-show="!listShow" @click="listShow=true">
						收起<text class="iconfont">&#xe607;</text>
					</view>
					<view class="pack-up" v-if="listShow" @click="listShow=false">
						展开<text class="iconfont">&#xe62c;</text>
					</view>
				</view>
			</view>
			<!-- 附近站点 -->
			<view class="station" v-for="(stationData,i) in stationList" :key="i" v-show="!listShow||i==0"
				@click="gotoUrl('pages/searchPile/stationAndPile/stationDetails?id=' + stationData.id)">
				<view class="head">
					<view class="title oldTextjp" oldstyle="font-size: 20px;">
						{{stationData.name}}
					</view>
					<view class="distance ">
						<text class="iconfont"
							style="color:#666666">&#xe615;</text>{{stationData.distance!=null&&stationData.distance>0.1 ? stationData.distance.toFixed(1)+'公里':'小于100米'}}
					</view>
				</view>
				<view class="sign" v-if="stationData.stationType==50">
					<view class="sign-tag sign-0" v-if="stationData.isRecommend">推荐</view>
					<view class="sign-tag sign-5" v-if="stationData.isAlways">常用</view>	
					
					{{stationData.address}}
				</view>
				<view class="sign" v-else>
					<view class="sign-tag sign-0" v-if="stationData.isRecommend">推荐</view>
					<view class="sign-tag sign-5" v-if="stationData.isAlways">常用</view>	
					
						<!-- 	 -->
						<view class="sign-1"
							v-if="stationData.giveDiscount&&stationData.discountRatio&&stationData.discountRatio!=100">
							会员服务费{{discountRatio10(stationData.discountRatio)}}折</view>
						<view class="sign-3" v-if="stationData.category=='超充'">160kW超充站</view>
						<view class="sign-4"
							v-if="stationData.nightLowPriceEnabled">
							夜间超低价</view>

					
					<view class="sign-2" v-if="stationData.tagList.length != 0"
						v-for="(tagName,tagIndex) in stationData.tagList" :key="tagIndex">{{tagName}}</view>
				</view>
				<view class="price-free oldTextClass">
					
					<view class="price" v-if="personInfo&&personInfo.userType==2">
						<view class="price-1">
							<text class="num">
								{{!stationData.giveDiscount ? (stationData.electricityPrice+stationData.servicePrice).toFixed(2)
								: (stationData.electricityPrice+stationData.discountServicePrice).toFixed(2)}}</text>
							<text class="unit " oldstyle="font-size: 48rpx;">元/度</text>
						</view>
						<view class="price-2 " oldstyle="font-size: 48rpx;" v-if="stationData.giveDiscount">
							<text
								class="num">{{(stationData.electricityPrice+stationData.servicePrice).toFixed(2)}}</text>
							<text class="unit ">元/度</text>
						</view>
					</view>
					<!-- 游客价格-->
					<view class="price" v-else>
						<view class="price-1">
							<text class="num">
								{{(stationData.electricityPrice+stationData.servicePrice).toFixed(2)}}</text>
							<text class="unit " oldstyle="font-size: 48rpx;">元/度</text>
						</view>
						<view class="price-3 " oldstyle="font-size: 48rpx;" v-if="stationData.giveDiscount">
							<text class="num1">会员</text>
							<text class="num">{{ (stationData.electricityPrice+stationData.discountServicePrice).toFixed(2)}}</text>
							<text class="unit ">元/度</text>
						</view>
					</view>

					<view class="free">

						<view class="fast" v-if="stationData.fastNum">
							<view class="fast-font">
								快
							</view>
							<view class="num">
								{{stationData.fastAvailableNum}}/{{stationData.fastNum}}
							</view>
						</view>
						<view class="slow oldTextjp2" oldstyle="margin-left: 1px;" v-if="stationData.slowNum">
							<view class="slow-font">
								慢
							</view>
							<view class="num">
								{{stationData.slowAvailableNum}}/{{stationData.slowNum}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom" @click="searchStationData(true)" v-if="recordsTotal2!=stationList.length">
				<view class="bot">
					<view class="bot-line"></view>
					<view class="bot-text " style="color: #00B962;">点击查看更多站点</view>
					<view class="bot-line"></view>
				</view>
			</view>
			<view class="bottom" v-else>
				<view class="bot">
					<view class="bot-line"></view>
					<view class="bot-text " style="color: #00B962;">已经到底了</view>
					<view class="bot-line"></view>
				</view>
			</view>
		</template>
		
		<template  v-if="loading&&message == 'getLocation:ok' && stationList.length == 0 && chargeList.length == 0">
			<view class="location-box">
				<view class="location">
					<view class="location-text">
						<view class="text-1 oldTextjp" oldstyle="font-size: 20px;">
							{{loading?'查询失败':'加载中'}}
						</view>
						<view class="text-2 oldTextjp2" oldstyle="font-size: 16px;">
							
							{{loading?'未查询到可用的站点':'正在为你查找附近的站点'}}
						</view>
						<view class="text-3 oldTextjp2"
						 v-if="loading"
						 oldstyle="font-size: 16px;"  @click="toSearchPile" >
							去找桩
						</view>
					</view>
					<view class="img-box">
						<img src="static/img/暂无网络信号-缺省页 1.png">
					</view>
				</view>
			
			</view>
			
			
		</template>
		<!-- 定位 -->
		<view class="location-box"
			v-if="message != 'getLocation:ok' && stationList.length == 0 && chargeList.length == 0">
			<view class="location">
				<view class="location-text">
					<view class="text-1 oldTextjp" oldstyle="font-size: 20px;">
						定位中...
					</view>
					<view class="text-2 oldTextjp2" oldstyle="font-size: 16px;">
						授权定位后可查询附近充电站
					</view>
					<view class="text-3 oldTextjp2" oldstyle="font-size: 16px;" @click="getPoint()">
						重新定位
					</view>
				</view>
				<view class="img-box">
					<img src="static/img/暂无网络信号-缺省页 1.png">
				</view>
			</view>

		</view>
		<!-- 附近站点 -->
		<view class="station" v-for="(stationData,i) in defaultStation" :key="i"  v-if="stationList.length == 0 && chargeList.length == 0"
			@click="gotoUrl('pages/searchPile/stationAndPile/stationDetails?id=' + stationData.id)">
			<view class="head">
				<view class="title oldTextjp" oldstyle="font-size: 20px;">
					{{stationData.name}}
				</view>
				<view class="distance " v-if="false">
					<text class="iconfont"
						style="color:#666666">&#xe615;</text>{{stationData.distance!=null&&stationData.distance>0.1 ? stationData.distance.toFixed(1)+'公里':'小于100米'}}
				</view>
			</view>
			
			<view class="sign" >
				<view class="sign-tag sign-0" >推荐</view>
				
				
				<template v-if="personInfo&&personInfo.userType!=1">
					<!-- 	 -->
					<view class="sign-1"
						v-if="stationData.giveDiscount&&stationData.discountRatio&&stationData.discountRatio!=100">
						会员服务费{{discountRatio10(stationData.discountRatio)}}折</view>
					<view class="sign-3" v-if="stationData.category=='超充'">160kW超充站</view>
					<view class="sign-4"
						v-if="stationData.nightLowPriceEnabled">
						夜间超低价</view>
		
				</template>
				<view class="sign-2" v-if="stationData.tagList.length != 0"
					v-for="(tagName,tagIndex) in stationData.tagList" :key="tagIndex">{{tagName}}</view>
			</view>
			<view class="price-free oldTextClass">
				<view class="price">
					<view class="price-1">
						<text class="num">
							{{!stationData.giveDiscount ? (stationData.electricityPrice+stationData.servicePrice).toFixed(2)
							: (stationData.electricityPrice+stationData.discountServicePrice).toFixed(2)}}</text>
						<text class="unit " oldstyle="font-size: 48rpx;">元/度</text>
					</view>
					<view class="price-2 " oldstyle="font-size: 48rpx;" v-if="stationData.giveDiscount">
						<text
							class="num">{{(stationData.electricityPrice+stationData.servicePrice).toFixed(2)}}</text>
						<text class="unit ">元/度</text>
					</view>
				</view>
		
				<view class="free">
		
					<view class="fast" v-if="stationData.fastNum">
						<view class="fast-font">
							快
						</view>
						<view class="num">
							{{stationData.fastAvailableNum}}/{{stationData.fastNum}}
						</view>
					</view>
					<view class="slow oldTextjp2" oldstyle="margin-left: 1px;" v-if="stationData.slowNum">
						<view class="slow-font">
							慢
						</view>
						<view class="num">
							{{stationData.slowAvailableNum}}/{{stationData.slowNum}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 新闻 -->
		<view class="news-title" v-if="chargeList.length > 0">
			<view class="news-title-left oldTextjp" oldstyle="font-size:20px;">
				<view class="line" style="margin-top:4px;"></view>充电车辆
				<view class="lineBox" v-if="chargeList.length > 1">{{chargeList.length }}</view>
			</view>

			<view class="more oldTextjp2" oldstyle="font-size:16px;" v-if="chargeList.length > 3" @click="toAll">查看全部
				<view class="more-icon iconfont"> &#xe600;</view>
			</view>


		</view>

		<!-- 充电状态 -->
		<view class="state1 state" v-if="chargeList.length > 0" v-for="(item,index) in chargeList" v-show="index<3"
			:key="item.id" @click="gotoUrl('pages/searchPile/chargeProcess/dcCharging?id=' + item.id)">
			<view class="state-text">
				<view class="text-1 " oldstyle="font-size: 20px;">
					<span v-if="item.carNumber">{{item.carNumber}}</span>

					{{item.statusText}}...
				</view>
				<view v-if="item.status == '0'" class="text-2 " oldstyle="font-size: 16px;">

					启动中
				</view>
				<view v-if="item.status == '1'" class="text-2 " oldstyle="font-size: 16px;">

					已充
					<span
						class="text-21">{{item.electricQuantity?(item.electricQuantity/10000).toFixed(1):'0.0'}}度</span>
					合计<span class="text-22">{{item.dueFee != null ? item.dueFee.toFixed(2) : '0.00'}}元</span>
					<view style="display: initial;" v-if="item.endSoc">电量<span class="text-21">{{item.endSoc}}%</span>
					</view>
				</view>
				<!-- <view v-if="item.status == '2'" class="text-2" style="color: red;">
				超出时间将收取占位费
			</view> -->
				<view v-if="item.status == '4'" class="text-2 oldTextjp2" oldstyle="font-size: 16px;">
					<span v-if="item.waitNum==1">请耐心等待</span>
					<span v-else>前方等待{{item.waitNum-1}}位</span>
				</view>
				<view class="text-3 " oldstyle="font-size: 16px;">
					<p style=" width: 160%;">
						{{item.deviceName}}枪{{item.channelNo}}/{{item.stationName}}<br />当前电价{{item.chargingCostPrice.toFixed(2)}}元/度
					</p>
				</view>
			</view>
			<view class="img-box4">

				<img v-if="item.status == '0'" src="static/img/等待中-缺省页.png">
				<img v-if="item.status == '1'" src="static/img/充电中-缺省页.png">
				<img v-if="item.status == '2'" src="static/img/已充满-缺省页.png">
				<img v-if="item.status == '4'" src="static/img/等待中-缺省页.png">
				<view class="img-view">
					<view class="more-icon iconfont">查看 &#xe600;</view>
				</view>

			</view>
		</view>
		<view class="bottom" v-if="chargeList.length > 3" @click="toAll()">
			<view class="bot">
				<view class="bot-line"></view>
				<view class="bot-text " style="color: #00B962;">点击查看全部充电车辆</view>
				<view class="bot-line"></view>
			</view>
		</view>

		<!-- 新闻 -->
		<view class="news-title" v-if="newsList.length > 0">
			<view class="news-title-left oldTextjp" oldstyle="font-size:20px;">
				<view class="line" style="margin-top:4px;"></view>新闻公告
			</view>

			<view class="more oldTextjp2" oldstyle="font-size:16px;" @click="toNewsNotice">更多<view
					class="more-icon iconfont"> &#xe600;</view>
			</view>


		</view>
		<view class="news">

			<view class="news-content" v-for="(item,index) in newsList" :key="index"
				@click="gotoUrl('pages/article/articleDetails?id=' + item.id)">
				<view class="content-text">
					<view class="content-title oldTextjp2" oldstyle="font-size: 18px;">{{item.title}}</view>
					<view class="news-time">{{item.createTime?item.createTime.slice(5,10):''}}</view>
				</view>
				<view class="content-img">
					<img :src="item.pic ? item.pic : 'static/img/image_default.png'" alt="">
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bot">
				<view class="bot-line"></view>
				<view class="bot-text oldTextjp2" oldstyle="font-size: 14px;">已经到底了</view>
				<view class="bot-line"></view>
			</view>
		</view>
		<!-- 导航栏 -->
		<view class="navigation">
			<view class="login-prompt" v-if="!userId">
				登录显示更多会员服务
				<text class="button" @click="toLogin">登录/注册</text>
			</view>
		</view>
		<Tabbar :current="0" ref="tabbarMain" :elderStatus="elderStatus"></Tabbar>
	</view>
</template>

<script>
	import * as API from '@/apis/index.js'
	import * as newsApi from '@/apis/news.js'
	import * as WxJsApi from '@/utils/wxJsApi.js'
	import * as siteApi from '@/apis/site.js'
	import * as loginApi from '@/apis/login.js'
	import * as userApi from '@/apis/user.js'

	import MapLoader from '@/utils/AMap'
	import Tabbar from '@/components/Tabbar.vue'
	import {
		newDate,
		currentTimeStamp,
		parseUnixTime,
		secondsDistance,
		hourDistanceArr
	} from '@/utils'

	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				listShow: false,
				stationList: [],
				bannerList: [],
				bannerListTop: [],
				timeOut: false,
				pointTimeOut: true,

				chargeList: [],
				activityList: [],
				userId: '',
				newsList: [],
				pageIndex: 1,
				recordsTotal: 0,
				longitude: '',
				latitude: '',
				message: '',
				indexLogo: '',
				showOss: false,
				showOssImg: '',
				showOssIndex: '',
				loading:false,
				showTop: false,
				showTopImg: '',
				showTopIndex: 0,

				show: false,
				list: [{
						name: '长辈模式',
						disabled: false
					},
					{
						name: '标准模式',
						disabled: false
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '长辈模式',
				elderStatus: false,
				fontMode: '',
				description: '00:00:00',
				activityDate: '',
				activityDateList: {},
				activityListShow: false,
				personInfo: {},
				showNt: false,
				showNtStep: 0,
				showNtValue: 30,
				couponList: [],
				couponSelect: {},
				pageIndex2: 1,
				recordsTotal2: 0,
				defaultStation:[],

			}
		},
		onLoad(op) {

			if (op.jpcode) {
				var k = API.codeOperation(op.jpcode)
				if (k) {
					uni.navigateTo({
						url: k
					})
				}
			}



		},
		onUnload() {
			this.timeOut = false;
			this.pointTimeOut = false;
		},
		onHide() {
			this.timeOut = false;
			this.pointTimeOut = false;
		},
		onReachBottom() {
			// if (this.newsList.length < this.recordsTotal) {
			// 	this.myLoadmore();
			// }
		},
		onShow() {
			if (this.$refs.tabbarMain) {
				this.$refs.tabbarMain.setcount(0);
			}
			if (!this.pointTimeOut) {
				this.pointTimeOut = true
				this.getPointTimeOut();

			}
			this.getUserInfo();

		},
		onReady() {
			// if (this.carhelp.get("getElderModeClass")) {
			// 	if(this.carhelp.get("getElderModeClass") == "长辈模式") {
			// 		this.fontMode = '1';
			// 	} else {
			// 		this.fontMode = '0';
			// 	}
			// 	API.changeFont({fontMode: this.fontMode}).then((res) => {

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

			//this.getUserInfo();


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

			this.getBannerInfo("homepage");

			this.getBannerInfoTop("home-top");

			//this.getBannerInfoTop("home-top");

			this.getPointTimeOut();
			this.getNewsList();
			this.getActivityInfoList();
			this.getChargingStationDetail()

		},
		methods: {
			
			getChargingStationDetail(){
				var defaultStation=process.car.defaultStation
				for(var item in defaultStation){
					siteApi.getChargingStationDetail({
						stationId:defaultStation[item]
					}).then((res) => {
						
						var station=res.data.station
						//this.MapLoaderthen(station)
						
						this.defaultStation.push(station)
					}).catch(error => {
					
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}
				
			},
			getf5surprised() {
				userApi.exchangeGroupDetail("逢5红包").then((res) => {
					var message = res.message;
					this.couponList = res.data;

					if (this.couponList.length) {
						var list = res.data;
						var x = 0;

						for (var i in list) {

							var obj = list[i]
							if (!obj.probability) {
								continue;
							}
							var end = x + obj.probability;
							obj.start = x;
							obj.end = end;
							x = end;
						}

						var code = parseInt(Math.random() * x)
						// console.log(code)
						// console.log(list)
						var selectObj = null;
						for (var i in list) {
							var obj = list[i]
							if (!obj.probability) {
								continue;
							}
							if (code >= obj.start && code < obj.end) {
								selectObj = obj;
								this.couponSelect = selectObj;
								break
							}

						}
						if (selectObj) {
							this.showNt = true
							this.showTop = true;
							this.showNtStep = 0;
							this.showNtValue = this.couponSelect.totalDiscount

						} else {
							//this.getBannerInfoTop("home-top");
						}

						//console.log(selectObj)
						// this.exchangeDetailF5(selectObj.key);
					} else if (message == '1001') { //
						//周五，但是因为手里有卷， 所以不能抽
						var nowtime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')
						var time = this.carhelp.get("getf5surprised-time");
						if ((time && nowtime == time)) {
							//this.getBannerInfoTop("home-top");
						} else {
							this.carhelp.set("getf5surprised-time", nowtime);
							
						}
						this.showNt = true
						this.showTop = true;
						this.showNtStep = 2;
					} else {
						//this.getBannerInfoTop("home-top");
					}


				}).catch(error => {

					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getNewYear() {
				//var obj=this.carhelp.get("newyear_activity2023-2-15")
				//
				var sz = ["1615623336912621591", "1615623336912621590"];
				var code = parseInt(Math.random() * 2)
				this.carhelp.set("newyear_activity2023-2-15", {
					nt: sz[code],
					code: code,
					status: 0
				})

				//先查询另一个领取过没
				userApi.exchangeDetail({
					key: sz[code == 0 ? 1 : 0]
				}).then((res) => {

					if (!res.data.enabled) {

						if (res.data.code == 2) {
							//未开始
						} else {
							//已经结束
						}
						//this.getBannerInfoTop("home-top");

					} else if (res.data.status == 1) {
						//this.getBannerInfoTop("home-top");
						//已经兑换，或者不能兑换
					} else if (res.data.status == 2) {
						// this.showNtValue=res.data.totalDiscount
						this.exchangeDetail(sz[code]);
					} else {
						//res.data.status==0
						//this.showNtValue=res.data.totalDiscount
						this.exchangeDetail(sz[code], sz[code == 0 ? 1 : 0]);
					}


				}).catch(error => {
					//this.showNt = false;
					uni.showToast({
						title: error,
						icon: "none"
					})
				})



			},

			exchangeDetail(exchangeCode, code2) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				userApi.exchangeDetail({
					key: exchangeCode
				}).then((res) => {
					uni.hideLoading();
					//

					if (!res.data.enabled) {

						if (res.data.code == 2) {
							//未开始
						} else {
							//已经结束
						}
						//this.getBannerInfoTop("home-top");
					} else if (res.data.status == 1) {
						//this.getBannerInfoTop("home-top");
						//已经兑换，
					} else if (res.data.status == 2) {

						if (code2) {
							//试试另一张卷

							var c = this.carhelp.get("newyear_activity2023-2-15")
							if (c) {
								this.carhelp.set("newyear_activity2023-2-15", {
									nt: code2,
									code: c.code == 0 ? 1 : 0,
									status: 0
								})
							}

							this.exchangeDetail(code2)
						} else {
							//this.getBannerInfoTop("home-top");
						}

						//不能兑换
					} else {

						this.showNt = true
						this.showTop = true;
						this.showNtStep = 0;
						this.showNtValue = res.data.totalDiscount
					}

				}).catch(error => {
					//this.showNt = false;
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			redeemF5(exchangeCode) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				userApi.exchangeByGroupFive({
					key: exchangeCode
				}).then((res) => {
					uni.hideLoading();
					this.showNtStep = 1

					var nowtime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')
					this.carhelp.set("getf5surprised-time", nowtime);

				}).catch(error => {
					//this.showNt = false;
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			redeemNow(exchangeCode) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				userApi.exchange({
					key: exchangeCode
				}).then((res) => {
					uni.hideLoading();
					this.showNtStep = 1
					this.carhelp.set("newyear_activity2023-2-15", {
						nt: exchangeCode,
						status: 1
					})
				}).catch(error => {
					//this.showNt = false;
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			showNtStepClick() {
				if (this.showNtStep == 0) {

					if (this.personInfo.userType != 1) {
						this.redeemF5(this.couponSelect.key);
					} else {
						//this.showNt = false;
						uni.showModal({
							title: "提示",
							content: "游客无法兑换，请先注册为会员后再兑换",
							confirmText: "前往注册",
							success: res1 => {
								if (res1.confirm) {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								} else if (res1.cancel) {
									//('用户点击取消');
								}
							}
						})

					}

				} else if (this.showNtStep == 1 || this.showNtStep == 2 || this.showNtStep == 3 || this.showNtStep == 4) {
					//this.showNt = false;

					uni.navigateTo({
						url: "/pages/user/coupon/myCoupon"
					})

				}
			},
			test() {
				if (process.env.NODE_ENV === "development") {


				}
			},
			goSearch() {
				this.$refs.tabbarMain.beforeSwitch(1)

			},
			nextTop(index) {
				this.showTopImg = this.bannerListTop[index + 1].picUrl;
				this.showTopIndex = index + 1;
			},
			getDescriptionTime() {
				var date = this.activityDate;
				var dateMonth1 = new Date().getMonth() + 1;
				var dateDay1 = new Date().getDate();
				var dateMonth2 = parseInt(date.slice(5, 7));
				var dateDay2 = parseInt(date.slice(8, 10));
				if (dateMonth1 < dateMonth2) {
					var days = new Date(new Date().getFullYear(), dateMonth1, 0).getDate();
					dateDay2 = dateDay2 + days;
					console.log(dateDay2)
				}

				if (dateDay1 < dateDay2 - 2) {
					this.description = dateDay2 - dateDay1 + '天'
				} else {
					var dateTime2 = new Date(date).getTime()
					var c = hourDistanceArr(new Date(), new Date(dateTime2))
					if (c[0] < 10) {
						c[0] = '0' + c[0];
					}
					if (c[1] < 10) {
						c[1] = '0' + c[1];
					}
					if (c[2] < 10) {
						c[2] = '0' + c[2];
					}
					this.description = c[0] + ':' + c[1] + ':' + c[2];

					if (this.description == '00:00:00') {
						this.activityListShow = false;
					}
					setTimeout(() => {
						this.getDescriptionTime();
					}, 1000)
				}
			},
			getUserInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				loginApi.findByOpenId({
					openId: this.carhelp.getOpenId(),
					noerror: true,
				}).then((res) => {
					uni.hideLoading();

					if (res.code == 200 && res.result) {
						this.personInfo = res.data.regUser;
						var token = res ? res.data.token : '';
						this.carhelp.setPersonInfo(res.data.regUser);
						this.carhelp.setToken(token);
						this.carhelp.setPersonInfoPlus(res.data);

					}

					console.log("--------------")
					if (res.data && res.data.regUser) {
						if (res.data.regUser.fontMode == null) {
							this.show = true;
						} else {
							this.show = false;
							this.fontMode = res.data.regUser.fontMode;
							if (this.fontMode == '1') {
								this.carhelp.set("getElderModeClass", "长辈模式");
							} else {
								this.carhelp.set("getElderModeClass", "标准模式");
							}
						}

						this.userId = res.data.regUser.id;
						this.getFindChargeData();


						if (this.carhelp.get("getElderModeClass")) {
							if (this.carhelp.get("getElderModeClass") == "长辈模式") {
								this.elderStatus = true;
							} else {
								this.elderStatus = false;
							}
						}
					} else {

						this.carhelp.set("getElderModeClass", "长辈模式");
						this.elderStatus = true;

						var obj = this.carhelp.get("friends_invitation")
						// this.carhelp.set("friends_invitation",{
						// 	op:op,
						// 	date:new Date().getTime()
						// })
						if (obj && false) {
							if (obj.date + 1000 * 60 * 60 * 24 > new Date().getTime()) {

								this.friendsInvitation(obj)
							}

						}
					}


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

				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.findActivity({
					id: obj.op.id,
					code: obj.op.icode
				}).then((res) => {
					uni.hideLoading()
					obj.activityInfo = res.data.activityInfo;
					var name = res.data.activityInfo.name;
					var title = "参与活动"
					var okbtn = "前往注册"
					var endTime = res.data.activityInfo.endTime;

					if (endTime && secondsDistance(newDate(endTime)) > 0) {
						name = "活动已结束"
						okbtn = "继续注册"
						title = "提示"
						obj = null
					}
					this.carhelp.set("friends_invitation", obj)
					uni.showModal({
						title: title,
						content: name,
						confirmText: okbtn,
						success: res1 => {
							if (res1.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							} else if (res1.cancel) {
								//('用户点击取消');
							}
						}
					})


				}).catch(error => {
					uni.showToast({

						title: error,
						icon: "none"
					})
				})
			},
			clickBannerTopI(i) {
				var mod = this.bannerListTop[i];
				//this.showTop = false;
				this.clickBanner(0, true, mod)
			},
			clickBannerTop() {
				var mod = this.bannerListTop[this.showTopIndex];
				this.showTop = false;
				this.clickBanner(0, true, mod)
			},
			clickBanner(index, bl, modout) {
				var uurl = "";
				var mod = this.bannerList[index]
				if (modout) {
					mod = modout;
				}
				mod.clickUrl = mod.linkUrl

				if (mod.linkPicUrl && !bl) {

					this.showOss = true;
					this.showOssImg = mod.linkPicUrl;
					this.showOssIndex = index;

				} else if (mod.clickUrl == null) {

				} else if (mod.clickUrl.indexOf('http') == 0) {

					window.location = mod.clickUrl + uurl;
				} else if (mod.clickUrl.slice(-5) == 'login' && this.userId) {

				} else if (mod.clickUrl.indexOf('#/') == 0) {
					if (mod.clickUrl.indexOf("?") == -1) {
						mod.clickUrl += '?';
					}
					var url = mod.clickUrl.split("#")[1]
					//window.location = mod.clickUrl;
					uni.navigateTo({
						url: url + uurl
					})
				} else if (mod.clickUrl == '#' || mod.clickUrl == '') {

				} else {
					uni.navigateTo({
						url: mod.clickUrl + uurl
					})
				}
			},
			getBannerInfoTop(code) {
				var nowtime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')
				var time = this.carhelp.get("bannerListTop");
				if ((time && nowtime == time)) {
					return;
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				newsApi.getBannerInfo(code).then((res) => {


					this.bannerListTop = res.data;


					if (this.bannerListTop.length) {
						this.showTop = true;
						this.showTopImg = this.bannerListTop[0].picUrl;
						this.showTopIndex = 0;
						this.carhelp.set("bannerListTop", nowtime);
					}
					//this.test()
					var userInfo = this.carhelp.getPersonInfo();
					
					if (userInfo && userInfo.id) {
						this.getf5surprised()
					} else {
					}



					uni.hideLoading()
					//document.getElementsByClassName("uni-swiper-wrapper")[0].parentNode.style="background-color: rgb(255, 255, 255); height: 120px;"
				}).catch(error => {
					uni.showToast({

						title: error,
						icon: "none"
					})
				})
			},
			getBannerInfo(code) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				newsApi.getBannerInfo(code).then((res) => {
					this.bannerList = res.data;
					uni.hideLoading()
					//document.getElementsByClassName("uni-swiper-wrapper")[0].parentNode.style="background-color: rgb(255, 255, 255); height: 120px;"
				}).catch(error => {
					uni.showToast({

						title: error,
						icon: "none"
					})
				})
			},
			elderClick() {
				if (this.value == "长辈模式") {
					this.elderStatus = true;
					this.carhelp.set("getElderModeClass", "长辈模式");
					this.fontMode = '1';
				} else {
					this.elderStatus = false;
					this.carhelp.set("getElderModeClass", "标准模式");
					this.fontMode = '0';
				}

				API.changeFont({
					fontMode: this.fontMode
				}).then((res) => {
					this.show = false;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getPointTimeOut() {

				setTimeout(() => {
					if (this.pointTimeOut) {
						this.getPoint();
					}
				}, 1000)

			},
			getFindChargeData() {

				API.findChargeData().then((res) => {
					this.chargeList = res.data.chargingRecordList;

					var list = res.data.chargingRecordList;
					for (var i = 0; i < list.length; i++) {
						if (list[i].status == '1' || list[i].status == '4') {
							this.timeOut = true;
						}
					}
					if (this.timeOut && this.pointTimeOut) {
						setTimeout(() => {
							this.getFindChargeData();
						}, 5000)
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			toAll() {
				uni.navigateTo({
					url: '/pages/index/all'
				})
			},
			toSearchPile() {
				uni.navigateTo({
					url: '/pages/searchPile/searchPile'
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			toNewsNotice() {
				uni.navigateTo({
					url: '/pages/article/newsNotice'
				})
			},
			//微信扫二维码
			getScanCode() {

				if (this.userId) {
					WxJsApi.scanQRCode(1).then(res => {
						//("scanQRCode------" + res)
						if (res) {
							API.scanCode(res).then((response) => {

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

					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			fastRecharge() {
				
				if (this.userId) {
					if(this.personInfo.userType==1){
						uni.showToast({
							title:"游客模式只支持“先付后退”"
						})
					}else{
						uni.navigateTo({
							url: '/pages/user/finance/recharge'
						})
					}
					
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			chargingRecord() {
				if (this.userId) {
					uni.navigateTo({
						url: '/pages/record/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			rechargeActivity(item) {
				if (this.userId) {
					var uurl = "&uid=" + this.userId;

					var mod = item

					if (mod.clickUrl == null) {

					} else if (mod.clickUrl.indexOf('http') == 0) {
						window.location = mod.clickUrl + uurl;
					} else if (mod.clickUrl.indexOf('#/') == 0) {
						if (mod.clickUrl.indexOf("?") == -1) {
							mod.clickUrl += '?';
						}
						var url = mod.clickUrl.split("#")[1]
						//window.location = mod.clickUrl;
						uni.navigateTo({
							url: url + uurl
						})
					} else if (mod.clickUrl == '#' || mod.clickUrl == '') {

					} else {
						uni.navigateTo({
							url: mod.clickUrl + uurl
						})
					}
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			getActivityInfoList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.activityInfoList({
					pageIndex: 1,
					pageSize: 10
				}).then((res) => {
					uni.hideLoading()
					var list = res.data.data;
					for (let i = 0; i < list.length; i++) {
						if (list[i].type == 2 && list[i].endTime != null) {
							this.activityListShow = true;

							var reg = new RegExp('-', 'gi');
							this.activityDate = list[i].endTime.replace(reg, '/');
							console.log(this.activityDate)

							this.activityDateList = list[i];
							list.splice(i, 1);

							this.getDescriptionTime();
						}
					}
					this.activityList = list;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			searchStationData(bl) {
				if (bl) {
					this.pageIndex2++;
				}
				var data = {
					longitude: this.longitude,
					latitude: this.latitude,
					pageIndex: this.pageIndex2,
					pageSize: 4
				}
				if (this.carhelp.getPersonInfo()) {
					data.openId = this.carhelp.getOpenId()
				}
				this.loading = false
				siteApi.searchStationData(data).then((response) => {

					
					if (this.pageIndex2 == 1) {
						this.stationList = response.data.data;

					//	this.listForm.totalPage = response.data.totalPage;
					} else {
						this.stationList = [
							...this.stationList,
							...response.data.data
						];
					}
					
					this.recordsTotal2 = response.data.recordsTotal;
					
					this.loading = true
					console.log(this.loading)
					if (false&&response.data.data.length&&false) {
						var stationDataList = response.data.data;

						MapLoader().then(AMap1 => {
							for (var i in stationDataList) {
								var item = stationDataList[i]

								var lnglat = new AMap.LngLat(this.longitude, this.latitude);
								var myDistance = lnglat.distance([item.longitude, item.latitude]);
								item.distance = myDistance / 1000;
								console.log(item.distance)

							}
						})
						//this.stationData = stationDataList;
					}

				}).catch(error => {
					console.log(error,"123")
					
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getPoint() {
				if (this.stationList.length != 0) {
					return
				}
				WxJsApi.getLocation().then((res) => {

					this.latitude = parseFloat(res.latitude);
					this.longitude = parseFloat(res.longitude);
					this.message = res.errMsg;

					if (res.errMsg != 'getLocation:ok') {
						uni.showToast({
							title: res
						})
					} else {

						this.searchStationData()
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getNewsList(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.newsList = [];
					this.pageIndex = 1;
				}

				newsApi.newsInfoList({
					pageIndex: this.pageIndex,
					pageSize: 3,
				}).then((res) => {
					uni.hideLoading()

					this.newsList = [
						...this.newsList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			myLoadmore() {
				//this.pageIndex += 1;
				//this.getNewsList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.swiper{
		height: 700rpx;
		.swiperitem{
			height: 700rpx;
		}
	}
	.couponmain {
		.main {

			margin: 100px auto 0;
			position: relative;

			.content {
				padding: 24px;
				padding-top: 50px;
				background-color: #fff;
				box-shadow: 0px 0px 0px 1px rgba(254, 229, 147, 100);
				border: 2px solid rgba(253, 217, 141, 100);
				border-radius: 8px;

				.img {
					width: 44vw;
					height: 134px;
					position: absolute;
					top: -88px;
					right: 0px;

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

				.title {
					font-size: 16px;
					color: rgba(84, 45, 45, 100);
					margin-bottom: 13px;


				}

				.text {
					line-height: 24px;
					color: rgba(84, 45, 45, 100);
					font-size: 16px;
					text-align: justify;
					text-decoration: underline;
					text-decoration-color: #ECE3BA;
					text-indent: 32px;
				}

				.sign {
					text-align: right;
					margin-top: 8px;
					font-size: 16px;
				}
			}

			// 专享优惠券
			.exclusive {
				background-color: #F5E4C8;
				margin-top: 20px;
				padding: 32rpx 32rpx 32rpx 32rpx;
				box-shadow: 0px 0px 0px 1px rgba(254, 229, 147, 100);
				border: 2px solid rgba(253, 217, 141, 100);
				border-radius: 8px;

				.exclusive1 {

					font-size: 48rpx;
					color: rgba(51, 51, 51, 1);

					font-family: SourceHanSerif-bold;
				}

				.exclusive2 {
					font-family: PingFangSC-regular;
					color: rgba(51, 51, 51, 1);
					font-size: 36rpx;
				}

				p {
					width: 100%;
					text-align: center;
					//color: rgba(255, 73, 75, 100);
					//font-size: 20px;
				}

				.img {
					// width: 74.4vw;
					// height: 84px;
					margin-top: 16px;
					position: relative;

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

					}
				}




				.num {
					font-size: 54rpx;
					color: rgba(252, 237, 179, 100);
					position: absolute;
					top: 10px;
					left: 8vw;
					font-weight: 600;

					.unit {

						font-size: 24rpx;
						color: rgba(252, 237, 179, 100);

					}
				}

				.unit2 {

					font-size: 12px;
					color: #FFF;
					position: absolute;
					top: 90rpx;
					left: 24rpx;
				}

				.exclusive-text {
					color: #333333;
					font-size: 16rpx;
				}

				.exclusive-btn {
					width: 80%;
					margin-top: 48rpx;
					border-radius: 50px;
					background: linear-gradient(90.58deg, rgba(225, 208, 165, 1) 0.05%, rgba(228, 190, 132, 1) 98.67%);
					color: rgba(51, 51, 51, 1);
					font-size: 36rpx;
					text-align: center;
					box-shadow: 0px 8rpx 20rpx 0px rgba(184, 155, 103, 40);
					font-family: -apple-system;
					//  width: 87.4%;
					//  margin-top: 20px;
					//  background-image: linear-gradient(#ffff00, #ff9600);
					//   color: #521e00;
					// font-size: 20px;
					// border-radius: 50px;
				}

				.ticket-info {
					width: 40vw;
					text-align: center;
					position: absolute;
					top: 18px;
					right: 16rpx;

					.ticket-name {
						line-height: 40rpx;
						color: rgba(16, 16, 16, 100);
						font-size: 16rpx;

					}

					.condition {
						line-height: 22px;
						color: #8a6f6f;
						font-size: 12px;
					}

				}

			}
		}
	}

	.oldTextClassF {
		.text-2 {
			font-size: 36rpx !important;
		}

		.text-3 {
			font-size: 34rpx !important;
		}

		.station .price-free .price-1 .num {

			font-size: 48rpx !important;
			line-height: 40rpx;
			font-weight: bold;
		}

	}

	/deep/.u-image__loading {
		background: #ff000000;
	}

	// 头部图片
	img {
		width: 100%;
		// height: 100%;

	}

	.background {
		background: linear-gradient(#D6EEDC, #FFFFFF);
		padding-top: 16px;
	}

	.banner {
		width: 91.4%;
		margin: 0 auto;
		border-radius: 12px;
		height: 120px;
		overflow: hidden;


	}


	// 选项列表
	.option-list {

		padding-top: 15px;

		line-height: 20px;
		border-radius: 8px;
		text-align: center;

		margin: auto;
		display: flex;
		justify-content: space-around;

		.list-item {

			// 图标
			.icon {
				width: 40px;
				height: 40px;
				border-radius: 99px;
				line-height: 40px;
				font-size: 24px;
				text-align: center;
				margin: auto;
				color: #ffffff;
			}

			.text {
				margin-top: 4px;
			}

		}

	}

	.flex {
		display: flex;
	}

	// 站点
	.pack-up {
		float: right;
		font-size: 16px;
		color: rgba(119, 119, 119, 100);
	}

	.station,
	.location,
	.state1 {
		box-shadow: 0px 4rpx 12rpx 0px #008c4a33;
	}

	// 附近站点改版
	.station {

		width: 91.4%;
		border-radius: 8px;
		padding: 12px 12px 12px 11px;
		background-color: #fff;
		margin: 8px auto 0;

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

			.title {
				color: rgba(16, 16, 16, 100);
				font-size: 32rpx;
				font-weight: 550;
				width: 440rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.distance {
				width: 180rpx;
				color: rgba(102, 102, 102, 100);
				font-size: 32rpx;
				text-align: end;

				.iconfont {
					font-size: 24rpx;
					margin-right: 4rpx;
				}
			}
		}

		.sign {
			display: flex;
			flex-wrap: wrap;
			margin-top: 16rpx;
			
			.sign-tag {
				line-height: 40rpx;
				border-radius: 8rpx;
				//background-color: rgba(255, 255, 255, 100);
				//color: rgba(255, 139, 0, 100);
				font-size: 24rpx;
				text-align: center;
				//border: 1px solid rgba(255, 139, 0, 100);
				padding: 0 8rpx;
				margin-right: 16rpx;
				margin-bottom: 8rpx;
			}
			.sign-0 {
				background: linear-gradient(89.4deg, rgba(129,97,255,1) 2.8%,rgba(169,147,255,1) 98.02%);
				color: rgba(255, 255, 255, 1);
				padding: 0 10rpx;
				//border: 1px solid rgba(255, 139, 0, 100);
			}
			.sign-5 {
				background: linear-gradient(89.4deg, rgba(255,61,0,1) 2.8%,rgba(255,134,0,1) 98.02%);
				color: rgba(255, 255, 255, 1);
				padding: 0 10rpx;
			}
			.sign-1 {
				line-height: 40rpx;
				border-radius: 8rpx;
				background-color: rgba(255, 255, 255, 100);
				color: rgba(255, 139, 0, 100);
				font-size: 24rpx;
				text-align: center;
				border: 1px solid rgba(255, 139, 0, 100);
				padding: 0 8rpx;
				margin-right: 16rpx;
				margin-bottom: 8rpx;
			}

			.sign-2 {
				line-height: 40rpx;
				border-radius: 8rpx;
				background-color: rgba(255, 255, 255, 100);
				color: rgba(153, 153, 153, 100);
				font-size: 24rpx;
				text-align: center;
				border: 1px solid rgba(204, 204, 204, 100);
				padding: 0 8rpx;
				margin-right: 16rpx;
				margin-bottom: 8rpx;
			}

			.sign-3 {
				line-height: 40rpx;
				border-radius: 8rpx;
				background-color: rgba(255, 255, 255, 100);
				color: #8161FF;
				font-size: 24rpx;
				text-align: center;
				border: 1px solid #8161FF;
				padding: 0 8rpx;
				margin-right: 16rpx;
				margin-bottom: 8rpx;
			}

			.sign-4 {
				line-height: 40rpx;
				border-radius: 8rpx;
				background-color: rgba(255, 255, 255, 100);
				color: #00B962;
				font-size: 24rpx;
				text-align: center;
				border: 1px solid #00B962;
				padding: 0 8rpx;
				margin-right: 16rpx;
				margin-bottom: 8rpx;
			}
		}

		.price-free {
			display: flex;
			justify-content: space-between;
			margin-top: 8rpx;

			.price {
				display: flex;
				align-items: baseline;
			}

			.price-1 {
				.num {
					color: rgba(255, 98, 0, 100);
					font-size: 44rpx;
				}

				.unit {
					font-size: 12px;
					color: rgba(153, 153, 153, 100);
				}
			}

			.price-2 {
				font-size: 24rpx;
				color: #fff;
				margin-left: 8rpx;
				text-decoration: line-through;
			}
			.price-3 {
				font-size: 24rpx;
				color: #fff;
				margin-left: 8rpx;
				padding-right: 9rpx;
				 background:#00B962 ;
				 border-radius: 8rpx;
				.num1{
					 padding-left:  12rpx;
					border-radius: 8rpx 0 8rpx 8rpx;
					 padding-right: 18rpx;
					 background: #121212;
					 -webkit-clip-path: polygon(0 0, 93% 0, 84% 100%, 0% 100%);
					 clip-path:  polygon(0 0, 93% 0, 84% 100%, 0% 100%);
					 
				}
				 
			}
		}

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

			.slow,
			.fast {
				display: flex;

				.sp-font {
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 4px;
					background-color: #7a68f6;
					color: #fff;
					font-size: 28rpx;
					text-align: center;
					margin-right: 2rpx;
				}

				.fast-font {
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 8rpx;
					background-color: rgba(186, 240, 215, 100);
					color: rgba(0, 130, 69, 100);
					font-size: 28rpx;
					text-align: center;
					margin-right: 8rpx;
				}

				.slow-font {
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 8rpx;
					background-color: rgba(226, 226, 226, 100);
					color: rgba(128, 128, 128, 100);
					font-size: 28rpx;
					text-align: center;
					margin-right: 8rpx;
				}

				.num {
					font-size: 32rpx;
					color: rgba(0, 145, 67, 100);
					line-height: 40rpx;
				}
			}

			.slow {
				margin-left: 24rpx;
			}
		}
	}

	//定位

	.location {
		width: 91.4%;
		background-color: #ffffff;
		height: 120px;
		display: flex;
		justify-content: space-between;
		margin: 20px auto 0;
		border-radius: 8px;
		border: #F2F4F4 1px;

		.location-text {
			padding: 24px 0 0 28px;

			.text-1 {
				height: 16px;
				line-height: 16px;
				color: rgba(16, 16, 16, 100);
				font-size: 16px;
				text-align: left;
			}

			.text-2 {
				height: 17px;
				line-height: 17px;
				color: rgba(102, 102, 102, 100);
				font-size: 12px;
				text-align: left;
				margin-top: 4px;
				white-space: nowrap; //强制不换行
				text-overflow: ellipsis; //文本超出出现省略号
				overflow: hidden;
			}

			.text-3 {
				width: 80px;
				height: 24px;
				line-height: 22px;
				border-radius: 50px;
				color: rgba(0, 185, 98, 100);
				font-size: 12px;
				text-align: center;
				border: 1px solid rgba(0, 185, 98, 100);
				margin-top: 11px;
			}
		}

		.img-box {
			width: 120px;
			height: 120px;
			margin-right: 20px;

		}
	}

	.img-box4 {
		padding-top: 5px;
		height: 260rpx;

		img {
			max-width: 100px;
		}

		.img-view {
			color: #0293f0;
			float: right;
			font-size: 10px;
			margin-top: 3px;
			position: relative;
			bottom: 30rpx;
			left: -15px;

			.iconfont {
				font-size: 14px;
			}


		}
	}

	.state {
		width: 91.4%;
		background-color: #ffffff;
		height: 260rpx;
		min-height: 120px;
		max-height: 130px;
		display: flex;
		margin: 20rpx auto 0;
		border-radius: 8px;
		border: #F2F4F4 1px;

		.state-text {
			min-width: 70%;
			padding: 48rpx 0 0 24rpx;
			Z-INDEX: 99;

			.text-1 {
				height: 16px;
				line-height: 16px;
				color: rgba(0, 185, 98, 1);
				font-size: 16px;
				text-align: left;
				font-weight: bold;

				span {
					color: rgba(16, 16, 16, 1);
					margin-right: 12rpx;

				}
			}

			.text-2 {
				width: 160%;
				height: 17px;
				line-height: 17px;
				color: #101010;
				text-align: left;
				margin-top: 12px;

				span {
					font-weight: bold;
					margin-right: 6rpx;
					margin-left: 6rpx;
				}

				.text-21 {

					color: rgba(0, 185, 98, 1);
				}

				.text-22 {

					color: #ed7847;
				}
			}

			.text-3 {
				font-size: 14px;
				line-height: 20px;
				margin-top: 6px;
				color: #999999;
			}

		}

		.img-box {
			width: 120px;
			height: 120px;
			margin-right: 20px;

		}
	}

	//充值
	.top-up {

		width: 91.4%;
		margin: 12px auto 0;


		.top-up-title {
			color: rgba(16, 16, 16, 100);
			font-size: 16px;
		}

		.card-box {
			display: flex;
			justify-content: space-between;
			padding: 0 0 16px 0;

			.card {
				width: 48.3%;
				height: 65px;

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


		.img-box2 {
			margin-top: 12px;
			display: flex;
			justify-content: space-between;

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

			.left-image {
				width: 48.3%;
				height: 166px;
				padding: 8px 0 0 12px;
				// background: url(@/assets/img/topup1.png);
				background-repeat: no-repeat;
				background-position: 30% 10%;
				background-size: cover;

				p {
					color: rgba(56, 47, 33, 100);
					font-size: 24px;
					line-height: 28px;
					font-weight: 600;

				}

				.time-activities {
					color: rgba(56, 39, 14, 100);
					font-size: 16px;
					line-height: 22px;
					margin-top: 4px;

					.time {
						margin-left: 4px;
						color: #fa3534;
						font-weight: bold;
					}
				}
			}

			.right-image {
				width: 48.3%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.margin-top {
					margin-top: 12px;
				}

				img {
					height: 77px;

				}
			}

			;
		}

	}

	.lineBox {
		background-color: rgba(0, 145, 67, 100);
		padding: 0px 3px;
		background-color: rgba(0, 185, 98, 1);
		color: rgba(255, 255, 255, 1);
		margin-left: 6px;
		border-radius: 3px;
	}

	// 小竖线
	.line {
		display: inline-block;
		width: 3px;
		height: 12px;
		margin-right: 7px;
		background-color: rgba(0, 145, 67, 100);
	}

	// 新闻公告
	.news-title {
		padding: 0 16px;
		margin-top: 12px;
		color: rgba(16, 16, 16, 100);
		font-size: 16px;
		display: flex;
		justify-content: space-between;
		background-color: #F2F4F4;

		.news-title-left {
			display: flex;
		}

		.more {
			font-size: 14px;
			color: #777777;
			display: flex;
			line-height: 20px;

			.more-icon {
				font-size: 24px
			}
		}
	}

	.news {
		background-color: #fff;
		width: 91.4%;
		margin: 12px auto 0;
		border-radius: 8px;

		.news-content {
			display: flex;
			justify-content: space-between;
			padding: 12px;

			.content-text {
				width: 56.2%;
				height: 100%;
				line-height: 21px;
				color: #101010;
				text-align: left;
				font-size: 14px;
			}

			.content-title {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
			}

			.content-img {
				width: 40.57%;
				height: 100%;
				border-radius: 4px;
				overflow: hidden;

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

			.news-time {
				margin-top: 5%;
				color: #999999;
				width: 80px;
				height: 20px;
				font-size: 14px;
			}
		}
	}

	.bottom {
		width: 100%;
		height: 60px;

		.bot {
			width: 100%;
			margin: 0 auto;
			padding: 0 17.3%;
			justify-content: space-between;
			display: flex;

			.bot-line {
				margin-top: 20px;
				width: 21.3%;
				height: 0px;
				border: 1px solid rgba(207, 210, 213, 100);
			}

			.bot-text {
				white-space: nowrap;
				height: 17px;
				margin-top: 13px;
				margin-left: 12px;
				margin-right: 12px;
				font-size: 12px;
				text-align: center;
				color: rgba(182, 189, 195, 100);
			}
		}
	}

	// 导航栏
	.navigation {
		width: 100%;
		// height: 40px;
		padding: 10px 0;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		text-align: center;
		color: #999999;

		.nav-icon {
			width: 54px;
			font-size: 24px
		}

		.nav-text {
			font-size: 14px;
		}
	}



	.shema {
		width: 70%;
		padding-bottom: 20px;
		border-radius: 16px;
		background-color: #fff;
		position: fixed;
		top: 100px;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 9999;

		.title {
			height: 33px;
			color: rgba(16, 16, 16, 100);
			font-size: 24px;
			text-align: center;
			padding: 16px 0;
		}

		.u-radio-group {
			margin: 16px 5vw;
		}

		/deep/.u-radio {
			width: 60vw !important;

			padding: 24px 24px 40px;
			line-height: 20px;
			border-radius: 16px;
			text-align: center;
			border: #101010 1px solid;
			margin-top: 12px;

		}

		/deep/ .u-radio__label {
			text-align: left;
			height: 24px;
			// color: rgba(0, 185, 98, 100);
			font-size: 24px;

		}

		p {

			height: 22px;
			color: rgba(102, 102, 102, 100);
			font-size: 14px;
			margin-top: 12px;
			white-space: nowrap
		}

		.hint {
			text-align: center;

		}

		.btn-box {
			margin-top: 20px;

			.choice-btn {
				width: 80%;
			}
		}
	}

	.wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

	}




	// 登录提示
	.login-prompt {
		width: 91.4%;
		height: 40px;
		line-height: 40px;
		border-radius: 50px;
		text-align: left;
		padding-left: 16px;
		padding-right: 4px;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		bottom: 75px;
		color: #ffffff;

		.button {
			width: 88px;
			height: 32px;
			line-height: 32px;
			border-radius: 50px;
			background-color: rgba(0, 185, 98, 100);
			text-align: center;
			float: right;
			margin-top: 4px;
		}
	}

	.showOss {

		/deep/.u-model,
		/deep/.u-mode-center-box {
			background-color: transparent;
		}
	}
	
	.carNone {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	
		img {
			width: 100%;
			height: 100%;
		}
	
		p {
			margin-top: -60px;
		}
	}
	
	
</style>