xmhjc-web/src/components/NewsCom/NewsType4.vue

<template>
    <!-- 在线问答 -->
    <div>
    <div style="width: 1200px;padding: 20px;margin: 0 auto;">
        <a-breadcrumb>
            <a-breadcrumb-item><a href="/index">首页</a></a-breadcrumb-item>
            <a-breadcrumb-item>在线问答</a-breadcrumb-item>
        </a-breadcrumb>
    </div>
    <div class="CompanyNews">
        <div class="title">
            <div class="title-text">我要提问</div>
            <div class="title-text2">
                 <a-textarea style="height:120px" v-model:value="value2" placeholder="请输入问题" allow-clear />
            </div>
            <div class="title-text3">
                <a-button type="primary" @click="submit">提交</a-button>
            </div>
        </div>
        <div class="right">
            <div class="right_top">
                <a-menu v-model:selectedKeys="rightCurrent" mode="horizontal" :items="rightTopItems" />
            </div>
            <div class="newsBox">
                <div @click="openModal(item)" class="news" v-for="item in list" :key="item.id">
                    <div class="news_two">
                        <div class="news_title">
                            <MessageFilled style="color:#427eff;margin-right:5px" />
                            {{ item.title }}
                        </div>
                        <div class="news_time">{{ item.time }}</div>
                        <div class="news_text">{{item.outline}}</div>
                        <div class="news_text2">{{item.views}}个浏览</div>
                    </div>
                </div>
            </div>
            <div class="pagination">
                <a-pagination v-model:current="pagecurrent" :pageSize='pageSize' :total="total"  />
            </div>
        </div>
        <div>
            <a-modal :maskClosable='false' :width='600' :footer="null" v-model:open="open" :title="ModalData.title" @cancel="handleCancel" @ok="handleOk" :centered="true">
                <div>
                    <CommentList :CommentId="CommentId" />
                </div>
            </a-modal>
        </div>
    </div>
    </div>
</template>

<script setup>
import {onMounted,ref,reactive,watch} from 'vue'
import { MessageFilled } from "@ant-design/icons-vue";
import {createQuestion,contentPage,topicDetail,topicReply} from '@/http/api/common.js' 
import {openMessage} from '@/views/util/util.js'
import CommentList from './base/comment-list.vue'
const ModalData =ref({
    title:''
})
const open =ref(false)
const rightTopItems = ref([
    {
        label: '热门回答',
        title: '热门回答',
        key:'1'
    },
    {
        label:'最新回答',
        title:'最新回答',
        key:'2'
    },
    {
        label:'待回答',
        title:'待回答',
        key:'3'
    }
]);
const rightCurrent = ref(['1']);

const list = ref([])
const pagecurrent = ref(1)
const pageSize = ref(10)
const total = ref(0)

const value2 = ref('')

const handleCancel = () => {
    open.value = false
};
const handleOk = e => {
    open.value = false
};

const CommentId = ref('')
const openModal = async (item) =>{
    ModalData.value = item
    open.value = true
    CommentId.value = item.id
}

onMounted(async() => {
     //获取所有问题
     await getcontentPage()
});
watch(rightCurrent, async() => {
    pagecurrent.value = 1
    await getcontentPage()
});
watch(pagecurrent, async() => {
  await getcontentPage()
});
const getcontentPage =async () =>{
    //1=热门回答；2=最新回答；3=带解答？暂时改成我的提问
    let data = {
        "pageSize": pageSize.value,
        "pageNum": pagecurrent.value,
        "sortType":rightCurrent.value[0]
    }
    let res = await contentPage(rightCurrent.value[0],data)

    list.value = res.data.rows
    total.value = res.data.total
}
async function submit  (){
    if (!localStorage.getItem('token') || localStorage.getItem('token')=='') {
        openMessage('请先登录！')
        return
    }
    if (value2.value == '') {
        openMessage('请输入问题')
        return
    }
    
    //创建问题
    let res = await createQuestion({
        "title": value2.value,
        "content": value2.value
    })
    if (res.code == 200) {
        await getcontentPage()
        openMessage('操作成功')
        value2.value=''
    }else{
        openMessage('token已过期 请重新登陆！')
        setTimeout(()=>{
            localStorage.setItem('token','')
            localStorage.setItem('userName','')
            window.location.reload()
        },1000)
    }
}
</script>

<style scoped>
.CompanyNews{
    width: 1200px;
    margin: 0 auto;
    padding: 20px;
    min-height: 300px;
    background-color: #fff;
}
.title{
    display: flex;
    flex-direction: column;
}
.title-text {
    margin: 20px 0 10px 0;
    font-size: 20px;
    font-weight: bolder;
    width: 100%;
    padding-left: 10px;
}
.title-text2 {
    width: 100%;
    min-height: 130px;
    font-size: 18px;
    padding: 10px;
}
.title-text3 {
    float: right;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-right: 10px;
}
.newsBox{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 20px;
}
.news{
    width: 100%;
    min-width: 350px;
    height: 160px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 10px;
    border-radius: 10px;
    padding: 10px 20px;
    /* background-color: #f2f2f2; */
    border: 1px solid #f2f2f2;
    cursor: pointer;
}
.news_title{
    font-size: 16px;
    font-weight: bold;
}
.news_text{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: revert-layer;
    min-width: 250px;
    width: 100%;
    min-height: 50px;
    line-height: 50px;
    text-indent: 1.6rem;
}
.news_text2{
    color: #8f8f8f;
    text-indent: 1.6rem;
}
.icon{
    color: #1677ff;
    font-size: 30px;
}
.title_line{
    height: 100px;
    /* border-left: 1px solid #ccc; */
    margin: 0 10px;
}
.news_one{
    width: 20%;
    min-width: 80px;
    height: 100%;
}
.news_one_img{
    width: 100%;
    min-width: 80px;
    height: 100%;
}
.news_two{
    width: 100%;
    min-width: 250px;
}

.news_time{
    color: #999;
}
.pagination{
    text-align: center;
    margin-top: 20px;
}

</style>