Procházet zdrojové kódy

feat: pc结构化数据页面留资弹窗更改

yangfeng před 4 roky
rodič
revize
28d7cb6e6e

+ 16 - 3
src/web/staticres/common-module/pc-dialog/css/leave-info-dialog.css

@@ -282,7 +282,7 @@
   width: 380px;
   top: 50%;
   left: 50%;
-  padding: 20px;
+  padding: 32px;
   transform: translateX(-50%) translateY(-50%);
   background: #ffffff;
   border-radius: 8px;
@@ -290,7 +290,7 @@
   z-index: 1038;
 }
 #success-dialog .success-title{
-  padding: 12px 0 20px;
+  padding: 0 0 20px;
   color: #1d1d1d;
   line-height: 28px;
   font-size: 18px;
@@ -303,7 +303,7 @@
   font-size: 14px;
 }
 #success-dialog .success-footer{
-  padding: 32px 0 12px;
+  padding: 32px 0 0;
   text-align: center;
 }
 .mask {
@@ -331,6 +331,19 @@
   cursor: pointer;
   border: 0;
 }
+#success-dialog .dialog-adv{
+  margin-top: 32px;
+  width: 100%;
+  height: 64px;
+  background: #010302;
+  border-radius: 4px;
+  cursor: pointer;
+}
+#success-dialog .dialog-adv > img{
+  width: 100%;
+  height: 100%;
+}
+
 #collect-dialog .custom-btn:disabled{
   opacity: 0.5;
   cursor:not-allowed;

binární
src/web/staticres/common-module/pc-dialog/image/data-export.png


+ 9 - 2
src/web/staticres/common-module/pc-dialog/js/leave-info-dialog.js

@@ -82,10 +82,14 @@ var temp = `
       <div class="mask"></div>
       <div class="success-dialog-container">
         <div class="success-title">提交成功</div>
-        <div class="success-content">我们的客户经理会在24小时内尽快与您联系。</div>
+        <div class="success-content" v-if="defaultSource">我们的客户经理会在24小时内尽快与您联系。</div>
+        <div class="success-content" v-else>我们稍后将以邮件的形式发送数据样例。</div>
         <div class="success-footer">
           <button type="button" class="custom-btn go-know" @click="showSuccess = false">我知道了</button>
         </div>
+        <div class="dialog-adv"  v-if="!defaultSource" @click="dataExport">
+          <img src="/common-module/pc-dialog/image/data-export.png" />
+        </div>
       </div>
     </div>
     <div id="export-dialog" v-show="showExport">
@@ -164,7 +168,6 @@ var vm = new Vue({
         return callback(new Error('验证码格式不正确'));
       } else {
         setTimeout(function() {
-          console.log(vm.codeStatus, '111')
           if (!vm.codeStatus) {
             return callback(new Error('短信验证码不正确'));
           } else {
@@ -283,6 +286,10 @@ var vm = new Vue({
     },
     showCode: function () {
       return this.form.phone !== this.form.oldPhone && this.form.phone.length === 11
+    },
+    defaultSource: function() {
+      // 默认提交成功不显示广告图和邮箱文案 如果是结构化数据则显示
+      return this.source.indexOf('structed') === -1
     }
   },
   mounted() {

+ 8 - 4
src/web/templates/structuredata/pc/index.html

@@ -278,10 +278,14 @@
 <script src="//cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script>
 <script src='{{Msg "seo" "cdn"}}/common-module/pc-dialog/js/leave-info-dialog.js?v={{Msg "seo" "version"}}'></script>
 <script>
-  // 调用留资组件方法 弹出弹框  改为点击触发 传入一个source
-    vm.isNeedSubmit('structedData',function(){
-      vm.showSuccess = true
-    })
+    /*
+      结构化数据页-结构化数据	structedData
+      结构化数据页-数据流量预充值	structedDataFlow
+      结构化数据页-API接口	structedAPI
+      结构化数据页-数据单日限量包	structedDailyLimit
+    */
+   // 调用组件是否留资方法 传入一个来源对应模块 弹出弹框 (页面改版改为点击触发)
+    vm.isNeedSubmit('structedData',function(){})
     $(window).scroll(function() {
         //为了保证兼容性,这里取两个值,哪个有值取哪一个
         //scrollTop就是触发滚轮事件时滚轮的高度