1838 lines
48 KiB
Vue
1838 lines
48 KiB
Vue
<template>
|
||
<view class="detail">
|
||
<!-- use-page-scroll -->
|
||
<z-paging :hide-empty-view="true" :auto-scroll-to-top-when-reload="false" ref="paging" v-model="replyListAll"
|
||
@query="queryList" @scroll="scrollFn" :safe-area-inset-bottom="true">
|
||
<view class="nav">
|
||
<u-navbar safeAreaInsetTop placeholder>
|
||
<view class="u-nav-slot flex align-center justify-between" slot="left">
|
||
<u-icon name="arrow-left" size="19" color="#000000" @click="goBack"></u-icon>
|
||
</view>
|
||
<view :style="{'margin-right': `${menuWidth}px`,'margin-left':'24rpx'}" slot="right">
|
||
<view class="posi_r">
|
||
<image class="r_img" @click="dropBtn"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/drop.png`" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</u-navbar>
|
||
</view>
|
||
<!-- 帖子内容 -->
|
||
<view class="content">
|
||
<view class="con_up">
|
||
<view class="up_l" @click.stop="linkPersonalCenter(detailObj.authorId)">
|
||
<image class="l_img" :src="detailObj.authorAvatar" mode="aspectFill"></image>
|
||
<view class="l_nickname">
|
||
<view class="nickname"> {{ detailObj.authorName }} </view>
|
||
<view class="time"> {{ detailObj.createTime |filtersTime}} </view>
|
||
</view>
|
||
</view>
|
||
<!-- v-show="!showNavImg" -->
|
||
<view>
|
||
<view v-if="myInfo.id !== detailObj.authorId">
|
||
<view class="up_r" @click="addLike" v-if="!detailObj.isConcerned">
|
||
<image class="r_img" :src="`${config.aliyunOssUrl}/static/images/app/icon/add.png`"
|
||
mode=""></image>
|
||
<view class="r_txt"> 关注 </view>
|
||
</view>
|
||
<view class="r_txt1" @click="addLike" v-if="detailObj.isConcerned"> 已关注 </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="con_txt">
|
||
<view v-if="type==2">
|
||
<image class="ads" style="width: 44rpx;height: 44rpx;top: 12rpx;left: 0;"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/mine/ask.png`" mode=""></image>
|
||
<text class="questions-and-answers-text-color">
|
||
<text class="" v-for="(topic) in detailObj.topicList" :key="topic.id"> #{{topic.name}}#
|
||
</text>
|
||
</text>
|
||
</view>
|
||
{{ detailObj.content }}
|
||
</view>
|
||
<video v-if="detailObj.video" style="position: relative;" :src="detailObj.video" initial-time="1s"
|
||
class="video-box1" :style="{width:`${detailObj.wide}`,height:`${detailObj.high}`}">
|
||
<!-- </cover-view> -->
|
||
</video>
|
||
<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="widthFix"
|
||
@click="examineFn(detaImage,imageIndex)">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<view v-if="detaImage.length>1" class="flex-wrap flex justify-between">
|
||
<view v-for="(itemImage,imageIndex) in detaImage" :key="imageIndex">
|
||
<image class="image-three" :src="itemImage" mode="aspectFill"
|
||
@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"> {{ detailObj.city || "未知" }} </view>
|
||
<view class="foot_r">
|
||
<u-icon name="eye" size="19" color="#999999"></u-icon>
|
||
<view class="r_num"> {{ detailObj.views || '0' }} 浏览量 </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>
|
||
</view>
|
||
<view class="com_content" v-for="(item,replyIndex) in replyListAll" :key="item.id">
|
||
<view class="con_title">
|
||
<view class="title_l" @click.stop="linkPersonalCenter(item.uid)">
|
||
<image :src="item.avatar" class="imgRadius" mode="aspectFill"></image>
|
||
<view class="tit_name"> {{ item.nickname }} </view>
|
||
</view>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image @click="moreBtn(item,2)" :src="`${config.aliyunOssUrl}/static/images/app/icon/more.png`"
|
||
style="width: 32rpx;height: 32rpx;"></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<image @click="moreBtn(item,2)" src="@/static/images/app/icon/more.png"
|
||
style="width: 32rpx;height: 32rpx;"></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="con_txt" @click="replyToComments(item,2)">
|
||
<view style="margin-bottom: 8rpx;">
|
||
{{ item.content }}
|
||
</view>
|
||
<image @click.stop="examineFn1(item.image)" v-if="item.image" :src="item.image"
|
||
style="width: 100rpx; height: 100rpx;"></image>
|
||
</view>
|
||
<view class="con_info">
|
||
<view class="info_l">{{ item.createTime|filtersTime }} {{item.ipLocation||'未知'}} </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||0 }} </view>
|
||
</view>
|
||
</view>
|
||
<view class="con_list" v-if="item.replyList.length">
|
||
<view class="item_view" v-for="(el,elIndex) in item.replyList" :key="elIndex">
|
||
<view v-if="elIndex<2" @click="replyToComments(el,2)">
|
||
<view class="view_up">
|
||
<text class="up_name"> {{ el.nickname }} </text>
|
||
<image v-if='el.uid===detailObj.authorId'
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/author.png`"
|
||
style="width: 76rpx;height: 38rpx;margin-right: 4rpx;"></image>
|
||
<image v-if='el.uid==myInfo.id && el.uid!==detailObj.authorId'
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/my.png`"
|
||
style="width: 54rpx;height: 38rpx;margin-right: 4rpx;"></image>
|
||
<text class="down_l" style="margin-bottom: 8rpx;"> : {{ el.content }} </text>
|
||
</view>
|
||
<!-- <view class="view_down">
|
||
<view class="down_l">
|
||
<view style="margin-bottom: 8rpx;">
|
||
{{ el.content }}
|
||
</view>
|
||
<image @click.stop="examineFn1(el.image)" v-if="el.image" :src="el.image" style="width: 100rpx; height: 100rpx;"></image>
|
||
</view>
|
||
<view class="down_r" @click.stop="likeNo(el)">
|
||
<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>
|
||
<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>
|
||
</z-paging>
|
||
<!-- 底部输入框 -->
|
||
<view class="bottom_up">
|
||
<view v-if="isInput">
|
||
<chatInputBar @sendSMS="sendSMS" :placeholder="placeholder" @keyboardheightchange="keyboardheightchange"
|
||
@gridItemTap="gridItemTap" ref="chatInputBar" />
|
||
</view>
|
||
<view v-else style="display: flex;align-items: center;justify-content: space-between;">
|
||
<view class="bottom_l" @click="isInputFn">
|
||
{{placeholder}}
|
||
</view>
|
||
<view class="bottom_r" v-if="!textareaFlag">
|
||
<view class="r_img_txt">
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/information1.png`" class="imgSize4">
|
||
</image>
|
||
<view class="txt"> {{detailObj.replyNum||0}} </view>
|
||
</view>
|
||
<view class="r_img_txt" @click="collectBtn">
|
||
<image v-if="!detailObj.userIsCollect"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/xingxing1.png`" class="imgSize4" />
|
||
<image v-if="detailObj.userIsCollect"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/xingxing_end1.png`" class="imgSize4">
|
||
</image>
|
||
<view class="txt"> {{detailObj.collectNum||0}} </view>
|
||
</view>
|
||
<view class="r_img_txt" @click="likeDetailBtn">
|
||
<image v-if="!detailObj.userIsLike"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/like_no1.png`" class="imgSize4" />
|
||
<image v-if="detailObj.userIsLike"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/like1.png`" class="imgSize4"></image>
|
||
<view class="txt"> {{detailObj.likeNum||0}} </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- drop的弹层 -->
|
||
<u-popup :show="show" :round="10" mode="bottom" @close="show=false">
|
||
<view class="popup_view">
|
||
<view class="pop_up">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view class="up_view" open-type="share" style="position:relative;">
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/in_weixin.png`" class="imgRadius">
|
||
</image>
|
||
<view class="up_txt"> 微信好友 </view>
|
||
<button id="shareBtn" open-type="share" @click="shareBtnInfo(detailObj,1)"> </button>
|
||
</view>
|
||
<view class="up_view" open-type="share" style="position:relative;"
|
||
@click="shareBtnInfo(detailObj,2)">
|
||
<image :src="`${config.aliyunOssUrl}/static/images/app/icon/in_pengyouquan.png`"
|
||
class="imgRadius"></image>
|
||
<view class="up_txt"> 朋友圈 </view>
|
||
<!-- <button id="shareBtn" open-type="share" @click="shareBtnInfo(detailObj)"> </button> -->
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<view class="up_view" open-type="share" style="position:relative;"
|
||
@click="shareFn('WXSceneSession')">
|
||
<image src="@/static/images/app/icon/in_weixin.png" class="imgRadius"></image>
|
||
<view class="up_txt"> 微信好友 </view>
|
||
</view>
|
||
<view class="up_view" open-type="share" style="position:relative;"
|
||
@click="shareFn('WXSceneTimeline')">
|
||
<image src="@/static/images/app/icon/in_pengyouquan.png" class="imgRadius"></image>
|
||
<view class="up_txt"> 朋友圈 </view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<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">
|
||
<!-- pages/mine/personal_center/personal_center -->
|
||
<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>
|
||
|
||
<!-- 显示复制链接，已设置不喜欢 -->
|
||
<!-- <view class="img_view_weixin">
|
||
<image v-if="imgShow1" :src="`${config.aliyunOssUrl}/static/images/app/config/link.png`" style="width: 260rpx;height: 76rpx; border-radius: 16rpx"></image>
|
||
<image v-if="imgShow2" :src="`${config.aliyunOssUrl}/static/images/app/config/unlike.png`" style="width: 326rpx;height: 76rpx; border-radius: 16rpx"></image>
|
||
</view> -->
|
||
|
||
|
||
<!-- more 的弹层 -->
|
||
<u-popup :show="showMore" :round="10" mode="bottom" @close="showMore=false" zIndex='11000'>
|
||
<view class="more_view">
|
||
<view class="txt" @click="toReportPages"> 举报 </view>
|
||
<view class="txt" @click="replyToCommentsCopy"> 回复 </view>
|
||
<view class="txt" @click="cloneFn(moreItem)"> 复制 </view>
|
||
<view class="foot" @click="showMore=false"> 取消 </view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 评论弹层 -->
|
||
<u-popup :show="showComment" :round="12" mode="bottom" @close="closeBtn">
|
||
<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" @click="linkPersonalCenter(itemObj.uid)">
|
||
<image :src="itemObj.avatar" class="imgRadius" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="col_r">
|
||
<view class="con_title">
|
||
<view class="tit_name"> {{ itemObj.nickname }} </view>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<image @click="moreBtn(itemObj,3)"
|
||
:src="`${config.aliyunOssUrl}/static/images/app/icon/more.png`"
|
||
style="width: 32rpx;height: 32rpx;"></image>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<image @click="moreBtn(itemObj,3)" src="@/static/images/app/icon/more.png"
|
||
style="width: 32rpx;height: 32rpx;"></image>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="con_txt" @click="replyToComments(itemObj,3)">
|
||
<view style="margin-bottom: 8rpx;">
|
||
{{ itemObj.content }}
|
||
</view>
|
||
<image @click.stop="examineFn1(itemObj.image)" v-if="itemObj.image" :src="itemObj.image"
|
||
style="width: 100rpx; height: 100rpx;"></image>
|
||
</view>
|
||
<view class="con_info">
|
||
<view class="info_l"> {{ itemObj.createTime|filtersTime }} {{itemObj.ipLocation||'未知'}}
|
||
</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||0 }} </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" @click.stop="linkPersonalCenter(ele.uid)">
|
||
<image :src="ele.avatar" class="imgRadius" mode="aspectFill"></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,3)">
|
||
<text class="txt_a">回复</text>
|
||
<text class="txt_b">
|
||
{{ele.reviewUid !==0 ? ele.reviewUserNickname : itemObj.nickname}} </text> :
|
||
<!-- <text class="txt_b"> {{itemObj.nickname}} </text> : -->
|
||
<view class="txt_d" v-if="ele.image">
|
||
<view style="margin-bottom: 8rpx;">
|
||
{{ ele.content }}
|
||
</view>
|
||
<image @click.stop="examineFn1(ele.image)" :src="ele.image"
|
||
style="width: 100rpx; height: 100rpx;"></image>
|
||
</view>
|
||
<text class="txt_d" v-else> {{ ele.content }} </text>
|
||
</view>
|
||
<view class="con_info">
|
||
<view class="info_l"> {{ele.createTime|filtersTime }} {{ele.ipLocation||'未知'}}
|
||
</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 || '0' }} </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pop_bottom">
|
||
<chatInputBar @sendSMS="sendSMS" :placeholder="placeholder"
|
||
@keyboardheightchange="keyboardheightchange" @gridItemTap="gridItemTap" ref="chatInputBar" />
|
||
</view>
|
||
</view>
|
||
<!-- <view style="height: 200rpx;"></view> -->
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
shareApi,
|
||
formatNumber,
|
||
getTimeDifference
|
||
} 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"
|
||
import utils from "@/utils/util.js";
|
||
import notify from "../../uni_modules/uview-ui/libs/config/props/notify";
|
||
export default {
|
||
components: {
|
||
chatInputBar
|
||
},
|
||
filters: {
|
||
filtersTime(value) {
|
||
if (!value) return '当前';
|
||
return getTimeDifference(value);
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
menuWidth: getApp().globalData.menuWidth,
|
||
borderRadius: 50, //评论框圆角大小
|
||
autoFocus: false, //自动焦点
|
||
focus: false,
|
||
focusPop: false,
|
||
emoicon: [
|
||
"😁", "😋", "😜", "😉", "😌", "😅", "😳", "😊", "😝", "😰", "😠", "😩", "😲", "😞", "😭", "😍",
|
||
"😖", "😱", "😡", "😚", "😤", "🐼", "🐲", "😺", "😸", "😹", "😽", "🙀", "🐴", "🐮", "🍺", "🔥",
|
||
"💔", "♥", "🉑", "💢", "💣", "💩", "💪", "👍", "👊", "👋", "👌", "👐"
|
||
],
|
||
config,
|
||
value: '',
|
||
emojiShow: false, //表情显示
|
||
placeholder: "我也来说两句...",
|
||
disabled: false,
|
||
open: true,
|
||
more: false,
|
||
// tabs
|
||
list: [{
|
||
name: '最新'
|
||
}, {
|
||
name: '最热'
|
||
}],
|
||
showAll: true,
|
||
showLook: false,
|
||
// 弹 dropBtn
|
||
show: false,
|
||
imgShow1: false,
|
||
imgShow2: false,
|
||
timer1: '',
|
||
timer2: '',
|
||
// more
|
||
showMore: false,
|
||
moreItem: {},
|
||
moreNum: 2,
|
||
// 判断小手
|
||
IsLike: false,
|
||
// 评论弹层
|
||
showComment: false,
|
||
allList: [],
|
||
itemObj: {},
|
||
placeholderReply: '友善评论、文明发言',
|
||
// 详情数据
|
||
noteId: null,
|
||
authorId: null,
|
||
detailObj: {},
|
||
detaImage: [],
|
||
// 评论列表
|
||
replyListAll: [],
|
||
replyAllTotal: null,
|
||
typeNum: -1,
|
||
sortType: 'new',
|
||
// 回复评论的列表
|
||
miniReplyList: [],
|
||
replyListLength: '',
|
||
// 个人信息
|
||
myInfo: {},
|
||
// 添加评论
|
||
replyAddData: {
|
||
authorUserId: null, // 帖子的作者的用户ID，移动端不传值
|
||
content: '', // 评论/回复内容
|
||
noteId: null, // 笔记ID
|
||
replyId: 0, // 评论ID，一级评论传0
|
||
userId: null, // 用户ID，移动端不传值
|
||
image: '' // 评论图片
|
||
},
|
||
//type==2 问答，话题
|
||
type: 1,
|
||
shareItem: {},
|
||
showNavImg: false,
|
||
//选择当前的聊天
|
||
actPData: {},
|
||
//回复类型
|
||
replyType: 2,
|
||
//监听滚动条滑动
|
||
headerFFlag: true,
|
||
//评论框长度
|
||
textareaFlag: false,
|
||
contentValue: '',
|
||
isInput: false
|
||
}
|
||
},
|
||
|
||
onLoad(query) {
|
||
this.noteId = query.id
|
||
this.getDetail(query.id)
|
||
this.authorId = query.authorId
|
||
this.type = query.type
|
||
},
|
||
onShow() {
|
||
this.getUserInfo1()
|
||
},
|
||
onShareAppMessage(res) {
|
||
if (res.from === 'button') {
|
||
// 来自页面内分享按钮
|
||
getNoteShare(this.noteId).then(res => {
|
||
// console.log(res, '分享成功');
|
||
})
|
||
}
|
||
return {
|
||
title: this.shareItem.content, //分享的名称
|
||
path: '/pages/index/index',
|
||
imageUrl: this.detaImage.length ? this.detaImage[0] : '',
|
||
};
|
||
},
|
||
onShareTimeline(res) {
|
||
return {
|
||
title: this.shareItem.content,
|
||
imageUrl: this.detaImage.length ? this.detaImage[0] : '',
|
||
// channel:''
|
||
};
|
||
},
|
||
|
||
watch: {
|
||
replyAddData: {
|
||
handler(nV, oV) {
|
||
// this.cardType=nV
|
||
this.replyAddData.image = nV.image
|
||
},
|
||
deep: true
|
||
},
|
||
focus: {
|
||
handler(a, b) {
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
|
||
onPageScroll(e) {
|
||
// console.log(e,'onPageScroll');
|
||
if (e.scrollTop >= 96) {
|
||
this.showNavImg = true
|
||
} else {
|
||
this.showNavImg = false
|
||
}
|
||
},
|
||
methods: {
|
||
//点击输入框打开输入框
|
||
isInputFn() {
|
||
this.isInput = true
|
||
this.replyAddData.noteId = this.noteId
|
||
},
|
||
//监听
|
||
scrollFn(e) {
|
||
// console.log(e,'1111');
|
||
if (e.target.scrollTop >= 96) {
|
||
this.showNavImg = true
|
||
} else {
|
||
this.showNavImg = false
|
||
}
|
||
// console.log(this.showNavImg,'this.showNavImg');
|
||
},
|
||
// 个人主页
|
||
linkPersonalCenter(id) {
|
||
if (id) {
|
||
this.$tab.navigateTo(`/pages/mine/personal_center/personal_center?uid=${id}`)
|
||
}
|
||
},
|
||
//评论 发图
|
||
gridItemTap(index) {
|
||
// this.$toast('开发中~')
|
||
// // 从相册选择图片
|
||
utils.uploadImageOne({
|
||
count: 1,
|
||
sizeType: ['original'],
|
||
sourceType: ['album', 'camera'],
|
||
dir: 'crmebimage/public/product/'
|
||
}, null, (res) => {
|
||
// console.log(res,'评论 发图');
|
||
this.replyAddData.image = res.data
|
||
});
|
||
},
|
||
|
||
shareBtnInfo(item, num) {
|
||
// console.log(item,'小程序分享');
|
||
this.shareItem = item
|
||
if (num == 2) {
|
||
uni.showToast({
|
||
title: '请点击右上角胶囊中的三个点进行朋友圈分享',
|
||
duration: 3000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
//分享
|
||
shareFn(type) {
|
||
// console.log(this.detailObj.image);
|
||
let shareData = {
|
||
href: 'http',
|
||
type: this.detailObj.image.length ? 0 : 1,
|
||
imageUrl: this.detaImage.length ? this.detaImage[0] : '',
|
||
summary: this.detailObj.content ? this.detailObj.content : '分享图片'
|
||
}
|
||
shareApi(type, shareData).then(res => {
|
||
getNoteShare(this.noteId).then(res => {
|
||
// console.log(res, '分享成功');
|
||
})
|
||
})
|
||
},
|
||
//查看
|
||
examineFn(urlList, index) {
|
||
// console.log(urlList,index);
|
||
uni.previewImage({
|
||
urls: urlList,
|
||
current: index,
|
||
loop: true
|
||
})
|
||
},
|
||
//查看
|
||
examineFn1(urlList, index) {
|
||
// console.log(urlList,index);
|
||
uni.previewImage({
|
||
urls: [urlList],
|
||
current: index,
|
||
loop: true
|
||
})
|
||
},
|
||
getUserInfo1() {
|
||
// userCenterPersonalInfo().then(res => {
|
||
// console.log(res,'55555555555555555');
|
||
// this.myInfo = res.data
|
||
// })
|
||
getUserInfo().then(res1 => {
|
||
// console.log(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
|
||
let data = this.$store.state.pageManager.trendsData
|
||
data.userIsLike = this.detailObj.userIsLike
|
||
data.likeNum = this.detailObj.likeNum
|
||
this.$store.dispatch('changeTrendsData', data)
|
||
})
|
||
},
|
||
// 评论点赞
|
||
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 => {
|
||
// console.log(res,'888评论列表888 ');
|
||
res.data.list.forEach(item => {
|
||
item.countStart = formatNumber(item.countStart)
|
||
// item.diffDays = this.formatTime(item.createTime)
|
||
if (!item.replyList) {
|
||
item.replyList = []
|
||
}
|
||
})
|
||
this.replyAllTotal = res.data.total
|
||
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()
|
||
// return (date.getMonth()+1).toString()+"-"+date.getDate().toString()+" " +date.getHours()+":"+date.getMinutes()
|
||
} else {
|
||
return date.getFullYear().toString().substring(2, 3) + "-" + (date.getMonth() + 1).toString() + "-" +
|
||
date.getDate().toString()
|
||
}
|
||
},
|
||
|
||
// 点击关注
|
||
addLike(authorId) {
|
||
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,'111详情数据111');
|
||
// formatNumber
|
||
this.detailObj = res.data
|
||
// this.detailObj.image = res.data.image.split(",")
|
||
this.detailObj.views = formatNumber(res.data.views)
|
||
this.detailObj.replyNum = formatNumber(res.data.replyNum)
|
||
this.detailObj.collectNum = formatNumber(res.data.collectNum)
|
||
this.detailObj.likeNum = formatNumber(res.data.likeNum)
|
||
this.detailObj.shareNum = formatNumber(res.data.shareNum)
|
||
if (res.data.image) {
|
||
this.detaImage = res.data.image.split(",")
|
||
} else {
|
||
this.detaImage = []
|
||
}
|
||
// console.log(this.detaImage,'tupian图片');
|
||
if (Number(this.detailObj.wide) > Number(this.detailObj.high)) {
|
||
let num = 686 / uni.$u.getPx(`${this.detailObj.wide}rpx`)
|
||
this.detailObj.wide = uni.$u.getPx(`${this.detailObj.wide}rpx`) * num + 'rpx'
|
||
this.detailObj.high = uni.$u.getPx(`${this.detailObj.high}rpx`) * num + 'rpx'
|
||
} else {
|
||
let num = 686 / uni.$u.getPx(`${this.detailObj.wide}rpx`)
|
||
this.detailObj.wide = uni.$u.getPx(`${this.detailObj.wide}rpx`) * num + 'rpx'
|
||
this.detailObj.high = uni.$u.getPx(`${this.detailObj.high}rpx`) * num + 'rpx'
|
||
}
|
||
// console.log(this.detailObj.wide,this.detailObj.high,'111111111111111');
|
||
this.replyAddData.noteId = res.data.id
|
||
this.replyAddData.authorUserId = res.data.authorId
|
||
let data = this.$store.state.pageManager.trendsData
|
||
data.replyNum = this.detailObj.replyNum
|
||
this.$store.dispatch('changeTrendsData', data)
|
||
})
|
||
// this.focus=false
|
||
// this.focusPop=false
|
||
},
|
||
|
||
// 打开评论弹层
|
||
openShowComment(item) {
|
||
this.showComment = true
|
||
this.itemObj = item
|
||
this.itemObj.countStart = formatNumber(item.countStart)
|
||
this.replyListLength = item.replyList.length
|
||
this.replyAddData.replyId = item.id
|
||
this.replyAddData.userId = this.myInfo.id
|
||
this.replyAddData.noteId = this.detailObj.id
|
||
this.replyAddData.authorUserId = this.detailObj.authorId
|
||
},
|
||
// 去举报页
|
||
toReportPages() {
|
||
uni.navigateTo({
|
||
url: '/pages/index/report?id=' + this.detailObj.id
|
||
})
|
||
},
|
||
// 更多
|
||
moreBtn(item, num) {
|
||
this.showMore = true
|
||
this.moreItem = item
|
||
this.moreNum = num
|
||
},
|
||
// 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) {
|
||
// console.log(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) {
|
||
// console.log('全部');
|
||
this.showAll = true
|
||
this.showLook = false
|
||
this.typeNum = -1
|
||
} else {
|
||
// console.log('只看楼主');
|
||
this.showLook = true
|
||
this.showAll = false
|
||
this.typeNum = 1
|
||
}
|
||
this.$refs.paging.reload()
|
||
},
|
||
tabsBtn(item) {
|
||
// console.log(item,'tabs');
|
||
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
|
||
}
|
||
},
|
||
// 底部评论
|
||
confirm() {
|
||
replyAddAPI(this.replyAddData).then(res => {
|
||
this.replyAddData.content = ''
|
||
res.data.replyList = []
|
||
this.replyListAll.push(res.data)
|
||
this.getDetail(this.noteId)
|
||
})
|
||
},
|
||
//复制
|
||
cloneFn(item) {
|
||
uni.setClipboardData({
|
||
data: item.content,
|
||
success: () => {
|
||
this.showMore = false
|
||
uni.showToast({
|
||
title: '复制成功',
|
||
duration: 2000,
|
||
})
|
||
}
|
||
});
|
||
},
|
||
replyToCommentsCopy() {
|
||
if (this.moreNum == 2) {
|
||
this.showMore = false
|
||
this.focus = true
|
||
this.replyAddData.replyId = this.moreItem.id
|
||
this.replyAddData.userId = this.myInfo.id
|
||
this.getDetail(this.noteId)
|
||
} else {
|
||
this.showMore = false
|
||
this.focusPop = true
|
||
this.replyAddData.replyId = this.moreItem.id
|
||
this.replyAddData.userId = this.myInfo.id
|
||
this.getDetail(this.noteId)
|
||
}
|
||
},
|
||
// 回复评论
|
||
replyToComments(ele, num) {
|
||
this.placeholder = '回复' + ' ' + ele.nickname + ' ' + ':'
|
||
this.replyType = num
|
||
//回复的评论i
|
||
this.replyAddData.replyId = ele.id
|
||
this.replyAddData.userId = this.myInfo.id
|
||
if (num != 3) {
|
||
this.isInput = true
|
||
}
|
||
this.getDetail(this.noteId)
|
||
},
|
||
// 发送
|
||
sendSMS(e) {
|
||
this.replyAddData.content = e.msg
|
||
this.replyAddAPIFn()
|
||
},
|
||
// 发送评论数据
|
||
replyAddAPIFn() {
|
||
replyAddAPI(this.replyAddData).then(res => {
|
||
// type == 1评论 2回复/
|
||
if (res.data.type == 1) {
|
||
this.replyAddData.content = ''
|
||
res.data.replyList = []
|
||
this.replyListAll.unshift(res.data)
|
||
this.getDetail(this.noteId)
|
||
} else {
|
||
this.replyListAll.forEach(item => {
|
||
if (res.data.replyId == item.id) {
|
||
item.replyList.unshift(res.data)
|
||
}
|
||
})
|
||
}
|
||
uni.hideKeyboard();
|
||
this.isInput = false
|
||
this.resetData()
|
||
})
|
||
this.textareaFlag = false
|
||
this.emojiShow = false
|
||
this.placeholder = '我要发言'
|
||
},
|
||
resetData() {
|
||
// this.placeholder='友善评论、文明发言'
|
||
// this.placeholderReply='友善评论、文明发言'
|
||
this.replyAddData = {
|
||
authorUserId: null,
|
||
content: '',
|
||
noteId: null,
|
||
replyId: 0,
|
||
userId: null,
|
||
image: ''
|
||
}
|
||
},
|
||
closeBtn() {
|
||
this.showComment = false
|
||
this.placeholder = '我也来说两句...'
|
||
},
|
||
goBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
},
|
||
|
||
beforeDestroy() {
|
||
clearTimeout(this.timer1)
|
||
clearTimeout(this.timer2)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.clear {
|
||
top: -4rpx;
|
||
left: 60rpx;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
//视频
|
||
.video-box {
|
||
width: 686rpx;
|
||
border-radius: 8rpx;
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.video-box1 {
|
||
width: 100%;
|
||
// width: 450rpx;
|
||
margin-top: 24rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
#shareBtn {
|
||
position: absolute;
|
||
z-index: 2;
|
||
opacity: 0;
|
||
top: 0;
|
||
left: 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;
|
||
position: relative;
|
||
height: 85vh;
|
||
// border: 1px solid blue;
|
||
|
||
.title_view {
|
||
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 {
|
||
height: 1200rpx;
|
||
padding: 120rpx 0 20rpx;
|
||
overflow: auto;
|
||
}
|
||
|
||
.pop_content {
|
||
// border: 1px solid blue;
|
||
padding: 0 32rpx;
|
||
display: flex;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.pop_content1 {
|
||
// border: 1px solid pink;
|
||
// padding: 0 32rpx;
|
||
display: flex;
|
||
margin-top: 32rpx;
|
||
}
|
||
|
||
.pop_bottom {
|
||
// border: 1px solid blue;
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
padding: 14rpx 32rpx 26rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.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; // 不换行
|
||
word-break: break-all;
|
||
}
|
||
|
||
.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;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
|
||
.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 {
|
||
// border: 1px solid red;
|
||
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: #111111;
|
||
// color: #444444;
|
||
margin-top: 24rpx;
|
||
margin-left: 80rpx;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.con_info {
|
||
margin-top: 24rpx;
|
||
margin-left: 80rpx;
|
||
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: 0 24rpx 24rpx 24rpx;
|
||
margin-top: 24rpx;
|
||
margin-left: 80rpx;
|
||
|
||
.item_view {
|
||
|
||
|
||
.view_up {
|
||
padding-top: 24rpx;
|
||
width: 560rpx;
|
||
|
||
.up_name {
|
||
// border: 1px solid red;
|
||
margin-right: 16rpx;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #111111;
|
||
}
|
||
|
||
.down_l {
|
||
// border: 1px solid green;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #111111;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
margin-top: 24rpx;
|
||
|
||
.foot_num {
|
||
margin-right: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.con_xian {
|
||
margin-top: 32rpx;
|
||
margin-left: 80rpx;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.con_txt {
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
color: #222222;
|
||
margin-top: 32rpx;
|
||
letter-spacing: 2rpx; // 字符间距
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.r_txt1 {
|
||
padding: 12rpx 34rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
border: 2rpx solid #999999;
|
||
border-radius: 44rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
|
||
.up_r {
|
||
padding: 12rpx 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;
|
||
}
|
||
|
||
}
|
||
|
||
.image-list-box {
|
||
// border: 1px solid red;
|
||
width: 100%;
|
||
margin-top: 24rpx;
|
||
|
||
.image-one {
|
||
width: 686rpx;
|
||
// height: 686rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.image-two {
|
||
width: 338rpx;
|
||
height: 338rpx;
|
||
box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.09);
|
||
border-radius: 8rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.image-three {
|
||
// border: 1px solid red;
|
||
width: 224rpx;
|
||
height: 224rpx;
|
||
box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.09);
|
||
border-radius: 8rpx;
|
||
margin-bottom: 2rpx;
|
||
}
|
||
}
|
||
|
||
.bottom_up {
|
||
// border: 1px solid red;
|
||
border-top: 1rpx solid #EDEDED;
|
||
width: 100%;
|
||
position: fixed;
|
||
bottom: 0;
|
||
padding: 30rpx 32rpx 58rpx;
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
// align-items: center;
|
||
background-color: #fff;
|
||
z-index: 999;
|
||
|
||
.bottom_r {
|
||
// border: 1px solid red;
|
||
width: 350rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.r_img_txt {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.txt {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin-top: 10rpx;
|
||
margin-left: 8rpx;
|
||
// overflow: hidden; // 超出的文本部分隐藏起来
|
||
// text-overflow: ellipsis; // 超出部分使用省略号(…)
|
||
white-space: nowrap; // 不换行
|
||
// display: -webkit-box; // 使用弹性盒子模型，并支持多行文本
|
||
// -webkit-box-orient: vertical; // 弹性盒子内部的子元素在垂直方向上排列
|
||
// -webkit-line-clamp: 2; // 最多显示两行文本，超出部分使用省略号表示。
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.bottom_l {
|
||
// border: 1px solid red;
|
||
height: 72rpx;
|
||
background: #f2f0f4;
|
||
border-radius: 50rpx;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: center;
|
||
font-size: 32rpx;
|
||
width: 326rpx;
|
||
color: #999;
|
||
line-height: 72rpx;
|
||
padding-left: 16rpx;
|
||
// width: 100%;
|
||
// height: 90rpx;
|
||
}
|
||
|
||
.bottom_send {
|
||
// border: 1px solid red;
|
||
display: flex;
|
||
// flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
flex: 1;
|
||
}
|
||
|
||
.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 {
|
||
width: 140rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #111111;
|
||
margin-left: 16rpx;
|
||
overflow: hidden; // 超出的文本部分隐藏起来
|
||
text-overflow: ellipsis; // 超出部分使用省略号(…)
|
||
white-space: nowrap; // 不换行
|
||
// display: -webkit-box; // 使用弹性盒子模型，并支持多行文本
|
||
// -webkit-box-orient: vertical; // 弹性盒子内部的子元素在垂直方向上排列
|
||
// -webkit-line-clamp: 2; // 最多显示两行文本，超出部分使用省略号表示。
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.r_txt1 {
|
||
padding: 10rpx 35rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
border: 2rpx solid #999999;
|
||
border-radius: 44rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.up_r {
|
||
padding: 10rpx 30rpx;
|
||
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;
|
||
}
|
||
}
|
||
|
||
.posi_r {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.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: 42%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
</style> |