留言板嵌入报告详情

src/views/hzyb/activity/reportDetail.vue

@@ -4,11 +4,13 @@ import { apiGetReportDetail } from "@/api/hzyb/report.js";
 import { getWxConfig } from '@/api/hzyb/common.js'
 import { useRoute, useRouter } from "vue-router";
 import {ImagePreview } from 'vant'
+import LeaveMessage from '../components/leaveMessage/index.vue'
 const route = useRoute();
 const router=useRouter()
 document.title = "报告详情";
 
 localStorage.setItem('hzyb-token',route.query.token)
+localStorage.setItem('hzyb-userId',route.query.userId)
 
 // 配置wxjssdk (没用，本来是为了解决pc上小程序不能使用previewImage 问题)
 // const setWxConfig=async ()=>{
@@ -116,6 +118,11 @@ onMounted(()=>{
     })
 })
 
+/* 点赞 */
+const giveOrCancelLike = ({like_enabled,like_num}) => {
+    info.value.like_num = like_num;
+    info.value.like_enabled = like_enabled;
+}
 
 // 周度报告列表跳转详情
 const goDetail=(e)=>{
@@ -162,6 +169,13 @@ const goDetail=(e)=>{
               <div v-html="item.content" class="content-text"></div>
           </div>
         </div>
+
+        <!-- 留言点赞模块 -->
+        <LeaveMessage
+            :info="info"
+            @like_change="giveOrCancelLike"
+        />
+
         <div class="footer-wrap">
             <img class="img" src="@/assets/hzyb/mzsm.png" alt="" />
             <div class="content">

src/views/hzyb/activity/reportWeekDetail.vue

@@ -3,10 +3,14 @@ import { computed, ref, onMounted,watch } from "vue";
 import { apiGetReportDetail, apiGetWeekReportDetail } from "@/api/hzyb/report.js";
 import { useRoute, useRouter,onBeforeRouteUpdate  } from "vue-router";
 import {ImagePreview } from 'vant'
+import LeaveMessage from '../components/leaveMessage/index.vue'
 const route = useRoute();
 const router=useRouter()
 document.title = "报告详情";
 localStorage.setItem('hzyb-token',route.query.token)
+localStorage.setItem('hzyb-userId',route.query.userId)
+
+
 let info = ref(null);
 let topBg = ref(null)
 let noAuth = ref(false);
@@ -100,6 +104,12 @@ const selectTag=(id)=>{
     document.body.scrollTop = document.documentElement.scrollTop = 0;
 }
 
+/* 点赞 */
+const giveOrCancelLike = ({like_enabled,like_num}) => {
+    info.value.like_num = like_num;
+    info.value.like_enabled = like_enabled;
+}
+
 onBeforeRouteUpdate(to => {
     getDetail()
 });
@@ -154,6 +164,13 @@ onBeforeRouteUpdate(to => {
         <van-image-preview v-model:show="showPreViewImg" :start-position="preViewImgIndex" :images="preViewImgs">
         </van-image-preview>
     </div>
+
+    <!-- 留言点赞模块 -->
+    <LeaveMessage
+        :info="info"
+        @like_change="giveOrCancelLike"
+    />
+
     <!-- 弹窗 -->
     <div class="tipsAlert" id="tipsAlert">
         <img class="top-img" src="../../../assets/hzyb/lianzi.png" />

src/views/hzyb/components/leaveMessage/index.vue

@@ -13,11 +13,50 @@ const { report_info,report_chapter_item,research_report_type_info,research_repor
 
 const emits = defineEmits(['like_change'])
 
+const userId = ref(localStorage.getItem('hzyb-userId') || '');//用户id
+
+// 获取用户信息
+import {apiUserInfo} from '@/api/hzyb/user'
+const haveNick=ref(false)//是否设置过昵称
+const getUserInfo=async ()=>{
+    const { code,data }=await apiUserInfo({Authorization: localStorage.getItem('hzyb-token')})
+    if(code !==200) return
+
+		haveNick.value = data.nick_name ? true : false;
+}
+getUserInfo()
+
+ //是否匿名
+const isHideRealName = ref(true);
+//判断是否可以实名
+const checkNickHandle = (val) => {
+	
+	if(haveNick.value){
+		isHideRealName.value = val
+	} else {
+		isHideRealName.value = true;
+		Dialog.confirm({
+			title: '',
+			message: '检测到您还未设置头像和昵称，您的留言将发布为匿名，是否立即去设置？',
+			confirmButtonText: '去设置',
+			confirmButtonColor: '#E3B377',
+			cancelButtonText: '暂时不用',
+			cancelButtonColor: '#666'
+		})
+			.then(() => {
+				wx.miniProgram.navigateTo({ url:'/pages-user/mysetting' })
+			})
+			.catch(() => {
+				
+			});
+	}
+
+
+}
+
 //显示写留言框
 const isShowMessagebox = ref(false);
 const message_content = ref('');
- //是否匿名
-const isHideRealName = ref(true);
 //展开留言框
 const writeOrCancelMessage = () => {
 	isShowMessagebox.value = ! isShowMessagebox.value;
@@ -25,9 +64,9 @@ const writeOrCancelMessage = () => {
 /* 发布留言 */
 const publishMessageHandle = async() => {
 	const { code } = await publishMsg({
-		report_id: report_info ? report_info.report_id : 0,
+		report_id:  report_info ? report_info.report_id : report_chapter_item ? report_chapter_item.report_id :  0,
 		report_chapter_id: report_chapter_item ? report_chapter_item.report_chapter_id : 0,
-		old_report_id: research_report_info ? props.info.research_report_type_list[0].ResearchReportId : 0,
+		old_report_id:  research_report_info ? props.info.research_report_type_list[0].ResearchReportId : research_report_type_info ? research_report_type_info.research_report_id : 0,
 		old_report_chapter_id: research_report_type_info ? research_report_type_info.research_report_type_id : 0,
 		content: message_content.value,
 		is_show_name: isHideRealName.value ? 0 : 1
@@ -38,7 +77,7 @@ const publishMessageHandle = async() => {
 	isShowMessagebox.value = false
 	setTimeout(() => {
 		getMyMsgList();
-	},500)
+	},300)
 }
 
 
@@ -51,10 +90,10 @@ const hotMessageList = ref([]);
 const getMyMsgList = async () => {
 
 	const { code,data } = await getMyMessage({
-		report_id: report_info ? report_info.report_id : '',
+		report_id:  report_info ? report_info.report_id : report_chapter_item ? report_chapter_item.report_id :  '',
 		report_chapter_id: report_chapter_item ? report_chapter_item.report_chapter_id : '',
-		old_report_id: research_report_info ? props.info.research_report_type_list[0].ResearchReportId : '',
-		old_report_chapter_id: research_report_type_info ? research_report_type_info.research_report_type_id : ''
+		old_report_id:  research_report_info ? props.info.research_report_type_list[0].ResearchReportId : research_report_type_info ? research_report_type_info.research_report_id : '',
+		old_report_chapter_id: research_report_type_info ? research_report_type_info.research_report_type_id : '',
 	})
 
 	if(code !== 200) return
@@ -67,9 +106,9 @@ const getHotMsgList = async () => {
 	let page_size = 100000;//暂时不做分页
 
 	const { code,data } = await getHotMessage({
-		report_id: report_info ? report_info.report_id : '',
+		report_id:  report_info ? report_info.report_id : report_chapter_item ? report_chapter_item.report_id :  '',
 		report_chapter_id: report_chapter_item ? report_chapter_item.report_chapter_id : '',
-		old_report_id: research_report_info ? props.info.research_report_type_list[0].ResearchReportId : '',
+		old_report_id:  research_report_info ? props.info.research_report_type_list[0].ResearchReportId : research_report_type_info ? research_report_type_info.research_report_id : '',
 		old_report_chapter_id: research_report_type_info ? research_report_type_info.research_report_type_id : '',
 		current_index: 1,
 		page_size
@@ -93,10 +132,10 @@ const slideMymessageHandle = () => {
 /* 点赞 */
 const giveLikeHandle = async() => {
 	const { code,data } = await setLike({
-		report_id:  report_info ? report_info.report_id : 0,
+		report_id:  report_info ? report_info.report_id : report_chapter_item ? report_chapter_item.report_id :  0,
 		report_chapter_id: report_chapter_item ? report_chapter_item.report_chapter_id : 0,
-		old_report_id: research_report_info ? props.info.research_report_type_list[0].ResearchReportId : 0,
-		old_report_chapter_id: research_report_type_info ? research_report_type_info.research_report_type_id : 0
+		old_report_id:  research_report_info ? props.info.research_report_type_list[0].ResearchReportId : research_report_type_info ? research_report_type_info.research_report_id : 0,
+		old_report_chapter_id: research_report_type_info ? research_report_type_info.research_report_type_id : 0,
 	})
 
 	if( code !== 200 ) return
@@ -151,7 +190,7 @@ const delMessageHandle = ({ comment_id }) => {
 				/>
 				<div class="write-bottom">
 					<div class="left">
-						<Checkbox v-model="isHideRealName" icon-size="15px" shape="square" checked-color="#E3B377"/>
+						<Checkbox v-model="isHideRealName" icon-size="15px" shape="square" checked-color="#E3B377" @change="checkNickHandle"/>
 						<span class="label">匿名发布</span>
 
 						<icon name="question-o" color="#E3B377" @click="Toast({ message: '匿名发布的留言将实用默认头像和默认昵称，用户需设置头像和昵称后才能取消匿名',  position: 'bottom' })"/>
@@ -212,7 +251,7 @@ const delMessageHandle = ({ comment_id }) => {
 										{{item.user_name}}
 										<Tag color="#DEDFE5" text-color="#fff" v-if="item.IsTop">置顶</Tag>
 									</span>
-									<span class="del" @click="delMessageHandle(item)">删除</span>
+									<span class="del" @click="delMessageHandle(item)" v-if="item.user_id === Number(userId)">删除</span>
 								</div>
 								<p class="content">{{item.content}}</p>
 							</div>
@@ -231,6 +270,7 @@ const delMessageHandle = ({ comment_id }) => {
 			</div>
 		</div>
 	</div>
+
 </template>
 
 <style scoped lang="scss">

src/views/hzyb/report/ChapterDetail.vue

@@ -57,6 +57,14 @@
       </van-row>
     </div>
 
+    <!-- 留言点赞模块 -->
+    <div id="messgaeBoardCont" v-if="info.auth_ok">
+      <LeaveMessage
+          :info="info"
+          @like_change="giveOrCancelLike"
+      />
+    </div>
+
     <!-- 返回顶部 -->
     <img v-if="showToTop&&info.auth_ok" @click="handleBackTop" class="back-top-img" src="@/assets/hzyb/report/back-top.png" mode="aspectFill"/>
 
@@ -115,6 +123,7 @@ import {apiApplyPermission} from '@/api/hzyb/user'
 import {Popup,Image as VanImage,PullRefresh,Col, Row} from 'vant'
 import AudioBox from './components/AudioBox.vue'
 import SharePoster from '../components/SharePoster.vue'
+import LeaveMessage from '../components/leaveMessage/index.vue'
 export default {
   components:{
     [Popup.name]:Popup,
@@ -124,7 +133,8 @@ export default {
     [Row.name]:Row,
     [PullRefresh.name]:PullRefresh,
     AudioBox,
-    SharePoster
+    SharePoster,
+    LeaveMessage
   },
   computed:{
     code_scene(){
@@ -136,7 +146,7 @@ export default {
       return {
         report_type:this.info.report_chapter_item.classify_name_first,
         report_title:`【第${this.info.report_chapter_item.stage}期 | ${this.info.report_chapter_item.classify_name_first}  | ${this.info.report_chapter_item.type_name}】${this.info.report_chapter_item.title}`,
-        report_abstract:this.info.report_chapter_item.content
+        report_abstract:this.info.report_chapter_item.content,
       }
     }
   },
@@ -144,7 +154,7 @@ export default {
     return {
       showDisclaimers: false, //显示免责声明
       chapterId:0,
-      fromPage:'',//如果是从首页(home)来的则隐藏底部切换
+      fromPage:'',//如果是从首页(home)来的则隐藏底部切换 message定位到留言板
       info:null,
       audioData:{},//音频数据
 
@@ -165,6 +175,7 @@ export default {
   beforeCreate(){
     if(this.$route.query.token){
       localStorage.setItem('hzyb-token',this.$route.query.token)
+      localStorage.setItem('hzyb-userId',this.$route.query.userId)
     }
   },
   created(options) {
@@ -232,6 +243,14 @@ export default {
                   }) 
               }
           }
+        }else {
+            if(this.fromPage !== 'message') return
+
+            this.$nextTick(() => {
+                let height = document.getElementsByClassName('main-box')[0].getBoundingClientRect().height;
+                // document.getElementById('messgaeBoardCont').scrollIntoView();
+                window.scrollTo(0,height)
+            })
         }
 
         //向小程序发送分享数据
@@ -354,6 +373,12 @@ export default {
       }
     },
 
+    /* 点赞/取消点赞 */
+    giveOrCancelLike({like_enabled,like_num}) {
+      this.info.like_num = like_num;
+      this.info.like_enabled = like_enabled;
+    },
+
     //下拉刷新
     onRefresh(){
       this.getDetail()

src/views/hzyb/report/Detail.vue

@@ -96,11 +96,12 @@
         </div>
         
         <!-- 留言点赞模块 -->
-        <LeaveMessage
-            v-if="info.auth_ok"
-            :info="info"
-            @like_change="giveOrCancelLike"
-        />
+        <div id="messgaeBoardCont" v-if="info.auth_ok">
+            <LeaveMessage
+                :info="info"
+                @like_change="giveOrCancelLike"
+            />
+        </div>
 
         <!-- 免责声明 -->
         <van-popup :show="showDisclaimers" @close="showDisclaimers=false" round closeable>
@@ -176,16 +177,20 @@ export default {
 				content:'',//弹窗html字符串
 			},
             loading:false,
-            showToTop:false
+            showToTop:false,
+
+            fromPage: '', // message定位到留言板
         }
     },
     beforeCreate(){
         if(this.$route.query.token){
             localStorage.setItem('hzyb-token',this.$route.query.token)
+            localStorage.setItem('hzyb-userId',this.$route.query.userId)
         }
     },
     created(options) {
         this.reportId=this.$route.query.reportId
+        this.fromPage = this.$route.query.fromPage || ''
         this.getDetail()
     },
     mounted(){
@@ -247,6 +252,13 @@ export default {
                             }) 
                         }
                     }
+                } else {
+                    if(this.fromPage !== 'message') return
+                    this.$nextTick(() => {
+                        let height = document.getElementsByClassName('main-box')[0].getBoundingClientRect().height;
+                        // document.getElementById('messgaeBoardCont').scrollIntoView();
+                        window.scrollTo(0,height)
+                    })
                 }
                 //向小程序发送分享数据
                 wx.miniProgram.postMessage({ 
@@ -343,10 +355,8 @@ export default {
         
         /* 点赞/取消点赞 */
         giveOrCancelLike({like_enabled,like_num}) {
-            console.log('大冤种')
             this.info.like_num = like_num;
             this.info.like_enabled = like_enabled;
-
         },
 
         onRefresh() {