1708 lines
43 KiB
Vue
1708 lines
43 KiB
Vue
<template>
|
||
<!-- 咨询详情 -->
|
||
<view class="detail">
|
||
<view class="nav">
|
||
<u-navbar safeAreaInsetTop placeholder>
|
||
<view class="u-nav-slot" slot="left">
|
||
<view class="posi_l" @click="goBack">
|
||
<u-icon name="arrow-left" size="19" color="#000000"></u-icon>
|
||
<!-- 判断 -->
|
||
<view class="img_name" v-if='detailObj.isConcerned'>
|
||
<image :src="detailObj.authorAvatar" mode="aspectFill"
|
||
style="width: 48rpx;height: 48rpx; border-radius: 40rpx 40rpx 40rpx 40rpx"></image>
|
||
<view class="nav_name"> {{ detailObj.authorName }} </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view :style="{'margin-right': `${menuWidth}px`}" slot="right">
|
||
<view class="posi_r">
|
||
<!-- 判断 -->
|
||
<view class="r_txt" @click="addLike" v-if='detailObj.isConcerned'> 已关注 </view>
|
||
<image class="r_img" @click="dropBtn"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/drop.png`" mode="">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<view class="" slot="right">
|
||
<view class="posi_r">
|
||
<view class="r_txt" @click="addLike" v-if='detailObj.isConcerned'> 已关注 </view>
|
||
<image class="r_img" @click="dropBtn" src="@/static/images/app/icon/drop.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
</u-navbar>
|
||
</view>
|
||
<!-- 帖子内容 -->
|
||
<view class="content">
|
||
<!-- <view class="con_up">
|
||
<view class="up_l">
|
||
<image class="l_img" :src="detailObj.authorAvatar" mode=""></image>
|
||
<view class="l_nickname">
|
||
<view class="nickname"> {{ detailObj.authorName }} </view>
|
||
<view class="time"> {{ detailObj.createTime }} </view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<view class="consult-title">
|
||
{{ detailObj.title }}
|
||
<view class="consult-name"><text>{{ detailObj.authorName }}</text> {{ detailObj.createTime }}</view>
|
||
</view>
|
||
<video v-if="detailObj.video" style="position: relative;margin-top: 56rpx;margin-bottom: 56rpx;" :src="detailObj.video"
|
||
initial-time="1s" class="video-box">
|
||
</cover-view>
|
||
</video>
|
||
<view class="u-content">
|
||
<u-parse :content="detailObj.content"></u-parse>
|
||
</view>
|
||
<!-- <view class="image-list-box " v-if="detaImage.length">
|
||
<view v-if="detaImage.length==1">
|
||
<view v-for="(itemImage,imageIndex) in detaImage" :key="imageIndex">
|
||
<image class="image-one" :src="itemImage" mode="cover" @click="examineFn(detaImage,imageIndex)">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<view v-if="detaImage.length==2" style="width: 100%;" class="flex justify-between">
|
||
<view v-for="(itemImage,imageIndex) in detaImage" :key="imageIndex">
|
||
<image class="image-two" :src="itemImage" mode="cover" @click="examineFn(detaImage,imageIndex)">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<view v-if="detaImage.length==4" style="width: 100%;" class="flex justify-between flex-wrap">
|
||
<view v-for="(itemImage,imageIndex) in detaImage" :key="imageIndex">
|
||
<image class="image-two" :src="itemImage" mode="cover" @click="examineFn(detaImage,imageIndex)">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<view v-if="detaImage.length>2&&detaImage.length!=4" class="flex-wrap flex justify-between">
|
||
<view v-for="(itemImage,imageIndex) in detaImage" :key="imageIndex">
|
||
<image class="image-three" :src="itemImage" mode="cover"
|
||
@click="examineFn(detaImage,imageIndex)"></image>
|
||
</view>
|
||
<view v-for="(a,b) in (detaImage.length%3-1)<0?0:(detaImage.length%3-1)">
|
||
<view class="image-three"></view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<view class="con_foot">
|
||
<view class="foot_l"> IP {{ detailObj.city || "未知" }} </view>
|
||
<view class="foot_r">
|
||
<u-icon name="eye" size="19" color="#999999"></u-icon>
|
||
<view class="r_num"> {{ detailObj.views || '5888' }} 浏览量 </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 评论 -->
|
||
<view class="all_comment">
|
||
<view class="com_title">
|
||
<view class="tit_l">
|
||
<view :class="showAll?'l_click':'l_l'" @click="allLook(1)"> 全部 ({{ replyAllTotal }}) </view>
|
||
<view :class="showLook?'r_click':'l_r'" @click="allLook(2)"> 只看楼主 </view>
|
||
</view>
|
||
<u-tabs :list="list" :scrollable='false' lineWidth="0" lineColor="#fff"
|
||
:activeStyle="{color: '#111111'}" :inactiveStyle="{color: '#999999'}"
|
||
itemStyle="height: 34px; font-size: 28rpx;" @click="tabsBtn">
|
||
</u-tabs>
|
||
</view>
|
||
<z-paging use-page-scroll ref="paging" v-model="replyListAll" @query="queryList">
|
||
<view class="com_content" v-for="item in replyListAll" :key="item.id">
|
||
<view class="con_title">
|
||
<view class="title_l">
|
||
<image :src="item.avatar" class="imgRadius"></image>
|
||
<view class="tit_name"> {{ item.nickname }} </view>
|
||
</view>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image @click="moreBtn(item)" :src="`${config.aliyunOssUrl}/static/images/app/icon/more.png`"
|
||
style="width: 32rpx;height: 32rpx;"></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<image @click="moreBtn(item)" src="@/static/images/app/icon/more.png"
|
||
style="width: 32rpx;height: 32rpx;"></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="con_txt" @click="replyToComments(item,1)"> {{ item.content }} </view>
|
||
<view class="con_info">
|
||
<view class="info_l"> {{ item.diffDays }} {{'未知'}} </view>
|
||
<view class="info_r">
|
||
<view @click.stop="likeNo(item)">
|
||
<!-- #ifdef APP -->
|
||
<image v-if="!item.isLike" src="@/static/images/app/icon/like_no.png" class="imgSize">
|
||
</image>
|
||
<image v-if="item.isLike" src="@/static/images/app/icon/like.png" class="imgSize">
|
||
</image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image v-if="!item.isLike"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/like_no.png`"
|
||
class="imgSize" />
|
||
<image v-if="item.isLike"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/like.png`" class="imgSize">
|
||
</image>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="info_num"> {{ item.countStart }} </view>
|
||
</view>
|
||
</view>
|
||
<view class="con_list" v-if="item.replyList.length">
|
||
<view class="item_view" v-for="(el,elIndex) in item.replyList" :key="el.id">
|
||
<view v-if="elIndex<2" @click="replyToComments(el,2)">
|
||
<view class="view_up">
|
||
<view class="up_name"> {{ el.nickname }} </view>
|
||
<view v-if='el.uid===detailObj.authorId'>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/author.png`"
|
||
style="width: 76rpx;height: 38rpx;"></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<image src="@/static/images/app/icon/author.png"
|
||
style="width: 76rpx;height: 38rpx;" />
|
||
<!-- #endif -->
|
||
</view>
|
||
<view v-if='el.uid==myInfo.id && el.uid!==detailObj.authorId'>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/my.png`"
|
||
style="width: 54rpx;height: 38rpx;"></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<image src="@/static/images/app/icon/my.png"
|
||
style="width: 54rpx;height: 38rpx;" />
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
<view class="view_down">
|
||
<view class="down_l"> {{ el.content }} </view>
|
||
<view class="down_r" @click.stop="likeNo(el)">
|
||
<!-- #ifdef APP -->
|
||
<image v-if="!el.isLike" src="@/static/images/app/icon/like_no.png"
|
||
class="imgSize"></image>
|
||
<image v-if="el.isLike" src="@/static/images/app/icon/like.png" class="imgSize">
|
||
</image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image v-if="!el.isLike"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/like_no.png`"
|
||
class="imgSize" />
|
||
<image v-if="el.isLike"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/like.png`"
|
||
class="imgSize"></image>
|
||
<!-- #endif -->
|
||
<view class="down_num"> {{el.countStart}} </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list_foot" @click="openShowComment(item)" v-if="item.replyList.length>2">
|
||
<view class="foot_num"> 共 {{item.replyList.length || '--'}} 条回复 </view>
|
||
<u-icon name="arrow-right" size="12" color="#13AFA8 "></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="con_xian"></view>
|
||
</view>
|
||
</z-paging>
|
||
</view>
|
||
<view style="height: 200rpx;"></view>
|
||
<!-- 底部输入框 -->
|
||
<view class="bottom_up">
|
||
<view class="bottom_l">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view @click.stop="openPinglun">
|
||
<u--textarea autoHeight fixed :showConfirmBar="false" border="none" confirmHold
|
||
:placeholder="placeholder" maxlength="100" :disabled="disabled" :cursor-spacing="20"
|
||
v-model="replyAddData.content" @blur="blur" @linechange="linechange"
|
||
:customStyle="'background-color: #f2f0f4;'" />
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<view @click.stop="openPinglun">
|
||
<u--textarea autoHeight fixed :showConfirmBar="false" border="none" confirmHold
|
||
:placeholder="placeholder" maxlength="100" :disabled="disabled" :cursor-spacing="20"
|
||
v-model="replyAddData.content" @linechange="linechange"
|
||
:customStyle="'background-color: #f2f0f4;'" @confirm='confirm' />
|
||
</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="bottom_r">
|
||
<view class="r_img_txt">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/information.png`" class="imgSize4">
|
||
</image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<image src="@/static/images/app/icon/information.png" class="imgSize4" />
|
||
<!-- #endif -->
|
||
<view class="txt"> {{detailObj.replyNum||0}} </view>
|
||
</view>
|
||
<view class="r_img_txt" @click="collectBtn">
|
||
<!-- #ifdef APP -->
|
||
<!-- transform: scale(1.5) -->
|
||
<image v-if="!detailObj.userIsCollect" src="@/static/images/app/icon/xingxing.png" class="imgSize4">
|
||
</image>
|
||
<image v-if="detailObj.userIsCollect" src="@/static/images/app/icon/xingxing_end.png"
|
||
class="imgSize4"></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image v-if="!detailObj.userIsCollect"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/xingxing.png`" class="imgSize4" />
|
||
<image v-if="detailObj.userIsCollect"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/xingxing_end.png`" class="imgSize4">
|
||
</image>
|
||
<!-- #endif -->
|
||
<view class="txt"> {{detailObj.collectNum||0}} </view>
|
||
</view>
|
||
<view class="r_img_txt" @click="likeDetailBtn">
|
||
<!-- #ifdef APP -->
|
||
<image v-if="!detailObj.userIsLike" src="@/static/images/app/icon/like_no.png" class="imgSize4">
|
||
</image>
|
||
<image v-if="detailObj.userIsLike" src="@/static/images/app/icon/like.png" class="imgSize4">
|
||
</image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image v-if="!detailObj.userIsLike"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/like_no.png`" class="imgSize4" />
|
||
<image v-if="detailObj.userIsLike" :src="`${config.aliyunOssUrl}/static/images/app/icon/like.png`"
|
||
class="imgSize4"></image>
|
||
<!-- #endif -->
|
||
<view class="txt"> {{detailObj.likeNum||0}} </view>
|
||
</view>
|
||
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view class="r_img_txt" style="position:relative;">
|
||
<!-- @click="shareFn('WXSceneSession')" -->
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/share.png`" class="imgSize4"></image>
|
||
<view class="txt"> {{detailObj.shareNum}} </view>
|
||
<button id="shareBtn" open-type="share" @click="shareBtnInfo(detailObj)"></button>
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<view class="r_img_txt" style="position:relative;" @click="shareFn('WXSceneSession')">
|
||
<!-- @click="shareFn('WXSceneSession')" -->
|
||
<image src="@/static/images/app/icon/share.png" class="imgSize4" />
|
||
<view class="txt"> {{detailObj.shareNum}} </view>
|
||
</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
|
||
<!-- drop的弹层 -->
|
||
<u-popup :show="show" :round="10" mode="bottom" @close="show=false">
|
||
<view class="popup_view">
|
||
<view class="pop_up">
|
||
<view class="up_view" @click="shareFn('WXSceneSession')">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/in_weixin.png`" class="imgRadius">
|
||
</image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<image src="@/static/images/app/icon/in_weixin.png" class="imgRadius"></image>
|
||
<!-- #endif -->
|
||
<view class="up_txt"> 微信好友 </view>
|
||
</view>
|
||
<view class="up_view" @click="shareFn('WXSceneTimeline')">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/in_pengyouquan.png`"
|
||
class="imgRadius"></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<image src="@/static/images/app/icon/in_pengyouquan.png" class="imgRadius"></image>
|
||
<!-- #endif -->
|
||
<view class="up_txt"> 朋友圈 </view>
|
||
</view>
|
||
<view class="up_view" @click="toReportPages">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/in_report.png`" class="imgRadius">
|
||
</image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<image src="@/static/images/app/icon/in_report.png" class="imgRadius"></image>
|
||
<!-- #endif -->
|
||
<view class="up_txt"> 举报 </view>
|
||
</view>
|
||
<!-- <view class="up_view" @click="whoBtn(1)">
|
||
#ifdef MP-WEIXIN
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/in_invite.png`" class="imgRadius">
|
||
</image>
|
||
#endif
|
||
#ifdef APP
|
||
<image src="@/static/images/app/icon/in_invite.png" class="imgRadius"></image>
|
||
#endif
|
||
<view class="up_txt"> 复制链接 </view>
|
||
</view> -->
|
||
</view>
|
||
<!-- <view class="pop_down">
|
||
<view class="up_view" @click="toPersonalPages">
|
||
#ifdef MP-WEIXIN
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/in_home.png`" class="imgRadius">
|
||
</image>
|
||
#endif
|
||
#ifdef APP
|
||
<image src="@/static/images/app/icon/in_home.png" class="imgRadius"></image>
|
||
#endif
|
||
<view class="up_txt"> 作者主页 </view>
|
||
</view>
|
||
<view class="up_view" v-if="!detailObj.isConcerned" @click="addLike">
|
||
#ifdef MP-WEIXIN
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/in_guanzhu.png`" class="imgRadius">
|
||
</image>
|
||
#endif
|
||
#ifdef APP
|
||
<image src="@/static/images/app/icon/in_guanzhu.png" class="imgRadius"></image>
|
||
#endif
|
||
<view class="up_txt"> 关注 </view>
|
||
</view>
|
||
<view class="up_view" v-else @click="addLike">
|
||
#ifdef MP-WEIXIN
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/in_unguan.png`" class="imgRadius">
|
||
</image>
|
||
#endif
|
||
#ifdef APP
|
||
<image src="@/static/images/app/icon/in_unguan.png" class="imgRadius"></image>
|
||
#endif
|
||
<view class="up_txt"> 取消关注 </view>
|
||
</view>
|
||
<view class="up_view" @click="whoBtn(2)">
|
||
#ifdef MP-WEIXIN
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/in_unlike.png`" class="imgRadius">
|
||
</image>
|
||
#endif
|
||
#ifdef APP
|
||
<image src="@/static/images/app/icon/in_unlike.png" class="imgRadius"></image>
|
||
#endif
|
||
<view class="up_txt"> 不喜欢 </view>
|
||
</view>
|
||
<view class="up_view" @click="toReportPages">
|
||
#ifdef MP-WEIXIN
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/in_report.png`" class="imgRadius">
|
||
</image>
|
||
#endif
|
||
#ifdef APP
|
||
<image src="@/static/images/app/icon/in_report.png" class="imgRadius"></image>
|
||
#endif
|
||
<view class="up_txt"> 举报 </view>
|
||
</view>
|
||
</view> -->
|
||
<view class="pop_foot" @click="show=false"> 取消 </view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- more 的弹层 -->
|
||
<u-popup :show="showMore" :round="10" mode="bottom" @close="showMore=false" zIndex='11000'>
|
||
<view class="more_view">
|
||
<view class="txt" @click="toReportPages();showMore=false"> 举报 </view>
|
||
<view class="txt" @click="replyToComments(actPData, 1);showMore = false"> 回复 </view>
|
||
<view class="txt" @click="cloneFn(actPData)"> 复制 </view>
|
||
<view class="foot" @click="showMore=false"> 取消 </view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 评论弹层 -->
|
||
<u-popup :show="showComment" :round="12" mode="bottom" @close="showComment=false">
|
||
<view class="pop_comment">
|
||
<view class="title_view">
|
||
<u-icon name="arrow-left" size="19" color="#999999" @click="showComment=false"></u-icon>
|
||
<view class="title"> {{ replyListLength }} 条评论 </view>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image @click="showComment=false" class="r_img"
|
||
src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/app/icon/report_close.png"
|
||
mode=""></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<image @click="showComment=false" class="r_img" src="@/static/images/app/icon/report_close.png"
|
||
mode=""></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
|
||
<view class="all_con">
|
||
<view class="pop_content">
|
||
<view class="con_l">
|
||
<image :src="itemObj.avatar" class="imgRadius"></image>
|
||
</view>
|
||
<view class="col_r">
|
||
<view class="con_title">
|
||
<view class="tit_name"> {{ itemObj.nickname }} </view>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image @click="moreBtn(itemObj)" :src="`${config.aliyunOssUrl}/static/images/app/icon/more.png`"
|
||
style="width: 32rpx;height: 32rpx;"></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<image @click="moreBtn(itemObj)" src="@/static/images/app/icon/more.png"
|
||
style="width: 32rpx;height: 32rpx;"></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="con_txt" @click="replyToComments(itemObj,1)"> {{ itemObj.content }} </view>
|
||
<view class="con_info">
|
||
<view class="info_l"> {{ itemObj.diffDays }} 浙江杭州 </view>
|
||
<view class="info_r">
|
||
<view @click.stop="likeNo(itemObj)">
|
||
<!-- #ifdef APP -->
|
||
<image v-if="!itemObj.isLike" src="@/static/images/app/icon/like_no.png"
|
||
class="imgSize"></image>
|
||
<image v-if="itemObj.isLike" src="@/static/images/app/icon/like.png"
|
||
class="imgSize"></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image v-if="!itemObj.isLike"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/like_no.png`"
|
||
class="imgSize" />
|
||
<image v-if="itemObj.isLike"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/like.png`"
|
||
class="imgSize"></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="info_num"> {{ itemObj.countStart }} </view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="con_xian"></view> -->
|
||
<!-- 回复的评论 -->
|
||
<view class="pop_content1" v-for="ele in itemObj.replyList" :key="ele.id">
|
||
<view class="con_l">
|
||
<image :src="ele.avatar" class="imgRadius"></image>
|
||
</view>
|
||
<view class="col_r">
|
||
<view class="con_title">
|
||
<view class="tit_name"> {{ ele.nickname }} </view>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/more.png`"
|
||
style="width: 32rpx;height: 32rpx;"></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<image src="@/static/images/app/icon/more.png"
|
||
style="width: 32rpx;height: 32rpx;"></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
<!-- 点击回复 ？？？ -->
|
||
<view class="con_txt1" @click="replyToComments(ele,2)">
|
||
<text class="txt_a">回复</text>
|
||
<text class="txt_b">
|
||
{{ele.reviewUid !==0 ? ele.reviewUserNickname : itemObj.nickname}} </text>
|
||
<text class="txt_d"> : {{ ele.content }} </text>
|
||
</view>
|
||
<view class="con_info">
|
||
<view class="info_l">{{ele.diffDays}} 浙江杭州 </view>
|
||
<view class="info_r">
|
||
<view @click.stop="likeNo(ele)">
|
||
<!-- #ifdef APP -->
|
||
<image v-if="!ele.isLike" src="@/static/images/app/icon/like_no.png"
|
||
class="imgSize"></image>
|
||
<image v-if="ele.isLike" src="@/static/images/app/icon/like.png"
|
||
class="imgSize"></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image v-if="!ele.isLike"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/like_no.png`"
|
||
class="imgSize" />
|
||
<image v-if="ele.isLike"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/like.png`"
|
||
class="imgSize"></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="info_num"> {{ ele.countStart }} </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="pop_bottom">
|
||
<view class="pop_bot_txt" @click="replyToComments(itemObj,1)"> 发表评论 </view>
|
||
</view>
|
||
</view>
|
||
<!-- <view style="height: 200rpx;"></view> -->
|
||
</u-popup>
|
||
|
||
<!-- 写或回复评论 -->
|
||
<u-popup :show="showReply" mode="bottom" @close="closeBtn" zIndex='11000'>
|
||
<view class="reply_pop">
|
||
<u--textarea v-model="replyAddData.content" :placeholder="placeholderReply" :showConfirmBar="false"
|
||
:customStyle="'background-color: #F8F9FA;'" height="60" border="none" :cursor-spacing="20"
|
||
@linechange="linechange"></u--textarea>
|
||
<view class="rep_btn">
|
||
<view class="btn_l">
|
||
<view>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/pic.png`"
|
||
style="width: 48rpx;height: 48rpx;"></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<image src="@/static/images/app/icon/pic.png" style="width: 48rpx;height: 48rpx;"></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view style="margin-left: 48rpx;">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/smile.png`"
|
||
style="width: 48rpx;height: 48rpx;"></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<image src="@/static/images/app/icon/smile.png" style="width: 48rpx;height: 48rpx;"></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
<view class="btn_r" @click="sendBtn"> 发送 </view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
shareApi
|
||
} from "@/utils/index.js"
|
||
import chatInputBar from "./components/chat-input-bar/chat-input-bar.vue";
|
||
import config from '@/config'
|
||
import {
|
||
getDetailAPI,
|
||
concernedAuthor,
|
||
getReplyListAPI,
|
||
replyLikeAPI,
|
||
like,
|
||
collectAPI,
|
||
replyAddAPI,
|
||
noteNoteDislike,
|
||
getNoteShare
|
||
} from '@/api/discover/discover'
|
||
import {
|
||
userInfo
|
||
} from "@/api/user/index"
|
||
import {
|
||
userCenterPersonalInfo,
|
||
getUserInfo
|
||
} from "@/api/system/user.js"
|
||
export default {
|
||
components: {
|
||
chatInputBar
|
||
},
|
||
data() {
|
||
return {
|
||
menuWidth: getApp().globalData.menuWidth,
|
||
config,
|
||
value: '',
|
||
emojiShow: false, //表情显示
|
||
placeholder: "发表评论",
|
||
disabled: false,
|
||
open: true,
|
||
more: false,
|
||
// tabs
|
||
list: [{
|
||
name: '最新'
|
||
}, {
|
||
name: '最热'
|
||
}],
|
||
showAll: true,
|
||
showLook: false,
|
||
// 弹 dropBtn
|
||
show: false,
|
||
timer1: '',
|
||
timer2: '',
|
||
// more
|
||
showMore: false,
|
||
// 判断小手
|
||
IsLike: false,
|
||
// 评论弹层
|
||
showComment: false,
|
||
allList: [],
|
||
itemObj: {},
|
||
// 写或回复评论
|
||
showReply: false,
|
||
placeholderReply: '友善评论、文明发言',
|
||
// 详情数据
|
||
noteId: null,
|
||
authorId: null,
|
||
detailObj: {},
|
||
detaImage: [],
|
||
// 评论列表
|
||
replyListAll: [],
|
||
replyAllTotal: null,
|
||
typeNum: -1,
|
||
sortType: 'new',
|
||
// 回复评论的列表
|
||
miniReplyList: [],
|
||
replyListLength: '',
|
||
// 个人信息
|
||
myInfo: {},
|
||
// 添加评论
|
||
replyAddData: {
|
||
authorUserId: null,
|
||
content: '',
|
||
noteId: null,
|
||
replyId: 0,
|
||
userId: null
|
||
},
|
||
//type==2 问答，话题
|
||
type: 1,
|
||
shareItem: {},
|
||
//选择当前的聊天
|
||
actPData: {}
|
||
}
|
||
},
|
||
|
||
onLoad(query) {
|
||
this.noteId = query.id
|
||
this.getDetail(query.id)
|
||
this.authorId = query.authorId
|
||
this.type = query.type
|
||
},
|
||
onShow() {
|
||
this.getUserInfo1()
|
||
},
|
||
methods: {
|
||
shareBtnInfo(item) {
|
||
// console.log(item,'小程序分享');
|
||
this.shareItem = item
|
||
},
|
||
//分享
|
||
shareFn(type) {
|
||
// console.log(this.detailObj.image);
|
||
let shareData = {
|
||
imageUrl: item.image.length ? item.image[0] : 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/crmebimage/public/product/2024/01/24/c70ad2284470406280fb0e06200a63e2g4ht7zante.png',
|
||
content: item.content ? item.content : '分享图片'
|
||
}
|
||
shareApi(type, shareData).then(res => {
|
||
getNoteShare(this.noteId).then(res => {
|
||
console.log(res, '分享成功');
|
||
})
|
||
})
|
||
},
|
||
//查看
|
||
examineFn(urlList, index) {
|
||
uni.previewImage({
|
||
urls: urlList,
|
||
current: index,
|
||
loop: true
|
||
})
|
||
},
|
||
getUserInfo1() {
|
||
getUserInfo().then(res1 => {
|
||
this.myInfo = res1.data
|
||
})
|
||
},
|
||
// 帖子收藏
|
||
collectBtn() {
|
||
collectAPI(this.detailObj.id).then(res => {
|
||
if (this.detailObj.userIsCollect) this.detailObj.collectNum -= 1
|
||
else this.detailObj.collectNum += 1
|
||
this.detailObj.userIsCollect = !this.detailObj.userIsCollect
|
||
})
|
||
},
|
||
// 帖子点赞
|
||
likeDetailBtn() {
|
||
like(this.detailObj.id).then(res => {
|
||
if (this.detailObj.userIsLike) this.detailObj.likeNum -= 1
|
||
else this.detailObj.likeNum += 1
|
||
this.detailObj.userIsLike = !this.detailObj.userIsLike
|
||
})
|
||
},
|
||
// 评论点赞
|
||
likeNo(item) {
|
||
replyLikeAPI(item.id).then(res => {
|
||
// this.$refs.paging.reload()
|
||
if (item.isLike) item.countStart -= 1
|
||
else item.countStart += 1
|
||
item.isLike = !item.isLike
|
||
})
|
||
},
|
||
// 评论列表
|
||
// sortType 最新：new,最热：hot
|
||
// type -1=全部 1=只看楼主
|
||
queryList(pageNo, pageSize) {
|
||
getReplyListAPI({
|
||
limit: pageSize,
|
||
page: pageNo,
|
||
noteId: this.noteId,
|
||
type: this.typeNum,
|
||
sortType: this.sortType
|
||
}).then(res => {
|
||
res.data.list.forEach(item => {
|
||
item.diffDays = this.formatTime(item.createTime)
|
||
if (!item.replyList) {
|
||
item.replyList = []
|
||
}
|
||
})
|
||
this.replyAllTotal = res.data.total
|
||
// this.allList=res.data.list
|
||
this.$refs.paging.complete(res.data.list)
|
||
}).catch(err => {
|
||
this.$refs.paging.complete(false)
|
||
})
|
||
},
|
||
// 时间处理
|
||
formatTime(createTime) {
|
||
const date = new Date(createTime)
|
||
const now = new Date()
|
||
const inter = parseInt((now.getTime() - date.getTime()) / 1000 / 60)
|
||
// console.log(inter,'时间间隔----分钟');
|
||
if (inter == 0) {
|
||
return '刚刚'
|
||
} else if (inter < 60) {
|
||
return inter.toString() + '分钟前'
|
||
} else if (inter < 60 * 24) {
|
||
return parseInt(inter / 60).toString() + '小时前'
|
||
} else if (now.getFullYear() == date.getFullYear()) {
|
||
return (date.getMonth() + 1).toString() + "-" + date.getDate().toString()
|
||
} else {
|
||
return date.getFullYear().toString().substring(2, 3) + "-" + (date.getMonth() + 1).toString() + "-" +
|
||
date.getDate().toString()
|
||
}
|
||
},
|
||
// 点击关注
|
||
addLike() {
|
||
concernedAuthor(this.detailObj.authorId).then(res => {
|
||
this.detailObj.isConcerned = !this.detailObj.isConcerned
|
||
if (this.detailObj.isConcerned) this.detailObj.concernedNum += 1
|
||
else this.detailObj.concernedNum -= 1
|
||
})
|
||
},
|
||
// 社区用户笔记详情
|
||
getDetail(noteId) {
|
||
getDetailAPI(noteId).then(res => {
|
||
console.log(res, '笔记详情');
|
||
this.detailObj = res.data
|
||
if (res.data.image) {
|
||
this.detaImage = res.data.image.split(",")
|
||
} else {
|
||
this.detaImage = []
|
||
}
|
||
this.replyAddData.noteId = res.data.id
|
||
this.replyAddData.authorUserId = res.data.authorId
|
||
})
|
||
},
|
||
// 评论弹层里面 发表评论
|
||
openReply() {
|
||
this.showReply = true
|
||
},
|
||
// 打开评论弹层
|
||
openShowComment(item) {
|
||
this.showComment = true
|
||
item.replyList.forEach(el => {
|
||
el.diffDays = this.formatTime(el.createTime)
|
||
})
|
||
this.itemObj = item
|
||
this.replyListLength = item.replyList.length
|
||
},
|
||
// 去举报页
|
||
toReportPages() {
|
||
uni.navigateTo({
|
||
url: '/pages/driver/index/report?id=' + this.detailObj.id
|
||
})
|
||
},
|
||
// 更多
|
||
moreBtn(item) {
|
||
this.showMore = true
|
||
this.actPData = item
|
||
},
|
||
// nav上的三个点按钮
|
||
dropBtn() {
|
||
this.show = true
|
||
},
|
||
// 去作者主页
|
||
toPersonalPages() {
|
||
if (this.detailObj.authorId) {
|
||
this.$tab.navigateTo(
|
||
`/pages/mine/personal_center/personal_center?uid=${this.detailObj.authorId}`)
|
||
}
|
||
},
|
||
|
||
// 链接 或 不喜欢
|
||
whoBtn(num) {
|
||
if (num == 1) {
|
||
uni.showToast({
|
||
title: '已复制链接',
|
||
icon: 'none'
|
||
})
|
||
} else {
|
||
noteNoteDislike(this.detailObj.authorId).then(res => {
|
||
console.log(res);
|
||
uni.showToast({
|
||
title: '已设置不喜欢',
|
||
icon: 'none',
|
||
success: (resToa) => {
|
||
uni.navigateBack()
|
||
// uni.switchTab({
|
||
// url:'/page'
|
||
// })
|
||
}
|
||
})
|
||
})
|
||
|
||
}
|
||
},
|
||
// 全部/楼主/最新/最热
|
||
allLook(num) {
|
||
if (num == 1) {
|
||
this.showAll = true
|
||
this.showLook = false
|
||
this.typeNum = -1
|
||
} else {
|
||
this.showLook = true
|
||
this.showAll = false
|
||
this.typeNum = 1
|
||
}
|
||
this.$refs.paging.reload()
|
||
},
|
||
tabsBtn(item) {
|
||
if (item.name == '最新') this.sortType = 'new'
|
||
if (item.name == '最热') this.sortType = 'hot'
|
||
this.$refs.paging.reload()
|
||
},
|
||
//输入框行数变化时
|
||
linechange({
|
||
detail
|
||
}) {
|
||
if (Math.abs(detail.height) < 26) {
|
||
this.borderRadius = 50
|
||
} else {
|
||
this.borderRadius = 10
|
||
}
|
||
},
|
||
//打开输入框
|
||
openPinglun() {
|
||
this.getDetail(this.noteId)
|
||
this.emojiShow = false;
|
||
this.more = false;
|
||
// #ifndef APP-PLUS
|
||
this.open = false;
|
||
uni.$u.debounce(() => {
|
||
this.autoFocus = true;
|
||
}, 50);
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
if (plus.os.name == "iOS") {
|
||
this.open = false;
|
||
this.disabled = false;
|
||
uni.$u.debounce(() => {
|
||
this.autoFocus = true;
|
||
}, 50);
|
||
} else {
|
||
this.focus = true;
|
||
this.$nextTick(() => {
|
||
this.open = false;
|
||
if (!this.open) {
|
||
plus.key.showSoftKeybord();
|
||
}
|
||
});
|
||
}
|
||
// #endif
|
||
},
|
||
// 底部评论
|
||
confirm() {
|
||
replyAddAPI(this.replyAddData).then(res => {
|
||
this.replyAddData.content = ''
|
||
res.data.replyList=[]
|
||
this.replyListAll.push(res.data)
|
||
this.getDetail(this.noteId)
|
||
})
|
||
this.showReply = false
|
||
},
|
||
//失去焦点
|
||
blur() {
|
||
if (this.replyAddData.content !== '') {
|
||
replyAddAPI(this.replyAddData).then(res => {
|
||
this.replyAddData.content = ''
|
||
this.$refs.paging.reload()
|
||
})
|
||
} else {
|
||
this.$toast('不能为空')
|
||
}
|
||
// this.showReply=false
|
||
// #ifdef APP-PLUS
|
||
if (plus.os.name == "iOS") {
|
||
this.disabled = true;
|
||
// this.autoFocus = false;
|
||
}
|
||
this.open = true;
|
||
plus.key.hideSoftKeybord();
|
||
// #endif
|
||
|
||
// #ifndef APP-PLUS
|
||
this.open = true;
|
||
// #endif
|
||
},
|
||
//复制
|
||
cloneFn(item) {
|
||
uni.setClipboardData({
|
||
data: item.content,
|
||
success: () => {
|
||
this.showMore = false
|
||
uni.showToast({
|
||
title: '复制成功',
|
||
duration: 2000,
|
||
})
|
||
}
|
||
});
|
||
},
|
||
// 回复评论
|
||
replyToComments(ele, num) {
|
||
// console.log(ele,'数据数据',num,'数字1或2');
|
||
if (num == 2) {
|
||
this.placeholderReply = '回复' + ' ' + ele.nickname + ' ' + ':'
|
||
}
|
||
this.showReply = true
|
||
this.replyAddData.replyId = ele.id
|
||
this.replyAddData.userId = this.myInfo.id
|
||
this.getDetail(this.noteId)
|
||
},
|
||
// 发送按钮
|
||
sendBtn() {
|
||
replyAddAPI(this.replyAddData).then(res => {
|
||
this.replyListAll.forEach(item => {
|
||
if (this.replyAddData.replyId == item.id) {
|
||
item.replyList.push(res.data)
|
||
}
|
||
})
|
||
this.resetData()
|
||
})
|
||
this.showReply = false
|
||
this.placeholderReply = '友善评论、文明发言'
|
||
},
|
||
resetData() {
|
||
this.placeholderReply = '友善评论、文明发言'
|
||
this.replyAddData = {
|
||
authorUserId: null,
|
||
content: '',
|
||
noteId: null,
|
||
replyId: 0,
|
||
userId: null
|
||
}
|
||
},
|
||
closeBtn() {
|
||
this.showReply = false
|
||
this.placeholderReply = '友善评论、文明发言'
|
||
},
|
||
goBack() {
|
||
uni.navigateBack()
|
||
},
|
||
},
|
||
beforeDestroy() {
|
||
clearTimeout(this.timer1)
|
||
clearTimeout(this.timer2)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.consult-title {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
|
||
.consult-name {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 24rpx;
|
||
|
||
text {
|
||
margin-right: 48rpx;
|
||
}
|
||
}
|
||
}
|
||
.u-content{
|
||
font-size: 32rpx;
|
||
line-height: 50rpx;
|
||
image{
|
||
margin: 36rpx 0;
|
||
}
|
||
}
|
||
//视频
|
||
.video-box {
|
||
width: 686rpx;
|
||
height: 375rpx;
|
||
border-radius: 8rpx;
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
#shareBtn {
|
||
position: absolute;
|
||
z-index: 2;
|
||
opacity: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.imgSize {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.imgSize4 {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
// border: 1px solid red;
|
||
}
|
||
|
||
.imgRadius {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 40rpx;
|
||
}
|
||
|
||
.reply_pop {
|
||
padding: 20rpx 32rpx;
|
||
background: #FFFFFF;
|
||
z-index: 999;
|
||
|
||
.rep_btn {
|
||
// border: 1px solid red;
|
||
margin-top: 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.btn_l {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn_r {
|
||
padding: 14rpx 32rpx;
|
||
background-color: #13AFA8;
|
||
border-radius: 8rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pop_comment {
|
||
// border-top: 1rpx solid #EDEDED;
|
||
// border: 1px solid blue;
|
||
position: relative;
|
||
|
||
.title_view {
|
||
// border: 1px solid blue;
|
||
position: absolute;
|
||
top: 0;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
z-index: 99;
|
||
padding: 43rpx 24rpx;
|
||
border-radius: 25rpx 25rpx 0rpx 0rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.title {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #222222;
|
||
}
|
||
|
||
.r_img {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
}
|
||
}
|
||
|
||
.all_con {
|
||
// border: 1px solid red;
|
||
height: 1000rpx;
|
||
padding: 120rpx 0 140rpx;
|
||
overflow: auto;
|
||
}
|
||
|
||
.pop_content {
|
||
// border: 1px solid red;
|
||
padding: 0 32rpx;
|
||
display: flex;
|
||
margin-top: 32rpx;
|
||
}
|
||
|
||
.pop_content1 {
|
||
// border: 1px solid pink;
|
||
// padding: 0 32rpx;
|
||
display: flex;
|
||
margin-top: 32rpx;
|
||
}
|
||
|
||
.pop_bottom {
|
||
// border: 1px solid red;
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
padding: 14rpx 32rpx 26rpx;
|
||
background-color: #fff;
|
||
|
||
.pop_bot_txt {
|
||
padding: 16rpx 32rpx;
|
||
background: #F8F9FA;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
opacity: 1;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.con_l {
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.col_r {
|
||
// border: 1px solid green;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.con_title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.tit_name {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #666666;
|
||
}
|
||
|
||
.con_txt {
|
||
// border: 1px solid;
|
||
width: 590rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
color: #111111;
|
||
margin-top: 24rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
// white-space: nowrap; // 不换行
|
||
}
|
||
|
||
.con_txt1 {
|
||
// border: 1px solid green;
|
||
margin-top: 24rpx;
|
||
width: 500rpx;
|
||
|
||
.txt_a {
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
color: #111111;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.txt_b {
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.txt_d {
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
color: #111111;
|
||
}
|
||
}
|
||
|
||
.con_info {
|
||
margin-top: 24rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.info_l {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.info_r {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.info_num {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.con_xian {
|
||
margin-top: 32rpx;
|
||
height: 0;
|
||
border-bottom: 1rpx solid #666666;
|
||
opacity: 0.1;
|
||
}
|
||
|
||
}
|
||
|
||
.more_view {
|
||
padding: 0 32rpx;
|
||
|
||
.txt {
|
||
padding: 32rpx 0;
|
||
text-align: center;
|
||
font-size: 34rpx;
|
||
font-weight: 400;
|
||
color: #111111;
|
||
}
|
||
|
||
.foot {
|
||
padding: 32rpx 0;
|
||
text-align: center;
|
||
font-size: 34rpx;
|
||
font-weight: 400;
|
||
color: rgba(153, 153, 153, 0.9);
|
||
border-top: 1px solid #f1f1ff;
|
||
}
|
||
}
|
||
|
||
.popup_view {
|
||
padding: 48rpx 48rpx 20rpx;
|
||
// border: 1px solid red;
|
||
|
||
.pop_up {
|
||
// border: 1px solid blue;
|
||
margin-bottom: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.up_view {
|
||
margin-right: 60rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.up_txt {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #111111;
|
||
margin-top: 8rpx;
|
||
}
|
||
}
|
||
|
||
.pop_down {
|
||
// border: 1px solid red;
|
||
padding-bottom: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1rpx solid #EDEDED;
|
||
}
|
||
|
||
.pop_foot {
|
||
padding: 20rpx 200rpx;
|
||
font-size: 34rpx;
|
||
font-weight: 400;
|
||
color: #222222;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.all_comment {
|
||
padding: 24rpx 32rpx;
|
||
border-top: 1rpx solid #EDEDED;
|
||
|
||
.com_title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.tit_l {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.l_click {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #222222;
|
||
}
|
||
|
||
.l_r {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #666666;
|
||
margin-left: 32rpx;
|
||
}
|
||
|
||
.l_l {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #666666;
|
||
}
|
||
|
||
.r_click {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #222222;
|
||
margin-left: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.com_content {
|
||
// border: 1px solid red;
|
||
margin-top: 32rpx;
|
||
|
||
.con_title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.title_l {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.tit_name {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #111111;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.con_txt {
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
color: #444444;
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.con_info {
|
||
margin-top: 24rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.info_l {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.info_r {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.info_num {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.con_list {
|
||
// border: 1px solid blue;
|
||
background: #F8F8F8;
|
||
padding: 24rpx;
|
||
margin-top: 24rpx;
|
||
|
||
.item_view {
|
||
margin-bottom: 32rpx;
|
||
|
||
.view_up {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.up_name {
|
||
margin-right: 16rpx;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #111111;
|
||
}
|
||
}
|
||
|
||
.view_down {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 8rpx;
|
||
|
||
.down_l {
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
color: #444444;
|
||
}
|
||
|
||
.down_r {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.down_num {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.list_foot {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #13AFA8;
|
||
|
||
.foot_num {
|
||
margin-right: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.con_xian {
|
||
margin-top: 32rpx;
|
||
height: 0;
|
||
border-bottom: 1rpx solid #666666;
|
||
opacity: 0.1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content {
|
||
// border: 1px solid red;
|
||
padding: 18rpx 32rpx 48rpx;
|
||
|
||
.con_up {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.up_l {
|
||
display: flex;
|
||
// justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.l_img {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
||
}
|
||
|
||
.l_nickname {
|
||
margin-left: 16rpx;
|
||
|
||
.nickname {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #111111;
|
||
}
|
||
|
||
.time {
|
||
margin-top: 2rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.up_r {
|
||
padding: 18rpx 34rpx;
|
||
border: 2rpx solid #13AFA8;
|
||
border-radius: 44rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.r_img {
|
||
width: 29rpx;
|
||
height: 29rpx;
|
||
}
|
||
|
||
.r_txt {
|
||
font-size: 30rpx;
|
||
font-weight: 400;
|
||
color: #13AFA8;
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.con_txt {
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
color: #222222;
|
||
margin-top: 32rpx;
|
||
}
|
||
|
||
.con_img {
|
||
margin-top: 24rpx;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
|
||
image {
|
||
width: 686rpx;
|
||
height: 386rpx;
|
||
}
|
||
}
|
||
|
||
.con_foot {
|
||
margin-top: 24rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
|
||
.foot_r {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.r_num {
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.image-list-box {
|
||
// border: 1px solid red;
|
||
width: 100%;
|
||
margin-top: 24rpx;
|
||
|
||
.image-one {
|
||
width: 686rpx;
|
||
height: 686rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.image-two {
|
||
width: 336rpx;
|
||
height: 230rpx;
|
||
box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.09);
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.image-three {
|
||
width: 218rpx;
|
||
height: 150rpx;
|
||
box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.09);
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
|
||
.bottom_up {
|
||
// border: 1px solid red;
|
||
border-top: 1rpx solid #EDEDED;
|
||
width: 100%;
|
||
position: fixed;
|
||
bottom: 0;
|
||
padding: 30rpx 32rpx 15rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
z-index: 999;
|
||
|
||
.bottom_l {
|
||
width: 100%;
|
||
}
|
||
|
||
.bottom_r {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
|
||
.r_img_txt {
|
||
margin-left: 40rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.txt {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
width: 100%;
|
||
position: fixed;
|
||
bottom: 0;
|
||
}
|
||
|
||
.administration {
|
||
margin-right: 170rpx;
|
||
}
|
||
|
||
.posi_l {
|
||
// border: 1px solid red;
|
||
display: flex;
|
||
// justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.l_txt {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #111111;
|
||
margin: 0 10rpx;
|
||
}
|
||
|
||
.img_name {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 16rpx;
|
||
|
||
.nav_name {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #111111;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.posi_r {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.r_txt {
|
||
padding: 12rpx 40rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
border: 2rpx solid #999999;
|
||
border-radius: 44rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.r_img {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
|
||
.nav {
|
||
border-bottom: 1rpx solid #E6E6E6;
|
||
}
|
||
|
||
.detail {
|
||
position: relative;
|
||
}
|
||
|
||
.img_view {
|
||
position: absolute;
|
||
top: 52%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.img_view_weixin {
|
||
position: absolute;
|
||
top: 48%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.questions-and-answers-text-color {
|
||
color: #13AFA8;
|
||
}
|
||
</style> |