JP-ChargeTeam51/pages/user/finance/recharge.vue

<template>
	<view>
		<u-navbar title="充值"></u-navbar>
		<view class="recharge">
			<view class="title">选择充值金额</view>
			<p>当前余额{{detail.balance}}</p>
			<view class="rechargeMain">
				<view class="recharge-item" :class="!otherNum&&moneyActiveClass == item.id ? 'active' : ''"
					v-for="(item,index) in moneyList" :key="item.id" @click="moneyClick(item.id,item)">
					{{item.rechargeAmount}}
					<view class="amount">赠20元</view>
					</view>
				
			</view>
			<p>其他充值金额</p>
			<view 
			
			:class="otherNum? 'active' : ''"
			class="recharge-input self-stop">
				<u-input v-model="otherNum" @input="ckInput" type="text" :border="true" />
			</view>
			<view class="title">选择支付方式</view>
			<view class="recharge-radio">
				<u-radio-group v-model="value2" @change="radioGroupChange" :wrap="true" width="100%">
					<u-radio active-color="#00B962" @change="radioChange" v-for="(item, index) in list" :key="index"
						:name="item.id" :disabled="item.disabled" width="100%">
						<view class="recharge-radio-item">
							<u-icon :name="item.icon" custom-prefix="custom-icon" :color="item.color" size="48">
							</u-icon>
							<view class="recharge-radio-name">
								{{item.name}}
							</view>
						</view>
					</u-radio>
				</u-radio-group>
			</view>
					<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="recharge-btn">
				<u-checkbox-group>
					<u-checkbox v-model="checked" shape="circle" @change="checkboxChange()">我已阅读并同意《充值协议》</u-checkbox>
				</u-checkbox-group>
				<u-button class="success-btn" shape="circle" type="success" @click="rechargeNow">
					<span>立即充值</span>
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import * as Pay from '@/apis/weixin.js'
	import QRCode from 'qrcodejs2'
	import {
		convertCanvasToImage,
	} from '@/utils'
	import {
		wxPayJs
	} from '@/utils/wxpay'
	import * as API from '@/apis/finance.js'
	export default {
		data() {
			return {
				showModel:false,
				selectItem:{},
				userId: '',
				detail: {},
				moneyActiveClass: 1,
				submitForm:{},
				qrCodeImg:"",
				moneyList: [

				],
				list: [{
						id:'0',
						name: '微信支付',
						icon: 'wechat-pay-fill',
						color: '#22ac38',
					},
					{
						id:'1',
						name: '支付宝支付',
						icon: 'alipay-fill',
						color: '#1677ff',
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value2: '0',
				otherNum:"",
				value1: '',
				checked: true,
			}
		},
		onReady() {
			if (this.carhelp.getPersonInfo()) {
				this.userId = this.carhelp.getPersonInfo().id;
			}

			this.init();
		},
		methods: {
			confirm(){
				
			},
			ckInput(text){
				if(text.indexOf('.')>0){
					
					this.$nextTick(()=>{
						this.otherNum=text.substring(0,text.indexOf('.'))
						uni.showToast({
							title:"请输入正整数"
						})
					})
				}
				var t	=Number(text);
				if(t<1){
					this.$nextTick(()=>{
						this.otherNum='';
					})
						
				}
				if(t>500){
					this.$nextTick(()=>{
						this.otherNum=500;
					})
						
				}
				
			},
			
			init1() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.personalCenter().then((res) => {
					this.detail = res.data
					this.isReady = true;
					uni.hideLoading()

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



				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var data = {
						type:2				};


				API.marketingData(data).then((res) => {

					this.moneyList = res.data.chargingMarketingList
					if (this.moneyList.length > 0) {
						this.selectItem = this.moneyList[0];
						this.moneyActiveClass = this.moneyList[0].id
						console.log(this.moneyActiveClass)

					}
					uni.hideLoading()
					this.init1()
				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			},
			moneyClick(index,item) {
				this.moneyActiveClass = index;
				if(item){
					this.selectItem=item;
				}
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			checkboxChange() {
				this.checked = !this.checked;
			},
			alpy(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				Pay.alpay(this.submitForm).then((response) => {
					
					let qrcode = new QRCode('qrcode', {
						width: 200,
						height: 200,
						text: response.data,
						correctLevel: QRCode.CorrectLevel.M,
					
					})
					
					var canvas = document.getElementsByTagName('canvas')[0];
					this.qrCodeImg = convertCanvasToImage(canvas);
					uni.hideLoading()
					this.showModel=true
						
				}).catch(error => {
						uni.showToast({
						
							title: error
						})
				})
			},
			wxpy(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				Pay.wxpay(this.submitForm).then((response) => {
					
					if(!response.result){		
						uni.showToast({
							title:  response.message
						})
						return
					}
					var data = response.data
					uni.hideLoading()
					console.log("Pay+"+new Date().getTime())		
					wxPayJs(data);
						
				}).catch(error => {
					uni.showToast({
					
						title: error
					})
 						
				})
			},
			rechargeNow() {
				this.submitForm={};
				if(!this.otherNum){
					this.submitForm.chargingMarketingId=this.selectItem.id;
				}else{
					this.submitForm.amount=this.otherNum
				}
				console.log(this.submitForm)
				if(this.value2=="0"){
					this.wxpy()
				}else{
					this.alpy()
				}
				
			}
		},
		onShow() {
			if (this.isReady) {
				this.init1()
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	/deep/.u-radio-group {
		width: 100%;
	}

	/deep/.u-radio {
		position: relative;
	}

	/deep/.u-radio__icon-wrap {
		position: absolute;
		right: 0;
	}

	.recharge {
		padding: 16px;

		.title {
			font-size: 16px;
		}

		p {
			color: #666;
			margin-top: 4px;
		}
	.self-stop.active{
		     border: 1px solid;
			background-color: #EFFFF7;
			border-color: #00B962;
			color: #00B962;
		
	}
		.rechargeMain {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 12px;
			margin-bottom: 20px;

			.recharge-item {
				width: 31%;
				border: 1px solid #e3e3e3;
				padding: 15px 0;
				border-radius: 4px;
				text-align: center;
				margin-bottom: 10px;
				font-size: 16px;
				position: relative;

			}
		.amount {
		// width: 41.9%;
		height: 16px;
		line-height: 15px;
		border-radius: 0px 4px 0px 4px;
		background-color: rgba(0, 185, 98, 100);
		color: rgba(255, 255, 255, 100);
		font-size: 10px;
		text-align: center;
		position: absolute;
		top: 0;
		right: 0;
	
	}

			.active {
				background-color: #EFFFF7;
				border-color: #00B962;
				color: #00B962;
			}
		}
	}



	.recharge-input {
		margin-top: 8px;
		margin-bottom: 32px;
	}

	.recharge-radio {
		margin-top: 10px;

		.recharge-radio-item {
			display: flex;
			align-items: center;
		}

		.recharge-radio-name {
			margin-left: 8px;
		}
	}

	.recharge-btn {
		position: fixed;
		left: 16px;
		right: 16px;
		bottom: 16px;
	}

	.success-btn {
		margin-top: 10px;
		background-color: #00B962 !important;
		flex: 1;
		border-color: #00B962 !important;
		color: #fff !important;
	}
</style>