Skip to content

Commit

Permalink
fix: 修复BUG
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lansongxx
Lansongxx committed Apr 16, 2024
2 parents 93b9997 + a5456ab commit 073b3c9
Show file tree
Hide file tree
Showing 5 changed files with 314 additions and 82 deletions.
212 changes: 193 additions & 19 deletions src/views/information/center.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,16 @@
<CHeader class="cheader" :avatar="avatar"></CHeader>
<section class="section">
<div class="user-information-box">
<div class="user-background">
<button>点击上传背景图片</button>
<div class="user-background" >
<img :src="user.background">
<input
type="file"
style="display: none;"
id="fileInput"
accept="image/*"
@change="uploadBackgroudImage($event)"
>
<button onclick="document.getElementById('fileInput').click()">点击上传背景图片</button>
</div>
<div class="user-information">
<div class="avatar">
Expand Down Expand Up @@ -90,24 +98,63 @@
<List :SendContentMsg="selectInfo"></List>
</div>
</div>
<div class="user-other-information">
<div class="follow-star">
<div class="follow">
<p>关注了</p>
<p>{{user.followCount}}</p>
<div>
<div class="user-other-information">
<div class="follow-star">
<div class="follow">
<p>关注了</p>
<p>{{user.followCount}}</p>
</div>
<div class="star">
<p>关注者</p>
<p>{{user.followedCount}}</p>
</div>
</div>
<div class="star">
<p>关注者</p>
<p>{{user.followedCount}}</p>
<div class="other">
<ul>
<li>
<span>加入于</span>
<span>{{turnTime(user.createTime)}}</span>
</li>
</ul>
</div>
</div>
<div class="other">
<ul>
<li>
<span>加入于</span>
<span>{{turnTime(user.createTime)}}</span>
</li>
</ul>
<div class="author-rank">
<div class="author-rank-title">
<span>
<span class="author-rank-span">可能认识的人</span>
</span>
</div>
<div
class="author-rank-contents"
v-for="(recommendUser,index) in recommendUserList"
:key="index"
>
<ul>
<li>
<div class="author">
<div class="author-information">
<img :src="recommendUser.url" alt="头像">
<div class="information">
<router-link :to="`/user/center/${recommendUser.userId}/post/publish`" class="router-link">
<p>{{ recommendUser.name }}</p>
</router-link>
<p>{{ splitDescription(recommendUser.description) }}</p>
</div>
</div>
<div v-if="recommendUser.userId !== store.getUserId()">
<button
v-if="!recommendUser.followed"
@click="followHotUser(recommendUser)"
>关注</button>
<button v-else
@click="unFollowHotUser(recommendUser)"
>已关注</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Expand All @@ -120,14 +167,36 @@ import CHeader from '@/components/header.vue'
import List from './contents-list.vue'
import {ref, onMounted, watch} from 'vue'
import {getUserInfo, updateUser} from "@/views/information/utils";
import {turnTime} from "@/utils/utils";
import {followHotUser, getUserRecommend, splitDescription, turnTime, unFollowHotUser} from "@/utils/utils";
import {useRoute} from "vue-router";
import router from "@/router";
import SparkMD5 from "spark-md5";
import {cosUploadImage} from "@/utils/public-cos";
import { UserAvatarUrl} from "@/utils/consts";
import {CategoryType, UserAvatarUrl} from "@/utils/consts";
import {useStore} from "@/store";
import type {HotUser} from "@/utils/type";
const recommendUserList = ref<HotUser[]>([])
const uploadBackgroudImage = (event: any) => {
const file = event.target.files![0]
if(file.type.indexOf('image') === -1) {
alert('请上传图片')
return
}
const fileReader = new FileReader();
const spark = new SparkMD5.ArrayBuffer();
fileReader.readAsArrayBuffer(file);
fileReader.onload = (e: any) => {
spark.append(e.target.result);
const md5 = spark.end();
const suffix = '.' + file.name.split('.').pop();
cosUploadImage(file, md5, suffix, async () => {
await updateUser("", "", "", 0,"","", UserAvatarUrl + md5 + suffix)
user.value.backgroud = UserAvatarUrl + md5 + suffix
})
}
}
const store = useStore()
const classify = ref('post')
const user = ref({
Expand All @@ -140,6 +209,7 @@ const user = ref({
followedCount: 0,
followCount: 0,
createTime: 0,
background: ''
})
const selectInfo = ref({
Expand Down Expand Up @@ -183,7 +253,9 @@ onMounted (async () => {
userId: userId,
}
user.value = await getUserInfo(userId)
console.log(user.value.background)
loading.value = false
recommendUserList.value = await getUserRecommend("recommend", CategoryType.UserCategory)
})
watch(() => classify.value, async (newVal) => {
Expand Down Expand Up @@ -248,6 +320,13 @@ watch(() => classify.value, async (newVal) => {
height: 245.28px;
background: linear-gradient(90deg, rgba(180, 203, 224, 1) 12.5%, rgba(198, 223, 247, 0) 100%);
img {
width: 100%;
height: 100%;
object-fit: cover;
}
button {
position: absolute;
right: 10px;
Expand Down Expand Up @@ -380,6 +459,7 @@ watch(() => classify.value, async (newVal) => {
.user-other-information {
width: 280px;
margin-bottom: 30px;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -433,6 +513,100 @@ watch(() => classify.value, async (newVal) => {
}
}
}
.author-rank {
width: 100%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px 1px rgba(136, 136, 136, 0.1);
padding: 15px;
.author-rank-title {
padding-bottom: 10px;
border-bottom: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
.author-rank-span {
font-size: 16px;
font-weight: 600;
}
}
.author-rank-contents {
ul {
list-style: none;
padding: 0;
margin: 0;
li {
padding: 15px 0;
border-bottom: 1px solid #f0f0f0;
display: flex;
align-items: center;
justify-content: space-between;
.author {
width: 100%;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: space-between;
.author-information {
flex: 1;
display: flex;
img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
.information {
p {
margin: 0;
}
p:first-child {
font-size: 15px;
color: black
}
p:nth-child(2) {
font-size: 12px;
color: rgb(132, 132, 132);
}
.router-link {
text-decoration: none;
}
}
}
button {
width: 60px;
height: 30px;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #ffede0;
color: #a37658;
}
}
}
}
}
.author-rank-more {
padding: 10px 0 0 0;
text-align: center;
cursor: pointer;
font-size: 13px;
color: rgb(132, 132, 132);
border-top: 1px solid #f0f0f0;
}
}
}
}
}
Expand Down
7 changes: 5 additions & 2 deletions src/views/information/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export const getUserInfo = async (userId: string) => {
followedCount: 0,
followCount: 0,
createTime: 0,
background: '',
})
await get(false, `${GetUserUrl}?userId=${userId}`)
.then((res: any) => {
Expand All @@ -62,17 +63,19 @@ export const getUserInfo = async (userId: string) => {
detail.value.followedCount = res.followedCount
detail.value.followed = res.followed
detail.value.createTime = res.createTime
detail.value.background = res.backgroundUrl
})
return detail.value
}
export const updateUser = async (name?: String, fullName?:String, url?:String, sex?:number, idCard?:String,description?:String) => {
export const updateUser = async (name?: String, fullName?:String, url?:String, sex?:number, idCard?:String,description?:String, background?:string) => {
await post(true, UpdateUserUrl, {
name: name,
fullName: fullName,
url: url,
sex: sex,
idCard: idCard,
description: description
description: description,
backgroundUrl: background,
});
}

Expand Down
48 changes: 34 additions & 14 deletions src/views/posts/post.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,19 @@
<i class="iconfont icon-shoucang01 collected" v-else></i>
<div>{{ postDetail?.collectCount }}</div>
</li>
<!-- <li @click="sharePostDetail(postDetail)">-->
<!-- <i class="iconfont icon-fenxiang"></i>-->
<!-- <div>{{ postDetail?.shareCount }}</div>-->
<!-- </li>-->
<li v-click-outside="onClickOutside" ref="buttonRef" @click="sharePostDetail(postDetail)">
<i class="iconfont icon-fenxiang"></i>
<div>{{ postDetail?.shareCount }}</div>
</li>
<el-popover
ref="popoverRef"
:virtual-ref="buttonRef"
trigger="click"
:title="postDetail?.title"
virtual-triggering
>
<span>{{ url }}</span>
</el-popover>
</ul>
</div>
<article class="article">
Expand Down Expand Up @@ -108,7 +117,7 @@
import CHeader from '@/components/header.vue'
import Comment from './comment.vue'
import type {Post, PostDetail} from "@/utils/type";
import {onMounted, ref} from "vue";
import {onMounted, ref, unref} from "vue";
import {getPostDetail, getPostRecommendByPostId, likePost, turnTime, unLikePost} from "@/utils/utils";
import {useStore} from "@/store";
import {enterPost} from "@/views/posts/utils";
Expand All @@ -134,6 +143,7 @@ const PostData = ref({
UserId: '',
CommentCount: 0,
})
const url = ref(location.href)
onMounted(async () => {
postId.value = route.params.postId as string
postDetail.value = await getPostDetail(postId.value)
Expand Down Expand Up @@ -202,16 +212,20 @@ const collectOrCancelPostDetail = (post: PostDetail | undefined) => {
}
}
const sharePostDetail = (post: PostDetail | undefined) => {
const sharePostDetail = async (post: PostDetail | undefined) => {
if (post) {
CreateRelation({
toId: postId.value,
toType: TargetType.Post,
relationType: RelationType.Share,
}).then(() => {
await CreateRelation({
toId: postId.value,
toType: TargetType.Post,
relationType: RelationType.Share,
}).then(() => {
if(localStorage.getItem("share") !== 'true') {
localStorage.setItem("share", "true")
post.shareCount++
})
}
}
})
} else {
}
}
const followAuthor = (author: any) => {
Expand All @@ -225,6 +239,12 @@ const followAuthor = (author: any) => {
})
}
const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = async() => {
unref(popoverRef).popperRef?.delayHide?.()
}
const unFollowAuthor = (author: any) => {
DeleteRelation({
toId: author.userId,
Expand Down Expand Up @@ -293,7 +313,7 @@ const changePost = async (nowPostId: string) => {
.information {
position: fixed;
margin-top: 50px;
left: 50%;
left: 48%;
transform: translate(-780px);
ul {
Expand Down
Loading

0 comments on commit 073b3c9

Please sign in to comment.