|
@@ -78,6 +78,7 @@ const publishMessageHandle = async() => {
|
|
isShowMessagebox.value = false
|
|
isShowMessagebox.value = false
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
getMyMsgList();
|
|
getMyMsgList();
|
|
|
|
+ getHotMsgList();
|
|
},300)
|
|
},300)
|
|
}
|
|
}
|
|
|
|
|
|
@@ -87,6 +88,10 @@ const myMessageList = ref([]);
|
|
const realMyList = ref([]);
|
|
const realMyList = ref([]);
|
|
//精选留言列表
|
|
//精选留言列表
|
|
const hotMessageList = ref([]);
|
|
const hotMessageList = ref([]);
|
|
|
|
+
|
|
|
|
+// 当前选中哪种留言
|
|
|
|
+let msgType=ref('全部留言')
|
|
|
|
+
|
|
/* 我的留言 */
|
|
/* 我的留言 */
|
|
const getMyMsgList = async () => {
|
|
const getMyMsgList = async () => {
|
|
|
|
|
|
@@ -101,7 +106,7 @@ const getMyMsgList = async () => {
|
|
|
|
|
|
myMessageList.value = data.list || [];
|
|
myMessageList.value = data.list || [];
|
|
isHideRealName.value = data.is_show_name ? false : true;
|
|
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 () => {
|
|
const getHotMsgList = async () => {
|
|
@@ -124,13 +129,23 @@ const getHotMsgList = async () => {
|
|
getMyMsgList();
|
|
getMyMsgList();
|
|
getHotMsgList();
|
|
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 giveLikeHandle = async() => {
|
|
const { code,data } = await setLike({
|
|
const { code,data } = await setLike({
|
|
@@ -161,16 +176,16 @@ const delMessageHandle = ({ comment_id }) => {
|
|
|
|
|
|
/* 删除页面上的留言 */
|
|
/* 删除页面上的留言 */
|
|
const 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);
|
|
|
|
|
|
+ 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)
|
|
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 = () => {
|
|
const linkToQuestionHandle = () => {
|
|
@@ -194,7 +209,7 @@ const delMessageHandle = ({ comment_id }) => {
|
|
v-model="message_content"
|
|
v-model="message_content"
|
|
label=""
|
|
label=""
|
|
type="textarea"
|
|
type="textarea"
|
|
- placeholder="留言精选后,将对所有人可见"
|
|
|
|
|
|
+ placeholder="发布一条留言"
|
|
autosize
|
|
autosize
|
|
/>
|
|
/>
|
|
<div class="write-bottom">
|
|
<div class="write-bottom">
|
|
@@ -209,22 +224,31 @@ const delMessageHandle = ({ comment_id }) => {
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="message-list-cont">
|
|
<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">
|
|
<div class="my-message message-section">
|
|
- <h4 class="section-label">我的留言</h4>
|
|
|
|
<ul class="mesage-ul">
|
|
<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">
|
|
<div class="message-cont">
|
|
<img :src="item.user_img_url" alt="" class="avatar">
|
|
<img :src="item.user_img_url" alt="" class="avatar">
|
|
<div class="info">
|
|
<div class="info">
|
|
<div class="info-top">
|
|
<div class="info-top">
|
|
<span class="name">
|
|
<span class="name">
|
|
{{item.user_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>
|
|
</span>
|
|
<div class="right-tag">
|
|
<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>
|
|
<span class="del" @click="delMessageHandle(item)">删除</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -241,46 +265,54 @@ const delMessageHandle = ({ comment_id }) => {
|
|
</li>
|
|
</li>
|
|
</ul>
|
|
</ul>
|
|
</li>
|
|
</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>
|
|
<span>{{isSlideMyMsg ? '收起' : '展开'}} <Icon :name="isSlideMyMsg ? 'arrow-up' : 'arrow-down'"/></span>
|
|
- </li>
|
|
|
|
|
|
+ </li> -->
|
|
</ul>
|
|
</ul>
|
|
</div>
|
|
</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>
|
|
</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">
|
|
<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>
|
|
</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">
|
|
<div class="link-to-question" @click="linkToQuestionHandle">
|
|
想要一对一回复吗?去问答社区提问
|
|
想要一对一回复吗?去问答社区提问
|
|
@@ -342,6 +374,32 @@ const delMessageHandle = ({ comment_id }) => {
|
|
.message-list-cont {
|
|
.message-list-cont {
|
|
padding: 70px 30px;
|
|
padding: 70px 30px;
|
|
background: #F5F6FA;
|
|
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 {
|
|
.message-section {
|
|
.section-label {
|
|
.section-label {
|
|
color: #999;
|
|
color: #999;
|