zm/taimed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
始于初见
2025-08-13 14:53:35 +08:00
parent 1f5f069988
commit b2009403d8
13 changed files with 761 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

312
components/qizai-dynamic/Dynamic.vue
View File

@@ -10,7 +10,8 @@
mode="aspectFill"
class="user__header-image"
></image>
<image v-else
<image
v-else
src="/static/icon/noIcon.png"
mode="aspectFill"
class="user__header-image"
@@ -24,9 +25,10 @@
@click.stop="clickUser()"
>{{ name }}</text
>
<view style="display: flex; align-items: center"
<view style="display: flex; align-items: center;margin-top: 14rpx;"
><text class="user__content-note uni-ellipsis">{{
createTime
createTime
}}</text>
<view style="display: flex; align-items: center; color: #808080"
><uni-icons
@@ -45,97 +47,105 @@
</view>
</view>
</view>
<view style="padding: 0rpx 30rpx"
>
<u-read-more showHeight="284" :toggle="true" color="#5a6988">
<view class="title" style="text-indent: 0 !important;">{{ title }}</view>
<view style="padding: 0rpx 30rpx; width: calc(100% - 100rpx);margin-left: 100rpx;">
<u-read-more showHeight="120" :toggle="true" color="#5a6988">
<view class="title" style="text-indent: 0 !important">{{ title }}</view>
<rich-text
:nodes="content"
style="
height: auto;
color: #4b4b4b;
margin-bottom: 40rpx;
" /></u-read-more
></view>
<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>
font-size: 28rpx;
"
/></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>
<view class="likeList" v-if="likeList.length > 0" style="color: #5188e5" @click.stop="clickThumbsup('likeList')">
<uni-icons
<view class="icon uni-row uni-center" ref="commentIcon" @click="showComment">
<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
></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 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
@click.stop="clickThumbsup()"
style="display: flex; align-items: center; color: #5188e5"
>
<uni-icons
type="redo-filled"
size="24"
style="color: #5188e5; margin-right: 10rpx"
></uni-icons
>分享
</view>
</view>
<view class="bottom-line"></view>
</view>
</template>
<script>
export default {
props: {
avatar: {
@@ -193,7 +203,7 @@ export default {
this.initOperate();
},
},
data() {
return {
emptyAvatar: "/static/icon/noIcon.png",
@@ -254,80 +264,47 @@ export default {
// 自适应判断
judgeImg() {
if (this.imgList.length == 1) {
this.imgWidth = (this.windowWidth * 2) / 3;
this.imgWidth = ((this.windowWidth - 60) * 2) / 3;
this.imgHeight = (this.windowHeight * 3) / 5;
} else if (this.imgList.length == 4) {
this.imgWidth = this.windowWidth / 3.3;
this.imgWidth = (this.windowWidth - 60) / 3.3;
this.imgHeight = this.imgWidth;
} else {
this.imgWidth = this.windowWidth / 3.4;
this.imgWidth = (this.windowWidth - 60) / 3.4;
this.imgHeight = this.imgWidth;
}
},
timestampFormat(timestamp) {
if (!timestamp) return "";
function zeroize(num) {
return (String(num).length == 1 ? "0" : "") + num;
}
formatTimeAgo(dateString) {
const date = new Date(dateString);
const now = new Date();
const diffMs = now - date; // 毫秒差
var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
var timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数
const diffSeconds = Math.floor(diffMs / 1000);
if (diffSeconds < 60) {
return '刚刚';
}
var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
var tmDate = new Date(timestamp * 1000); // 参数时间戳转换成的日期对象
const diffMinutes = Math.floor(diffSeconds / 60);
if (diffMinutes < 60) {
return diffMinutes + '分钟前';
}
var Y = tmDate.getFullYear(),
m = tmDate.getMonth() + 1,
d = tmDate.getDate();
var H = tmDate.getHours(),
i = tmDate.getMinutes(),
s = tmDate.getSeconds();
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();
},
if (timestampDiff < 60) {
// 一分钟以内
return "刚刚";
} else if (timestampDiff < 3600) {
// 一小时前之内
return Math.floor(timestampDiff / 60) + "分钟前";
} else if (
curDate.getFullYear() == Y &&
curDate.getMonth() + 1 == m &&
curDate.getDate() == d
) {
return "今天" + zeroize(H) + ":" + zeroize(i);
} else {
var newDate = new Date((curTimestamp - 86400) * 1000); // 参数中的时间戳加一天转换成的日期对象
if (
newDate.getFullYear() == Y &&
newDate.getMonth() + 1 == m &&
newDate.getDate() == d
) {
return "昨天" + zeroize(H) + ":" + zeroize(i);
} else if (curDate.getFullYear() == Y) {
return (
zeroize(m) +
"月" +
zeroize(d) +
"日 " +
zeroize(H) +
":" +
zeroize(i)
);
} else {
return (
Y +
"年" +
zeroize(m) +
"月" +
zeroize(d) +
"日 " +
zeroize(H) +
":" +
zeroize(i)
);
}
}
},
/** 触发父级事件 */
// 点击动态
@@ -373,7 +350,7 @@ export default {
justify-content: flex-start;
}
.imgList {
margin: 20rpx 30rpx;
margin: 14rpx 0 4rpx;
}
.images:not(:nth-child(3n)) {
/* margin-right: 10rpx; */
@@ -390,12 +367,12 @@ export default {
}
.operate {
width: 94%;
padding: 10rpx 0;
padding: 8rpx 0;
margin-top: 10rpx;
font-size: 14px;
display: flex;
align-items: center;
background-color: #e9f0ff73;
border-top: 4rpx solid #f3f3f3;
justify-content: space-around;
}
.chat-custom-right {
@@ -413,7 +390,7 @@ export default {
color: #999;
}
.bottom-line {
border-bottom: 4px solid #efefef;
border-bottom: 8px solid #efefef;
}
.user__container {
@@ -425,17 +402,17 @@ export default {
-webkit-box-flex: 1;
/* -webkit-flex: 1; */
flex: 1;
padding: 10px 15px;
padding: 10px 15px 6px;
position: relative;
overflow: hidden;
}
.user__header {
display: flex;
width: 100rpx;
height: 100rpx;
width: 80rpx;
height: 80rpx;
overflow: hidden;
border-radius: 120rpx;
border-radius: 80rpx;
}
.user__header-image {
display: flex;
@@ -448,9 +425,9 @@ export default {
-webkit-box-align: center;
align-items: center;
flex-wrap: wrap-reverse;
width: 100rpx;
height: 100rpx;
border-radius: 100rpx;
width: 80rpx;
height: 80rpx;
border-radius: 80rpx;
overflow: hidden;
}
@@ -463,6 +440,7 @@ export default {
flex: 1;
overflow: hidden;
padding: 2px 0;
margin-top: -10rpx;
}
.user__content-main {
display: -webkit-box;
@@ -508,12 +486,13 @@ export default {
color: #292929;
font-weight: 600;
font-size: 32rpx;
margin-bottom: 20rpx;
margin-bottom: 10rpx;
}
.user__content-title {
color: #5a6988;
font-weight: 600;
font-size: 34rpx;
font-size: 30rpx;
line-height: 38rpx;
}
::v-deep rich-text {
text-align: justify;
@@ -523,19 +502,20 @@ export default {
::v-deep rich-text p {
text-indent: 0 !important;
}
.likeList{
background: #f7f7f7;
border-radius: 4rpx;
padding: 8rpx 20rpx;
box-sizing: border-box;
margin: 20rpx 32rpx;
display: flex;
align-items: center;
.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: 24px;
max-height: 120px;
-webkit-line-clamp: 5;
height: auto;
}
.hidden2{
line-height: 24px;
max-height: 120px;
-webkit-line-clamp: 5;
height: auto;
}
</style>