JP-ChargeTeam51/pages/searchPile/chargeProcess/charge.vue

<template>
	<view>
		<ujp-navbar title="开始充电" :is-back="isback">
			<view class="exchange " slot="right" @click="showmodal2=true">充电说明</view>
		</ujp-navbar>

		<view class="carImg" v-if="personInfo&&personInfo.userType!=2">
			<img @click="gotoLogin" src="@/assets/img/gologin/img.png">

		</view>
		<view v-else>
			<!-- 优惠 -->
			<view class="discounts" style="padding:0 36rpx;" v-if="bannerList.length">
				<u-swiper bg-color="#fff" mode="none" :img-mode="'scaleToFill'" height="160" :list="bannerList"
					@click="clickBanner" :name="'picUrl'">
				</u-swiper>
			</view>
		</view>



		<view class="recharge">


			<view class="title">
				<view class="left lefttitle">
					请选择支付方式和充电金额
				</view>
				<!-- <view class="to-recharge" @click="show=true,recordId='',otherNum_f='',fee=0">
					去充值
				</view> -->
			</view>
			<view class="card" @click="payValue=0" :class="{
				cardselect:payValue==0,
				cardno:payValue!=0
			}">
				<view class="cardgo">
					<view class="cardinfo">
						<img src="@/assets/img/riFill-check-fill.svg" alt="">

					</view>
				</view>
				<view class="title">先付后退</view>
				<p>充电结束后，余额自动退还；不享受<span style="color:#ff3d00;">会员充电折扣、平台各类优惠券</span>等福利</p>
				<view class="rechargeMain" v-show="payValue==0">

					<view class="recharge-item" @click="moneyActiveClass_n=(item.id)"
						:class="moneyActiveClass_n == item.id ? 'active' : ''" v-for="(item,index) in moneyListN"
						:key="item.id">
						{{item.name}}
					</view>


				</view>

			</view>



			<view class="card" @click="paySelectMethod(paySelectMethodValue)" :class="{
				cardselect:payValue==1||payValue==4,
				cardno:!(payValue==1||payValue==4)
			}">
				<view class="cardgo">
					<view class="cardinfo">

						<img src="@/assets/img/riFill-check-fill.svg" alt="">

					</view>
				</view>
				<view class="title">会员账户余额充电</view>

				<p v-show="!chargingFundsBl&&!(payValue==1||payValue==4)">当前余额{{user.balance>0?user.balance.toFixed(2):'0.00'}}元
					<span @click="paySelectShow()" style="color:#00B962;margin-left: 20px; ">去充值></span>

				</p>
				<p  v-show="(payValue==1||payValue==4)">
					{{chargingFundsBl?'优先使用付款方式':'账户余额'}}
					 <span v-if="!chargingFundsBl" style="    color: #ec4530;margin-left: 8rpx;"> {{user.balance>0?user.balance.toFixed(2):'0.00'}}元</span>
					<span @click="paySelectShow()" style="color:#00B962;margin-left: 20px; ">去充值></span>
					
					
				</p>
				<view class="rechargeBalance"  v-if="chargingFundsBl" >
					<view class="rechargeBalanceItem">账户余额 <span  style="    color: #ec4530;margin-left: 8rpx;">{{user.balance>0?user.balance.toFixed(2):'0.00'}}元</span></view>
					<view class="rechargeBalanceItem" v-if="chargingFundsBl">|</view>
					<view class="rechargeBalanceItem"  v-if="chargingFundsBl" >充电金<span  style="    color: #ec4530;margin-left: 8rpx;">{{user.chargingFunds>0?user.chargingFunds.toFixed(2):'0.00'}}元</span></view>
				</view>
				<view class="rechargeMain" v-if="chargingFundsBl" v-show="payValue==1||payValue==4">
					
					<view 
						class=" recharge-item  "   @click="paySelectMethodValue=1"  :class="payValue == 1? 'active' : ''" >
						账户余额
					</view>
					<view
						class=" recharge-item  "   @click="paySelectMethodValue=4"  :class="payValue == 4? 'active' : ''">
						充电金
					</view>
				</view>
				<p v-if="chargingFundsBl" v-show="(payValue==1||payValue==4)" >充电时长</p>
				<view class="rechargeMain" v-show="payValue==1||payValue==4">
					
					
					<view @click="moneyClick(-1)" :class="!otherNum&&moneyActiveClass == -1? 'active' : ''"
						class=" recharge-item  ">
						充满自停
					</view>
					<view class="recharge-item" @click="moneyClick(item.id)"
						:class="!otherNum&&moneyActiveClass == item.id ? 'active' : ''"
						v-for="(item,index) in moneyList" :key="item.id">
						{{item.name}}元
					</view>
					<view class="recharge-item recharge-item2" :class="otherNum ? 'active' : ''" style="
						padding: 1px 0px;">
						<ujp-input v-model="otherNum" @input="ckInput" @focus="focus" type="digit" placeholder="其他金额" />

					</view>

				</view>

			</view>


			<view class="card" v-for="(companyItem,i) in companyList" :key="i" @click="paySelectMethod(2,companyItem)"
				:class="{
				cardselect:(payValue==2&&companyItem.enterpriseAccount.id==companyPaySelect.enterpriseAccount.id),
				cardno:!(payValue==2&&companyItem.enterpriseAccount.id==companyPaySelect.enterpriseAccount.id)
			}">
				<view class="cardgo">
					<view class="cardinfo">

						<img src="@/assets/img/riFill-check-fill.svg" alt="">

					</view>
				</view>
				<view class="title">{{companyItem.enterpriseAccount.entName}}账户余额充电</view>

				<p>余额{{companyItem.enterpriseAccount.totalAmount>0?companyItem.enterpriseAccount.totalAmount.toFixed(2):'0.00'}}元
					<span
						v-show="(payValue==2&&companyItem.enterpriseAccount.id==companyPaySelect.enterpriseAccount.id)"
						@click="companyCarSelectBl=true"
						style="color:#00B962;margin-left: 40rpx; ">{{companyPaySelect.car?companyPaySelect.car+'(更换)':'选择充电车辆>'}}</span>

					<span style="margin-left: 40rpx; "
						v-show="(payValue==2&&companyItem.enterpriseAccount.id==companyPaySelect.enterpriseAccount.id)"></span>

				</p>
				<view class="rechargeMain"
					v-show="(payValue==2&&companyItem.enterpriseAccount.id==companyPaySelect.enterpriseAccount.id)">
					<view @click="moneyClick(-1)" :class="!otherNum&&moneyActiveClass == -1? 'active' : ''"
						class=" recharge-item  ">
						充满自停
					</view>

					<view class="recharge-item recharge-item2" :class="otherNum ? 'active' : ''" style="
						padding: 1px 0px;">
						<ujp-input v-model="otherNum" @input="ckInput" @focus="focus" type="digit" placeholder="其他金额" />

					</view>

				</view>

			</view>
			<!-- 优惠券2 -->
			<view v-if="personInfo.userType == '1'&&0"   class="greyTips" >
				车主注册会员可享受至少5%优惠，并可快速进入会员注册页面
			</view>
			<!-- 入场车辆 -->
			<view class="member"  :class="{
					'cost-explain2':!submitForm.carNumber
				}">
				<view class="actively ">
					入场车辆
				</view>
				<view class="type" @click="carDet()" >
					{{submitForm.carNumber?submitForm.carNumber:'填车牌号可减免部分停车费用'}}
					<img v-if="!submitForm.carNumber"  src="@/assets/static/img/riLine-edit-box-line2.svg" alt="">
					
				</view>
			</view>
			
			<view class="member">
				<view class="actively">
					优惠券
				</view>

				<view class="right" v-if="payValue=='0'">
					先付后退不享受会员优惠活动

				</view>
				<view class="right" v-else-if="payValue=='4'">
					充电金不享受会员优惠活动
				
				</view>
				<view class="right" v-else-if="payValue=='2'">
					企业单位用户不可使用优惠券
				</view>
				<view class="right" @click="chooseCoupons" v-else-if="selectObj.id">
					{{selectObj.threshold == 0 ? '无门槛' : '满'+selectObj.threshold.toFixed(2)+'元可用'}},

					<span class="price"
						v-if="selectObj.classify == '1'||selectObj.classify == '3'">抵扣{{selectObj.value.toFixed(2)}}元</span>
					<span class="price" v-if="selectObj.classify == '2'">
						<template v-if="selectObj.value==0">
							服务费全免
						</template>
						<template v-else>
							服务费{{selectObj.value}}折
						</template>
					</span>

					<view class="iconfont">&#xe600;</view>
				</view>
				<view class="right" @click="chooseCoupons" v-else-if="listlength">
					未选择,剩余{{listlength}}张优惠券
					<view class="iconfont">&#xe600;</view>
				</view>
				<view class="right" @click="chooseCoupons" v-else>
					无优惠券
					<view class="iconfont">&#xe600;</view>
				</view>

			</view>

			
			<!-- 会员活动 -->
			<view class="member">
				<view class="actively ">
					会员活动
				</view>
				<view class="type" v-if="payValue=='0'">
					先付后退不享受会员优惠活动

				</view>
				<view class="type" v-else-if="payValue=='4'">
					充电金不享受会员优惠活动
				
				</view>
				<view class="type" v-else-if="payValue=='2'">
					企业单位用户不享受会员优惠活动
				</view>

				<template v-else-if="userCardBool">

					<view class="type" v-if="!vin" style="color: red;">
						vin码不一致
					</view>
					<view class="type" v-else-if="canUse">
						<template v-if="userCard.cardType==4">
							{{userCard.cardName}}
							{{userCard.monthlyRentName}}
							
						</template>
						<template v-else>
							{{userCard.classify==1?'折扣卡':''}}
							{{userCard.classify==2?'服务费'+(userCard.serviceFeeDiscountRate/10)+'折卡':''}}
						</template>
						
					</view>
					<view class="type" style="color: red;" v-else>
						此充电站不支持折扣卡
					</view>
				</template>
				<template v-else>
					<view class="type" style="color:#999999" @click="gotoUrl('pages/discountCard/productDetails')">
						未使用服务费6折卡<view class="iconfont">&#xe600;</view>
					</view>
				</template>

			</view>

			<view v-if="(cardList.length||userCard)&&(payValue=='1')" class="cardListView">
				<view  class="cardListItemTitle"  v-if="cardList.length>1" >点击切换其他卡</view>
				
				<view  class="cardListItem  card" v-for="(item,i) in cardList" 
				 :key="i"  :class="{
					 cardselect:userCard&&userCard.id==item.id,
					  cardno:(!userCard||userCard.id!=item.id)
				 }" @click="userCardBtn(item)" >
					<view class="cardgo">
						<view class="cardinfo">
					
							<img src="@/assets/img/riFill-check-fill.svg" alt="">
					
						</view>
					</view>
					<view  class="cardListName" >
						{{item.cardName}}
						
					</view>
					<view  class="cardListText" v-if="item.classify==1" >
						
						<view>充电服务费全免</view>
						
						<view>
							{{thisendTime(item.endTime)}}到期
						</view>
					</view>
					<view  class="cardListText" v-if="item.classify==2" >
						
						<view v-if="item.chargeDegreeLimit">
							已用{{item.chargedDegree?item.chargedDegree.toFixed(0):0.00}}度 / 共{{item.chargeDegreeLimit}}度
						</view>
						<view  v-if="item.chargeDegreeLimit==0&&item.saveInformation">
							已用{{item.saveInformation.num}}次 /
							共省{{item.saveInformation.saveMoney}}元
						</view>
						
						<view>
							{{thisendTime(item.endTime)}}到期
						</view>
					</view>
				</view>
				<p>点击可<span style="color:red">取消</span>使用<span style="color:#00b962">“服务费折扣卡”</span></p>
			</view>

		</view>
		<view class="botton">
			<view style="    display: flex;
    justify-content: center;">
			<u-checkbox-group  >
						<u-checkbox 
						 active-color="green" shape="circle"
							v-model="contractSignTime" 
							
						>我已阅读并同意</u-checkbox><span style="color: rgba(0, 185, 98, 1);"  @click="gotoUrl('pages/article/details?code=YHXY')">《优电联盟用户使用协议》</span>
			</u-checkbox-group>
				</view>	
			<button class="bottonBtn" @click="submit">开始充电</button>

		</view>

		<u-modal v-model="showmodal2" confirm-text="知道了" title="充电说明">


			<view style="padding: 10px;font-size: 32rpx;">
				1.最终结算金额将以实际充入电量为准；<br />
				2.充满自停模式需要您的余额不低于10元才可充电；<br />
				3.充电金额请输入1元~500元的整数。实际充电金额与所选金额会略有出入（一般误差约几分钱)；<br />
				4.完成充电后，在满足条件的情况下，优惠券自动抵扣；提前结束充电则不使用优惠券并返还至您的卡包。<br />

				5.先付后退模式，无法享受平台会员的服务费折扣、优惠券等优惠活动。<br />
			</view>


		</u-modal>



		<!-- <view class="but-box" style="margin-bottom: 20px;">
			<u-button
			  style="	background-color: rgba(0, 185, 98, 100);
			color: rgba(255, 255, 255, 100);
			font-size: 16px;
			text-align: center;"
			 
			 @click="submit" shape="circle">开始充电</u-button>
		</view> -->



		<u-modal v-model="showmodal" :show-cancel-button="true" title="余额不足" confirm-text="前往充值"
			content="账户余额不足，充值成功后开始充电" @confirm="show=true"></u-modal>
		<u-popup v-model="companyCarSelectBl" :closeable="true" mode="bottom" border-radius="30">

			<view class="indexData5content">
				<view class="contentTitle">
					选择充电车辆
				</view>
				<view
					v-if="companyPaySelect&&(companyPaySelect.carList&&companyPaySelect.carList.length==0||companyPaySelect.carList==null)"
					style=" text-align: center;">
					<img src="@/assets/static/img/暂无数据-缺省页.png" alt="">
					<p class="oldTextjp2">未分配车辆，请联系管理员</p>
				</view>
				<scroll-view v-else scroll-y="true" style="height: 520rpx;">

					<view style="padding-bottom: 30rpx;">
						<u-radio-group v-model="companyPaySelect.car" size="42">
							<view class="contentbody">
								<view v-for="(item,index) in companyPaySelect.carList"
									@click="companyPaySelect.car=(item.carNum),companyCarSelectBl = false;"
									class="contentItem" :key="index">
									<view class="span1">{{item.carNum}}</view>
									<view class="span2">
										<span v-show="!item.vin" style="color:#fff">aaa</span>
										<img v-show="item.vin" style="vertical-align: bottom;" width="20"
											src="@/assets/img/riLine-link-m.png" />
										<span v-show="item.vin" style="color:#999999 ">已关联Vin码</span>

									</view>

									<view class="span3">

										<u-radio style="    overflow: inherit;"
											@change="companyPaySelect.car=(item.carNum),companyCarSelectBl = false;"
											:name="item.carNum">
											<span style="color:#fff">.</span>
										</u-radio>
									</view>
								</view>
							</view>
						</u-radio-group>
					</view>

				</scroll-view>

			</view>

		</u-popup>
		<!-- 弹窗2 -->
		
		<!-- 弹窗 -->
		<template>
			<view>
				<u-popup v-model="show" mode="bottom">
					<view class="recharge recharge2" style="padding-bottom: 0;">
						<view class="title lefttitle ">选择充值金额
							<span class=" rightspan">当前余额
								<span style="color: red;">{{user.balance>0?user.balance.toFixed(2):'0.00'}}元</span>
							</span>
						</view>
					

						<view class="rechargeMain">
							<template  v-for="(item,index) in moneyList_f">
								
								<view class="tip-box" v-if="index==4&&userChargingAmountObj.type">
									<template v-if="userChargingAmountObj.type==1">
										新用户参与充值送折扣卡活动推荐充值<span>1000元</span>，预计可省 <span> 133元</span>。
								
									</template>
									<template v-else-if="userChargingAmountObj.type==2">
										按您每月充电花费，半年将超<span>{{userChargingAmountObj.money}}元</span>，参与充值送折扣卡活动推荐充值 <span>{{userChargingAmountMethod(userChargingAmountObj).num1}}元</span>，预计可省 <span>{{userChargingAmountMethod(userChargingAmountObj).num3}}元</span>。
								
									</template>
									<template v-else>
										近半年您已花费<span>{{userChargingAmountObj.money}}元</span>充电，参与充值送折扣卡活动推荐充值 <span> {{userChargingAmountMethod(userChargingAmountObj).num1}}元</span>，预计可省 <span> {{userChargingAmountMethod(userChargingAmountObj).num3}}元</span>。
								
									</template>
								
								</view>
								
								<view class="recharge-item"
									:class="{
										active:otherNum_f==item.rechargeAmount||moneyActiveClass_f == item.id ,
										'recharge-item-rk':item.amountRemark
									}"
									 :key="item.id" @click="moneyClick_f(item.id,item)">
									{{item.amountDesc?item.amountDesc:item.rechargeAmount+'元'}}
									
									<view class="item-rk" v-if="item.amountRemark">送<span class="item-rk-span" >{{item.amountRemarkNum}}</span>折卡</view>
									
								</view>
							</template>
							<p  style="   font-size: 14px;" v-show="selectItem.amountRemark">
								充值满
								<span style="color: #ff8600;">{{selectItem.amountDesc}}</span>立送服务费<span style="color: #ff8600;">{{selectItem.amountRemarkNum}}折半年卡</span>1张（<span style="color: #ff8600;">有效期180天，不限充电度数</span>）<span v-if="selectItem.amountRemarkSf">和{{selectItem.amountRemarkSf}}身份</span>，可省约<span style="color: #ff8600;">{{userChargingAmountMethod({
						money:selectItem.rechargeAmount
					}).num3}}元</span>。活动所充金额仅用于支付本平台充电费用（含电费和服务费），不可转赠、提现、退款,
								<span style="color: #ff8600;margin-left: 16px;" @click="gotoUrl('pages/temporary/activity20250501?source=99')">点击查看活动详情</span>
							</p>

						</view>
						<p class="oldTextjp2" oldstyle="font-size:16px">其他充值金额</p>
						<view style="margin-bottom: 32px;">

							<view :class="otherNum_f&&selectItem.rechargeAmount!=otherNum_f? 'active' : ''" class="recharge-input self-stop"
								style="height: 100%;width: 100%;margin-bottom: 8px;">
								<ujp-input v-model="otherNum_f" @input="ckInput_f" @focus="focus" type="digit"
									:border="true" />


							</view>
							<view style="color: rgba(153, 153, 153, 100);
						font-size: 12px;
						text-align: left;
						font-family: AlibabaPuHui-regular;"><span style="color:red">*</span>金额范围为1元-500元</view>

						</view>

						<view class="recharge-btn transactionClass" style="margin-top: 60px;">
							<view>
								<u-checkbox-group>
									<u-checkbox 
									active-color="green" v-model="checked" shape="circle"></u-checkbox>
								</u-checkbox-group>
								我已阅读并同意<span @click="gotoUrl('pages/article/details?code=CZXY')"
									style="color:#00B962">《充值协议》</span>

							</view>

							<u-button class="success-btn" shape="circle" type="success" @click="rechargeNow"
								style="margin-top: 12px;margin-bottom: 16px;">
								<span>微信充值</span>
							</u-button>
						</view>
					</view>
				</u-popup>

			</view>
		</template>
		
		<u-modal v-model="contractSignTimeBl"
		 :show-confirm-button="true" :show-title="false" :show-cancel-button="true" confirm-color="rgba(0, 185, 98, 1)"
		 cancel-text="放弃充电" confirm-text="同意并充电"  @confirm="contractSignTimeSubmit()"
		 >
			<view class="slot-content" style="padding:40rpx;    text-align: center;margin-top: 10rpx;">
							我已阅读并同意<br/>
							<span style="color: rgba(0, 185, 98, 1);"  @click="gotoUrl('pages/article/details?code=YHXY')">《优电联盟用户使用协议》</span>
						</view>
		</u-modal>
		<uMessage ref="uMessage" :stationId="stationId" :deviceNo="submitForm.deviceNo" :channelNo="submitForm.channelNo"   ></uMessage>
		
		<quickRegistration v-if="personInfo.userType == '1'" @login="loginMethod"   :carNum="carNumber"  ></quickRegistration>
	</view>
</template>

<script>
	import uMessage from '@/components/UMessage.vue'
	
	import * as API from '@/apis/chargeProcess.js'
	import * as API_index from '@/apis/index.js'
	
	import * as userApi from '@/apis/user.js'
	import * as newsApi from '@/apis/news.js'
	import * as API_finance from '@/apis/finance.js'
	import {
		wxPayJs
	} from '@/utils/wxpay'
	import {
		newDate,daysDistance
		
	} from '@/utils'
	
	import * as Pay from '@/apis/weixin.js'
// import { contentStore } from 'core/core.model'
	import quickRegistration from '@/components/QuickRegistration.vue'
	


	export default {
		components: {
			quickRegistration,uMessage
		},
		data() {
			return {
				userChargingAmountObj:{
					
				},
				fee: 0,
				recordId: "",
				show2: false,
				stationId: "",
				elderMode: false,
				isback: true,
				show: false,
				moneyActiveClass_n: "50",
				moneyActiveClass: "-1",
				moneyActiveClass_f: "-1",
				contractSignTime:"",
				contractSignTimeBl:false,
				detail: {},
				couponsuse: '',
				showmodal: false,
				showmodal2: false,
				//提交信息
				//提交信息
				submitForm_f: {

					//paytype:'YE',
				},
				submitForm: {
					deviceNo: '',
					channelNo: '',
					carNumber: '',
					chargeStrategy: 2,
					amount: 0
					//paytype:'YE',
				},
				uuid: 0,
				user: {},
				companyCarSelectBl: false,
				companyList: [

				],
				companyPaySelect: {
					id: "",
					car: "aaa"
				},
				otherNum_f: '',
				otherNum: '',
				moneyList_f: [],
				paySelect: true,
				payName: "",
				payValueTemp: 0,
				payValue: 0,
				payList: [{
					name: "先付后退",
					tips: "游客不享受平台优惠活动",
					value: "1",
					select: false,
				}, {
					name: "个人账户支付",
					tips: "可使用折扣卡、优惠券、折扣卷等",
					value: "2",
					select: false,
				}, {
					name: "单位账户支付",
					tips: "账户余额：99999元",
					value: "3",
					select: false,
				}, {
					name: "充电金",
					tips: "账户余额：99999元",
					value: "4",
					select: false,
				}, {
					name: "充电金",
					tips: "账户余额：99999元",
					value: "4",
					select: false,
				}],
				moneyList: [

					{
						id: '10',
						name: '10'
					},
					{
						id: '20',
						name: '20'
					},
					{
						id: '50',
						name: '50'
					},
					{
						id: '100',
						name: '100'
					},

				],
				moneyListN: [{
						id: '10',
						name: '10元'
					},
					{
						id: '20',
						name: '20元'
					},
					{
						id: '50',
						name: '50元'
					}
				],
				userCard: null,
				canUse: false,
				selectObj: {},
				value: "",
				// 优惠券
				listlength: 0,
				vin: true,
				bannerList: [],
				checked: true,
				selectItem: {},
				personInfo: {},
				carNumber: "",
				show3: false,
				cardList:[],

				startMode:"",

				paySelectMethodValue:1,
				chargingFundsBl:false,
				id:""

			}
		},
		computed: {
			userCardBool() {
				if (this.userCard) {
					var date = new Date().getTime()
					var reg = new RegExp('-', 'gi')
					var str = this.userCard.endTime;
					//console.log(str.replace(reg,'/'))
					var date2 = new Date(str.replace(reg, '/')).getTime();
					if (date < date2) {
						return true;
					}
				}
				return false
			}
		},
		onLoad(op) {
			if(op.startMode){
				this.startMode=op.startMode
			}
			
			if(op.id){
				this.id=op.id
			}
			this.uuid = new Date().getTime();
			this.stationId = op.stationId;
			if (op.deviceNo) {

				this.submitForm.deviceNo = op.deviceNo;
				this.submitForm.channelNo = op.gun;
				this.carNumber = op.carNumber;
				this.submitForm.carNumber = op.carNumber;
				this.carhelp.setGunIdCharge(this.submitForm);
			}
			if (op.vin == 'no') {
				this.vin = false;
			}
			if (op.isback) {
				this.isback = false;
			}
			
			this.useCoupon()

			var couponsuse = "充电结束后满足金额即可生效,提前结束充电则优惠券不生效并返回"
			// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if (couponsuse) {
				this.couponsuse = couponsuse
			}
			this.init()
		},
		onReady() {
			
			this.getBannerInfo("charge-start")

			this.elderMode = this.carhelp.get('getElderModeClass') == '长辈模式';
			if (this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')
				
			this.loginMethod()
			//this.uMessageShow()
				
			
		},
		onShow() {
			this.personInfo = this.carhelp.getPersonInfo()

			var obj = this.carhelp.get("chooseCoupons");
			if (obj) {
				if (obj.uuid == this.uuid) {
					this.selectObj = obj.selectObj;
				}
			}

			this.getHomePage()
		},
		methods: {
			uMessageShow(){
				this.$refs.uMessage.bShow()
				
			},
			userCardBtn(item){
				if(this.userCard&&this.userCard.id==item.id){
					this.userCard=null
					uni.showToast({
						title: "已经取消选中"
					})
				}else{
					this.userCard=item
				}
				
			},
			carDet(t) {
				if(this.submitForm.carNumber){
					return
				}
				this.onShowRole = true
				
				var url="/pages/user/car/carDet?jpcode=jp_team51_charge_id:A_" + this.id
				 
				uni.navigateTo({
					url: url
				})
			
			},
			loginMethod(form){
				this.personInfo = this.carhelp.getPersonInfo()
				// if(plus){
				// 	this.userCard=plus.userCard;
				// }
				if (this.personInfo && this.personInfo.userType == "1") {
					this.show3 = true
				}
				
				this.personInfo = this.carhelp.getPersonInfo()
				if (this.personInfo.userType == "1") {
					this.payValueTemp = 0;
					this.payValue = 0;
				} else {
					this.payValueTemp = 1;
				
					var payValueDefault = this.carhelp.get("payValueDefault");
					
					if(this.user&&this.user.chargingFunds>0){
						payValueDefault="4"
					}
					this.payValue = 1;
					if (payValueDefault == "1" || payValueDefault == "0") {
						this.payValue = payValueDefault;
					}
					if (payValueDefault == "1" || payValueDefault == "4") {
						this.paySelectMethodValue = payValueDefault;
						this.payValue = payValueDefault;
					}
					
					if(payValueDefault==4){
						this.chargingFundsBl=true;
					}
				}
				this.payName = this.payList[this.payValue].name;
				this.useCoupon()
				if(form){
					this.submitForm.carNumber=form.carNumber
				}
			},
			thisdaysDistance(endTime){
						
							 var date=new Date()
							 var date2=newDate(endTime);
							 return daysDistance(date,date2)
							 
			},
			getChargeList() {
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API_index.personCardList({
				
				}).then((res) => {
					
					uni.hideLoading();
					this.cardList=res.data.cardList
					
					
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			gotoLogin() {
				this.onShowRole = true
				if (false) {

				} else {
					uni.navigateTo({
						url: "/pages/login/login?jpcode=jp_team51_charge_id:A_" + this.submitForm.deviceNo
					})
				}

			},
			paySelectShow() {
				if (this.personInfo.userType == "1") {

				} else {
					this.show = true;
					this.recordId = '';
				//	this.otherNum_f = '';
					//this.fee = 0
				}

			},
			//companyPaySelect
			paySelectCompany() {

			},
			paySelectMethod(value, company) {
				console.log(value)
				if (this.personInfo.userType == "1") {
					uni.showToast({
						title: "游客模式只支持“先付后退”"
					})
				} else {
					this.payValue = value
					if (value == 2) {

						this.companyPaySelect = company


						if (company.carList && company.carList.length == 1) {
							//this.companyPaySelect=entRegList[0]

							this.companyPaySelect.car = company.carList[0].carNum;
						}
					}
					this.$forceUpdate()
				}
				

			},
			moneyClick_f(id, item) {
				
				this.otherNum_f = item.rechargeAmount;
				
				this.moneyActiveClass_f = id;
				if (item) {
					this.selectItem = item;
					// if(item.imgUrl){
					// 	this.selectImg=item
					// }
				}
			},
			rechargeNow2() {
				//先付后退


				this.submitForm_f = {};
				var fee = 0;
				this.submitForm_f.amount = this.fee;


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

				if (this.recordId) {
					this.submitForm_f.recordId = this.recordId


				}
				//(this.submitForm)
				this.wxpy()

			},
			rechargeNow() {
				if (!this.checked) {
					uni.showToast({
						title: "请同意《充值协议》后进行充值"
					})
					return
				}
				if(!this.otherNum_f){
					uni.showToast({
						title:"请选择充值金额"
					})
					return
				}
				
				this.submitForm_f = {};
				var fee = 0;
				if (this.moneyActiveClass_f) {
					this.submitForm_f.chargingMarketingId = this.selectItem.id;
					fee = this.selectItem.rechargeAmount
				} else {
					this.submitForm_f.amount = this.otherNum_f
					fee = this.otherNum_f
				}

				if (this.fee) {
					var thisfee = this.fee
					if (this.fee > parseFloat(fee)) {
						uni.showToast({
							title: `最少充值${thisfee}元才能启动充电`
						})
						return
					}
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				if (this.recordId) {
					this.submitForm_f.recordId = this.recordId


				}
				//(this.submitForm)
				this.wxpy()

			},
			wxpy() {
				var obj = {
					...this.submitForm_f
				}
				if (obj.amount) {

					for (var i in this.moneyList_f) {
						var item = this.moneyList_f[i]
						if (item.rechargeAmount == obj.amount) {

							delete obj.amount;

							obj.chargingMarketingId = item.id
							break
						}
					}
				}
				Pay.wxpay(obj).then((response) => {

					if (!response.result) {
						uni.showToast({
							title: response.message
						})
						return
					}
					var data = response.data
					uni.hideLoading()
					//("Pay+"+new Date().getTime())		
					wxPayJs(data);

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

						title: error
					})

				})
			},
			focus() {
				console.log(0)
				uni.pageScrollTo({
					scrollTop: 999999,
					duration: 0
				})
			},
			init() {




				var data = {
					type: 2,
				};


				API_finance.marketingData(data).then((res) => {

					this.moneyList_f = res.data.chargingMarketingList
					if (this.moneyList_f.length > 0) {
						this.selectItem = this.moneyList_f[0];
						this.moneyActiveClass_f = this.moneyList_f[0].id
						//(this.moneyActiveClass)
						
						this.moneyClick_f( this.moneyList_f[0].id,this.moneyList_f[0])
						
					}

					for(var i in this.moneyList_f){
						var item =this.moneyList_f[i]
						console.log(item.rechargeAmount)
						if(item.rechargeAmount==100){
							// this.selectItem = this.moneyList[i];
							// this.moneyActiveClass = this.moneyList[i].id
							this.moneyClick_f(item.id,item)
						}
						if(item.amountRemark&&item.marketingCardList.length){
							var mk=item.marketingCardList[0]
							item.amountRemarkNum=mk.serviceFeeDiscountRate/10
							item.amountRemarkHtml=item.amountRemark.substring(item.amountRemark.indexOf('折'))
							
							
							item.amountRemarkSf=mk.giftMemberLevelStr
							
						}
						
					}


					var list = res.data.priceList
					if (list.length) {
						this.moneyListN = [];
						for (var i in list) {
							this.moneyListN.push({
								id: list[i],
								name: list[i] + "元"
							})
						}
						this.moneyActiveClass_n = list[0]
					}
					this.init1()

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

						title: error
					})
				})
			},
			init1() {
				
				
				API_index.userChargingAmount().then((res) => {
					this.userChargingAmountObj = res.data
					//this.userChargingAmountObj.type=1
					
					
				}).catch(error => {
					
				})
			},
			clickBanner(index) {
				var mod = this.bannerList[index]

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

				} else {
					uni.navigateTo({
						url: mod.linkUrl
					})
				}

			},
			getBannerInfo(code) {
				
				newsApi.getBannerInfo(code).then((res) => {
					
					this.bannerList = res.data;

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

						title: error,
						icon: "none"
					})
				})
			},

			getPile() {

			},
			theme(type) {

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

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


				}
			},
			chooseCoupons() {
				this.submitInit()

				this.gotoUrl('pages/user/coupon/chooseCoupons?uuid=' + this.uuid + "&amount=" + this.submitForm.amount +
					"&stationId=" + this.stationId)

			},
			ckInput_f(text) {
				if (text.indexOf('.') > 0) {

					var k = text.split(".")[1]
					if (k.length >= 3) {
						this.$nextTick(() => {
							text = parseFloat(text).toFixed(2);
							this.otherNum_f = text
						})
					}
				}
				var t = Number(text);
				if (t < 1) {
					this.$nextTick(() => {
						this.otherNum_f = '';
					})

				}
				if (t > 500) {
					this.$nextTick(() => {
						this.otherNum_f = 500;
					})

				}
				
				this.moneyActiveClass_f=''
				for(var i in this.moneyList_f){
					var item=this.moneyList_f[i]
					if(this.otherNum_f==item.rechargeAmount){
						this.moneyClick_f(item.id,item)
					}
				}

			},
			ckInput(text) {
				if (text.indexOf('.') > 0) {

					this.$nextTick(() => {
						this.otherNum = text.substring(0, text.indexOf('.'))
						uni.showToast({
							title: "请输入正整数"
						})
					})
				}
				var t = Number(text);
				if (t < 1) {
					this.$nextTick(() => {
						this.otherNum = '';
					})

				}
				if (t > 500) {
					this.$nextTick(() => {
						this.otherNum = 500;
					})

				}

				this.selectJudge();

			},
			moneyClick(index) {
				this.otherNum = ''
				this.moneyActiveClass = index;
				this.selectJudge();

			},
			selectJudge() {
				this.submitInit()
				if (this.submitForm.amount == 0) {
					return
				}
				if (this.selectObj.id && this.selectObj.threshold > this.submitForm.amount) {
					uni.showToast({
						title: "请重新选择优惠券"
					})
					this.selectObj = {}
				}
			},
			radioChange(e) {},
			confirm() {

				////(JSON.stringify(this.submitForm))
				if (this.payValue == 1) {
					if (this.selectObj.id) {
						this.submitForm.userCouponId = this.selectObj.id
					}
					if (this.userCardBool && this.canUse && this.vin) {
						this.submitForm.userCardId = this.userCard.id
					}
				} else {
					this.submitForm.userCouponId = ""
					this.submitForm.userCardId = ""
				}
				if (this.payValue == 2) {
					if (!this.companyPaySelect.car) {
						uni.showToast({
							title: '请选择充车辆'
						})
						return
					}
					this.submitForm.vipUserId = this.companyPaySelect.vipUser.id;
					this.submitForm.carNumber = this.companyPaySelect.car;
				} else {
					this.submitForm.carNumber = this.carNumber;
					this.submitForm.vipUserId = ""
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.carhelp.set("payValueDefault", this.payValue);
				if (this.payValue == 2) {
					this.carhelp.set("payValueDefault3", {
						carNumber: this.companyPaySelect.car,
						companyId: this.companyPaySelect.enterpriseAccount.id,
					});
				}
				if(this.startMode){
					this.submitForm.startMode=this.startMode;  //判断充电入口
				}
				//this.submitForm.deviceNo = this.detail.deviceNo;
				API.startCarCharging(this.submitForm).then((res) => {
					//(JSON.stringify(this.res))
					if(res.data.status == "4"){
						this.uMessageShow()
					}else if (res.data.status == "5") {

						uni.hideLoading()

						if (this.submitForm.payType == "1") {
							this.recordId = res.data.recordId;
							this.fee = res.data.fee;

							this.rechargeNow2() //先付后退
						} else {
							if (this.payValue == 2) {
								uni.showToast({
									title: "余额不足，请联系企业单位人员"
								})
							} else {
								this.showmodal = true;
								this.recordId = res.data.recordId;

								var fee = res.data.fee;


								this.fee = (fee - this.user.balance).toFixed(2);
								this.otherNum_f = this.fee;
							}

						}

					} else {

						this.gotoUrl("pages/searchPile/chargeProcess/dcCharging?id=" + res.data.recordId);


					}



				}).catch((error)=> {
				
					uni.hideLoading()
					if (error == '用户账户余额不足!') {

					} else {
						
						uni.showToast({
							title: error
						})
						
					}

				})
			},
			thisendTime(endTime){
				if(endTime){
					var reg=new RegExp('-','gi')
					var str=endTime.substring(0,10).replace(reg,'.')
					return str
				}
				return ''
			},
			getHomePage() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})



				API.userCard({
					stationId: this.stationId
				}).then((res) => {
					
					this.userCard = res.data.regUserCard
					this.canUse = res.data.canUse
					//this.user = res.data
				

					API.personalCenter({
						stationId: this.stationId
					}).then((res2) => {
						this.user = res2.data
						this.contractSignTime=res2.data.regUser.contractSignTime
						if(this.user.chargingFunds){
							this.chargingFundsBl=true;
						}
						
						var entRegList = res2.data.entRegList;
						this.companyList = []

						for (var i in entRegList) {
							var item = entRegList[i]
							if (item.enterpriseAccount) {
								this.companyList.push(item)
							}
						}


						this.isReady = true;
						uni.hideLoading()

						var payValueDefault = this.carhelp.get("payValueDefault");

						if (payValueDefault == "2") {
							var payValueDefault3 = this.carhelp.get("payValueDefault3");


							for (var i in this.companyList) {
								var item = this.companyList[i]
								if (item.enterpriseAccount.id == payValueDefault3.companyId) {
									this.companyPaySelect = item;

									for (var j in item.carList) {
										var car = item.carList[j]
										if (car.carNum == payValueDefault3.carNumber) {
											this.companyPaySelect.car = payValueDefault3.carNumber;
											this.payValue = payValueDefault;
										}
									}

								}
							}
						}
						this.getChargeList()
						this.loginMethod()

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


				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			useCoupon() {
				var obj = {
					status: 0,
					stationId: this.stationId,
					hideCardCoupon: 1
				}
				if (this.userCardBool) {
					obj.userCardId = this.userCard.id
				}

				userApi.couponList(obj).then((res) => {

					this.listlength = res.data.recordsTotal;



					

				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			submitInit() {


				if (this.moneyActiveClass == -1 && !this.otherNum) {
					this.submitForm.chargeStrategy = 0;
					this.submitForm.amount = 0
				} else {
					this.submitForm.chargeStrategy = 2;
					if (this.otherNum) {
						this.submitForm.amount = this.otherNum
					} else {
						this.submitForm.amount = this.moneyActiveClass
					}
				}


			},
			contractSignTimeSubmit(){
				this.contractSignTime=true;
				this.submit()
			},
			updateContractSignTime(){
				if(this.user&&this.user.regUser&&!this.user.regUser.contractSignTime){
					API.updateContractSignTime({
						openId:this.carhelp.getOpenId()
					}).then((res) => {
						
					}).catch(error => {
						uni.showToast({
							title: error
						})
					})
					
				}
			},
			submit() {
				
				if(!this.contractSignTime){
					this.contractSignTimeBl=true;
					return
				}
				
				if (!this.submitForm.channelNo) {
					uni.showToast({
						title: '请先选择充电通道'
					})
					return
				}
				this.submitForm.payType = this.payList[this.payValue].value;
				if (this.submitForm.payType == "1") {
					this.submitForm.amount = this.moneyActiveClass_n
					this.submitForm.chargeStrategy = 2;
				} else {
					this.submitInit()
				}
				this.updateContractSignTime()
				this.confirm()



			},
		}

	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	.exchange {
		margin-right: 32rpx;
		color: rgba(119, 119, 119, 100);
		//font-size: 24rpx;
		font-size: 32rpx;
		//margin-right: 6rpx;
	}

	.rightspan {
		float: right;
	}

	.indexData5content {
		padding: 40rpx 40rpx;

		.contentTitle {
			color: #333333;
			font-size: 40rpx;

			font-weight: bold;
			margin-bottom: 16rpx;
		}

		.contentbody {

			width: 100%;
			display: block;

			.contentItem {
				border-bottom: 1px solid #ededed;
				padding: 12rpx 0;
				font-size: 32rpx;
				display: flex;
				width: 100%;

				.span1 {
					padding-top: 8rpx;
					width: 50%;
				}

				.span2 {
					padding-top: 8rpx;
					width: 35%;
				}

				.span3 {
					padding-top: 8rpx;
					padding-left: 8rpx;
					width: 10%;

				}
			}
		}
	}

	.textinfo {
		padding: 40rpx;
		font-size: 24rpx !important;
		color: #999999;

		p {
			font-size: 32rpx !important;
			color: #101010;
			font-weight: bold;
		}
	}

	.lefttitle {
		font-weight: bold;
		font-size: 32rpx
	}

	@import "@/_theme.scss";

	.listlength {
		float: right;
		padding-right: 20rpx;
	}

	::v-deep .u-drawer-content {
		border-radius: 10px 10px 0 0
	}

	::v-deep .u-radio-group {
		width: 100%;
	}

	::v-deep .u-radio {
		position: relative;
	}

	::v-deep .u-radio__icon-wrap {
		position: absolute;
		right: 0;
	}

	.recharge-item2 {
		@include themeify {
			font-size: themed('font-size2') !important;
		}

		/*		font-size: 14px !important;*/
		color: #999999;

	}

	.paySelect {
		padding: 32rpx;

		.title {
			font-size: 40rpx
		}

		p {
			width: 100%;

			span {
				color: #666;
			}

			.u-radio__label {
				color: #333333;
			}

			.u-radio {
				width: 100% !important;
				;
			}

			color: #333333;
			margin-top: 16rpx;
			font-size:32rpx;
		}
	}

	.recharge {
		padding: 32rpx;
		padding-bottom: 250rpx;

		.title {
			@include themeify {
				font-size: themed('font-size3');
			}

			/*			font-size: 16px;*/
			position: relative;
		}

		p {
			color: #666;
			margin-top: 4px;
		}

		.self-stop.active {

			background-color: #EFFFF7;
			border-color: #00B962;
			color: #00B962;

		}

		.rechargeMain {
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
			margin-top: 24rpx;
			margin-bottom: 10rpx;

			.recharge-item {
				.u-input {
					text-align: center !important;
				}

				width: 31%;
				border: 1px solid #e3e3e3;
				padding: 20rpx 0;
				border-radius: 4px;
				text-align: center;
				margin-bottom: 20rpx;
				position: relative;
				margin-left: 10rpx;

				@include themeify {
					font-size: themed('font-size3');
				}

				/*				font-size: 16px;*/
			}
			 

			.active {
				background-color: #EFFFF7;
				border-color: #00B962;
				color: #00B962;
				 
			}
		}

		.self-stop {
			width: 105px;
			/*			height: 48px;
			line-height: 48px;*/
			border-radius: 4px;
			color: #101010;

			@include themeify {
				font-size: themed('font-size3');
				// height: themed('font-size19');
				// line-height: themed('font-size19')
			}

			/*			font-size: 16px;*/
			text-align: center;
			font-family: Arial;
			border: 1px solid rgba(227, 227, 227, 100);
			margin-top: 12px;
		}
	}



.recharge2 {
		padding: 32rpx;
		padding-bottom: 250rpx;

		.title {
			@include themeify {
				font-size: themed('font-size3');
			}

			/*			font-size: 16px;*/
			position: relative;
		}

		p {
			color: #666;
			margin-top: 4px;
		}

		.self-stop.active {

			background-color: #EFFFF7;
			border-color: #00B962;
			color: #00B962;

		}

		.rechargeMain {
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
			margin-top: 24rpx;
			margin-bottom: 10rpx;

			.recharge-item {
				.u-input {
					text-align: center !important;
				}

				width: 23%;
				border: 1px solid #e3e3e3;
				padding: 20rpx 0;
				border-radius: 4px;
				text-align: center;
				margin-bottom: 20rpx;
				position: relative;
				margin-left: 10rpx;

				@include themeify {
					font-size: themed('font-size3');
				}

				/*				font-size: 16px;*/
			}
			.recharge-item-rk{
				width: 23%;
				padding-bottom: 0;
				padding-top: 10rpx;
				.item-rk{
					//margin-top: 10rpx;
					padding: 8rpx 0;
					//background-color: rgba(232, 232, 232, 1);
					color: rgba(51, 51, 51, 1);
					font-size: 24rpx;
				}
				.item-rk-span{
					margin:0 4px ;
					color: #ec4530;
				}
			}

			.active {
				background-color: #EFFFF7;
				border-color: #00B962;
				color: #00B962;
				.item-rk{
					//background-color: #53B56B;
					color:#53B56B
				}
				.item-rk-span{
					color: #53B56B
				}
			}
		}

		.self-stop {
			width: 105px;
			/*			height: 48px;
			line-height: 48px;*/
			border-radius: 4px;
			color: #101010;

			@include themeify {
				font-size: themed('font-size3');
				// height: themed('font-size19');
				// line-height: themed('font-size19')
			}

			/*			font-size: 16px;*/
			text-align: center;
			font-family: Arial;
			border: 1px solid rgba(227, 227, 227, 100);
			margin-top: 12px;
		}
	}
	.recharge-input {
		margin-top: 8px;
		margin-bottom: 32px;
	}

	.recharge-radio {
		margin-top: 10px;

		.recharge-radio-item {
			display: flex;
			align-items: center;
		}

		.recharge-radio-name {
			margin-left: 8px;
		}
	}

	.but-box {
		width: 89.3%;
		height: 44px;
		margin: 0 auto;
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;


	}

	//优惠券
	.discounts {
		margin-top: 10px;
		width: 100%;

		.title {
			width: 100%;


			.title-1 {

				/*				height: 22px;*/
				color: rgba(16, 16, 16, 100);

				@include themeify {
					font-size: themed('font-size3');
					height: themed('font-size6');
				}

				/*				font-size: 16px;*/
			}

			.title-2 {
				margin-left: 4px;

				@include themeify {
					font-size: themed('font-size2');
					line-height: themed('font-size5');
				}

				/*				font-size: 14px;
				line-height: 20px;*/
			}

			.title-3 {
				float: right;

				@include themeify {
					font-size: themed('font-size3');
					line-height: themed('font-size5');
				}

				/*				height: 19px;
				font-size: 16px;*/
			}
		}

		.select {
			position: relative;

			::v-deep .u-radio {
				padding: 36rpx 32rpx;
				margin-top: 12px;
				width: 100%;
				height: 48px;
				border-radius: 4px;
				background-color: rgba(255, 255, 255, 100);
				text-align: center;
				border: 1px solid rgba(227, 227, 227, 100);
				position: relative;
			}

			// ::v-deep .u-radio:nth-child(3) {
			// 

			// }

			::v-deep .u-radio__icon-wrap {
				left: 32rpx;
				background-color: #fff;
			}

			::v-deep .u-radio__label {
				margin-left: 40px;
			}
		}

		.explain {
			width: 64px;
			/*			height: 24px;
			line-height: 24px;*/
			position: absolute;
			top: 10px;
			right: 12px;
			border-radius: 4px;
			background-color: rgba(255, 255, 255, 100);
			text-align: center;
			border: 1px solid rgba(227, 227, 227, 100);
			color: rgba(0, 185, 98, 100);

			/*			font-size: 12px;*/
			@include themeify {
				font-size: themed('font-size1');
				line-height: themed('font-size7');
				height: themed('font-size7');
			}
		}
	}

	// 优惠券2
	.discounts2 {
		margin-top: 10px;
		width: 100%;
		display: flex;
		justify-content: space-between;

		.left {
			/*				width: 70px;*/
			// height: 20px;
			color: rgba(16, 16, 16, 100);

			/*			font-size: 20px;*/
			@include themeify {
				width: 160rpx;
				font-size: 40rpx;
			}
		}

		.right {
			/*
			height: 16px;
			line-height: 28px;*/
			color: rgba(255, 61, 0, 100);

			@include themeify {
				font-size: themed('font-size3');
				height: themed('font-size3');
				line-height: themed('font-size9');

			}

			/*			font-size: 16px;*/
			text-align: right;
			display: flex;
		}

		.iconfont {
			@include themeify {
				font-size: themed('font-size7');
				line-height: themed('font-size10');

			}

			/*			line-height: 29px;*/
			text-align: center;
			color: #b3b3b3;
			/*			font-size: 24px;*/


		}
	}

	// 会员活动
	.member {
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;

		.actively {

			color: rgba(119, 119, 119, 1);
			font-size: 36rpx;

		}

		.type,
		.right {
			color: rgba(16, 18, 18, 100);
			font-size: 36rpx;
			//line-height: 28px;
			padding-right: 10px;
			display: flex;
			align-items: center;

		}

		.iconfont {
			@include themeify {
				font-size: themed('font-size7');
				line-height: themed('font-size10');

			}

			/*			line-height: 29px;*/
			text-align: center;
			color: #b3b3b3;
			/*			font-size: 24px;*/


		}
	}


	// 尾部
	.botton {
		border: 1px solid rgba(242, 242, 242, 1);
		background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
		position: fixed;

		//background: #fff;
		width: 100%;

		padding: 24rpx 40rpx;
		line-height: 88rpx;

		bottom: 0;
		left: 0;
		z-index: 999;
		//padding: 0px 32rpx 32rpx;
		padding-bottom: 12px;

		button {

			
			display: flex;
			align-items: center;
			justify-content: center;
			//width: 45.8%;
			// background-color: black;
			// color: #fff;
			// background-color: rgba(255, 255, 255, 1);
			// color: rgba(0, 185, 98, 1);
			background-color: rgba(0, 185, 98, 100);
			color: rgba(255, 255, 255, 100);



			height: 88rpx;
			border-radius: 50px;
			font-size: 32rpx;
		}

	}

	.couponsuse {
		color: rgba(153, 153, 153, 100);
		margin-top: 10px;

		font-size: 14px;
		text-align: left;
		font-family: AlibabaPuHui-regular;
	}

	.to-recharge {

		padding: 0 16px;
		line-height: 36px;
		border-radius: 50px 0px 0px 50px;
		background: linear-gradient(#FF9000, #FFB700);
		color: rgba(255, 255, 255, 100);
		font-size: 16px;
		text-align: center;
		position: absolute;
		right: -16px;
		top: 0;
	}

	// ::v-deep .u-checkbox__icon-wrap--checked {
	// 	background-color: #2979ff !important;
	// 	border-color: #2979ff !important;
	// }

	.amount {
		// width: 41.9%;
		height: 16px;
		line-height: 15px;
		border-radius: 0px 4px 0px 4px;
		background-color: #ec4530; //rgba(0, 185, 98, 100)
		color: rgba(255, 255, 255, 100);
		font-size: 10px;
		text-align: center;
		position: absolute;
		top: 0;
		right: 0;

	}

	.card {
		overflow: hidden;
		padding: 10px;
		margin-top: 10px;

		.title {

			font-weight: bold;
		}
	}

	.cardselect {
		border-radius: 8px;
		border: 2px solid rgba(0, 185, 98, 1);

		.title {
			color: #00B962;
			font-weight: bold;
		}

		.cardgo {
			position: relative;

			.cardinfo {
				background-color: #00b962;
				width: 64rpx;
				height: 64rpx;
				position: absolute;
				top: -12px;
				right: -12px;
				border-radius: 0 0 0 8px;

				img {
					width: 64rpx;
				}
			}
		}
	}

	.cardno {
		border: 2px solid rgba(204, 204, 204, 1);
		border-radius: 8px;

		.title {

			font-weight: bold;
		}

		.cardgo {
			position: relative;

			.cardinfo {
				background-color: rgba(204, 204, 204, 1);
				width: 64rpx;
				height: 64rpx;
				position: absolute;
				top: -12px;
				right: -12px;
				border-radius: 0 0 0 8px;

				img {
					width: 64rpx;
				}
			}
		}

	}

	.classtable {
		margin: 40rpx 40rpx;

		.td1 {
			width: 50rpx;
			padding: 12rpx 0;
			text-align: center;

			img {
				width: 48rpx;
				height: 48rpx;
			}

			font-size: 10px;
		}

		.td2 {
			padding-left: 16rpx;
			font-size: 12px;
			line-height: 24px;

			.dian {
				padding: 0 10rpx
			}
		}
	}

	.carImg {
		margin: 0 40rpx;

		img {
			width: 100%;
		}
	}
	.cardListView{
		
		.cardListItemTitle{
			    color: #777777;
			    font-size: 36rpx;
		}
			.cardListItem{
				   // margin:5px  4px;
					//border: 1px solid ;
					    border: 2px solid #cccccc;
					//    border: 2px solid #cccccc;
					  //  border-radius: 8px;
					  //  padding: 3px;
					    border-radius: 6px;
					.cardListName{
						 font-size: 34rpx;
					}
				.cardListText{
					 font-size: 24rpx;
					display:flex;
					 justify-content: space-between;
				}
				
			}
			.cardselect{
				border: 2px solid #00b962;
				background-color: #fff ;
				color: #00b962;
			}
	}
	.rechargeBalance{
		display: flex;
		.rechargeBalanceItem{
			margin-right: 6px;
			    color: #666;
		}
	}
	.greyTips{
		background-color: #cccccc;
		// color: #00b962;
		 font-weight: bold;
		padding: 30rpx;
		    margin-top: 20rpx;
			    border-radius: 8px;
	}
	.cost-explain2{
		.type{
			color: #FF3D00;
		}
	}
	
	
	.tip-box {
	           position: relative;
	           background-color: #FEF8E9;
	           border: 1px solid #f5a623;
	           border-radius: 8px;
	           padding: 10px 15px;
	           color: #333;
	           width: 400px;
					 margin-bottom: 36rpx;
	       }
		
	      .tip-box::before,
	      .tip-box::after {
	           content: "";
	           position: absolute;
	           top: 100%;
	           left: 20px;
	           border-left: 10px solid transparent;
	           border-right: 10px solid transparent;
	       }
		
	      .tip-box::before {
	           border-top: 10px solid #f5a623; /* 与提示框边框颜色一致 */
	           margin-top: 1px;
	       }
		
	      .tip-box::after {
	           border-top: 10px solid #FEF8E9; /* 白色填充 */
	           margin-top: 0;
	           transform: translateY(-1px);
	       }
		
	      .tip-box span {
	           color: #ec4530;
	           font-weight: bold;
	       }
</style>