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

  				ListData: [],

  				currentIndex: 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;

  				})
  			},
  			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;

  				}

  			},

  			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'
  				
  				});

  			}
  		}
  	}

  </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>