|
|
@@ -262,14 +262,124 @@
|
|
|
.van-dialog__content {
|
|
|
border-radius: 0.2rem;
|
|
|
}
|
|
|
+ .mask {
|
|
|
+ width: 7.5rem;
|
|
|
+ height: 100vh;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.24);
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog {
|
|
|
+ width: 6.22rem;
|
|
|
+ height: 5.44rem;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 0.2rem;
|
|
|
+ position: absolute;
|
|
|
+ left: 0.72rem;
|
|
|
+ top: -6.96rem;
|
|
|
+ /* overflow: hidden; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgs-block{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 0.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgs{
|
|
|
+ width: 3.08rem;
|
|
|
+ height: 2.82rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgs-text{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ font-size: 0.32rem;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .get-success-block{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 0.6rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .get-success{
|
|
|
+ width: 4.6rem;
|
|
|
+ height: 0.9rem;
|
|
|
+ line-height: 0.9rem;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 0.25rem;
|
|
|
+ background: linear-gradient(180deg, #6DB6FF 0%, #3B7FFF 100%);
|
|
|
+ border-radius: 0.2rem;
|
|
|
+ }
|
|
|
+ .close{
|
|
|
+ width: 0.48rem;
|
|
|
+ height: 0.48rem;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -0.8rem;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -0.24rem;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+ #toast-container>.toast-error {
|
|
|
+ background-image: none!important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .toast-error {
|
|
|
+ background-color: rgba(0, 0, 0, 0.7);
|
|
|
+ }
|
|
|
+
|
|
|
+ .toast-message {
|
|
|
+ font-size: 0.24rem;
|
|
|
+ padding: 0 0.1rem;
|
|
|
+ line-height: 0.9rem;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ #toast-container>div {
|
|
|
+ width: 4rem;
|
|
|
+ height: 0.9rem;
|
|
|
+ opacity: 1;
|
|
|
+ padding: 0 !important;
|
|
|
+ border-radius: 0.2rem;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .toast-center-center {
|
|
|
+ position: fixed;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ z-index: 99;
|
|
|
+ margin-top: -0.45rem;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .mask{
|
|
|
+ position: fixed;
|
|
|
+ width: 100vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 480px) and (min-width: 241px) {
|
|
|
+ #toast-container>div {
|
|
|
+ min-width: 80px !important;
|
|
|
+ width: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
</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="form-btn"></div>
|
|
|
<div id="app" v-cloak class="container ">
|
|
|
|
|
|
<div v-if='isshow&&topic!=null' style="margin: 0 auto;">
|
|
|
@@ -280,7 +390,7 @@
|
|
|
<p>AS4*********SD3</p>
|
|
|
</div>
|
|
|
<!-- @click='createCopy()' -->
|
|
|
- <div class="button-download " id="form-btn">点击复制并下载</div>
|
|
|
+ <div class="button-download " @click='copyHandle()'>点击复制并下载</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="top-banner">
|
|
|
@@ -309,8 +419,19 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="mask">
|
|
|
+ <div class="dialog">
|
|
|
+ <div class="imgs-block">
|
|
|
+ <img class="imgs" src="img/success.png" />
|
|
|
+ <div class="imgs-text">图形校验成功</div>
|
|
|
+ </div>
|
|
|
+ <div class="get-success-block">
|
|
|
+ <div class="get-success">复制激活码</div>
|
|
|
+ </div>
|
|
|
+ <img class="close" src="img/close.png" />
|
|
|
+ </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>
|
|
|
@@ -319,7 +440,10 @@
|
|
|
<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>
|
|
|
+ toastr.options.positionClass = 'toast-center-center';
|
|
|
+ toastr.options.timeOut = '1500';
|
|
|
+ </script>
|
|
|
<script type="text/javascript">
|
|
|
// var meta_description = document.getElementsByTagName('meta')['description']
|
|
|
// document.title = '更新标题'
|
|
|
@@ -335,6 +459,52 @@
|
|
|
var imgWidth = html.getBoundingClientRect().width / 750 * 400 + 'px';
|
|
|
var imgHeight = html.getBoundingClientRect().width / 750 * 200 + 'px';
|
|
|
var barHeight = html.getBoundingClientRect().width / 750 * 70 + 'px';
|
|
|
+ var code = '';
|
|
|
+ $('.close')[0].addEventListener('click', (e) => {
|
|
|
+ $('.dialog').animate({top: '-6.96rem'},"fast");
|
|
|
+ $('.mask').hide();
|
|
|
+ document.documentElement.style.overflow='auto';
|
|
|
+ });
|
|
|
+ $('.get-success-block')[0].addEventListener('click', (e) => {
|
|
|
+ copyUrl();
|
|
|
+ });
|
|
|
+ function copyUrl() {
|
|
|
+ var oInput = document.createElement('input'); //创建一个input
|
|
|
+ oInput.setAttribute("readonly", "readonly"); //设置只读，否则移动端使用复制功能时可能会造成软件盘弹出
|
|
|
+ setTimeout(() => {
|
|
|
+ oInput.value = code;
|
|
|
+ // $('.ipt')[0].appendChild(oInput); //将input插入到body
|
|
|
+ // oInput.select(); // 选择对象 ios不支持
|
|
|
+ document.body.appendChild(oInput)
|
|
|
+ selectText(oInput, 0, oInput.value.length);
|
|
|
+ document.execCommand("Copy"); // 执行浏览器复制命令
|
|
|
+ toastr.error(`复制成功`);
|
|
|
+ $('.dialog').animate({top: '-6.96rem'},"fast");
|
|
|
+ $('.mask').hide();
|
|
|
+ document.documentElement.style.overflow='auto';
|
|
|
+ oInput.style.display = 'none'; // 将input隐藏
|
|
|
+ oInput.blur();
|
|
|
+ oInput.remove(); // 将input销毁
|
|
|
+ document.location.href = 'https://www.pgyer.com/gemini6?timestamp=' + Math.random();
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.$dialog.close();
|
|
|
+ // // this.download();
|
|
|
+ // }, 2000)
|
|
|
+ }, 400)
|
|
|
+
|
|
|
+ };
|
|
|
+ function 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();
|
|
|
+ }
|
|
|
+ };
|
|
|
new Vue({
|
|
|
el: '#app',
|
|
|
data: {
|
|
|
@@ -355,15 +525,13 @@
|
|
|
},
|
|
|
created() {
|
|
|
// window.location.href = 'investigate.html'
|
|
|
- setTimeout(() => {
|
|
|
- this.validate(); // 生成验证码
|
|
|
- },500)
|
|
|
},
|
|
|
mounted() {
|
|
|
// this.$dialog.alert({
|
|
|
// message: '激活码总数已上限，谢谢参与'
|
|
|
// })
|
|
|
// document.querySelector('#app').classList.remove('hide');
|
|
|
+ // this.validate(); // 生成验证码
|
|
|
this.getActDetail();
|
|
|
this.getMarquee(); //跑马灯
|
|
|
if (localStorage.getItem("uuid")) {
|
|
|
@@ -372,9 +540,32 @@
|
|
|
this.uuid = UUID.generate();
|
|
|
localStorage.setItem("uuid", this.uuid);
|
|
|
}
|
|
|
- console.log(this.uuid);
|
|
|
},
|
|
|
methods: {
|
|
|
+ copyHandle(){
|
|
|
+ getActivationCode(this.username, this.tagId, this.uuid).then(res => {
|
|
|
+ this.$toast.clear();
|
|
|
+ if (res.status === 2 || res.status === 11) {
|
|
|
+ $('#mpanel2').eq(0).text('');
|
|
|
+ this.validate(); // 生成验证码
|
|
|
+ setTimeout(() => {
|
|
|
+ document.getElementById('form-btn').click();
|
|
|
+ },500)
|
|
|
+ } else {
|
|
|
+ systemBuriedPoint({
|
|
|
+ pointName: 'dt_裂变_h5_复制激活码'
|
|
|
+ }).then(res => {})
|
|
|
+ this.code = res.data;
|
|
|
+ this.copyUrl();
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch((error) => {
|
|
|
+ alert(error)
|
|
|
+ this.$toast('复制失败');
|
|
|
+ this.download()
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
//查看活动是否下架
|
|
|
getActDetail() { //获取活动状态
|
|
|
getActDetail().then(res => {
|
|
|
@@ -414,9 +605,18 @@
|
|
|
getActivationCode(this.username, this.tagId, this.uuid, captchaVerification).then(res => {
|
|
|
this.$toast.clear();
|
|
|
if (res.status === 0) {
|
|
|
- //此处为点击的dom的类名
|
|
|
- this.code = res.data;
|
|
|
- this.copyUrl();
|
|
|
+ if(isAndroid){
|
|
|
+ this.code = res.data;
|
|
|
+ this.copyUrl();
|
|
|
+ }else if(isIOS){
|
|
|
+ $('.dialog').animate({top: '3.36rem'},"fast");
|
|
|
+ $('.mask').show();
|
|
|
+ document.documentElement.style.overflow='hidden';
|
|
|
+ code = res.data;
|
|
|
+ } else {
|
|
|
+ this.code = res.data;
|
|
|
+ this.copyUrl();
|
|
|
+ }
|
|
|
} else {
|
|
|
this.$dialog.alert({
|
|
|
message: res.msg
|
|
|
@@ -428,9 +628,9 @@
|
|
|
}
|
|
|
|
|
|
}).catch((error) => {
|
|
|
- console.log(error)
|
|
|
+ alert(error)
|
|
|
this.$toast('复制失败');
|
|
|
- //this.download()
|
|
|
+ this.download()
|
|
|
|
|
|
});
|
|
|
})
|
|
|
@@ -501,21 +701,24 @@
|
|
|
width: imgWidth,
|
|
|
height: imgHeight
|
|
|
},
|
|
|
- vm: this,
|
|
|
barSize: {//下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
|
|
|
width: imgWidth,
|
|
|
height: barHeight
|
|
|
},
|
|
|
- beforeCheck: function () {
|
|
|
+ beforeCheck: () => {
|
|
|
return true
|
|
|
},
|
|
|
- ready: function () { }, //加载完毕的回调
|
|
|
+ ready: () => {
|
|
|
+ }, //加载完毕的回调
|
|
|
success: (params) => { //成功的回调
|
|
|
this.createCopy(params.captchaVerification);
|
|
|
},
|
|
|
error: function () {}
|
|
|
});
|
|
|
},
|
|
|
+ handTouch(e){
|
|
|
+ e.preventDefault();
|
|
|
+ },
|
|
|
copyUrl() {
|
|
|
var oInput = document.createElement('input'); //创建一个input
|
|
|
oInput.setAttribute("readonly", "readonly"); //设置只读，否则移动端使用复制功能时可能会造成软件盘弹出
|
|
|
@@ -534,7 +737,7 @@
|
|
|
oInput.remove(); // 将input销毁
|
|
|
setTimeout(() => {
|
|
|
this.$dialog.close();
|
|
|
- // this.download();
|
|
|
+ this.download();
|
|
|
}, 2000)
|
|
|
}, 400)
|
|
|
|
huangxiaojing
