JP-ChargeTeam51/pages/monthlyCardActivity/monthlyCardBuy3.vue

<template>
	<view>
		<ujp-navbar title="包月卡购买"></ujp-navbar>
		<!-- 卡片 -->
		<view class="monthly-card-bgc">
			<view class="monthly-card">
				<view class="main">
					<view class="title-1">
						充电服务费包月卡
					</view>
					<view class="title-2">
						到期时间：{{userCard&&ispay?userCard.endTime:'未购买'}}<br />
						有效期内，合约充电站使用度数无上限
					</view>
				</view>
				<img class="cover" src="../../assets/img/cover@3.png" alt="">
			</view>
		</view>

		<view class="slogan-1">
			充电服务费包月卡
		</view>
		<view class="slogan-2">
			单次购买、整月受益!
		</view>
		<!-- <view class="slogan-3" style="color: #ead9b4;" >
			限时活动结束时间2022年8月8日0点结束
		</view> -->
		<!-- 营运车辆 -->
		<template  v-for="(item,i) in cardList"  >
			<view  class="operating" :class="{
				'operating-coach':item.monthlyRentCard.id==cardId,
				'non-operational-car':item.monthlyRentCard.id!=cardId,
			}"
			
			@click="cardId=item.monthlyRentCard.id,detail=item.monthlyRentCard"
			 :key="i">
				<view class="type">
					<view class="title">
						<text class="img">
							<img  v-if="item.monthlyRentCard.id==cardId" src="../../assets/img/antFill-crown@3x.png" alt="">
							<img   v-else src="../../assets/img/antFill-crown2.svg" alt="">
							 
						</text>{{item.monthlyRentCard.name}}
					</view>
					<view class="hint">
						{{item.monthlyRentCard.remark}}
					</view>
			
				</view>
				<view class="price">
			
					<text class="num">{{item.monthlyRentCard.price.toFixed(2)}}</text>
					<text class="unit">元</text>
				</view>
			</view>
		</template>
		
		 
<view class="slogan-3">
			<view v-html="ykgz"></view>


			<view class="slogan-4"
			 v-if="cardId||ispay"
			 @click="gotoUrl('pages/monthlyCardActivity/monthlyCardList?cardId='+(ispay?userCard.rentCardId:cardId))">
				查看本活动适用站点
			</view>
		</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>
		<img id="qrcode" style="display: none;">
		<!-- 立即开通 -->
		<view class="bottom" v-if="ispay">
			<button class="dredge">已购买</button>
		</view>
		<view class="bottom" v-else-if="!endCardBool">
			<button class="dredge">已下架</button>

		</view>
		<view class="bottom" v-else-if="!show2" @click="gotoGz">
			<button class="dredge">关注公众号</button>
		</view>
		<view class="bottom" v-else-if="!infoSet" @click="gotoUrl('pages/user/dataSet')">
			<button class="dredge">完善个人信息</button>
		</view>
		

		

		<!-- 立即开通 -->
		<view class="bottom" v-else-if="!ispay">
			<button class="dredge" v-if="detail.putShelf&&!detail.isVip" @click="show = true">立即开通
				￥{{detail.price.toFixed(2)}}/月</button>
			<button class="dredge" v-if="detail.putShelf&&detail.isVip" @click="show = true">{{detail.platformText}}车主特惠
				￥{{detail.price.toFixed(2)}}/月<span
					style="font-size: 12px;    text-decoration: line-through;">￥{{detail.oldPrice.toFixed(2)}}</span></button>

			<button class="dredge" v-if="!cardList.length" @click="putShelf"> 已下架</button>

			<p>开通表示阅读并同意
				<text class="agreement" @click="gotoUrl('pages/article/details?code=FWFZKXY')">《服务费折扣协议》</text>
			</p>
		</view>


		<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>
	</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 QRCode from 'qrcodejs2'
	import {
		newDate,
		convertCanvasToImage,
	} from '@/utils'
	import {
		wxPayJs
	} from '@/utils/wxpay'
	export default {
		data() {
			return {
				cardId: '',
				qrCodeImg: "",
				showModel: false,
				cardList:[],
				projectName: "",
				list: [{
					text: '微信',

				}, {
					text: '支付宝'
				}],
				show: false,
				submitForm: {},
				ykgz: '',
				detail: {},
				ispay: false,
				show2: false,
				show1: false,
				infoSet: false,
				infoSet1: false,
				userCard: null,

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

		},
		onReady() {
			this.ykgz = this.carhelp.getConfig().ykgz
			//this.checkSubscribe()

		},
		onShow() {
			this.checkSubscribe();
		},
		computed: {
			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;
				}
			}
		},
		methods: {
			gotoGz() {
				this.carhelp.setGzDate()
				var url = "https://mp.weixin.qq.com/s/mCHz1nNvg0xAICiBeIyKRQ";
				window.location.href = url

			},
			checkSubscribe() {
				API_weixin.checkSubscribe({
					openId: this.carhelp.getOpenId()
				}).then((res) => {

					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) {
					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({
					
				}).then((response) => {
					
					
					this.cardList=response.data.cardList;
					if(this.cardList.length){
						this.detail = this.cardList[0].monthlyRentCard
						this.cardId=this.detail.id;
						
					}
					this.getUserInfo()
					console.log(this.cardList)
					//cardId: this.cardId
					uni.hideLoading()
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			getUserInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				loginApi.findByOpenId({
					openId: this.carhelp.getOpenId(),
					noerror: true
				}).then((res) => {
					uni.hideLoading();

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

						if (res.data.regUser) {
							var userInfo = res.data.regUser

							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 {

						}

					}




				}).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) => {
					console.log(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')
				console.log(listcanvas.length)
				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 lang="scss" scoped>
	page {
		background-color: #2a2c31;
		padding-bottom: 200px;
	}

	.monthly-card-bgc {
		padding: 20px;
		background-color: #101010;
		height: 150px;
		position: relative;
	}

	// 卡片
	.monthly-card {

		border-radius: 16px;
		height: 150px;
		background: linear-gradient(#F2E6CA, #C9A87B);


		.main {
			padding: 24px 0 24px 24px;
			height: 100%;
			background: url(@/assets/img/card@3.png);
			background-repeat: no-repeat;
			background-position: 30% 10%;
			background-size: cover;
			color: rgba(255, 255, 255, 100);
			border-radius: 6px;

			.title-1 {
				line-height: 28px;

				font-size: 56rpx;
				margin-bottom: 8px;
			}

			.title-2 {
				line-height: 24px;

				font-size: 34rpx;
			}
		}

		.cover {
			width: 100%;
			position: absolute;
			bottom: -30px;
			left: 0px;
			right: 0;
		}
	}

	.slogan-1 {
		margin-top: 40px;
		height: 36px;
		color: rgba(234, 217, 180, 100);
		font-size: 48rpx;
		text-align: center;
		margin-bottom: 4px;
	}

	.slogan-2 {
		height: 36px;
		color: rgba(234, 217, 180, 100);
		font-size: 56rpx;
		text-align: center;
		margin-bottom: 12px;
	}

	.slogan-3 {
		text-align: initial;
		padding: 0 40px;
		line-height: 24px;
		color: #CCCCCC;
		font-size: 28rpx;

	}

	.slogan-4 {
		margin-top: 10px;
		text-decoration: underline;
		height: 20px;
		color: #9F9C99;
		font-size: 32rpx;
		text-align: center;
	}

	.operating{
		
		border: 1px solid rgba(100, 90, 77, 100);
			padding: 30rpx;
			margin: 32rpx 40rpx 0;
			//background: linear-gradient(to right, #bc9663, #79674d);
			display: flex;
			justify-content: space-between;
			color: #fff;
			border-radius: 12px;
		
			.title {
				color: rgba(255, 255, 255, 100);
				font-size: 18px;
				line-height: 20px;
		
				.img {
					display: inline-block;
					background-color: #fff;
					width: 40rpx;
					height: 40rpx;
					border-radius: 8rpx;
					line-height: 36rpx;
					margin-right: 8rpx;
		
					img {
						width: 24rpx;
						height: 24rpx;
						margin-left: 8rpx;
					}
				}
			}
		
			.hint {
				color: rgba(255, 255, 255, 100);
				font-size: 12px;
				line-height: 24px;
				margin-top: 4px;
			}
		
			.price {
				color: rgba(255, 255, 255, 100);
		
				margin: auto 0;
		
				.num {
					font-size:56rpx;
				}
		
				.unit {
					font-size: 32rpx;
					margin-left: 8rpx;
				}
			}
		
	}
	// 营运车辆,非营业车辆
	.operating-coach {
		
		background: linear-gradient(to right, #bc9663, #79674d);
		
		.title {
			
			.img {		
				background-color: #fff;
			}
		}

		.price {
			color: rgba(255, 255, 255, 100);

		}
	}

.non-operational-car{
	
	.title {
		.img {
		 
			background:linear-gradient(#f2e6ca,#c9a87b) ;	 
		}
	}
	.price {
		color: rgba(211, 189, 158, 100);
	}
}

	// 立即开通
	.bottom {

		position: fixed;
		background-color: #2a2c31;
		bottom: 0px;
		padding-bottom: 40px;
		left: 0;
		right: 0;

		.dredge {
			// width: 72.2%;
			margin: 0 20px;
			border-radius: 50px;
			font-size: 36rpx;
			background: linear-gradient(to right, #C9A87B, #F2E6CA);
			margin-bottom: 12px;
		}

		p {
			height: 20px;
			color: rgba(226, 222, 217, 100);
			font-size: 14px;
			text-align: center;
		}

		.agreement {
			color: #897a69;
		}
	}
</style>