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-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;margin-top: 40px;;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;margin-top: 40px;;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>
		
		<u-modal v-model="showTop"  class="showOss"
		:show-title="false" :show-confirm-button="false" >
			<view class="slot-content" v-if="bannerListTop.length" >
					<view  class="couponmain"   v-if="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-image width="250px;"  v-else
					 bgColor="#ff000000"
					 style="margin: auto;min-height: 250px;"
					mode="widthFix" @click="clickBannerTop()"
					:src="showTopImg" 
					>
					<view slot="loading" style="height: 200px;" >
						<u-loading mode="flower" size="186" >
						
						</u-loading>
							
					</view>
					
					</u-image>
					<view
					@click="showTopIndex++"
					 v-show="showTopIndex!=bannerListTop.length-1"
					>
					<u-button class="choice-btn" 
					 @click="nextTop(showTopIndex)"
					 style="width: 80%;margin-top: 10px;"  shape="circle">下一条({{showTopIndex+1}}/{{bannerListTop.length}})</u-button>
					
					</view>
					<u-image width="36px" 
					 v-show="showTopIndex==bannerListTop.length-1"
					 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">
					{{stationData.address}}
				</view>
				<view class="sign" v-else>
					<template v-if="personInfo&&personInfo.userType!=1">
						<view class="sign-1" v-if="stationData.giveDiscount&&stationData.discountRatio">会员服务费{{stationData.discountRatio/10}}折</view>
						<view class="sign-3" v-if="stationData.category=='超充'">160kW超充站</view>
						
						<view class="sign-2" v-if="stationData.tagList.length != 0" v-for="(tagName,tagIndex) in stationData.tagList" :key="tagIndex">{{tagName}}</view>
					</template>
				</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="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>
		
		<!-- 定位 -->
		<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="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:'',
				
				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,
				
			}
		},
		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");
			
			
			
			
				var userInfo= this.carhelp.getPersonInfo();
				
				if(userInfo&&userInfo.id){
					
					this.getf5surprised()
				}else{
					this.getBannerInfoTop("home-top");
				}
			
			//this.getBannerInfoTop("home-top");
			
			this.getPointTimeOut();
			this.getNewsList();
			this.getActivityInfoList();
		
		},
		methods: {
			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.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.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.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"
				 		})
				 })
			},
			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()
					if (this.userId&&false) {
						API.readCoupon().then((res2) => {
							var mod=res2.data.userCoupon;
							console.log(mod)
							if(mod){
								var obj={
									topmodel:"coupon",
									value:mod.value,
									text:mod.describe,
									linkUrl:"#/pages/user/coupon/myCoupon",
								}
									this.bannerListTop =[
										obj,...res.data
									]
								if(!(time&&nowtime==time)){
									this.showTop=true;
									this.showTopImg=this.bannerListTop[0].picUrl;
									this.showTopIndex=0;
									this.carhelp.set("bannerListTop",nowtime);
								}
							}
						}).catch(error2 => {
							uni.showToast({
							
								title: error2,icon: "none"
							})
						})
					}
					
				
					
					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) {
					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:6
				}
				if (this.carhelp.getPersonInfo()) {
						data.openId=this.carhelp.getOpenId()
				}
				
				siteApi.searchStationData(data).then((response) => {
					
					
					if (this.pageIndex2 == 1) {
						this.stationList = response.data.data;
					
						this.listForm.totalPage = response.totalPage;
					} else {
						this.stationList = [
							...this.stationList,
							...response.data.data
						];
					}
					this.recordsTotal2=response.data.recordsTotal;
					
					
					if(response.data.data.length){
						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 => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getPoint() {
				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>
	
	.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-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;
		}
	}
	.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: rgba(153, 153, 153, 100);
			margin-left: 8rpx;
			text-decoration: line-through;
		}
	}

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