pages/moneyRecharge/moneyRecharge.vue

<template>
	<view>
		<view class="rechargeTop">
			<view class="toDetail uni-list-cell-pd uni-right" @click="detailCell">明细 ></view>
			<view class="rechargeNum uni-center">¥{{acctBalance | toFixed2 }}</view>
		</view>
		<uni-section title="充值金额(元)" type="line" padding>
			<uni-grid :column="3" :highlight="true" :showBorder="false" :square="false" @change="change">
				<uni-grid-item v-for="(item, index) in ListData" :index="index" :key="index">
					<view class="grid-item-box" style="background-color: #fff;">
						<view class="text" :class="currentIndex==index?'itemActive':''">
							{{item.rechargeCode | ortherToFixed}}
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
			<view class="uni-list-cell-pd" v-show="isShowInput">
				<input class="payInut" type="number" v-model="rechargeNum" @input="checkNum" :maxlength="maxlength"
					placeholder=" 请输入金额">
			</view>
		</uni-section>
		<view class="uni-list-cell-pd">
			温馨提示：暂不支持退款，请谨慎选择充值金额！
		</view>
		<view class="border-bg"></view>
		<view class="order-title">
			支付方法
		</view>
		<view class="order-line"></view>
		<view class="orderwaysview">
			<image src="../../static/orderInfo/orderinfo-wechat.png" class="orderways"></image>
			<view class="order-info" style="margin-left: 8px;">
				微信支付
			</view>
			<image src="../../static/orderInfo/orderinfo-sel.png" class="orderwaysSel"></image>
		</view>
		<button @click="payClick" class="button-sp-area" type="primary" plain="true">确认充值</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				acctBalance: '0.00',
				ListData: [],
				currentIndex: 0,
				rechargeFee: 0,
				isShowInput: false,
				rechargeNum: '',
				maxlength: 6 //默认一个长度 
			}
		},
		onLoad() {
		},
		mounted() {
			this.recharge();
			this.rechargeList();
		},
		methods: {
			recharge() {
				let that = this;
				that.$myRequest({
					url: that.$common.walletAccount,
					method: 'POST',
					data: that.$common.requestSign()
				}).then(res => {
					console.log(res)
					let data = res.data;
					that.acctBalance = data.acctBalance;
				})
			},
			rechargeList() {
				let that = this;
				that.$myRequest({
					url: that.$common.rechargeList,
					method: 'POST',
					data: that.$common.requestSign()
				}).then(res => {
					console.log(res)
					let data = res.data;
					that.ListData = data;
					that.rechargeFee = that.ListData[0].rechargeCode
				})
			},
			change(e) {
				let that = this;
				let {
					index
				} = e.detail;
				that.currentIndex = index;
				if (that.ListData[index].rechargeCode == -1) {
					console.log('1')
					that.isShowInput = true;
					that.rechargeNum = ''
				} else {
					that.isShowInput = false;
					that.rechargeFee = that.ListData[index].rechargeCode;
				}
			},
			checkNum(e) {
				let value = e.detail.value;
				let dot = value.indexOf('.'); //包含小数点
				let reg = /^[0-9]+$/; //正整数
				if (dot > -1) {
					this.maxlength = dot + 3; //长度是小数点后两位
					if (value.length > dot + 3) {}
				}
				if (reg.test(value)) { //如果是正整数不包含小数点
					this.maxlength = 6;
				}
			},
			detailCell() {
				uni.navigateTo({
					url: '../rechargeDetail/rechargeDetail'
				});
			},
			payClick() {
				let that = this;
				let payMoney;
				if (that.isShowInput) {
					payMoney = that.rechargeNum;
				} else {
					payMoney = that.rechargeFee;
				}
				let data = {
					rechargeType: '2',
					acctType: '1',
					paySrcType: '204',
					payType:'12',
					realPayMoney: payMoney,
					rechargeFee: payMoney,
				};
				console.log(data)
				that.$myRequest({
					url: that.$common.publicUnifiedOrder,
					method: 'POST',
					data: that.$common.requestSign(data)
				}).then(res => {
					
					console.log(res)
					that.MakeWxPay(res)
				})
			},
			// 调用微信支付
			MakeWxPay(mydata) {
				console.log('wxpay')
				var me = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: mydata.timeStamp,
					//随机字符串，长度为32个字符以下
					nonceStr: mydata.nonceStr,
					//统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=xx。
					package: mydata.package,
					signType: mydata.signType,
					paySign: mydata.paySign,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
						uni.showModal({
							title: '提示',
							content: '支付失败/取消',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('支付失败');
								}
							}
						});
					}
				});
			},
		}
	}
</script>
<style scoped lang="scss">
	.rechargeTop {
		height: 100px;
		background: #007AFF;
		color: #fff;
		position: relative;
	}
	.toDetail {
		/*text-align: right;*/
	}
	.rechargeNum {
		font-size: 30px;
	}
	.text {
		width: 80%;
		height: 60px;
		line-height: 60px;
		margin: 10px auto;
		border: 1px solid #ccc;
		text-align: center;
	}
	.itemActive {
		background: #f0ad4e;
	}
	.order-title {
		font-size: 18px;
		margin-left: 16px;
		margin-top: 15px;
		font-weight: bold;
		color: #404040;
	}
	.order-info {
		font-size: 14px;
		margin-left: 15px;
		margin-top: 12px;
		color: #404040;
	}
	.order-line {
		background: #D9D9D9;
		height: 1px;
		margin-top: 12px;
		margin-left: 15px;
		padding: 0px;
		overflow: hidden;
		/* 透明度 */
		opacity: 0.5;
	}
	.order-line-bold {
		background: #FAFAFA;
		height: 12px;
		margin-top: 12px;
		padding: 0px;
		overflow: hidden;
	}
	.flex-row-justify-between {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.flex-row-justify-end {
		display: flex;
		flex-direction: row;
		/* 水平对齐*/
		align-items: baseline;
	}
	.order-discount {
		color: #C8C7CC;
		margin-right: 20 upx;
		/* margin-right: 12px ; */
		/* margin-top:12px ; */
	}
	.orderwaysview {
		display: flex;
		flex-direction: row;
	}
	.orderways {
		width: 18px;
		height: 18px;
		margin-left: 15px;
		margin-top: 14px;
	}
	.orderwaysSel {
		width: 16px;
		height: 16px;
		margin-left: auto;
		margin-right: 14px;
		margin-top: 14px;
		/* justify-content:flex-end; */
	}
	.button-sp-area {
		margin: 0 auto;
		width: 60%;
		margin-top: 40px;
	}
	.payInut {
		display: flex;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
		border: 1px solid #DCDFE6;
		border-radius: 4px;
		min-height: 36px;
		padding-left: 10px;
	}
</style>