H5_module/mine/payCode/payCode.vue

<template>
	<view :style="[mainStyle]" v-if="isShowPage" class="pay-page">
		<!-- 码 -->
		<view class="card">
			<!-- 名称 -->
			<view class="card-header ddflex"><image :src="userInfos.avatar?userInfos.avatar:'../../static/pages/images/userimg.png'"></image>{{ userInfos.nickName }}</view>
			<!-- 码 -->
			<view class="card-code">
				<!-- 条形码 -->
				<!-- <view class="code1"><image class="code-image" :src="payment.barUri"></image></view> -->
				<!-- 二维码 -->
				<!-- <view class="code2"><image class="code-image" :src="payment.qrCodeUri"></image></view> -->
				<view class="code2"><image class="code-image" :src="payment.qrCodeUri"></image></view>
				<!-- <view class="code2"><image class="code-image" :src="replaceAll(payment.appletCodeUri,'https://apitest.tongyu99.com','http://192.168.110.59:8098')"></image></view> -->
				<!-- 刷新 -->
				<view class="refresh ddflex" @click="paymentInfo()">
					<image :class="'refresh-icon' + (isRefresh?' active':'')" src="../static/mine/images/refresh.png"></image>
					点击刷新付款码
				</view>
			</view>
			<view class="line"></view>
			<!-- 余额 -->
			<view class="card-bottom">
				<view class="ddflex" @click="showPop">
					<view><image class="money-icon" src="../static/mine/images/money.png"></image></view>
					<view class="ddflex fflex" style="align-items: flex-end;">
						<view class="fflex">
							<viwe class="money-number">{{ payment.balance ? payment.balance : '0.00' }}</viwe>
							<view class="money-text ddflex">账户余额<view class="cz-btn ddflex" @click.stop="jumpUrl('/wallet/index/index')">去充值<image src="../static/mine/images/cz_ico.png"></image></view></view>
						</view>
					<image src="../../static/pages/images/bico.png" class="bico"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="ceng" v-if="isShowPop" @click="hidePop"></view>
		<view class="popup" :style="'bottom:' + popBottom">
			<view class="pop-tit">选择优先支付方式 <text>如付款失败将尝试使用其他支付方式完成付款</text></view>
			<view class="pop-con">
				<view class="li ddflex" v-for="(item,index) in balanceList" :key="index" @click="switchType(index)">
					<image :src="'../static/mine/images/money_' + item.code + '.png'" class="money-ico"></image>
					<view class="fflex">{{item.name}}（剩余￥{{item.balance}}）</view>
					<image :src="'../static/mine/images/' + (item.isCheck?'money_gou_h.png':'money_gou.png')" class="money-gou"></image>
				</view>
			</view>
			<view class="pop-btn ddflex">
				<view class="cancel" @click="hidePop">取消</view>
				<view class="confirm" @click="confirm()">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
const route = require('../../utils/route.js');
const req = require('../../utils/request');
const app = getApp();

export default {
	data() {
		return {
			mainStyle: app.globalData.mainStyle,
			isShowPage: false,
			timer: [],
			money: '',
			userInfos: {},
			payment: '',
			isRefresh: false,
			isShowPop: false,
			popBottom: '-100%',
			balanceList: [],//用户可划款账户
			payAccountTypes: [],//用户选择的划款账户
		};
	},

	onLoad() {
		this.userInfos = req.getStorage('userInfo');
		this.paymentInfo();
		this.getBalance();

		//4.8分钟后刷新
		this.timer = setInterval(() => {
			this.paymentInfo();
		}, 1000 * 60 * 4.8);
	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function() {
		// this.extendNew();
	},

	onUnload() {
		if (this.timer) clearInterval(this.timer);
	},

	methods: {
		// 查询用户余额
		// extendNew() {
		// 	route.extendNew({}, res => {
		// 		this.money = res;
		// 	});
		// },
		getBalance(){
			req.getRequest('/api/v3/payment/getBalance',{},data=>{
				data.map(it=>{
					it.isCheck = false;
					return it;
				})
				this.balanceList = data;
			})
		},
		showPop(){
			this.isShowPop = true;
			this.popBottom = 0
		},
		hidePop(){
			this.isShowPop = false;
			this.popBottom = '-100%'
			this.balanceList.map(it=>{
				it.isCheck = false;
				return it;
			})
		},
		switchType(index){
			this.balanceList[index].isCheck = !this.balanceList[index].isCheck
		},
		confirm(){
			let arr = [];
			this.balanceList.filter(it=>{return it.isCheck}).map(it=>{
				arr.push(it.code);
			})
			this.payAccountTypes = arr;
			this.paymentInfo();
			this.isShowPop = false;
			this.popBottom = '-100%'
		},
		replaceAll(str, find, replace) {
		  return str.replace(find, replace);
		},
		paymentInfo() {
			this.isRefresh = true;
			let params = {}
			console.log('payAccountTypes==',this.payAccountTypes)
			if(this.payAccountTypes&&this.payAccountTypes.length>0){
				params.payAccountTypes = JSON.stringify(this.payAccountTypes)
			}else delete params.payAccountTypes;
			params.appletCodePath = 'merchant/scanPay';
			req.getRequest('/api/v3/payment/user/info', params, data => {
				this.payment = data;
				this.isRefresh = false;
				this.openCode(); //设置亮度为最高
				this.isShowPage = true;
			});
		},

		//获取屏幕亮度
		getScreenBrightness() {
			//注意uni.getScreenBrightness为异步接口，所以需要使用Promise封装为异步执行
			return new Promise(function(resolve, reject) {
				uni.getScreenBrightness({
					success: function(res) {
						// console.log('屏幕亮度值：' + res.value);
						resolve(res.value);
					},
					fail: function(err) {
						reject(0.5); //如果获取失败设置亮度为中间值
					}
				});
			});
		},

		//打开二维码
		openCode() {
			this.getScreenBrightness()
				.then(function(res) {
					// console.log('当前亮度为', res);
					uni.setStorageSync('Brightness_key', res);
				})
				.catch(err => {
					uni.setStorageSync('Brightness_key', err);
				});
			this.updateScreenBrightness(1); //设置亮度为最高
		},

		//修改屏幕亮度
		updateScreenBrightness(valueNum) {
			uni.setScreenBrightness({
				value: valueNum,
				success: function() {
					console.log('成功修改屏幕亮度为', valueNum);
				}
			});
		},
		//关闭二维码
		closeCode() {
			let Brightness = uni.getStorageSync('Brightness_key');
			this.updateScreenBrightness(Brightness); //把屏幕亮度调回以前亮度
			console.log('closeCode成功修改屏幕亮度为', Brightness);
		},
		jumpUrl(url){
			uni.navigateTo({
				url: url
			})
		}
	},

	beforeDestroy() {
		this.closeCode();
	}
};
</script>

<style>
@import './payCode.css';
</style>