代码拉取完成，页面将自动刷新
同步操作将从 huyi612/hmdp-web 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>黑马点评</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="./css/element.css">
<link href="./css/main.css" rel="stylesheet">
<link href="./css/info.css" rel="stylesheet">
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<div class="header">
<div class="header-back-btn" @click="goBack"><i class="el-icon-arrow-left"></i></div>
<div class="header-title"> </div>
</div>
<div class="basic">
<div class="basic-icon">
<img :src="user.icon || '/imgs/icons/default-icon.png'" alt="">
</div>
<div class="basic-info">
<div class="name">{{user.nickName}}</div>
<span>杭州</span>
</div>
<div class="logout-btn" @click="follow">
{{followed ? "取消关注" : "关注"}}
</div>
</div>
<div class="introduce">
<span v-if="info.introduce"></span>
<span v-else>这个人很懒，什么都没有留下</span>
</div>
<div class="content">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="笔记" name="1">
<div v-for="b in blogs" :key="b.id" class="blog-item">
<div class="blog-img"><img :src="b.images.split(',')[0]" alt=""></div>
<div class="blog-info">
<div class="blog-title" v-html="b.title"></div>
<div class="blog-liked"><img src="/imgs/thumbup.png" alt=""> {{b.liked}}</div>
<div class="blog-comments"><i class="el-icon-chat-dot-round"></i> {{b.comments}}</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="共同关注" name="2">
<div>你们都关注了：</div>
<div>张三</div>
<div>李四</div>
</el-tab-pane>
</el-tabs>
</div>
<foot-bar :active-btn="0"></foot-bar>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="./js/element.js"></script>
<script src="./js/common.js"></script>
<script src="./js/footer.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
util,
user: "",
loginUser: {},
activeName: "1",
info: {},
blogs: [],
followed: false, // 是否关注了
commonFollows: [], // 共同关注
},
created() {
this.queryUser();
this.queryLoginUser();
},
methods: {
queryBlogs() {
axios.get("/blog/of/user", {
params: {id: this.user.id, current: 1}
})
.then(({data}) => this.blogs = data)
.catch(this.$message.error)
},
queryLoginUser() {
// 查询用户信息
axios.get("/user/me")
.then(({data}) => {
// 保存用户
this.loginUser = data;
})
.catch(console.log)
},
queryUser() {
// 查询用户信息
let id = util.getUrlParam("id")
axios.get("/user/" + id)
.then(({data}) => {
// 保存用户
this.user = data;
// 查询用户详情
this.queryUserInfo();
// 查询用户笔记
this.queryBlogs();
})
.catch(console.log)
},
goBack() {
history.back();
},
queryUserInfo(id) {
axios.get("/user/info/" + this.user.id)
.then(({data}) => {
if (!data) {
return
}
// 保存用户详情
this.info = data;
// 保存到本地
sessionStorage.setItem("userInfo", JSON.stringify(data))
})
.catch(err => {
this.$message.error(err);
})
},
queryCommonFollow() {
axios.get("/follow/common/" + this.user.id)
.then(({data}) => this.commonFollows = data)
.catch(err => {
this.$message.error(err);
})
},
follow() {
},
handleClick(t) {
if (t.name === '2') {
this.queryCommonFollow();
}
}
},
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手