talk_appAmin/pages/common/postview/index.vue

776 lines
20 KiB
Vue

<template>
<!-- 话题 -->
<view class="center-content-post" @click="toPostInfoView()" style="font-weight: bolder; background-color: #ffffff; margin-bottom: 24rpx;">
<view class="center-content-post-padding">
<view class="center-content-post-head" v-if="postViewIndex != 3">
<!-- 左对齐 -->
<view class="flex alignCenter" @click.stop="ToAddfruedb(postValue.uid)">
<!-- 头像 -->
<div class="avatar-container">
<u-avatar class="avatar-1" size="84rpx" :src="postValue.avatar == '' ? '../../static/images/icon/tu3-9.jpg' :getAvatar(postValue.avatar)"></u-avatar>
<image v-if="postValue.isOfficial" class="official-1"
src="../../../static/images/icon/tu3-6.png" :lazy-load="true"></image>
</div>
<!-- 用户名 -->
<view class="center-content-post-head-title">
<text class="center-content-post-head-title-uname">{{postValue.nickName}}</text>
<text
class="center-content-post-head-title-timeAddress">{{timeAgo(postValue.createTime)}}{{postValue.address ? '·' + postValue.address : ""}}</text>
</view>
</view>
<!-- 右对齐 -->
<!-- 关注操作 -->
<view class="flex alignCenter" v-if="postViewIndex != 0 && loginUser.userId != postValue.uid">
</view>
<!-- 状态 -->
<view class="" >
<text class="pass-text" v-if="postValue.status == 0" >已通过</text>
<text class="audit-text" v-if="postValue.status == 2 | postValue.status == 1 | postValue.status == 3 " >审核中</text>
<text class="refuse-text" v-if=" postValue.status == 4" >未通过</text>
</view>
<!-- 删除操作 -->
<view class="">
<image v-if="postViewIndex == 4 && loginUser.userId == postValue.uid && postValue.status == 0" class="delImg" @click="toDel"
src="../../../static/images/icon/sang-1.png" :lazy-load="true"></image>
</view>
</view>
<text class="center-content-post-title" v-if="postValue.title">{{postValue.title}}</text>
<text class="center-content-post-content-0"
v-if="postValue.content && postViewIndex == 3 || postViewIndex == 0 || postViewIndex == 1 || postViewIndex == 2">{{postValue.content}}</text>
<text class="center-content-post-content-1"
v-else>{{postValue.content}}</text>
<!-- 图片 -->
<!--一张图片-->
<block v-if="toimage(postValue.media) && toimage(postValue.media).length == 1">
<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="toimage(postValue.media)"
@tap.stop="previewImage(toimage(postValue.media), toimage(postValue.media))"></image>
</block>
<!--二张图片-->
<block v-if="toimage(postValue.media) && toimage(postValue.media).length == 2">
<view class="img-style-2">
<image :lazy-load="true" v-for="(mediaItem, index2) in toimage(postValue.media)" :key="index2"
@tap.stop="previewImage(mediaItem, toimage(postValue.media))" mode="aspectFill"
:src="mediaItem"></image>
</view>
</block>
<!-- 三张图片 -->
<block v-if="toimage(postValue.media) && toimage(postValue.media).length == 3">
<!-- <u-album :urls="postValue.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album> -->
<view class="flex justifyBetween">
<view class="img-style-3-1" v-for="(mediaItem, index3) in toimage(postValue.media).slice(0,3)"
:key="index3">
<image :lazy-load="true" @tap.stop="previewImage(mediaItem, toimage(postValue.media))"
mode="aspectFill" :src="mediaItem"></image>
</view>
</view>
</block>
<!--大于三张图片-列表-->
<block v-if="toimage(postValue.media) && toimage(postValue.media).length > 3 && postViewType == 0">
<!-- <u-album :urls="postValue.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album> -->
<view class="flex justifyBetween">
<view class="img-style-3-2" v-for="(mediaItem, index3) in toimage(postValue.media).slice(0,3)"
:key="index3">
<image :lazy-load="true" @tap.stop="previewImage(mediaItem, toimage(postValue.media))"
mode="aspectFill" :src="mediaItem"></image>
<view v-if="index3 == 2" class="img-cover-style"
@tap.stop="previewImage(mediaItem, toimage(postValue.media))">
<text>+{{ toimage(postValue.media).length - 3 }}</text>
</view>
</view>
</view>
</block>
<!--大于三张图片-详情-->
<block v-if="toimage(postValue.media) && toimage(postValue.media).length > 3 && postViewType == 1">
<!-- <u-album :urls="postValue.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album> -->
<view class="flex justifyBetween wrap">
<view class="img-style-3-1" v-for="(mediaItem, index3) in toimage(postValue.media)" :key="index3">
<image :lazy-load="true" @tap.stop="previewImage(mediaItem, toimage(postValue.media))"
mode="aspectFill" :src="mediaItem"></image>
</view>
</view>
</block>
<!-- tab -->
<view v-if="postValue.tab" class="center-content-post-tab" style="display: flex;">
<text class="center-content-post-tab-text" v-for="(tabItem, index2) in strToList(postValue.tab)"
:key="index2" :text="'#' + tabItem">{{'#' + dictTab(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=""
:lazy-load="true"></image>
<text class="count">{{ postValue.transmitCount }}</text>
</view>
</view>
<view class="flex alignCenter">
<view v-if="postValue.like" class="p-item" @click.stop="cancelCollection(postValue.id)">
<image style="width: 40rpx; height: 40rpx;" src="../../../static/images/icon/tu3-8.png" mode=""
:lazy-load="true"></image>
<text class="count-like">{{ postValue.likeCount }}</text>
</view>
<view v-if="!postValue.like" class="p-item" @click.stop="addCollection(postValue.id)">
<image style="width: 40rpx; height: 40rpx;" src="../../../static/images/icon/tu3-7.png" mode=""
:lazy-load="true"></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=""
:lazy-load="true"></image>
<text class="count">{{ postValue.commentCount }}</text>
</view>
<view class="p-item margin50" v-if="postValue.favorite" @click.stop="cancelFavorite(postValue.id)">
<image style="width: 40rpx; height: 40rpx;" src="../../../static/images/icon/tu3-2.png" mode=""
:lazy-load="true"></image>
<text class="count-favorite">{{ postValue.favoriteCount }}</text>
</view>
<view class="p-item margin50" v-if="!postValue.favorite" @click.stop="addFavorite(postValue.id)">
<image style="width: 40rpx; height: 40rpx;" src="../../../static/images/icon/tu3-1.png" mode=""
:lazy-load="true"></image>
<text class="count">{{ postValue.favoriteCount }}</text>
</view>
</view>
</view> -->
</view>
</view>
<!-- <up-modal :show="modalShow" title="是否删除该话题" showCancelButton="true" closeOnClickOverlay="true" @confirm='modalConfirm' @cancel="modalCancel" @close="modalClose"></up-modal>
<up-toast ref="uToastRef"></up-toast> -->
</template>
<script setup>
import {
ref,
reactive,
onMounted,
getCurrentInstance,
defineEmits
} from 'vue';
import {
onReachBottom,
onLoad,
onPageScroll
} from "@dcloudio/uni-app";
import {
useStore
} from 'vuex';
import {
getDicts
} from "@/api/system/dict/data";
import {
listPost,
listPostFollow,
getPost,
delPost,
addPost,
updatePost,
getLoginUserinfo
} from "@/api/talk/post";
import {
listFollowUser,
getFollowUser,
delFollowUserByFollowUser,
addFollowUser,
updateFollowUser
} from "@/api/followUser/followUser";
import {
delLikeByPostLike,
addLike
} from "@/api/like/like";
import {
delPostFavoriteByPostFavorite,
addPostFavorite
} from "@/api/postFavorite/postFavorite";
const emit = defineEmits(["updateFocusFather"])
const modalShow = ref(false)
const loginUser = reactive(uni.getStorageSync('loginUserPost'));
const dictPostTab = ref([])
onLoad((options) => {
getDicts('post_tab').then(e => {
dictPostTab.value = e.data
})
});
const {
proxy
} = getCurrentInstance();
const store = useStore();
const QNDomain = store.state.user.QNDomain;
const props = defineProps({
postValue: Object,
postViewIndex: Number,
postViewType: Number
});
const postListStorage = ref(uni.getStorageSync('postList'));
const upPostListStorage = () => {
postListStorage.value.forEach(item => {
if (item.id === props.postValue.id) {
Object.assign(item, props.postValue);
}
});
uni.setStorageSync('postList', postListStorage.value);
}
const upPostListStorageInFocus = () => {
postListStorage.value = postListStorage.value.map(item => {
if (item.uid == props.postValue.uid) {
item.focus = props.postValue.focus;
}
return item;
});
uni.setStorageSync('postList', postListStorage.value);
}
const dictTab = (tab) => {
console.log('dictPostTab1111111',dictPostTab)
const dict = dictPostTab.value.find((dict) => dict.dictValue === tab);
return dict ? dict.dictLabel : '未知状态';
}
function strToList(strList) {
let list = strList.split(",");
return list;
}
function formatDate(input) {
const date = new Date(input);
if (isNaN(date)) {
throw new Error('Invalid date');
}
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}.${month}.${day}`;
}
function timeAgo(input) {
const date = new Date(input);
if (isNaN(date)) {
throw new Error('Invalid date');
}
const now = new Date();
const diff = now - date;
const minutes = Math.floor(diff / 60000); // 1 minute = 60000 ms
const hours = Math.floor(diff / 3600000); // 1 hour = 3600000 ms
const days = Math.floor(diff / 86400000); // 1 day = 86400000 ms
if (minutes < 60) {
if (minutes == 0) {
return '刚刚';
}
return `${minutes}分钟前`;
} else if (hours < 24) {
return `${hours}小时前`;
} else if (days < 3) {
return `${days}天前`;
} else {
return formatDate(date);
}
}
function getAvatar(avatar) {
return QNDomain + avatar;
}
const toimage = (url) => {
if (typeof url === 'string') {
let info = url.split(",");
let processedInfo = info.map(item => QNDomain + item);
// console.log("processedInfo", processedInfo);
return processedInfo;
}
return null;
};
const toPostInfoView = () => {
if (props.postViewType == 1 && props.postViewIndex != 3 && props.postViewIndex != 2) {
return;
}
if (props.postViewIndex == 3) {
uni.setStorageSync('postInfoPublish', props.postValue)
proxy.$tab.navigateTo('/pages/post/postPublish/postPublish')
return;
}
uni.setStorageSync('postInfo', props.postValue)
proxy.$tab.navigateTo('/pages/work/workinfo')
}
const previewImage = (url, urls) => {
uni.previewImage({
current: url, // 当前显示图片的http链接
urls: urls // 需要预览的图片http链接列表
});
};
// 删除操作
// 方法
const uToastRef = ref(null)
const uToastRefParams = reactive({
type: 'default',
title: '结束后跳转标签页',
message: "删除成功",
// url: '/pages/componentsB/tag/tag',
// iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'
})
function showToast(params) {
uToastRef.value.show({
...params,
complete() {
params.url && uni.navigateTo({
url: params.url
});
}
});
}
const modalConfirm = () => {
delPost(props.postValue.id).then(res => {
showToast(uToastRefParams);
setTimeout(function() {
uni.$emit('refreshData');
uni.navigateBack({
delta: 1
});
}, 1000);
});
modalShow.value = false;
}
const modalCancel = () => {
modalShow.value = false;
}
const modalClose = () => {
modalShow.value = false;
}
const toDel = () => {
modalShow.value = true;
}
// 点赞操作
const cancelCollection = (postId) => {
const postLike = reactive({
likeId: postId,
})
delLikeByPostLike(postLike).then(res => {
props.postValue.likeCount -= 1;
props.postValue.like = !props.postValue.like;
upPostListStorage();
})
};
const addCollection = (postId) => {
const postLike = reactive({
likeId: postId,
})
addLike(postLike).then(res => {
props.postValue.likeCount += 1;
props.postValue.like = !props.postValue.like;
upPostListStorage();
})
};
// 收藏操作
const cancelFavorite = (postId) => {
const postFavorite = reactive({
favoriteId: postId,
})
delPostFavoriteByPostFavorite(postFavorite).then(res => {
props.postValue.favoriteCount -= 1;
props.postValue.favorite = !props.postValue.favorite;
upPostListStorage();
})
};
const addFavorite = (postId) => {
const postFavorite = reactive({
favoriteId: postId,
})
addPostFavorite(postFavorite).then(res => {
props.postValue.favoriteCount += 1;
props.postValue.favorite = !props.postValue.favorite;
upPostListStorage();
})
};
// 关注操作
const cancelFocus = (uid) => {
const followUser = reactive({
followId: uid,
})
delFollowUserByFollowUser(followUser).then(res => {
props.postValue.focus = !props.postValue.focus;
upPostListStorageInFocus();
console.log('关注操作后', uni.getStorageSync('postList'))
// let param={
// followId: uid,
// focus: props.postValue.focus
// }
//传递给父组件
emit('updateFocusFather')
});
};
const addFocus = (uid) => {
const followUser = reactive({
followId: uid,
})
addFollowUser(followUser).then(res => {
props.postValue.focus = !props.postValue.focus;
upPostListStorageInFocus();
console.log('关注操作后', uni.getStorageSync('postList'))
// let param={
// followId: uid,
// focus: props.postValue.focus
// }
//传递给父组件
emit('updateFocusFather')
});
};
// 点击头像经行详情页
function ToAddfruedb(res){
// console.log(res)
// proxy.$tab.navigateTo('/pages/Friend/addfruebd?id='+res)
}
</script>
<style lang="scss" scoped>
page{
background-color: #ffffff;
}
.center-content-post {
}
.center-content-post-padding {
padding: 46rpx 32rpx 28rpx 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;
display: block;
width: 480rpx;
// display: flex; /* 设置为弹性盒子 */
// max-width: 450rpx; /* 最大宽度为 300rpx */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分用省略号表示 */
white-space: nowrap; /* 不换行 */
}
.no-focus-text {
font-weight: 600;
width: 58rpx;
// height: 30rpx;
font-size: 28rpx;
text-align: left;
color: #3477FC;
}
.focus-text {
font-weight: 600;
/* width: 58rpx; */
// height: 30rpx;
font-size: 28rpx;
text-align: left;
color: #3477FC;
}
.center-content-post-title {
display: block;
font-weight: 600;
/* width: 670rpx; */
// height: 80rpx;
font-size: 32rpx;
text-align: left;
color: #000000;
margin-top: 30rpx;
margin-bottom: 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: 30rpx;
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: 30rpx;
text-align: left;
color: #333333;
margin-top: 18rpx;
margin-bottom: 28rpx;
word-wrap: break-word;
word-break: break-all;
}
.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 !important;
/* width: 200rpx !important;
height: 200rpx !important; */
}
.center-content-post-tab {
margin-top: 20rpx;
// margin-bottom: 20rpx;
}
.post-list-bottom {
margin-top: 20rpx;
display: flex;
justify-content: center;
/* 水平居中 */
}
.p-item {
display: flex;
align-items: center;
/* 垂直居中 */
justify-content: center;
/* 水平居中 */
}
.center-content-post-tab-text {
font-weight: 600;
/* 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;
}
.count-like {
font-weight: 400;
width: 48rpx;
/* height: 23rpx; */
font-size: 28rpx;
text-align: left;
color: #FA3939;
margin-left: 10rpx;
}
.count-favorite {
font-weight: 400;
width: 48rpx;
/* height: 23rpx; */
font-size: 28rpx;
text-align: left;
color: #FFC729;
margin-left: 10rpx;
}
.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: 20rpx;
background: #b3d7ff;
}
.img-style-2 {
display: flex;
image {
margin: 6rpx;
width: 100%;
height: 306rpx;
border-radius: 20rpx;
}
}
.img-style-3-1 {
image {
// margin: 6rpx;
width: 222rpx;
height: 222rpx;
border-radius: 20rpx;
}
}
.img-style-3-2 {
display: flex;
justify-content: space-between;
position: relative;
image {
// margin: 6rpx;
width: 222rpx;
height: 222rpx;
border-radius: 20rpx;
}
}
.img-cover-style {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 20rpx;
text {
color: #fff;
}
}
.pass-text {
font-weight: 400;
font-size: 28rpx;
color: #3477FC;
}
.audit-text {
font-weight: 400;
font-size: 28rpx;
color: #43CE8F;
}
.refuse-text {
font-weight: 400;
font-size: 28rpx;
color: #F87863;
}
.delImg {
width: 32rpx;
height: 42rpx;
}
</style>