调整跳转

pages/courseware/custom.vue

@@ -58,7 +58,7 @@
           <p>汽车销售业</p>
         </div>
       </div>
-      <el-button class="zixun-online" type="primary" @click="gozixun">在线咨询</el-button>
+      <a class="zixun-online" href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd">在线咨询</a>
     </div>
 
     <div class="course-content client-container" v-if="active === 'spl'">
@@ -90,7 +90,8 @@
           <p>服务零售业</p>
         </div>
       </div>
-      <el-button class="zixun-online" type="primary" @click="gozixun">在线咨询</el-button>
+      <a class="zixun-online" href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd">在线咨询</a>
+
 
     </div>
 
@@ -111,7 +112,8 @@
           <p>物流业</p>
         </div>
       </div>
-      <el-button class="zixun-online" type="primary" @click="gozixun">在线咨询</el-button>
+      <a class="zixun-online" href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd">在线咨询</a>
+
 
     </div>
 
@@ -132,7 +134,8 @@
           <p>生产制造业</p>
         </div>
       </div>
-      <el-button class="zixun-online" type="primary" @click="gozixun">在线咨询</el-button>
+      <a class="zixun-online" href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd">在线咨询</a>
+
 
     </div>
 
@@ -166,13 +169,16 @@
 
           <el-button class="form-f6" type="primary" @click="handleYuyue">预约咨询顾客</el-button>
 
-
-          <p class="form-f7">
-            <span class="icon-w1"><i></i>李**</span><span>125****55545</span><span>30分钟前</span>
-          </p>
-
         </div>
-
+        <div class="form-f7" v-if="userList.length">
+          <div v-swiper:mySwiper="swiperOption" class="swiper-container">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide div-row" v-for=" (d,index) in userData" :key="index">
+                <span class="icon-w1"><i></i><span>{{d.chenghu}}</span></span><span>{{d.phone}}</span><span>{{d.timer}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -191,6 +197,8 @@
 </template>
 
 <script>
+import Swiper, {Autoplay} from 'swiper';
+Swiper.use([Autoplay]);
 export default {
   name:       'custom',
   layout:     'templateB',
@@ -198,22 +206,46 @@ export default {
     // 设置选中菜单
     store.commit('setActiveNav', '/courseware');
 
-    let [res1, res2] =  await Promise.all([
+    let [res1, res2, res3] =  await Promise.all([
       await $axios.$post(`/home/news/carousel`,{'newsClassifyId':0,'keyword':'课程'}).then(res=>{
         return res
       }),
       await $axios.$post(`/develop/sum`,{}).then(res=>{
         return res
       }),
+      await $axios.$post(`/develop/userlist`,{}).then(res=>{
+        return res
+      }),
     ])
     return {
       topCarousels : res1.data.data ||[],
       custom_sum: res2.data || 0,
+      userList: res3.data.data || []
     }
   },
+  components: {
+    mySwiper: Swiper
+  },
   data() {
     return {
 
+      swiperOption: {
+        autoplay: {
+          delay: 2000,
+        },
+        height: 25,
+        direction: 'vertical',
+        paginationClickable: true,
+        speed: 800,
+        loop: false,
+        observer: true,
+        observeParents: true,
+        autoplayDisableOnInteraction: false,
+        allowTouchMove: false,
+      },
+
+      userData: [],
+
       videoDialogFlag:false,
       source:'',
       footerText:'',
@@ -356,6 +388,9 @@ export default {
     }
   },
   methods:    {
+    getName() {},
+    getTel() {},
+    getTime() {},
     gozixun() {
       window.href = "https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd";
     },
@@ -585,11 +620,66 @@ export default {
       });
 
     },
-    clickBanner() {}
+    clickBanner() {},
+    formatUserData() {
+      const userList = this.userList.filter(user => user.chenghu)
+      const newUserList = userList.map(user => {
+        const chenghu = user.chenghu.length > 2 ? `${user.chenghu[0]}**`: `${user.chenghu[0]}*`;
+        const ps = user.phone.split('');
+        const phone = `${ps[0]}${ps[1]}${ps[2]}****${ps[7]}${ps[8]}${ps[9]}${ps[10]}`;
+        return {
+          chenghu: chenghu,
+          phone,
+          timer: this.getTimeString(user.endSecond)
+        }
+      })
+      this.userData = newUserList;
+    },
+
+    getTimeString(timer) {
+      let m10 = 10 * 60  * 1000;
+      let m30 = 30 * 60 * 1000;
+      let h1 = 60 * 60 * 1000 ;
+      let h6 = 6 * 60 * 60 * 1000;
+      let d1 = 24 * 60 * 60 * 1000;
+      let z1 = 7 * 24 * 60 * 60 * 1000;
+      let M1  = 30 * 24 * 60 * 60 * 1000;
+
+      if (timer > M1) {
+        return `1个月前`
+      }
+
+      if(timer > z1) {
+        return `1周前`
+      }
+
+      if(timer > d1) {
+        return `1天前`
+      }
+
+      if (timer > h6) {
+        return `6小时前`
+      }
+
+      if (timer > h1) {
+        return `1小时前`
+      }
+
+      if(timer > m30) {
+        return `30分钟前`
+      }
+
+      if(timer > m10) {
+        return `10分中前`
+      }
+
+      return `刚刚`;
+    }
   },
   mounted() {
     this.getSystemWidth();
     this.sliderFun();
+    this.formatUserData();
   },
   beforeDestroy() {
   },
@@ -602,7 +692,7 @@ export default {
   .top-btns-content {
     margin: 175px auto 104px;
     @media (max-width: 768px){
-      margin: 30px auto 0px;
+      margin: 37px auto 0px;
     }
 
     h4 {
@@ -741,6 +831,11 @@ export default {
       flex-wrap: wrap;
       justify-content: space-between;
       margin-bottom: 70px;
+
+      @media (max-width: 768px){
+        margin-bottom: 20px;
+      }
+
       .video-box {
         width: 30%;
         margin-bottom: 79px;
@@ -779,18 +874,21 @@ export default {
     }
 
     .zixun-online {
-      margin: 0 auto 128px;
+      display: inline-block;
+      width: 138px;
+      height: 50px;
+      background: #0065cd;
+      border-radius: 6px;
       text-align: center;
       color: #ffffff;
-      width: 180px;
-      padding: 12px 38px;
-      font-size: 24px;
       line-height: 48px;
       font-weight: 400;
+      font-size: 16px;
+      margin-bottom: 128px;
 
       @media (max-width: 768px) {
         margin: 0 auto 60px;
-        line-height: 20px;
+        line-height: 52px;
         font-size: 16px;
       }
     }
@@ -863,6 +961,7 @@ export default {
         border-radius: 8px;
         padding: 50px 42px 80px;
         box-shadow: 0 3px 5px 2px #ccc;
+        position: relative;
 
         @media (max-width: 768px) {
           padding: 25px 22px 40px;
@@ -1005,30 +1104,46 @@ export default {
       font-weight: 400;
       text-align: left;
       color: #ff0000;
-      display: flex;
-      justify-content: space-between;
       border-bottom-left-radius: 8px;
       border-bottom-right-radius: 8px;
 
       @media (max-width: 768px) {
-        bottom: 15px;
-        padding: 10px 23px;
-        width: 85%;
-        font-size: 12px;
+        width: 100%;
+        padding: 12px 0;
+        bottom: 18px;
       }
 
+      .hidden {
+        display: none;
+      }
+      .swiper-wrapper {
+        height: 25px;
+      }
 
-      .icon-w1 {
+
+      .div-row {
         display: flex;
+        justify-content: space-between;
         align-items: center;
-        i {
-          width: 15px;
-          height: 15px;
-          display: inline-block;
-          background-image: url("~static/images/client/course/btns/course-icon-laba.png");
-          background-size: contain;
-          background-repeat: no-repeat;
-          margin: 0 5px 0 5px;
+        .icon-w1 {
+          display: flex;
+          align-items: center;
+          i {
+            width: 15px;
+            height: 15px;
+            display: inline-block;
+            background-image: url("~static/images/client/course/btns/course-icon-laba.png");
+            background-size: contain;
+            background-repeat: no-repeat;
+            margin-right: 5px;
+          }
+        }
+        @media (max-width: 768px) {
+          bottom: 15px;
+          line-height: 25px;
+          padding: 10px 23px;
+          width: 85%;
+          font-size: 12px;
         }
       }
     }