A1300399510/GterForumWeB
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

a1300399510@qq.com 提交于 2023/04/04 -14:20:01

Browse Source
This commit is contained in:
XiaoMo 2023-04-04 14:20:10 +08:00
parent ee5a2cd2ea
commit 70633c22cb
13 changed files with 2562 additions and 387 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
src/components/SearchBox-冲突-肖荣豪_Win10.vue Executable file
View File

@ -0,0 +1,199 @@
<template>
<div>
<div class="head-search flexcenter" v-if="issearch" @click="searchClick()">
<img class="head-search-icon" src="@/assets/img/headerNav/search.png" />
<span>搜索</span>
</div>
<!-- 搜索弹窗 -->
<div class="search-window" :class="{ 'searchShow': searchWinShow == true }">
<!-- 搜索框 -->
<div class="search-input flexacenter">
<div class="form flexacenter">
<img class="search-icon" src="@/assets/img/headerNav/search.png">
<input class="flex1" ref="searchInput" v-model="searchText" type="text" placeholder="请输入搜索关键词" />
<img v-if="searchText" @click.stop="clearText()" class="clear-text" src="@/assets/img/icon/clear.png">
</div>
<div class="search-close" @click="searchClose()">取消</div>
</div>
<!-- 历史搜索 -->
<div class="search-content flexcolumn">
<div class="search-text">历史搜索</div>
<div class="search-label">
<span>香港大学</span>
<span>香港大学</span>
<span>香港大学</span>
</div>
</div>
<!-- 热门搜索 -->
<div class="search-content">
<div class="search-text">热门搜索</div>
<div class="search-label">
<span v-for="(item, index) in hotSearchkeywords" :key="index" @click="toSearchResult(item)">{{ item }}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "SearchBox",
data() {
return {
searchWinShow: false,//显示搜索弹窗
searchText: '',
showClear: false, //显示清除按钮
}
},
props: ["issearch", "hotSearchkeywords"],
methods: {
collapseClick() {
if (this.collapseShow == true) this.collapseShow = false;
else this.collapseShow = true;
},
// 点击显示搜索弹窗
searchClick() {
this.searchWinShow = true
this.$nextTick(() => {
this.$refs.searchInput.focus();
})
},
// 点击隐藏搜索弹窗
searchClose() {
this.searchWinShow = false
},
// 搜索键盘、搜索
search(categoryId) {
this.$refs.searchInput.blur();
},
// 清空文本框
clearText() {
this.searchText = ""
},
// 跳转搜索结果
toSearchResult(kw){
this.$router.push(`/searchResult?kw=${kw}`)
},
},
mounted() {
if (this.searchText.length > 0) this.showClear = true
else this.showClear = false
}
}
</script>
<style lang="scss" scoped>
.head-search {
width: 2.4rem;
height: .8rem;
border-radius: 2.56rem;
background-color: rgba(235, 235, 235, 1);
color: #AAAAAA;
font-size: .3467rem;
.head-search-icon {
width: .4rem;
height: .4rem;
margin-right: .14rem;
}
margin-right: .4rem;
}
// 搜索弹窗
.search-window {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 100vh;
background-color: #f6f6f6;
z-index: 9;
&.searchShow {
display: block;
}
.search-input {
padding: 0.27rem 0.32rem 0.27rem;
justify-content: space-between;
.search-icon {
width: .4rem;
height: .4rem;
}
.form {
width: 90%;
background-color: #ebebeb;
height: 1.12rem;
line-height: 1.12rem;
border-radius: 0.56rem;
padding-left: .4rem;
}
input {
font-size: 0.36rem;
border: none;
outline: 0;
color: #000;
padding-left: .34rem;
height: 1.12rem;
background: transparent;
}
.clear-text {
width: 0.4rem;
height: 0.4rem;
padding: .48rem;
}
.search-close {
width: 10%;
font-size: 0.36rem;
text-align: right;
}
}
.search-content {
padding: 0.27rem 0.32rem 0.27rem;
margin-top: 0.2rem;
.search-text {
color: #7F7F7F;
font-size: 0.32rem;
margin-bottom: .32rem;
}
.search-label {
display: flex;
flex-direction: row;
flex-wrap: wrap;
span {
padding: 0 0.2rem;
height: 0.96rem;
line-height: 0.96rem;
background-color: #fff;
border-radius: 0.16rem;
color: #333;
text-align: center;
font-size: 0.36rem;
margin-right: .2rem;
margin-bottom: .24rem;
}
}
}
}
</style>

13
src/components/SearchBox.vue
View File

@ -30,7 +30,9 @@
<div class="search-content">
<div class="search-text">热门搜索</div>
<div class="search-label">
<span v-for="(item, index) in hotSearchkeywords" :key="index" @click="toSearchResult(item)">{{ item }}</span>
<span>Bocconi</span>
<span>Bocconi</span>
<span>Bocconi</span>
</div>
</div>
</div>
@ -47,7 +49,7 @@ export default {
showClear: false, //显示清除按钮
}
},
props: ["issearch", "hotSearchkeywords"],
props: ["issearch"],
methods: {
collapseClick() {
@ -72,12 +74,7 @@ export default {
// 清空文本框
clearText() {
this.searchText = ""
},
// 跳转搜索结果
toSearchResult(kw){
this.$router.push(`/searchResult?kw=${kw}`)
},
}
},
mounted() {
if (this.searchText.length > 0) this.showClear = true

44
src/main-冲突-肖荣豪_Win10.js Executable file
View File

@ -0,0 +1,44 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI, { Message, Pagination } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import { skipUrl, pageStop, pageMove, goTologin, copy, startupUnderLoading, closeUnderLoading, formattedDate } from "@/utils/common.js"
import http from "@/utils/request"
import hintBox from '@/components/Hintbox'
Vue.config.productionTip = false
Vue.prototype.$baseURL = "https://forum.gter.net/api" // 请求接口的共 url
Vue.prototype.$loginUrl = "https://passport.gter.net/" // 跳转登录的url
Vue.prototype.$http = http // 跳转登录页面的方法
Vue.prototype.$skipUrl = skipUrl // 跳转页面的公共方法
Vue.prototype.$goTologin = goTologin // 跳转登录页面的方法
// 上面的顺序不要修改
Vue.prototype.$pageStop = pageStop // 页面禁止滑动
Vue.prototype.$pageMove = pageMove // 页面可以滑动
Vue.prototype.$Message = Message // 消息提示框
Vue.prototype.$copy = copy // 复制
Vue.prototype.$startupUnderLoading = startupUnderLoading // 开启加载提示 element的
Vue.prototype.$closeUnderLoading = closeUnderLoading // 关闭加载提示 element的
Vue.prototype.$formattedDate = formattedDate // 时间戳转格式
//svg文件引入
import './icons'
//动态设置fontsize
import './utils/fontSize.js'
//ElementUI
Vue.use(ElementUI);
Vue.use(Pagination);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

6
src/main.js
View File

@ -4,9 +4,8 @@ import router from './router'
import store from './store'
import ElementUI, { Message, Pagination } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import { skipUrl, pageStop, pageMove, goTologin, copy, startupUnderLoading, closeUnderLoading, formattedDate } from "@/utils/common.js"
import { skipUrl, pageStop, pageMove, goTologin, copy } from "@/utils/common.js"
import http from "@/utils/request"
import hintBox from '@/components/Hintbox'
Vue.config.productionTip = false
@ -22,9 +21,6 @@ Vue.prototype.$pageStop = pageStop // 页面禁止滑动
Vue.prototype.$pageMove = pageMove // 页面可以滑动
Vue.prototype.$Message = Message // 消息提示框
Vue.prototype.$copy = copy // 复制
Vue.prototype.$startupUnderLoading = startupUnderLoading // 开启加载提示 element的
Vue.prototype.$closeUnderLoading = closeUnderLoading // 关闭加载提示 element的
Vue.prototype.$formattedDate = formattedDate // 时间戳转格式
//svg文件引入
import './icons'

75
src/utils/common-冲突-肖荣豪_Win10.js Executable file
View File

@ -0,0 +1,75 @@
// a标签 跳转 isblank 代表跳转新标签
function skipUrl(url, isblank = true) {
console.log();
let aTab = document.createElement("a");
document.body.appendChild(aTab);
aTab.setAttribute("href", url);
if (isblank) aTab.setAttribute("target", "_blank");
aTab.click();
}
// 禁止页面滑动
function pageStop() {
document.body.style.overflow = "hidden";
}
// 开启页面滑动
function pageMove() {
document.body.style.overflow = "";
}
// 跳转登录
function goTologin() {
let url = encodeURIComponent(location.href);
console.log(skipUrl);
skipUrl(`https://passport.gter.net/?referer=${url}`, false);
}
// 点击复制
function copy(value, message) {
// 创建一个新的输入元素
let copyInput = document.createElement('input');
// 将输入元素添加到文档的主体中
document.body.appendChild(copyInput);
// 将输入元素的值设置为需要复制的URL
copyInput.setAttribute('value', value);
// 选择输入元素
copyInput.select();
// 使用clipboard API将所选文本复制到剪贴板
navigator.clipboard.writeText(copyInput.value);
// 向用户显示成功消息
// 从文档中删除动态创建的输入元素
copyInput.remove();
if (message) this.$message.success(message);
}
// 启动加载中
function startupUnderLoading(that) {
that.loading = that.$loading({
lock: true,
text: '加载中...',
background: 'rgba(0, 0, 0, 0.7)'
});
}
// 关闭加载中
function closeUnderLoading(that) {
that.loading.close();
}
// 时间戳
function formattedDate(timestamp) {
const date = new Date(timestamp * 1000);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}`;
return formattedDate
}
export { skipUrl, pageStop, pageMove, goTologin, copy, startupUnderLoading, closeUnderLoading, formattedDate }

31
src/utils/common.js
View File

@ -41,35 +41,10 @@ function copy(value, message) {
// 向用户显示成功消息
// 从文档中删除动态创建的输入元素
copyInput.remove();
if (message) this.$message.success(message);
}
// 启动加载中
function startupUnderLoading(that) {
that.loading = that.$loading({
lock: true,
text: '加载中...',
background: 'rgba(0, 0, 0, 0.7)'
});
}
// 关闭加载中
function closeUnderLoading(that) {
that.loading.close();
}
// 时间戳
function formattedDate(timestamp) {
const date = new Date(timestamp * 1000);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}`;
return formattedDate
}
export { skipUrl, pageStop, pageMove, goTologin, copy, startupUnderLoading, closeUnderLoading, formattedDate }
export { skipUrl, pageStop, pageMove, goTologin, copy }

1240
src/views/detail/detailIndex-冲突-肖荣豪_Win10.vue Executable file
View File

File diff suppressed because it is too large Load Diff

242
src/views/detail/detailIndex.vue
View File

@ -4,24 +4,24 @@
<div class="detail-section">版块：<span class="section-name">香港澳门台湾留学申请</span></div>
<div class="detail-data flexacenter">
<div class="detail-data-item flexacenter">
<img class="detail-data-eye" src="@/assets/img/detail/eye.png">{{ info.views }}
<img class="detail-data-eye" src="@/assets/img/detail/eye.png">10378
</div>
<div class="detail-data-item flexacenter">
<img class="detail-data-comment" src="@/assets/img/detail/comment.png">{{ info.replies }}
<img class="detail-data-comment" src="@/assets/img/detail/comment.png">16
</div>
</div>
</div>
<div class="detail-title-box">
<div class="detail-title-item detail-title-jinghua flexcenter" v-if="info.digest > 0">精华</div>
<div class="detail-title-item detail-title-label flexcenter" v-if="info.typename">{{ info.typename }}</div>
{{ info.subject }}
<div class="detail-title-item detail-title-jinghua flexcenter">精华</div>
<div class="detail-title-item detail-title-label flexcenter">生活贴士</div>
香港永久居民的申请步骤和过程
</div>
<!-- -->
<div class="card flexcenter">
<!-- 总结开始 -->
<div class="card-item shadow" v-if="type == 5">
<!-- 总结 -->
<div class="card-item shadow">
<div class="card-head flexacenter">
<img class="card-head-icon"
src="https://axure-file.lanhuapp.com/md516b251fb-9cfa-46fc-a9b6-2a41a7b4dc37__3ad73406ff4bc8b138dafc6dcbf1a635.svg" />
@ -38,97 +38,48 @@
<span class="flexacenter">详情<svg-icon icon-class="arrowsBlackLeft"
class-name="summary-offer-head-icon"></svg-icon></span>
</div>
<div class="summary-offer-box">
<div class="summary-offer-item flexacenter">
<div class="summary-offer-key flexacenter">
申请学校
</div>
<div class="summary-offer-value flexacenter">
韦仕敦大学
</div>
</div>
<div class="summary-offer-item flexacenter">
<div class="summary-offer-key flexacenter">
学位
</div>
<div class="summary-offer-value flexacenter">
MA
</div>
</div>
<div class="summary-offer-item flexacenter">
<div class="summary-offer-key flexacenter">
专业
</div>
<div class="summary-offer-value flexacenter">
Curriculum study
</div>
</div>
</div>
</div>
<div class="summary-content-item">
<div class="summary-offer-head flexacenter">
<span class="summary-offer-head-title">总结</span>
<span class="flexacenter">详情<svg-icon icon-class="arrowsBlackLeft"
class-name="summary-offer-head-icon"></svg-icon></span>
</div>
<div class="summary-wenzi">
guelph教授很好一直在帮忙催offer，现在uvic也出了口头offer，可能要纠结一下...
mcgill拒了算是意料之中吧
ottawa没搞懂申请的thesis下来了course...
calgary突然就来了offer，又陷入纠结了..
</div>
</div>
<div class="examine-btn flexcenter">
查看当前总结详情
查看当前捷报详情
<div class="examine-btn-outside flexcenter">
<svg-icon icon-class="arrowsRoundBlackLeft" class-name="examine-btn-icon"></svg-icon>
</div>
</div>
</div>
</div>
<!-- 总结结束 -->
<!-- offer -->
<div class="card-item shadow" v-if="type == 6">
<div class="card-item shadow">
<div class="card-head flexacenter">
<img class="card-head-icon" :src="info.avatar" />
<img class="card-head-icon"
src="https://axure-file.lanhuapp.com/md516b251fb-9cfa-46fc-a9b6-2a41a7b4dc37__3ad73406ff4bc8b138dafc6dcbf1a635.svg" />
<div class="card-head-content flex1 flexflex">
<div class="card-head-name flexflex">{{ info.author }}</div>
<div class="card-head-time">{{ $formattedDate(info.dateline) }}</div>
<div class="card-head-name flexflex">闫旭Mike</div>
<div class="card-head-time">2022-7-6 14:56</div>
</div>
<div class="card-head-fool">楼主</div>
</div>
<div class="offer-content">
<div class="offer-content-box">
<template v-for="(item, index) in offerinfoKey">
<div class="offer-content-item flexacenter" :key="index" v-if="offerinfo[item.key]">
<div class="offer-content-key" v-if="offerinfo[item.key]">{{ item.name }}</div>
<div class="offer-content-value">{{ offerinfo[item.key] }}</div>
</div>
</template>
<!-- <div class="offer-content-item flexacenter" v-for="item in 7" :key="item">
<div class="offer-content-item flexacenter" v-for="item in 7" :key="item">
<div class="offer-content-key">申请专业</div>
<div class="offer-content-value">韦仕敦大学</div>
</div> -->
</div>
</div>
<a class="examine-btn flexcenter" :href="shareurl">
<div class="examine-btn flexcenter">
查看当前捷报详情
<div class="examine-btn-outside flexcenter">
<svg-icon icon-class="arrowsRoundBlackLeft" class-name="examine-btn-icon"></svg-icon>
</div>
</a>
</div>
</div>
<!-- offer结束 -->
</div>
<div class="card-item shadow" v-for="(item, index) in 7" :key="index">
<div class="card-head flexacenter">
@ -240,6 +191,7 @@
</div>
</div>
<detail-reply :two-comment-data="twoCommentData" :pop-state="popState"></detail-reply>
<coins :coin-config="coinConfig" :pop-state="popState"></coins>
</div>
@ -265,6 +217,11 @@ export default {
}
},
info: {
avatar: "https://oss.gter.net/avatar/97KwEWANd_4DHWiY6VbnSUFSCKroYWFjYQ~~/middle",
likenum: 1
},
islogin: true,
prepareLiskeState: false,
prepareLiskeAnimateState: false,
@ -276,127 +233,15 @@ export default {
ispostOfferLike: null, // 点击点赞提交状态
offerLikesumTimer: 0, // offer点赞累加定时器
offerLikesumAnimateTimer: 0, // offer点赞动画定时器
listlist: [],
tid: 0, // 帖子id
info: {},
type: 0, // 定位帖 1 面经 2 租房帖 3 总结 5 捷报 6
token: "",
offerinfo: {}, // offer捷报详情
offerinfoKey: [{
key: "schoolname",
name: "申请学校"
}, {
key: "degree",
name: "学位"
}, {
key: "professional",
name: "专业"
}, {
key: "project",
name: "项目"
}, {
key: "apply_results",
name: "申请结果"
}, {
key: "semester",
name: "入学学期"
}, {
key: "noticedate",
name: "通知时间"
}, {
key: "useperformanceStr",
name: "使用成绩"
}],
shareurl: "", // 分享链接
collegelist: [],// 总结里的 offer 列表数据
listlist: []
};
},
mounted() {
this.tid = this.$route.query['tid']
this.getDetail()
},
methods: {
// 获取详细信息
getDetail() {
this.$http.post("/api/thread", {
tid: this.tid
}).then(res => {
if (res.code != 200) return
let data = res.data
console.log("data", data);
this.info = data.info
this.type = data.type
this.token = data.token
if (this.type == 6) this.getOfferDetail()
else if (this.type == 5) this.getsummaryDetails()
})
},
// 获取offer详情
getOfferDetail() {
this.$http.post("/api/details", {
token: this.token
}, 'offer').then(res => {
let data = res.data
let offerinfo = data.offerinfo
let useperformanceStr = ""
offerinfo.useperformance && offerinfo.useperformance.forEach((el, index) => {
useperformanceStr += el + (offerinfo.useperformance.length - 1 == index ? '' : '、')
})
offerinfo['useperformanceStr'] = useperformanceStr
offerinfo['schoolname'] = offerinfo.school.name
this.offerinfo = offerinfo
this.shareurl = data.shareurl
})
},
// 获取总结详情
getsummaryDetails() {
this.$http.get(`/api/forum/details`, {
id: this.token
}, 'offer').then(res => {
let data = res.data
// console.log("data", data);
let collegelist = data.collegelist
console.log(collegelist);
// console.log("offercollege", offercollege);
collegelist.forEach((el, index) => {
let useperformanceStr = ""
el.useperformance && el.useperformance.forEach((el, index) => {
console.log(el);
// useperformanceStr += el + (el.useperformance.length - 1 == index ? '' : '、')
})
el['useperformanceStr'] = useperformanceStr
})
// let useperformanceStr = ""
// offerinfo.useperformance && offerinfo.useperformance.forEach((el, index) => {
// useperformanceStr += el + (offerinfo.useperformance.length - 1 == index ? '' : '、')
// })
// offerinfo['useperformanceStr'] = useperformanceStr
console.log(collegelist);
this.collegelist = collegelist
this.shareurl = data.shareurl
})
},
// 点击点赞
// 点击点赞
tapLike() {
@ -771,7 +616,6 @@ export default {
.summary-content-item {
border-radius: .16rem;
border: .0133rem solid rgba(235, 235, 235, 1);
margin-bottom: .32rem;
.summary-offer-head {
justify-content: space-between;
@ -799,38 +643,6 @@ export default {
}
.summary-offer-box {
padding-top: .28rem;
flex-direction: column;
justify-items: center;
.summary-offer-item {
line-height: .6rem;
padding: 0 .24rem;
box-sizing: border-box;
margin-bottom: .2rem;
.summary-offer-key {
width: 1.3rem;
color: #7f7f7f;
font-size: .32rem;
margin-right: .74rem;
}
.summary-offer-value {
font-size: .36rem;
color: #333;
}
}
}
.summary-wenzi {
color: #333;
font-size: .32rem;
line-height: .6rem;
padding: .28rem .24rem;
}
}
}

332
src/views/search/searchResult/SearchResult-冲突-肖荣豪_Win10.vue Executable file
View File

@ -0,0 +1,332 @@
<template>
<div class="container">
<!-- 搜索框 -->
<div class="search-input-box flexacenter">
<div class="search-input flexacenter">
<img class="search-input-icon" src="@/assets/img/headerNav/search.png">
<input class="search-input-input flex1" @keyup.enter="getSearchResult()" placeholder="请输入搜索关键词"
v-model="kw" />
<img class="search-input-cross" @click.stop="emptyKw()" src="@/assets/img/icon/clear.png">
</div>
<div class="search-input-cancel" @click.stop="handCancel">取消</div>
</div>
<!-- 结果数量 -->
<div class="numberResults flexacenter">大约找到 <div class="number">{{ count }}</div> 条结果</div>
<div class="result-box flexacenter" v-if="list.length != 0 || loading">
<div class="result-item flexflex" v-for="(item, index) in list" :key="index">
<div class="result-header one-line">
<div class="result-label">{{ item.forum }}</div>
<!-- <div class="result-title">{{ item.subject }}</div> -->
<div class="result-title" v-html="item.subject"></div>
</div>
<div class="result-content two-lines" v-html="item.message"></div>
<div class="result-info flexacenter flex1">
<div class="user-info flexacenter">
<img class="icon-head" :src="item.avatar">
<div class="user-name">{{ item.author }}</div>
</div>
<div class="item-data flexacenter">
<div class="item-data-item flexacenter">
<svg-icon icon-class="look" class-name="icon-look"></svg-icon>
<div>{{ item.views }}</div>
</div>
<div class="item-data-item flexacenter">
<svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
<div>{{ item.replies }}</div>
</div>
</div>
</div>
<!-- 精华 -->
<div class="rightTop" v-if="item.digest > 0">
<img class="rightTop-img" src="@/assets/img/icon/topRight .png">
<span>精华</span>
</div>
</div>
</div>
<div class="result-empty-box flexcenter shadow" v-else>
<img class="result-empty-icon" src="@/assets/img/icon/empty.png">
</div>
<div v-if="list.length != 0" class="paging flexcenter">
<el-pagination small background layout="prev, pager, next" @current-change="currentChange"
:current-page.sync="page" :page-size="limit" :total="count">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: "SearchResult",
data() {
return {
kw: "",
count: 0,
limit: 4,
nextpage: true,
page: 1,
list: [],
searchResultState: false,
loading: null
}
},
components: {
},
mounted() {
this.kw = this.$route.query.kw
this.getSearchResult()
},
watch: {
searchResultState(val, oldval) {
if (val) this.$startupUnderLoading(this)
else this.$closeUnderLoading(this)
}
},
methods: {
// 处理点击取消的返回上一页
handCancel() {
console.log(this);
if (this.$route.params.page > 1) this.$router.go(-1)
else this.$router.push('/recommend')
},
// 获取搜索结果数据
getSearchResult() {
if (this.searchResultState) return
this.searchResultState = true
this.$http.post("/api/search", {
keyword: this.kw,
page: this.page,
limit: this.limit
}).then(res => {
console.log(res, "res");
let data = res.data
this.list = data.data
this.count = data.count
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
this.searchResultState = false
})
},
// 点击改变页数
currentChange() {
this.getSearchResult()
},
// 点击清空 input 的值
emptyKw() {
this.kw = ""
},
},
}
</script>
<style lang="scss" scoped>
.container {
padding-top: 1.3rem;
padding-bottom: 1.3rem;
.search-input-box {
margin-left: .32rem;
.search-input {
width: 8.2rem;
height: .96rem;
border-radius: 2.56rem;
background: rgba(235, 235, 235, 1);
.search-input-icon,
.search-input-cross {
width: .4rem;
height: .4rem;
}
.search-input-icon {
padding: 0 .4rem;
}
.search-input-cross {
padding-right: .4rem;
}
.search-input-input {
height: 100%;
}
}
.search-input-cancel {
color: #000;
font-size: .36rem;
padding-left: .46rem;
width: .74rem;
}
}
.numberResults {
font-size: .32rem;
color: #555;
// margin-top: .64rem;
margin: .64rem .32rem .48rem;
.number {
color: #000;
font-weight: 650;
margin: 0 .1667rem;
}
}
.result-box {
justify-content: center;
flex-direction: column;
.result-item {
margin-bottom: .32rem;
width: 9.36rem;
height: 3.96rem;
background-color: rgba(255, 255, 255, 1);
border: none;
border-radius: .32rem;
-moz-box-shadow: 0 0 .16rem rgba(0, 0, 0, 0.0784313725490196);
-webkit-box-shadow: 0 0 .16rem rgba(0, 0, 0, 0.08);
box-shadow: 0 0 .16rem rgba(0, 0, 0, .08);
padding: 0.4rem;
box-sizing: border-box;
flex-direction: column;
position: relative;
.result-header {
margin-bottom: .32rem;
.result-label {
font-size: .28rem;
height: .52rem;
line-height: .52rem;
background: rgb(51, 51, 51);
color: #fff;
display: inline-block;
border-radius: .16rem;
padding: 0 .12rem;
margin-right: .12rem;
}
.result-title {
color: #000;
font-size: 0.37333rem;
line-height: 0.65rem;
display: inline;
}
}
.result-content {
line-height: .52rem;
font-size: .3rem;
color: #7f7f7f;
height: 1.04rem;
}
.reply-visible {
font-size: .32rem;
height: 1.04rem;
background: rgba(242, 242, 242, 0.7);
}
.result-info {
align-items: self-end;
justify-content: space-between;
.user-info {
.icon-head {
width: .64rem;
height: .64rem;
border-radius: 50%;
}
.user-name {
font-size: .32rem;
color: #333;
margin-left: .2rem;
}
}
.item-data {
font-size: .28rem;
.item-data-item {
&:last-of-type {
margin-left: .4rem;
}
.icon-look {
width: .4267rem;
height: .18rem;
margin-right: .16rem;
}
.icon-msg {
width: .32rem;
height: .28rem;
margin-right: .16rem;
}
}
}
}
}
}
.paging {
margin-top: .48rem;
::v-deep {
.el-pagination.is-background .el-pager li:not(.disabled).active {
background: rgba(98, 177, 255, 1);
border-radius: 50%;
}
.el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
font-size: .4rem;
}
}
}
.result-empty-box {
height: 70vh;
width: 9.36rem;
background: #fff;
margin: 0 auto;
border-radius: 0.32rem;
.result-empty-icon {
width: 2.04rem;
height: 2.4rem;
}
}
}
</style>

123
src/views/search/searchResult/SearchResult.vue
View File

@ -4,61 +4,64 @@
<div class="search-input-box flexacenter">
<div class="search-input flexacenter">
<img class="search-input-icon" src="@/assets/img/headerNav/search.png">
<input class="search-input-input flex1" @keyup.enter="getSearchResult()" placeholder="请输入搜索关键词"
v-model="kw" />
<img class="search-input-cross" @click.stop="emptyKw()" src="@/assets/img/icon/clear.png">
<input class="search-input-input flex1" placeholder="请输入搜索关键词" />
<img class="search-input-cross" src="@/assets/img/icon/clear.png">
</div>
<div class="search-input-cancel" @click.stop="handCancel">取消</div>
</div>
<!-- 结果数量 -->
<div class="numberResults flexacenter">大约找到 <div class="number">{{ count }}</div> 条结果</div>
<div class="numberResults flexacenter">大约找到 <div class="number">{{ 800 }}</div> 条结果</div>
<div class="result-box flexacenter" v-if="list.length != 0 || loading">
<div class="result-item flexflex" v-for="(item, index) in list" :key="index">
<div class="result-box flexacenter">
<div class="result-item flexflex" v-for="item in 3" :key="item">
<div class="result-header one-line">
<div class="result-label">{{ item.forum }}</div>
<!-- <div class="result-title">{{ item.subject }}</div> -->
<div class="result-title" v-html="item.subject"></div>
<div class="result-label">租房租房租房</div>
<div class="result-title">诚招室友一起合租香港大学附近房子 女生</div>
</div>
<div class="result-content two-lines" v-html="item.message"></div>
<div class="result-content two-lines flex1">
<template v-if="item == 1">
香港理工大学附近求租房，红磡何文田或黄埔附近最好
</template>
<div class="result-info flexacenter flex1">
<div v-else class="reply-visible flexcenter">
回复可见
</div>
</div>
<div class="result-info flexacenter">
<div class="user-info flexacenter">
<img class="icon-head" :src="item.avatar">
<div class="user-name">{{ item.author }}</div>
<svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
<div class="user-name">匿名用户</div>
</div>
<div class="item-data flexacenter">
<div class="item-data-item flexacenter">
<svg-icon icon-class="look" class-name="icon-look"></svg-icon>
<div>{{ item.views }}</div>
<div>1552</div>
</div>
<div class="item-data-item flexacenter">
<svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
<div>{{ item.replies }}</div>
<div>12</div>
</div>
</div>
</div>
<!-- 精华 -->
<div class="rightTop" v-if="item.digest > 0">
<div class="rightTop">
<img class="rightTop-img" src="@/assets/img/icon/topRight .png">
<span>精华</span>
</div>
</div>
</div>
<div class="result-empty-box flexcenter shadow" v-else>
<img class="result-empty-icon" src="@/assets/img/icon/empty.png">
</div>
<div v-if="list.length != 0" class="paging flexcenter">
<el-pagination small background layout="prev, pager, next" @current-change="currentChange"
:current-page.sync="page" :page-size="limit" :total="count">
<div class="paging flexcenter">
<el-pagination small background layout="prev, pager, next" :total="1000">
</el-pagination>
</div>
@ -70,33 +73,13 @@ export default {
name: "SearchResult",
data() {
return {
kw: "",
count: 0,
limit: 4,
nextpage: true,
page: 1,
list: [],
searchResultState: false,
loading: null
}
},
components: {
},
mounted() {
this.kw = this.$route.query.kw
this.getSearchResult()
},
watch: {
searchResultState(val, oldval) {
if (val) this.$startupUnderLoading(this)
else this.$closeUnderLoading(this)
}
},
methods: {
// 处理点击取消的返回上一页
handCancel() {
@ -104,39 +87,6 @@ export default {
if (this.$route.params.page > 1) this.$router.go(-1)
else this.$router.push('/recommend')
},
// 获取搜索结果数据
getSearchResult() {
if (this.searchResultState) return
this.searchResultState = true
this.$http.post("/api/search", {
keyword: this.kw,
page: this.page,
limit: this.limit
}).then(res => {
console.log(res, "res");
let data = res.data
this.list = data.data
this.count = data.count
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
this.searchResultState = false
})
},
// 点击改变页数
currentChange() {
this.getSearchResult()
},
// 点击清空 input 的值
emptyKw() {
this.kw = ""
},
},
}
</script>
@ -144,7 +94,6 @@ export default {
<style lang="scss" scoped>
.container {
padding-top: 1.3rem;
padding-bottom: 1.3rem;
.search-input-box {
margin-left: .32rem;
@ -243,7 +192,6 @@ export default {
line-height: .52rem;
font-size: .3rem;
color: #7f7f7f;
height: 1.04rem;
}
.reply-visible {
@ -253,7 +201,6 @@ export default {
}
.result-info {
align-items: self-end;
justify-content: space-between;
@ -261,7 +208,6 @@ export default {
.icon-head {
width: .64rem;
height: .64rem;
border-radius: 50%;
}
.user-name {
@ -284,13 +230,11 @@ export default {
.icon-look {
width: .4267rem;
height: .18rem;
margin-right: .16rem;
}
.icon-msg {
width: .32rem;
height: .28rem;
margin-right: .16rem;
}
}
}
@ -315,18 +259,5 @@ export default {
}
}
.result-empty-box {
height: 70vh;
width: 9.36rem;
background: #fff;
margin: 0 auto;
border-radius: 0.32rem;
.result-empty-icon {
width: 2.04rem;
height: 2.4rem;
}
}
}
</style>

267
src/views/search/searchResult/SearchResult_DESKTOP-6MA514B_3月-31-231138-2023_Conflict.vue Executable file
View File

@ -0,0 +1,267 @@
<template>
<div class="container">
<!-- 搜索框 -->
<div class="search-input-box flexacenter">
<div class="search-input flexacenter">
<img class="search-input-icon" src="@/assets/img/headerNav/search.png">
<input class="search-input-input flex1" placeholder="请输入搜索关键词" />
<img class="search-input-cross" src="@/assets/img/icon/clear.png">
</div>
<div class="search-input-cancel" @click.stop="handCancel">取消</div>
</div>
<!-- 结果数量 -->
<div class="numberResults flexacenter">大约找到 <div class="number">{{ 800 }}</div> 条结果</div>
<div class="result-box flexacenter">
<div class="result-item flexflex" v-for="item in 3" :key="item">
<div class="result-header one-line">
<div class="result-label">租房租房租房</div>
<div class="result-title">诚招室友一起合租香港大学附近房子 女生</div>
</div>
<div class="result-content two-lines flex1">
<template v-if="item == 1">
香港理工大学附近求租房，红磡何文田或黄埔附近最好
</template>
<div v-else class="reply-visible flexcenter">
回复可见
</div>
</div>
<div class="result-info flexacenter">
<div class="user-info flexacenter">
<svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
<div class="user-name">匿名用户</div>
</div>
<div class="item-data flexacenter">
<div class="item-data-item flexacenter">
<svg-icon icon-class="look" class-name="icon-look"></svg-icon>
<div>1552</div>
</div>
<div class="item-data-item flexacenter">
<svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
<div>12</div>
</div>
</div>
</div>
<!-- 精华 -->
<div class="rightTop">
<img class="rightTop-img" src="@/assets/img/icon/topRight .png">
<span>精华</span>
</div>
</div>
</div>
<div class="paging flexcenter">
<el-pagination small background layout="prev, pager, next" :total="1000">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: "SearchResult",
data() {
return {
}
},
components: {
},
methods: {
// 处理点击取消的返回上一页
handCancel() {
if (this.$route.fullPath != "/") this.$router.go(-1)
else this.$router.push('/recommend')
},
},
}
</script>
<style lang="scss" scoped>
.container {
padding-top: 1.3rem;
.search-input-box {
margin-left: .32rem;
.search-input {
width: 8.2rem;
height: .96rem;
border-radius: 2.56rem;
background: rgba(235, 235, 235, 1);
.search-input-icon,
.search-input-cross {
width: .4rem;
height: .4rem;
}
.search-input-icon {
padding: 0 .4rem;
}
.search-input-cross {
padding-right: .4rem;
}
.search-input-input {
height: 100%;
background: transparent;
border: none;
outline: none;
}
}
.search-input-cancel {
color: #000;
font-size: .36rem;
padding-left: .46rem;
width: .74rem;
}
}
.numberResults {
font-size: .32rem;
color: #555;
// margin-top: .64rem;
margin: .64rem .32rem .48rem;
.number {
color: #000;
font-weight: 650;
margin: 0 .1667rem;
}
}
.result-box {
justify-content: center;
flex-direction: column;
.result-item {
margin-bottom: .32rem;
width: 9.36rem;
height: 3.96rem;
background-color: rgba(255, 255, 255, 1);
border: none;
border-radius: .32rem;
-moz-box-shadow: 0 0 .16rem rgba(0, 0, 0, 0.0784313725490196);
-webkit-box-shadow: 0 0 .16rem rgba(0, 0, 0, 0.08);
box-shadow: 0 0 .16rem rgba(0, 0, 0, .08);
padding: 0.4rem;
box-sizing: border-box;
flex-direction: column;
position: relative;
.result-header {
margin-bottom: .32rem;
.result-label {
font-size: .28rem;
height: .52rem;
line-height: .52rem;
background: rgb(51, 51, 51);
color: #fff;
display: inline-block;
border-radius: .16rem;
padding: 0 .12rem;
margin-right: .12rem;
}
.result-title {
color: #000;
font-size: 0.37333rem;
line-height: 0.65rem;
display: inline;
}
}
.result-content {
line-height: .52rem;
font-size: .3rem;
color: #7f7f7f;
}
.reply-visible {
font-size: .32rem;
height: 1.04rem;
background: rgba(242, 242, 242, 0.7);
}
.result-info {
justify-content: space-between;
.user-info {
.icon-head {
width: .64rem;
height: .64rem;
}
.user-name {
font-size: .32rem;
color: #333;
margin-left: .2rem;
}
}
.item-data {
font-size: .28rem;
.item-data-item {
&:last-of-type {
margin-left: .4rem;
}
.icon-look {
width: .4267rem;
height: .18rem;
}
.icon-msg {
width: .32rem;
height: .28rem;
}
}
}
}
}
}
.paging {
// width: 6.44rem;
margin-top: .48rem;
::v-deep {
.el-pagination.is-background .el-pager li:not(.disabled).active {
background: rgba(98, 177, 255, 1);
border-radius: 50%;
}
.el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
font-size: .4rem;
}
}
}
}
</style>

309
src/views/user/UserIndex-冲突-肖荣豪_Win10.vue Executable file
View File

@ -0,0 +1,309 @@
<template>
<div class="container">
<div class="header flexcenter flexcolumn">
<div class="portrait flexcenter shadow">
<img class="portrait-icom" :src="user.avatar" />
</div>
<div class="header-username flexacenter">{{ user.nickname }}</div>
</div>
<!-- 数据展示板 -->
<div class="operation-box shadow data-presentation flexflex">
<div class="data-presentation-item flex1 flexcenter">
<div class="data-presentation-number">{{ count.prestige }}</div>
<div class="data-presentation-name">声望</div>
</div>
<div class="data-presentation-item flex1 flexcenter">
<div class="data-presentation-number">{{ count.gtercurrency }}</div>
<div class="data-presentation-name">寄托币</div>
</div>
<div class="data-presentation-item flex1 flexcenter">
<div class="data-presentation-number">{{ count.digest }}</div>
<div class="data-presentation-name">精华</div>
</div>
</div>
<div class="operation-box shadow">
<div class="operation-item flexacenter">
<div class="operation-left flexacenter">
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/information.png">消息
</div>
<div class="operation-right flexacenter">
<div v-if="user.messagenum == 0" class="operation-data flexcenter">{{ count.message }}</div>
<div v-else class="unread-info flexcenter">{{ user.messagenum }}</div>
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
<div class="operation-item flexacenter">
<div class="operation-left flexacenter">
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/collect.png">收藏
</div>
<div class="operation-right flexacenter">
<div class="operation-data flexcenter">{{ count.fav }}</div>
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
<div class="operation-item flexacenter">
<div class="operation-left flexacenter">
<img class="operation-icom" src="@/assets/img/user/postmessage.png" />发帖
</div>
<div class="operation-right flexacenter">
<div class="operation-data flexcenter">{{ count.post }}</div>
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
<div class="operation-item flexacenter">
<div class="operation-left flexacenter">
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/replymessage.png" />回帖
</div>
<div class="operation-right flexacenter">
<div class="operation-data flexcenter">{{ count.reply }}</div>
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
</div>
<div class="operation-box shadow">
<div class="operation-item flexacenter">
<div class="operation-left flexacenter">
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/personaldata.png">个人资料
</div>
<div class="operation-right flexacenter">
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
<div class="operation-item flexacenter">
<div class="operation-left flexacenter">
<img class="operation-icom" src="@/assets/img/user/avatarsetting.png" />设置头像
</div>
<div class="operation-right flexacenter">
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
<div class="operation-item flexacenter">
<div class="operation-left flexacenter">
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/mystatus.png" />我的状态
</div>
<div class="operation-right flexacenter">
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
<div class="operation-item flexacenter">
<div class="operation-left flexacenter">
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/changepassword.png" />修改密码
</div>
<div class="operation-right flexacenter">
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
<div class="operation-item flexacenter">
<div class="operation-left flexacenter">
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/bindemail.png" />绑定邮箱
</div>
<div class="operation-right flexacenter">
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
<div class="operation-item flexacenter">
<div class="operation-left flexacenter">
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/bindmobile.png" />绑定手机
</div>
<div class="operation-right flexacenter">
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
<div class="operation-item flexacenter">
<div class="operation-left flexacenter">
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/bindingthird-party .png" />绑定第三方账号
</div>
<div class="operation-right flexacenter">
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
<div class="operation-item flexacenter">
<div class="operation-left flexacenter">
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/visithomepage.png" />浏览个人主页
</div>
<div class="operation-right flexacenter">
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
</div>
<div class="log-out" @click="logOut()">退出登录</div>
</div>
</template>
<script>
export default {
name: 'userIndex',
data() {
return {
user: {
avatar: "",
nickname: "",
messagenum: 0
},
count: {},
};
},
mounted() {
this.init()
},
methods: {
init() {
this.$http.post("/api/user", "").then(res => {
console.log(res, "res");
let data = res.data
this.count = data.count
this.user = data.user
console.log(this.count);
})
},
// 点击退出登录
logOut() {
console.log("点击退出登录");
},
},
};
</script>
<style lang="scss" scoped>
.container {
padding-top: 1.3rem;
.header {
padding: 1rem 0 .8rem;
.portrait {
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: #fff;
position: relative;
}
.portrait-icom {
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
}
.header-username {
color: #000;
font-size: .48rem;
line-height: normal;
margin-top: .24rem;
font-weight: 650;
}
}
.operation-box {
background-color: #fff;
margin: 0 .2933rem .4rem;
border-radius: .4rem;
.operation-item {
height: 1.8rem;
justify-content: space-between;
padding: 0 .4rem;
&:not(:first-of-type) {
border-top: .0133rem dotted #d7d7d7;
}
.operation-left {
color: #333333;
font-size: .36rem;
line-height: .6rem;
}
.operation-icom {
width: .48rem;
margin-right: .32rem;
}
.operation-data {
background-color: rgba(246, 246, 246, 1);
border-radius: .64rem;
font-size: .28rem;
color: #555555;
min-width: .9rem;
text-align: center;
padding: 0 .2rem;
box-sizing: border-box;
}
.unread-info {
background: rgba(253, 63, 93, 1);
// width: .42rem;
height: .42rem;
border-radius: .64rem;
color: #fff;
font-size: .28rem;
text-align: center;
padding: 0 0.1rem;
box-sizing: border-box;
}
.operation-right-icom {
width: .12rem;
height: .22rem;
margin-left: .2rem;
}
}
&.data-presentation {
padding-top: .4rem;
padding-bottom: .4rem;
.data-presentation-item {
flex-direction: column;
&:not(:last-of-type) {
border-right: .0133rem solid #ebebeb;
}
.data-presentation-number {
color: #000;
line-height: .6rem;
font-size: .4rem;
font-weight: 900;
}
.data-presentation-name {
color: #333333;
line-height: .6rem;
font-size: .32rem;
}
}
}
}
.log-out {
font-size: .36rem;
line-height: .6rem;
color: #555555;
border-bottom: .0133rem solid #797979;
width: 1.46rem;
margin: .6rem auto 1rem;
}
}
</style>

64
src/views/user/UserIndex.vue
View File

@ -2,24 +2,24 @@
<div class="container">
<div class="header flexcenter flexcolumn">
<div class="portrait flexcenter shadow">
<img class="portrait-icom" :src="user.avatar" />
<img class="portrait-icom" :src="info.avatar" />
</div>
<div class="header-username flexacenter">{{ user.nickname }}</div>
<div class="header-username flexacenter">{{ info.nickname }}</div>
</div>
<!-- 数据展示板 -->
<div class="operation-box shadow data-presentation flexflex">
<div class="data-presentation-item flex1 flexcenter">
<div class="data-presentation-number">{{ count.prestige }}</div>
<div class="data-presentation-number">279</div>
<div class="data-presentation-name">声望</div>
</div>
<div class="data-presentation-item flex1 flexcenter">
<div class="data-presentation-number">{{ count.gtercurrency }}</div>
<div class="data-presentation-name">寄托币</div>
<div class="data-presentation-number">279</div>
<div class="data-presentation-name">声望</div>
</div>
<div class="data-presentation-item flex1 flexcenter">
<div class="data-presentation-number">{{ count.digest }}</div>
<div class="data-presentation-name">精华</div>
<div class="data-presentation-number">279</div>
<div class="data-presentation-name">声望</div>
</div>
</div>
@ -29,8 +29,8 @@
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/information.png">消息
</div>
<div class="operation-right flexacenter">
<div v-if="user.messagenum == 0" class="operation-data flexcenter">{{ count.message }}</div>
<div v-else class="unread-info flexcenter">{{ user.messagenum }}</div>
<div v-if="false" class="operation-data flexcenter">{{ count.collect }}</div>
<div v-else class="unread-info flexcenter">{{ 1 }}</div>
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
@ -40,7 +40,7 @@
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/collect.png">收藏
</div>
<div class="operation-right flexacenter">
<div class="operation-data flexcenter">{{ count.fav }}</div>
<div class="operation-data flexcenter">{{ count.creation }}</div>
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
@ -49,7 +49,7 @@
<img class="operation-icom" src="@/assets/img/user/postmessage.png" />发帖
</div>
<div class="operation-right flexacenter">
<div class="operation-data flexcenter">{{ count.post }}</div>
<div class="operation-data flexcenter">{{ count.likearticle }}</div>
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
@ -58,7 +58,7 @@
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/replymessage.png" />回帖
</div>
<div class="operation-right flexacenter">
<div class="operation-data flexcenter">{{ count.reply }}</div>
<div class="operation-data flexcenter">{{ count.comment }}</div>
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
@ -70,6 +70,7 @@
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/personaldata.png">个人资料
</div>
<div class="operation-right flexacenter">
<div class="operation-data flexcenter">{{ count.creation }}</div>
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
@ -78,6 +79,7 @@
<img class="operation-icom" src="@/assets/img/user/avatarsetting.png" />设置头像
</div>
<div class="operation-right flexacenter">
<div class="operation-data flexcenter">{{ count.likearticle }}</div>
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
@ -86,6 +88,7 @@
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/mystatus.png" />我的状态
</div>
<div class="operation-right flexacenter">
<div class="operation-data flexcenter">{{ count.comment }}</div>
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
@ -94,6 +97,7 @@
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/changepassword.png" />修改密码
</div>
<div class="operation-right flexacenter">
<div class="operation-data flexcenter">{{ count.comment }}</div>
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
@ -102,6 +106,7 @@
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/bindemail.png" />绑定邮箱
</div>
<div class="operation-right flexacenter">
<div class="operation-data flexcenter">{{ count.comment }}</div>
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
@ -110,6 +115,7 @@
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/bindmobile.png" />绑定手机
</div>
<div class="operation-right flexacenter">
<div class="operation-data flexcenter">{{ count.comment }}</div>
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
@ -118,6 +124,7 @@
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/bindingthird-party .png" />绑定第三方账号
</div>
<div class="operation-right flexacenter">
<div class="operation-data flexcenter">{{ count.comment }}</div>
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
@ -126,6 +133,7 @@
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/visithomepage.png" />浏览个人主页
</div>
<div class="operation-right flexacenter">
<div class="operation-data flexcenter">{{ count.comment }}</div>
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
</div>
</div>
@ -133,7 +141,7 @@
</div>
<div class="log-out" @click="logOut()">退出登录</div>
<div class="log-out">退出登录</div>
</div>
</template>
@ -144,36 +152,26 @@ export default {
data() {
return {
user: {
avatar: "",
nickname: "",
messagenum: 0
info: {
avatar: "https://oss.gter.net/avatar/97KwEWANd_4DHWiY6VbnSUFSCKroYWFjYQ~~/middle",
nickname: "Ada.Wu"
},
count: {
collect: 10,
creation: 10,
likearticle: 10,
comment: 10,
},
count: {},
};
},
mounted() {
this.init()
},
methods: {
init() {
this.$http.post("/api/user", "").then(res => {
console.log(res, "res");
let data = res.data
this.count = data.count
this.user = data.user
console.log(this.count);
})
},
// 点击退出登录
logOut() {
console.log("点击退出登录");
},
},
};
</script>