|
@@ -1,45 +1,97 @@
|
|
<template>
|
|
<template>
|
|
<div class="indexbox">
|
|
<div class="indexbox">
|
|
|
|
+ <p class="imgStyle">
|
|
|
|
+ <img src="../../../assets/jiantou.png"
|
|
|
|
+ style="width: 6vw;height: 6vw;"
|
|
|
|
+ alt=""
|
|
|
|
+ @click="GoUp">
|
|
|
|
+ </p>
|
|
<h1>{{ textdetaildata.title }}</h1>
|
|
<h1>{{ textdetaildata.title }}</h1>
|
|
<div class="publisher">
|
|
<div class="publisher">
|
|
- <img style="width: 10vw;height: 10vw;border-radius: 50%;" :src="textdetaildata.cover" alt="">
|
|
|
|
|
|
+ <img style="width: 10vw;height: 10vw;border-radius: 50%;"
|
|
|
|
+ :src=avatar
|
|
|
|
+ alt=""
|
|
|
|
+ v-show="avatar?true:false">
|
|
<p>{{ textdetaildata.creator_name }}</p>
|
|
<p>{{ textdetaildata.creator_name }}</p>
|
|
<span>{{ textdetaildata.create_datetime }}</span>
|
|
<span>{{ textdetaildata.create_datetime }}</span>
|
|
</div>
|
|
</div>
|
|
- <div v-html="textdetaildata.content" class="container">
|
|
|
|
|
|
+ <div v-html="textdetaildata.content"
|
|
|
|
+ class="container">
|
|
</div>
|
|
</div>
|
|
<div class="like">
|
|
<div class="like">
|
|
<span>阅读量:{{ textdetaildata.read_count }}</span>
|
|
<span>阅读量:{{ textdetaildata.read_count }}</span>
|
|
|
|
|
|
- <span :class="isgood ? 'note' : 'pith'" id="clickgood" @click="clkgood">{{ isgood ? '已点赞' : '点赞' }}</span>
|
|
|
|
|
|
+ <span :class="isgood ? 'note' : 'pith'"
|
|
|
|
+ id="clickgood"
|
|
|
|
+ @click="clkgood">{{ isgood ? '已点赞' : '点赞' }}</span>
|
|
</div>
|
|
</div>
|
|
- <div class="contacts">
|
|
|
|
|
|
+ <div class="contacts"
|
|
|
|
+ v-show="myId?true:false">
|
|
<div>
|
|
<div>
|
|
- <h3>{{ textdetaildata.creator_name }}</h3>
|
|
|
|
- <div style="padding-bottom: 2vh;">河南建工集团||董事长</div>
|
|
|
|
- <div style="margin-bottom: 3vw;"><span class="iconfont icon-weixin" @click="showPopup"></span><span
|
|
|
|
- class="iconfont icon-dianhua"></span></div>
|
|
|
|
|
|
+ <h3>{{ menuberinfo }}</h3>
|
|
|
|
+ <!-- <div style="padding-bottom: 2vh;">河南建工集团||董事长</div> -->
|
|
|
|
+ <div style="margin-bottom: 3vw;"><span class="iconfont icon-weixin"
|
|
|
|
+ @click="showPopup"></span><span class="iconfont icon-dianhua"
|
|
|
|
+ @click="callPhone"></span></div>
|
|
</div>
|
|
</div>
|
|
- <popup v-model="show" closeable position="bottom" :style="{ height: '30%' }" />
|
|
|
|
|
|
+ <popup v-model="show"
|
|
|
|
+ closeable
|
|
|
|
+ position="bottom"
|
|
|
|
+ :style="{ height: '30%', background: '#f7f7f7', }">
|
|
|
|
+ <div class="qrcode">
|
|
|
|
+ <img :src=qrcode
|
|
|
|
+ alt="">
|
|
|
|
+ </div>
|
|
|
|
+ </popup>
|
|
<div>
|
|
<div>
|
|
- <img style="width: 15vw;height: 15vw;border-radius: 50%;" :src="textdetaildata.cover" alt="">
|
|
|
|
|
|
+ <img style="width: 15vw;height: 15vw;border-radius: 50%;"
|
|
|
|
+ :src=avatar
|
|
|
|
+ alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
-import { textdetailInfo, clkgoodInfo } from "../../../../serves/prove";
|
|
|
|
|
|
+import { getArticleCategoryDetail, clkgoodInfo, getMember, getShareParmas, getparameter,postShareinfo } from "../../../../serves/prove";
|
|
import { Toast, Popup } from "vant";
|
|
import { Toast, Popup } from "vant";
|
|
|
|
+import storage from '../../../util/sessionStorage.js'
|
|
|
|
+
|
|
export default {
|
|
export default {
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
textdetaildata: {},
|
|
textdetaildata: {},
|
|
isgood: '',
|
|
isgood: '',
|
|
show: false,
|
|
show: false,
|
|
|
|
+ menuberinfo: '',
|
|
|
|
+ avatar: '',
|
|
|
|
+ qrcode: '',
|
|
|
|
+ phone: '',
|
|
|
|
+ myId: '',
|
|
|
|
+ shareData: {
|
|
|
|
+ title: '',
|
|
|
|
+ desc: '',
|
|
|
|
+ link: '',
|
|
|
|
+ imgUrl: ''
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created () {
|
|
|
|
+ if (!this.myId) {
|
|
|
|
+ this.myId = storage.getLocalstorage('user_id')
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted () {
|
|
mounted () {
|
|
- this.textdetailapi()
|
|
|
|
|
|
+ if (this.myId != null && this.myId !== '' && this.myId !== 'undefined') {
|
|
|
|
+ this.getMemberapi(this.myId)
|
|
|
|
+ }
|
|
|
|
+ if (this.$route.query.id) {
|
|
|
|
+ this.textdetailapi(this.$route.query.id, this.myId)
|
|
|
|
+ //获取分享的参数 执行config
|
|
|
|
+ this.getUserIdparameter()
|
|
|
|
+ } else {
|
|
|
|
+ this.textdetailapi()
|
|
|
|
+ }
|
|
|
|
+ console.log('------------------', this.$route.query.id)
|
|
},
|
|
},
|
|
components: { Popup },
|
|
components: { Popup },
|
|
methods: {
|
|
methods: {
|
|
@@ -52,7 +104,6 @@ export default {
|
|
if (this.isgood) {
|
|
if (this.isgood) {
|
|
Toast.fail('不能取消点赞');
|
|
Toast.fail('不能取消点赞');
|
|
} else {
|
|
} else {
|
|
-
|
|
|
|
clkgoodInfo(this.$route.query.id, 'WeiQiJia')
|
|
clkgoodInfo(this.$route.query.id, 'WeiQiJia')
|
|
this.isgood = true
|
|
this.isgood = true
|
|
Toast.success('点赞成功');
|
|
Toast.success('点赞成功');
|
|
@@ -60,16 +111,162 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
},
|
|
},
|
|
- //文章详情借口
|
|
|
|
- async textdetailapi () {
|
|
|
|
- const res = await textdetailInfo(this.$route.query.id, 'WeiQiJia', 'employee', '')
|
|
|
|
- this.textdetaildata = res.data
|
|
|
|
- this.textdetaildata.flag = false
|
|
|
|
- if (!res.data.flag) this.clkgood()
|
|
|
|
- console.log(res.data);
|
|
|
|
|
|
+ //文章详情接口
|
|
|
|
+ async textdetailapi (id, userId) {
|
|
|
|
+ const res = await getArticleCategoryDetail(id, userId)
|
|
|
|
+ if (res.code == 2000) {
|
|
|
|
+ this.textdetaildata = res.data
|
|
|
|
+ this.isgood = res.data.like
|
|
|
|
+ // this.textdetaildata.flag = false
|
|
|
|
+ // if (!res.data.flag) this.clkgood()
|
|
|
|
+ console.log(res.data);
|
|
|
|
+ }
|
|
|
|
+
|
|
// this.isgood = res.data.like
|
|
// this.isgood = res.data.like
|
|
|
|
+ },
|
|
|
|
+ GoUp () {
|
|
|
|
+ this.$router.go(-1)
|
|
|
|
+ },
|
|
|
|
+ //分享到对话框
|
|
|
|
+ shareDialogue () {
|
|
|
|
+ var wx = window.wx
|
|
|
|
+ wx.invoke(
|
|
|
|
+ "shareAppMessage", {
|
|
|
|
+ title: '', // 分享标题
|
|
|
|
+ desc: '', // 分享描述
|
|
|
|
+ link: '', // 分享链接
|
|
|
|
+ imgUrl: '', // 分享封面
|
|
|
|
+ enableIdTrans: 0, // 是否开启id转译,不填默认为0
|
|
|
|
+ }, function (res) {
|
|
|
|
+ if (res.err_msg == "shareAppMessage:ok") {
|
|
|
|
+ //正确处理
|
|
|
|
+ } else {
|
|
|
|
+ //错误处理
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ );
|
|
|
|
+ },
|
|
|
|
+ //获取个人信息 //WeiQiJia
|
|
|
|
+ async getMemberapi (user_id) {
|
|
|
|
+ const res = await getMember(user_id)
|
|
|
|
+ if (res.code == 2000) {
|
|
|
|
+ this.menuberinfo = res.data.name
|
|
|
|
+ this.avatar = res.data.avatar
|
|
|
|
+ this.phone = res.data.tel
|
|
|
|
+ this.qrcode = res.data.qrcode
|
|
|
|
+ }
|
|
|
|
+ console.log(res)
|
|
|
|
+ },
|
|
|
|
+ //打电话
|
|
|
|
+ callPhone () {
|
|
|
|
+ window.location.href = this.phone
|
|
|
|
+ },
|
|
|
|
+ //获取分享参数 在wx.ready执行分享的事件分享到朋友/朋友圈等
|
|
|
|
+ async getShareParmasinfo (id,myId) {
|
|
|
|
+ const res = await getShareParmas(id,myId)
|
|
|
|
+ console.log(res)
|
|
|
|
+ this.shareData.title = res.data.title
|
|
|
|
+ this.shareData.desc = res.data.desc
|
|
|
|
+ this.shareData.link = res.data.link
|
|
|
|
+ this.shareData.imgUrl = res.data.image
|
|
|
|
+ window.wx.onMenuShareAppMessage({
|
|
|
|
+ title: res.data.title, // 分享标题
|
|
|
|
+ desc: res.data.desc, // 分享描述
|
|
|
|
+ link: res.data.link, // 分享链接;在微信上分享时,该链接的域名必须与企业某个应用的可信域名一致
|
|
|
|
+ imgUrl: res.data.image, // 分享图标
|
|
|
|
+ enableIdTrans: 0, // 是否开启id转译,不填默认为0
|
|
|
|
+ success: function () {
|
|
|
|
+ this.postShareinfo({article:this.$route.query.id,userid:this.myId})
|
|
|
|
+ // 用户确认分享后执行的回调函数
|
|
|
|
+ },
|
|
|
|
+ error: function (res) {
|
|
|
|
+ if (res.errMsg.indexOf('no permission') > 0) {
|
|
|
|
+ console.log('未agentConfig')
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ cancel: function () {
|
|
|
|
+ // 用户取消分享后执行的回调函数
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ window.wx.onMenuShareTimeline({
|
|
|
|
+ title: res.data.title, // 分享标题
|
|
|
|
+ desc: res.data.desc, // 分享描述
|
|
|
|
+ link: res.data.link, // 分享链接;在微信上分享时,该链接的域名必须与企业某个应用的可信域名一致
|
|
|
|
+ imgUrl: res.data.image, // 分享图标
|
|
|
|
+ enableIdTrans: 0, // 是否开启id转译,不填默认为0
|
|
|
|
+ success: function () {
|
|
|
|
+ this.postShareinfo({article:this.$route.query.id,userid:this.myId})
|
|
|
|
+ // 用户确认分享后执行的回调函数
|
|
|
|
+ },
|
|
|
|
+ error: function (res) {
|
|
|
|
+ if (res.errMsg.indexOf('no permission') > 0) {
|
|
|
|
+ alert('未agentConfig')
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ cancel: function () {
|
|
|
|
+ // 用户取消分享后执行的回调函数
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ //config
|
|
|
|
+ async getUserIdparameter () {
|
|
|
|
+ const res = await getparameter()
|
|
|
|
+ window.wx.config({
|
|
|
|
+ beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
|
|
|
|
+ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
|
|
|
|
+ appId: res.data.appId, // 必填,企业微信的corpID
|
|
|
|
+ timestamp: res.data.timestamp, // 必填,生成签名的时间戳
|
|
|
|
+ nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
|
|
|
|
+ signature: res.data.signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
|
|
|
|
+ jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareWechat"], // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
|
|
|
|
+ });
|
|
|
|
+ window.wx.ready(() => {
|
|
|
|
+ this.getShareParmasinfo(this.$route.query.id,this.myId)
|
|
|
|
+ })
|
|
|
|
+ window.wx.agentConfig({
|
|
|
|
+ corpid: res.data.appId, // 必填,企业微信的corpid,必须与当前登录的企业一致
|
|
|
|
+ agentid: res.data.agentid, // 必填,企业微信的应用id (e.g. 1000247)
|
|
|
|
+ timestamp: res.data.timestamp, // 必填,生成签名的时间戳
|
|
|
|
+ nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
|
|
|
|
+ signature: res.data.agent_signature,// 必填,签名,见附录-JS-SDK使用权限签名算法
|
|
|
|
+ jsApiList: ['shareWechatMessage'], //必填,传入需要使用的接口名称
|
|
|
|
+ success: function (res) {
|
|
|
|
+ console.log('agentConfig=>成功')
|
|
|
|
+ console.log('获取agentConfig的res', res)
|
|
|
|
+ getShareParmas(this.$route.query.id,this.myId).then(res => {
|
|
|
|
+ window.wx.invoke('shareWechatMessage', {
|
|
|
|
+ title: res.data.title, // 分享标题
|
|
|
|
+ desc: res.data.desc, // 分享描述
|
|
|
|
+ link: res.data.link, // 分享链接
|
|
|
|
+ imgUrl: res.data.imgUrl, // 分享封面
|
|
|
|
+ enableIdTrans: 1, // 是否开启id转译,不填默认为0
|
|
|
|
+ }, function (res) {
|
|
|
|
+ if (res.err_msg == "shareWechatMessage:ok") {
|
|
|
|
+ this.postShareinfo({article:this.$route.query.id,userid:this.myId})
|
|
|
|
+ //正确处理
|
|
|
|
+ } else {
|
|
|
|
+ //错误处理
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ fail: function (res) {
|
|
|
|
+ console.log('agentConfig=>失败')
|
|
|
|
+ if (res.errMsg.indexOf('function not exist') > -1) {
|
|
|
|
+ console.log('版本过低请升级')
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ //转发成功调用添加转发记录
|
|
|
|
+ async postShareinfo(data){
|
|
|
|
+ const res= await postShareinfo(data)
|
|
|
|
+ console.log('转发成功调用添加转发记录',res)
|
|
}
|
|
}
|
|
- }
|
|
|
|
|
|
+ },
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
@@ -79,6 +276,10 @@ export default {
|
|
margin: 0 auto;
|
|
margin: 0 auto;
|
|
padding-top: 2rem;
|
|
padding-top: 2rem;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
|
+ .imgStyle {
|
|
|
|
+ width: 90vw;
|
|
|
|
+ height: 5vh;
|
|
|
|
+ }
|
|
|
|
|
|
h1 {
|
|
h1 {
|
|
font-size: 1.8rem;
|
|
font-size: 1.8rem;
|
|
@@ -97,7 +298,6 @@ export default {
|
|
flex: 1;
|
|
flex: 1;
|
|
padding-left: 2vw;
|
|
padding-left: 2vw;
|
|
}
|
|
}
|
|
-
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.contacts {
|
|
.contacts {
|
|
@@ -109,18 +309,67 @@ export default {
|
|
border-radius: 3vw;
|
|
border-radius: 3vw;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
|
+ .qrcode {
|
|
|
|
+ width: 100vw;
|
|
|
|
+ height: 30vh;
|
|
|
|
+ // background-color: aqua;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ img {
|
|
|
|
+ width: 50vw;
|
|
|
|
+ height: 45vw;
|
|
|
|
+ margin-top: 6vw;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .popupStyle {
|
|
|
|
+ width: 90vw;
|
|
|
|
+ height: 10vh;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ margin-top: 8vw;
|
|
|
|
+ // background-color: aqua;
|
|
|
|
+
|
|
|
|
+ // ul {
|
|
|
|
+ // display: flex;
|
|
|
|
+ // li {
|
|
|
|
+ // width: 20vw;
|
|
|
|
+ // height: 20vw;
|
|
|
|
+ // // background-color: aqua;
|
|
|
|
+ // padding-left: 3vw;
|
|
|
|
+ // div {
|
|
|
|
+ // width: 15vw;
|
|
|
|
+ // height: 15vw;
|
|
|
|
+ // background-color: #ffff;
|
|
|
|
+ // box-sizing: border-box;
|
|
|
|
+ // border-radius: 4vw;
|
|
|
|
+ // display: flex;
|
|
|
|
+ // justify-content: center;
|
|
|
|
+ // align-items: center;
|
|
|
|
+ // img{
|
|
|
|
+ // width: 10vw;
|
|
|
|
+ // height: 10vw;
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // p {
|
|
|
|
+ // font-size: 1.2rem;
|
|
|
|
+ // color: #7c7c7c;
|
|
|
|
+ // margin-top: 2vw;
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ }
|
|
|
|
|
|
div:nth-child(1) {
|
|
div:nth-child(1) {
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
- font-size: .6rem;
|
|
|
|
|
|
+ font-size: 0.6rem;
|
|
|
|
|
|
.iconfont {
|
|
.iconfont {
|
|
font-size: 2rem;
|
|
font-size: 2rem;
|
|
margin: 0 10vw 0 0;
|
|
margin: 0 10vw 0 0;
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
- padding: .2rem;
|
|
|
|
|
|
+ padding: 0.2rem;
|
|
color: white;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
|
|
@@ -152,17 +401,13 @@ export default {
|
|
text-align: center;
|
|
text-align: center;
|
|
line-height: 6vw;
|
|
line-height: 6vw;
|
|
border-radius: 6vw;
|
|
border-radius: 6vw;
|
|
-
|
|
|
|
-
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|
|
<style>
|
|
<style>
|
|
.container img {
|
|
.container img {
|
|
width: 100%;
|
|
width: 100%;
|
|
-
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.van-icon {
|
|
.van-icon {
|