617 lines
44 KiB
HTML
617 lines
44 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="./css/index.css">
|
|
<script src="./js/vue@3.2.36.js"></script>
|
|
<script src="https://app.gter.net/bottom?tpl=header&menukey=ask"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="" id="answer-app">
|
|
<header class="flexacenter" id="pageHeader">
|
|
<div class="flexacenter top">
|
|
<img class="logo" src="./img/logo.png">
|
|
<div class="right flexacenter flex1">
|
|
<div class="searchInput flexacenter">
|
|
<input class="input flex1" placeholder="输入搜索关键词" v-model="keyword" @keydown.enter="searchClick()" @focus="searchFocus" @blur="searchBlur" />
|
|
<div class="clear-search flexacenter" v-if="isSearchMode">
|
|
<img class="cross-circle-black" @click="handleClickClear()" src="./img/cross-circle-black.png">
|
|
<div class="halving-line"></div>
|
|
</div>
|
|
<img class="input-icon" src="./img/input-icon.png" @click="searchClick()">
|
|
<div class="history-box" v-if="historicalSearchState" @click.stop="">
|
|
<div class="history-title">历史搜索</div>
|
|
<div class="history-list">
|
|
<div class="history-item ellipsis" v-for="(item,index) in historicalSearchList" :key="index" @click.stop="handleClickHistoricalItem(item)">{{ item }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btn-list flexacenter">
|
|
<div class="item flex1" @click="handleMy('collect')">我的收藏</div>
|
|
<div class="item flex1" @click="handleMy('questions')">我的提问</div>
|
|
<div class="item flex1" @click="handleMy('answers')">我的回答</div>
|
|
</div>
|
|
<div class="add-btn flexcenter" @click="questionsInit()">
|
|
<img class="add-icon" src="./img/add-icon.svg">
|
|
我要提问
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-box flexcenter" :class="{'tab-list-fixed': tabListFixeState}">
|
|
<div class="tab-list flexacenter">
|
|
<div class="item flexcenter" :class="{'pitch': typePitch === null }" @click="cutType(null)">All</div>
|
|
<template v-for="(item,index) in typeList" :key="index">
|
|
<div class="halving-line">|</div>
|
|
<div class="item flexcenter" :class="{'pitch': typePitch == it['id'] }" v-for="(it,i) in item" :key="it" @click="cutType(it.id)">{{ it['name'] }}</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<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)'}">
|
|
<div class="search-keyword flexacenter" v-if="isSearchMode" @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>
|
|
</div>
|
|
<div class="list" id="list" :style="listStyle()">{{ list.lenght }}
|
|
<div 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}" @click.stop="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']" src="./img/hot-icon.png">
|
|
<div class="issue ellipsis flex1" v-html="item['title']"></div>
|
|
</div>
|
|
<div class="answer ellipsis" v-html="item['content']"></div>
|
|
<div class="bottom 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="getDetails(item['uniqid'],index,true)">我来回答</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="empty-box flexcenter" v-if="isSearchMode && list.length == 0"> -->
|
|
<div class="empty-box flexcenter" v-if="!loading && 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">没有找到相关结果，请更换搜索关键词</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="details-area-box flexflex" v-if="type == 'details'" @scroll="handleDetailsScroll">
|
|
<!-- 加载 -->
|
|
<div class="loading-bj flexcenter" v-if="detailLoading">
|
|
<svg t="1642133548066" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2597" width="200" height="200">
|
|
<path d="M512 249.5c-22.5 0-37.5-15-37.5-37.5V99.5c0-22.5 15-37.5 37.5-37.5s37.5 15 37.5 37.5V212c0 22.5-15 37.5-37.5 37.5z m0 712.5c-22.5 0-37.5-15-37.5-37.5V812c0-22.5 15-37.5 37.5-37.5s37.5 15 37.5 37.5v112.5c0 22.5-15 37.5-37.5 37.5zM212 549.5H99.5C77 549.5 62 534.5 62 512s15-37.5 37.5-37.5H212c22.5 0 37.5 15 37.5 37.5s-15 37.5-37.5 37.5z m712.5 0H812c-22.5 0-37.5-15-37.5-37.5s15-37.5 37.5-37.5h112.5c22.5 0 37.5 15 37.5 37.5s-15 37.5-37.5 37.5z m-153.75-150c-11.25 0-26.25-7.5-33.75-18.75-11.25-18.75-3.75-41.25 15-52.5L849.5 272c18.75-11.25 41.25-3.75 52.5 15s3.75 41.25-15 52.5l-97.5 56.25c-3.75 3.75-11.25 3.75-18.75 3.75z m-615 356.25c-11.25 0-26.25-7.5-33.75-18.75-11.25-18.75-3.75-41.25 15-52.5l97.5-56.25c18.75-11.25 41.25-3.75 52.5 15s3.75 41.25-15 52.5L174.5 752c-7.5 3.75-15 3.75-18.75 3.75z m506.25-465c-7.5 0-11.25 0-18.75-3.75-18.75-11.25-22.5-33.75-15-52.5L684.5 137c11.25-18.75 33.75-22.5 52.5-15 18.75 11.25 22.5 33.75 15 52.5L695.75 272c-7.5 11.25-22.5 18.75-33.75 18.75z m-356.25 615c-7.5 0-11.25 0-18.75-3.75-18.75-11.25-22.5-33.75-15-52.5l56.25-97.5c11.25-15 33.75-22.5 52.5-11.25s22.5 33.75 15 52.5L339.5 887c-7.5 11.25-22.5 18.75-33.75 18.75z m-52.5-506.25c-7.5 0-15 0-18.75-3.75L137 339.5c-18.75-11.25-26.25-33.75-15-52.5s33.75-22.5 52.5-15l97.5 56.25c18.75 11.25 22.5 33.75 11.25 52.5-3.75 11.25-18.75 18.75-30 18.75z m615 356.25c-7.5 0-11.25 0-18.75-3.75L752 695.75c-18.75-11.25-22.5-33.75-15-52.5 11.25-18.75 33.75-22.5 52.5-15L887 684.5c18.75 11.25 22.5 33.75 15 52.5-7.5 11.25-18.75 18.75-33.75 18.75zM362 290.75c-11.25 0-26.25-7.5-33.75-18.75L272 174.5c-7.5-18.75-3.75-41.25 15-52.5s41.25-3.75 52.5 15l56.25 97.5c7.5 18.75 3.75 41.25-15 48.75-7.5 3.75-11.25 7.5-18.75 7.5z m356.25 615c-11.25 0-26.25-7.5-33.75-18.75l-56.25-97.5c-11.25-18.75-3.75-41.25 15-52.5s41.25-3.75 52.5 15L752 849.5c11.25 18.75 3.75 41.25-15 52.5-7.5 3.75-11.25 3.75-18.75 3.75z" p-id="2598" fill="#26d79f"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="details-box flexflex">
|
|
<!-- 转发的蒙版 -->
|
|
<!-- <div class="transmit-mask" v-if="questionsTransmitMaskState" @click="closeAllTransmitState()"></div> -->
|
|
|
|
<div class="close-box">
|
|
<div class="close-circle flexcenter" @click="closeDetailMode()">
|
|
<img class="close-icon" src="./img/close-icon.svg" />
|
|
<img class="details-cross-icon" src="./img/cross-icon.png" />
|
|
</div>
|
|
</div>
|
|
<!-- 提问信息 -->
|
|
<div class="details-issue">
|
|
<div class="icon q flexcenter">Q</div>
|
|
|
|
<div class="title">{{ detailsInfo['title'] }}</div>
|
|
<div class="hint" @click="handleAnswerText" v-html="detailsInfo['content']"></div>
|
|
<div class="info-box flexacenter">
|
|
<div class="user-info flexacenter">
|
|
<img class="avatar" v-if="detailsInfo['avatar']" :src="detailsInfo['avatar']">
|
|
<div class="user-name">{{ detailsInfo['nickname'] }}</div>
|
|
</div>
|
|
<div class="time">{{ handleDate(detailsInfo['publicationdate']) }}</div>
|
|
</div>
|
|
<div class="operate-box flexacenter">
|
|
<div class="answer-btn flexcenter" :class="{'white': detailsInfo['answers'] == 0}" @click="openIAnswer()">
|
|
<img class="answer-btn-icon answer-icon-edit" src="./img/edit-icon.png">
|
|
<img class="answer-btn-icon answer-icon-white" src="./img/edit-icon-white.svg">
|
|
我来回答
|
|
</div>
|
|
<div class="operate-list flexacenter">
|
|
<div class="operate-item flexacenter" @click="operateCollect()">
|
|
<img class="operate-icon operate-collect-icon" :src="detailsIscollection == 0 ? './img/collect-icon.png' : './img/collect-icon-colours.svg'">
|
|
收藏
|
|
</div>
|
|
<div class="operate-item flexacenter operate-transmit" @mouseenter.stop="closeTransmitState()" @mouseleave.stop="closeAllTransmitState()">
|
|
<img class="operate-icon operate-transmit-icon" src="./img/transmit-icon.png">
|
|
转发
|
|
<div class="transmit-box flexflex" v-if="questionsTransmitState" @click.stop="" style="z-index: 10;">
|
|
<div class="transmit-left transmit-web">
|
|
<div class="transmit-title">转发网页版</div>
|
|
<div class="transmit-content">
|
|
<div class="transmit-headline">{{ detailsInfo['title'] }}</div>
|
|
<div class="transmit-url">{{ getCurrentUrl() }}</div>
|
|
</div>
|
|
<div class="transmit-web-btn flexcenter" @click="copyText(detailsInfo['title'] + getCurrentUrl())">复制链接</div>
|
|
</div>
|
|
<div class="transmit-right transmit-mini">
|
|
<div class="transmit-title">转发小程序版</div>
|
|
<div class="transmit-content flexcenter">
|
|
<img class="transmit-mini-img" :src="detailShare['qrcode']">
|
|
<div class="flexcenter">
|
|
<img class="give-sweep" src="./img/give-sweep.png">
|
|
扫码转发该问答
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 一共多少 -->
|
|
<div class="answer-total-amount">共 {{ detailsInfo['answers'] }} 个回答</div>
|
|
|
|
<!-- 回答-没有数据 -->
|
|
<div class="answer-empty-box flexcenter" v-if="answerList.length == 0 && answerPage == 0">
|
|
<div class="empty-box flexcenter">
|
|
<div class="dot-list flexacenter">
|
|
<img class="dot-item" src="./img/dot-yellow.svg" v-for="item in 3">
|
|
<img class="dot-item" src="./img/dot-gray.svg" v-for="item in 3">
|
|
</div>
|
|
<img class="empty-icon" src="./img/empty-icon.svg">
|
|
</div>
|
|
<div class="empty-hint">我在等待你的回答</div>
|
|
</div>
|
|
|
|
<!-- 回答-数据 -->
|
|
<!-- <div class="answer-box-item" v-for="(item,index) in answerList" :style="{zIndex: item['transmitState'] ? 1 : 0}"> -->
|
|
<div class="answer-box-item" v-for="(item,index) in answerList">
|
|
<div class="icon-circle-box">
|
|
<div class="icon-box flexcenter">A</div>
|
|
</div>
|
|
|
|
<div class="answer-text" v-html="item['content']" @click="handleAnswerText"></div>
|
|
<div class="info-box flexacenter">
|
|
<div class="user-info flexacenter">
|
|
<img class="avatar" :src="item['avatar']">
|
|
<div class="user-name">{{ item['nickname'] }}</div>
|
|
<img class="homeShare" src="./img/title.png" v-if="item['groupid'] == 14" />
|
|
</div>
|
|
<div class="time">{{ handleDate(item['publicationdate']) }}</div>
|
|
</div>
|
|
|
|
<div class="operate-box flexacenter">
|
|
<div class="edit-box">
|
|
<div class="edit-btn flexcenter" v-if="item['ismyself'] == 1" @click="openIAnswer(index)">
|
|
<img class="edit-icon" src="./img/edit-icon.png">
|
|
</div>
|
|
</div>
|
|
<div class="operate-list flexacenter">
|
|
<div class="operate-item flexacenter" @click="operateLike(item['token'],index)">
|
|
<img class="operate-icon operate-like-icon" :src="item['islike'] == 1 ? './img/like-icon-colours.png' : './img/like-icon.png'">
|
|
{{ item['likenum'] }}
|
|
</div>
|
|
<div class="operate-item flexacenter " :class="{'commentnum': item['commentState'] }" @click="openCommentState(index)">
|
|
<img class="operate-icon operate-comment-icon" src="./img/comment-icon.png">
|
|
{{ item['commentnum'] }}
|
|
</div>
|
|
<div class="operate-item flexacenter" @click="operateCollect(item['token'],index)">
|
|
<img class="operate-icon operate-collect-icon" :src="item['iscollection'] == 1 ? './img/collect-icon-colours.svg' : './img/collect-icon.png'">
|
|
{{ item['collectionnum'] == 0 ? '收藏' : item['collectionnum'] }}
|
|
</div>
|
|
<div class="operate-item operate-transmit flexacenter" @click="handleAnswerTransmitList(index)" @mouseenter.stop="handleAnswerTransmitList(index)" @mouseleave.stop="closeAllTransmitState()">
|
|
<img class="operate-icon operate-transmit-icon" src="./img/transmit-icon.png">
|
|
转发
|
|
<div class="transmit-box flexflex" v-if="item['transmitState']" @click.stop="">
|
|
<!-- <div class="transmit-mask" @click="handleAnswerTransmitList(index)"></div> -->
|
|
<div class="transmit-left transmit-web">
|
|
<div class="transmit-title">转发网页版</div>
|
|
<div class="transmit-content">
|
|
<div class="transmit-headline">{{ detailsInfo['title'] }}</div>
|
|
<div class="transmit-url">{{ getCurrentUrl() }}</div>
|
|
</div>
|
|
<div class="transmit-web-btn flexcenter" @click="copyText(detailsInfo['title'] + getCurrentUrl())">复制链接</div>
|
|
</div>
|
|
<div class="transmit-right transmit-mini">
|
|
<div class="transmit-title">转发小程序版</div>
|
|
<div class="transmit-content flexcenter">
|
|
<img class="transmit-mini-img" src="./img/mini-code.png">
|
|
<div class="flexcenter">
|
|
<img class="give-sweep" src="./img/give-sweep.png">
|
|
扫码转发该问答
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<template v-if="item['commentState']">
|
|
<div class="post-comment flexacenter">
|
|
<input class="post-input flex1" placeholder="说点什么…" v-model="item['commentInput']" />
|
|
<div class="post-ok flexcenter" @click="submitAnswerComments(index)">OK</div>
|
|
</div>
|
|
|
|
<!-- 评论 -->
|
|
<div class="comments-box" v-if="item['commentList'] && item['commentList'].length != 0">
|
|
<div class="comments-item" v-for="(it , ind) in item['commentList']" :key="ind">
|
|
<div class="comments-header flexacenter">
|
|
<div class="comments-header-left flexacenter">
|
|
<img class="comments-avatar" :src="it['avatar']">
|
|
<div class="comments-username">{{ it['nickname'] }}</div>
|
|
<div class="comments-time">{{ handleDate(it['timestamp']) }}</div>
|
|
<div class="comments-identity" v-if="it['questioner'] == 1">提问者</div>
|
|
<div class="comments-identity" v-else-if="it['isauthor'] == 1">回答者</div>
|
|
</div>
|
|
<div class="comments-header-right flexacenter">
|
|
<div class="menu-box flexacenter" @click="handleMenuState(index,ind)">
|
|
<img class="menu-icon" src="./img/menu-icon-gray.svg">
|
|
<div class="report-box flexcenter">举报</div>
|
|
</div>
|
|
<img class="comment-icon" @click="openAnswerCommentsChild(index,ind)" src="./img/comment-icon-gray.svg">
|
|
<div class="flexacenter like-box" @click="operateAnswerCommentsLike(it['token'],index,ind)">
|
|
<img class="like-icon" :src=" it['islike'] == 0 ? './img/like-icon-gray.png' : './img/like-icon-colours.png'">
|
|
<div class="like-quantity">{{ it['likenum'] || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="comments-content">
|
|
<div class="comments-text"> {{ it['content'] }}</div>
|
|
<div class="comments-input-box flexacenter" v-if="it['childState']">
|
|
<div class="comments-input flexflex">
|
|
<textarea class="flex1" placeholder="回复" v-model="it['commentInput']"></textarea>
|
|
<div class="comments-btn flexcenter" @click="submitAnswerComments(index,ind)">发送</div>
|
|
</div>
|
|
<img class="forkfork" src="./img/cross-icon.png" @click="closeAnswerCommentsChild(index,ind)">
|
|
</div>
|
|
</div>
|
|
<div class="child-comments" v-if="it['child'].length != 0">
|
|
<div class="comments-item" v-for="(ite, i) in it['child']" :key="i">
|
|
<div class="comments-header flexacenter">
|
|
<div class="comments-header-left flexacenter">
|
|
<img class="comments-avatar" :src="ite['avatar']">
|
|
<div class="comments-username">{{ ite['nickname'] }}</div>
|
|
<div class="comments-time">{{ handleDate(ite['timestamp']) }}</div>
|
|
<!-- <div class="comments-identity">提问者</div> -->
|
|
<div class="comments-identity" v-if="ite['questioner'] == 1">提问者</div>
|
|
<div class="comments-identity" v-else-if="ite['isauthor'] == 1">回答者</div>
|
|
</div>
|
|
<div class="comments-header-right flexacenter">
|
|
<div class="menu-box flexacenter" @click="handleMenuState(index,ind,i)">
|
|
<img class="menu-icon" src="./img/menu-icon-gray.svg">
|
|
<div class="report-box flexcenter">举报</div>
|
|
</div>
|
|
<img class="comment-icon" @click="openAnswerCommentsChild(index,ind,i)" src="./img/comment-icon-gray.svg">
|
|
<div class="flexacenter like-box" @click="operateAnswerCommentsLike(ite['token'],index,ind,i)">
|
|
<img class="like-icon" :src=" ite['islike'] == 0 ? './img/like-icon-gray.png' : './img/like-icon-colours.png'">
|
|
<div class="like-quantity">{{ ite['likenum'] || 0 }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="comments-content">
|
|
<div class="comments-text">
|
|
<div class="comments-reply" v-if="JSON.stringify(ite['reply']) != '[]'">@{{ ite['reply']['nickname'] }} </div>
|
|
{{ ite['content'] }}
|
|
</div>
|
|
<div class="comments-input-box flexacenter" v-if="ite['childState']">
|
|
<div class="comments-input flexflex">
|
|
<textarea class="flex1" placeholder="回复" v-model="ite['commentInput']"></textarea>
|
|
<div class="comments-btn flexcenter" @click="submitAnswerComments(index,ind,i)">发送</div>
|
|
</div>
|
|
<img class="forkfork" src="./img/cross-icon.png" @click="closeAnswerCommentsChild(index,ind,i)">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="comments-also flexacenter" v-if="it['childnum'] >= 3 && it['childnum'] > it['child'].length" @click="alsoCommentsData(index,ind)">
|
|
<div class="">还有{{ it['childnum'] - 1 }}条回复</div>
|
|
<img class="also-icon" src="./img/arrow-circular-gray.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reverl-all flexcenter" @click="handleAllComment(index)" v-if="item['commentCount'] != item['commentList'].length">
|
|
显示全部
|
|
<img class="arrow-circular" src="./img/arrow-circular-gray.png">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 评论为空时 -->
|
|
<!-- <div class="comments-empty-box flexflex" v-if="item['commentnum'] == 0"> -->
|
|
<div class="comments-empty-box flexflex" v-else>
|
|
<div class="empty-box flexcenter">
|
|
<div class="dot-list flexacenter">
|
|
<img class="dot-item" src="./img/dot-yellow.svg" v-for="item in 3">
|
|
<img class="dot-item" src="./img/dot-gray.svg" v-for="item in 3">
|
|
</div>
|
|
<img class="empty-icon" src="./img/empty-icon.svg">
|
|
</div>
|
|
<div class="empty-hint">和我说说你的想法或疑问吧</div>
|
|
</div>
|
|
</template>
|
|
|
|
</div>
|
|
|
|
<!-- · 著作权归作者所有 · -->
|
|
<div class="copyright">· 著作权归作者所有 ·</div>
|
|
|
|
<!-- div -->
|
|
<div class="mobile-phone-check flexcenter">
|
|
<img class="QRCode-icon" src="./img/QRCode-icon.svg" alt="">
|
|
手机查看该问答
|
|
|
|
<div class="QRCode-pop flexcenter">
|
|
<img class="offer-mini-QRcode" :src="detailShare['qrcode']">
|
|
<div class="QRCode-hint flexacenter">
|
|
<img class="QRCode-img" src="./img/give-sweep.png" />
|
|
微信扫一扫
|
|
</div>
|
|
</div>
|
|
</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 == 'answers'}" @click="handleMy('answers')">我的回答 <div class="quantity">{{ myAnswerCount || myCount['answer'] || 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>
|
|
<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)">
|
|
<template v-if="item.type == 'askanswercollection'">
|
|
<div class="icon a flexcenter">A</div>
|
|
<div class="centre flexflex flex1">
|
|
<div class="title 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="title 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)">
|
|
<div class="icon a flexcenter">A</div>
|
|
<!-- <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="title 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)">
|
|
<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="title 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="title">选择提问所属主题</div>
|
|
<div class="theme-list flexflex">
|
|
<div class="theme-stair-box flexflex" v-for="(item,index) in questionsTypeList">
|
|
<div class="theme-item flexcenter" v-for="item in item" :key="item.id" @click="choosingTheme(item.id)">{{ item.name }}</div>
|
|
<!-- <div class="halving-line"></div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第二步 -->
|
|
<div class="issue-form" v-else @click.stop="">
|
|
<!-- <img class="issue-bj" src="./img/issue-bj.png"> -->
|
|
<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>
|
|
<!-- <input class="" v-model="questionsObj.title" placeholder="一句话描述问题，以问号结尾" /> -->
|
|
</div>
|
|
<textarea class="issue-replenish" v-model="questionsObj.content" placeholder="欢迎补充，清晰表达问题的关键点，可获得更有效的解答（非必填；请正确填写，发布后将不能修改）"></textarea>
|
|
<div class="issue-bottom flexacenter">
|
|
<div class="option-box flexacenter" @click="cutAnonymous">
|
|
<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>
|
|
|
|
<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="title">编辑回答</div>
|
|
<!-- <textarea placeholder="输入图文内容回答提问" v-model="IAnswerInfo['text']"></textarea> -->
|
|
<div class="question-textarea" :class="{'placeholder': questionPlaceholderState}" contenteditable="true" @paste="handlePaste" 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">{{ 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" 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', boxClass]" v-if="" :style="{top: info.top + 'px'}"> -->
|
|
<div class="box-item" :class="boxClass()" :style="{top: 20 + 'px'}">
|
|
<div class="msg-container">
|
|
<!-- <i :class="['iconfont', iconClass]"></i> -->
|
|
{{ msg['text'] }}
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
|
|
<!-- 大图 -->
|
|
<div class="detail-image-mask flexcenter" v-if="dialogSrc" @click="dialogSrc = ''">
|
|
<div class="detail-image flexcenter">
|
|
<img class="detail-img" :src="dialogSrc">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 举报 -->
|
|
<div class="alert-form" v-show="alertShow">
|
|
<div class="comments reports">
|
|
<div class="head">
|
|
<span style="display: flex;align-items: center;"><img style="width:25px;margin-right: 7px;" src="//app.gter.net/image/gter/offer/img/exclamationpoint.png?v=4.2.08_331040000">举报投诉</span>
|
|
<div class="close icon-close iconfont" @click="alertShow=false"></div>
|
|
</div>
|
|
<div class="form">
|
|
<div class="radio-area flexacenter">
|
|
<div class="radio-area-item flexacenter" :class="{'pitch': checkList.includes(s)}" v-for="s in reasonList" @click="selectRadio(s)">
|
|
<div class="radio-area-frame"></div>{{ s }}
|
|
</div>
|
|
</div>
|
|
<div class="text-box">
|
|
<textarea placeholder="请输入举报原因" v-model="alertText" maxlength="200"></textarea>
|
|
<div class="text-num">{{ 200 - alertText.length}}</div>
|
|
</div>
|
|
<div class="footer">
|
|
<button type="button" @click="alertShow=false">取消</button>
|
|
<button type="submit" :disabled="checkList.length==0" @click="alertSubmit">提交</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<script src="./js/axios.min.js"></script>
|
|
<script src="./js/index.js"></script>
|
|
<script src="https://app.gter.net/bottom?tpl=footer"></script>
|
|
</body>
|
|
|
|
</html> |