JP-ChargeTeam51/pages/monthlyCardActivity/monthlyCardBuy.vue

<template>
	<view>
		<ujp-navbar title="包月卡购买"></ujp-navbar>
		<!-- 卡片 -->
		<view class="monthly-card">
			<view class="main">
				<view class="title-1">
					充电服务费包月卡
				</view>
				<view class="title-2">
					有效期内，合约充电站使用度数无上限
				</view>
			</view>
			<img class="cover" src="../../assets/img/cover@3.png" alt="">
		</view>
		<view class="slogan-1">
			充电服务费包月卡
		</view>
		<view class="slogan-2">
			单次购买、整月受益!
		</view>
		<view class="slogan-3">
			仅限车主购买，适用于平台对外开放充电站
		</view>
		<u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
		<u-modal v-model="showModel" :show-cancel-button="true" @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">
			<button class="dredge" @click="show = true">立即开通 ￥{{detail.price}}/月</button>
			<p>开通表示阅读并同意
				<text class="agreement" @click="gotoUrl('pages/article/details?code=FWFZKXY')">《服务费折扣协议》</text>
			</p>
		</view>
	</view>
</template>

<script>
	import * as Pay from '@/apis/weixin.js'
	import * as API from '@/apis/card.js'

	import QRCode from 'qrcodejs2'
	import {
		convertCanvasToImage,
	} from '@/utils'
	import {
		wxPayJs
	} from '@/utils/wxpay'
	export default {
		data() {
			return {
				qrCodeImg: "",
				showModel: false,
				list: [{
					text: '微信',

				}, {
					text: '支付宝'
				}],
				show: false,
				submitForm:{},
				detail:{}
			}
		},
		onReady() {
			this.getInfo();
		},
		methods: {
			getInfo(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.cardDetail({
					cardId:'3e1b0f8f-61b0-405f-a285-929b5346479f'
				}).then((response) => {
					this.detail=response.data.monthlyRentCard
					uni.hideLoading()
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			submit(type){
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.openCard({
					cardId:'3e1b0f8f-61b0-405f-a285-929b5346479f'
				}).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,
				})
				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() {
				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;
	}

	// 卡片
	.monthly-card {
		margin: 20px;
		border-radius: 16px;
		height: 150px;
		background: linear-gradient(#F2E6CA, #C9A87B);
		position: relative;

		.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: 102%;
			position: absolute;
			bottom: -10px;
			left: -2px;
			right: 0;
		}
	}

	.slogan-1 {
		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 {
		height: 20px;
		color: rgba(255, 255, 255, 100);
		font-size: 28rpx;
		text-align: center;
	}

	// 立即开通
	.bottom {

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

		.dredge {
			width: 72.2%;
			border-radius: 50px;
			font-size: 18px;
			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>