my_invite.html 8.4 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/index.css">-->
    <!--<link rel="stylesheet" href="../../assets/css/doc.css">-->
    <!--<link rel="stylesheet" href="../../assets/icon/iconfont.css">-->
    <style>
        body {
            margin: 0;
            padding: 0 0 1rem 0;
        }

        .invite_box {
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin: 66px 0 25px 0;
            font-size: 16px;
        }

        .invite_item {
            background-image: url("../../assets/image/firend1.jpg");
            height: 72px;
            width: 39%;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }

        .price {
            color: #fff;
            font-size: 18px;
        }

        .border {
            height: 5px;
            background-color: #D8B25F;
            margin: 0 24px;
            border-radius: 5px;
        }

        .margin0 span {
            padding: 12px 0;
            color: #3C3C3C;
            position: relative;
        }

        .margin0 {
            margin: 0 0 40px 0;
        }

        .margin0 .cricle {
            height: 8px;
            width: 8px;
            display: block;
            background-color: #D8B25F;
            position: absolute;
            top: -7px;
            left: 0;
            right: 0;
            margin: 0 auto;
            z-index: 2;
            padding: 0;
            border-radius: 50%;
        }

        .save_btn {
            position: fixed;
        }

        .content {
            border-top: 2px solid #f5f5f5;
            margin-top: 0;
            /*padding: 0.6rem 0.5rem;*/
            /*font-size: 15px;*/
            /*color: #929292;*/
        }

        .sport {
            text-align: center;
            font-size: 15px;
            padding: 30px 0 23px 0;
            color: #929292;
        }

        .save_btn {
            text-align: center;
            font-size: 18px;
            color: #fff;
            padding: 8px 0;
            width: 100%;
            position: fixed;
            left: 0;
            bottom: 0;
            z-index: 100;
            background-color: #dbb25f;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="invite_box" v-if="invite_type==0">
        <div class="invite_item">
            可获
            <span class="price">{{invite_data.invite_user_first_price}}</span>
            元消费金
        </div>
        <div class="invite_item">可获
            <span class="price" v-if="invite_type==0">{{invite_data.invite_user_second_price}}</span>
            消费金
        </div>
    </div>
    <div class="invite_box" v-else>
        <div class="invite_item">
            可获
            <span class="price">{{invite_data.invite_ser_first_price}}</span>
            元现金奖励
        </div>
        <div class="invite_item">可获
            <span class="price">{{invite_data.invite_ser_second_price}}</span>
            元现金奖励
        </div>
    </div>
    <div class="border"></div>
    <div class="invite_box margin0" v-if="invite_type==0">
        <span>好友完成注册 <span class="cricle"></span></span>
        <span>好友完成VIP权益认购 <span class="cricle"></span></span>
    </div>
    <div class="invite_box margin0" v-else>
        <span>好友完成注册资质认证<span class="cricle"></span></span>
        <span>好友接单首单服务完成<span class="cricle"></span></span>
    </div>
    <div class="content">
        <div class="sport">— 活动规则 —</div>
        <div v-html="invite_data.invite_user_info" v-if="invite_type==0"></div>
        <div v-html="invite_data.invite_ser_info" v-else></div>
    </div>
    <div class="save_btn" @click="friend">立即邀请</div>
</div>
</body>
</html>
<script type="text/javascript" src="../../assets/js/api.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/vue.min.js"></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: {
            invite_data: '',
            user_info: [],
            share_rule: '',
            invite_type: ''
        },
        created: function () {
            apiready = function () {
                app.getUserIndexInfo();
                app.invite_type = api.pageParam.invite_type;
                if (app.invite_type == 0) {
                    app.myInvited();
                } else {
                    app.myInvited2();
                }
            }
        },
        methods: {
            // 邀友有转
            friend: function () {
                api.openFrame({
                    bgColor: 'rgba(0,0,0,0.05)',
                    name: 'invited',
                    url: '../common/share.html',
                    bounces: false,
                    animation: {
                        type: "push",
                        subType: "from_bottom",
                        duration: 300
                    },
                    rect: {
                        x: 0,
                        y: 0,
                        w: 'auto',
                        h: 'auto'
                    },
                    pageParam: {
                        share_url: app.invite_type == 0 ? app.invite_data.invite_user_url : app.invite_data.invite_ser_url,
                        share_title: app.invite_type == 0 ? '邀请好友' : '邀友有赚',
                        share_desc: '有人@你,好友送您' +(app.invite_type == 0?app.invite_data.invite_user_first_price:app.invite_data.invite_ser_first_price) + "元,邀您一起参加健康提升计划...... 慈界医养-让健康提升更简单",
                        invite_type: app.invite_type
                    }
                });
            },
            // 获取个人信息
            getUserIndexInfo: function () {
                var header = {
                    "XX-Device-Type": getDevice(),
                    'XX-Token': getToken()
                };
                getRequest('post', 'user/index/getUserIndexInfo', null, header).then(function (res) {
                    if (res.data.code == 1) {
                        app.user_info = res.data.data;
                    } else {
                        // toastMsg(res.data.msg)
                    }
                })
            },
            // 用户端
            myInvited: function () {
                var header = {
                    "XX-Device-Type": getDevice(),
                    'XX-Token': getToken()
                };
                getRequest('post', 'user/index/myInvite', null, header).then(function (res) {
                    // alert(JSON.stringify(res));
                    if (res.data.code == 1) {
                        app.url = res.data.url;
                        app.invite_data = res.data.data;
                    } else {
                        toastMsg(res.data.msg)
                    }
                })
            },
            // 医护端
            myInvited2: function () {
                var header = {
                    "XX-Device-Type": getDevice(),
                    'XX-Token': getToken()
                };
                getRequest('post', 'user/service/myInvite', null, header).then(function (res) {
                    // alert(JSON.stringify(res));
                    if (res.data.code == 1) {
                        app.invite_data = res.data.data;
                    } else {
                        toastMsg(res.data.msg)
                    }
                })
            }
        },
    })
</script>