Merge branch 'yb5.2'

src/api/question.js

@@ -79,4 +79,86 @@ export const apiCountAudioClick = params=>{
 		source_agent=4
 	}
     return post('/community/question/audio/log',{...params,source_agent})
+}
+
+
+/**
+ * 点赞/吐槽
+ *  "community_question_id": 35,
+    "op_type": 1, 1-点赞 2-吐槽
+    "enable": 1, 0取消 1-有效数据
+    "source_agent": 1, 1：小程序，2：小程序 pc 3:弘则研究公众号，4:web pc
+ */
+export const apiSetLike = params => {
+    let source_agent=2
+    if(window.__wxjs_environment === 'miniprogram'){
+        source_agent=2
+    }else{
+        source_agent=4
+    }
+    return post('/community/set_like_or_tease',{ source_agent,...params })
+}
+        
+/**
+ * 发布评论
+ * @param {*} params 
+ * "community_question_id": 3F5,
+ "content": "这里是roc的测试评论",
+    "is_show_name": 0,
+    "source_agent": 1,
+*/
+export const apiPublishComment = params => {
+    let source_agent=2
+    if(window.__wxjs_environment === 'miniprogram'){
+        source_agent=2
+    }else{
+        source_agent=4
+    }
+    return post('/community/comment',{ source_agent,...params })
+}
+
+/**
+ * 获取设置昵称状态
+ * @param {*} params 
+ */
+export const apiCheckNick = params => {
+return get('/community/need_anonymous_user_tips')
+}
+
+/**
+ * 不在提醒设置弹窗
+ * @param {*} params 
+ */
+export const apiCanelNickTip = params => {
+    return post('/community/set_anonymous_user_tips')
+}
+
+/**
+ * 删除留言
+ * @param {community_question_comment_id} params 
+ */
+export const apiDelComment = params => {
+    return post('/community/comment/delete',params)
+}
+        
+/**
+ * 精选留言列表
+ * @param {*} params
+ * community_question_id 
+ * curr_page
+ * page_size
+ */
+export const apiHotComment = params => {
+    return get('/community/comment/hot',params)
+}
+        
+/**
+ * 我的留言列表
+ * @param {*} params
+ * community_question_id 
+ * curr_page
+ * page_size
+ */
+export const apiMyComment = params => {
+    return get('/community/comment/my',params)
 }

src/components/QuestionComment.vue

@@ -0,0 +1,305 @@
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { ElMessage,ElMessageBox  } from 'element-plus'
+import {ArrowUp} from "@element-plus/icons-vue";
+import * as $api from '@/api/question'
+
+const props = defineProps({
+    item: Object
+})
+
+
+const dataInfo = ref({...props.item,commentInfo: {}});
+
+watch(
+    ()=>props.item,
+    (newval)=>{
+        console.log(newval)
+        dataInfo.value=props.item
+    }
+)
+
+/* 点赞/吐槽 */
+const setLikeHandle = async(type) => {
+    const { community_question_id } = dataInfo.value;
+    const { data, code } = await $api.apiSetLike({
+        op_type: type,
+        community_question_id: community_question_id,
+        enable: type === 1 ? Number(dataInfo.value.op_type!==1) : Number(dataInfo.value.op_type!==2)
+    })
+    
+    if(code !== 200) return
+    
+    const { enabled,op_type,like_total,tease_total } = data;
+    dataInfo.value.tease_total = tease_total;
+    dataInfo.value.like_total = like_total;
+    dataInfo.value.op_type = enabled === 0 ? 0 : op_type ;
+    ElMessage.success({
+        message: enabled === 0 ? '取消成功' : op_type=== 1 ? '点赞成功' : '吐槽成功'
+    })
+}
+
+
+// 展开评论
+const openCommentHandle = () => {
+    dataInfo.value.commentInfo = {
+        show: true,
+        commentList: [],
+        comment_content: '',
+        default_type: 1,//默认精选
+    }
+    getComment(1)
+}
+const comment_total = ref({});//评论数量
+/* 获取评论 */
+const getComment = async(type) => {
+    dataInfo.value.commentInfo.default_type = type;
+    dataInfo.value.commentInfo.commentList = [];
+    const {community_question_id} = dataInfo.value
+    const params = {
+    community_question_id,
+    curr_page: 1,
+    page_size: 10000
+    }
+    const { code,data } = type === 1 ? await $api.apiHotComment(params) : await $api.apiMyComment(params);
+    
+    if(code !== 200) return
+    dataInfo.value.commentInfo.commentList = data.list || [];
+    comment_total.value = {
+        hot_num: data.hot_total,
+        my_num: data.my_total
+    }
+}
+/* 收起评论 */
+const closeComment = () => {
+    dataInfo.value.commentInfo = {
+        show: false,
+        commentList: [],
+        comment_content: '',
+        default_type: 1,//默认精选
+    }
+}
+/* 校验昵称状态*/
+const checkNickHandle = async() => {
+    const { data,code } = await $api.apiCheckNick();
+    
+    if(code !== 200) return
+    
+    const htmlStr=`检测到您还未设置头像和昵称，您的留言将发布为匿名，是否立即去设置？`
+    !data && ElMessageBox({
+        title:`温馨提醒`,
+        message:htmlStr,
+        center: true,
+        dangerouslyUseHTMLString: true,
+        confirmButtonText:'去设置',
+        confirmButtonClass:'self-elmessage-confirm-btn',
+        showCancelButton:true,
+        cancelButtonText:'暂时不用',
+        cancelButtonClass:'self-elmessage-cancel-btn'
+    }).then(()=>{
+        router.push('/user/setinfo')
+    }).catch(()=>{
+        setCancelNickHandle();
+    })
+}
+/* 不在提醒弹窗 */
+const setCancelNickHandle = async() => {
+    await $api.apiCanelNickTip()
+
+}
+/* 发布留言*/
+const publishMessageHandle = async() => {
+    const { commentInfo,community_question_id } = dataInfo.value
+    const { code } = await $api.apiPublishComment({
+    content: commentInfo.comment_content,
+    community_question_id
+    })
+    
+    if(code !== 200) return
+
+    ElMessage.success({
+        message: '发布成功'
+    })
+    commentInfo.comment_content = '';
+
+    // 在我的评论tab下刷数据
+    commentInfo.default_type === 2 && getComment(2)
+
+}
+
+/* 删除留言 */
+const delCommentHandle = ({community_question_comment_id},index) => {
+    const { commentInfo } = dataInfo.value
+    ElMessageBox.confirm(
+        "评论删除后不可恢复，确认删除吗？",
+        '提示',
+        {
+            type: 'warning',
+        }
+    ).then( async()=>{
+        const { code } = await $api.apiDelComment({ community_question_comment_id });
+        if( code !== 200 ) return
+        
+        ElMessage.success({
+            message: '删除成功'
+        })
+        commentInfo.commentList.splice(index,1)
+    }).catch(()=>{
+    })
+}
+
+
+</script>
+
+<template>
+    <div class="question-comment-wrapper">
+        <view class="commetn-item-wrap" @click="setLikeHandle(2)">
+            <img src="@/assets/question/tease_act.png" alt="" v-if="dataInfo.op_type===2" class="icon">
+            <img src="@/assets/question/tease.png" alt="" v-else class="icon">
+            <text v-if="dataInfo.tease_total">{{dataInfo.tease_total}}</text>
+        </view>
+        <view class="commetn-item-wrap" >
+            <span 
+                @click="closeComment" 
+                v-if="dataInfo.commentInfo &&dataInfo.commentInfo.show"
+                style="cursor:pointer;color:#F3A52F"
+            >收起评论 <el-icon><ArrowUp /></el-icon></span>
+            <img src="@/assets/question/comment.png" alt="" class="icon" v-else @click="openCommentHandle">
+            <!-- <text v-if="dataInfo.comment_total">{{dataInfo.comment_total}}</text> -->
+        </view>
+        <view class="commetn-item-wrap" @click="setLikeHandle(1)">
+            <img src="@/assets/question/like_act.png" alt="" v-if="dataInfo.op_type===1" class="icon">
+            <img src="@/assets/question/like.png" alt="" v-else class="icon">
+            <text v-if="dataInfo.like_total">{{dataInfo.like_total}}</text>
+        </view>
+    </div>
+
+    <!-- 评论区域 -->
+    <div class="comment-list-wrapper" v-if="dataInfo.commentInfo &&dataInfo.commentInfo.show">
+        <div class="write-cont">
+            <el-input
+                v-model="dataInfo.commentInfo.comment_content"
+                :autosize="{minRows: 2}"
+                type="textarea"
+                placeholder="发布一条友善的评论"
+                class="write-ipt"
+                @focus="checkNickHandle"
+            />
+            <div class="btn-bottom">
+                <el-button type="" link style="font-size: 16px;" @click="closeComment">取消发布</el-button>
+                <el-button 
+                    type="warning" 
+                    round 
+                    size="large" 
+                    style="width: 120px" 
+                    @click="publishMessageHandle" 
+                    :disabled="!dataInfo.commentInfo.comment_content"
+                >发布</el-button>
+            </div>
+        </div>
+
+        <div class="list-cont">
+            <ul class="list-tab">
+                <li :class="dataInfo.commentInfo.default_type===1 && 'act'" @click="getComment(1)">精选评论({{comment_total.hot_num}})</li>
+                <li :class="dataInfo.commentInfo.default_type===2 && 'act'" @click="getComment(2)">我的评论({{comment_total.my_num}})</li>
+            </ul>
+            <ul class="list-ul" v-if="dataInfo.commentInfo.commentList.length">
+                <li class="list-item" v-for="(item,index) in dataInfo.commentInfo.commentList" :key="item.community_question_comment_id">
+                    <div>
+                        <span style="color: #333">{{item.user_name}}：</span>
+                        {{item.content}}
+                    </div>
+                    <div class="del" v-if="dataInfo.commentInfo.default_type===2" @click="delCommentHandle(item,index)">删除</div>
+                </li>
+            </ul>
+            <div class="nodata" v-else>暂无评论</div>
+        </div>
+        <!-- <div class="slide-up" @click="closeComment">
+            收起评论 <el-icon><ArrowUp /></el-icon>
+        </div> -->
+    </div>
+</template>
+
+<style lang='scss' scoped>
+.question-comment-wrapper {
+    color: #999;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 15px 20px;
+    margin-top: 20px;
+	.commetn-item-wrap {
+		display: flex;
+		align-items: center;
+		.icon {
+			width: 22px;
+			height: 22px;
+			margin-right: 10px;
+            cursor: pointer;
+		}
+	}
+}
+.comment-list-wrapper {
+    position: relative;
+    .write-ipt {
+        width: 100%;
+        margin-bottom: 15px;
+        ::v-deep(.el-textarea__inner) {
+            border: 1px solid #F3A52F;
+            box-shadow: none;
+        }
+        ::v-deep(.el-textarea__inner:focus) {
+            box-shadow: none;
+        }
+    }
+    .btn-bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .btn-sty {
+            width: 140px;
+            height: 40px !important;
+            line-height: 40px  !important;
+        }
+    }
+    .list-cont {
+        border-top: 1px solid #F2F2F2;
+        margin-top: 20px;
+        padding: 20px 0;
+        color: #999;
+        font-size: 16px;
+        .list-tab{
+            display: flex;
+            li {
+                margin-right: 30px;
+                cursor: pointer;
+                &.act { color: #F3A52F; }
+            }
+        }
+        .list-ul {
+            margin-top: 30px;
+            max-height: 400px;
+            overflow-y: auto;
+            .list-item {
+                margin-bottom: 20px;
+            }
+            .del {
+                color: #f00;
+                margin-top: 10px;
+                cursor: pointer;
+            }
+        }
+    }
+}
+.nodata {
+    text-align: center;
+    margin: 40px 0;
+}
+.slide-up {
+    color: #F3A52F;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    cursor: pointer;
+}
+</style>

src/views/question/List.vue

@@ -13,6 +13,8 @@ import {ElMessage,ElMessageBox} from "element-plus"
 import {useStore} from "vuex"
 import moment from 'moment';
 
+import QuestionComment from '@/components/QuestionComment.vue'
+
 const store = useStore()
 const router = useRouter()
 
@@ -425,6 +427,9 @@ onBeforeRouteLeave(()=>{
               </div>
               <div class="audio-time">{{moment((item.audio_status.audioTime - item.audio_status.playedTime)).format('mm:ss')}}</div>
             </div>
+
+            <!-- 点赞/评论 -->
+            <QuestionComment :item="item"/>
           </div>
           <div class="bottom-tip-contain">
             <div class="bottom-tip-loadMore" v-show="!question.isTotalData && !question.isLoading" @click="loadingMore">加载更多</div>