<!-- 固定的标题 -->
<div class="answer-nav-bar-wp--fix" v-show="fixedStatus">
<van-nav-bar
@click-left="handleClickLeft"
:title="titleNav"
left-arrow
class="nav-bar"
:border="false"
ref="vanNavBarRef"
>
<template #left>
<img src="@/assets/navbar_ic_back.png" alt="" />
<div class="answer-nav-bar-left" @click.stop="gotoPage">
<div class="answer-nav-bar-left--title ellipsis-1">
{{ title }}
</div>
<div class="answer-nav-bar-left--num">
{{ $t("question.questionDetail") }} · {{ replyListTotal || 0
}}{{ $t("question.numAnswer") }}
<em class="fsic icic_all_right"></em>
</div>
</div>
</template>
<template #right>
<img
style="width: 20px;height:20px;margin-right:10px"
src="@/assets/ic_question_share.png"
alt="share"
@click.stop="handleShare"
/>
<img
@click.stop="handleRightClick"
src="@/assets/navbar_ic_more.png"
alt=""
/>
</template>
</van-nav-bar>
<!-- v-if="canRead" -->
<div class="content">
<!-- <div class="answer-nav-bar-left--num" @click.stop="gotoPage">
{{ $t("question.questionDetail") }} ·
{{ replyListTotal || 0 }}{{ $t("question.numAnswer") }}
<em class="fsic icic_all_right"></em>
</div> -->
<!-- 邀请回答、写回答 -->
<div class="edit-content flexStyle alignCenter justifyEvenly">
<!-- 邀请回答 -->
<div
v-if="canInviteAnswer"
class="action-item flex-1"
@click="inviteAnswer"
>
<img
class="action-item-img"
src="@/assets/home/invite1.png"
alt="edit"
/>{{ $t("question.invistAnswer") }}
</div>
<!-- 写回答 -->
<div class="action-item flex-1 blue" @click="gotoAnswer()">
<img
class="action-item-img"
src="@/assets/home/answer-light.png"
alt="edit"
/>{{
selfAnswerId
? $t("question.editAnswer")
: $t("question.writeAnswer")
}}
</div>
</div>
</div>
</div>
<div class="answer-detail-wrapper flexStyle flexColumn">
<div
v-bind="{
praised,
praiseCount,
canCollect,
favoriteStatus,
likeStatus
}"
></div>
<div class="swiper-container" ref="containerRef">
<div
class="swiper-wrapper"
:class="{
'has-top': !(
currAnswerIdx === currIndex &&
(!fixedStatus || (fixedStatus && !transitioning))
)
}"
:style="{
'padding-top':
currAnswerIdx === currIndex &&
(!fixedStatus || (fixedStatus && !transitioning))
? 0
: '27vw'
}"
style="-webkit-transition-duration:300ms"
>
<div
class="swiper-slide"
:class="{
[`swiper-slide-transtion-${swipeDirection}`]: transitioning,
'swiper-slide-custom-active': $index === currIndex,
'swiper-slide-custom-next': $index === currIndex + 1,
'swiper-slide-custom-prev': $index === currIndex - 1
}"
v-for="(item, $index) in replyList"
:key="$index"
>
<!-- 仅渲染当前以及下一个 -->
<div
class="answer-content-wrapper"
v-if="$index <= currIndex + 1 && $index >= currIndex - 1"
>
<next-answer-content
:replyList="replyList"
:answerDetail="replyList[$index]"
:nextAnswerDetail="
$index < replyListLen - 1 ? replyList[$index + 1] : {}
"
:operTabOpts="{
praised,
praiseCount,
canCollect,
favoriteStatus,
likeStatus
}"
@onOperTabEmit="handleOperTabEmit"
:status="pageStatus"
:index="$index"
:curIndex="currIndex"
:currAnswerIdx="currAnswerIdx"
:issuesDetail="issuesDetail"
:key="$index"
@lock="handleLock"
@unLock="handleUnLock"
ref="answerContentRef"
>
<!-- 当前回答滑动完之后 如果存在上一个回答 显示上一个回答提示 -->
<!-- 上一个回答提示 start -->
<div slot="last-tip" style="position:relative">
<div
v-if="$index === currIndex && currIndex > 0"
class="slide-status"
:style="{
opacity: transitioning ? 0 : 1,
position: 'absolute',
top: '-1.06667rem'
}"
>
{{ statusText }}
</div>
</div>
<!-- 上一个回答提示 end -->
<!-- 问题 start -->
<template slot="swiperTitle">
<van-nav-bar
@click-left="handleClickLeft"
fixed
:title="titleNav"
left-arrow
class="nav-bar"
:border="false"
ref="vanNavBarRef"
>
<template #left>
<img src="@/assets/navbar_ic_back.png" alt="" />
</template>
<template #right>
<img
style="width: 20px;height:20px;margin-right:10px"
src="@/assets/ic_question_share.png"
alt="share"
@click.stop="handleShare"
/>
<img
@click.stop="handleRightClick"
src="@/assets/navbar_ic_more.png"
alt=""
/>
</template>
</van-nav-bar>
<!-- inner-content--fixed -->
<div
class="content"
style="margin-top:1.17333rem;position:relative;z-index:3;"
>
<div class="inner-content--fixed">
<div class="question-content" ref="questionContentRef">
<!-- 话题标签 -->
<div
class="topic-content"
v-if="labels && labels.length > 0"
>
<van-button
v-for="item in labels"
:key="item.id"
type="info"
size="small"
class="normal-like"
>
{{ item.configValue }}
</van-button>
</div>
<!-- 标题 -->
<div @click="gotoPage">
<div class="title">
<h2 class="title-text">{{ title }}</h2>
</div>
<div class="number flexStyle alignCenter">
{{ $t("question.questionDetail") }} ·
{{ replyListTotal || 0
}}{{ $t("question.numAnswer") }}
<img src="@/assets/ic_right_blue.png" alt="" />
</div>
</div>
</div>
<!-- 邀请回答、写回答 -->
<div
class="edit-content flexStyle alignCenter justifyEvenly"
>
<!-- 邀请回答 -->
<div
v-if="canInviteAnswer"
class="action-item flex-1"
@click="inviteAnswer"
>
<img
class="action-item-img"
src="@/assets/home/invite1.png"
alt="edit"
/>{{ $t("question.invistAnswer") }}
</div>
<!-- 写回答 -->
<div
class="action-item flex-1 blue"
@click="gotoAnswer()"
>
<img
class="action-item-img"
src="@/assets/home/answer-light.png"
alt="edit"
/>{{
selfAnswerId
? $t("question.editAnswer")
: $t("question.writeAnswer")
}}
</div>
</div>
</div>
</div>
</template>
<!-- </van-sticky> -->
<!-- 问题 end -->
</next-answer-content>
<div
class="answer-content-loading-mask"
v-show="$index === currIndex - 1 && transitioning"
></div>
</div>
<!-- 模仿知乎上一个回答加载中 -->
<div class="swiper-skeleton">
<van-skeleton title avatar :row="8" />
</div>
<!-- 上一个回答保留拖拽状态栏 上拉以提示用户 -->
<!-- 上一个回答提示放在这里会显示在上个回答底部 很奇怪 -->
<!-- <div
v-if="$index === currIndex - 1"
class="slide-status"
:style="{ opacity: transitioning ? 0 : 1 }"
>
{{ statusText }}
</div> -->
</div>
</div>
</div>
</div>