420 lines
12 KiB
Vue
420 lines
12 KiB
Vue
<template>
|
||
<!-- 话题 -->
|
||
<view class="center-content-post">
|
||
<view class="center-content-post-padding">
|
||
<view class="center-content-post-head">
|
||
<!-- 左对齐 -->
|
||
<view class="flex alignCenter">
|
||
<!-- 头像 -->
|
||
<div class="avatar-container">
|
||
<u-avatar class="avatar-1" size="84rpx" :src="postValue.avatar"></u-avatar>
|
||
<image v-if="postValue.isOfficial" class="official-1" src="../static/images/icon/tu3-6.png"></image>
|
||
</div>
|
||
<!-- 用户名 -->
|
||
<view class="center-content-post-head-title">
|
||
<text class="center-content-post-head-title-uname">{{postValue.uname}}</text>
|
||
<text class="center-content-post-head-title-timeAddress">{{postValue.createTime + '·' + postValue.address}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 右对齐 -->
|
||
<view class="flex alignCenter" v-if="postViewIndex != 0">
|
||
<text class="no-focus-text" v-if="postValue.isFocus" @click="addFocus(index)">关注</text>
|
||
<text class="focus-text" v-else @click="cancelFocus()">已关注</text>
|
||
</view>
|
||
</view>
|
||
<text class="center-content-post-title" v-if="postValue.title">{{postValue.title}}</text>
|
||
<text class="center-content-post-content-0" v-if="postViewType == 0">{{postValue.content}}</text>
|
||
<text class="center-content-post-content-1" v-if="postViewType == 1">{{postValue.content}}</text>
|
||
<!-- 图片 -->
|
||
<!--一张图片-->
|
||
<block v-if="postValue.media.length == 1">
|
||
<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="postValue.media[0]"
|
||
@tap="previewImage(postValue.media[0], postValue.media)"></image>
|
||
</block>
|
||
<!--二张图片-->
|
||
<block v-if="postValue.media.length == 2">
|
||
<view class="img-style-2">
|
||
<image :lazy-load="true" v-for="(mediaItem, index2) in postValue.media" :key="index2"
|
||
@tap.stop="previewImage(mediaItem, postValue.media)" mode="aspectFill"
|
||
:src="mediaItem"></image>
|
||
</view>
|
||
</block>
|
||
<!--三张图片-->
|
||
<block v-if="postValue.media.length >= 3">
|
||
<u-album :urls="postValue.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album>
|
||
</block>
|
||
<!-- tab -->
|
||
<view class="center-content-post-tab" style="display: flex;">
|
||
<text
|
||
class="center-content-post-tab-text"
|
||
v-for="(tabItem, index2) in postValue.tab" :key="index2"
|
||
:text="'#' + tabItem">{{'#' + tabItem}}</text>
|
||
</view>
|
||
<view class="post-list-bottom" v-if="postViewType == 0" style="display: flex; justify-content: space-between;">
|
||
<!-- 靠左对齐 -->
|
||
<view class="">
|
||
<view class="p-item">
|
||
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu2-9.png" mode=""></image>
|
||
<text class="count">{{ postValue.transmitCount }}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 靠右对齐 -->
|
||
<view class="flex alignCenter">
|
||
<view v-if="postValue.isLike" class="p-item" @click.stop="cancelCollection()">
|
||
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-8.png" mode=""></image>
|
||
<text class="count">{{ postValue.likeCount }}</text>
|
||
</view>
|
||
|
||
<!-- 靠右对齐 -->
|
||
<view v-if="!postValue.isLike" class="p-item" @click.stop="addCollection()">
|
||
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-7.png" mode=""></image>
|
||
<text class="count">{{ postValue.likeCount }}</text>
|
||
</view>
|
||
|
||
<!-- 靠右对齐 -->
|
||
<view class="p-item margin50">
|
||
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-3.png" mode=""></image>
|
||
<text class="count">{{ postValue.commentCount }}</text>
|
||
</view>
|
||
|
||
<!-- 靠右对齐 -->
|
||
<view class="p-item margin50" v-if="postValue.ifFavorite" @click.stop="cancelFavorite()">
|
||
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-2.png" mode=""></image>
|
||
<text class="count">{{ postValue.favoriteCount }}</text>
|
||
</view>
|
||
|
||
<!-- 靠右对齐 -->
|
||
<view class="p-item margin50" v-if="!postValue.ifFavorite" @click.stop="addFavorite()">
|
||
<image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-1.png" mode=""></image>
|
||
<text class="count">{{ postValue.favoriteCount }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-line></u-line>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
|
||
const props = defineProps({
|
||
postValue: Object,
|
||
postViewIndex: Number,
|
||
postViewType: Number
|
||
});
|
||
// const postValue = reactive(
|
||
// {
|
||
// avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
|
||
// uname: '爱吃饭的小张',
|
||
// createTime: '11分钟前',
|
||
// address: '南开大学',
|
||
// isFocus: false,
|
||
// isOfficial: true,
|
||
// title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
|
||
// content: '八年前，学弟在工地上杀了一个工友，杀人前，他给警察打了电话，预告杀人的时间和地点，并......',
|
||
// type: '1',
|
||
// media: [
|
||
// 'https://tu.sioe.cn/gj/qiege/image.jpg',
|
||
// 'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
|
||
// 'https://bpic.51yuansu.com/backgd/cover/00/63/09/64b52b1426fff_800.jpg?x-oss-process=image/resize,w_780/sharpen,100',
|
||
// 'https://tu.sioe.cn/gj/qiege/image.jpg',
|
||
// ],
|
||
// tab: ['学术讨论组', '校园风景'],
|
||
// transmitCount: 136,
|
||
// isLike: true,
|
||
// likeCount: 999,
|
||
// commentCount: 136,
|
||
// ifFavorite: true,
|
||
// favoriteCount: 136
|
||
// }
|
||
// );
|
||
|
||
const previewImage = (url, urls) => {
|
||
uni.previewImage({
|
||
current: url, // 当前显示图片的http链接
|
||
urls: urls // 需要预览的图片http链接列表
|
||
});
|
||
};
|
||
|
||
const cancelCollection = () => {
|
||
props.postValue.likeCount -= 1;
|
||
props.postValue.isLike = !props.postValue.isLike;
|
||
};
|
||
|
||
const addCollection = () => {
|
||
props.postValue.likeCount += 1;
|
||
props.postValue.isLike = !props.postValue.isLike;
|
||
};
|
||
|
||
const cancelFavorite = () => {
|
||
props.postValue.favoriteCount -= 1;
|
||
props.postValue.ifFavorite = !props.postValue.ifFavorite;
|
||
};
|
||
|
||
const addFavorite = () => {
|
||
props.postValue.favoriteCount += 1;
|
||
props.postValue.ifFavorite = !props.postValue.ifFavorite;
|
||
};
|
||
|
||
const cancelFocus = () => {
|
||
props.postValue.isFocus = !props.postValue.isFocus;
|
||
};
|
||
|
||
const addFocus = () => {
|
||
props.postValue.isFocus = !props.postValue.isFocus;
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
.center-content-post {
|
||
}
|
||
.center-content-post-padding {
|
||
padding: 46rpx 32rpx;
|
||
}
|
||
.center-content-post-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.center-content-post-head-title {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.center-content-post-head-title-uname {
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
text-align: left;
|
||
color: #000000;
|
||
align-self: flex-start; /* 垂直起始对齐 */
|
||
margin-bottom: 20rpx;
|
||
height: 32rpx;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.center-content-post-head-title-timeAddress {
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
text-align: left;
|
||
color: #999999;
|
||
align-self: flex-end; /* 垂直结束对齐 */
|
||
height: 30rpx;
|
||
line-height: 30rpx;
|
||
}
|
||
.no-focus-text {
|
||
font-weight: 400;
|
||
width: 58rpx;
|
||
// height: 30rpx;
|
||
font-size: 28rpx;
|
||
text-align: left;
|
||
color: #3477FC;
|
||
}
|
||
.focus-text {
|
||
font-weight: 400;
|
||
/* width: 58rpx; */
|
||
// height: 30rpx;
|
||
font-size: 28rpx;
|
||
text-align: left;
|
||
color: #2553b4;
|
||
}
|
||
.center-content-post-title{
|
||
display: block;
|
||
font-weight: 600;
|
||
/* width: 670rpx; */
|
||
// height: 80rpx;
|
||
font-size: 32rpx;
|
||
text-align: left;
|
||
color: #000000;
|
||
margin-top: 30rpx;
|
||
display: -webkit-box; /* 将文本视为弹性盒子 */
|
||
-webkit-line-clamp: 2; /* 设置最大行数 */
|
||
-webkit-box-orient: vertical; /* 垂直方向排列文本 */
|
||
overflow: hidden; /* 隐藏超出部分 */
|
||
}
|
||
.center-content-post-content-0{
|
||
display: block;
|
||
font-weight: 400;
|
||
/* width: 670rpx; */
|
||
// height: 80rpx;
|
||
font-size: 32rpx;
|
||
text-align: left;
|
||
color: #333333;
|
||
margin-top: 18rpx;
|
||
margin-bottom: 28rpx;
|
||
display: -webkit-box; /* 将文本视为弹性盒子 */
|
||
-webkit-line-clamp: 2; /* 设置最大行数 */
|
||
-webkit-box-orient: vertical; /* 垂直方向排列文本 */
|
||
overflow: hidden; /* 隐藏超出部分 */
|
||
}
|
||
.center-content-post-content-1{
|
||
display: block;
|
||
font-weight: 400;
|
||
/* width: 670rpx; */
|
||
// height: 80rpx;
|
||
font-size: 32rpx;
|
||
text-align: left;
|
||
color: #333333;
|
||
margin-top: 18rpx;
|
||
margin-bottom: 28rpx;
|
||
|
||
}
|
||
|
||
.u-album__row[data-v-723ad357] {
|
||
justify-content: center !important;
|
||
}
|
||
.u-album__row.data-v-723ad357 {
|
||
justify-content: center !important;
|
||
/* height: 200rpx !important; */
|
||
}
|
||
.u-album__row__wrapper {}
|
||
.data-v-6fcabaad {
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
/* width: 200rpx !important;
|
||
height: 200rpx !important; */
|
||
}
|
||
|
||
.center-content-post-tab{
|
||
margin-top: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
|
||
.post-list-bottom {
|
||
display: flex;
|
||
justify-content: center; /* 水平居中 */
|
||
}
|
||
|
||
.p-item {
|
||
display: flex;
|
||
align-items: center; /* 垂直居中 */
|
||
justify-content: center; /* 水平居中 */
|
||
|
||
}
|
||
.center-content-post-tab-text{
|
||
font-weight: 400;
|
||
/* width: 139rpx; */
|
||
// height: 26rpx;
|
||
font-size: 24rpx;
|
||
text-align: left;
|
||
color: #3477FC;
|
||
/* width: 130rpx; */
|
||
// height: 44rpx;
|
||
// line-height: 44rpx;
|
||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||
background: #f7f8fa;
|
||
padding: 8rpx;
|
||
/* margin-left: 50rpx; */
|
||
}
|
||
.center-content-post-tab-text:nth-child(2) {
|
||
/* 您的样式 */
|
||
margin-left: 24rpx; /* 添加额外的左边距 */
|
||
}
|
||
|
||
.margin50 {
|
||
margin-left: 50rpx; /* 添加额外的左边距 */
|
||
}
|
||
.count{
|
||
font-weight: 400;
|
||
width: 48rpx;
|
||
/* height: 23rpx; */
|
||
font-size: 28rpx;
|
||
text-align: left;
|
||
color: #787878;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.box-a {
|
||
margin-top: 42rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.box-b {
|
||
width: calc(33.33% - 16rpx); /* 每行三个元素，减去外边距的总宽度 */
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.box-c {
|
||
// width: 100%;
|
||
// height: 82rpx;
|
||
border-radius: 16rpx;
|
||
background: #f7f8fc;
|
||
border: 2rpx solid transparent;
|
||
box-sizing: border-box;
|
||
cursor: pointer;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.offtext {
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
text-align: center;
|
||
font-family: "Microsoft YaHei";
|
||
// line-height: 82rpx;
|
||
display: block;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
padding: 12rpx 0;
|
||
}
|
||
|
||
.boxtext {
|
||
font-weight: 600;
|
||
color: #91b4ff;
|
||
}
|
||
|
||
.box-d {
|
||
border-color: #91b4ff;
|
||
}
|
||
|
||
.avatar-container {
|
||
position: relative;
|
||
}
|
||
|
||
.avatar-1 {
|
||
position: relative;
|
||
}
|
||
|
||
.official-1 {
|
||
position: absolute;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
.img-style-1 {
|
||
display: block;
|
||
width: 100%;
|
||
height: 600rpx;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
|
||
width: 686rpx;
|
||
height: 370rpx;
|
||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
background: #b3d7ff;
|
||
}
|
||
|
||
.img-style-2 {
|
||
display: flex;
|
||
|
||
image {
|
||
margin: 6rpx;
|
||
|
||
width: 100%;
|
||
height: 306rpx;
|
||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
}
|
||
}
|
||
.image-container {
|
||
display: inline-block;
|
||
position: relative; /* 设置父元素为相对定位 */
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
}
|
||
|
||
|
||
|
||
</style> |