plusToken
/
trans-go-out.html

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/trans-go-out.css">
    <link rel="stylesheet" href="./css/jiazai.css">
    <style type="text/css">
        .yzmcode {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 10px;
            padding-bottom: 0;
            border-bottom: 1px solid #eee;
        }

        .yzmcode>input {
            flex: 1 1 0;
            padding: 10px 0;
            border: none;
        }

        .yzmcode>span {
            flex: 0 0 80px;
            font-size: 14px;
            color: #3574FA;
            text-align: right;
        }
    </style>
    <title>转出页面</title>
</head>

<body>
    <div id='app'>

        <!-- 加载中动画 -->
        <div class='jiazai' v-if='jiazai'>
            <img src="./img/jia-ani.gif" width="50px" height="50px">
        </div>
        <!-- 加载中动画 -->

        <!-- 闪兑--自定义键盘 -->
        <div id='mask' @click='oofTransiaction=false;offKeyWord=false;' v-if='oofTransiaction'></div>
        <transition enter-active-class='animated fadeIn' enter-active-class='animated fadeOut'>
            <div class='transaction-input-wrap' v-if='oofTransiaction' @click='oofTransiaction=false;offKeyWord=false;'>
                <div class='trans-pass-content' @click.stop=''>
                    <div class='trans-hea-com'>
                        <span style="opacity:0">1</span>
                        <span>输入交易密码</span>
                        <img src="./img/close.svg" width="27px" height="27px" @click='oofTransiaction=false;offKeyWord=false;'>
                    </div>
                    <div class='trans-num' @click='openKeyWord'>
                        <span ref='input1'></span>
                        <span ref='input2'></span>
                        <span ref='input3'></span>
                        <span ref='input4'></span>
                        <span ref='input5'></span>
                        <span ref='input6'></span>
                    </div>
                    <button class='btn-com' @click='clkSubmit'>确认提交</button>
                </div>
            </div>
        </transition>
        <transition enter-active-class='animated fadeInUp' enter-active-class='animated fadeOutDown'>
            <div class="keyborad" v-if='offKeyWord'>
                <ul>
                    <li>
                        <dt @click="clkValue('1')">1</dt>
                        <dt @click="clkValue('2')">2</dt>
                        <dt @click="clkValue('3')">3</dt>
                    </li>
                    <li>
                        <dt @click="clkValue('4')">4</dt>
                        <dt @click="clkValue('5')">5</dt>
                        <dt @click="clkValue('6')">6</dt></li>
                    <li>
                        <dt @click="clkValue('7')">7</dt>
                        <dt @click="clkValue('8')">8</dt>
                        <dt @click="clkValue('9')">9</dt></li>
                    <li>
                        <dt @click="clkValue('.')">.</dt>
                        <dt @click="clkValue('0')">0</dt>
                        <dt @click="hide" class="iconfont icon-jianpanxiahua" style="display:flex; justify-content: center; align-item:center;">
                             <img src="./img/key-down.svg">
                         </dt>
                    </li>
                </ul>
                <div id="del" @click="del" class="del iconfont icon-jianpan_shanchu" style="display:flex; justify-content: center; align-item:center;">
                    <img src="./img/key-del.svg">
                </div>
                <div id="btn" class="button" @click="clkSubmit">
                    提交
                </div>
            </div>
        </transition>
        <!-- 闪兑--自定义键盘 -->

        <div class='dis-start trans-hea'>
        	<div class='dis-start'>
	            <img @click='close' src="./img/right-black.svg" width="20px" height="20px">
	            <!--<span>转账</span>-->

        	</div>
        	<div class="dis-cen" style="flex:1 1 0;">
        		<img @click="offTrans=1"  :src="offTrans==1?'./img/trans-blue.png':'./img/trans.png'" style="height: 16px;width: auto;margin-right: 20px;" />
        		<img @click="offTrans=2" :src="offTrans==2?'./img/no-oth-blue.png':'./img/no-oth.png'" style="height: 16px;width: auto;" />
        	</div>

        </div>
        <div class='trans-content'>
        	<div id="sc">
	            <div class='pay-address'>
	                <p>付款地址</p>
	                <p v-text='transformData.address'>121士大夫2sdfafsdfasd1f12asdfsd</p>
	            </div>
	            <div class='get-address'>
	                <p v-text="offTrans==1?'收款地址':'收款手机号'">收款地址</p>
	                <div class='get-input-address' v-if='offTrans==1'>
	                    <input v-if='!offQr' name='a' type="text" placeholder="请输入或粘贴地址" v-model='receAddress' :readonly='offQr'>
	                    <p v-else style="width:100%;overflow:auto;">
	                        <span v-text='receAddress'></span>
	                    </p>
	                    <div>
	                        <img src="./img/blue-shaoyishao.svg" width="20px" height="20px" style="opacity: 0;">
	                        <img @click='openFriends' src="./img/friend.svg" width="30px" height="20px">
	                    </div>
	                </div>
	                 <div class='get-input-address' v-if='offTrans==2'>
	                    <input type="text" placeholder="请输入或粘贴手机号" v-model='recePhone' style="padding: 6px 0;">
	                </div>
	            </div>
	            <div class='trans-count'>
	                <div>
	                    <div>转账数量</div>
	                    <div style="color:#999;">
	                        <span>余额:</span>
	                        <span v-text='transformData.money'>2000.000</span>
	                    </div>
	                </div>
	                <input name='b' type="text" placeholder="输入相关数额" v-model='receCount' :readonly='offCount'>
	            </div>
	            <div class='other'>
	                <p>备注</p>
	                <input name='c' type="text" placeholder="选填10个字以内" v-model='notice'>
	            </div>
	            <div class='other yzmcode'>
	                <!--<p>备注</p>-->
	                <input type="text" placeholder="输入短信验证码" v-model='yzmcode'>
	                <span v-text='yzmfont' @click='sendCode'>发送验证码</span>
	            </div>
	            <div class='other-money' v-if='offTrans==1'>
	                <img src="./img/imp-notice.svg" width="16px" height="16px">
	                <span>矿工费：<span v-text='_toFixed(otherMoney,6)'> 0.3</span><span v-text='transformData.coins_type==1?transformData.coins_ename:"ETH"'>ETH</span></span>
	            </div>
	            <button class='submit' @click='sub'>提交</button>
        	</div>
        </div>
    </div>
    <script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/back.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/base64.js"></script>
    <script src="js/vue.min.js"></script>
    <script>
        //上级页面传币种id过来
        var send = function(coinId) {
            app.getData(coinId);
            app.$data.coinsid = coinId;
        };
        //通讯录页面传选的地址过来
        var sendAddress = function(address) {
            app.$data.receAddress = address;
        };
        //扫码页面传递过来的数据
        var sao = function(data) {
            function back() {
                _toast('出错的二维码');
                setTimeout(function() {
                    plus.webview.currentWebview().close('none');
                }, 2000);
            }
            if (data.indexOf('coinsid') == -1) {
                back();
                return;
            }
            var json = JSON.parse(data);
            if (!json.coinsid || !json.address) {
                back();
                return;
            }
            app.getData(json.coinsid);
            app.$data.coinsid = json.coinsid;
            app.$data.receAddress = json.address;
            app.$data.receCount = json.amount;
            if (parseFloat(json.amount)) {
                app.$data.offCount = true;
            }
            app.$data.offQr = true;
        };
        var app = new Vue({
            el: '#app',
            data: {
                //本页的数据
                transformData: {
                    address: '',
                    money: ''
                },
                //1： 转账    2：免手续费
                offTrans:1,
                //验证码
                yzmcode: '',
                //验证码字体
                yzmfont: '获取验证码',
                //true ：不允许修改相关内容
                offQr: false,
                //判断发送验证码没得
                alSendCode:false,
                //不允许修改转账数量
                offCount: false,
                //上级传过来的付款地址的币种id
                coinsid: '',
                //加载动画
                jiazai: false,
                //控制自定义键盘弹窗(是输入交易密码的弹窗)
                oofTransiaction: false,
                //控制自定义的键盘
                offKeyWord: false,
                //输入的6位数交易密码
                transPass: [],
                //收款地址
                receAddress: '',
                //转账数量
                receCount: '',
                //备注
                notice: '',
                //收款手机号
                recePhone:''
            },
            watch: {
                oofTransiaction: function(val) {
                    if (!val) {
                        this.transPass = [];
                    }
                }
            },
            computed: {
                otherMoney: function() {
                    var old = _accMul(this.receCount, this.transformData.coins_wprice);
                    // var old = this.receCount * parseFloat(this.transformData.coins_wprice);
                    var small = parseFloat(this.transformData.coins_withdraw);
                    if (old < small) {
                        return small;
                    }
                    return old;
                }
            },
            mounted:function(){
            	 this.$nextTick(function(){
            	 	var h=document.body.scrollHeight;
                    var elHei=el.height();
            	 	window.onresize = function() {
            	 		var al=document.body.scrollHeight;
            	 		var el=$('#sc');
                        if ( al< h) {
                            el.css('height',(elHei+150)+'px');
                        } else {
                            el.css('height',(elHei)+'px');
                        }
                    };
            	 });

            },
            methods: {
                close: function() {
                    var web = plus.webview.currentWebview();
                    web.close('none');
                },
                //去免手续费页面
                goTrans2:function(){
                	var This=this;
                	this.jiazai=true;
                	var web = plus.webview.create('trans-go-out2.html', 'transGoOut2', {
                		'backButtonAutoControl': 'close',
                		statusbar: {
				            background: '#E6E6E6'
				        },
                	});
                	web.addEventListener("loaded", function() {
			            setTimeout(function() {
			                This.jiazai = false;
			                web.show('slide-in-right');
			            }, 200);
			        }, false);
			        var send={
			        	coinId:this.coinsid,
			        	receAddress:this.receAddress
			        };
                    setTimeout(function() {
                        web.evalJS("send('" + JSON.stringify(send) + "')");
                    }, 300);
                },
                //得到本页面的数据
                getData: function(coinId) {
                    this.jiazai = true;
                    var This = this;
                    _post(TRANSFER, {
                        coinsid: coinId,
                        userid: JSON.parse(localStorage.getItem('user')).userid
                    }, function(data) {
                        This.jiazai = false;
                        if (data.status == 1) {
                            This.transformData = data.back;
                            if (data.back.address == This.receAddress) {
                                _toast('付款地址和收款地址一致');
                                // setTimeout(function() {
                                //     plus.webview.currentWebview().close();
                                // }, 2000);
                            }
                        } else {
                            _toast(data.msg);
                        }
                    });
                },
                //获取验证码计时
                setTime: function() {
                	this.alSendCode=true;
                    var This = this;
                    This.jiazai = true;
                    _post(SESSION_DUAN, {
                        session: JSON.parse(localStorage.getItem('user')).session,
                    }, function(data) {
                        This.jiazai = false;
                        if (data.status == 1) {
                            var num = 60;
                            var time = setInterval(function() {
                                if (num-- <= 1) {
                                    clearInterval(time);
                                    This.yzmfont = '获取验证码';
                                } else {
                                    This.yzmfont = '再次获取' + num + 's';
                                }
                            }, 1000);
                        } else {
                            _toast(data.msg);
                        }
                    });
                },
                //发送验证码
                sendCode: function() {
                    if (this.yzmfont != '获取验证码') {
                        return;
                    }
                    this.setTime();
                },
                //提交打开弹窗输交易密码
                sub: function() {
					if(!this.alSendCode){
                        _toast('请发送验证码');
						return;
					}
                    if (!this.receCount) {
                        _toast('请输入转账数量');
                        return;
                    }
                    if (!this.yzmcode) {
                        _toast('请输入短信验证码');
                        return;
                    }
                    var str = String(parseFloat(this.receCount)).toLowerCase();
                    if (str == 'nan' || str.length != this.receCount.length || parseFloat(this.receCount) <= 0) {
                        _toast('请输入正确的转账数量');
                        this.receCount = '';
                        return;
                    }
                    if(this.offTrans==1){
                    	if (this.receAddress.length <= 0) {
	                        _toast('请输入收款地址');
	                        return;
	                    }
                    	if (parseFloat(this.receCount) < parseFloat(this.transformData.coins_withdraw_num)) {
                    	    _toast('最低转账数量不能低于' + parseFloat(this.transformData.coins_withdraw_num));
                    	    return;
                    	}
                    	if (parseFloat(this.receCount) > parseFloat(this.transformData.coins_withdraw_topnum)) {
                    	    _toast('最高转账数量不能高于' + parseFloat(this.transformData.coins_withdraw_topnum));
                    	    return;
                    	}
                    }
					if(this.offTrans==2){
						if(!_checkMobile(this.recePhone)){
							_toast('请输入正确的手机号');
							return;
						}
					}
                    this.oofTransiaction = true;
                    var hei = ($(document).height() - 200) / 2;
                    setTimeout(function() {
                        $('.transaction-input-wrap').css('transform', "translateY(" + hei + "px)");
                    }, 20);
                },
                //打开通讯录页面
                openFriends: function() {
                    _openHref('friends.html', 'friends');
                },
                //打开自定义键盘
                openKeyWord: function() {
                    if (this.offKeyWord) {
                        return;
                    }
                    var hei = $(document).height() - 470;
                    this.offKeyWord = true;
                    $('.transaction-input-wrap').css('transform', "translateY(" + hei + "px)");
                },
                //输入交易密码的值
                clkValue: function(val) {
                    if (val == '.') {
                        return;
                    }
                    var len = this.transPass.length;
                    if (len == 6) {
                        this.clkSubmit();
                        return;
                    }
                    var input = 'input' + (len + 1);
                    this.transPass.push(val);
                    this.$refs[input].innerHTML = val;
                    if (this.transPass.length == 6) {
                        this.clkSubmit();
                    }
                },
                //删除一个数值
                del: function() {
                    if (this.transPass.length == 0) {
                        return;
                    }
                    var len = this.transPass.length;
                    var input = 'input' + len;
                    this.$refs[input].innerHTML = '';
                    this.transPass.pop();
                },
                //自定义键盘的提交
                clkSubmit: function() {
                    if (this.transPass.length != 6) {
                        _toast('请输入密码');
                        return;
                    }
                    var This = this;
                    this.jiazai = true;
                    //默认是免手续费
                    var url=NO_OTH_TRANS;
                    var address=this.recePhone;
                    if(this.offTrans==1){
                    	//转账
                    	url=TRANSFER_TO;
                    	address=this.receAddress;
                    }
                    var user = JSON.parse(localStorage.getItem('user'));
                    _bas64Post(url, {
                        yzmcode: this.yzmcode,
                        userid: user.userid,
                        session: user.session,
                        coinsid: this.coinsid,
                        send_to: address,
                        amount: this.receCount,
                        msg: this.notice,
                        pin: this.transPass.join('')
                    }, function(data) {
                        _toast(data.msg);
                        if (data.status == 1) {
                            This.oofTransiaction = false;
                            This.offKeyWord = false;
                            This.jiazai = false;
                            setTimeout(function() {
                                plus.webview.currentWebview().close('none');
                            }, 1000);
                        } else {
                            This.jiazai = false;
                        }
                    });
                },
                //隐藏自定义键盘
                hide: function() {
                    this.offKeyWord = false;
                },
            }
        });
    </script>
    <script type="text/javascript" charset="utf-8">
        function plusReady() {

        }

        // 判断扩展API是否准备，否则监听'plusready'事件
        if (window.plus) {
            plusReady();
        } else {
            document.addEventListener('plusready', plusReady, false);
        }
    </script>
</body>

</html>