增加内容扫码查看

This commit is contained in:
TS-QD1 2023-07-27 16:53:21 +08:00
parent 1d8357d819
commit 3085c124e4
10 changed files with 311 additions and 111 deletions

View File

@ -2,7 +2,7 @@
<div>
<div class="top-line">
<div class="top-line-content">
<span>欢迎访问{{area.areaName}}公共文化云</span>
<span>欢迎访问{{ area.areaName }}公共文化云</span>
<div class="login-register-btn" v-if="isLogin">
<router-link to="/personCenter">
<img :src="url + 'route/file/download/false/' + userInfo.avatar" alt="" v-if="hasAvatar" class="user-avatar">
@ -20,7 +20,7 @@
<div class="header">
<div class="logo-search">
<router-link to="/" class="logo">
<img :src="'static/logo/logo-'+ area.areaId +'.png'" alt="" class="logo-img">
<img :src="'static/logo/logo-' + area.areaId + '.png'" alt="" class="logo-img">
</router-link>
<div class="search">
<input type="text" class="search-input" placeholder="查找你感兴趣的内容" @keyup.enter="doSearch" v-model="keywords">
@ -30,47 +30,53 @@
</div>
<div class="nav">
<ul class="nav-container">
<li :class="{active: this.$route.path == '/'}">
<li :class="{ active: this.$route.path == '/' }">
<router-link to="/">
首页
</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}`">
<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}`">
{{ 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>
</li>
<li :class="{active: this.$route.path == '/cultureMap'}">
<li :class="{ active: this.$route.path == '/cultureMap' }">
<router-link to="/cultureMap">
文化地图
</router-link>
</li>
<li :class="{active: this.$route.path == '/cultureSupermarket'}">
<li :class="{ active: this.$route.path == '/cultureSupermarket' }">
<router-link to="/cultureSupermarket">
文化超市
</router-link>
@ -86,7 +92,7 @@ import common from '@/common/components/common.js'
export default {
name: 'Header',
data () {
data() {
return {
keywords: '',
url: common.url,
@ -102,7 +108,7 @@ export default {
}
},
methods: {
initNavs () {
initNavs() {
let vueSelf = this
axios.get(`${common.url}app/newsdirectories/list/areamenu/release/${common.area.areaCode}`, {})
.then((res) => {
@ -128,7 +134,7 @@ export default {
requestUrl: `网页QUERY${this.keywords}新闻`
}
});
const {href} = this.$router.resolve({
const { href } = this.$router.resolve({
path: '/searchResult',
query: {
keywords: this.keywords

View File

@ -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/`

43
src/component/GzhQr.vue Normal file
View File

@ -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>

View File

@ -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++) {

View File

@ -1,37 +1,135 @@
import common from '@/common/components/common.js'
import axios from 'axios';
export const goDetail = (news, navTitle, navPath, router) => {
// 只要有链接就跳转
if(news.newsContentLink) {
window.open(news.newsContentLink);
// 只要有链接就跳转
if (news.newsContentLink) {
window.open(news.newsContentLink);
return;
}
// 文章
if (news.newsContentType === '1') {
router.push(`/newsViewDetailText/${news.newsContentId}?navTitle=${navTitle}&navPath=${encodeURIComponent(navPath)}`)
return;
}
// 图片
if (news.newsContentType === '2') {
router.push(`/newsViewDetailImage/${news.newsContentId}?navTitle=${navTitle}&navPath=${encodeURIComponent(navPath)}`)
return;
}
// 音频
if (news.newsContentType === '3') {
router.push(`/newsViewDetailAudio/${news.newsContentId}?navTitle=${navTitle}&navPath=${encodeURIComponent(navPath)}`)
return;
}
// 视频
if (news.newsContentType === '4') {
router.push(`/newsViewDetailVideo/${news.newsContentId}?navTitle=${navTitle}&navPath=${encodeURIComponent(navPath)}`)
return;
}
// PDF
if (news.newsContentType === '5') {
router.push(`/newsViewDetailPdf/${news.newsContentId}?navTitle=${navTitle}&navPath=${encodeURIComponent(navPath)}`)
return;
}
// 链接
if (news.newsContentType === '6') {
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() : '';
// 文章
if(news.newsContentType === '1') {
router.push(`/newsViewDetailText/${news.newsContentId}?navTitle=${navTitle}&navPath=${encodeURIComponent(navPath)}`)
return;
}
// 图片
if(news.newsContentType === '2') {
router.push(`/newsViewDetailImage/${news.newsContentId}?navTitle=${navTitle}&navPath=${encodeURIComponent(navPath)}`)
return;
}
// 音频
if(news.newsContentType === '3') {
router.push(`/newsViewDetailAudio/${news.newsContentId}?navTitle=${navTitle}&navPath=${encodeURIComponent(navPath)}`)
return;
}
// 视频
if(news.newsContentType === '4') {
router.push(`/newsViewDetailVideo/${news.newsContentId}?navTitle=${navTitle}&navPath=${encodeURIComponent(navPath)}`)
return;
}
// PDF
if(news.newsContentType === '5') {
router.push(`/newsViewDetailPdf/${news.newsContentId}?navTitle=${navTitle}&navPath=${encodeURIComponent(navPath)}`)
return;
}
// 链接
if(news.newsContentType === '6') {
return;
}
}

View File

@ -1,23 +1,27 @@
<template>
<div>
<Header/>
<Nav :navs="navs"/>
<Header />
<Nav :navs="navs" />
<div class="container">
<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"/>
<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,15 +41,16 @@ export default {
Header,
Footer,
Loading,
Nav
Nav,
GzhQr
},
data () {
let navs = [{name: '详情'}];
if(this.$route.query.navTitle && this.$route.query.navTitle) {
navs.splice(0, 0, {
to: this.$route.query.navPath,
name: this.$route.query.navTitle
})
data() {
let navs = [{ name: '详情' }];
if (this.$route.query.navTitle && this.$route.query.navTitle) {
navs.splice(0, 0, {
to: this.$route.query.navPath,
name: this.$route.query.navTitle
})
}
return {
isLoading: false,
@ -51,25 +58,31 @@ export default {
title: '',
playFileId: '',
coverFileId: '',
fileList: []
fileList: [],
userData: null,
qrCodeImage: '',
isQrCodeShow: false
}
},
methods: {
onVideoPlayClick (file) {
onVideoPlayClick(file) {
this.playFileId = file.contentFileFileId
},
init () {
init() {
let vueSelf = this
vueSelf.isLoading = true
axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
let data = resp.data
vueSelf.title = data.newsContentTitle
vueSelf.playFileId = data.fileList[0].contentFileFileId
if (data.newsContentCoverList.length > 0 &&
data.newsContentCoverList[0].contentCoverId) {
vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
}
vueSelf.fileList = data.fileList
// conetntAuth(vueSelf.$router, data);
conetntAuth(vueSelf, data, function () {
vueSelf.title = data.newsContentTitle
vueSelf.playFileId = data.fileList[0].contentFileFileId
if (data.newsContentCoverList.length > 0 &&
data.newsContentCoverList[0].contentCoverId) {
vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
}
vueSelf.fileList = data.fileList
})
}).catch(resp => {
console.error(resp)
}).finally(() => {
@ -78,14 +91,14 @@ export default {
}
},
computed: {
getSrc () {
getSrc() {
return `${common.url}route/file/download/true/${this.playFileId}`
},
getPosterSrc () {
getPosterSrc() {
return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/poster-audio.jpeg`
}
},
mounted () {
mounted() {
this.init()
}
}

View File

@ -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
vueSelf.title = data.newsContentTitle
vueSelf.fileList = data.fileList
setTimeout(() => {
vueSelf.swiperMain = vueSelf.$refs.swiperMain.swiper
vueSelf.swiperThumbs = vueSelf.$refs.swiperThumbs.swiper
}, 1000)
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(() => {

View File

@ -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,13 +73,15 @@ export default {
vueSelf.isLoading = true
axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
let data = resp.data
vueSelf.title = data.newsContentTitle
vueSelf.author = data.newsContentAuthor
vueSelf.summary = data.newsContentSummary
if(data.newsContentCoverList.length > 0) {
vueSelf.coverImage = `${common.url}route/file/download/true/${data.newsContentCoverList[0].contentCoverId}`
}
vueSelf.fileList = data.fileList
conetntAuth(vueSelf, data, function () {
vueSelf.title = data.newsContentTitle
vueSelf.author = data.newsContentAuthor
vueSelf.summary = data.newsContentSummary
if(data.newsContentCoverList.length > 0) {
vueSelf.coverImage = `${common.url}route/file/download/true/${data.newsContentCoverList[0].contentCoverId}`
}
vueSelf.fileList = data.fileList
});
}).catch(resp => {
console.error(resp)
}).finally(() => {

View File

@ -1,7 +1,7 @@
<template>
<div>
<Header />
<Nav :navs="navs"/>
<Nav :navs="navs" />
<div class="container">
<div class="title" v-show="title">{{ title }}</div>
<div class="sub-title" v-show="author || publishDate">
@ -17,7 +17,8 @@
<div class="content" v-html="content"></div>
</div>
<Footer />
<loading v-show="isLoading"/>
<loading v-show="isLoading" />
<GzhQr :src="qrCodeImage" v-show="isQrCodeShow" />
</div>
</template>
@ -27,19 +28,23 @@ 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: '详情'}];
if(this.$route.query.navTitle && this.$route.query.navTitle) {
let navs = [{ name: '详情' }];
if (this.$route.query.navTitle && this.$route.query.navTitle) {
navs.splice(0, 0, {
to: this.$route.query.navPath,
name: this.$route.query.navTitle
@ -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;
vueSelf.title = data.newsContentTitle;
vueSelf.author = data.newsContentAuthor;
vueSelf.publishDate = data.newsContentPublishTime;
vueSelf.content = data.newsContentContent;
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(() => {

View File

@ -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,13 +70,15 @@ export default {
vueSelf.isLoading = true
axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
let data = resp.data
vueSelf.title = data.newsContentTitle
vueSelf.playFileId = data.fileList[0].contentFileFileId
if (data.newsContentCoverList.length > 0 &&
data.newsContentCoverList[0].contentCoverId) {
vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
}
vueSelf.fileList = data.fileList
conetntAuth(vueSelf, data, function () {
vueSelf.title = data.newsContentTitle
vueSelf.playFileId = data.fileList[0].contentFileFileId
if (data.newsContentCoverList.length > 0 &&
data.newsContentCoverList[0].contentCoverId) {
vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
}
vueSelf.fileList = data.fileList
})
}).catch(resp => {
console.error(resp)
}).finally(() => {