merge

.env.development

@@ -1,5 +1,5 @@
 VITE_APP_BASE_URL="/xcx_h5"
-VITE_APP_OUTDIR="dist"
+VITE_APP_OUTDIR="raiwechat_link_h5"
 
 VITE_APP_CYGX_BASEAPIURL="http://8.136.199.33:8500/api"
 

.env.test

@@ -1,5 +1,5 @@
 VITE_APP_BASE_URL="/xcx_h5"
-VITE_APP_OUTDIR="dist"
+VITE_APP_OUTDIR="raiwechat_link_h5"
 
 VITE_APP_CYGX_BASEAPIURL="http://8.136.199.33:8500/api"
 

src/api/hzyb/message.js

@@ -0,0 +1,56 @@
+import {get,post} from './http'
+/* 留言 */
+
+/**
+ * 点赞/取消
+ * "report_id": 2351,
+    "report_chapter_id": 1166,
+		"old_report_id":0,
+		"old_report_chapter_id":0,
+		"source_agent": 1
+ */
+export const setLike = params => {
+	return post('/like/set',{ ...params,source_agent: 1 })
+}
+
+/**
+ * 发布留言
+ * "report_id": 2236,
+	"report_chapter_id": 267,
+	"old_report_id":0,
+	"old_report_chapter_id":0,
+	"source_agent":1,
+	"content":"hiodfsdfsd",
+	"is_show_name":1
+	*/
+export const publishMsg = params => {
+	return post('/comment/set',{...params,source_agent: 1})
+}
+
+/**
+ * 删除留言
+ * comment_id
+ */
+export const delComment = params => {
+	return post('/comment/del',params)
+}
+
+/**
+ * 精选留言列表 
+ * @param {*} params 
+ * report_id report_chapter_id current_index page_size old_report_id old_report_chapter_id
+ * @returns 
+ */
+export const getHotMessage = params => {
+	return get('/comment/hot',params)
+}
+
+/**
+ * 我的留言列表 
+ * @param {*} params 
+ * report_id report_chapter_id old_report_id old_report_chapter_id
+ * @returns 
+ */
+export const getMyMessage = params => {
+	return get('/comment/my',params)
+}

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)=>{
@@ -156,12 +163,22 @@ const goDetail=(e)=>{
                 </div>
             </div>
         </div>
-        <div class="content-wrap" v-else>
-            <div v-for="item in info.ResearchReportTypeContentList" :key="item.sort">
-              <h2 class="content-title">{{item.content_type?item.content_type:'核心观点'}}</h2>
-              <div v-html="item.content" class="content-text"></div>
-          </div>
-        </div>
+
+        <template v-else>
+            <div class="content-wrap" >
+                <div v-for="item in info.ResearchReportTypeContentList" :key="item.sort">
+                <h2 class="content-title">{{item.content_type?item.content_type:'核心观点'}}</h2>
+                <div v-html="item.content" class="content-text"></div>
+            </div>
+            </div>
+
+            <!-- 留言点赞模块 -->
+            <LeaveMessage
+                :info="info"
+                @like_change="giveOrCancelLike"
+            />
+        </template>
+
         <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

@@ -0,0 +1,389 @@
+<script setup>
+import { reactive,toRefs,ref,computed } from 'vue'
+import {useRoute, useRouter} from 'vue-router'
+import { Icon,Field,Checkbox,Button,Toast,Divider,Tag,Dialog  } from 'vant'
+import { setLike,publishMsg,delComment,getHotMessage,getMyMessage } from '@/api/hzyb/message'
+
+const props = defineProps({
+	info: {
+		type: Object,
+	}
+})
+const { report_info,report_chapter_item,research_report_type_info,research_report_info } = props.info;
+
+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;
+
+		!haveNick.value && Dialog.confirm({
+			title: '',
+			message: '检测到您还未设置头像和昵称，您的留言将发布为匿名，是否立即去设置？',
+			confirmButtonText: '去设置',
+			confirmButtonColor: '#E3B377',
+			cancelButtonText: '暂时不用',
+			cancelButtonColor: '#666'
+		})
+			.then(() => {
+				wx.miniProgram.navigateTo({ url:'/pages-user/mysetting' })
+			})
+			.catch(() => {
+				
+			});
+	
+}
+
+ //是否匿名 默认状态根据上次留言的勾选状态而定
+const isHideRealName = ref(null);
+//判断是否可以实名  再次获取最新信息 防止设置完返回页面昵称未同步
+const checkNickHandle = async (val) => {
+	const { code,data }=await apiUserInfo({Authorization: localStorage.getItem('hzyb-token')})
+	if(code !==200) return
+
+	haveNick.value = data.nick_name ? true : false;
+	isHideRealName.value = haveNick.value ? val : true;
+
+}
+
+//显示写留言框
+const isShowMessagebox = ref(false);
+const message_content = ref('');
+//展开留言框
+const writeOrCancelMessage = () => {
+	isShowMessagebox.value = !isShowMessagebox.value;
+
+	isShowMessagebox.value === true && getUserInfo()
+}
+/* 发布留言 */
+const publishMessageHandle = async() => {
+	const { code } = await publishMsg({
+		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 : 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,
+	})
+	if( code !== 200) return
+	Toast('已留言')
+	message_content.value = ''
+	isShowMessagebox.value = false
+	setTimeout(() => {
+		getMyMsgList();
+	},300)
+}
+
+
+//我的留言列表
+const myMessageList = ref([]);
+const realMyList = ref([]);
+//精选留言列表
+const hotMessageList = ref([]);
+/* 我的留言 */
+const getMyMsgList = async () => {
+
+	const { code,data } = await getMyMessage({
+		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 : 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
+
+	myMessageList.value = data.list || [];
+	isHideRealName.value = data.is_show_name ? false :  true;
+	realMyList.value = myMessageList.value.length > 3  ? myMessageList.value.slice(0,3) : myMessageList.value;
+}
+/* 精选留言 */
+const getHotMsgList = async () => {
+	let page_size = 100000;//暂时不做分页
+
+	const { code,data } = await getHotMessage({
+		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 : 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
+	})
+
+	if(code !== 200) return
+
+	hotMessageList.value = data.list || [];
+
+}
+getMyMsgList();
+getHotMsgList();
+//是否收起我的留言
+const isSlideMyMsg = ref(false);
+const slideMymessageHandle = () => {
+	isSlideMyMsg.value = !isSlideMyMsg.value
+	realMyList.value = isSlideMyMsg.value ? myMessageList.value : myMessageList.value.slice(0,3);
+}
+
+
+/* 点赞 */
+const giveLikeHandle = async() => {
+	const { code,data } = await setLike({
+		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 : 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
+	Toast(`${data.like_enabled ? '点赞成功' : '取消点赞成功'}`)
+	emits('like_change',data)
+}
+/* 删除留言 */
+const delMessageHandle = ({ comment_id }) => {
+	Dialog.confirm({
+		title: "",
+		message: "确定要删除该留言吗？",
+		confirmButtonColor: "#6784A7",
+	}).then( async() => {
+		const { code } = await delComment({ comment_id });
+		if( code !== 200 ) return
+
+		Toast('删除成功')
+
+		removeMessageByView(comment_id);
+	});
+
+	/* 删除页面上的留言 */
+	const removeMessageByView = (comment_id) => {
+		let index_my = myMessageList.value.findIndex(_ => _.comment_id === comment_id);
+		let index_hot = hotMessageList.value.findIndex(_ => _.comment_id === comment_id);
+
+	console.log(comment_id,index_my,index_hot)
+
+		index_my !== -1 && myMessageList.value.splice(index_my, 1)
+		index_hot !== -1 && hotMessageList.value.splice(index_hot, 1)
+		realMyList.value = isSlideMyMsg.value ? myMessageList.value : myMessageList.value.slice(0,3);
+	}
+}
+
+</script>
+
+<template>
+	<div class="givelike-container">
+		<div class="like-top">
+			<span @click="giveLikeHandle"> 
+				<Icon :name="props.info.like_enabled ? 'good-job' : 'good-job-o'" />
+				{{props.info.like_num || '' }} 
+			</span> 
+			<span @click="writeOrCancelMessage">{{ isShowMessagebox ? '取消发布' : '写留言'}}</span>
+		</div>
+
+		<div class="write-message-box" v-show="isShowMessagebox">
+				<Field
+					v-model="message_content"
+					label=""
+					type="textarea"
+					placeholder="留言精选后，将对所有人可见"
+					autosize
+				/>
+				<div class="write-bottom">
+					<div class="left">
+						<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' })"/>
+					</div>
+					<Button type="primary" :disabled="!message_content" @click="publishMessageHandle">发布</Button>
+				</div>
+		</div>
+
+		<div class="message-list-cont">
+			<template v-if="myMessageList.length">
+				<div class="my-message message-section">
+					<h4 class="section-label">我的留言</h4>
+					<ul class="mesage-ul">
+						<li class="message-item" v-for="item in realMyList" :key="item.comment_id">
+							<div class="message-cont">
+								<img :src="item.user_img_url" alt="" class="avatar">
+								<div class="info">
+									<div class="info-top">
+										<span class="name">
+											{{item.user_name}}
+											<Tag color="#DEDFE5" text-color="#fff" v-if="item.IsTop">置顶</Tag>
+										</span>
+										<div class="right-tag">
+											<span>{{item.IsHot ? '已精选' : '未精选'}}</span>
+											<span class="divider">|</span>
+											<span class="del" @click="delMessageHandle(item)">删除</span>
+										</div>
+									</div>
+									<p class="content">{{item.content}}</p>
+								</div>
+							</div>
+							<ul class="reply-list" v-if="item.ReplyList">
+								<li class="message-cont" v-for="sub_item in item.ReplyList" :key="sub_item.comment_id">
+									<img :src="sub_item.admin_img_url" alt="" class="reply-avatar">
+									<div class="info">
+										<span class="name">{{sub_item.admin_name}}</span>
+										<p class="content">{{sub_item.content}}</p>
+									</div>
+								</li>
+							</ul>
+						</li>
+						<li class="control" @click="slideMymessageHandle" v-if="myMessageList.length > 3">
+							<span>{{isSlideMyMsg ? '收起' : '展开'}} <Icon :name="isSlideMyMsg ? 'arrow-up' : 'arrow-down'"/></span>
+						</li>
+					</ul>
+				</div>
+				<Divider style="border-color: #999;">以上留言被精选后，将所有人可见</Divider>
+			</template>
+			<div class="wonder-message message-section" v-if="hotMessageList.length">
+				<h4 class="section-label">精选留言</h4>
+				<ul class="mesage-ul">
+					<li class="message-item" v-for="item in hotMessageList" :key="item.comment_id">
+						<div class="message-cont">
+							<img :src="item.user_img_url" alt="" class="avatar">
+							<div class="info">
+								<div class="info-top">
+									<span>
+										{{item.user_name}}
+										<Tag color="#DEDFE5" text-color="#fff" v-if="item.IsTop">置顶</Tag>
+									</span>
+									<span class="del" @click="delMessageHandle(item)" v-if="item.user_id === Number(userId)">删除</span>
+								</div>
+								<p class="content">{{item.content}}</p>
+							</div>
+						</div>	
+						<ul class="reply-list" v-if="item.ReplyList">
+							<li class="message-cont" v-for="sub_item in item.ReplyList" :key="sub_item.comment_id">
+								<img :src="sub_item.admin_img_url" alt="" class="reply-avatar">
+								<div class="info">
+									<span class="name">{{sub_item.admin_name}}</span>
+									<p class="content">{{sub_item.content}}</p>
+								</div>
+							</li>
+						</ul>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+
+</template>
+
+<style scoped lang="scss">
+.givelike-container {
+	.like-top{
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background-color: #fff;
+		color: #E3B377;
+		padding: 40px 30px;
+		.van-icon-good-job-o {
+			font-size: 48px;
+		}
+		.van-icon-good-job {
+			font-size: 48px;
+			/* color: #E3B377; */
+		}
+	}
+	.write-message-box {
+		background-color: #fff;
+		padding: 0 30px 40px;
+		.van-field {
+			border-radius: 8px;
+			border: 1px solid #E3B377;
+			height: 400px;
+			overflow-y: auto;
+		}
+		.write-bottom {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-top: 30px;
+			.left {
+				display: flex;
+				align-items: center;
+				.label {
+					font-size: 28px !important;
+					margin: 0 10px;
+					color: #E3B377;
+				}
+			}
+			.van-button--primary {
+				height: 58px;
+				font-size: 24px;
+				background-color: #E3B377;
+				border-color: #E3B377;
+			}
+		}
+	}
+
+	.message-list-cont {
+		padding: 70px 30px;
+		background: #F5F6FA;
+		.message-section {
+			.section-label {
+				color: #999;
+				font-size: 28px;
+			}
+			.control {
+				display: flex;
+				justify-content: center;
+				color: #6784A7;
+			}
+			.message-item  {
+				margin: 20px 0 30px;
+				.message-cont {
+					display: flex;
+					.avatar {
+						width: 66px;
+						height: 66px;
+						margin-right: 20px;
+					}
+					.info {
+						flex: 1;
+						.name {
+							font-size: 24px;
+						}
+						.info-top {
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							color: #999;
+							.divider {
+								display: inline-block;
+								margin: 0 10px;
+							}
+							.del {
+								color: #6784A7;
+							}
+						}
+						.content {
+							font-size: 28px;
+							color: #666;
+						}
+					}
+
+				}
+				.reply-list {
+					margin: 20px 0;
+					padding-left: 80px;
+					.reply-avatar {
+						width: 40px;
+						height: 40px;
+						margin-right: 20px;
+					}
+				}
+			}
+		}
+	}
+}
+</style>

src/views/hzyb/report/ChapterDetail.vue

@@ -62,6 +62,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"/>
 
@@ -121,6 +129,7 @@ import {Popup,Image as VanImage,PullRefresh,Col, Row} from 'vant'
 import AudioBox from './components/AudioBox.vue'
 import SharePoster from '../components/SharePoster.vue'
 import _ from 'lodash';
+import LeaveMessage from '../components/leaveMessage/index.vue'
 export default {
   components:{
     [Popup.name]:Popup,
@@ -130,7 +139,8 @@ export default {
     [Row.name]:Row,
     [PullRefresh.name]:PullRefresh,
     AudioBox,
-    SharePoster
+    SharePoster,
+    LeaveMessage
   },
   computed:{
     code_scene(){
@@ -142,7 +152,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,
       }
     }
   },
@@ -150,7 +160,7 @@ export default {
     return {
       showDisclaimers: false, //显示免责声明
       chapterId:0,
-      fromPage:'',//如果是从首页(home)来的则隐藏底部切换
+      fromPage:'',//如果是从首页(home)来的则隐藏底部切换 message定位到留言板
       info:null,
       audioData:{},//音频数据
 
@@ -177,6 +187,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) {
@@ -405,6 +416,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

@@ -99,6 +99,14 @@
             ></SharePoster>
             </Teleport>
         </div>
+        
+        <!-- 留言点赞模块 -->
+        <div id="messgaeBoardCont" v-if="info.auth_ok && !['晨报','周报'].includes(info.report_info.classify_name_first)">
+            <LeaveMessage
+                :info="info"
+                @like_change="giveOrCancelLike"
+            />
+        </div>
 
         <!-- 免责声明 -->
         <van-popup :show="showDisclaimers" @close="showDisclaimers=false" round closeable>
@@ -139,13 +147,15 @@ import {Popup,Image as VanImage,PullRefresh} from 'vant'
 import AudioBox from './components/AudioBox.vue'
 import SharePoster from '../components/SharePoster.vue'
 import _ from 'lodash';
+import LeaveMessage from '../components/leaveMessage/index.vue'
 export default {
     components:{
         [Popup.name]:Popup,
         [VanImage.name]:VanImage,
         [PullRefresh.name]:PullRefresh,
         AudioBox,
-        SharePoster
+        SharePoster,
+        LeaveMessage
     },
     computed:{
         code_scene(){
@@ -180,15 +190,18 @@ export default {
             page_no: 0,
             pageSize: 20,//默认初始加载20个p标签
             total_page: 0,
+            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(){
@@ -382,6 +395,12 @@ export default {
                 
             }
         },
+        
+        /* 点赞/取消点赞 */
+        giveOrCancelLike({like_enabled,like_num}) {
+            this.info.like_num = like_num;
+            this.info.like_enabled = like_enabled;
+        },
 
         onRefresh() {
             this.getDetail()
@@ -441,7 +460,7 @@ export default {
     display: flex;
 }
 .report-detail-page{
-    padding-bottom: 50px;
+    /* padding-bottom: 50px; */
     .main-box{
         padding: 34px;
         .title{

vite.config.js

@@ -1,6 +1,6 @@
 import { defineConfig,loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import styleImport from 'vite-plugin-style-import';
+// import styleImport from 'vite-plugin-style-import';
 import path from "path";
 // https://vitejs.dev/config/
 export default ({mode})=>defineConfig({