DX-xcx/pages/amount/index.vue

<template>
  <div class="mianBox">
	<!-- <van-row class="balance">
		<van-col span="24">余额：32.00元</van-col>
	</van-row> -->
	<van-row class="contentBox">
		<van-row class="input_wrap">
			<span>￥</span>
			<input 
				type="number"
				placeholder="请输入充值金额（ 元 ）" 
				class="input" 
				@input="Input"
				v-model="data.money"
			/>
		</van-row>
	</van-row>
    <van-row class="select_amount"  >
        <van-col span="8" @tap="btn50"  :style="state1" data="50" >50</van-col>
        <van-col style="margin-left:8%" span="8" @tap="btn100"  :style="state2" data="100">100</van-col>
        <van-col style="margin-left:8%" span="8" @tap="btn150"  :style="state3" data="150">150</van-col>
        <van-col span="8" @tap="btn200"  :style="state4" data="200">200</van-col>
        <van-col style="margin-left:8%" span="8" @tap="btn250"  :style="state5" data="250">250</van-col>
        <van-col style="margin-left:8%" span="8" @tap="btn300"  :style="state6" data="300">300</van-col>
    </van-row>
    <van-row class="pay_money" type="flex" justify="space-around">
        <van-col span="12" class="left">到账金额</van-col>
        <van-col span="12" class="right">￥{{data.money}}元</van-col>
    </van-row>
	
    <!-- <van-row class="tip">
		服务费 ￥0元<br>
		费率 0%
    </van-row> -->
    <van-button class="amount"  color="#F22E3C" @tap="recharge">立即充值</van-button>
	<van-dialog id="van-dialog" />
	<van-toast id="van-toast" />
   <!-- <van-loading size="24px" v-if = "loading" vertical style="z-index:999999;position:fixed;top:40%;left:0;right:0;" >加载中...</van-loading>
    <van-overlay :show="loading"  style="z-index:100;position:fixed"/> -->
  </div>
</template>

<script>
import Toast from '../../wxcomponents/vant/weapp/dist/toast/toast';
import Dialog from '../../wxcomponents/vant/weapp/dist/dialog/dialog'
export default {
  data() {
    return {
      show: false,
      loading: false,
      overlayShow: false,
      env:null, //识别是否为扫描用户进入,以便直接进入支付跳转
      state1:"color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      state2:"color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      state3:"color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      state4:"color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      state5:"color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      state6:"color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
	  data:{
		  money: "0",
		  openid:null
	  }
    };
  },
  watch: {
    money(val) {
      // if (/^0[1-9]/.test(val)) {
      //   this.data.money = val.substring(1);
      // }
    },
  },
  components: {
    // [Field.name]: Field,
    // [NumberKeyboard.name]: NumberKeyboard,
    // [Dialog.name]: Dialog,
    // [Toast.name]: Toast,
  },
  onLoad(options){
	
  },
  created(){
	let _this = this
    uni.getStorage({
    	key: 'openid',
    	success: function (res) {
    		_this.data.openid = res.data
    	}
    });
  },
	methods: {
		recharge(){
			if(this.data.money && this.data.money != 0 &&  this.data.money != "0.00"){
				if(this.data.money.toString().indexOf(".")<1){
					this.data.money = this.data.money + ".00"
				}
				if(this.data.openid){
					//console.log(`"去支付页1"${JSON.stringify(this.data)}`)
					uni.navigateTo({
						url: `../order/index?params=${JSON.stringify(this.data)}`
					});
				}else{
					//console.log(`"去支付页2"${JSON.stringify(this.data)}`)
					uni.navigateTo({
					    url: `../login/index?params=${JSON.stringify(this.data)}`
					});
				}
			}else{
				Toast('支付金额不能为空或0元');
			}
		},
	Input(e){
		let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
		if (!val) {
			this.amount = '';
			return
		}
		var reg = /[^\d.]/g
	
		// 只能是数字和小数点，不能是其他输入
		val = val.replace(reg, "")
		// // 保证第一位只能是数字，不能是点
		val = val.replace(/^\./g, "");
		// // 小数只能出现1位
		val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
		// // 小数点后面保留2位
		val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
		if(val.indexOf("0") == 0){
			if(val.length == 2){
				val = "0."
			}
		}
		this.$nextTick(() => {
			this.data.money = val;
		})
		this.state1 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
		this.state2 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
		this.state3 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
		this.state4 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
		this.state5 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
		this.state6 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
		this.data.money = this.data.money + "";
	},

    jumpMode(){
		//console.log(this.data.money)
		if(this.data.money && this.data.money != 0 &&  this.data.money != "0.00"){
			//this.pay(this.data.money, "A01", "3")
		}else{
			Toast('支付金额不能为空或0元');
			Dialog.alert({
				context: this,   // 增加this可用
				selector:"#van-dialog",//选择器
				title: '提示',
				message: '充值金额不能为0元！'
			}).then(() => {
			  // on close
			});
		}
    },
    // recharge(){
    //   this.jumpMode()
    // },
    btn50() {
      this.state1 = "color:#fff;background:rgba(242, 46, 60, 1);",
      this.state2 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state3 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state4 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state5 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state6 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.data.money = 50
    },
    btn100() {
      this.state1 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state2 = "color:#fff;background: rgba(242, 46, 60, 1);",
      this.state3 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state4 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state5 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state6 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.data.money = 100
    },
    btn150() {
      this.state1 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state2 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state3 = "color:#fff;background: rgba(242, 46, 60, 1);",
      this.state4 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state5 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state6 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.data.money = 150
    },
    btn200() {
      this.state1 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state2 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state3 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state4 = "color:#fff;background: rgba(242, 46, 60, 1);",
      this.state5 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state6 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.data.money = 200
    },
    btn250() {
      this.state1 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state2 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state3 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state4 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state5 = "color:#fff;background: rgba(242, 46, 60, 1);",
      this.state6 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.data.money = 250
    },
    btn300() {
      this.state1 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state2 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state3 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state4 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state5 = "color:#000;background: #fff;border:1px solid rgba(242, 46, 60, 1);",
      this.state6 = "color:#fff;background: rgba(242, 46, 60, 1);",
      this.data.money = 300
    },
  },
};
</script>
<style lang="scss" scoped>
.mianBox {
	width: 90%;
	padding: 0 5% 0 5%;
	height: 100%;
	position: absolute;
	// .balance{
	// 	font-size: 16px;
	// 	margin-top:20px;
	// 	display: block;
	// 	/deep/ .van-col{
	// 		color:red;
	// 		display: block;
	// 	}
	// }
	.contentBox {
		width: 90%;
		position: absolute;
		background-color: orange !important;
		.input_wrap{
			width:100%;
			box-sizing: border-box;
			border:1px solid #E6E6E6;
			position: absolute;
			margin-top:20px;
			span{
				font-size: 20px;
				margin-left:10px;
				color:rgba(242, 46, 60, 1);
				display: inline-block;
				vertical-align: middle;
			}
			input{
				color:#000;
				width:70%;
				padding:8px 10px; 
				display: inline-block;
				vertical-align: middle;
			}
			::placeholder{
				color:#000000;
			}
		}
	}
	.select_amount{
		width:100%;
		margin-top:60px;
		display: block;
		text-align: center;
		/deep/ van-col{
			padding:10px 0;
			background-color: #ccc;
			color:#000;
			text-align: center;
			font-size: 16px;
			border-radius: 6px;
			margin-top:20px;
			float:left;
			width:28%;
			box-sizing: border-box;
			border:1px solid transparent;
		}
		.van-col.active{
			background: rgba(242, 46, 60, 1);
			color:#fff;
		}
		/deep/ .van-col{
			text-align: center !important;
			width:100%;
			display: block;
			
		}
	}
	.pay_money{
	    font-size: 16px;
	    margin:15px 0;
		display: block;
	    .left{
	      text-align: left;
	    }
	    .right{
	      text-align: right;
	      color: rgba(242, 46, 60, 1);
	    }
	}
	.tip{
		font-size: 14px;
		color: #CCC;
	}
	/deep/ .van-button{
		border-radius: 6px;
		width: 100% !important;
	}
	.amount{
		position: absolute;
		bottom: 25px;
		width:90%;
		height: 50px;
		font-size: 18px;
		border-radius: 10px;
	}
	.van-field__label{
		color:rgba(242, 46, 60, 1) !important;
	}
}

</style>