545 lines
37 KiB
HTML
545 lines
37 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="./js/masonry.pkgd.min.js"></script> -->
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div class="" id="answer-app">
|
|||
|
|
<!-- <video poster="https://oss.gter.net/avatar/97KwEWQHYuMQGDnFqkimXF9SHKuGwVV5zW-tYWFjYQ~~/middle?istype=1&t=20231123103322" src="null" autoplay></video> -->
|
|||
|
|
<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" />
|
|||
|
|
<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" 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 === item['id'] }" v-for="(item,index) in typeList" :key="index">{{ item['name'] }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<!-- <div class="" v-if="keyword && list.length == 0">搜索为空</div> -->
|
|||
|
|
|
|||
|
|
<div class="main flexflex" :class="{'mode-list': type == 'list'}">
|
|||
|
|
<div class="list-box" :style="listBoxStyle()" @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()">
|
|||
|
|
{{ keyword }}<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()">
|
|||
|
|
<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}">
|
|||
|
|
<img class="dot" src="./img/dot.svg">
|
|||
|
|
<div class="content" :style="{width: type == 'list' ? '531px' : '430px'}">
|
|||
|
|
<div class="issue ellipsis" v-html="item['title']"></div>
|
|||
|
|
<div class="answer ellipsis">{{ item['content'] || '' }}</div>
|
|||
|
|
<div class="bottom flexacenter">
|
|||
|
|
<div class="quantity">{{ item['answers'] == 0 ? '暂无回答' : `共${ item['answers'] }个回答` }}</div>
|
|||
|
|
<div class="longString"></div>
|
|||
|
|
<div class="answer-btn" @click.stop="getDetails(item['uniqid'],index)">我来回答</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="empty-box flexcenter" v-if="isSearchMode && 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'" :style="{height: 'calc(100vh - ' + pageHeaderHeight + 'px)'}"> -->
|
|||
|
|
<div class="details-area-box flexflex" v-if="type == 'details'" :style="{height: pageListHeight + 'px'}">
|
|||
|
|
<div class="details-box flexflex">
|
|||
|
|
<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="title">{{ detailsInfo['title'] }}</div>
|
|||
|
|
<div class="hint" v-html="detailsInfo['content']"></div>
|
|||
|
|
<div class="info-box flexacenter">
|
|||
|
|
<div class="user-info flexacenter">
|
|||
|
|
<img class="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" style="z-index: 2;" @click="closeTransmitState()">
|
|||
|
|
<img class="operate-icon operate-transmit-icon" src="./img/transmit-icon.png">
|
|||
|
|
转发
|
|||
|
|
<div class="transmit-box flexflex" v-if="questionsTransmitState" @click.stop="">
|
|||
|
|
<!-- <div class="transmit-mask" @click="closeTransmitState()"></div> -->
|
|||
|
|
<div class="transmit-left transmit-web">
|
|||
|
|
<div class="transmit-title">转发网页版</div>
|
|||
|
|
<div class="transmit-content">
|
|||
|
|
<div class="transmit-headline">25fall!求定位，大佬帮忙解答一下~ (港，新，美)</div>
|
|||
|
|
<div class="transmit-url">https://ask.gter.net/jb179020.html</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="transmit-web-btn flexcenter">复制链接</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">
|
|||
|
|
<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-text" v-html="item['content']"></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)">
|
|||
|
|
<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">25fall!求定位，大佬帮忙解答一下~ (港，新，美)</div>
|
|||
|
|
<div class="transmit-url">https://ask.gter.net/jb179020.html</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="transmit-web-btn flexcenter">复制链接</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">提问者</div> -->
|
|||
|
|
<div class="comments-identity" v-if="item['isauthor']">提问者</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="comments-header-right flexacenter">
|
|||
|
|
<div class="menu-box flexacenter">
|
|||
|
|
<img class="menu-icon" src="./img/menu-icon-gray.svg">
|
|||
|
|
<div class="report-box flexcenter" v-if="false">举报</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>
|
|||
|
|
<div class="comments-header-right flexacenter">
|
|||
|
|
<div class="menu-box flexacenter">
|
|||
|
|
<img class="menu-icon" src="./img/menu-icon-gray.svg">
|
|||
|
|
<div class="report-box flexcenter" v-if="false">举报</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'] - 3 }}条回复</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="./img/offer-mini-QRcode.png">
|
|||
|
|
<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 || 0}}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="long-string"></div>
|
|||
|
|
<div class="tab-item flexacenter" :class="{'pitch': myType == 'answers'}" @click="handleMy('answers')">我的回答 <div class="quantity">{{ myAnswerCount }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="long-string"></div>
|
|||
|
|
<div class="tab-item flexacenter" :class="{'pitch': myType == 'questions'}" @click="handleMy('questions')">我的提问 <div class="quantity">{{ myQuestionsCount }}</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'" @scroll="handleCollectionScroll">
|
|||
|
|
<div class="item flexflex" v-for="(item,index) in myCollectionList" :key="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="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="cancelCollection(item['token'],index)" src="./img/delete-icon.svg">
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content-box answers-list" v-if="myType == 'answers'" @scroll="handleAnswersScroll">
|
|||
|
|
<div class="item flexflex" v-for="(item,index) in myAnswerList" :key="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">{{ 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="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="openIAnswer(index,'my')" src="./img/edit-icon.png">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content-box questions-list" v-if="myType == 'questions' && myQuestionsList.length != 0">
|
|||
|
|
<div class="item flexflex" v-for="item in myQuestionsList" :key="item">
|
|||
|
|
<div class="icon q flexcenter">Q</div>
|
|||
|
|
<!-- <div class="icon a flexcenter">A</div> -->
|
|||
|
|
<div class="centre flexflex flex1">
|
|||
|
|
<div class="info flexacenter">
|
|||
|
|
<div class="name">Ada.Wu</div>
|
|||
|
|
<div class="time">1小时前</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="title ellipsis">关于港大RP和HKFPS的RP部分能否有相同的部分内容？</div>
|
|||
|
|
<div class="text flexacenter">
|
|||
|
|
<div class="new-answer flexacenter">有1个新回答 <div class="long-string"></div>
|
|||
|
|
</div>
|
|||
|
|
暂无回答
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="operate-box flexacenter">
|
|||
|
|
<div class="state-box flexacenter">
|
|||
|
|
<div class="text">公开</div>
|
|||
|
|
<img class="arrows" src="./img/arrows-icon.svg">
|
|||
|
|
<div class="state-popup flexflex" v-if="false">
|
|||
|
|
<div class="state-popup-item flexacenter flex1 pitch">
|
|||
|
|
<div class="">公开发表</div>
|
|||
|
|
<img class="state-popup-icon" src="./img/tick-orange.svg">
|
|||
|
|
</div>
|
|||
|
|
<div class="state-popup-item flexacenter flex1">
|
|||
|
|
<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">
|
|||
|
|
<!-- 第一步 -->
|
|||
|
|
<div class="choosing-theme" v-if="questionsSetp == 1">
|
|||
|
|
<div class="title">选择提问所属主题</div>
|
|||
|
|
<div class="theme-list flexflex">
|
|||
|
|
<div class="theme-item flexcenter" v-for="item in questionsTypeList" :key="item.id" @click="choosingTheme(item.id)">{{ item.name }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第二步 -->
|
|||
|
|
<div class="issue-form" v-else>
|
|||
|
|
<!-- <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">
|
|||
|
|
<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="issue-bottom flexacenter">
|
|||
|
|
<div class="option-box flexacenter">
|
|||
|
|
<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-html="IAnswerInfo['content']"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="question-middle flexflex">
|
|||
|
|
<div class="question-icon flexcenter">A</div>
|
|||
|
|
<!-- <textarea class="question-textarea flex1" 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>
|
|||
|
|
|
|||
|
|
<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>
|
|||
|
|
<script src="../js文件/axios.min.js"></script>
|
|||
|
|
<script src="./js/index.js"></script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|