plusToken
/
more-zin-info.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/animate.css">
    <link rel="stylesheet" href="./css/ai-dog.css">
    <link rel="stylesheet" href="./css/jiazai.css">
    <title>账单记录</title>
    <style>
        .notice-hea1 {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            height: 40px;
            padding: 0 10px;
            display: flex;
            align-items: flex-end;
            background: #3573fa;
        }

        .notice-hea1>span {
            margin-left: 18px;
            font-size: 17px;
            color: white;
        }

        .money-wrap,
        .content,
        .append-dog {
            position: fixed;
            left: 0;
            right: 0;
        }

        .money-wrap {
            top: 40px;
            padding: 15px;
            background: url('./img/my-bg.jpg') no-repeat center center;
            background-size: 100% 100%;
        }

        .money-par {
            padding: 15px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 5px;
            color: white;
        }

        .money-par>div {
            height: 130px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .mon-left {
            align-items: flex-start;
        }

        .mon-right {
            align-items: flex-end;
            text-align: right;
        }

        .mon-img {
            display: flex;
            align-items: center;
        }

        .mon-img>img {
            border-radius: 50%;
        }

        .mon-img>span {
            margin-left: 10px;
            font-size: 20px;
            font-weight: 800;
        }

        .mon-all-info {
            padding-top: 10px;
            font-size: 14px;
            color: #edb581;
        }

        .mon-all-info>p {
            padding-top: 7px;
        }

        .mon-right p {
            padding: 2px 0;
            font-size: 14px;
            opacity: .8;
        }

        .append-dog {
            top: 250px;
            z-index: 5;
            height: 40px;
            padding: 0 15px;
        }

        .append-dog>div {
            width: 100%;
            height: 100%;
            background: #3574FA;
            border-radius: 5px;
            box-shadow: 0 0 20px RGBA(53, 116, 250, 0.8);
            text-align: center;
            line-height: 40px;
            font-size: 15px;
            color: white;
        }

        .content {
            top: 300px;
            bottom: 0;
            padding: 20px 0;
            overflow: auto;
        }

        .list>p:first-of-type {
            padding: 15px 15px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 15px;
        }

        .list>p:first-of-type>span:first-of-type {
            font-weight: 800;
        }

        .list>p:first-of-type>span:last-of-type {
            color: #999;
        }

        .trans {
            padding: 5px 15px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* text-align: right; */
            /* font-size: 15px; */
            /* color: #3574FA; */
        }

        .trans>div {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #999;
        }

        .trans>div>img {
            margin: 0 3px;
        }

        .trans>span {
            font-size: 16px;
            color: #3574FA;
        }
    </style>
</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='offAiDog=false;' v-if='offAiDog'></div>
        <transition enter-active-class='animated fadeIn' leave-active-class='animated fadeOut'>
            <div class='fixed-ai-wrap' v-if='offAiDog' @click='offAiDog=false;'>
                <div class='fixed-center' @click.stop=''>
                    <div class='title-hea'>
                        <span style="opacity:0;">1</span>
                        <span>追加智能搬砖</span>
                        <img @click='offAiDog=false;' src="./img/close.svg" width="24px" height="24px">
                    </div>
                    <!-- <div style="padding:5px 0;font-size:14px;line-height:20px;color: #999;">
                        立刻开启智能搬砖，立享102222理财金加成
                    </div> -->
                    <div class='num-huansuan' v-if='num'>
                        <div>
                            <input type="text" readonly v-model='num' style="width:100%;">
                            <span v-text='coinsInfo.coins_ename'>ETH</span>
                        </div>
                        <span>=</span>
                        <div>
                            <input type="text" readonly style="width:100%;" :value='(coinsInfo.coins_price*parseFloat(num)).toFixed(6)'>
                            <span>USDT</span>
                        </div>
                    </div>
                    <input type="text" placeholder="请输入追加数量" v-model='num'>
                    <button @click='fastConve'>确认</button>
                </div>
            </div>
        </transition>
        <!-- 开启智能狗弹窗 -->

        <!--自定义键盘 -->
        <div id='mask' @click='oofTransiaction=false;offKeyWord=false;transPass=[];' 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;transPass=[];'>
                <div class='trans-pass-content' @click.stop=''>
                    <div class='trans-hea'>
                        <span style="opacity:0">1</span>
                        <span>输入交易密码</span>
                        <img src="./img/close.svg" width="27px" height="27px" @click='oofTransiaction=false;offKeyWord=false;transPass=[];'>
                    </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='notice-hea1'>
            <img @click='close' src="./img/white-left.svg" width="20px" height="20px">
            <span>智能收益</span>
        </div>
        <div class='money-wrap'>
            <div class='money-par'>
                <div class='mon-left'>
                    <div class='mon-img'>
                        <img :src="bill.coins_logo?HTTP+bill.coins_logo:'./img/timg.png'" width="50px" height="50px">
                        <span v-text='bill.coins_ename'>Spor</span>
                    </div>
                    <div class='mon-all-info'>
                        <p><span>搬砖总额：</span><span>${{bill.price_usd}}</span></p>
                        <p><span>投资数量：</span><span v-text='bill.price'>0</span></p>
                        <p><span>开始时间：</span><span v-text='bill.addtime'>2018-05-10</span></p>
                    </div>
                </div>
                <div class='mon-right'>
                    <div>
                        <p>昨日收益(Spor)</p>
                        <p v-text='bill.yesterday_price'>0.00</p>
                        <p><span>≈</span><span>${{bill.yesterday_price_usd}}</span></p>
                    </div>
                    <div>
                        <p>总收益(Spor)</p>
                        <p v-text='bill.all_price'>0.00</p>
                        <p><span>≈</span><span>${{bill.all_price_usd}}</span></p>
                    </div>
                </div>
            </div>
        </div>
        <div class='append-dog' v-if='coinsInfo.offSwitch' @click='offAiDog=true;'>
            <div>
                追加AI智能搬砖
            </div>
        </div>
        <div class='content'>
            <div v-if='bill.p&&bill.p.length'>
                <div class='list' v-for="(val,index) in bill.p">
                    <p>
                        <span v-text='val.coins_ename'>ETH</span>
                        <span v-text='val.time'>1213</span>
                    </p>
                    <div class='trans'>
                        <div>
                            <span v-text='bill.coins_ename'></span>
                            <img src="./img/tran-dog.svg" height="12px">
                            <span v-text='val.rand_coins'>Spor</span>
                        </div>
                        <span>+{{val.minute}}</span>
                    </div>
                    <div style="height:15px;background:#f4f4f4;opacity: .8;box-shadow: 0 0 5px #eee inset;"></div>
                </div>
            </div>
            <div v-else style="padding-top:20px;font-size:15px;color:#999;text-align: center;">
                暂无数据
            </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/base64.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script>
        var send = function(val) {
            var json = JSON.parse(val);
            app.getDataByid(json.id);
            app.$data.coinsInfo = json;
        }
        var app = new Vue({
            el: '#app',
            data: {
                jiazai: false,
                //交易记录
                bill: [],
                //上级传过来的币详情
                coinsInfo: {},
                //将要开启的智能狗的数量
                num: '',
                //开启智能狗输入数量弹窗
                offAiDog: false,
                //控制自定义键盘弹窗(是输入交易密码的弹窗)
                oofTransiaction: false,
                //控制自定义的键盘
                offKeyWord: false,
                //输入的6位数交易密码
                transPass: [],
            },
            mounted: function() {
                var This = this;
                setTimeout(function() {
                    if (!This.coinsInfo.offSwitch) {
                        $('.content').css('top', '240px');
                    }
                }, 500);
            },
            methods: {
                close: function() {
                    var web = plus.webview.currentWebview();
                    web.close('none');
                },
                //得到数据
                getDataByid: function(id) {
                    this.jiazai = true;
                    var This = this;
                    _post(MORE_ZINENG_INFO, {
                        userid: JSON.parse(localStorage.getItem('user')).userid,
                        coinsid: id
                    }, function(data) {
                        This.jiazai = false;
                        if (data.status == 1) {
                            This.bill = data.back;
                        } else {
                            _toast(data.msg);
                            setTimeout(function() {
                                plus.webview.currentWebview().close('none');
                            }, 1500);
                        }
                    });
                },
                //打开输入交易密码框
                fastConve: function() {
                    if (String(parseFloat(this.num)).length != this.num.length) {
                        _toast('请输入正确的数量');
                        this.num = 0;
                        return;
                    }
                    var This = this;
                    setTimeout(function() {
                        This.offAiDog = false;
                        This.oofTransiaction = true;
                        var hei = ($(document).height() - 200) / 2;
                        setTimeout(function() {
                            $('.transaction-input-wrap').css('transform', "translateY(" + hei + "px)");
                        }, 20);
                    }, 800);
                },
                //打开自定义键盘
                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;
                    }
                    this.sendOpen();
                },
                //发送开启智能狗请求
                sendOpen: function() {
                    var user = JSON.parse(localStorage.getItem('user'));
                    var send = {
                        userid: user.userid,
                        session: user.session,
                        coinsid: this.coinsInfo.id,
                        num: this.num,
                        pin: this.transPass.join('')
                    };
                    var This = this;
                    this.jiazai = true;
                    _bas64Post(ZINEGNGOU_OPEN, send, function(data) {
                        _toast(data.msg);
                        This.jiazai = false;
                        setTimeout(function() {
                            This.num = 0;
                            This.transPass = [];
                            This.oofTransiaction = This.offKeyWord = false;
                            This.oofTransiaction = This.offKeyWord = This.offAiDog = false;
                        }, 1000);
                    });
                },
                //隐藏自定义键盘
                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>