JP-ChargeTeam51/pages/monthlyCardActivity/monthlyCardBuy.vue

<template>
	<view>
		<ujp-navbar title="选购服务费月卡"></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="cardList.length == 0">
				<img src="static/img/暂无数据-缺省页.png" alt="">
				<p class="oldTextjp2" style="color: #bfdfd5;" oldstyle="font-size: 18px;    ">暂无月卡上架</p>
			</view>
			<view 
			v-for="(item,i) in cardList" :key="i" 
			
			:style="'background-image: url('+item.monthlyRentCard.image+') ;'"
			class="card-1" >
				<view class="tag" v-if="item.monthlyRentCard.isVip">{{item.monthlyRentCard.platformText}}车主</view>
				<view class="tag" v-else-if="item.monthlyRentCard.remark">{{item.monthlyRentCard.remark}}</view>
				<view class="price">
					<view class="current-price" v-if="item.monthlyRentCard.discount">
						{{item.monthlyRentCard.price/100*item.monthlyRentCard.discountRate}}<text>元/月</text>
					</view>
					<view class="current-price" v-else>
						{{item.monthlyRentCard.price}}<text>元/月</text>
					</view>
					<view class="original-cost" v-if="item.monthlyRentCard.discount">
						原价 {{item.monthlyRentCard.price}}元/月
					</view>
					<view class="original-cost" v-if="item.monthlyRentCard.isVip">
						原价 {{item.monthlyRentCard.oldPrice}}元/月
					</view>
					
					<view class="radio-box">

						<u-checkbox-group  >
							<u-checkbox @change="checkboxChange($event,item.monthlyRentCard)" v-model="item.monthlyRentCard.checked" active-color="#446D94" shape="circle" size="48"></u-checkbox>
						</u-checkbox-group>
					</view>
				</view>

			</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>
		
		<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="button">
			 <button class="btn " v-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="show = true" v-else-if="detail.isVip">
				
				<text style="font-size: 14px;">￥</text>
			 
				<span  >{{detail.price}}</span> 
				
				<text   class="price">{{detail.oldPrice}}</text> 开通1个月会员
			
				<view class="position">
					<view id="talkbubble">{{detail.platformText}}车主</view>
				</view>
			</button>
 			<button class="btn " @click="show = true"  v-else>
				
				<text style="font-size: 14px;">￥</text>
				<span v-if="detail.discount" >
				{{detail.price/100*detail.discountRate}}</span> 
				<span v-else >{{detail.price}}</span> 
				
				<text v-if="detail.discount"  class="price">{{detail.price}}</text> 开通1个月会员

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



			<view class="hint">
				开通表示阅读并同意<span  @click="gotoUrl('pages/article/details?code=FWFZKXY')" style="text-decoration:underline">《服务费折扣协议》</span>
			</view>
		</view>
		<!-- 须知 -->
		<view class="notice">
			<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>
	</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 {
				description: '盟主能量包本期限时优惠活动将于9月16日结束。',
				checked: "false",
				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: {
			checkboxChange(e,monthlyRentCard) {
				
				this.detail=monthlyRentCard;
				this.cardId=monthlyRentCard.id
			
				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 = "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.cardList[0].monthlyRentCard.checked=true

					}
					this.getUserInfo()
					
					//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) => {
					
					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 lang="scss" scoped>
	/deep/.u-alert-desc {
		color: #ff7300;
	}

	// 卡片
	.main {
		background-color: #404A5E;
		padding: 40rpx 40rpx 30px 40rpx;

		.tag {
			position: absolute;
			background-color: rgba(255, 61, 0, 100);
			color: #ffffff;
			font-size: 12px;
			text-align: center;
			line-height: 20px;
			padding: 0 6px;
			left: 284rpx;
			top: 44rpx;


		}

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

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

			.current-price {
				font-size: 36rpx;
			}
		}

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

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

			text {
				font-size: 28rpx;

			}
		}

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

		}

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

		}



		.card-1 {
			margin-top: 32rpx;
			position: relative;
			background-size: cover;
			height: 300rpx;

			/deep/.u-checkbox__icon-wrap {
				
				background-color: #607d8b;
				opacity: 0.5;
			}

			.radio-box {
				margin-top: 78rpx;
				float: right;
				margin-right: -30rpx;
			}
		}

		.card-2 {
			position: relative;
			background: url(@/assets/img/card_operate.png) no-repeat;
			background-size: cover;
			height: 300rpx;
			margin-top: 32rpx;

			/deep/.u-checkbox__icon-wrap {
				background-color: #B29467;
			}

			.radio-box {
				margin-top: 78rpx;
				float: right;
				margin-right: -30rpx;

			}
		}
	}

	// 按钮
	.button {
		margin-top: -20rpx;
		border-radius: 16px 16px 0px 0px;
		background-color: rgba(255, 255, 255, 100);
		padding: 20px 20px 16px 20px;

		uni-button:after {
			border: none;
		}

		.btn {
			border: none !important;
			background: linear-gradient(#E1D0A5, #E4BE84);
			box-shadow: 0px 4px 10px 0px rgba(207, 175, 118, 40);
			border-radius: 50px;
			color: #101010;
			font-size: 18px !important;
			line-height: 44px;
			height: 44px;
			overflow: inherit !important;

			.price {
				text-decoration: line-through;
				margin: auto 4px;
				font-size: 12px
			}
		}

		.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;
			width: 60px;
			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;
		}
	}

	// 须知
	.notice {
		background-color: #fff;
		margin-top: 12px;
		padding: 20px 20px 72px 30px;

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