<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>充值</title>
    <link rel="stylesheet" href="/assets/css/weui.css" />
    <link rel="stylesheet" href="/assets/css/animate.css" />
    <link rel="stylesheet" href="/assets/css/lygh.min.css" />
    <link rel="stylesheet" href="/assets/css/style.css?_=__FILE_VERSION__" />
    <script src="/assets/js/vue.min.js"></script>
    <script src="/assets/js/components.js?_=__FILE_VERSION__"></script>
    <script src="/assets/js/filters.js?_=__FILE_VERSION__"></script>
    <script src="/assets/js/http.js?_=__FILE_VERSION__"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <style type="text/css">
        .page {background-color:#eeeeee;}
    </style>
</head>

<body ontouchstart>
    <div class="page" id="app">
        <ui-toptip v-bind:message="toptip.message" v-bind:show="toptip.show" v-on:show="function(show){toptip.show=show;}"></ui-toptip>
        <ui-toast v-bind:type="toast.type" v-bind:message="toast.message" v-bind:show="toast.show"></ui-toast>
        <ui-payret v-bind:type="resultmsg.type" v-bind:title="resultmsg.title" v-bind:show="resultmsg.show" v-bind:message="resultmsg.message"
            v-bind:data="resultmsg.data" v-on:ok="onOkResult"></ui-payret>

            <div v-show="isAuth">
                <div class="page__bd">
                    <div class="weui-cells__title">石首五十K(房卡)</div>
                    <div class="weui-cells weui-cells_radio">
                        <label class="weui-cell weui-check__label" v-for="(item, index) in data" v-bind:for="item.id">
                            <div class="weui-cell__hd" style="margin-right: 8px;">
                                <img src="/assets/img/icon_roomcard.png" style="width: 32px; height: 32px;border-radius: 5px;" />
                            </div>
                            <div class="weui-cell__bd">
                                <h4 style="font-size: 90%;color: #666;">{{item.name}}<span v-show="item.recharge_reward >0" style="font-size: 90%;color: #e63939;">（活动再送{{item.recharge_reward}}张）</span></h4>
                                <p style="font-size: 80%;color: #666;padding: 3px 0;">售价: {{item.payment_amount | money }}元</p>
                            </div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="goodsid" class="weui-check" v-bind:value="item.id" v-bind:id="item.id" v-model="spid" />
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                    </div>
                </div>

                <div class="page__bd">
                    <div class="weui-cells__title">账号</div>
                    <div class="weui-cells">
                        <ui-input type="number" label="账号" label-width="75" v-model="uuno" pattern="[0-9]*" placeholder="填写游戏账号"></ui-input>
                    </div>
                    <div class="weui-cells__tips">游戏账号为6位数字</div>
                </div>

                <div class="page__ft" style="padding: 25px 15px 0;">
                    <button type="button" class="weui-btn weui-btn_primary" v-on:click="doPay"> 支付 </button>
                </div>
            </div>

            <div v-show="!isAuth">正在自动认证，请等待...</div>

    </div>

    <script type="text/x-template" id="ui-payret">
        <div class="weui-msg ghui-msg" v-show="show">
            <div class="weui-msg__icon-area"><i :class="(type=='success'?'weui-icon-success':'weui-icon-warn') + ' weui-icon_msg'"></i></div>
            <div class="weui-msg__text-area">
                <h2 class="weui-msg__title">{{title}}</h2>
                <p class="weui-msg__desc">{{message}}</p>
            </div>
            <div class="weui-msg__opr-area" v-show="data?(data.redirect_uri!=''):false">
                <p class="weui-btn-area">
                    <a v-on:click="$emit('ok', data)" class="weui-btn weui-btn_mini weui-btn_plain-primary">返回</a>
                </p>
            </div>
        </div>
    </script>

<script>
     Vue.component('ui-payret', {
        props: {
            show: Boolean,
            type: String,
            title: String,
            message: String,
            data: Object,
        },
        template: "#ui-payret"
    });
    var app = new Vue({
        el: '#app',
        data: {
            toptip: {
                "show": false,
                "message": "参数有误",
            },
            toast: {
                "show": false,
                "type": "loading",
                "message": "加载中...",
            },
            resultmsg: {
                "show": false,
                "type": "failed",
                "title": "支付失败",
                "message": "支付失败",
                "data":{},
            },
            isAuth : true,
            spid: "",
            uuno: "",
            data: {},
        },
        beforeCreate: function () {
            Http.Post(this, '/api/mp/conf', {
                "url": encodeURIComponent(location.href.split('#')[0])
            }, function (data) {
                wx.config({
                    beta: true,
                    debug: false,
                    appId: data.appid,
                    timestamp: data.timestamp,
                    nonceStr: data.noncestr,
                    signature: data.signature,
                    jsApiList: ['chooseWXPay']
                });
                wx.ready(function () {
                    wx.hideOptionMenu();
                });
            });
        },
        created: function () {
            this.Get();
        },
        methods: {
            Get: function () {
                Http.Post(this, '/api/shop/list', {}, function (data) {
                    this.isAuth = true;
                    this.data = data;
                }, function (errno, errmsg) {
                    this.toast.show = false;
                    this.toptip.show = true;
                    this.toptip.message = errmsg + "(" + errno + ")";
                }, function () {
                    this.toast.show = true;
                }, function () {
                    this.toast.show = false;
                }, function () {
                    this.isAuth = false;
                    location.href = "/api/mp/authorize?url=" + encodeURIComponent(location.href.split('#')[0]);
                });
            },
            doPay: function() {
                Http.Post(this, '/api/pay/by/jsapi', {
                    "id": this.spid,
                    "no": this.uuno,
                }, function (data) {
                    var self = this;
                    wx.ready(function () {
                        wx.chooseWXPay({
                            timestamp: data.timeStamp,
                            nonceStr: data.nonceStr,
                            package: data.package,
                            signType: data.signType,
                            paySign: data.paySign,
                            success: function (res) {
                                self.resultmsg.show = true;
                                self.resultmsg.type = "success";
                                self.resultmsg.title = "支付成功";
                                self.resultmsg.message = "订单号("+data.orderno+")支付完成。" ;
                                self.resultmsg.data = data;
                            },
                            fail: function (res) {
                                self.resultmsg.show = true;
                                self.resultmsg.type = "failed";
                                self.resultmsg.title = "支付失败";
                                self.resultmsg.message = "订单号(" + data.orderno +")支付失败，如有疑问，请关注微信公众号：“来游乐”联系客服。";
                                self.resultmsg.data = data;
                            },
                            complete: function (res) {},
                            cancel: function (res) {
                                self.resultmsg.show = true;
                                self.resultmsg.type = "failed";
                                self.resultmsg.title = "支付失败";
                                self.resultmsg.message = "订单号(" + data.orderno + ")支付取消，如有疑问，请关注微信公众号：“来游乐”联系客服。";
                                self.resultmsg.data = data;
                            }
                        });
                    });
                }, function (errno, errmsg) {
                    this.toast.show = false;
                    this.toptip.show = true;
                    this.toptip.message = errmsg + "(" + errno + ")";
                }, function(){
                    this.toast.show = true;
                }, function(){
                    this.toast.show = false;
                }, function(){
                    location.href = "/api/mp/authorize?url=" + encodeURIComponent(location.href.split('#')[0]);
                });
            },
            onOkResult: function (data) {
                location.href = "/";
            },
        }
    })
</script>
</body>

</html>