268 lines
19 KiB
Vue
268 lines
19 KiB
Vue
<template>
|
||
<div>
|
||
<div class="" id="answer-app">
|
||
|
||
<div class="main flexflex" :class="{'mode-list': type == 'list'}">
|
||
<div class="list-box" @scroll="handleListScroll">
|
||
<div class="main-header" :style="{paddingLeft: type == 'list' ? 0 : 'calc((100vw - 1200px) / 2)'}">
|
||
<template v-if="isSearchMode">
|
||
<div class="search-keyword flexacenter" @click="handleClickClear()">
|
||
<div class="ellipsis">{{ keywordText }}</div>
|
||
<img class="search-keyword-cross" src="./img/cross-circle-icon.png" />
|
||
</div>
|
||
<div class="total grid-item" @click="cut">共 {{ total }} 条搜索结果</div>
|
||
</template>
|
||
|
||
<div v-else class="total grid-item" @click="cut">共 {{ total }} 条问答</div>
|
||
</div>
|
||
<div class="list" id="list" :style="[listStyle(), {height: listHeight + 'px'}]">
|
||
<a class="item grid-item flexflex" v-for="(item, index) in list" :key="index" :style="itemStyle(index, item['content'])" :class="{pitch: index === pitchIndex, upLevel: index === pitchIndex - 1}" :href="setItemUrl(item['uniqid'])" @click.stop.prevent="getDetails(item['uniqid'], index)">
|
||
<img class="dot" src="./img/dot.svg" />
|
||
<div class="content" :style="{width: type == 'list' ? '531px' : '430px'}">
|
||
<div class="issue-title flexcenter">
|
||
<img class="hot-icon" v-if="item['ishot'] == 1" src="./img/hot-icon.png" />
|
||
<div class="issue ellipsis flex1" v-html="item['title']"></div>
|
||
</div>
|
||
<div class="answer ellipsis" v-if="item['content']" v-html="item['content']"></div>
|
||
<div class="bottom flexacenter">
|
||
<div class="typename flexcenter" v-if="item['typename']">{{ item["typename"] }}</div>
|
||
<div v-else></div>
|
||
<div class="flexacenter">
|
||
<div class="quantity">{{ item["answers"] == 0 ? "暂无回答" : "共" + item["answers"] + "个回答" }}</div>
|
||
<template v-if="type == 'list'">
|
||
<div class="longString"></div>
|
||
<div class="answer-btn" @click.stop.prevent="openListIAnswer(index)">我来回答</div>
|
||
<!-- <div class="answer-btn" @click.stop="getDetails(item['uniqid'], index, true)">我来回答</div> -->
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="bottom-tps" :style="bottomTpsStyle()" v-if="inTheEndState">- 到底了 -</div>
|
||
|
||
<div class="empty-box flexcenter" v-if="isListEmptyState && list.length == 0">
|
||
<div class="dot-list flexacenter"><img class="item" src="./img/dot-yellow.svg" /><img class="item" src="./img/dot-yellow.svg" /><img class="item" src="./img/dot-yellow.svg" /><img class="item" src="./img/dot-gray.svg" /><img class="item" src="./img/dot-gray.svg" /><img class="item" src="./img/dot-gray.svg" /></div>
|
||
<img class="empty-icon" src="./img/empty-icon.svg" />
|
||
<div class="empty-hint" v-if="isSearchMode">没有找到相关结果，请更换搜索关键词</div>
|
||
<div class="empty-hint" v-else>暂无数据</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 我的弹窗 -->
|
||
<div class="popover-mask my-popover flexcenter" v-if="myType">
|
||
<div class="popover-box flexflex">
|
||
<img class="cross-icon" src="./img/cross-icon.png" @click="myType = ''" />
|
||
<div class="tab-list flexcenter">
|
||
<div class="tab-item flexacenter" :class="{pitch: myType == 'collect'}" @click="handleMy('collect')">
|
||
我的收藏
|
||
<div class="quantity">{{ myCollectionCount || myCount["collect"] || 0 }}</div>
|
||
</div>
|
||
<div class="long-string"></div>
|
||
<div class="tab-item flexacenter" :class="{pitch: myType == 'questions'}" @click="handleMy('questions')">
|
||
我的提问
|
||
<div class="quantity">{{ myQuestionsCount || myCount["questions"] || 0 }}</div>
|
||
</div>
|
||
<div class="long-string"></div>
|
||
<div class="tab-item flexacenter" :class="{pitch: myType == 'answers'}" @click="handleMy('answers')">
|
||
我的回答
|
||
<div class="quantity">{{ myAnswerCount || myCount["answer"] || 0 }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="empty-box flexcenter" v-if="(myType == 'collect' && myCollectionList.length == 0) || (myType == 'answers' && myAnswerList.length == 0) || (myType == 'questions' && myQuestionsList.length == 0)">
|
||
<div class="dot-list flexacenter">
|
||
<img class="item" src="./img/dot-yellow.svg" />
|
||
<img class="item" src="./img/dot-yellow.svg" />
|
||
<img class="item" src="./img/dot-yellow.svg" />
|
||
<img class="item" src="./img/dot-gray.svg" />
|
||
<img class="item" src="./img/dot-gray.svg" />
|
||
<img class="item" src="./img/dot-gray.svg" />
|
||
</div>
|
||
<img class="empty-icon" src="./img/empty-icon.svg" />
|
||
<div class="empty-hint">暂无内容</div>
|
||
</div>
|
||
<div class="content-box collect-list" v-if="myType == 'collect' && myCollectionList.length != 0" @scroll="handleCollectionScroll">
|
||
<div class="item flexflex" v-for="(item, index) in myCollectionList" :key="item" @click.stop="myOpenDetails(item.data['uniqid'])">
|
||
<template v-if="item.type == 'askanswercollection'">
|
||
<div class="icon a flexcenter">A</div>
|
||
<div class="centre flexflex flex1">
|
||
<div class="titletitle ellipsis" v-html="item['data']['content']"></div>
|
||
<div class="text ellipsis">提问：{{ item["data"]["title"] }}</div>
|
||
</div>
|
||
<div class="delete-box flexacenter">
|
||
<img class="delete-icon" @click.stop="cancelCollection(item['token'], index)" src="./img/delete-icon.svg" />
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<div class="icon q flexcenter">Q</div>
|
||
<div class="centre flexflex flex1">
|
||
<div class="titletitle ellipsis">{{ item["data"]["title"] }}</div>
|
||
<div class="text ellipsis">{{ item["data"]["answers"] > 0 ? "共" + item["data"]["answers"] + "个回答" : "暂无回答" }}</div>
|
||
</div>
|
||
<div class="delete-box flexacenter">
|
||
<img class="delete-icon" @click.stop="cancelCollection(item['token'], index)" src="./img/delete-icon.svg" />
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<div class="content-box answers-list" v-if="myType == 'answers' && myAnswerList.length != 0" @scroll="handleAnswersScroll">
|
||
<div class="item flexflex" v-for="(item, index) in myAnswerList" :key="item" @click.stop="myOpenDetails(item['uniqid'])">
|
||
<div class="icon a flexcenter">A</div>
|
||
<div class="centre flexflex flex1">
|
||
<div class="info flexacenter">
|
||
<div class="name">{{ item["nickname"] }}</div>
|
||
<div class="time">{{ handleDate(item["publicationdate"]) }}</div>
|
||
</div>
|
||
<div class="titletitle ellipsis" v-html="item['content']"></div>
|
||
<div class="text ellipsis">提问：{{ item["title"] }}</div>
|
||
</div>
|
||
<div class="operate-box flexacenter">
|
||
<div class="state-box flexacenter" @click.stop="cutAnswerPopupState(index)">
|
||
<div class="text">{{ item["anonymous"] == 0 ? "公开" : "匿名" }}</div>
|
||
<img class="arrows" src="./img/arrows-icon.svg" />
|
||
<div class="state-popup flexflex" v-if="item['popupState']">
|
||
<!-- <div class="state-popup-mask" @click.stop="cutAnswerPopupState(index)"></div> -->
|
||
<div class="state-popup-item flexacenter flex1" :class="{pitch: item['anonymous'] == 0}" @click.stop="changeAnonymous(item['token'], 0, index)">
|
||
<div class="">公开发表</div>
|
||
<img class="state-popup-icon" src="./img/tick-orange.svg" />
|
||
</div>
|
||
<div class="state-popup-item flexacenter flex1" :class="{pitch: item['anonymous'] == 1}" @click.stop="changeAnonymous(item['token'], 1, index)">
|
||
<div class="">匿名发表</div>
|
||
<img class="state-popup-icon" src="./img/tick-orange.svg" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<img class="edit-icon" @click.stop="openIAnswer(index, 'my')" src="./img/edit-icon.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-box questions-list" v-if="myType == 'questions' && myQuestionsList.length != 0" @scroll="handleQuestionsScroll">
|
||
<div class="item flexflex" v-for="(item, index) in myQuestionsList" :key="item" @click.stop="myOpenDetails(item['uniqid'])">
|
||
<div class="icon q flexcenter">Q</div>
|
||
<div class="centre flexflex flex1">
|
||
<div class="info flexacenter">
|
||
<div class="name">{{ item["nickname"] }}</div>
|
||
<div class="time">{{ handleDate(item["publicationdate"]) }}</div>
|
||
</div>
|
||
<div class="titletitle ellipsis">{{ item["title"] }}</div>
|
||
<div class="text flexacenter">
|
||
<div class="new-answer flexacenter" v-if="item['authornewnum'] > 0">
|
||
有{{ item["authornewnum"] }}个新回答
|
||
<div class="long-string"></div>
|
||
</div>
|
||
{{ item["answers"] == 0 ? "暂无回答" : "共" + item["answers"] + "个回答" }}
|
||
</div>
|
||
</div>
|
||
<div class="operate-box flexacenter">
|
||
<div class="state-box flexacenter" @click.stop="cutQuestionsPopupState(index)">
|
||
<div class="text">{{ item["anonymous"] == 0 ? "公开" : "匿名" }}</div>
|
||
<img class="arrows" src="./img/arrows-icon.svg" />
|
||
<div class="state-popup flexflex" v-if="item['popupState']">
|
||
<div class="state-popup-item flexacenter flex1" :class="{pitch: item['anonymous'] == 0}" @click.stop="changeAnonymousQuestions(item['token'], 0, index)">
|
||
<div class="">公开发表</div>
|
||
<img class="state-popup-icon" src="./img/tick-orange.svg" />
|
||
</div>
|
||
<div class="state-popup-item flexacenter flex1" :class="{pitch: item['anonymous'] == 1}" @click.stop="changeAnonymousQuestions(item['token'], 1, index)">
|
||
<div class="">匿名发表</div>
|
||
<img class="state-popup-icon" src="./img/tick-orange.svg" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 我要提问 -->
|
||
<div class="popover-mask flexcenter issue-box" v-if="questionsSetp" @click="cutQuestionsSetp(0)">
|
||
<!-- 第一步 -->
|
||
<div class="choosing-theme" v-if="questionsSetp == 1" @click.stop="">
|
||
<div class="titletitle">
|
||
选择提问所属主题
|
||
</div>
|
||
<div class="theme-list flexflex">
|
||
<div class="theme-stair-box flexflex" v-for="(item, index) in questionsTypeList" :key="index">
|
||
<div class="theme-item flexcenter" v-for="item in item" :key="item.id" @click="choosingTheme(item.id)">{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第二步 -->
|
||
<div class="issue-form" v-else @click.stop="">
|
||
<img class="issue-bj" src="./img/issue-bj.svg" />
|
||
<div class="flexcenter q">Q</div>
|
||
<img class="cross-icon" @click="cutQuestionsSetp(0)" src="./img/cross-icon.png" />
|
||
<div class="issue-input">
|
||
<textarea v-model="questionsObj.title" placeholder="一句话描述问题，以问号结尾"></textarea>
|
||
</div>
|
||
<textarea class="issue-replenish" v-model="questionsObj.content" placeholder="欢迎补充，清晰表达问题的关键点，可获得更有效的解答（非必填）"></textarea>
|
||
<div class="issue-bottom flexacenter">
|
||
<div class="option-box flexacenter" @click="cutAnonymous" style="color: #333;">
|
||
<img class="option-icon" v-if="questionsObj.anonymous == 0" src="./img/tick-no.svg" />
|
||
<img class="option-icon" v-else src="./img/tick-option.svg" />
|
||
匿名发表
|
||
<div class="" style="color: #aaa;">（发布后只能修改是否匿名）</div>
|
||
</div>
|
||
|
||
<div class="issue-btn flexcenter" @click="postingIssue">发布问题</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 编辑回答 -->
|
||
<div class="popover-mask flexcenter" v-if="IAnswerEditState">
|
||
<div class="edit-answers">
|
||
<img class="close-icon" src="./img/cross-icon.png" @click="closeIAnswer" />
|
||
<div class="titletitle">编辑回答</div>
|
||
<div class="question-textarea" :class="{placeholder: questionPlaceholderState}" contenteditable="true" @paste="handlePaste($event)" v-html="IAnswerInfo['text']" @input="handleInput"></div>
|
||
<div class="issue-bottom flexacenter">
|
||
<div class="option-box flexacenter" @click="amendIAnswer">
|
||
<img class="option-icon" v-if="IAnswerInfo['anonymous'] == 0" src="./img/tick-no.svg" />
|
||
<img class="option-icon" v-else src="./img/tick-option.svg" />
|
||
匿名发表
|
||
</div>
|
||
<div class="issue-btn flexcenter" @click="submitAnswer">提交回答</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 我来回答 -->
|
||
<div class="popover-mask flexcenter" v-if="IAnswerState">
|
||
<div class="i-answer-box flexflex">
|
||
<img class="close-icon" src="./img/cross-icon.png" @click="closeIAnswer" />
|
||
<div class="question-header">
|
||
<div class="question-title flexflex">
|
||
<div class="question-icon flexcenter">Q</div>
|
||
<div class="flex1" v-html="IAnswerInfo['title']"></div>
|
||
</div>
|
||
<div class="question-replenish" v-if="IAnswerInfo['content']" v-html="IAnswerInfo['content']"></div>
|
||
</div>
|
||
<div class="question-middle flexflex">
|
||
<div class="question-icon flexcenter">A</div>
|
||
<div class="question-textarea" :class="{placeholder: questionPlaceholderState}" contenteditable="true" @paste="handlePaste($event)" v-html="IAnswerInfo['text']" @input="handleInput"></div>
|
||
</div>
|
||
|
||
<div class="issue-bottom flexacenter">
|
||
<div class="option-box flexacenter" @click="amendIAnswer">
|
||
<img class="option-icon" v-if="IAnswerInfo['anonymous'] == 0" src="./img/tick-no.svg" />
|
||
<img class="option-icon" v-else src="./img/tick-option.svg" />
|
||
匿名发表
|
||
</div>
|
||
<div class="issue-btn flexcenter" @click="submitAnswer">提交回答</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提示框 -->
|
||
<transition name="msg" appear v-show="msg['state']">
|
||
<div class="box-item" :class="boxClass()" :style="{top: 20 + 'px'}">
|
||
<div class="msg-container">{{ msg["text"] }}</div>
|
||
</div>
|
||
</transition>
|
||
|
||
</div>
|
||
</div>
|
||
</template> |