JP-ChargeTeam51/pages/discountCard/productDetails.vue

<template>
	<view>
		<ujp-navbar title="自营站充电服务费6折卡"></ujp-navbar>
		<view class="header">
			<img src="../../assets/img/9-4/productDetails.png" alt="">
		</view>
		

		<view class="main">
			<view class="infos">
				<view class="title">
					{{detail.name}}
				</view>
				<view class="price" style="font-style: italic;" v-if="detail.id">
					￥{{detail.price}}元
				</view>
				<view class="price"  style="    color: #777777;" v-else>
					请选择规格
				</view>
				<!-- 使用范围 -->
				<view class="usable-range">
					<view class="item">
						<u-icon name="checkmark-circle"></u-icon>
						仅可优惠充电服务费
					</view>
					<view class="item">
						<u-icon name="checkmark-circle"></u-icon>
						新能源车主可用
					</view>
					<view class="item">
						<u-icon name="checkmark-circle"></u-icon>
						仅平台自营站可用
					</view>
				</view>

			</view>
			<!-- 规格 -->
			<view class="specification" v-if="isPayText==''">
				<view class="title">
					规格
				</view>
				<view class="value" @click="show=true" v-if="detail.id">
					可用{{detail.chargeDegreeLimit}}度（有效期{{setValidity(detail.periodOfValidity)}}） <u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
				<view class="value" v-else @click="show=true" style="    color: #777777;">
					请选择规格 <u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
				
			</view>
			
			<view class="notice2">
				
			
				<view class="upupupView" v-show="flag==1">
					<view class="upupupImg">
						<img src="@/assets/img/upupup.svg">
					</view>
			
					<p>上划查看更多内容</p>
				</view>
			
			</view>
			<!-- 适用站点 -->
			<view class="applicable-site">
				<img src="@/assets/img/9-4/标题装饰左.svg">
				适用站点：平台自营站
				<img src="@/assets/img/9-4/标题装饰右.svg">
				<view style="font-size: 24rpx;color: rgba(119, 119, 119, 1);font-weight: 400;text-align: start;">
					暂不适用站点：恩施花硒谷华美达安可酒店充电站、恩施青花民族医院充电站
				</view>
				
			</view>
			
			<!-- 服务费 -->
			<view class="service-charge">
				<view class="box">
					<view class="discount">
						自营站充电服务费6折
					</view>
				</view>
				<view class="priceMain" >
					<view class="price"  v-for="(item,i) in cardList" 
					
					@click="checkboxChange(item.monthlyRentCard)"
					:key="i" >
						<view class="item">
							<text>{{item.monthlyRentCard.price}}</text>元
						</view>
						 <view class="hint1">
						 	<view class="item2"  >
						 		<p>累计{{item.monthlyRentCard.chargeDegreeLimit}}度内可用</p>
						 		<p>有效期{{setValidity(item.monthlyRentCard.periodOfValidity)}}</p>
						 	</view>
						 	
						 </view>
						 
						 
					</view>
				</view>
				
				
			</view>
			
			<!-- 价格对比 -->
			<view class="price-comparison">
				
				<view class="headline">
					<view class="station">
						青少年宫充电站
					</view>
					<span class="price-comparison1">
						服务费6折卡
					</span>
				</view>
				<!-- 折扣价 -->
				<view class="discount-price">
					<view class="tag">
						折后服务费
					</view>
					<view class="price">
						<span class="priceNum">0.23</span>
						<text>元/度（不含电价）</text>
					</view>
				</view>
				<!-- 原价 -->
				<view class="original-cost">
					<view class="tag">
						原价服务费
					</view>
					<view class="price">
						<span class="priceNum">0.38</span>元/度（不含电价）
					</view>
				</view>
			
			</view>
		
			<!-- 提示2 -->
			<view class="hint2" v-if="false">
				<!-- *预估省钱金额计算不含购卡金额，月充电超出度数上限，可续购本商品。 -->
			</view>
			<view class="example">
				<view class="exampleTitle">*省钱估算</view>
				以青少年宫充电站低谷时段价格为例，服务费为：0.38元/度，使用6折卡后服务费为：0.23元/度，每度优惠0.15元，338度（12.9元6折卡）累计可优惠50.7元，1000度（29.9元6折卡）累计可优惠150元。
				<br/>上述估算价格为当时价格，仅供参考，实时价格请前往平台各站点查询。
				<br/>预估省钱金额计算不含购卡金额，月充电超出度数上限，可续购本商品。</view>
				<u-line color="#F2F2F2" margin="80rpx 0 0 0"></u-line>
			</view>
			
			<!-- 自营站 -->
						<view class="self-station" v-if="stationslist.length" >
							<view class="headline">
								<img src="@/assets/img/9-4/标题装饰左.svg">
								查看你所在城市的自营站
								<img src="@/assets/img/9-4/标题装饰右.svg">
								
							</view>
							<view class="map">
								<img src="../../assets/img/map.png" alt="">
								<view class="station-detail">
									<view class="title">
										<view class="title-l">
											你附近<text style="color:#FF6923;">{{' '}}5公里{{' '}} </text>内的充电站
										</view>
										<view class="title-r" @click="gotoUrl('pages/searchPile/searchPile')" >
											更多<u-icon name="arrow-right" color="#999999"></u-icon>
										</view>
									</view>
									<view class="station-amount">
										<view class="item">
											<view class="number">
												{{stationslist.length}}
											</view>
											<view class="name">
												平台自营站
											</view>
										</view>
										<view class="item" v-if="false">
											<view class="number">
												2
											</view>
											<view class="name">
												平台自营超充站
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
		<view class="main">	
			
			<!-- 相关问题 -->
			<view class="related-issues">
				<view class="headline">
					<img src="@/assets/img/9-4/标题装饰左.svg">
					关于自营站充电服务费6折卡
					<img src="@/assets/img/9-4/标题装饰右.svg">
					
					
				</view>
				<view class="item">
					<view class="question">
						Q：购买服务费6折卡可以在哪些充电站享受优惠？优惠范围是什么？
					</view>
					<view class="answer">
						A：平台自营站均（不适用站除外）可使用，其它充电站点暂不支持。服务费6折卡可享受额度范围内的充电服务费6折；但不包含电费、停车费、占位费等其他费用。
					</view>
				</view>
				<view class="item">
					<view class="question">
						Q：什么是额度上限和有效期内可用？


					</view>
					<view class="answer">
						A：在产品有效期内，使用服务费6折卡累计抵扣度数达到规定电量额度上限后，<span style="color: #00b962;font-weight: bold;">本单超出充电额度部分仍然以6折优惠计算</span>，后续订单将不再继续享受服务费6折优惠。产品有效期到期后，即使累计使用度数没有达到额度上限，后续订单也不再继续享受服务费6折优惠。
					</view>
				</view>
				<view class="item">
					<view class="question">
						Q：我有多张不同的充电卡和优惠券，可以和服务费6折卡同时使用吗？
					</view>
					<view class="answer">
						A：同一笔订单中，暂不支持服务费6折卡与其它充电卡(服务费包月会员或其它折扣卡)一起使用；6折卡可以与账户余额或优惠券一起使用。
					</view>
				</view>
				<view class="item">
					<view class="question">
						Q：服务费6折卡的度数上限和有效期可以累计吗？

					</view>
					<view class="answer">
						A：不可以。当现有服务费6折卡达抵扣上限或剩余有效期为0天时，用户可以续购服务费6折卡。
					</view>
				</view>
				<view class="item">
					<view class="question">
						Q：启动充电后或结束充电后购买的服务费6折卡，可以使用吗？

					</view>
					<view class="answer-form">
						<view class="title">
							是否可以使用服务费6折卡
						</view>
						<view class="before">
							<view class="b-top">
								启动充电前购买
							</view>
							<view class="b-bottom">
								本单结算可以使用
							</view>
						</view>
						<view class="later">
							<view class="l-top">
								启动充电后购买
							</view>
							<view class="l-bottom">
								本单不可用，下一单结算可以使用
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 产品细则 -->
			<view class="product-rules">
				<view class="headline">
					<img src="@/assets/img/9-4/标题装饰左.svg">
					充电服务费6折卡产品细则
					<img src="@/assets/img/9-4/标题装饰右.svg">
					
					
				</view>
				<!-- 产品介绍 -->
				<view class="item">
					<view class="title">
						产品介绍：
					</view>
					<view class="content">
						<p> - 购卡的用户在平台自营站（不适用站除外）享受有效期内充电服务费6折的权益，该产品不可转赠。
						</p>
						<p>- 该产品有两种不同规格，单一账户不可重复购买，度数及有效期不可累加。
						</p>
						<p>- 购买成功后，可在{{projectName}}公众号 - 汽车充电 - 我的中查看。</p>
					</view>
				</view>
				<!-- 服务说明 -->
				<view class="item">
					<view class="title">
						服务说明：
					</view>
					<view class="content">
						<p>- 购买自营站充电服务费6折卡可享平台自营站（不适用站除外）服务费6折权益，该产品不可转赠。</p>
						<p>- 该产品针对充电服务费享受折扣，不包含电费、停车费、占位费等其他费用。</p>
						<p>- 自营站充电服务费6折卡购买后即刻生效，启动充电前购买成功支持本单可用，启动充电后完成购买仅下一单可用。</p>
						<p>- 338度自营站充电服务费6折卡（限338度，有效期30天）和1000度自营站充电服务费6折卡（限1000度，有效期90天）均为同一种产品，是充电服务费6折卡的两种不同规格。</p>
					</view>
				</view>
			<!-- 适用对象 -->
			<view class="item">
				<view class="title">
					适用对象：
				</view>
				<view class="content">
					<p>- 新能源车主可购买，购买该卡的手机号所绑定的{{projectName}}为使用该卡的唯一账号。</p>
					<p>- 该产品建议符合以下场景购买：①未拥有“充电服务费折扣卡”的车主；②已购买“充电服务费折扣卡”且该卡已过期的车主。</p>
				</view>
			</view>
			<!-- 适用充电站 -->
			<view class="item">
				<view class="title">
					适用充电站：
				</view>
				<view class="content">
					<p>- 自营站充电服务费6折卡，平台车主可在平台自营站（不适用站除外）使用，其他充电站点不支持使用。</p>
			
				</view>
			</view>
			<!-- 叠加规则 -->
			<view class="item">
				<view class="title">
					叠加规则：
				</view>
				<view class="content">
					<p>- 该卡与其他折扣类电卡(如：服务费包月会员等)针对同一订单不可叠加使用。</p>
					<p>- 该卡与账户余额和优惠券可叠加使用</p>
				</view>
			</view>
			<!-- 开票说明 -->
						<view class="item">
							<view class="title">
								开票说明：
							</view>
							<view class="content">
								<p>- 如需开具发票，请前往{{projectName}}公众号 - 汽车充电 - 我的 - 我的发票中申请。</p>
			
							</view>
						</view>
			</view>

			
			
			
		</view>

	<!-- 拒绝交易说明 -->
	<view class="explain">
		<view class="headline">
			自营站充电服务费6折卡拒绝交易说明
		</view>
		<view class="title">
			购卡人/持卡人存在以下情形的，{{projectName}}有权拒绝交易、暂停或终止对购卡人/持卡人的服务，所有损失应由购卡人/持卡人自行承担：
		</view>
		<view class="answer">
			<p>	1、发卡人、售卡企业根据国家适用法律、法规核实购卡人/持卡人身份及自营站充电服务费6折卡交易信息等情况，遭拒绝的;</p>
		    <p>		2、冒用他人身份或使用伪造、变造身份证明文件购买或使用自营站充电服务费6折卡的；</p>
			 <p>3、在发卡人公布的售卡或充值渠道之外购买自营站充电服务费6折卡的；</p>
			 <p>4、在购买或使用自营站充电服务费6折卡时存在欺诈行为；</p>
			 <p>5、违反本章程购买或使用自营站充电服务费6折卡；</p>
			 <p>6、使用伪造、变造的自营站充电服务费6折卡；或有其他损害发卡人、售卡企业或其他购卡人/持卡人的合法权益的情形。</p>
		</view>
	</view>
	<!-- 政策变更说明 -->
	<view class="explain">
		<view class="headline">
			自营站充电服务费6折卡政策变更说明
		</view>
		<view class="answer">
			如本自营充电服务费6折卡方案发生任何变更、调整、终止的，{{projectName}}有权提前进行公示，届时请以{{projectName}}更新并发布的最新版本为准。
		</view>
	</view>
	<!-- 价格说明 -->
	<view class="price-explain">
		<view class="title">
			<view class="title-l">
				价格说明
			</view>
			<view class="title-r" v-if="false">
				收起<u-icon name="arrow-up" color="#999999"></u-icon>
			</view>
		</view>
		<view class="explain-item">
			<view class="item-title">
				划线价格
			</view>
			<view class="item-value">
				划线的价格是商品的专柜价、吊牌价、正品零售价、指导价.曾经展示过的销售价等，仅供你参考。
			</view>
		</view>
		<view class="explain-item">
			<view class="item-title">
				未划线价格
			</view>
			<view class="item-value">
				未划线的价格是商品的销售标价，具体的成交价格因使用优惠券、积分等发生变化，最终以订单结算价格为准。
			</view>
		</view>
		<p>此说明仅当出现价格比较时有效。若这件商品针对划线价格进行了特殊说明，以特殊说明为准。</p>
	</view>
	<!-- 底部 -->
	<view class="bottom">
		<view class="option" @click="openModal">
			<view class="icon">
				<u-icon name="server-fill" size="40"></u-icon>
			</view>
			<view class="text">
				联系客服
			</view>
		</view>
		<view class="option" @click="gotoUrl('pages/discountCard/myOrder')">
			<view class="icon">
				<u-icon name="order" size="40"></u-icon>
			</view>
			<view class="text">
				我的订单
			</view>
		</view>
		<view class="button" v-if="isPayText==''"
		 @click="show = true" >
			立即购买
		</view>
		
		<view class="button isPayText" v-else
		 @click="isPayTextBtn" >
			{{isPayText}}
		</view>
	</view>
	<!-- 弹出层 -->
	<view >
		<u-popup v-model="show" mode="bottom" :closeable='true'>
					
					<view class="popup">
						<!-- 商品信息 -->
						<view class="class-infos">
							<view class="picture">
								<img :src="detail.image" alt="">
							</view>
							<view class="infos">
								<view class="class-name">
									{{detail.name}}
								</view>
								<view class="price">
									{{detail.price}}元
								</view>
								<view class="price-detail"  v-if="detail.id" >
									<!-- 已选：可用338度（有效期30天） -->
									已选：可用{{detail.chargeDegreeLimit}}度（有效期{{setValidity(detail.periodOfValidity)}}） 
									
								</view>
								<view class="price-detail"  v-else style="    color: rgb(119, 119, 119);" >
									<!-- 已选：可用338度（有效期30天） -->
									请选择规格
								</view>
							</view>
						</view>
                          <!-- 规格 -->
						  <view class="specification">
						  	<view class="title">
						  		规格
						  	</view>
							<view class="specification-options">
								<view  v-for="(item,i) in cardList" :key="i"  
								@click="checkboxChange(item.monthlyRentCard)"
								:class="{
									'item-checked':cardId==item.monthlyRentCard.id
								}"
								class="options-item ">
									可用{{item.monthlyRentCard.chargeDegreeLimit}}度（有效期{{setValidity(item.monthlyRentCard.periodOfValidity)}}） 
								</view>
								
							</view>
						  </view>
						  <!-- 数量 -->
						  <view class="amount" v-if="false">
						  	<view class="title">
						  		数量（单笔订单限购1件）
						  	</view>
							<u-number-box v-model="value" max="1"></u-number-box>
						  </view>
					</view>
					<view class="bottom" style="box-shadow: none;">
						<view class="option" @click="openModal">
							<view class="icon">
								<u-icon name="server-fill" size="40"></u-icon>
							</view>
							<view class="text">
								联系客服
							</view>
						</view>
						<view class="option" @click="gotoUrl('pages/discountCard/myOrder')">
							<view class="icon">
								<u-icon name="order" size="40"></u-icon>
							</view>
							<view class="text">
								我的订单
							</view>
						</view>
						<view class="button" @click="openPayModel">
							立即购买
						</view>
					</view>
	  </u-popup>
	  	
	</view>
	<u-action-sheet :list="list" @click="click" v-model="showPay"></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="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>
		
	<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>
</template>

<script>
	import * as API_weixin from '@/apis/weixin.js'
	
	import * as Pay from '@/apis/weixin.js'
	import * as API from '@/apis/card.js'
	import * as loginApi from '@/apis/login.js'
	import * as api from '@/apis/site.js';
	import * as WxJsApi from '@/utils/wxJsApi.js'
	
	
	import QRCode from 'qrcodejs2'
	import {
		newDate,
		convertCanvasToImage,
	} from '@/utils'
	import {
		wxPayJs
	} from '@/utils/wxpay'
	
	export default {
		data() {
			return {
				stationslist:[],
				checked: "false",
				cardId: '',
				qrCodeImg: "",
				showModel: false,
                   show:false,//选择规格
				   showPay:false,//支付方式
				   value: 1,
				   cardList: [],
				   projectName: "",
				   list: [{
				   	text: '微信',
				   
				   }, {
				   	text: '支付宝'
				   }],
				   submitForm: {},
				   ykgz: '',
				   detail: {},
				   ispay: false,
				   show3: false,
				   show2: true,
				   show1: false,
				   infoSet: true,
				   infoSet1: false,
				   userCard: null,
				   isReady: false,
				   userInfo: {},
				   elderStatus: false,
				   consumerPhone: "400-8899-619",
				   longitude: '',
				   latitude: '',
				   scrollLeftSet: 0,
				   scrollLeftOldSet: 0,
				   scrollLeftSetBl: false,
				   flag: 0, //0  初始化，  1 ，开始判断， 2已经滑动
				   startTime:null,
				   
			}
		},
		onReady() {
			var consumerPhone = "400-8899-619"
			// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if (consumerPhone) {
				this.consumerPhone = consumerPhone
			}
		
			//this.ykgz = this.carhelp.getConfig().ykgz
			
			var userCard = this.carhelp.getPersonInfoPlus().userCard
			if(userCard&&userCard.classify==2){
				this.userCard=userCard
				this.ispay = this.userCardBool(this.userCard)
			}
			
			
			//this.checkSubscribe()
			this.getCardList();
			
			WxJsApi.getLocation().then((res) => {
				
				this.latitude = parseFloat(res.latitude);
				this.longitude = parseFloat(res.longitude);
								
				 this.searchStationData();
			}).catch(error => {
				uni.showToast({
					title:JSON.stringify(error)
				})					
			})
		},
		onShow() {
			
			//this.checkSubscribe();
		
		},
		computed: {
			isPayText(){
				var memberLevel=1
				if(this.userInfo.memberLevel){
					memberLevel=this.userInfo.memberLevel
				}
				var text=""
				if(this.cardList.length==0){
					text="未上架"
				}else if(this.ispay&&this.startTime&&this.startTime>0){
					text=this.detail.startBuyTime.substring(0,10)+"上架"
				}else if(this.ispay&&this.userCard.classify=="1"){
					text="已购买其他卡"
				}else if(this.userInfo.userType=='1'){
					text="游客无法购买"
				}else if(!this.isReady){
					text="加载中"
				}else if(this.ispay){
					text=this.userCard.endTime.substring(0,10)+"到期"
				}else if(!this.show2){
					text="关注公众号"
				}else if(!this.infoSet){
					text="完善个人信息"
				}
				
				return text
			},
			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: {
			openPayModel(){
				if (!this.cardId) {
					uni.showToast({
						title:"请选择产品规格"
					})
					return
				}
				this.showPay=true;
			},
			openModal() {
				//this.show3 = true;
				uni.navigateTo({
					url:"/pages/service/service"
				})
			},
			searchStationData(obj) {
				let data1 = {
					latitude: this.latitude,
					longitude: this.longitude,
					findType: "1",
					platformType:'1',
					radius: 5,
					pageIndex: 1,
					pageSize: 999
				};
				
				uni.showLoading({})
			
				if (this.carhelp.getPersonInfo()) {
					data1.openId = this.carhelp.getOpenId()
				}
				
				api.getChargingStationData(data1).then(res => {
					uni.hideLoading()
					
					 var stationslist=res.data.data
					this.stationslist = stationslist;
					
					 
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			
			},
			isPayTextBtn(){
				if(this.isPayText=='关注公众号'){
					this.gotoGz()
				}else if(this.isPayText=='完善个人信息'){
					uni.navigateTo({
						url:"/pages/user/dataSet"
					})
				}
			},
			confirmPhone() {
				this.show = false;
				uni.makePhoneCall({
					phoneNumber: this.consumerPhone //仅为示例
				});
			},
			checkboxChange(monthlyRentCard) {
			
				this.detail = monthlyRentCard;
				this.cardId = monthlyRentCard.id
				uni.showToast({
					title: "已选中 "+this.detail.price+"元,可用"+this.detail.chargeDegreeLimit+"度"
				})
			// 	monthlyRentCard.checked = true
			// 	for (var i in this.cardList) {
			// 		var obj = this.cardList[i].monthlyRentCard;
			// 		if (this.cardId == obj.id) {
			
			// 		} else {
			// 			obj.checked = false
			// 		}
			// 	}
				
			},
			gotoGz() {
				//this.carhelp.setGzDate()
				var url = process.car.gzUrl;
				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.getUserInfo();
			
						//this.getCardList();
						this.show2 = true;
						//this.carhelp.setGzDate() 
					}
			
					//setGzDate
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			
			},
			userCardBool(userCard) {
				if(this.startTime&&this.startTime>0){
					console.log(this.startTime)
					return true
				}
			
				if (userCard) {
					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:2
				}).then((response) => {
					
					uni.hideLoading()
					this.cardList = response.data.cardList;
			 
					if (this.cardList.length) {
						this.detail = {
							...this.cardList[0].monthlyRentCard
						}
						this.detail.id=null
						// this.cardId = this.detail.id;
						// this.cardList[0].monthlyRentCard.checked = true
						if(this.detail.startBuyTime){
							this.startTime=(newDate(this.detail.startBuyTime).getTime()-new Date().getTime())
						}
					}
					this.getUserInfo()
					this.isReady = true;
					//cardId: this.cardId
			
				}).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"
					})
				})
			},
			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/discountCard/paymentSuccess?id=" + this.outOrderNo
				})
			},
			click(index) {
				console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
				this.submit(index);
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
		padding-bottom: 200px;
	}
</style>
<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;
		z-index: 999;


	}

	.upupupView img {
		top: 15px;
		position: relative;
		width: 60px;
		z-index: 999;
		animation: movepoint 2s infinite;
		-webkit-animation: movepoint 2s infinite;
	}
</style>
<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 200px;
		img{
			width: 100%;
			height: 100%;
		}
		// background: linear-gradient(30deg, rgba(59, 182, 254, 1) 13.4%, rgba(0, 185, 98, 1) 85.87%);
		// position: relative;
		// padding: 48rpx;

		.cover {
			width: 160rpx;
			height: 330rpx;
			position: absolute;
			right: 32rpx;
			bottom: 0;

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

		.text1 {
			color: rgba(255, 255, 255, 1);
			font-size: 64rpx;
			font-family: 'YouSheBiaoTiHei';
		}

		.tag {
			display: flex;
			align-items: center;
			color: #fff;
			margin-bottom: 16rpx;

			.icon {
				margin-right: 8rpx;
			}
		}

		.usable-range {
			margin-top: 30rpx;
			color: rgba(49, 36, 102, 1);
			font-size: 24rpx;
		}
	}
	
	
	.main {
		padding: 24rpx 40rpx 0rpx 40rpx;

		.infos {
			color: rgba(51, 51, 51, 1);
			font-size: 40rpx;

			.title,
			.price {
				font-weight: bold;
			}

			.price {
				margin: 16rpx 0 32rpx;
				font-size: 40rpx;

			}
		}

		// 使用范围
		.usable-range {
			background-color: rgba(246, 246, 246, 1);
			padding: 16rpx 24rpx 24rpx;
			font-size: 24rpx;
			display: flex;
			flex-wrap: wrap;
			border-radius: 4px;

			.item {
				width: 50%;
				margin-top: 8rpx;
				color: rgba(51, 51, 51, 1);

				::v-deep.u-icon--right {
					margin-right: 4rpx;
				}
			}
		}

		// 规格
		.specification {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 48rpx;

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

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

				::v-deep.uicon-arrow-right {
					margin-left: 8rpx;
				}
			}
		}

		// 适用站点
		.applicable-site {
			text-align: center;
			margin: 80rpx 0;
			color: #333333 ;
			    font-weight: bold;
			font-size: 36rpx;
			img{
				width: 48rpx;
				height: 24rpx;
				margin: 0 16rpx;
			}
			
		}

		// 服务费
		.service-charge {
			border-radius: 12px;
			border: 1px solid rgba(0, 185, 98, 1);
			padding: 80rpx 40rpx 56rpx;
			position: relative;

			.box {
				width: 400rpx;
				// height: 64rpx;
				position: absolute;
				top: -32rpx;
				right: 0;
				left: 0;
				margin: 0 auto;

				.discount {
					margin: 0 auto;
					height: 32px;
					line-height: 32px;
					background-color: rgba(0, 185, 98, 1);
					text-align: center;
					box-shadow: 0px 0px 0px 16px rgba(255, 255, 255, 1);
					color: #fff;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
			.priceMain{
				display: flex;
				flex-wrap: wrap;
				    justify-content: space-between;
			}
			.price {
				display: flex;
				justify-content: space-between;
				 flex-direction: column;
                margin-top: 20rpx;
				.item {
					width: 272rpx;
					height: 128rpx;
					line-height: 128rpx;
					border-radius: 8px;
					background: linear-gradient(180deg, rgba(77, 196, 140, 1) 0%, rgba(122, 212, 170, 1) 24%, rgba(255, 255, 255, 1) 81%);
					text-align: center;
					border: 1px solid rgba(77, 196, 140, 1);
					color: rgba(16, 16, 16, 1);
                    z-index: 699;
					text {
						font-size: 64rpx;
					}
				}
			}

			.hint1 {
				display: flex;
				justify-content: space-between;
				text-align: center;
				margin-top: 20rpx;
				color: rgba(51, 51, 51, 1);
				font-size: 24rpx;
				    justify-content: center;
				.item {
					width: 272rpx;
				}
			}
		}
			
		// 价格对比
		.price-comparison {
			padding: 24rpx;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
			margin-top: 48rpx;
			.price-comparison1{
				border-radius: 0px 8px 0px 12px;
				background-color: rgba(0, 185, 98, 1);
				padding :8rpx 18rpx;
				line-height: 40rpx;
				font-size: 24rpx;

				color:#fff;
				    position: relative;
				   
				    top: -26rpx;
				    left: 24rpx;
			}
			.headline {
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 36rpx;
				justify-content: space-between;
				.station {
					color: rgba(16, 16, 16, 1);

				}

				.time {
					color: #999999;

				}
				img{
					    width: 20px;
					    height: 10px;
					    margin: 0 6px;
				}
			}

			// 折扣价
			.discount-price {
				display: flex;
				align-items: center;
				margin-top: 24rpx;
				
				

				.tag {
					width: 176rpx;
					height: 48rpx;
					line-height: 48rpx;
					background-color: rgba(214, 251, 234, 1);
					color: rgba(0, 185, 98, 1);
					font-size: 24rpx;
					text-align: center;
				}

				.price {
					color: rgba(0, 0, 0, 1);
					font-size: 44rpx;
					margin-left: 16rpx;
					.priceNum {
						font-weight: bold;
					}
					text {
						color: rgba(153, 153, 153, 1);
						font-size: 28rpx;
						margin-left: 8rpx;
					}
				}
			}

			// 原价
			.original-cost {
				display: flex;
				align-items: center;
				margin-top: 16rpx;

				.tag {
					width: 176rpx;
					height: 48rpx;
					line-height: 48rpx;
					background-color: rgba(242, 242, 242, 1);
					color: rgba(153, 153, 153, 1);
					font-size: 24rpx;
					text-align: center;
					text-decoration: line-through;
				}

				.price {
					color: rgba(153, 153, 153, 1);
					font-size: 28rpx;
					margin-left: 16rpx;
					text-decoration: line-through;
					.priceNum{
						font-weight: bold;
						margin-right: 4rpx;
					}
				}
			}

			
		}
		.example {
			margin-top: 20rpx;
				.exampleTitle{
					
					color: rgba(0, 185, 98, 1);
					font-size: 24rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				
				color: rgba(119, 119, 119, 1);
				font-size: 24rpx;
			}
		.hint2 {
			color: rgba(153, 153, 153, 1);
			font-size: 24rpx;
			line-height: 34rpx;
			margin-top: 32rpx;
		}

		// 相关问题
		.related-issues {
			.headline {
				color: rgba(16, 16, 16, 1);
				font-size: 44rpx;
				font-family: 'YouSheBiaoTiHei';
				text-align: center;
				img{
									  width: 20px;
									  height: 10px;
									  margin: 0 6px;
				}  
			}

			.question {
				color: rgba(51, 51, 51, 1);
				line-height: 40rpx;
				font-weight: bold;
				margin-top: 32rpx;
			}

			.answer {
				color: #333333;
				margin-top: 16rpx;
				line-height: 40rpx;
			}

			.answer-form {
				display: flex;
				border: 1px solid #cccccc;
				height: 150rpx;
				font-size: 22rpx;
				margin-top: 16rpx;

				.title {
					//padding: 0 16rpx;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #333333;
					line-height: 40rpx;

				}

				.before,
				.later {
					min-width: 234rpx;

					.b-top,
					.l-top {
						color: #333333;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 0 16rpx;
					}

					.b-top {
						border: 1px solid #cccccc;
						border-top: none;
					}

					.l-top {
						border-bottom: 1px solid #cccccc;
					}

					.b-bottom,
					.l-bottom {
						height: 94rpx;
						color: #777777;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.b-bottom {
						border-left: 1px solid #cccccc;
						border-right: 1px solid #cccccc;
						
					}

					.l-bottom {
						line-height: 44rpx;
					}
				}
			}
		}

		// 产品细则
		.product-rules {
			margin-top: 80rpx;

			.headline {
				color: rgba(16, 16, 16, 1);
				font-size: 44rpx;
				font-family: 'YouSheBiaoTiHei';
				text-align: center;
				img{
									  width: 20px;
									  height: 10px;
									  margin: 0 6px;
				}  
			}

			.item {
				.title {
					color: #111111;
					font-weight: bold;
					margin-bottom: 16rpx;
					margin-top: 32rpx;
				}

				.content {
					color: #333333;

					p {
						margin-bottom: 24rpx;
						line-height: 40rpx;
						font-size: 24rpx
					}
				}
			}
		}
	
	}
	
	// 自营站
	.self-station{
			 margin-top: 48rpx;
			 .headline{
				 color: rgba(16, 16, 16, 1);
				 font-size: 44rpx;
				 font-family: 'YouSheBiaoTiHei';
				 text-align: center;
				  img{
					  width: 20px;
					  height: 10px;
					  margin: 0 6px;
				  }  
			 }
			 .map{
				 margin-top: 32rpx;
				 position: relative;
				 img{
					 width: 100%;
					 height: 100%;
				 }
				 .station-detail{
					 
					 padding: 60rpx;
					 border-radius: 8px;
					 background-color: rgba(255, 255, 255, 1);
					 position: absolute;
					 bottom:40rpx;
					 left: 40rpx;
					 right: 40rpx;
					 .title{
						 display: flex;
						 align-items: center;
						 justify-content: space-between;
					 }
					 .station-amount{
						 display: flex;
						 justify-content: center;
						 align-items: center;
						 text-align: center;
						 margin-top: 40rpx;
						 .number{
							 color: rgba(16, 16, 16, 1);
							 font-size: 64rpx;
						 }
						 .name{
							 color: rgba(153, 153, 153, 1);
							 margin-top: 8rpx;
						 }
					 }
				 }
				 
			 }
	}
// 拒绝交易说明
.explain{
	padding:0 30rpx;
	margin-top: 80rpx;
	line-height: 48rpx;
	.headline{
		color: rgba(16, 16, 16, 1);
		font-size: 44rpx;
		font-family: 'YouSheBiaoTiHei';
		text-align: center;
		margin-bottom: 32rpx;
		img{
							  width: 20px;
							  height: 10px;
							  margin: 0 6px;
		}  
	}
	.title{
		color: #111111;
		font-weight: bold;
		padding: 0 10rpx;
		
	}
	.answer{
		color: #333333;
		padding: 0 10rpx;
		margin-top: 16rpx;
	}
}

// 价格说明
.price-explain{
	padding: 0 40rpx;
	margin-top: 80rpx;
	color: rgba(153, 153, 153, 1);
	font-size: 24rpx;
	line-height: 34rpx;
	.title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 32rpx;
		::v-deep.uicon-arrow-up{
			margin-left: 8rpx;
			
		}
		.title-l{
			color: rgba(51, 51, 51, 1);
		}
		.title-r{
			color: rgba(119, 119, 119, 1);
		}
	}
	.explain-item{
		margin-bottom: 40rpx;
		.item-title{
			margin-bottom: 16rpx;
		}
	}
}

// 底部
.bottom{
	padding: 30rpx 40rpx;
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 0px -6px 6px 0px rgba(0, 0, 0, 0.05);
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	z-index: 999;
	justify-content: space-between;
	.option{
		color:#101010;
		// margin-right: 32rpx;
		.icon{
			text-align: center;
		}
		.text{
			font-size: 24rpx;
			margin-top: 8rpx;
		}
	}
	.button{
		width: 400rpx;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 50px;
		background: #00b962;
	
		color: rgba(255, 255, 255, 1);
		font-size: 36rpx;
		text-align: center;
		// margin-left: auto;
	}
	.isPayText{
		background:#9E9E9E
	}
}
.popup{
	padding: 32rpx;
	padding-top:80rpx;
	height:850rpx;
	padding-bottom:50rpx;
	border-radius: 12px;
	.class-infos{
		display: flex;
		align-items: center;
		.picture{
			width: 152rpx;
			height: 152rpx;
			border-radius: 4px;
			overflow: hidden;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.infos{
			margin-left: 24rpx;
			.class-name{
				color: rgba(51, 51, 51, 1);
				font-size: 40rpx;
				font-weight: bold;
				
			}
			.price{
				color: rgba(16, 16, 16, 1);
				font-size: 32rpx;
				margin-top: 12rpx;
				
			}
			.price-detail{
				color: rgba(16, 16, 16, 1);
				font-size: 28rpx;
				margin-top: 12rpx;
				
			}
		}
	}
	// 规格
	.specification{
		margin-top: 80rpx;
		.title{
			color: rgba(119, 119, 119, 1);
		}
		.specification-options{
			margin-top: 24rpx;
			.options-item{
				width: 442rpx;
				
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 50px;
				background-color: rgba(239, 244, 242, 1);
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				text-align: center;
				margin-bottom: 24rpx;
			}
			.item-checked{
				background-color: rgba(0, 185, 98, 1);
				color: rgba(255, 255, 255, 1);
			}
		}
	}
	// 数量
	.amount{
		margin-top: 80rpx;
		.title{
			color: rgba(119, 119, 119, 1);
			margin-bottom: 24rpx;
		}
	}
	
	
	
	
}
::v-deep.u-drawer-content{
	border-radius: 12px;
}
</style>