572 lines
13 KiB
Vue
572 lines
13 KiB
Vue
<template>
|
|
<view class="dynamic" @click="clickDynamic()">
|
|
<view class="user__container">
|
|
<view class="user__header-warp">
|
|
<!-- 头像组 -->
|
|
<view class="user__header" @click.stop="clickUser()">
|
|
<image
|
|
v-if="avatar"
|
|
:src="avatar"
|
|
mode="aspectFill"
|
|
class="user__header-image"
|
|
></image>
|
|
<image
|
|
v-else
|
|
src="/static/icon/noIcon.png"
|
|
mode="aspectFill"
|
|
class="user__header-image"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
<view class="user__content">
|
|
<view class="user__content-main">
|
|
<text
|
|
class="user__content-title uni-ellipsis"
|
|
@click.stop="clickUser()"
|
|
>{{ name }}</text
|
|
>
|
|
<view style="display: flex; align-items: center;margin-top:8rpx;"
|
|
><text class="user__content-note uni-ellipsis">{{
|
|
|
|
createTime
|
|
}}</text>
|
|
<view style="display: flex; align-items: center; color: #808080"
|
|
><uni-icons
|
|
type="eye"
|
|
size="22"
|
|
style="color: #808080; margin: 0 10rpx 0 30rpx"
|
|
></uni-icons
|
|
>{{ readCount }}</view
|
|
>
|
|
</view>
|
|
</view>
|
|
<view class="user__content-extra">
|
|
<!-- <slot>
|
|
<text :class="isFocusOn?'user__focus-on':'user__focus-off'" @click.stop="clickFocus()">{{isFocusOn?'关注':'已关注' }}</text>
|
|
</slot> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="padding: 0rpx 30rpx; width: calc(100% - 100rpx);margin-left: 100rpx;"> <view class="title" style="text-indent: 0 !important">{{ title }}</view>
|
|
<u-read-more showHeight="110" :toggle="true" color="#5a6988" @open="openRead()">
|
|
|
|
<rich-text
|
|
:nodes="content"
|
|
style="
|
|
height: auto;
|
|
color: #4b4b4b;
|
|
margin-bottom: 40rpx;
|
|
font-size: 28rpx;text-indent: 0px !important;
|
|
"
|
|
/></u-read-more>
|
|
<view class="allImage">
|
|
<view class="imgList">
|
|
<view
|
|
class="images"
|
|
:class="`${imgList.length > 4 ? 'images3' : ''}`"
|
|
v-for="(item, index) in imgList"
|
|
:key="index"
|
|
>
|
|
<image
|
|
@click.stop="previewImg(index)"
|
|
class="oneimg"
|
|
:src="item"
|
|
mode="aspectFill"
|
|
:style="{
|
|
width: imgWidth + 'px',
|
|
'max-height': imgHeight + 'px',
|
|
}"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="icon uni-row uni-center" ref="commentIcon" >
|
|
<text class="dot mr-5"></text>
|
|
<text class="dot"></text>
|
|
</view>
|
|
<view
|
|
class="likeList"
|
|
v-if="likeList.length > 0"
|
|
style="color: #5188e5"
|
|
@click.stop="clickThumbsup('likeList')"
|
|
>
|
|
<uni-icons
|
|
type="heart"
|
|
size="20"
|
|
style="color: #5188e5; margin-right: 10rpx"
|
|
></uni-icons>
|
|
<view class="hidden2">{{
|
|
likeList
|
|
.map((item) =>
|
|
item.user.nickname ? item.user.nickname : "普通用户"
|
|
)
|
|
.join(" , ")
|
|
}}</view>
|
|
</view>
|
|
<view class="operate" style="width: 100%">
|
|
<view
|
|
@click.stop="clickThumbsup('like')"
|
|
style="display: flex; align-items: center; color: #9a9a9a"
|
|
>
|
|
<uni-icons
|
|
type="hand-up-filled"
|
|
size="24"
|
|
style="color: #9a9a9a; margin-right: 10rpx"
|
|
:style="{ color: thumbsupColor }"
|
|
></uni-icons
|
|
>{{ likeCount ? likeCount : "0" }}
|
|
</view>
|
|
<view
|
|
style="display: flex; align-items: center; color: #9a9a9a"
|
|
@click.stop="clickThumbsup('pinglun')"
|
|
><uni-icons
|
|
type="chat-filled"
|
|
size="24"
|
|
style="color: #9a9a9a; margin-right: 10rpx"
|
|
></uni-icons
|
|
>{{ commentCount ? commentCount : "0" }}</view
|
|
>
|
|
|
|
<view
|
|
@click.stop="clickThumbsup('share')"
|
|
style="display: flex; align-items: center; color: #9a9a9a"
|
|
>
|
|
<uni-icons
|
|
type="redo-filled"
|
|
size="24"
|
|
style="color: #9a9a9a; margin-right: 10rpx"
|
|
></uni-icons
|
|
>分享
|
|
</view>
|
|
</view></view
|
|
>
|
|
|
|
<view class="bottom-line"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
avatar: {
|
|
type: String,
|
|
},
|
|
name: {
|
|
type: String,
|
|
},
|
|
createTime: {
|
|
type: String,
|
|
},
|
|
isFocusOn: {
|
|
type: Boolean,
|
|
},
|
|
title: {
|
|
type: String,
|
|
},
|
|
content: {
|
|
type: String,
|
|
},
|
|
imgList: {
|
|
type: Array,
|
|
},
|
|
isLike: {
|
|
type: Number,
|
|
},
|
|
isGiveReward: {
|
|
type: Boolean,
|
|
},
|
|
likeCount: {
|
|
type: Number,
|
|
},
|
|
id: {
|
|
type: Number,
|
|
},
|
|
readCount: {
|
|
type: Number,
|
|
},
|
|
giveRewardNumber: {
|
|
type: Number,
|
|
},
|
|
commentCount: {
|
|
type: Number,
|
|
},
|
|
userNoShow: {
|
|
type: Boolean,
|
|
},
|
|
operateNoShow: {
|
|
type: Boolean,
|
|
},
|
|
likeList: {
|
|
type: Array,
|
|
},
|
|
},
|
|
watch: {
|
|
isLike(newVal, oldVal) {
|
|
console.log("newVal at line 163:", newVal);
|
|
this.initOperate();
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
emptyAvatar: "/static/icon/noIcon.png",
|
|
windowWidth: 0, //屏幕可用宽度
|
|
windowHeight: 0, //屏幕可用高度
|
|
imgWidth: 0, //图片宽度
|
|
imgHeight: 0, //图片高度
|
|
thumbsupColor: "#9a9a9a",
|
|
heartColor: "#9a9a9a",
|
|
userDisplay: "block",
|
|
operateDisplay: "block",
|
|
shadowStyle: {
|
|
// #ifndef APP-NVUE
|
|
|
|
backgroundImage:
|
|
"linear-gradient((177deg, rgb(255, 255, 255) 0%, rgba(220, 230, 255, 0.4) 80%))",
|
|
// #endif
|
|
// #ifdef APP-NVUE
|
|
// nvue上不支持设置复杂的backgroundImage属性
|
|
backgroundImage:
|
|
"linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))",
|
|
// #endif
|
|
paddingTop: "100px",
|
|
marginTop: "-100px",
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
const res = uni.getSystemInfoSync();
|
|
this.windowHeight = res.windowHeight;
|
|
this.windowWidth = res.windowWidth;
|
|
|
|
if (this.userNoShow) {
|
|
this.userDisplay = "none";
|
|
}
|
|
console.log(this.operateNoShow);
|
|
if (this.operateNoShow) {
|
|
this.operateDisplay = "none";
|
|
}
|
|
|
|
this.judgeImg();
|
|
this.initOperate();
|
|
},
|
|
methods: {
|
|
openRead(){
|
|
this.$emit('addRead',this.id)
|
|
},
|
|
// 预览图片
|
|
previewImg(index) {
|
|
this.$emit('addRead',this.id)
|
|
uni.previewImage({
|
|
urls: this.imgList,
|
|
// longPressActions: {
|
|
// itemList: ["保存图片"],
|
|
// },
|
|
current: index, // 设置当前预览的图片索引
|
|
});
|
|
},
|
|
initOperate() {
|
|
this.thumbsupColor = this.isLike ? "#fd514f" : "#9a9a9a";
|
|
if (this.isGiveReward) this.heartColor = "#fd514f";
|
|
},
|
|
// 自适应判断
|
|
judgeImg() {
|
|
if (this.imgList.length === 1) {
|
|
const firstImg = this.imgList[0];
|
|
|
|
// 获取图片的宽高信息
|
|
uni.getImageInfo({
|
|
src: firstImg, // 获取图片路径
|
|
success: (res) => {
|
|
const imgWidth = res.width;
|
|
const imgHeight = res.height;
|
|
|
|
// 如果是横向图片（宽大于高）
|
|
if (imgWidth > imgHeight) {
|
|
// 横向图片尺寸设置
|
|
this.imgWidth = ((this.windowWidth - 90) * 2) / 2;
|
|
this.imgHeight = (this.windowHeight * 3) / 5;
|
|
} else {
|
|
// 纵向图片尺寸设置
|
|
this.imgWidth = (this.windowWidth - 80) * 0.7; // 纵向图片稍微缩小宽度
|
|
this.imgHeight = (this.windowHeight * 3) / 5;
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
console.error("图片加载失败", err);
|
|
},
|
|
});
|
|
} else if (this.imgList.length == 4) {
|
|
this.imgWidth = (this.windowWidth - 60) / 3.3;
|
|
this.imgHeight = this.imgWidth;
|
|
} else {
|
|
this.imgWidth = (this.windowWidth - 60) / 3.4;
|
|
this.imgHeight = this.imgWidth;
|
|
}
|
|
},
|
|
formatTimeAgo(dateString) {
|
|
const date = new Date(dateString);
|
|
const now = new Date();
|
|
const diffMs = now - date; // 毫秒差
|
|
|
|
const diffSeconds = Math.floor(diffMs / 1000);
|
|
if (diffSeconds < 60) {
|
|
return '刚刚';
|
|
}
|
|
|
|
const diffMinutes = Math.floor(diffSeconds / 60);
|
|
if (diffMinutes < 60) {
|
|
return diffMinutes + '分钟前';
|
|
}
|
|
|
|
const diffHours = Math.floor(diffMinutes / 60);
|
|
if (diffHours < 24) {
|
|
return diffHours + '小时前';
|
|
}
|
|
|
|
const diffDays = Math.floor(diffHours / 24);
|
|
if (diffDays === 1) {
|
|
return '昨天';
|
|
}
|
|
if (diffDays < 30) {
|
|
return diffDays + '天前';
|
|
}
|
|
|
|
return date.toLocaleDateString();
|
|
},
|
|
|
|
|
|
/** 触发父级事件 */
|
|
// 点击动态
|
|
clickDynamic() {
|
|
this.$emit("clickDynamic");
|
|
},
|
|
// 点击用户信息
|
|
clickUser() {
|
|
this.$emit("clickUser");
|
|
},
|
|
// 点击关注
|
|
clickFocus() {
|
|
this.$emit("clickFocus");
|
|
},
|
|
// 点赞
|
|
clickThumbsup(type) {
|
|
this.$emit("clickThumbsup", type);
|
|
},
|
|
// 点击打赏
|
|
clickGiveReward() {
|
|
this.$emit("clickGiveReward");
|
|
},
|
|
// 点击聊天
|
|
clickChat() {
|
|
this.$emit("clickChat");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/* 想法图片排列样式 */
|
|
.uni-list-chat__content-extra-text {
|
|
color: #007aff;
|
|
}
|
|
.dynamic {
|
|
width: 100%;
|
|
}
|
|
.allImage {
|
|
display: flex;
|
|
margin-top: 10rpx;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
}
|
|
.imgList {
|
|
margin: 14rpx 0 4rpx;
|
|
}
|
|
.images:not(:nth-child(3n)) {
|
|
/* margin-right: 10rpx; */
|
|
}
|
|
.text {
|
|
margin: 1% 3% 2%;
|
|
}
|
|
.images {
|
|
margin-right: 10rpx;
|
|
display: inline-block;
|
|
}
|
|
.images3:nth-child(3n) {
|
|
margin-right: 0rpx;
|
|
}
|
|
.operate {
|
|
width: 94%;
|
|
padding: 8rpx 0;
|
|
margin-top: 10rpx;
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-top: 4rpx solid #f3f3f3;
|
|
justify-content: space-around;
|
|
}
|
|
.chat-custom-right {
|
|
flex: 1;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.chat-custom-text {
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
.bottom-line {
|
|
border-bottom: 8px solid #efefef;
|
|
}
|
|
|
|
.user__container {
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
/* -webkit-flex-direction: row; */
|
|
flex-direction: row;
|
|
-webkit-box-flex: 1;
|
|
/* -webkit-flex: 1; */
|
|
flex: 1;
|
|
padding: 10px 15px 6px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.user__header {
|
|
display: flex;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
|
|
overflow: hidden;
|
|
border-radius: 80rpx;
|
|
}
|
|
.user__header-image {
|
|
display: flex;
|
|
align-content: center;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
flex-direction: row;
|
|
-webkit-box-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
flex-wrap: wrap-reverse;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 80rpx;
|
|
|
|
overflow: hidden;
|
|
}
|
|
.user__content {
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
flex-direction: row;
|
|
-webkit-box-flex: 1;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
padding: 2px 0;
|
|
margin-top: -10rpx;
|
|
}
|
|
.user__content-main {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-pack: justify;
|
|
-webkit-justify-content: space-between;
|
|
justify-content: space-between;
|
|
padding-left: 20rpx;
|
|
padding-top: 6rpx;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
.user__content-note {
|
|
margin-top: 2rpx;
|
|
color: #aaacab;
|
|
font-size: 26rpx;
|
|
letter-spacing: 1rpx;
|
|
font-weight: normal;
|
|
overflow: hidden;
|
|
}
|
|
.user__focus-on {
|
|
padding: 3px 10px;
|
|
border: 1px solid #fb5f5f;
|
|
color: #fb5f5f;
|
|
display: flex;
|
|
font-size: 14px;
|
|
border-radius: 3px;
|
|
}
|
|
.user__focus-off {
|
|
padding: 3px;
|
|
color: gray;
|
|
font-size: 14px;
|
|
}
|
|
.title {
|
|
text-align: justify;
|
|
color: #292929;
|
|
font-weight: 600;
|
|
font-size: 38rpx;
|
|
line-height: 42rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.user__content-title {
|
|
color: #5a6988;
|
|
font-weight: 600;
|
|
font-size: 30rpx;
|
|
line-height: 34rpx;
|
|
// margin-top: 8rpx;
|
|
}
|
|
::v-deep rich-text {
|
|
text-align: justify;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
::v-deep rich-text p,h1,h2 {
|
|
text-indent: 0 !important;
|
|
}
|
|
/deep/ rich-text br {
|
|
height: 0 !important;
|
|
display: none;
|
|
}
|
|
::v-deep rich-text h1 {
|
|
font-size: 34rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
::v-deep rich-text h2 {
|
|
font-size: 30rpx;
|
|
line-height: 30rpx;
|
|
}
|
|
.likeList {
|
|
background: #f7f7f7;
|
|
border-radius: 4rpx;
|
|
padding: 8rpx 20rpx;
|
|
box-sizing: border-box;
|
|
margin: 10rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 0;
|
|
}
|
|
.hidden2 {
|
|
line-height: 20px;
|
|
max-height: 100px;
|
|
-webkit-line-clamp: 5;
|
|
height: auto;
|
|
}
|
|
::v-deep .u-read-more__toggle{
|
|
background-image: linear-gradient(177deg,
|
|
rgb(255, 255, 255) 0%,
|
|
rgba(220, 230, 255, 0.4) 80%
|
|
) !important;
|
|
}
|
|
</style>
|