Просмотр исходного кода

Merge remote-tracking branch 'origin/dev-4.9.3-bug' into dev-4.9.4

heyang лет назад: 4
Родитель
Сommit
6bf0e774aa

+ 14 - 3
microserviceUserH5/static/js/vender/verify.js

@@ -193,7 +193,11 @@
         	var panelHtml = '';
         	var wrapHtml = '';
 			this.lengthPercent = (parseInt(this.setSize.img_width)-parseInt(this.setSize.block_width)- parseInt(this.setSize.circle_radius) - parseInt(this.setSize.circle_radius) * 0.8)/(parseInt(this.setSize.img_width)-parseInt(this.setSize.bar_height));
-			
+			if(!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
+				this.setSize.img_width = '220px'
+				this.setSize.img_height = '100px'
+				this.setSize.bar_height = '38px'
+			}
 			wrapStartHtml = '<div class="mask">'+
 								'<div class="verifybox" style="width:'+(parseInt(this.setSize.img_width)+30)+'px">'+
 									'<div class="verifybox-top">'+
@@ -317,12 +321,19 @@
         end: function() {
 			this.endMovetime = new Date().getTime();
         	var _this = this;
+			// $vm = this.options.vm;
+			// $vm.code = '6565';
+			// $vm.copyUrl();
+			// return
         	//判断是否重合
         	if(this.status  && this.isEnd == false) {
+				// $vm = this.options.vm;
+				// $vm.code = '6565';
+				// $vm.copyUrl();
+				// return
+				//图片滑动
 				var vOffset = parseInt(this.options.vOffset);
 				this.moveLeftDistance = this.moveLeftDistance * 310/ parseInt(this.setSize.img_width)
-				//图片滑动
-
 				var data = {
 					captchaType:this.options.captchaType,
 					"pointJson": this.secretKey ? aesEncrypt(JSON.stringify({x:this.moveLeftDistance,y:5.0}),this.secretKey):JSON.stringify({x:this.moveLeftDistance,y:5.0}),

+ 9 - 2
microserviceUserH5/static/js/vender/vue/api.js

@@ -70,9 +70,16 @@ function getStrategy(id) {
   })
 }
 //新用户使用激活码
-function getActivationCode(data,tagId,deviceId) {
+function getActivationCode(data,tagId,deviceId,captchaVerification) {
+  var urls = '';
+  if(captchaVerification){
+    captchaVerification = encodeURIComponent(captchaVerification);
+    urls = `/api/public/v4/actFissionAward/getActivationCode?username=${data}&tagId=${tagId}&deviceId=${deviceId}&captchaVerification=${captchaVerification}`
+  }else{
+    urls = `/api/public/v4/actFissionAward/getActivationCode?username=${data}&tagId=${tagId}&deviceId=${deviceId}`
+  }
   return service({
-    url: `/api/public/v4/actFissionAward/getActivationCode?username=${data}&tagId=${tagId}&deviceId=${deviceId}`,
+    url: urls,
     method: 'get',
 
   

+ 271 - 20
microserviceUserH5/vcloud/actFissionShare.html

@@ -9,6 +9,19 @@
     <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>
@@ -249,11 +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 class="ipt"></div>
+    <div id="mpanel2"></div>
+    <div id="form-btn"></div>
     <div id="app" v-cloak class="container ">
 
         <div v-if='isshow&&topic!=null' style="margin: 0 auto;">
@@ -263,7 +389,8 @@
                         <p>激活码:</p>
                         <p>AS4*********SD3</p>
                     </div>
-                    <div class="button-download " @click='createCopy()'>点击复制并下载</div>
+                    <!-- @click='createCopy()' -->
+                    <div class="button-download " @click='copyHandle()'>点击复制并下载</div>
                 </div>
             </div>
             <div class="top-banner">
@@ -292,6 +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/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>
@@ -300,18 +440,71 @@
     <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 = '更新标题'
         // meta_description.content = '更新描述'; // Android iOS
-        var oInput = document.createElement('input'); //创建一个input
-        oInput.setAttribute("readonly", "readonly"); //设置只读,否则移动端使用复制功能时可能会造成软件盘弹出
+        // 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';
+        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: {
@@ -338,6 +531,7 @@
                 //     message: '激活码总数已上限,谢谢参与'
                 // })
                 //  document.querySelector('#app').classList.remove('hide');
+                // this.validate(); // 生成验证码
                 this.getActDetail();
                 this.getMarquee(); //跑马灯
                 if (localStorage.getItem("uuid")) {
@@ -346,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 => {
@@ -373,7 +590,7 @@
                         console.log(res)
                     })
                 },
-                createCopy() {
+                createCopy(captchaVerification) {
                     // this.$toast.loading({
                     //     duration: 0,
                     //     message: '加载中...',
@@ -385,27 +602,35 @@
                         }).then(res => {
 
                         })
-                        getActivationCode(this.username, this.tagId, this.uuid).then(res => {
+                        getActivationCode(this.username, this.tagId, this.uuid, captchaVerification).then(res => {
                             this.$toast.clear();
                             if (res.status === 0) {
-                                //此处为点击的dom的类名
-                                this.code = res.data;
-                                console.log(this.code);
-                                this.copyUrl(this.code);
+                                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
                                 });
                                 setTimeout(() => {
                                     this.$dialog.close();
-                                    //this.download();
+                                    this.download();
                                 }, 2000)
                             }
 
                         }).catch((error) => {
-                            console.log(error)
+                            alert(error)
                             this.$toast('复制失败');
-                            //this.download()
+                            this.download()
 
                         });
                     })
@@ -414,8 +639,6 @@
                 },
                 download() {
                     if (isAndroid) {
-                        console.log(isAndroid);
-                        console.log(baseUrl)
                         if (baseUrl == 'https://per.cs.se.androidscloud.com') {
                             window.location.href = 'http://per.cs.se.androidscloud.com:8888/suanchou'
                         } else {
@@ -424,6 +647,8 @@
 
                     } 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) {
@@ -460,14 +685,41 @@
                             }
                         }else {
                             this.$toast(res.msg);
-                                                                     }
+                        }
                         console.log(res)
                     }).catch((error) => {
                         console.log(error)
                         this.$toast('网络异常');
                     });
                 },
-                copyUrl(actStatus) {
+                validate() {
+                    $('#mpanel2').slideVerify({
+                        baseUrl: baseUrl + '/api/user',  //服务器请求地址, 默认地址为安吉服务器;
+                        mode: 'pop',     //展示模式
+                        containerId: 'form-btn', //pop模式 必填 被点击之后出现行为验证码的元素id
+                        imgSize: { //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
+                            width: imgWidth,
+                            height: imgHeight
+                        },
+                        barSize: {//下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
+                            width: imgWidth,
+                            height: barHeight
+                        },
+                        beforeCheck: () => {
+                            return true
+                        },
+                        ready:  () => { 
+                        },  //加载完毕的回调
+                        success: (params) => { //成功的回调
+                            this.createCopy(params.captchaVerification);
+                        },
+                        error: function () {}
+                    });
+                },
+                handTouch(e){
+                    e.preventDefault();
+                },
+                copyUrl() {
                     var oInput = document.createElement('input'); //创建一个input
                     oInput.setAttribute("readonly", "readonly"); //设置只读,否则移动端使用复制功能时可能会造成软件盘弹出
                     setTimeout(() => {
@@ -489,7 +741,6 @@
                         }, 2000)
                     }, 400)
 
-
                 },
                 selectText(textbox, startIndex, stopIndex) {
                     if (textbox.createTextRange) { //ie

BIN
microserviceUserH5/vcloud/img/close.png


BIN
microserviceUserH5/vcloud/img/success.png