1hjz-h5/src/view/put-money.vue

<template>
    <div class="put-money">
		<div class="page-top">
			<a @click="goBack()"><img src="../assets/images/my-money/left.png"/></a>
			<span>提现申请</span>
		</div>
        <div class="page-content">
            <div class="content-box">
                <div class="account">
                    <div>
                        <span>到账账号：</span>
                        <img src="../assets/images/put-money/money-icon.png" alt="">
                        <span>微信钱包零钱</span>
                    </div>
                    <p>1-3个工作日到账</p>
                </div>
                <div class="cash">
                    <div class="cash-cue">提现现金 <span v-bind:class="{ active: isActive }">{{inputCue}}</span></div>
                    <label for="" class="money">
                        <span>￥</span>
                        <input type="text" placeholder="输入现金金额" v-model="inputVal" >
                    </label>
                    <p>可提现余额：<span>{{currentAmount}}</span></p>
                    <button  v-bind:class="{ ative: isActive }" @click="submit()">提交申请</button>
                </div>
            </div>
        </div>

        <!--弹出框-->
        <!--提现上限-->
        <div id="upper-limit" style="display:none">
            <img src="../assets/images/put-money/cue.png" alt="">
            <p>已达本月提现5次上限</p>
        </div>    

    </div>  

</template>

<script>
    import putMoney from "../models/put-money-model.js";
    import  { Alert,Toast } from 'vux'
    import configs from '../configs';
    var locationUrl = configs.locationUrl;
    export default{
        data() {
			return {
                //提现金额验证提示
                inputCue : '(请输入整数金额)',
                //默认一开始输入款的值不符合验证规则
                isActive:false,
                inputVal: null,
                //余额
                currentAmount: 0,
			}
        },
        components: {
            Toast,
        },
        watch:{
            //验证输入框的值
            inputVal: function (val) {
                var rule = /^[1-9]\d*$/;
                if (!rule.test(val)) {
                   this.inputCue = '( 请输入正整数金额！)'
                   this.inputVal = ''
                   this.isActive = false
                   return
                }else {
                    this.isActive = true;
                    this.inputCue = ''
                }
            }
        },
        methods:{
            //提交申请
            submit() {   
                if(this.isActive) {                            
                    putMoney.putMoney(
                        {amount:this.inputVal*100}
                    ).then(res => {
                        if (res.code == 0){
                            this.$router.push({path:'/put-money-success'});
                        } else if (res.code == 666) {
                            this.$vux.toast.text(res.msg,'middle')
                            setTimeout(function () {
                                window.location.href = locationUrl + '/mall/web/user/login?callback=' + encodeURIComponent(window.location.href);
                            }, 1000);
                        } else {
                            this.$vux.toast.text(res.msg,'middle')
                        }
                        // this.$vux.toast.text(res)
                    })
                }
            },
            //返回上一页
            goBack() {
                history.go(-1)
            },
            //获取链接参数
			getParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");   
                var url = window.location.href 
                url = window.location.href.substring(url.indexOf('?')+1,url.length)
                var r = url.match(reg);
                if (r != null) return unescape(r[2]);
                return null;
			}		
        },       
        mounted() {
            //获取余额值
            this.currentAmount = (this.getParam("currentAmount")/100).toFixed(2)
            //this.$vux.toast.text(this.currentAmount,'middle')
		}
    }
</script>