tangdehang
/
android-cloud-H5


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580
							<!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">
    <link rel="stylesheet" href="../static/css/vant.css" />
    <script src="../static/js/vender/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="../static/css/verify.css">
	<link rel="stylesheet" href="../static/js/vender/toastr/toastr.min.css">
	<script>
		(function () {
			if (!window.Promise) {
				document.writeln('<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.min.js"><' + '/' + 'script>');
			}
		})();
	</script>
	<script src="../static/js/vender/toastr/toastr.min.js"></script>
	<script src="../static/js/vender/config.js"></script>
	<script src="../static/js/vender/crypto-js.js"></script>
	<script src="../static/js/vender/ase.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-top: 0.2rem;
            /* align-items: center;
			justify-content: center; */
        }

        .top-banner {
            width: 6.9rem;
            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: 7.2rem;
            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;
            margin-bottom: 0.1rem;
        }

        .hide {
            display: none !important;
        }

        .van-overlay {
            background-color: rgba(0, 0, 0, 0.5);
        }

        .van-dialog__content {
            /* padding: 0.3rem 0.6rem; */
            min-height: unset !important;
        }

        .van-dialog {
            border-radius: 0.2rem;
            width: unset !important;
        }

        .van-dialog__message {
            padding: 0.3rem 0.6rem;
            font-size: 0.3rem;
            white-space: nowrap;
            font-family: PingFangSC-Regular, PingFang SC;
        }

        .van-dialog__content {
            border-radius: 0.2rem;
        }
    </style>
</head>

<body>
    <div id="mpanel2"></div>
    <!-- <input id="foo" value="hello,clipboard."> -->
    <button id="wewewe" style="display: none">复制到剪贴板</button>
    <!-- <div class="ipt"></div> -->
    <div id="app" v-cloak class="container ">

        <div v-if='isshow&&topic!=null' style="margin: 0 auto;">
            <div class="footer">
                <div class="download-btn">
                    <div class="left-nav">
                        <p>激活码：</p>
                        <p>AS4*********SD3</p>
                    </div>
                    <!-- @click='createCopy()' -->
                    <div class="button-download " id="form-btn">点击复制并下载</div>
                </div>
            </div>
            <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="">
                            <div class="hide">双子星邀请你免费领取云手机</div>
                            <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>

        </div>
        <div v-if='!isshow' class="hideContainer">
            <div>
                <img src="../static/offImg/no-data.png" alt="" />
                <p>{{msg}}，敬请期待</p>
            </div>
        </div>
    </div>
	<script src="../static/js/vender/verify.js"></script>
	<script src="../static/js/vender/clipboard.min.js"></script>
    <script src="../static/js/vender/vue/vue.min.js"></script>
    <script src="../static/js/vender/vue/vue-clipboard.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 oInput = document.createElement('input'); //创建一个input
        // oInput.setAttribute("readonly", "readonly"); //设置只读，否则移动端使用复制功能时可能会造成软件盘弹出
        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终端
        var clipboard = new ClipboardJS('.copybtn') //此处为点击的dom的类名
        var html = document.documentElement;
		var imgWidth = html.getBoundingClientRect().width / 750 * 400 + 'px';
		var imgHeight = html.getBoundingClientRect().width / 750 * 200 + 'px';
		var barHeight = html.getBoundingClientRect().width / 750 * 70 + 'px';
        new Vue({
            el: '#app',
            data: {
                isshow: true,
                id: GetRequest().id ? GetRequest().id : 404,
                username: GetRequest().username ? GetRequest().username : '',
                topic: null,
                defaultImg: 'this.src="' + "../static/offImg/tou.png" + '"',
                marqueeList: [],
                code: '',
                msg: '活动已下架',
                strategyId: GetRequest().strategyId ? GetRequest().strategyId : '',
                tagId: GetRequest().tagId ? GetRequest().tagId : '',
                uuid: '',
                flag: true,
                timer: null,

            },
            created() {
                // window.location.href = 'investigate.html'
                setTimeout(() => {
                    this.validate(); // 生成验证码
                },500)
            },
            mounted() {
                // this.$dialog.alert({
                //     message: '激活码总数已上限，谢谢参与'
                // })
                //  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(captchaVerification) {
                    // this.$toast.loading({
                    //     duration: 0,
                    //     message: '加载中...',
                    //     forbidClick: true,
                    //     loadingType: 'spinner',
                    this.stopManyClick(() => {
                        systemBuriedPoint({
                            pointName: 'dt_裂变_h5_复制激活码'
                        }).then(res => {

                        })
                        getActivationCode(this.username, this.tagId, this.uuid, captchaVerification).then(res => {
                            this.$toast.clear();
                            if (res.status === 0) {
                                //此处为点击的dom的类名
                                this.code = res.data;
                                this.copyUrl();
                            } else {
                                this.$dialog.alert({
                                    message: res.msg
                                });
                                setTimeout(() => {
                                    this.$dialog.close();
                                    this.download();
                                }, 2000)
                            }

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

                        });
                    })


                },
                download() {
                    if (isAndroid) {
                        if (baseUrl == 'https://per.cs.se.androidscloud.com') {
                            window.location.href = 'http://per.cs.se.androidscloud.com:8888/suanchou'
                        } else {
                            window.location.href = 'http://www.androidscloud.com/suanchou?timestamp=' + Math.random();
                        }

                    } else if (isIOS) {
                        document.location.href = 'https://www.pgyer.com/gemini6?timestamp=' + Math.random();
                    } else {
                        document.location.href = 'https://www.androidscloud.com?timestamp=' + Math.random();
                    }
                },
                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(this.strategyId).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;
                            }
                        }else {
                            this.$toast(res.msg);
                        }
                        console.log(res)
                    }).catch((error) => {
                        console.log(error)
                        this.$toast('网络异常');
                    });
                },
                validate() {
                    $('#mpanel2').slideVerify({
                        baseUrl: baseUrl + '/api/user',  //服务器请求地址, 默认地址为安吉服务器;
                        mode: 'pop',     //展示模式
                        containerId: 'form-btn', //pop模式 必填 被点击之后出现行为验证码的元素id
                        imgSize: { //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
                            width: imgWidth,
                            height: imgHeight
                        },
                        vm: this,
                        barSize: {//下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
                            width: imgWidth,
                            height: barHeight
                        },
                        beforeCheck: function () {
                            return true
                        },
                        ready: function () { },  //加载完毕的回调
                        success: (params) => { //成功的回调
                            this.createCopy(params.captchaVerification);
                        },
                        error: function () {}
                    });
                },
                copyUrl() {
                    var oInput = document.createElement('input'); //创建一个input
                    oInput.setAttribute("readonly", "readonly"); //设置只读，否则移动端使用复制功能时可能会造成软件盘弹出
                    setTimeout(() => {
                        oInput.value = this.code;
                        // $('.ipt')[0].appendChild(oInput); //将input插入到body
                        // oInput.select(); // 选择对象 ios不支持
                        document.body.appendChild(oInput)
                        this.selectText(oInput, 0, oInput.value.length);
                        document.execCommand("Copy"); // 执行浏览器复制命令
                        this.$dialog.alert({
                            message: `复制成功`
                        })
                        oInput.style.display = 'none'; // 将input隐藏
                        oInput.blur();
                        oInput.remove(); // 将input销毁
                        setTimeout(() => {
                            this.$dialog.close();
                            // this.download();
                        }, 2000)
                    }, 400)

                },
                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>