课程过期弹出添加客服二维码

src/components/customer/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <el-dialog title="" :visible.sync="diaVisible" center width="400px" append-to-body :top="qrcodeTop" lock-scroll
+    custom-class="qrcode-dia">
+    <div class="pic-wrap">
+      <img class="pic" ref="pic" src="@/assets/img/customer.png" alt="">
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: ['visible'],
+  data () {
+    return {
+      qrcodeTop: '100px'
+    };
+  },
+  computed: {
+    diaVisible: {
+      get () {
+        return this.visible
+      },
+      set (val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  mounted () {
+    const height = (window.innerHeight - 711) / 2
+    this.qrcodeTop = (height > 0 ? height : 0) + 'px'
+  },
+  methods: {
+    close () {
+      this.$emit('update:visible', false)
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+/deep/.qrcode-dia {
+  background-color: transparent;
+  box-shadow: none;
+
+  .el-dialog__header,
+  .el-dialog__body {
+    padding: 0;
+    background-color: transparent;
+    overflow: hidden;
+    border-bottom: 0;
+  }
+
+  .pic-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .pic {
+    width: 100%;
+    // max-height: 90vh;
+    // object-fit: contain;
+  }
+}
+
+@media (max-width: 1200px) {
+  /deep/.qrcode-dia {
+    .pic {
+      width: 95%;
+    }
+  }
+}
+</style>

src/pages/station/list/index.vue

@@ -45,13 +45,17 @@
         </div>
       </div>
     </el-dialog>
+
+    <Customer :visible.sync="qrcodeVisible" />
   </div>
 </template>
 
 <script>
 import Setting from '@/setting'
 import Util from '@/libs/util'
+import Customer from '@/components/customer'
 export default {
+  components: { Customer },
   data () {
     return {
       isZj: location.host === '10.60.32.76', // 浙江万里
@@ -64,6 +68,7 @@ export default {
 
       linkVisible: false,
       links: [],
+      qrcodeVisible: false,
     }
   },
   watch: {
@@ -118,7 +123,8 @@ export default {
       const links = item.nonAssociatedLinks
       // 已过期 / 没有cid并且没有链接，则跳转到产品详情
       if (!item.isInEffect) {
-        Util.errorMsg('课程已到期，请联系课程负责老师！')
+        // Util.errorMsg('课程已到期，请联系课程负责老师！')
+        this.qrcodeVisible = true
       } else if (item.isInEffect && !item.cid && !links) {
         this.addRecord(item.mallId)
         this.$router.push(`product?id=${item.mallId}`)

src/pages/station/product/index.vue

@@ -232,9 +232,7 @@ export default {
     // 获取章节小节
     async getChapter () {
       if (this.isCourse) {
-        let res = await this.$get(this.api.curriculumChapter, {
-          courseId: this.form.mall.associatedProduct
-        })
+        let res = await this.$get(this.api.curriculumChapter + '/' + this.form.mall.associatedProduct)
         this.chapterList = res.chapterList
       }
     },