strict_pay.html 13.8 KB

原文件审查历史永久链接

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <script src="../../assets/js/fontsize.js"></script>
    <link rel="stylesheet" href="../../assets/css/api.css"/>
    <link rel="stylesheet" href="../../assets/css/style.css">
    <link rel="stylesheet" href="../../assets/css/index.css">
    <link rel="stylesheet" href="../../assets/icon/iconfont.css">
    <title></title>
    <style>
        .hr {
            height: 0.11rem;
            background-color: #f2f2f2;
        }

        .strict_label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.32rem 0.42rem;
            font-size: 14px;
            color: #424242;
        }

        .strict_label_item {
            color: #C2C1C3;
            font-size: 12px;
            display: flex;
            align-items: center;
        }

        .strict_label_item .iconfont {
            color: #C2C1C3;
            margin-left: 0.1rem;
        }

        .strict_label_pay {
            font-size: 12px;
            color: #7E7E7E;
        }

        .strict_label_item input {
            text-align: center;
            width: 0.58rem;
            font-size: 16px;
            color: #424242;
        }

        .strict_input {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0.39rem;
            font-size: 14px;
            border-top: 1px solid #f2f2f2;
        }

        .strict_input .iconfont {
            color: #D8B25F;
            margin-right: 0.17rem;
        }

        .strict_input .icon-credentials_icon {
            margin: 0;
        }

        .strict_input input {
            padding: 0.25rem 0;
            text-align: right;
        }

        .strict_input input::-webkit-input-placeholder {
            color: #C2C1C3;
            font-size: 12px;
        }

        .sure_tips {
            display: flex;
            align-items: center;
            padding: 0.25rem 0 0.25rem 0.44rem;
            font-size: 12px;
            color: #A4A4A4;
        }

        .sure_tips .iconfont {
            color: #D8B25F;
            margin-right: 0.17rem;
        }

        .strict_agree {
            font-size: 12px;
            display: flex;
            padding: 0.42rem 0.49rem 0 0.46rem;
            color: #A4A4A4;
        }

        .strict_agree .iconfont {
            margin-right: 0.1rem;
        }

        .strict_agree .icon-yigouxuan {
            color: #dbb25f;
        }

        .strict_agree_content {
            padding: 0.22rem 0.19rem 0.29rem 0.08rem;
            border-radius: 0.16rem;
            border: 1px solid #B7B7B7;
        }

        .agree_btn {
            color: #D8B25F;
        }

        .strict_btn_box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 20px;
            color: #E87139;
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            padding: 0 0 0 0.36rem;
            box-shadow: 0 -0.1rem 0.1rem #f2f2f2;
            background-color: #fff;
        }

        .strict_btn_box .rmb {
            font-size: 15px;
        }

        .strict_btn {
            padding: 0.28rem 0.8rem;
            color: #fff;
            background-color: #D8B25F;
            font-size: 17px;
        }
    </style>
</head>
<body>
<div id="loadStart"></div>
<div id="app" v-cloak>
    <div class="hr"></div>
    <div class="strict_label" @click="popupVisible=true">
        <div><span>VIP权益方案</span></div>
        <div class="strict_label_item"><span>{{type_vip?type_vip:price_data[0].name}}</span><span
                class="iconfont icon-xiangyou"></span></div>
    </div>
    <div class="hr"></div>
    <div class="strict_label">
        <div><span>选择金额</span><span class="strict_label_pay">(单位:万元)</span></div>
        <div class="strict_label_item"><span class="iconfont icon-jian" @click="reduce"></span>
            <input type="number" v-model="strict_num" @input="change_value">
            <span
                    class="iconfont icon-jikediancanicon09" @click="plus"></span></div>
    </div>
    <div class="hr"></div>
    <div class="strict_label">
        <div><span>权益信息</span></div>
    </div>
    <form action="">

        <div class="strict_input">
            <div><span class="iconfont icon-yonghu"></span><span>姓名</span></div>
            <div><input type="text" placeholder="请输入姓名" v-model="name"></div>
        </div>
        <div class="strict_input">
            <div><span class="iconfont icon-credentials_icon"></span><span>身份证号</span></div>
            <div><input type="text" placeholder="请输入身份证号码" v-model="idcard"></div>
        </div>
        <div class="strict_input">
            <div><span class="iconfont icon-dianhua-1"></span><span>联系电话</span></div>
            <div><input type="number" placeholder="请输入联系电话" v-model="tel"></div>
        </div>
        <div class="strict_input">
            <div><span class="iconfont icon-dizhi"></span><span>地址</span></div>
            <div><input type="text" placeholder="请填写接收文件地址" v-model="address"></div>
        </div>
        <div class="sure_tips">
            <span class="iconfont icon-lababofang"></span><span>请正确填写权益人信息，以便给您发送相关协议等文件</span>
        </div>
    </form>
    <div class="hr"></div>
    <div class="strict_agree">
        <div :class="['iconfont',agreement?'icon-weigouxuan':'icon-yigouxuan']" @click="agreement=!agreement"></div>
        <div class="strict_agree_content">
            我已阅读并同意<span class="agree_btn" @click="openAgree">《认购协议》</span>及其他相关条款协议，本人已充分
            知晓认购后不可随意退出，愿意为投资存在的失败风险自行承担法律后果。
        </div>
    </div>
    <div class="strict_btn_box" @click="pay_vip" :style="{position: pos}">
        <div><span class="rmb">￥</span><span>{{strict_num}}万</span></div>
        <div class="strict_btn">认购</div>
    </div>
    <mt-popup v-model="popupVisible" position="bottom" style="width: 100%">
        <ul class="moreoul">
            <li v-for="(item,index) in price_data" @click="power(index,item.name)">{{item.name}}</li>
            <li @click="popupVisible=false" style="border-top: 2px solid #f0f0f0">取消</li>
        </ul>
    </mt-popup>
</div>
</body>
</html>
<script type="text/javascript" src="../../assets/js/api.js"></script>
<script type="text/javascript" src="../../assets/js/vue.min.js"></script>
<script type="text/javascript" src="../../assets/js/index.js"></script>
<script type="text/javascript" src="../../assets/js/public.js"></script>
<script type="text/javascript" src="../../assets/js/fastclick.js"></script>
<script>
    new FastClick(document.body);
</script>
<script type="text/javascript" src="../../assets/js/axios.min.js"></script>
<script type="text/javascript" src="../../assets/icon/iconfont.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            strict_num: 2,
            agreement: false,
            popupVisible: false,
            type_vip: '',
            price_data: [],
            plan_id: '',
            name: '',
            tel: '',
            idcard: '',
            address: '',
            pos: 'fixed'
        },
        created: function () {
            apiready = function () {
                app.crowdPrice();
                var client_h = window.innerHeight;
                window.addEventListener('resize', function () {
                    if (window.innerHeight < client_h) {
                        app.pos = 'relative'
                    } else {
                        app.pos = 'fixed'
                    }
                }, false);
            }
        },
        methods: {
            // 认购协议
            openAgree: function () {
                openView('agree_content', 'common/agree_content', '认购协议', 'agree_content', false, {
                    title_name: '认购协议',
                    id: 4
                }, false)
            },
            // 选择权益
            power: function (index, type) {
                app.type_vip = type;
                app.popupVisible = false;
                app.strict_num = app.price_data[index].mix_price;
                app.plan_id = app.price_data[index].id

            },
            // 减少数量
            reduce: function () {
                if (app.strict_num > 1) {
                    app.strict_num--;
                    for (var i in app.price_data) {
                        if (app.strict_num > parseInt(app.price_data[app.price_data.length - 1].max_price)) {
                            app.type_vip = app.price_data[app.price_data.length - 1].name;
                            app.plan_id = app.price_data[app.price_data.length - 1].id
                        }
                        else if (app.strict_num >= parseInt(app.price_data[i].mix_price) && app.strict_num <= parseInt(app.price_data[i].max_price)) {
                            app.type_vip = app.price_data[i].name;
                            app.plan_id = app.price_data[i].id
                        }
                        else {
                        }
                    }
                }
            },
            // 增加数量
            plus: function () {
                app.strict_num++;
                for (var i in app.price_data) {
                    if (app.strict_num > parseInt(app.price_data[app.price_data.length - 1].max_price)) {
                        app.type_vip = app.price_data[app.price_data.length - 1].name;
                        app.plan_id = app.price_data[app.price_data.length - 1].id
                    }
                    else if (app.strict_num >= parseInt(app.price_data[i].mix_price) && app.strict_num <= parseInt(app.price_data[i].max_price)) {
                        app.type_vip = app.price_data[i].name;
                        app.plan_id = app.price_data[i].id
                    }
                    else {
                    }

                }
            },
            // 改变数量 输入框
            change_value: function () {
                if (!/^[2-9]+\d*$/.test(app.strict_num)) {
                    toastMsg('请输入大于等于2的整数');
                    app.strict_num = 1;
                } else {
                    for (var i in app.price_data) {
                        if (app.strict_num > parseInt(app.price_data[app.price_data.length - 1].max_price)) {
                            app.type_vip = app.price_data[app.price_data.length - 1].name;
                            app.plan_id = app.price_data[app.price_data.length - 1].id
                        }
                        else if (app.strict_num >= parseInt(app.price_data[i].mix_price) && app.strict_num <= parseInt(app.price_data[i].max_price)) {
                            app.type_vip = app.price_data[i].name;
                            app.plan_id = app.price_data[i].id
                        }
                        else {
                        }
                    }
                }
            },
            // 获取方案信息
            crowdPrice: function () {
                var header = {
                    "XX-Device-Type": getDevice(),
                    'XX-Token': getToken()
                };
                getRequest('post', 'portal/Goods/crowdPrice', null, header).then(function (res) {
                    if (res.data.code == 1) {
                        app.price_data = res.data.data;
                        app.plan_id = app.price_data[0].id;
                        loadEnd()
                    } else {
                        toastMsg(res.data.msg)
                    }
                })
            },
            // 提交认购
            pay_vip: function () {
                if (app.strict_num < 1 && app.plan_id == '') {
                    toastMsg('请选择权益方案')
                } else if (app.name == '') {
                    toastMsg('请输入姓名')
                } else if (!id_card.test(app.idcard)) {
                    toastMsg('身份证号不正确')
                } else if (!mobileReg.test(app.tel)) {
                    toastMsg('手机号不正确')
                } else if (app.address == '') {
                    toastMsg('地址不能为空')
                } else if (app.agreement == true) {
                    toastMsg('请同意协议')
                }
                else {
                    var header = {
                        "XX-Device-Type": getDevice(),
                        'XX-Token': getToken()
                    };
                    var post = {
                        price: app.strict_num,
                        plan_id: app.plan_id,
                        name: app.name,
                        idcard: app.idcard,
                        tel: app.tel,
                        address: app.address
                    };
                    getRequest('post', 'portal/Goods/crowdOrder', post, header).then(function (res) {
                        // alert(JSON.stringify(res));
                        if (res.data.code == 1) {
                            var order_id = res.data.data.oid;
                            openView('my_pay', 'my/my_pay', '支付', 'my_pay', false, {order_id: order_id});
                        } else {
                            toastMsg(res.data.msg)
                        }
                    });
                }
            }
        }
    })
</script>