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"   @click="clickBanner"
				: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: #FF5722;margin-left: 8px;" >{{detail.balance>0?detail.balance.toFixed(2):'0.00'}}元</span>
			</span>
		</view>
			<view class="rechargeMain">
				<template v-for="(item,index) in moneyList">
					
				
				<view class="tip-box" v-if="index==4&&userChargingAmountObj.type">
					<template v-if="userChargingAmountObj.type==1">
						新用户参与充值送折扣卡活动推荐充值<span>1000元</span>，预计可省 <span> 133元</span>。

					</template>
					<template v-else-if="userChargingAmountObj.type==2">
						按您每月充电花费，半年将超<span>{{userChargingAmountObj.money}}元</span>，参与充值送折扣卡活动推荐充值 <span>{{userChargingAmountMethod(userChargingAmountObj).num1}}元</span>，预计可省 <span>{{userChargingAmountMethod(userChargingAmountObj).num3}}元</span>。

					</template>
					<template v-else>
						近半年您已花费<span>{{userChargingAmountObj.money}}元</span>充电，参与充值送折扣卡活动推荐充值 <span> {{userChargingAmountMethod(userChargingAmountObj).num1}}元</span>，预计可省 <span> {{userChargingAmountMethod(userChargingAmountObj).num3}}元</span>。

					</template>
				
				</view>
				
				<view class="recharge-item"   :class="{
					active:otherNum==item.rechargeAmount||moneyActiveClass == item.id ,
					'recharge-item-rk':item.amountRemark
				}"
					:key="item.id" @click="moneyClick(item.id,item)">
					{{item.amountDesc?item.amountDesc:item.rechargeAmount+'元'}}
					<view class="item-rk" v-if="item.amountRemark">送<span class="item-rk-span" >{{item.amountRemarkNum}}</span>折卡</view>
					</view>
					
				</template>
				<p  style="   font-size: 14px;" v-show="selectItem.amountRemark">
					充值满
					<span style="color: #ff8600;">{{selectItem.amountDesc}}</span>立送服务费<span style="color: #ff8600;">{{selectItem.amountRemarkNum}}折半年卡</span>1张（<span style="color: #ff8600;">有效期180天，不限充电度数</span>）<span v-if="selectItem.amountRemarkSf">和{{selectItem.amountRemarkSf}}身份</span>，可省约<span style="color: #ff8600;">{{userChargingAmountMethod({
						money:selectItem.rechargeAmount
					}).num3}}元</span>。活动所充金额仅用于支付本平台充电费用（含电费和服务费），不可转赠、提现、退款,
					<span style="color: #ff8600;margin-left: 16px;" @click="gotoUrl('pages/temporary/activity20250501?source=99',1)">点击查看活动详情</span>
				</p>
			</view>
			
			
			
			<p class="oldTextjp2" oldstyle="font-size:16px">其他充值金额</p>
		<view  style="margin-bottom: 32px;">
			
			<view 
			
			:class="otherNum&&selectItem.rechargeAmount!=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'
	import * as API_index from '@/apis/index.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:"",
				userChargingAmountObj:{
					
				}
			}
		},
		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: {
			clickBanner(index, bl, modout) {
				var uurl = "";
				var mod = this.bannerList[index]
				var mod = {}
				if (modout) {
					mod = modout;
				}else{
					mod =this.bannerList[index]
				}
				mod.clickUrl = mod.linkUrl
			
				if (mod.linkPicUrl && !bl) {
			
					this.showOss = true;
					this.showOssImg = mod.linkPicUrl;
					this.showOssIndex = index;
			
				} else if (mod.clickUrl == null) {
			
				} else if (mod.clickUrl.indexOf('http') == 0) {
			
					window.location = mod.clickUrl + uurl;
				} else if (mod.clickUrl.slice(-5) == 'login' && this.userId) {
			
				} else if (mod.clickUrl.indexOf('#/') == 0) {
					if (mod.clickUrl.indexOf("?") == -1) {
						mod.clickUrl += '?';
					}
					var url = mod.clickUrl.split("#")[1]
					//window.location = mod.clickUrl;
					uni.navigateTo({
						url: url + uurl
					})
				} else if (mod.clickUrl == '#' || mod.clickUrl == '') {
			
				} else {
					uni.navigateTo({
						url: mod.clickUrl + uurl
					})
				}
			},
			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;
					})	
				}
				this.moneyActiveClass=''
				for(var i in this.moneyList){
					var item=this.moneyList[i]
					if(this.otherNum==item.rechargeAmount){
						this.moneyClick(item.id,item)
					}
				}
			},
			
			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
					})
				})
				
				API_index.userChargingAmount().then((res) => {
					this.userChargingAmountObj = res.data
					
				}).catch(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)
						this.moneyClick( this.moneyList[0].id,this.moneyList[0])
					}
					for(var i in this.moneyList){
						var item =this.moneyList[i]
						if(item.imgUrl&&!this.selectImg){
							this.selectImg=item
						}
						if(item.rechargeAmount==100){
							// this.selectItem = this.moneyList[i];
							// this.moneyActiveClass = this.moneyList[i].id
							this.moneyClick(item.id,item)
						}
						if(item.amountRemark&&item.marketingCardList.length){
							var mk=item.marketingCardList[0]
							
							item.amountRemarkNum=mk.serviceFeeDiscountRate/10
							item.amountRemarkHtml=item.amountRemark.substring(item.amountRemark.indexOf('折'))
							item.amountRemarkSf=mk.giftMemberLevelStr
							
							
						}
						
					}
					uni.hideLoading()
					this.init1()
				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			},
			moneyClick(id,item) {
				this.otherNum=item.rechargeAmount;
				this.moneyActiveClass = id;
				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
				}
				if(!this.otherNum){
					uni.showToast({
						title:"请选择充值金额"
					})
					return
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.submitForm={};
				
				
				if(this.moneyActiveClass){
					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;
		    color: rgba(102, 102, 102, 1);
		    font-weight: 400;
	}
	.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-around;
		//	justify-content: space-between;
			margin-top: 12px;
			margin-bottom: 20px;

			.recharge-item {
				width: 23%;
				border: 1px solid #e3e3e3;
				padding: 20rpx 0;
				border-radius: 4px;
				text-align: center;
				margin-bottom: 10px;
				font-size: 32rpx;
				position: relative;
				font-weight: bold;
				//margin-left: 5px;
			}
			.recharge-item-rk{
				width: 23%;
				padding-bottom: 0;
			
				.item-rk{
						font-weight: 400;
				//	margin-top: 20rpx;
					padding: 8rpx 0;
				//	background-color: rgba(232, 232, 232, 1);
					color: rgba(51, 51, 51, 1);
					font-size: 24rpx;
				}
				.item-rk-span{
					margin:0 4px ;
					color: #ec4530;
				}
			}
		.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;
				.item-rk{
					//background-color: #53B56B;
					color:#53B56B
				}
				.item-rk-span{
					color: #53B56B
				}
			}
		}
	}



	.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;
	}
	
	 .tip-box {
	            position: relative;
	            background-color: #FEF8E9;
	            border: 1px solid #f5a623;
	            border-radius: 8px;
	            padding: 10px 15px;
	            color: #333;
	            width: 400px;
				 margin-bottom: 36rpx;
	        }
	
	       .tip-box::before,
	       .tip-box::after {
	            content: "";
	            position: absolute;
	            top: 100%;
	            left: 20px;
	            border-left: 10px solid transparent;
	            border-right: 10px solid transparent;
	        }
	
	       .tip-box::before {
	            border-top: 10px solid #f5a623; /* 与提示框边框颜色一致 */
	            margin-top: 1px;
	        }
	
	       .tip-box::after {
	            border-top: 10px solid #FEF8E9; /* 白色填充 */
	            margin-top: 0;
	            transform: translateY(-1px);
	        }
	
	       .tip-box span {
	            color: #ec4530;
	            font-weight: bold;
	        }
	 
</style>