tangdehang
/
android-cloud-H5


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="description" content=" ">
    <link rel="icon" href="../static/img/favicon2.ico" type="img/x-ico">
    <link rel="stylesheet" href="../static/css/index.css?v=1.0.0.6">
    <link rel="stylesheet" href="../static/css/vant.css" />
    <script src="../static/js/vender/jquery-3.4.1.min.js"></script>
    <!-- <script src="../static/js/vender/vue/vue.min.js"></script>
    <script src="../static/js/vender/vue/vant.min.js"></script>
    <script src="../static/js/vender/config.js"></script>
    <script src="../static/js/vender/uuid.js"></script>
    <script src="../static/js/vender/vue/axios.min.js"></script>
    <script src="../static/js/vender/vue/config.js"></script>
    <script src="../static/js/vender/vue/api.js"></script> -->
    <title> 分享攻略</title>
    <style>
        [v-cloak] {
            display: none !important;
        }

        .container {
            display: flex;
            height: 100vh;
            padding: 0.2rem 0.3rem;
            /* align-items: center;
			justify-content: center; */
        }

        .top-banner {
            width: 6.82rem;
            height: 0.82rem;
            background: url("../static/offImg/share-top.png") no-repeat;
            background-size: 100% 100%;
        }

        .footer {
            position: fixed;
            bottom: 0.5rem;
            padding: 0 0.3rem;
            width: 100%;
            left: 0;
            display: flex;
            justify-content: center;
        }

        .download-btn {
            width: 6.9rem;
            height: 1.3rem;
            background: url('../static/offImg/btn-down.png') no-repeat scroll top center #3B7FFF;
            background-size: 100% 100%;
            box-shadow: 0rem 0.06rem 0.4rem 0rem rgba(59, 127, 255, 0.6);
            border-radius: 0.2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 0.4rem;

        }

        .button-download {
            width: 2.5rem;
            height: 0.8rem;
            line-height: 0.8rem;
            background: linear-gradient(360deg, #FF8300 0%, #FEC000 100%);
            border-radius: 0.2rem;
            text-align: center;
            font-size: 0.3rem;
            font-family: PingFangSC-Medium, PingFang SC;
            color: #FFFFFF;
        }


        .download-btn .left-nav p:first-of-type {
            font-size: 0.24rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 0.02rem;
        }

        .download-btn .left-nav p+p {
            font-size: 0.28rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.9);
        }

        .hideContainer {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: calc(100vh - 1.36rem);
            text-align: center;

        }

        .hideContainer img {
            width: 2.8rem;
            height: 2.8rem;
        }

        .hideContainer p {
            margin-top: 0.3rem;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #999999;
            font-size: 0.28rem;
        }

        .top-content {
            width: 6.9rem;
            padding-bottom: 0.3rem;

        }

        .top-content .title {
            font-size: 0.44rem;
            font-family: PingFangSC-Medium, PingFang SC;
            color: #000000;
            letter-spacing: 0.01rem;
            margin-bottom: 0.2rem;
        }

        .topic-info {
            padding-bottom: 1.6rem;

        }

        .topic-info img {
            max-width: 100%;
            width: auto;
            height: auto;
            border-radius: 0.2rem;
            margin-bottom: 0.2rem;
            margin-top: 0.2rem;
        }

        .topic-info {
            font-size: 0.3rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            letter-spacing: 0.02rem;

        }

        .topic-info p {
            font-size: 0.36rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            letter-spacing: 0.02rem;

        }

        .van-notice-bar {
            height: 100%;
            background: none;
            width: 100%;
        }

        .notice-swipe {
            height: 0.8rem;
            line-height: 0.8rem;
        }

        .van-swipe-item {
            display: flex;
            align-items: center;
        }

        .van-swipe-item img {
            width: 0.6rem;
            margin-left: 0.3rem;
            border-radius: 50%;
            margin-right: 0.1rem;
            height: 0.6rem;
        }

        .van-swipe-item p {
            font-size: 0.28rem;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #FFFFFF;
        }

        .van-swipe-item p:first-of-type {
            max-width: 2.4rem;
            display: block;
            overflow: hidden;
            word-break: keep-all;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .topic-info img {
            max-width: 100%;
            width: auto;
            height: auto;
            border-radius: 0.2rem;
            margin-bottom: 0.2rem;
            margin-top: 0.2rem;
        }

        .topic-info p {
            font-size: 0.3rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            letter-spacing: 0.02rem;

        }

        .van-dialog__footer {
            display: none;
        }

        .top-banner {
            margin: 0 auto;
        }


        .hide {
            display: none;
        }
    </style>
</head>

<body>

    <div id="app" v-cloak class="container ">
        <div v-if='isshow&&topic!=null' style="margin: 0 auto;">

            <div class="top-banner">
                <van-notice-bar :scrollable="false">
                    <van-swipe vertical class="notice-swipe" :autoplay="2000" :show-indicators="false">
                        <van-swipe-item v-for="(item,index) in marqueeList">
                            <img :src="standarImg(item.headImgUrl)" :onerror="defaultImg" alt="">
                            <p class="hide">测试1212111111112</p>
                            <p>{{item.surfaceName}}</p>
                            <p>已获得星动云手机套餐</p>
                        </van-swipe-item>

                    </van-swipe>
                </van-notice-bar>
            </div>
            <div class="top-content">
                <div v-html="topic" class="topic-info"></div>
                <div class="ipt"></div>

            </div>
            <div class="footer">
                <div class="download-btn">
                    <div class="left-nav">
                        <p>激活码：</p>
                        <p>AS4*********SD3</p>
                    </div>
                    <div class="button-download copybtn" @click='createCopy()'>点击复制并下载</div>
                </div>
            </div>
        </div>
        <div v-if='!isshow' class="hideContainer">
            <div>
                <img src="../static/offImg/no-data.png" alt="" />
                <p>{{msg}}，敬请期待</p>
            </div>
        </div>
    </div>
    <!-- <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->
    <script src="../static/js/vender/vue/vue.min.js"></script>
    <script src="../static/js/vender/vue/vant.min.js"></script>
    <script src="../static/js/vender/config.js"></script>
    <script src="../static/js/vender/uuid.js"></script>
    <script src="../static/js/vender/vue/axios.min.js"></script>
    <script src="../static/js/vender/vue/config.js"></script>
    <script src="../static/js/vender/vue/api.js"></script>

    <script type="text/javascript">
        // var meta_description = document.getElementsByTagName('meta')['description']
        // document.title = '更新标题'
        // meta_description.content = '更新描述'; // Android iOS

        var u = navigator.userAgent,
            app = navigator.appVersion;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

        new Vue({
            el: '#app',
            data: {
                isshow: true,
                id: GetRequest().id ? GetRequest().id : 404,
                username: GetRequest().username ? GetRequest().username : 'KtIC61639034703',
                topic: null,
                defaultImg: 'this.src="' + "../static/offImg/tou.png" + '"',
                marqueeList: [],
                code: '',
                msg: '活动已下架',
                tagId: 0,
                uuid: '',
                flag: true,
                timer: null,

            },
            created() {
                // window.location.href = 'investigate.html'
            },
            mounted() {
                //  document.querySelector('#app').classList.remove('hide');
                this.getActDetail();
                this.getMarquee(); //跑马灯
                if (localStorage.getItem("uuid")) {
                    this.uuid = localStorage.getItem("uuid");
                } else {
                    this.uuid = UUID.generate();
                    localStorage.setItem("uuid", this.uuid);
                }
                console.log(this.uuid);
            },
            methods: {
                //查看活动是否下架
                getActDetail() { //获取活动状态
                    getActDetail().then(res => {
                        this.$toast.clear();
                        if (res.status === 0) {
                            if (res.data.actStatus == 1) {
                                this.isshow = true;
                                this.getStrategy();
                            } else {
                                this.isshow = false;
                            }
                        } else {
                            this.$toast(res.msg);
                        }
                    }).catch((error) => {
                        console.log(error)
                        this.$toast('网络异常');
                    });
                },
                getCheck() {
                    getEvantCheck(this.id).then(res => {
                        console.log(res)
                    })
                },
                createCopy() {
                    // this.$toast.loading({
                    //     duration: 0,
                    //     message: '加载中...',
                    //     forbidClick: true,
                    //     loadingType: 'spinner',
                    // });
                    systemBuriedPoint({
                        pointName: 'dt_裂变_h5_复制激活码'
                    }).then(res => {})
                    // var clipboard = new ClipboardJS('.copybtn')
                    getActivationCode(this.username, this.tagId, this.uuid).then(res => {
                        this.$toast.clear();
                        if (res.status === 0) {
                            //此处为点击的dom的类名
                            this.code = res.data;
                            console.log(this.code);
                            this.copyUrl(this.code);
                        } else {
                            this.$dialog.alert({
                                message: res.msg
                            });
                            setTimeout(() => {
                                this.$dialog.close();
                            }, 2000)
                        }

                    }).catch((error) => {
                        console.log(error)
                        this.$toast('复制失败');
                    });

                },
                download() {
                    if (isAndroid) {
                        console.log(isAndroid);
                        window.location.href =
                            'http://www.androidscloud.com//suanchou';
                    } else if (isIOS) {
                        window.location.href = 'https://www.pgyer.com/gemini6';
                    }
                },
                standarImg(id) {
                    return `${fileCenterApi}/file-center/fileOperate/getImage?id=${id}`;
                },
                getMarquee() {
                    getMarquee().then(res => {
                        if (res.status === 0) {
                            this.marqueeList = res.data;
                        } else {
                            this.$toast(res.msg);
                        }
                    })
                },
                getStrategy() {
                    this.$toast.loading({
                        duration: 0,
                        message: '加载中...',
                        forbidClick: true,
                        loadingType: 'spinner',
                    });
                    getStrategy().then(res => {
                        this.$toast.clear();
                        if (res.status == 0) {
                            if (res.data) {
                                this.isshow = true;
                                this.topic = res.data.content;
                                this.tagId = res.data.tagId;
                                console.log(this.topic)
                            } else {
                                this.msg = res.msg;
                                this.isshow = false;

                            }

                        }
                        console.log(res)

                    }).catch((error) => {
                        console.log(error)
                        this.$toast('网络异常');
                    });
                },
                copyUrl() {
                    this.stopManyClick(() => {
                        var oInput = document.createElement('input'); //创建一个input
                        oInput.setAttribute("readonly", "readonly"); //设置只读，否则移动端使用复制功能时可能会造成软件盘弹出
                        // this.$nextTick();
                        setTimeout(() => {
                            try {
                                const input = document.createElement('textarea')
                                input.value = this.code
                                document.body.appendChild(input)
                                input.select() // 选择对象
                                document.execCommand('Copy') // 执行浏览器复制命令
                                input.style.display = 'none'
                                input.remove()
                                this.$dialog.alert({
                                    message: `复制成功`
                                });
                                setTimeout(() => {
                                    this.$dialog.close();
                                    this.download();
                                }, 2000)
                            } catch (err) {
                                this.$dialog.alert({
                                    message: `复制失败`
                                });
                                setTimeout(() => {
                                    this.$dialog.close();
                                    //  this.download();
                                }, 2000)
                            }
                        }, 0)

                    })

                },
                selectText(textbox, startIndex, stopIndex) {
                    if (textbox.createTextRange) { //ie
                        const range = textbox.createTextRange();
                        range.collapse(true);
                        range.moveStart('character', startIndex); //起始光标
                        range.moveEnd('character', stopIndex - startIndex); //结束光标
                        range.select(); //不兼容苹果
                    } else { //firefox/chrome
                        textbox.setSelectionRange(startIndex, stopIndex);
                        textbox.focus();
                    }
                },
                stopManyClick(fn) { //防抖
                    if (this.flag) {
                        fn();
                    }
                    this.flag = false;
                    if (this.timer) {
                        clearTimeout(this.timer);
                    }
                    this.timer = setTimeout(() => {
                        this.flag = true
                    }, 1500);
                },
                onCopy() {
                    console.log(2323);
                    this.$toast('复制成功');
                },
                onError() {
                    this.$toast('复制失败');

                },
            }

        })
    </script>
</body>

</html>