增加内容扫码查看

2023-07-27 16:53:21 +08:00 · 2023-07-27 16:53:21 +08:00 · 3085c124e4
commit 3085c124e4
parent 1d8357d819
10 changed files with 311 additions and 111 deletions
--- a/src/common/components/Header.vue
+++ b/src/common/components/Header.vue
@ -36,31 +36,37 @@
          </router-link>
        </li>
        <li :class="{ active: $route.query.navTitle === nav.navTitle }" v-for="(nav, index) in navs" :key="index">
-          <router-link :to="`/${nav.directoriesWebView}?navTitle=${nav.navTitle}&newsDirectoriesId=${nav.newsDirectoriesId}`">
+          <router-link
+            :to="`/${nav.directoriesWebView}?navTitle=${nav.navTitle}&newsDirectoriesId=${nav.newsDirectoriesId}`">
            {{ nav.navTitle }}
          </router-link>
        </li>
-        <li :class="{active: this.$route.path == '/cultureActivity' || this.$route.path == '/cultureActivityDetail/' + this.$route.params.id}">
+        <li
+          :class="{ active: this.$route.path == '/cultureActivity' || this.$route.path == '/cultureActivityDetail/' + this.$route.params.id }">
          <router-link to="/cultureActivity">
            文化活动
          </router-link>
        </li>
-        <li :class="{active: this.$route.path == '/cultureVenue' || this.$route.path == '/cultureVenueDetail/' + this.$route.params.id}">
+        <li
+          :class="{ active: this.$route.path == '/cultureVenue' || this.$route.path == '/cultureVenueDetail/' + this.$route.params.id }">
          <router-link to="/cultureVenue">
            文化场馆
          </router-link>
        </li>
-        <li :class="{active: this.$route.path == '/broadcast' || this.$route.path == '/broadcastDetail/' + this.$route.params.id}">
+        <li
+          :class="{ active: this.$route.path == '/broadcast' || this.$route.path == '/broadcastDetail/' + this.$route.params.id }">
          <router-link to="/broadcast">
            共享直播
          </router-link>
        </li>
-        <li :class="{active: this.$route.path == '/volunteer' || this.$route.path == '/volunteerDetail/' + this.$route.params.id}">
+        <li
+          :class="{ active: this.$route.path == '/volunteer' || this.$route.path == '/volunteerDetail/' + this.$route.params.id }">
          <router-link to="/volunteer">
            志愿服务
          </router-link>
        </li>
-        <li :class="{active: this.$route.path == '/intangibleHeritage' || this.$route.path == '/intangibleHeritageDetail/' + this.$route.params.id}">
+        <li
+          :class="{ active: this.$route.path == '/intangibleHeritage' || this.$route.path == '/intangibleHeritageDetail/' + this.$route.params.id }">
          <router-link to="/intangibleHeritage">
            非遗清单
          </router-link>
--- a/src/common/components/common.js
+++ b/src/common/components/common.js
@ -1,5 +1,5 @@
 const publishUrl = 'https://www.xzszwhy.cn/'
-// const publishUrl = 'http://192.168.0.120:80/'
+// const publishUrl = 'http://192.168.0.120:8081/'
 const url = `${publishUrl}xzszwhy/`
 const liveUrl = `${publishUrl}live/`
 const shopUrl = `${publishUrl}xzshop/`
--- a/src/component/GzhQr.vue
+++ b/src/component/GzhQr.vue
@ -0,0 +1,43 @@
+<template>
+    <div class="mask">
+        <div class="qr-code">
+            <img :src="src" v-if="src"/>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'GzhQr',
+    props: {
+        src: {
+            type: String,
+            required: false
+        }
+    },
+    data() {
+        return {
+        }
+    }
+}
+</script>
+
+<style lang="stylus" scoped>
+.mask
+    position fixed
+    top 0
+    left 0
+    width 100%
+    height 100%;
+    background-color rgba(0,0,0,0.3)
+    display flex
+    justify-content center
+    align-items center
+    .qr-code
+        width 200px
+        height 200px
+        img
+            width 100%
+            height 100%
+</style>
+
--- a/src/pages/Index/components/NewsView1.vue
+++ b/src/pages/Index/components/NewsView1.vue
@ -70,6 +70,9 @@ export default {
        }
      }).then(function (res) {
        var picNews = res.data.rows.splice(0, 1)[0]
+        if(!picNews) {
+          return;
+        }
        self.picNews = picNews
        self.picNews.newsContentCoverList = picNews.newsContentCoverList[0].contentCoverId
        for (var i = 0; i < res.data.rows.length; i++) {
--- a/src/pages/NewsView/NewsViewUtil.js
+++ b/src/pages/NewsView/NewsViewUtil.js
@ -1,3 +1,6 @@
+import common from '@/common/components/common.js'
+import axios from 'axios';
+
 export const goDetail = (news, navTitle, navPath, router) => {
  // 只要有链接就跳转
  if (news.newsContentLink) {
@ -35,3 +38,98 @@ export const goDetail = (news, navTitle, navPath, router) => {
    return;
  }
 }
+
+/**
+ * 内容认证，必须登录或扫码关注公众号
+ * @param {*} vueSelf 
+ * @param {*} data 
+ * @param {*} callback 
+ * @returns 
+ */
+export const conetntAuth = (vueSelf, data, callback) => {
+  
+  const getUserByToken = (token) => {
+    // 获取登录人信息
+    axios.get(`${common.url}app/user/get-app-user`, { headers: { 'token': token } }).then(res => {
+      vueSelf.userData = res.data; // 记录当前登录人信息
+      // 判断用户是否已关注公众号, 接口返回true或false
+      axios.get(`${common.url}app/wxopen/attentionrelease/${vueSelf.userData.userId}`, {}, {}).then(res => {
+        if(!res.data) {
+          // 如果没有关注公众号, 获取公众号二维码, 提示让用户扫描才能继续观看
+          axios.get(`${common.url}app/wxopen/qrcoderelease/${vueSelf.userData.userId}`, {}, {}).then(res => {
+            // 弹出遮罩, 显示公众号二维码, 接口返回的为base64图片
+            vueSelf.qrCodeImage = res.data
+            vueSelf.isQrCodeShow = true
+            // 打开公众号关注Sokect的监听
+            wxSocketInit(vueSelf.userData.userId);
+          }).catch(res => {
+            console.error(res)
+          }).finally(() => {
+          })
+        }
+      }).catch(res => {
+        console.error(res)
+      }).finally(() => {
+      })
+    }).catch(res => {
+      console.error(res)
+    }).finally(() => {
+    })
+  }
+
+  const wxSocketInit = (userId) => {
+    var url = `${common.url}app/wxeventrelease/${vueSelf.userData.userId}`;
+    var socket = new WebSocket(url.replace('https', 'wss').replace('http', 'ws'));
+    //打开事件
+    socket.onopen = function () {
+      console.log("sokect连接成功");
+    };
+    //获得消息事件
+    socket.onmessage = function ({data}) {
+      data = JSON.parse(data)
+      console.log("sokect收到消息:", data);
+      // 扫码后或者取消关注后会收到消息
+      if (data.attention) {
+        vueSelf.isQrCodeShow = false;
+        callback ? callback() : '';
+      } else { // 取消关注
+        if (!window.sessionStorage.getItem('token')) {
+          //跳到登录页面上让用户登录
+          vueSelf.$router.push('/login');
+        } else {
+          vueSelf.isQrCodeShow = true
+        }
+      }
+    };
+    //关闭事件
+    socket.onclose = function () {
+      console.log("sokect连接关闭");
+    };
+    //发生了错误事件
+    socket.onerror = function () {
+      console.log("sokect连接错误");
+    }
+  }
+
+  // 判断逻辑
+  if (data.newsViewAuth.indexOf('1') != -1) {
+    if (!window.sessionStorage.getItem('token')) {
+      alert("必须登录才能查看");
+      vueSelf.$router.push('/login');
+      return;
+    }
+  }
+  // 需要登录并且关注公众号才可以查看该新闻
+  if (data.newsViewAuth.indexOf('2') != -1) {
+    if (!window.sessionStorage.getItem('token')) {
+      alert("必须登录才能查看");
+      vueSelf.$router.push('/login');
+      return;
+    } else {
+      getUserByToken(window.sessionStorage.getItem('token'));
+      return;
+    }
+  }
+  callback ? callback() : '';
+
+}
--- a/src/pages/NewsViewDetail/NewsViewDetailAudio.vue
+++ b/src/pages/NewsViewDetail/NewsViewDetailAudio.vue
@ -6,18 +6,22 @@
      <div class="title">{{ title }}</div>
      <div class="player" v-show="playFileId">
        <div class="video">
-          <video ref="videoPlayer" controls="controls" controlslist="nodownload" :src="getSrc" :poster="getPosterSrc"></video>
+          <video ref="videoPlayer" controls="controls" controlslist="nodownload" :src="getSrc"
+            :poster="getPosterSrc"></video>
        </div>
        <div class="list">
          <div class="play-title">目录</div>
          <div class="play-buttons">
-            <a href="javascript:void(0)" v-for="(file, index) in fileList" :class="{ 'active': file.contentFileFileId === playFileId }" :key="index" @click="onVideoPlayClick(file)">{{ index + 1 }}</a>
+            <a href="javascript:void(0)" v-for="(file, index) in fileList"
+              :class="{ 'active': file.contentFileFileId === playFileId }" :key="index"
+              @click="onVideoPlayClick(file)">{{ index + 1 }}</a>
          </div>
        </div>
      </div>
    </div>
    <Footer />
    <loading v-show="isLoading" />
+    <GzhQr :src="qrCodeImage" v-show="isQrCodeShow" />
  </div>
 </template>

@ -27,6 +31,8 @@ import Footer from '@/common/components/Footer'
 import common from '@/common/components/common.js'
 import Loading from '../../component/Loading'
 import Nav from '../../component/Nav'
+import GzhQr from '../../component/GzhQr'
+import { conetntAuth } from '../NewsView/NewsViewUtil'
 import axios from 'axios'

 export default {
@ -35,7 +41,8 @@ export default {
    Header,
    Footer,
    Loading,
-    Nav
+    Nav,
+    GzhQr
  },
  data() {
    let navs = [{ name: '详情' }];
@ -51,7 +58,10 @@ export default {
      title: '',
      playFileId: '',
      coverFileId: '',
-      fileList: []
+      fileList: [],
+      userData: null,
+      qrCodeImage: '',
+      isQrCodeShow: false
    }
  },
  methods: {
@ -63,6 +73,8 @@ export default {
      vueSelf.isLoading = true
      axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
        let data = resp.data
+        // conetntAuth(vueSelf.$router, data);
+        conetntAuth(vueSelf, data, function () {
          vueSelf.title = data.newsContentTitle
          vueSelf.playFileId = data.fileList[0].contentFileFileId
          if (data.newsContentCoverList.length > 0 &&
@ -70,6 +82,7 @@ export default {
            vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
          }
          vueSelf.fileList = data.fileList
+        })
      }).catch(resp => {
        console.error(resp)
      }).finally(() => {
--- a/src/pages/NewsViewDetail/NewsViewDetailImage.vue
+++ b/src/pages/NewsViewDetail/NewsViewDetailImage.vue
@ -22,6 +22,7 @@
    </div>
    <Footer/>
    <loading v-show="isLoading"/>
+    <GzhQr :src="qrCodeImage" v-show="isQrCodeShow" />
  </div>
 </template>

@ -31,6 +32,8 @@ import Footer from '@/common/components/Footer'
 import common from '@/common/components/common.js'
 import Loading from '../../component/Loading'
 import Nav from '../../component/Nav'
+import GzhQr from '../../component/GzhQr'
+import {conetntAuth} from '../NewsView/NewsViewUtil'
 import axios from 'axios'

 export default {
@ -39,7 +42,8 @@ export default {
    Header,
    Footer,
    Loading,
-    Nav
+    Nav,
+    GzhQr
  },
  data () {
    let vueSelf = this
@ -87,7 +91,10 @@ export default {
          }
        },
      },
-      fileList: []
+      fileList: [],
+      userData: null,
+      qrCodeImage: '',
+      isQrCodeShow: false
    }
  },
  methods: {
@ -109,12 +116,14 @@ export default {
      vueSelf.isLoading = true
      axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
        let data = resp.data
+        conetntAuth(vueSelf, data, function () {
          vueSelf.title = data.newsContentTitle
          vueSelf.fileList = data.fileList
          setTimeout(() => {
            vueSelf.swiperMain = vueSelf.$refs.swiperMain.swiper
            vueSelf.swiperThumbs = vueSelf.$refs.swiperThumbs.swiper
          }, 1000)
+        });
      }).catch(resp => {
        console.error(resp)
      }).finally(() => {
--- a/src/pages/NewsViewDetail/NewsViewDetailPdf.vue
+++ b/src/pages/NewsViewDetail/NewsViewDetailPdf.vue
@ -19,6 +19,7 @@
    </div>
    <Footer/>
    <loading v-show="isLoading"/>
+    <GzhQr :src="qrCodeImage" v-show="isQrCodeShow" />
  </div>
 </template>

@ -28,6 +29,8 @@ import Footer from '@/common/components/Footer'
 import common from '@/common/components/common.js'
 import Loading from '../../component/Loading'
 import Nav from '../../component/Nav'
+import GzhQr from '../../component/GzhQr'
+import {conetntAuth} from '../NewsView/NewsViewUtil'
 import axios from 'axios'

 export default {
@ -36,7 +39,8 @@ export default {
    Header,
    Footer,
    Loading,
-    Nav
+    Nav,
+    GzhQr
  },
  data () {
    let vueSelf = this;
@ -54,7 +58,10 @@ export default {
      author: '',
      summary: '',
      coverImage: '',
-      fileList: []
+      fileList: [],
+      userData: null,
+      qrCodeImage: '',
+      isQrCodeShow: false
    }
  },
  methods: {
@ -66,6 +73,7 @@ export default {
      vueSelf.isLoading = true
      axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
        let data = resp.data
+        conetntAuth(vueSelf, data, function () {
          vueSelf.title = data.newsContentTitle
          vueSelf.author = data.newsContentAuthor
          vueSelf.summary = data.newsContentSummary
@ -73,6 +81,7 @@ export default {
            vueSelf.coverImage = `${common.url}route/file/download/true/${data.newsContentCoverList[0].contentCoverId}`
          }
          vueSelf.fileList = data.fileList
+        });
      }).catch(resp => {
        console.error(resp)
      }).finally(() => {
--- a/src/pages/NewsViewDetail/NewsViewDetailText.vue
+++ b/src/pages/NewsViewDetail/NewsViewDetailText.vue
@ -18,6 +18,7 @@
        </div>
        <Footer />
        <loading v-show="isLoading" />
+        <GzhQr :src="qrCodeImage" v-show="isQrCodeShow" />
    </div>
 </template>

@ -27,15 +28,19 @@ import Footer from '@/common/components/Footer'
 import common from '@/common/components/common.js'
 import Loading from '../../component/Loading'
 import Nav from '../../component/Nav'
+import GzhQr from '../../component/GzhQr'
+import { conetntAuth } from '../NewsView/NewsViewUtil'
 import axios from 'axios'

+
 export default {
    name: 'NewsViewDetailText',
    components: {
        Header,
        Footer,
        Loading,
-        Nav
+        Nav,
+        GzhQr
    },
    data() {
        let navs = [{ name: '详情' }];
@ -52,6 +57,9 @@ export default {
            author: '',
            publishDate: '',
            content: '',
+            userData: null,
+            qrCodeImage: '',
+            isQrCodeShow: false
        }
    },
    methods: {
@ -60,10 +68,12 @@ export default {
            vueSelf.isLoading = true;
            axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
                let data = resp.data;
+                conetntAuth(vueSelf, data, function () {
                    vueSelf.title = data.newsContentTitle;
                    vueSelf.author = data.newsContentAuthor;
                    vueSelf.publishDate = data.newsContentPublishTime;
                    vueSelf.content = data.newsContentContent;
+                });
            }).catch(resp => {
                console.error(resp)
            }).finally(() => {
--- a/src/pages/NewsViewDetail/NewsViewDetailVideo.vue
+++ b/src/pages/NewsViewDetail/NewsViewDetailVideo.vue
@ -18,6 +18,7 @@
    </div>
    <Footer/>
    <loading v-show="isLoading"/>
+    <GzhQr :src="qrCodeImage" v-show="isQrCodeShow" />
  </div>
 </template>

@ -27,6 +28,8 @@ import Footer from '@/common/components/Footer'
 import common from '@/common/components/common.js'
 import Loading from '../../component/Loading'
 import Nav from '../../component/Nav'
+import GzhQr from '../../component/GzhQr'
+import {conetntAuth} from '../NewsView/NewsViewUtil'
 import axios from 'axios'

 export default {
@ -35,7 +38,8 @@ export default {
    Header,
    Footer,
    Loading,
-    Nav
+    Nav,
+    GzhQr
  },
  data () {
    let navs = [{name: '详情'}];
@ -51,7 +55,10 @@ export default {
      title: '',
      playFileId: '',
      coverFileId: '',
-      fileList: []
+      fileList: [],
+      userData: null,
+      qrCodeImage: '',
+      isQrCodeShow: false
    }
  },
  methods: {
@ -63,6 +70,7 @@ export default {
      vueSelf.isLoading = true
      axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
        let data = resp.data
+        conetntAuth(vueSelf, data, function () {
          vueSelf.title = data.newsContentTitle
          vueSelf.playFileId = data.fileList[0].contentFileFileId
          if (data.newsContentCoverList.length > 0 &&
@ -70,6 +78,7 @@ export default {
            vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
          }
          vueSelf.fileList = data.fileList
+        })
      }).catch(resp => {
        console.error(resp)
      }).finally(() => {