更新

src/views/adminCenter/basicInfo/index.vue

@@ -33,7 +33,7 @@ export default {
       this.$set(this, `dockid`, res.data.id);
     },
     async creatQrCode() {
-      let url = `http://free.liaoningdoupo.com/api/auth/wxchat?redirect_uri=http://free.liaoningdoupo.com/platmobile/followbind/&type=2&qrcode=${this.dockid}`; // 需要转换为二维码的内容
+      let url = `http://free.liaoningdoupo.com/api/auth/wxchat?redirect_uri=http://free.liaoningdoupo.com/platmobile/dockbind/&type=2&qrcode=${this.dockid}`; // 需要转换为二维码的内容
       let el = document.getElementById('qrCodeUrl');
       this.qc = await QRCode.toDataURL(url, { height: 200, width: 200 });
     },

src/views/hall/direct.vue

@@ -48,7 +48,13 @@
                   <span>直播</span>
                 </el-col>
                 <el-col :span="24" class="video">
-                  轮播
+                  <div class="box">
+                    <div class="con1" ref="con1" :class="{ anim: animate == true }" @mouseenter="mEnter" @mouseleave="mLeave">
+                      <el-col class="lunboList" :span="24" v-for="(item, index) in lunboList" :key="index">
+                        <p>{{ item.market_username }}在{{ item.created_time }}{{ item.username }}{{ item.status }}</p>
+                      </el-col>
+                    </div>
+                  </div>
                   <!-- <video :src="dockInfo.file_path" controls="controls" style="height: 395px; width: 100%;">
                     您的浏览器不支持 video 标签。
                   </video> -->
@@ -593,6 +599,9 @@ export default {
     },
     name: '',
     dock_id: '',
+    // 测试轮播
+    lunboList: [],
+    animate: false,
   }),
   created() {
     this.$set(this, `dock_id`, this.$route.query.id);
@@ -669,10 +678,7 @@ export default {
       let jioayi = await this.dockdongtai(this.dock_id);
       let jioayiData = jioayi.apply.map(item => item.transdata);
       jioayiData = _.flattenDeep(jioayiData);
-      console.log(jioayiData);
-      // 登录情况
-      let login = await this.operaFetch(this.dock_id);
-      console.log(login);
+      this.$set(this, `lunboList`, jioayiData);
     },
     // 交易实况
     handleClicks(tab, event) {
@@ -772,6 +778,29 @@ export default {
     handleCloseExport(done) {
       done();
     },
+
+    // 测试轮播
+    scroll() {
+      let con1 = this.$refs.con1;
+      con1.style.marginTop = '-30px';
+      this.animate = !this.animate;
+      var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
+      setTimeout(function() {
+        that.lunboList.push(that.lunboList[0]);
+        that.lunboList.shift();
+        con1.style.marginTop = '0px';
+        that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
+      }, 500);
+    },
+    mEnter() {
+      clearInterval(this.timer1);
+    },
+    mLeave() {
+      this.timer1 = setInterval(this.scroll, 1000);
+    },
+  },
+  mounted() {
+    this.timer1 = setInterval(this.scroll, 2000);
   },
   computed: {
     ...mapState(['user']),
@@ -1443,4 +1472,20 @@ export default {
     padding: 0 10px;
   }
 }
+.box {
+  width: 100%;
+  height: 400px;
+  overflow: hidden;
+  .lunboList {
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    p {
+      font-size: 16px;
+    }
+  }
+}
+.anim {
+  transition: all 0.5s;
+}
 </style>