<template> <div id="growUpDetail"> <div class="detail_box"> <div class="top"> <div class="user_box"> <img class="user_img" :src="dataObj.headImg ? dataObj.headImg : defaultHead" alt="" /> <p class="title"> {{ dataObj.userName }}<span v-if="dataObj.level">{{ dataObj.level }}</span> </p> <p class="time">{{ dataObj.createTime }}</p> </div> <div class="btn" v-if="userInfo.centerNo == dataObj.centerNo" @click.stop="handleDel(dataObj)"> <van-icon class="icon" name="delete-o" /> </div> </div> <div class="content"> <span class="tag" v-for="(item2, index2) in dataObj.contentTagList" :key="index2">#{{ item2.name }}</span> <span v-html="dataObj.content"></span> </div> <div class="course_link" @click.stop="handleCourse(dataObj.classNo)" v-if="dataObj.pname"> <div class="img_box"> <img class="course_img" :src="dataObj.pimg" alt="" /> <img class="mask" src="@/assets/grow_up/link.png" alt="" /> </div> <p class="title">{{ dataObj.pname }}</p> </div> <ImgBox v-if="dataObj" :imgArr="dataObj.newPhoths"></ImgBox> </div> <div class="comment"> <p class="title">全部评论</p> <van-list v-if="dataObj && commentList.length > 0" v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false" @load="getContentCommentList" > <div class="item" v-for="(item, index) in commentList" :key="index"> <img class="user_img" :src="item.headImg ? item.headImg : defaultHead" alt="" /> <div class="center"> <p class="user_name">{{ item.nickName }}</p> <p class="content">{{ item.msg }}</p> <p class="time">{{ item.createTime }}</p> </div> <van-icon class="icon" :class="item.isThumb ? 'active' : ''" name="good-job-o" @click="handleCommentThumb(index)" /> </div> </van-list> <van-empty v-if="dataObj && commentList.length == 0" :image="require('@/assets/empty.png')" description="还没有评论,快来抢沙发" /> </div> <div class="action_bar"> <div class="text_box" @click="showComment = true"> <van-icon class="icon" name="edit" /> <p>发表评论...</p> </div> <div class="btn" @click.stop="handleThumb()"> <van-icon class="icon" :class="dataObj.isThumb ? 'active' : ''" name="good-job-o" /> <span>{{ dataObj.thumbNum }}</span> </div> <div class="btn"> <van-icon class="icon" name="comment-o" /> <span>{{ dataObj.commentNum }}</span> </div> <div class="btn" @click="showShareDes = true"> <van-icon class="icon" name="share-o" /> </div> </div> <div class="share_mask" v-if="showShareDes" @click="showShareDes = false"> <img class="share_des" src="@/assets/home/share.png" alt="" /> </div> <van-popup v-model="showComment" round> <div class="comment_box"> <textarea class="text" v-model="commentMsg" cols="30" rows="10" placeholder="发表评论"></textarea> <van-button class="btn" round color="#3074FF" type="primary" :disabled="commentMsg == ''" @click="growthContentComment" >发布</van-button > </div> </van-popup> </div> </template> <script> import Tabbar3 from '@/views_qyx/component/c_Tabbar3' import ImgBox from './c_ImgBox.vue' export default { data() { return { userInfo: '', id: '', type: '', //类别1-用户; 2-基地 dataObj: '', active: 0, defaultHead: require('@/assets/head.png'), showComment: false, commentMsg: '', pageNum: 1, pageSize: 5, loading: false, finished: false, commentList: [], //评论列表 showShareDes: false, unionId: '', } }, mounted() { this.id = this.$route.query.id this.type = this.$route.query.type //类别1-用户; 2-基地 sessionStorage.setItem('prePage', 'GrowUpDetail') if (process.env.NODE_ENV === 'production' && this.common.isWeiXin()) { let openId = sessionStorage.getItem('openId') if (!openId) { sessionStorage.setItem('prePageQuery', JSON.stringify({ id: this.$route.query.id, type: this.$route.query.type })) this.$router.push({ name: 'Authorize' }) return } this.unionId = sessionStorage.getItem('unionId') this.getUserInfo() } else { this.unionId = this.TestUnionId this.$nextTick(() => { this.getUserInfo() }) } }, methods: { initPage() { this.growthBaseDetail() //获取详情 this.getContentCommentList() //获取评论列表 }, // 点击课程 handleCourse(classNo) { this.$router.push({ name: 'ServiceAbroadDetail', query: { courseId: classNo } }) }, // 获取详情 growthBaseDetail() { this.http .growthBaseDetail({ centerNo: this.userInfo.centerNo, id: this.id, type: this.type, //类别1-用户; 2-基地 }) .then((res) => { console.log('详情:', res) if (res.code == 200) { let dataObj = res.data dataObj.content = dataObj.content.replace('\n', '<br>') dataObj.newPhoths = [] for (let j in dataObj.photos) { dataObj.newPhoths.push(dataObj.photos[j].img) } this.dataObj = dataObj this.$nextTick(() => { this.setWxShare() //设置分享 }) } else { this.$toast(res.message) } }) }, // 点击点赞按钮 handleThumb() { if (this.dataObj.isThumb == 1) { this.growthContentCancelThumb() } else { this.growthContentThumb() } }, // 点赞 growthContentThumb() { this.http .growthContentThumb({ centerNo: this.userInfo.centerNo, //当前用户中台编号 contentId: this.id, }) .then((res) => { console.log('点赞结果:', res) if (res.code == 200) { this.dataObj.isThumb = 1 this.dataObj.thumbNum++ } else { this.$toast(res.message) } }) }, // 取消点赞 growthContentCancelThumb() { this.http .growthContentCancelThumb({ centerNo: this.userInfo.centerNo, //当前用户中台编号 contentId: this.id, }) .then((res) => { console.log('取消点赞结果:', res) if (res.code == 200) { this.dataObj.isThumb = 0 this.dataObj.thumbNum-- } else { this.$toast(res.message) } }) }, // 评论列表 getContentCommentList() { this.loading = true this.http .getContentCommentList({ centerNo: this.userInfo.centerNo, //当前用户中台编号 contentId: this.id, pageNum: this.pageNum, pageSize: this.pageSize, }) .then((res) => { console.log('评论结果:', res) if (res.code == 200) { this.loading = false if (res.total < this.pageNum * this.pageSize) { this.finished = true } else { this.pageNum++ } this.commentList = this.commentList.concat(res.rows) } else { this.$toast(res.message) } }) }, // 评论 growthContentComment() { this.http .growthContentComment({ centerNo: this.userInfo.centerNo, //当前用户中台编号 contentId: this.id, msg: this.commentMsg, }) .then((res) => { console.log('评论结果:', res) if (res.code == 200) { this.$toast('评论成功') this.showComment = false this.finished = true this.pageNum = 1 this.commentList = [] this.getContentCommentList() } else { this.$toast(res.message) } }) }, // 点击评论点赞按钮 handleCommentThumb(index) { if (this.commentList[index].isThumb == 1) { this.growthContentCancelCommentThumb(index) } else { this.getContentCommentCommentThumb(index) } }, // 评论点赞 getContentCommentCommentThumb(index) { this.http .getContentCommentCommentThumb({ centerNo: this.userInfo.centerNo, //当前用户中台编号 commentId: this.commentList[index].id, }) .then((res) => { console.log('点赞结果:', res) if (res.code == 200) { this.commentList[index].isThumb = 1 } else { this.$toast(res.message) } }) }, // 取消评论点赞 growthContentCancelCommentThumb(index) { this.http .growthContentCancelCommentThumb({ centerNo: this.userInfo.centerNo, //当前用户中台编号 commentId: this.commentList[index].id, }) .then((res) => { console.log('取消点赞结果:', res) if (res.code == 200) { this.commentList[index].isThumb = 0 } else { this.$toast(res.message) } }) }, // 删除动态 handleDel(item) { this.$dialog .confirm({ title: '操作', message: '确认删除', }) .then(() => { this.http .getGrowthContentRemove({ centerNo: this.userInfo.centerNo, id: item.id, }) .then((res) => { if (res.code == 200) { this.$toast('删除成功') this.$router.push({ name: 'GrowUp' }) } else { this.$toast(res.message) } }) }) .catch(() => {}) }, // 获取用户信息 getUserInfo() { let userInfo = sessionStorage.getItem('userInfo') if (userInfo) { userInfo = JSON.parse(userInfo) this.userInfo = userInfo this.initPage() } else { this.$toast.loading({ message: '加载中...', duration: 0, forbidClick: true, }) this.yxAxios.get(`${this.proxyUrl}/api/wx/wx1c630c8773c482f1/getUserInfo?unionId=${this.unionId}`).then((res) => { this.$toast.clear() if (res.data.data) { this.userInfo = res.data.data // this.showData = true this.initPage() sessionStorage.setItem('userInfo', JSON.stringify(res.data.data)) if (res.data.data.schoolNames || res.data.data.schoolNames == [] || res.data.data.schoolNames == 'null') { sessionStorage.setItem('schoolNames', JSON.stringify(res.data.data.schoolNames)) this.$store.commit('changeSchool', res.data.data.schoolNames) if (!sessionStorage.getItem('schoolNamesChoose')) { sessionStorage.setItem('schoolNamesChoose', JSON.stringify(res.data.data.schoolNames[0])) } } else { sessionStorage.setItem('schoolNames', []) this.$store.commit('changeSchool', []) } } else { this.checkLogin() } }) } }, // 判断是否已登录 checkLogin() { if (process.env.NODE_ENV != 'production') return true const userInfo = JSON.parse(sessionStorage.getItem('userInfo')) if (!userInfo?.phone) { sessionStorage.setItem('prePage', 'GrowUpDetail') this.$router.push({ name: 'LoginPublic' }) return false } return true }, setWxShare() { // 设置分享 this.$emit('getWxConfig', { title: this.dataObj.userName + '分享了你一个动态', // 分享标题 desc: this.dataObj.pname || this.dataObj.content, // 分享描述 link: `https://payment.myjxt.com/center/#/GrowUpDetail?id=${this.id}&type=${this.type}`, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: 'https://payment.myjxt.com/share_qxy.png', // 分享图标 }) }, }, components: { Tabbar3, ImgBox, }, } </script> <style lang="scss"> #growUpDetail { background: rgb(245, 246, 250); padding-bottom: 156px; min-height: 100%; box-sizing: border-box; .detail_box { padding: 40px 24px; background: #fff; margin-bottom: 4px; .top { display: flex; justify-content: space-between; align-items: center; .user_box { width: 640px; } .user_img { width: 74px; height: 74px; border-radius: 5px; overflow: hidden; float: left; margin-right: 14px; } .title { font-size: 28px; color: #999; span { display: inline-block; font-size: 20px; color: #4092ff; border: 1px solid #4092ff; border-radius: 6px; padding: 4px 6px; margin-left: 8px; } } .time { font-size: 24px; color: #999; } .btn { font-size: 24px; display: inline-flex; align-items: center; .icon { font-size: 40px; margin-right: 8px; } } } .content { font-size: 28px; margin-top: 24px; line-height: 50px; .tag { color: #4092ff; margin-right: 10px; } } .course_link { width: 100%; background: #eff1f4; border-radius: 18px; margin-top: 20px; display: flex; align-items: center; .img_box { width: 146px; height: 146px; border-radius: 18px; overflow: hidden; position: relative; margin-right: 26px; flex-shrink: 0; .course_img { height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .mask { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } } .title { font-size: 28px; margin-right: 26px; } } } .comment { padding: 24px 0; background: #fff; .title { font-size: 32px; padding: 0 24px; border-bottom: 1px solid #f3f6fb; padding-bottom: 10px; } .item { display: flex; justify-content: space-between; width: 100%; padding: 24px; border-bottom: 1px solid #f3f6fb; box-sizing: border-box; .user_img { width: 74px; height: 74px; border-radius: 14px; margin-right: 14px; } .center { width: 600px; font-size: 28px; .user_name { color: #999; line-height: 40px; } .content { line-height: 48px; margin-top: 52px; } .time { font-size: 24px; color: #999; margin-top: 16px; } } .icon { font-size: 40px; color: #999; } .active { color: red; } } } .action_bar { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 24px 80px 24px; background: #fff; position: fixed; bottom: 0; left: 0; box-sizing: border-box; .text_box { width: 412px; height: 64px; box-sizing: border-box; padding: 12px 20px; background: #f5f6fa; border-radius: 14px; display: inline-flex; font-size: 28px; .icon { font-size: 40px; margin-right: 16px; } p { width: 100%; } } .btn { font-size: 24px; display: inline-flex; align-items: center; .icon { font-size: 40px; margin-right: 8px; } .active { color: red; } } } .comment_box { padding: 40px; .text { width: 500px; height: 300px; padding: 20px; background: rgb(235, 235, 235); font-size: 30px; border-radius: 10px; border: none; resize: none; } .btn { display: block; width: 80%; margin: 0 auto; margin-top: 40px; } } .share_mask { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.4); } .share_des { position: absolute; top: 50px; right: 100px; width: 516px; } } </style>