H5_module/merchant/scanPay.vue

<template>
	<view>
		<!-- 个人信息 -->
		<view class="minec">
			<image :src="paymentUserInfo.avatar ? paymentUserInfo.avatar : '../merchant/static/images/user.png'" mode="aspectFill" class="user" />
			<view class="mines">
				<view class="mines_top">
					<view class="title">{{ paymentUserInfo.nickName }}</view>
				</view>
				<view class="edu">{{ paymentUserInfo.phone ? paymentUserInfo.phone : '' }}</view>
			</view>
		</view>

		<!-- 余额 -->
		<view class="card">
			<view class="card-header">
				<view :class="'money-list ddflex' + (balanceList.length == 3 || balanceList.length == 5 ? ' money-list3':'')" v-if="balanceList.length>0">
					<view class="li" v-for="(item,index) in balanceList" :key="index">
						<text>{{item.name}}</text>{{item.balance}}
					</view>
				</view>
				<block v-else>
				<view class="money-text">
					账户余额
				</view>
				<view class="money-number">{{ paymentUserInfo.balance ? paymentUserInfo.balance : '0.00' }}</view>
				</block>
			</view>
			<view class="card-center">
				<view>扣除金额</view>
				<view class="money-input">
					<text class="symbol">￥</text>
					<input disabled="true" v-model="moneyPay" type="digit" @click="open()" />
				</view>
			</view>
			<view class="card-bottom">
				<view class="notice">{{ notice }}</view>
				<view class="add-remark" @click="showPop">{{ notice ? '修改' : '添加备注' }}</view>
			</view>
		</view>
		<input-popup ref="inpurPop" @onsuccess="getContent"></input-popup>
		<cu-keyboard ref="cukeyboard" @change="change" @confirm="confirm" @hide="hide"></cu-keyboard>
	</view>
</template>

<script>
const route = require('../utils/route.js');
const req = require('../utils/request');
import inputPopup from './components/input-popup/index.vue';

export default {
	data() {
		return {
			moneyPay: '',
			notice: '',
			code: '',
			paymentUserInfo: '',
			balanceList: []
		};
	},
	components: {
		inputPopup
	},

	onLoad(opt) {
		// this.code = opt.code;
		this.code = opt.scene;
		this.paymentUserInfoRequest();
		this.open();
	},
	onUnload() {
		console.log('页面onUnload');
		req.removeStorage('paymentUserInfo_key');
	},
	onHide() {
		console.log('页面onHide');
		req.removeStorage('paymentUserInfo_key');
	},

	methods: {
		showPop() {
			this.$refs.inpurPop.showFilters();
			this.$refs.inpurPop.setContent(this.notice);
		},
		getContent(e) {
			this.notice = e;
		},

		paymentUserInfoRequest() {
			// req.getRequest('/api/v3/payment/user/info/scan', { code: this.code }, data => {
			// 	this.paymentUserInfo = data;
			// });
			if(req.getStorage('paymentUserInfo_key')){
				this.getPaymentUserInfo();
			}else{
				req.getRequest('/api/v3/payment/user/info/scan', { code: this.code }, data => {
					console.log('报错')
					this.paymentUserInfo = data;
					req.setStorage('paymentUserInfo_key',data);
					this.paymentUserInfo.balance = parseFloat(this.paymentUserInfo.balance).toFixed(2);
					if(this.paymentUserInfo.payAccountTypes&&this.paymentUserInfo.payAccountTypes.length>0){
						this.getBalance(this.paymentUserInfo.userId);
					}
				});
			}
		},
		getPaymentUserInfo(){
			this.paymentUserInfo = req.getStorage('paymentUserInfo_key');
			this.paymentUserInfo.balance = parseFloat(this.paymentUserInfo.balance).toFixed(2);
			if(this.paymentUserInfo.payAccountTypes&&this.paymentUserInfo.payAccountTypes.length>0){
				this.getBalance(this.paymentUserInfo.userId);
			}
		},
		getBalance(userId){
			req.getRequest('/api/v3/payment/getBalance',{userId: userId},data=>{
				let arr = []
				this.paymentUserInfo.payAccountTypes.map(it=>{
					data.map(its=>{
						if(it == its.code){
							arr.push(its);
						}
					})
				})
				let balance = 0;
				arr.map(it=>{
					balance += it.balance;
				})
				this.balanceList = arr;
				this.paymentUserInfo.balance = parseFloat(balance).toFixed(2);
				console.log('balance==',this.paymentUserInfo.balance)
			})
		},
		change(e) {
			this.moneyPay = e;
			console.log('数字改变', e);
		},
		open() {
			console.log('打开键盘');
			this.$refs.cukeyboard.open();
			this.$refs.cukeyboard.value = this.moneyPay;
		},
		confirm(e) {
			console.log('付款', e);
			let userInfo = req.getStorage('userInfo');
			if(!userInfo.isStaff) return req.msg('暂无权限');
			if (Number(this.moneyPay) > Number(this.paymentUserInfo.balance)) {
				req.msg('余额不足扣除金额');
				return;
			}
			if (!this.moneyPay && this.moneyPay <= 0) {
				req.msg('请输入扣除金额');
				return;
			}
			this.hide();
			this.pay();
		},
		hide() {
			console.log('关闭键盘');
		},

		pay() {
			var tha = this;
			console.log('支付')
			req.postRequest(
				'/api/v3/payment/deduction',
				{ money: this.moneyPay, note: this.notice, userId: this.paymentUserInfo.userId,code:this.code },
				data => {
					console.log('data==',data)
					uni.showModal({
						title: '提示',
						content: '成功扣除' + tha.moneyPay + '元',
						confirmText: '确定',
						showCancel: false,
						success(res) {
							if (res.confirm) {
								uni.navigateBack();
							}
						}
					});
					this.paymentUserInfo.balance = parseFloat(this.paymentUserInfo.balance - this.moneyPay).toFixed(2);
				},
				true
			);
		}
	}
};
</script>

<style>
.minec {
	position: relative;
	z-index: 1;
	display: flex;
	display: -webkit-flex;
	align-items: center;
	margin: 30rpx;
}

.user {
	display: block;
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background: #fff;
	margin-right: 20rpx;
}

.mines {
	flex: 1;
	-webkit-flex: 1;
	margin-right: 20rpx;
}

.mines_top {
	width: 204px;
	display: flex;
	align-items: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.edu {
	display: block;
	font-size: 24rpx;
	color: #999999;
	margin: 5px 0 0;
}

.card {
	margin: 30rpx;
	border-radius: 20rpx 20rpx 0 0;
}

.card .card-header {
	border-radius: 30rpx 30rpx 0 0;
	background-color: #0091fe;
	color: #ffffff;
	padding: 30rpx 40rpx;
}

.card .card-header .money-text {
	font-size: 28rpx;
}

.money-text text{margin-right: 20rpx;}

.card .card-header .money-number {
	font-size: 46rpx;
}

.card .card-center {
	background-color: #fff;
	padding: 30rpx 40rpx;
}

.card .card-center .money-input {
	display: flex;
	border-bottom: 1px solid #dedede;
	padding: 30rpx 0;
}

.card .card-center .money-input .symbol {
	color: #414149;
	font-size: 65rpx;
	font-weight: bold;
	margin-right: 10rpx;
}

.card .card-center .money-input input {
	color: #414149;
	font-size: 90rpx;
	font-weight: bold;
	height: 120rpx;
}

.card .card-bottom {
	background-color: #fff;
	padding: 10rpx 40rpx;
	height: 450rpx;
}
.card .card-bottom .notice {
	white-space: pre-wrap;
}
.card .add-remark {
	font-size: 24rpx;
	color: #587fa2;
	margin-top: 10rpx;
	display: inline-block;
}
.money-list{flex-wrap: wrap;}
.money-list .li{font-size: 42rpx;color: #fff;width: 50%;padding: 10rpx 0;}
.money-list3 .li{width: 33.33%;}
.money-list .li text{display: block;font-size: 28rpx;opacity: .8;margin-bottom: 15rpx;}
</style>