BJ_web_developers / jy_parkingOS

  <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',

  				wxopenId: '',

  				ListData: [],

  				currentIndex: 0,

  				rechargeFee: 0,

  				isShowInput: false,

  				rechargeNum: '',

  				maxlength: 6 //默认一个长度 

  			}
  		},
  		onLoad() {

  			uni.setStorageSync("wxCode", '')
  			this.getCode();
  			this.recharge();
  			this.rechargeList();
  			

  
  		},
  		mounted() {

  		},

  		onShow() {
  		 
  		},

  		methods: {

  			getCode() {
  				uni.login({
  					provider: 'weixin',
  					success: function(loginRes) {
  						console.log('获取微信code-loginRes.code: ' + loginRes.code);
  						uni.setStorageSync("wxCode", loginRes.code)
  
  					}
  				});
  			},
  			getOpenID() {
  				let that = this;
  				let code = uni.getStorageSync("wxCode");
  				console.log(code)
  				let data = {
  					appId: that.$common.hs_wxPay_appId,
  					// appId:"wxadb8caee05ab2981",
  					code: code,
  
  				};
  				that.$myRequest({
  					url: that.$common.getOpenIdByCode,
  					method: 'POST',
  					data: data
  				}).then(res => {
  
  
  					let data = res.data;
  					that.wxopenId = data.openid;
  					console.log(data.openid)
  					that.wxPayOrder()
  				})
  			},

  			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;
  				that.getOpenID()

  			},
  			wxPayOrder(){

  				let that = this;
  				let payMoney;
  				if (that.isShowInput) {

  					payMoney = that.rechargeNum*100;

  				} else {
  					payMoney = that.rechargeFee;
  				}

  				console.log(that.wxopenId)

  				let data = {

  					openId: that.wxopenId,

  					rechargeType: '2',
  					acctType: '1',
  					paySrcType: '204',

  					payType: '12',

  					realPayMoney: payMoney.toString(),
  					rechargeFee: payMoney.toString(),

  				};
  				console.log(data)
  				that.$myRequest({
  					url: that.$common.publicUnifiedOrder,
  					method: 'POST',
  					data: that.$common.requestSign(data)
  				}).then(res => {

            var mydata = res.data;
            console.log(mydata);
  					that.MakeWxPay(mydata)

  				})
  			},
  			// 调用微信支付
  			MakeWxPay(mydata) {

  				console.log(mydata)

  				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>