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

<template>
	<view>
		<ujp-navbar title="充值"></ujp-navbar>
		
		<view class="discounts"  v-if="bannerList.length">
			<u-swiper bg-color="#fff" :img-mode="'scaleToFill'" height="160" :list="bannerList" 
				:name="'picUrl'">
			</u-swiper>
		</view>
				
		<view class="recharge">
			<view class="title oldTextjp" oldstyle="font-size:20px">选择充值金额
			<span class="oldTextjp2 rightspan" oldstyle="font-size:16px;"  >当前余额
				<span  style="color: red;" >{{detail.balance>0?detail.balance.toFixed(2):'0.00'}}元</span>
			</span>
			<p  style="color: red;    font-size: 14px;" v-show="selectItem.amountRemark">{{selectItem.amountRemark}}代金券,退余额时将扣除已使用的优惠券金额</p>
			</view>
			<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.amountDesc?item.amountDesc:item.rechargeAmount+'元'}}
					<view class="amount" v-if="item.amountRemark">{{item.amountRemark}}</view>
					</view>
				
			</view>
			<p class="oldTextjp2" oldstyle="font-size:16px">其他充值金额</p>
		<view  style="margin-bottom: 32px;">
			
			<view 
			
			:class="otherNum? 'active' : ''"
			class="recharge-input self-stop">
				<u-input v-model="otherNum" @input="ckInput" @focus="focus" type="digit" :border="true" />
			
			
			</view>
			<view style="color: rgba(153, 153, 153, 100);
			font-size: 12px;
			text-align: left;
			font-family: AlibabaPuHui-regular;"><span style="color:red">*</span>单次充值金额不超过5000元。</view>
			
		</view>
			<view class="title oldTextjp" oldstyle="font-size:20px">选择支付方式</view>
			<view class="recharge-radio" style="padding-bottom: 170px;">
				<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 oldTextjp2" oldstyle="font-size:18px">
								{{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" v-if="show2">
				<view v-if="show2">
					<u-checkbox-group>
						<u-checkbox active-color="green" v-model="checked" shape="circle" @change="checkboxChange()"></u-checkbox>
					</u-checkbox-group>
					我已阅读并同意<span @click="gotoUrl('pages/article/details?code=CZXY')" style="color:#00B962" >《充值协议》</span>
					
				</view>
				
				<u-button
				 :class="checked?'success-btn':'nosuccess-btn'"
				shape="circle" type="success" @click="rechargeNow">
					<span>{{recordId?'充值并启动':'立即充值'}}</span>
				</u-button>
			</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>
			
			<view class="recharge-btn transactionClass" v-if="!show2">
				<u-button
				 class="success-btn"
					shape="circle" type="success" @click="gotoGz">
					<span>关注公众号</span>
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import * as API_weixin from '@/apis/weixin.js'
	import * as newsApi from '@/apis/news.js'
	
	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 {
				show1:false,
				show2:true,
				submitNum:0,
				submitNumCk:1,
				showModel:false,
				selectItem:{},
				userId: '',
				outOrderNo:'',
				detail: {},
				moneyActiveClass: 1,
				submitForm:{},
				qrCodeImg:"",
				bannerList:[],
				selectImg:null,
				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,
				projectName:"",
				recordId:"",
			}
		},
		onLoad(op) {
			this.projectName=process.car.ProjectName;
			if(op.recordId){
				this.recordId=op.recordId;
			}
		},
		onReady() {
			if (this.carhelp.getPersonInfo()) {
				this.userId = this.carhelp.getPersonInfo().id;
			}

			this.init();
			this.getBannerInfo("userinfo")
		},
		methods: {
			getBannerInfo(code){
				
				newsApi.getBannerInfo(code).then((res) => {
					
					this.bannerList =res.data;
					
					// document.getElementsByClassName("uni-swiper-wrapper")[0].parentNode.style="background-color: rgb(255, 255, 255); height: 300px;"
				 }).catch(error => {
						uni.showToast({
						
							title: error,icon: "none"
						})
				})
			},
			focus(){
				console.log(0)
				uni.pageScrollTo({
					scrollTop:999999,
					duration:0
				})
			},
			gotoGz(){
				this.carhelp.setGzDate()
					var url = process.car.gzUrl;
				window.location.href=url
				
			},
			checkSubscribe(){
				API_weixin.checkSubscribe({
					openId: this.carhelp.getOpenId() 
				}).then((res) => {
					
					if(res.data=="0"){
						this.show1=true
						
					}else{
						//this.init();
						this.show2=true;
						//this.carhelp.setGzDate() 
					}
					
					//setGzDate
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
				
			},
			confirm(){
				uni.redirectTo({
					url:"/pages/user/finance/rechargeRes?id="+this.outOrderNo
				})
			},
			ckInput(text){
				if(text.indexOf('.')>0){
					var k =text.split(".")[1]
					if(k.length>=3){
						this.$nextTick(()=>{
							text=parseFloat(text).toFixed(2);
							this.otherNum= text
						})
					}
					
				}
				var t	=Number(text);
				if(t<1){
					this.$nextTick(()=>{
						this.otherNum='';
					})
						
				}
				if(t>5000){
					this.$nextTick(()=>{
						this.otherNum=5000;
					})	
				}
				
			},
			
			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
						//(this.moneyActiveClass)
					}
					for(var i in this.moneyList){
						var item =this.moneyList[i]
						if(item.imgUrl){
							this.selectImg=item
							break
						}
					}
					uni.hideLoading()
					this.init1()
				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			},
			moneyClick(index,item) {
				this.otherNum='';
				this.moneyActiveClass = index;
				if(item){
					this.selectItem=item;
					if(item.imgUrl){
						this.selectImg=item
					}
				}
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// //(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// //(e);
			},
			checkboxChange() {
				this.checked = !this.checked;
			},
			alpy(){
				var obj={
					...this.submitForm
				}
				if(obj.amount){
					
					for(var i in this.moneyList){
						var item =this.moneyList[i]
						if(item.rechargeAmount==obj.amount){
							
							delete obj.amount; 
				
							obj.chargingMarketingId=item.id
							break
						}
					}
				}
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				Pay.alpay(obj).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(){
				var obj={
					...this.submitForm
				}
				if(obj.amount){
					
					for(var i in this.moneyList){
						var item =this.moneyList[i]
						if(item.rechargeAmount==obj.amount){
							
							delete obj.amount; 

							obj.chargingMarketingId=item.id
							break
						}
					}
				}
				//this.moneyList
				
				Pay.wxpay(obj).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
					})
 						
				})
			},
			rechargeNow() {
				if(!this.checked){
					uni.showToast({
						title:"请同意《充值协议》后进行充值"
					})
					return
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.submitForm={};
				if(!this.otherNum){
					this.submitForm.chargingMarketingId=this.selectItem.id;
				}else{
					this.submitForm.amount=this.otherNum
				}
				if (this.recordId) {
					this.submitForm.recordId = this.recordId
				
				
				}
				//(this.submitForm)
				if(this.value2=="0"){
					this.wxpy()
				}else{
					this.alpy()
				}
				
			}
		},
		onShow() {
			// this.checkSubscribe()
			if (this.isReady) {
				this.init1()
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	// 优惠
	.discounts {
	
		width: 91.4%;
		//height: 200rpx;
		margin: 16rpx auto 0 auto;
		border-radius: 8px;
		overflow: hidden;
	
		img {
			width: 100%;
			height: 80px;
		}
	}
	.rightspan{
		float: right;
	}
	.userBanner{
		margin: 16px;
	}
	::v-deep.u-radio-group {
		width: 100%;
	}

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

	::v-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;
				margin-left: 5px;
			}
		.amount {
		// width: 41.9%;
		height: 16px;
		line-height: 15px;
		border-radius: 0px 4px 0px 4px;
		background-color: #ec4530;//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: 0px;
		background-color: #FFF;
		padding-bottom: 20px;
	}

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