Merge branch 'yb4.2'

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

@@ -78,6 +78,7 @@ const publishMessageHandle = async() => {
 	isShowMessagebox.value = false
 	setTimeout(() => {
 		getMyMsgList();
+		getHotMsgList();
 	},300)
 }
 
@@ -87,6 +88,10 @@ const myMessageList = ref([]);
 const realMyList = ref([]);
 //精选留言列表
 const hotMessageList = ref([]);
+
+// 当前选中哪种留言
+let msgType=ref('全部留言')
+
 /* 我的留言 */
 const getMyMsgList = async () => {
 
@@ -101,7 +106,7 @@ const getMyMsgList = async () => {
 
 	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;
+	// realMyList.value = myMessageList.value.length > 3  ? myMessageList.value.slice(0,3) : myMessageList.value;
 }
 /* 精选留言 */
 const getHotMsgList = async () => {
@@ -124,13 +129,23 @@ const getHotMsgList = async () => {
 getMyMsgList();
 getHotMsgList();
 //是否收起我的留言
-const isSlideMyMsg = ref(false);
-const slideMymessageHandle = () => {
-	isSlideMyMsg.value = !isSlideMyMsg.value
-	realMyList.value = isSlideMyMsg.value ? myMessageList.value : myMessageList.value.slice(0,3);
+// const isSlideMyMsg = ref(false);
+// const slideMymessageHandle = () => {
+// 	isSlideMyMsg.value = !isSlideMyMsg.value
+// 	realMyList.value = isSlideMyMsg.value ? myMessageList.value : myMessageList.value.slice(0,3);
+// }
+// 留言类型切换
+const msgTypeChange=(e)=>{
+	msgType.value=e
+	if(e==='全部留言'){
+		getHotMsgList();
+	}else{
+		getMyMsgList();
+	}
 }
 
 
+
 /* 点赞 */
 const giveLikeHandle = async() => {
 	const { code,data } = await setLike({
@@ -161,16 +176,16 @@ const delMessageHandle = ({ 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);
+		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);
-		}
+		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);
 	}
+}
 
 	// 跳转到问答首页
 	const linkToQuestionHandle = () => {
@@ -194,7 +209,7 @@ const delMessageHandle = ({ comment_id }) => {
 					v-model="message_content"
 					label=""
 					type="textarea"
-					placeholder="留言精选后，将对所有人可见"
+					placeholder="发布一条留言"
 					autosize
 				/>
 				<div class="write-bottom">
@@ -209,22 +224,31 @@ const delMessageHandle = ({ comment_id }) => {
 		</div>
 
 		<div class="message-list-cont">
-			<template v-if="myMessageList.length">
+			<div class="tabs-box">
+				<span 
+					:class="msgType==='全部留言'?'active':''" 
+					@click="msgTypeChange('全部留言')"
+				>全部留言</span>
+				<span 
+					:class="msgType==='我的留言'?'active':''"
+					@click="msgTypeChange('我的留言')"
+				>我的留言</span>
+			</div>
+			<template v-if="msgType==='我的留言'">
 				<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">
+						<li class="message-item" v-for="item in myMessageList" :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>
+											<Tag color="#DEDFE5" text-color="#fff" v-if="item.is_top==1">置顶</Tag>
 										</span>
 										<div class="right-tag">
-											<span>{{item.IsHot ? '已精选' : '未精选'}}</span>
-											<span class="divider">|</span>
+											<!-- <span>{{item.IsHot ? '已精选' : '未精选'}}</span>
+											<span class="divider">|</span> -->
 											<span class="del" @click="delMessageHandle(item)">删除</span>
 										</div>
 									</div>
@@ -241,46 +265,54 @@ const delMessageHandle = ({ comment_id }) => {
 								</li>
 							</ul>
 						</li>
-						<li class="control" @click="slideMymessageHandle" v-if="myMessageList.length > 3">
+						<!-- <li class="control" @click="slideMymessageHandle" v-if="myMessageList.length > 3">
 							<span>{{isSlideMyMsg ? '收起' : '展开'}} <Icon :name="isSlideMyMsg ? 'arrow-up' : 'arrow-down'"/></span>
-						</li>
+						</li> -->
 					</ul>
 				</div>
-				<Divider style="border-color: #999;">以上留言被精选后，将所有人可见</Divider>
+				<div 
+					v-if="myMessageList.length==0" 
+					style="text-align:center;font-size:14px;color:#999;line-height:100px"
+				>
+					暂无留言
+				</div>
 			</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">
+			<template v-if="msgType==='全部留言'">
+				<div class="wonder-message message-section" v-if="hotMessageList.length">
+					<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">
-									<span class="name">{{sub_item.admin_name}}</span>
-									<p class="content">{{sub_item.content}}</p>
+									<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>
-							</li>
-						</ul>
-					</li>
-				</ul>
-			</div>
-			<div v-if="myMessageList.length==0&&hotMessageList.length==0" style="text-align:center;font-size:14px;color:#999;line-height:100px">
-				暂无留言
-			</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 
+					v-if="hotMessageList.length==0" 
+					style="text-align:center;font-size:14px;color:#999;line-height:100px"
+				>
+					暂无留言
+				</div>
+			</template>
 			<!-- 跳转问答区域 -->
 			<div class="link-to-question" @click="linkToQuestionHandle">
 				想要一对一回复吗？去问答社区提问
@@ -342,6 +374,32 @@ const delMessageHandle = ({ comment_id }) => {
 	.message-list-cont {
 		padding: 70px 30px;
 		background: #F5F6FA;
+		.tabs-box{
+			margin-bottom: 50px;
+			span{
+				font-size: 30px;
+				display: inline-block;
+				margin-right: 60px;
+				color: #999;
+			}
+			.active{
+				font-size: 32px;
+				color: #333;
+				position: relative;
+				&::after{
+					content: '';
+					position: absolute;
+					top: 105%;
+					left: 50%;
+					transform: translateX(-50%);
+					width: 48px;
+					height: 6px;
+					background: #E3B377;
+					border-radius: 4px;
+				}
+			}
+			
+		}
 		.message-section {
 			.section-label {
 				color: #999;