JP-ChargeTeam51/pages/monthlyCardActivity/monthlyCardBuy.vue

<template>
	<view>
		<ujp-navbar title="服务费包月会员"   >
			<view class="iconfont service" @click="openModal">
				&#xe60d;
			</view>
		</ujp-navbar>
		<!-- 提示 -->
		<!-- <template>
			<u-alert-tips type="warning" :title="title" :description="description" :show-icon="true"></u-alert-tips>
		</template> -->
		<!-- 卡片 -->

		<view class="main">
			<view class="carNone" v-if="!isReady">
				<img src="static/img/暂无数据-缺省页.png" alt="">
				<p class="" style="color: #bfdfd5;font-size: 18px;">加载中</p>
			</view>
			<view class="carNone" v-if="isReady&&cardList.length == 0">
				<img src="static/img/暂无数据-缺省页.png" alt="">
				<p class="" style="color: #bfdfd5;font-size: 18px;">暂无月卡上架</p>
			</view>
			<view class="user-card" v-if="ispay">
				<view class="head-img">
					<img style="border-radius: 50px;" v-if="userInfo.headImg" :src="userInfo.headImg" alt="">
					<img v-else src="../../assets/img/headPortrait.png" alt="">

				</view>
				<view class="user-name">
					<view class="name">
						{{userInfo.realName?userInfo.realName:userInfo.nickName}}
					</view>
					<view class="sign">

						{{userCard&&ispay?userCard.endTime.substring(0,10):''}}到期
					</view>
				</view>
			</view>
			<ujp-swiper v-if="!ispay"  :img-mode="'scaleToFill'" height="190" 
			:effect3d="true" :autoplay="false" :circular="false"
				@change="checkboxChangeBtn" :name="'picUrl'">
				
			
				<swiper-item class="scroll-view-item_H u-swiper-item" 
				 
				  v-for="(item,i) in cardList" :key="i">
					<view 
					:style="{
						backgroundImage:' url('+item.monthlyRentCard.image+') ',
						
						transform: uCurrent != i ? 'scaleY(0.9)' : 'scaleY(1)',
						margin: uCurrent != i ? '0 20rpx' : 0,
						}"
					
				
						:class="'cardtab ' ">
						<view class="tag" v-if="item.monthlyRentCard.isVip">{{item.monthlyRentCard.platformText}}车主
						</view>
						<view class="tag" v-else-if="false&&item.monthlyRentCard.remark">{{item.monthlyRentCard.remark}}</view>
						<view  class="priceName">
							 {{item.monthlyRentCard.remark}}
						</view>
						<view class="price">
							
							<view class="current-price">
								<b>{{item.monthlyRentCard.price}}</b><text>元/月</text>
								<!--  -->

								<p v-if="item.monthlyRentCard.buyNum">{{item.monthlyRentCard.buyNum}}人次购买</p>

							</view>
						</view>


					</view>
				</swiper-item>

			</ujp-swiper>




		</view>
		<u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
		<u-modal v-model="showModel" :show-cancel-button="true" @cancel="getUserInfo()" @confirm="confirm"
			confirm-text="支付成功？" title="扫码支付">
			<view style="
								text-align: center;
							">
				<img id="qrcode2" :src="qrCodeImg">
			</view>
			<view style="
								text-align: center;
							">请使用支付宝扫码</view>

		</u-modal>

		<u-modal v-model="show1" @confirm="gotoGz" cancel-text="暂不关注" confirm-text="前往关注" confirm-color="#53b56b"
			:show-cancel-button="true" ref="uModal2" :asyncClose="true">
			<view style="padding: 15px;">请先关注<span style=" color:  #53b56b;">{{projectName}}</span>公众号，购买月卡</view>


		</u-modal>


		<u-modal v-model="infoSet1" @confirm="infoSet1=false,gotoUrl('pages/user/dataSet')" cancel-text="取消"
			confirm-text="完善个人信息" confirm-color="#53b56b" :show-cancel-button="true" ref="uModal2" :asyncClose="true">
			<view style="padding: 15px;">购买月卡需要完善以下2点<br />
				1.填写真实姓名<br />
				2.填写车牌号<br />
			</view>
		</u-modal>
		<img id="qrcode" style="display: none;">


		<!-- 须知 -->
		<view class="notice">

			<view class="title">
				可享一个月充电服务费<span style="color:#ec4f27">全免</span>
			</view>
			<view class="line" >
				<!-- <view v-show="detail.type==1">· 仅限<b>非运营车</b>车主或<b>新用户</b>购买和使用</view>
				<view>· 在指定充电站充电时，此单服务费<b>全免</b></view>
				<view>· 不可抵扣电费、停车费、占位费</view> -->
				
				<view class="lineInfo lineInfo1" >
					<view  class="lineSvg">
						<img src="@/assets/img/buy/bus2.svg">
					</view>
					<view class="lineView">
						<view  class="lineTitle">适用车主</view>
						<p class="linep">适合运营车车主购买和使用</p>
					</view>
				</view>
			<!-- 	<view class="lineInfo lineInfo2"   >
					<view  class="lineSvg">
						<img src="@/assets/img/buy/bus.svg">
					</view>
					<view class="lineView">
						<view  class="lineTitle">适用车主</view>
						<p class="linep">适合运营车车主购买和使用</p>
					</view>
				</view> -->
				<view class="lineInfo lineInfo1"  >
					<view  class="lineSvg">
						<img src="@/assets/img/buy/fee.svg">
					</view>
					<view class="lineView">
						<view  class="lineTitle">充电免服务费</view>
						<p class="linep">在指定站点充电时，此单服务费全免</p>
					</view>
				</view>
				<view class="lineInfo lineInfo1"  >
					<view  class="lineSvg">
						<img src="@/assets/img/buy/tips.svg">
					</view>
					<view class="lineView">
						<view  class="lineTitle">注意事项</view>
						<p class="linep">不可抵扣电费、停车费、占位费</p>
					</view>
				</view>
				
				
			</view>


			<u-divider fontSize="36" border-color="#bbc039" color="#101010">购卡须知</u-divider>
			<view class="text">
				<view class="num">
					01
				</view>
				<view class="">
					充电月卡默认与购卡人账户进行关联，所涉权益仅可绑定单个车牌，即账户、月卡、车牌三者关联形成一个权益主体。
				</view>
			</view>
			<view class="text">
				<view class="num">
					02
				</view>
				<view class="">
					充电月卡有效期内，持卡人在指定充电站为绑定车辆充电，可享受充电服务费全免。持卡人给非绑定车辆充电，将正常收取充电服务费。
				</view>
			</view>
			<view class="text">
				<view class="num">
					03
				</view>
				<view class="">
					如车牌等信息填写错误，请致电售后客服进行处理。
				</view>
			</view>
			<view class="text">
				<view class="num">
					04
				</view>
				<view class="">
					本卡一经售出，不支持任何形式的退换。
				</view>
			</view>

			<!-- <view
			 @click="gotoUrl('pages/monthlyCardActivity/monthlyCardList?cardId='+(ispay?userCard.rentCardId:cardId))">
								适用<br/>
								站点

			</view> -->



		</view>
		<view class="notice2">
			<view class="titleHead">适用充电站点</view>

			<!-- 附近站点 -->
			<view class="station" v-for="(stationData,i) in pageListGetObj.list" :key="i"
				@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>
					 
						<!-- 	 -->
						<view class="sign-1"
							v-if="stationData.giveDiscount&&stationData.discountRatio&&stationData.discountRatio!=100">
							会员{{discountRatio10(stationData.discountRatio)}}折</view>
						<view class="sign-3" v-if="stationData.category=='超充'">160kW超充站</view>
						<view class="sign-4"
							v-if="stationData.nightLowPriceEnabled">
							夜间超低价</view>
							<view class="sign-2" v-if="stationData.platformType==1">自营站</view>
						<view class="sign-2" v-if="stationData.tagList.length != 0"
							v-for="(tagName,tagIndex) in stationData.tagList" :key="tagIndex">{{tagName}}</view>
				 
				</view>
				<view class="price-free oldTextClass">
					<view class="price" v-if="userInfo&&userInfo.userType==2">
						<view class="price-1">
							<text class="num">
								{{!stationData.giveDiscount ? (stationData.electricityPrice+stationData.servicePrice).toFixed(2)
								: (stationData.electricityPrice+stationData.discountServicePrice).toFixed(2)}}</text>
							<text class="unit " oldstyle="font-size: 48rpx;">元/度</text>
						</view>
						<view class="price-2 " oldstyle="font-size: 48rpx;" v-if="stationData.giveDiscount">
							<text
								class="num">{{(stationData.electricityPrice+stationData.servicePrice).toFixed(2)}}</text>
							<text class="unit ">元/度</text>
						</view>
					</view>
					<!-- 游客价格-->
					<view class="price" v-else>
						<view class="price-1">
							<text class="num">
								{{(stationData.electricityPrice+stationData.servicePrice).toFixed(2)}}</text>
							<text class="unit " oldstyle="font-size: 48rpx;">元/度</text>
						</view>
						<view class="price-3 " oldstyle="font-size: 48rpx;" v-if="stationData.giveDiscount">
							<text class="num1">会员</text>
							<text class="num">{{ (stationData.electricityPrice+stationData.discountServicePrice).toFixed(2)}}</text>
							<text class="unit ">元/度</text>
						</view>
					</view>

					<view class="free">

						<view class="fast" v-if="stationData.fastNum">
							<view class="fast-font">
								快
							</view>
							<view class="num">
								{{stationData.fastAvailableNum}}/{{stationData.fastNum}}
							</view>
						</view>
						<view class="slow oldTextjp2" oldstyle="margin-left: 1px;" v-if="stationData.slowNum">
							<view class="slow-font">
								慢
							</view>
							<view class="num">
								{{stationData.slowAvailableNum}}/{{stationData.slowNum}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom" @click="getPageList(true)"
				v-if="pageListGetObj.recordsTotal!=pageListGetObj.list.length">
				<view class="bot">
					<view class="bot-line"></view>
					<view class="bot-text " style="color: #00B962;text-align: center;margin-top: 10px">
						点击查看更多(共{{pageListGetObj.recordsTotal}}站点)</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;text-align: center;margin-top: 10px;">已经到底了</view>
					<view class="bot-line"></view>
				</view>
			</view>

			<view class="upupupView" v-show="flag==1">
				<view class="upupupImg">
					<img src="@/assets/img/upupup.svg">
				</view>

				<p>上划查看更多内容</p>
			</view>

		</view>
		<!-- 按钮 -->
		<view class="button" v-if="!ispay">
			
			
		<!-- 	<button class="btn  btn2" @click="show4=true" v-if="userCard&&userCard.classify==2">购买月卡 - 并<span style="color:red">废弃</span>其他卡
			</button> -->
			<button class="btn " v-if="userInfo.userType=='1'">游客无法购买月卡
			</button>
			
			<button class="btn " v-else-if="!isReady">加载中
			</button>
			<button class="btn " v-else-if="ispay"> {{userCard&&ispay?userCard.endTime:''}}到期
			</button>
			<button class="btn " v-else-if="!endCardBool">已下架
			</button>
			<button class="btn " v-else-if="!show2" @click="gotoGz">关注公众号
			</button>
			<button class="btn " v-else-if="!infoSet" @click="gotoUrl('pages/user/dataSet')">完善个人信息
			</button>

			<button class="btn " v-else-if="!cardList.length" @click="putShelf">已下架
			</button>
			<button class="btn " @click="showPay" v-else-if="detail.isVip">

				<text style="font-size: 14px;">￥</text>

				<span>{{detail.price}}</span>

				<text class="price">{{detail.oldPrice}}</text>开通充电月卡

				<view class="position">
					<view id="talkbubble">{{detail.platformText}}车主</view>
				</view>
			</button>
			<button class="btn " @click="showPay" v-else>

				<text style="font-size: 14px;"></text>

				<span style="margin-right: 8px;">{{detail.price}}元</span>

				<text v-if="detail.discount" class="price">{{detail.oldPrice}}</text> 开通服务费包月会员

				<view class="position" v-if="false&&detail.remark2">
					<view id="talkbubble">{{detail.remark2}}</view>
				</view>
			</button>



			<view class="hint">
				开通表示阅读并同意<span @click="gotoUrl('pages/article/details?code=FWFZKXY')"
					style="text-decoration:underline;color: #C07C38;">《服务费折扣协议》</span>
			</view>
		</view>
		<u-modal v-model="show4" title="购买须知"  @confirm="show4=false,show=true" cancel-text="取消" confirm-text="确认购买" confirm-color="red"
			:show-cancel-button="true" ref="uModal2" :asyncClose="true">
			<view style="padding: 15px;  " v-if="userCard">
				<view>由于您已经购买了其他卡</view>
				<view style="margin-top: 8px;">汽车充电同时只生效一张卡，且本<span style="color: #00b962;">月卡</span>优惠力度最高。</view>
				<view style="margin-top: 4px;">购买成功后，将<span style="color: red;">废弃</span>您已购买的<span style="color: #00b962;">[6折卡]</span>，且<span style="color: red;">不退款、不折算</span>。</view>
				<view style="margin-top: 4px;">同时也建议您先使用完<span style="color: #00b962;">[6折卡]</span>的充电度数，以免造成不必要的损失。</view>
				<view style="margin-top: 4px;">已购买<span style="color: #00b962;">[6折卡]</span>：于{{userCard.endTime.substring(0,10)}}到期,已用{{userCard.chargedDegree?userCard.chargedDegree.toFixed(0):0.00}}度 /
								共{{userCard.chargeDegreeLimit}}度。</view>
				
				
			</view>
		
		
		</u-modal>
		
		<u-modal v-model="show3" @confirm="confirmPhone" confirm-text="拨打电话" confirm-color="#606266"
			:show-cancel-button="true" ref="uModal" :asyncClose="true" title="客服电话" :content="consumerPhone"
			:content-style="{fontSize: '24px',color: '#101010'}"></u-modal>

	</view>
</template>

<script>
	import * as API_weixin from '@/apis/weixin.js'
	import * as API_site from '@/apis/site.js';

	import * as Pay from '@/apis/weixin.js'
	import * as API from '@/apis/card.js'
	import * as loginApi from '@/apis/login.js'
	import Tabbar from '@/components/Tabbar.vue';
	import QRCode from 'qrcodejs2'
	import {
		newDate,
		convertCanvasToImage,
	} from '@/utils'
	import {
		wxPayJs
	} from '@/utils/wxpay'
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				description: '盟主能量包本期限时优惠活动将于9月16日结束。',
				checked: "false",
				cardId: '',
				qrCodeImg: "",
				show4:false,
				showModel: false,
				cardList: [],
				pageList: [],
				projectName: "",
				list: [{
					text: '微信',

				}, {
					text: '支付宝'
				}],
				show: false,
				submitForm: {},
				ykgz: '',
				detail: {},
				ispay: false,
				show3: false,
				show2: true,
				show1: false,
				infoSet: true,
				infoSet1: false,
				userCard: null,
				isReady: false,
				userInfo: {},
				elderStatus: false,
				consumerPhone: "",
				scrollLeftSet: 0,
				uCurrent:0,
				scrollLeftOldSet: 0,
				scrollLeftSetBl: false,
				flag: 0, //0  初始化，  1 ，开始判断， 2已经滑动

			}
		},
		onLoad() {
			this.projectName = process.car.ProjectName;

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

			this.ykgz = this.carhelp.getConfig().ykgz
			//this.checkSubscribe()
			this.getCardList();
		},
		onShow() {
			if (this.carhelp.get("getElderModeClass") == "长辈模式") {
				this.elderStatus = true;
			} else {
				this.elderStatus = false;
			}
			if (this.$refs.tabbarMain) {
				this.$refs.tabbarMain.setcount(1);
			}

			//this.checkSubscribe();

			// this.getCardList();
			// this.show2 = true;
		},
		computed: {
			pageListGetObj() {
				var cardId = this.cardId
				if (this.ispay) {
					cardId = this.userCard.rentCardId;
				}
				var i = this.pageList.findIndex(item => {
					return item.monthlyRentCardId == cardId
				})
				if (i == -1)
					return {
						list: []
					}
				else
					return this.pageList[i]
			},

			endCardBool() {
				if (!this.cardList.length) {
					return false;
				}
				var date = new Date().getTime()
				if (!this.detail.endTime) {
					return true;
				}
				var date2 = newDate(this.detail.endTime).getTime();

				if (date < date2) {
					return true;
				} else {
					return false;
				}
			}
		},
		onPageScroll(e) {

			if (this.flag == 1) {
				if (e.scrollTop >= 50) {
					this.flag = 2;
				} else {

				}
			}
		},
		methods: {
			
			showPay(){
				if(this.userCard&&this.userCard.classify==2){
					this.show4=true
				}else{
					this.show=true
				}
			},
			scrolltolower: function(e) {
				//		

			},
			scrolltoupper: function(e) {

				//this.scrollLeftSetBl=false;
			},
			scroll: function(e) {

				if (this.scrollLeftSetBl) {
					return
				}
				this.scrollLeftSetBl = true;
				var scrollWidth = e.detail.scrollWidth
				if (e.detail.deltaX > 0) {
					//右移动
					this.scrollLeftSet = 0;
					this.checkboxChange(this.cardList[0].monthlyRentCard)
				} else {
					//左移动
					this.scrollLeftSet = scrollWidth
					if (this.cardList.length > 1) {
						this.checkboxChange(this.cardList[1].monthlyRentCard)
					}

				}

				this.scrollLeftSetBl = false;
				//this.old.scrollTop = e.detail.scrollTop
				this.scrollLeftOldSet = e.detail.scrollLeft
			},
			confirmPhone() {
				this.show = false;
				uni.makePhoneCall({
					phoneNumber: this.consumerPhone //仅为示例
				});
			},
			openModal() {
				this.show3 = true;
			},
			checkboxChangeBtn(e){
				this.uCurrent=e
				this.checkboxChange(this.cardList[e].monthlyRentCard)
			},
			checkboxChange(monthlyRentCard) {

				this.detail = monthlyRentCard;
				this.cardId = monthlyRentCard.id
				monthlyRentCard.checked = true
				for (var i in this.cardList) {
					var obj = this.cardList[i].monthlyRentCard;
					if (this.cardId == obj.id) {

					} else {
						obj.checked = false
					}
				}
				this.getPageList(false);
			},
			gotoGz() {
				this.carhelp.setGzDate()
				var url = "https://mp.weixin.qq.com/s/mCHz1nNvg0xAICiBeIyKRQ";
				window.location.href = url

			},
			checkSubscribe() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_weixin.checkSubscribe({
					openId: this.carhelp.getOpenId()
				}).then((res) => {
					uni.hideLoading()
					if (res.data == "0") {
						this.show1 = true

					} else {
						//this.getInfo();

						this.getCardList();
						this.show2 = true;
						//this.carhelp.setGzDate() 
					}

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

			},
			userCardBool(userCard) {


				if (userCard&&userCard.classify==1) {
					var date = new Date().getTime()
					var date2 = newDate(userCard.endTime).getTime();
					if (date < date2) {
						return true;
					}
				}
				return false
			},
			getCardList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.cardList({
					type:1
				}).then((response) => {
					
					this.cardList = response.data.cardList;

					for (var i in this.cardList) {
						var obj = this.cardList[i].monthlyRentCard
						//不打折的卡
						obj.remark2 = obj.remark;
						if (obj.oldPrice) {

							if (!obj.discount && obj.couponRemark) {
								obj.remark2 = obj.couponRemark
								if (!obj.remark) {
									obj.remark = "月卡优惠券"
								}
							}
							obj.discount = true
						}
					}

					if (this.cardList.length) {
						this.detail = this.cardList[0].monthlyRentCard
						this.cardId = this.detail.id;
						this.cardList[0].monthlyRentCard.checked = true
						if (this.pageList.length == 0) {
							this.pageList = this.cardList.map(item => {
								return {
									recordsTotal: -1,
									monthlyRentCardId: item.monthlyRentCard.id,
									list: [],
									pageIndex: 1,
								}
							})
							this.getPageList(false);
						}

						//this.pageList.map(item)
					}
					this.getUserInfo()
					this.isReady = true;
					//cardId: this.cardId

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

				var cardId = this.cardId
				if (this.ispay) {
					cardId = this.userCard.rentCardId;
				}
				var i = this.pageList.findIndex(item => {
					return item.monthlyRentCardId == cardId
				})
				var data = {
					monthlyRentCardId: cardId,
					online: 0,
					pageSize: 6,
				}
				if (this.carhelp.getPersonInfo()) {
					data.openId = this.carhelp.getOpenId()
				}

				if (i > -1) {
					if (bl) {
						this.pageList[i].pageIndex += 1;
					} else {
						if (this.pageList[i].recordsTotal == -1) {

						} else {
							return
						}
					}
					data.pageIndex = this.pageList[i].pageIndex
				} else {
					return
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})


				var list = this.pageList[i].list;
				API_site.getChargingStationData(data).then((response) => {
					console.log(response)
					list = [
						...list,
						...response.data.data
					];
					this.pageList[i].recordsTotal = response.data.recordsTotal;
					this.pageList[i].list = list;

					uni.hideLoading()
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			getUserInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				loginApi.findByOpenId({
					openId: this.carhelp.getOpenId(),
					noerror: true
				}).then((res) => {


					if (res.code == 200 && res.result) {

						if (res.data.regUser) {
							var userInfo = res.data.regUser
							this.userInfo = userInfo;
							// if (userInfo.userType == "1") {

							// } else if (userInfo.carId && userInfo.realName) {
							// 	this.infoSet = true;

							// } else {
							// 	this.infoSet = false;
							// 	if (this.endCardBool) {
							// 		this.infoSet1 = true;
							// 	}

							// }

							var userCard = res.data.userCard;
							this.userCard = userCard
							this.ispay = this.userCardBool(userCard)

						} else {

						}
						if (this.flag == 0) {
							this.flag = 1;
							setTimeout(() => {
								this.flag = 2;
							}, 5000)
						}
					}
					uni.hideLoading();





				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			putShelf2() {
				uni.showToast({
					title: "暂不支持重复购买"
				})
			},
			putShelf() {
				uni.showToast({
					title: "已下架，暂不支持购买"
				})
			},
			getInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.cardDetail({
					cardId: this.cardId
				}).then((response) => {

					this.detail = response.data.monthlyRentCard
					uni.hideLoading()
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			submit(type) {
				if (!this.endCardBool) {
					return
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.openCard({
					cardId: this.cardId
				}).then((response) => {
					this.submitForm.id = response.data.orderInfoId

					if (type == 0) {
						this.wxpy()
					}
					if (type == 1) {
						this.alpy()
					}
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})

			},
			alpy() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var listcanvas = document.getElementsByTagName('canvas')

				if (listcanvas.length > 0) {
					document.getElementById("qrcode").removeChild(document.getElementsByTagName('canvas')[0]);
				}
				Pay.alpay(this.submitForm).then((response) => {

					let qrcode = new QRCode('qrcode', {
						width: 200,
						height: 200,
						text: response.data.qr_code,
						correctLevel: QRCode.CorrectLevel.M,

					})
					this.outOrderNo = response.data.outOrderNo;
					var canvas = document.getElementsByTagName('canvas')[0];
					this.qrCodeImg = convertCanvasToImage(canvas);
					uni.hideLoading()
					this.showModel = true

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

						title: error
					})
				})
			},
			wxpy() {

				Pay.wxpay(this.submitForm).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
					})

				})
			},
			confirm() {
				this.getUserInfo();
				uni.redirectTo({
					url: "/pages/user/finance/rechargeRes?id=" + this.outOrderNo
				})
			},
			click(index) {
				console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
				this.submit(index);
			}
		}

	}
</script>
<style>
	@keyframes movepoint {
		25% {
			top: 10px;
		}

		100% {
			top: 15px;
		}
	}

	.upupupImg {
		height: 80px;
	}

	.upupupView {
		text-align: center;
		font-size: 12px;
		padding: 30rpx;
		border-radius: 12px;
		position: absolute;
		background: rgb(0 0 0 / 70%);
		top: 50%;
		transform: translate(-50%);
		left: 50%;
		color: #fff;


	}

	.upupupView img {
		top: 15px;
		position: relative;
		width: 60px;
		animation: movepoint 2s infinite;
		-webkit-animation: movepoint 2s infinite;
	}
</style>
<style lang="scss" scoped>
	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		//width: 85%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.service {
		font-size: 24px;
		//color: #fff;
		position: absolute;
		right: 16px;
	}

	/deep/.u-alert-desc {
		color: #ff7300;
	}

	// 卡片
	.main {
		background-color: #404A5E;
		padding: 40rpx 0 0 0;
		z-index: 80;

		.tag {
			position: absolute;
			background-color: rgba(255, 61, 0, 100);
			color: #ffffff;
			font-size: 24rpx;
			text-align: center;
			line-height: 40rpx;
			padding: 0 12rpx;
			right: 0rpx;
			top: 0rpx;
			border-radius: 0 12px 0 12px;

		}

		// @media screen and (max-width:320px) {
		// 	.tag {
		// 		padding: 0 4rpx;
		// 	}

		// 	.price {
		// 		position: absolute;
		// 		top: 24rpx !important;
		// 		right: 32rpx !important;
		// 	}

		// 	.current-price {
		// 		font-size: 36rpx;
		// 	}
		// }
		.priceName{
			top: -30rpx;
			left: 30rpx;
			position: absolute;
			font-size: 32rpx;
		}
		.price {
			top: -90rpx;
			right: 42rpx;
			position: absolute;

			p {
				text-align: right;
				color: rgba(0, 0, 0, 0.5);
				font-size: 12px;
				position: relative;
				top: -250rpx;

			}
		}

		.current-price {
			font-size: 58rpx;
			color: #101010;
			text-align: right;

			text {
				font-size: 28rpx;

			}
		}

		.original-cost {
			color: rgba(75, 65, 50, 100);
			text-decoration: line-through;
			margin-bottom: 6rpx;

		}

		/deep/.u-iconfont {
			font-size: 36rpx !important;

		}


		.card-0 {}

		// .card-0 {
		// 	background-position-x: 40rpx;
		// }

		.cardtab {
			margin-top: 32rpx;
			position: relative;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			height: 200rpx;


			/deep/.u-checkbox__icon-wrap {

				background-color: #607d8b;
				opacity: 0.3
			}

			.radio-box {
				position: absolute;
				right: 0;
				bottom: 40rpx;

			}
		}



	}

	// 按钮
	.button {
		position: fixed;
		margin-top: -20rpx;
		width: 100%;

		bottom: 0px;
		border-radius: 16px 16px 0px 0px;

		padding: 20px 20px 24px 20px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 67%, rgba(255, 255, 255, 1) 84%);

		uni-button:after {
			border: none;
		}

		.btn {
			border: none !important;
			background: linear-gradient(#D8A05B, #C07C38);
			box-shadow: 0px 2px 6px 0px rgba(207, 175, 118, 40);
			border-radius: 50px;
			color: #FFF;
			font-size: 18px !important;
			line-height: 44px;
			height: 44px;
			overflow: inherit !important;

			.price {
				text-decoration: line-through;
				margin: auto 4px;
				font-size: 12px
			}
		}
		.btn2 {
			background: #00b962;
		}
		.hint {
			color: rgba(159, 157, 154, 100);
			line-height: 20px;
			text-align: center;
			margin-top: 8px;
		}

		.btn-2 {
			position: relative;
		}

		.position {
			position: absolute;
			top: -16px;
			left: 24%;
			z-index: 999;
		}

		#talkbubble {
			position: absolute;
			top: 0;
			left: 0;
			padding: 0 10px;
			line-height: 20px;
			font-size: 12px;
			color: #fff;
			background: red;
			position: relative;
			border-radius: 10px;
			text-align: center;
		}

		#talkbubble:before {
			content: "";
			position: absolute;
			top: 100%;
			//right: 45%;
			border-top: 5px solid red;
			border-right: 5px solid transparent;
			border-left: 5px solid transparent;
		}
	}

	.notice2 {
		padding: 0 0 120px 0;

		.titleHead {
			color: #101010;
			font-size: 40rpx;
			text-align: center;
			margin-bottom: 10px;
		}
	}

	// 须知
	.notice {
		top: -10rpx;
		border-radius: 15px 15px 0 0;
		position: relative;

		.title {
			color: rgba(51, 51, 51, 1);
			font-size: 40rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.line {
			margin-bottom: 40rpx;
			color: #666666;
			font-size: 34rpx;
			line-height: 52rpx;
			.lineInfo1{
				border: 1px solid #D5C5B5;
				background-color: #fef9f5;
			}
			.lineInfo2{
				border: 1px solid #79ACDB ;
				background-color: #ffffff;
			}
			.lineInfo{
				margin-right: 20rpx;
				display: flex;
				padding: 20rpx 15rpx 15rpx 10rpx;
				border-radius: 10px;
				 margin-bottom: 16rpx;
				.lineSvg{
					padding-top: 2px;
					margin: auto 16rpx;
					img{
						width: 70rpx;
						color:#62574C ;
					}
				}
				.lineView{
					.lineTitle{
						color:#62574C;
						font-size: 36rpx;
					}
					.linep{
						color:#8A7B6C;
						font-size: 28rpx;
						line-height:  28rpx;
					}
				}
			}
			
		}

		background-color: #fff;

		padding: 30rpx 30rpx 30rpx 50rpx;

		/deep/.u-divider {
			margin-bottom: 16px !important;
		}

		.text {
			color: #666666;
			margin-bottom: 12px;
			line-height: 24px;
			display: flex;

			.num {
				margin-right: 8px;
			}
		}
	}

	.carNone {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

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

		p {
			margin-top: -60px;
		}
	}

	.slogan-4 {
		margin-top: 10px;
		/* text-decoration: underline; */
		color: #9F9C99;

		text-align: center;
		position: fixed;
		/* top: 40px; */
		bottom: 40px;
		right: 20px;
		height: 55px;
		width: 55px;
		line-height: 20px;
		font-size: 16px;
		background: linear-gradient(45deg, #4BD2C0, rgb(72, 218, 149));
		box-shadow: 0 4rpx 24rpx 0 rgb(72, 218, 149);
		padding-top: 8px;
		color: #fff;
		border-radius: 25px;

	}

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

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

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

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

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

				.unit {
					font-size: 12px;
					color: rgba(153, 153, 153, 100);
				}
			}
			.price-3 {
				font-size: 24rpx;
				color: #fff;
				margin-left: 8rpx;
				padding-right: 9rpx;
				 background:#00B962 ;
				 border-radius: 8rpx;
				.num1{
					 padding-left:  12rpx;
					border-radius: 8rpx 0 8rpx 8rpx;
					 padding-right: 18rpx;
					 background: #121212;
					 -webkit-clip-path: polygon(0 0, 93% 0, 84% 100%, 0% 100%);
					 clip-path:  polygon(0 0, 93% 0, 84% 100%, 0% 100%);
					 
				}
				 
			}
			.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;
			}
		}
	}

	.user-card {
		padding: 19px 0 39px 20px;
		margin: 21px 20px 0 20px;
		background: url(@/assets/img/companyVIP.png) no-repeat right, linear-gradient(to right, #C6D4ED, #DCE6F0) no-repeat;
		box-shadow: 0px 0px 16px 0px rgba(14, 39, 84, 28);
		border: 2px solid rgba(236, 239, 245, 100);
		border-radius: 16px;
		display: flex;

		.head-img {
			width: 48px;
			height: 48px;

			img {
				width: 100%;
			}
		}

		.user-name {
			margin-left: 12px;

			.name {
				line-height: 24px;
				color: rgba(33, 41, 48, 100);
				font-size: 24px;
				font-weight: 550;
			}

			.sign {
				color: rgba(76, 89, 111, 100);
				font-size: 16px;
				line-height: 16px;
				margin-top: 8px;
			}
		}
	}
</style>