a1300399510@qq.com 提交于 2023/04/04 -14:20:01
This commit is contained in:
parent
ee5a2cd2ea
commit
70633c22cb
199
src/components/SearchBox-冲突-肖荣豪_Win10.vue
Executable file
199
src/components/SearchBox-冲突-肖荣豪_Win10.vue
Executable 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>
|
||||||
@ -30,7 +30,9 @@
|
|||||||
<div class="search-content">
|
<div class="search-content">
|
||||||
<div class="search-text">热门搜索</div>
|
<div class="search-text">热门搜索</div>
|
||||||
<div class="search-label">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -47,7 +49,7 @@ export default {
|
|||||||
showClear: false, //显示清除按钮
|
showClear: false, //显示清除按钮
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: ["issearch", "hotSearchkeywords"],
|
props: ["issearch"],
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
collapseClick() {
|
collapseClick() {
|
||||||
@ -72,12 +74,7 @@ export default {
|
|||||||
// 清空文本框
|
// 清空文本框
|
||||||
clearText() {
|
clearText() {
|
||||||
this.searchText = ""
|
this.searchText = ""
|
||||||
},
|
}
|
||||||
|
|
||||||
// 跳转搜索结果
|
|
||||||
toSearchResult(kw){
|
|
||||||
this.$router.push(`/searchResult?kw=${kw}`)
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
if (this.searchText.length > 0) this.showClear = true
|
if (this.searchText.length > 0) this.showClear = true
|
||||||
|
|||||||
44
src/main-冲突-肖荣豪_Win10.js
Executable file
44
src/main-冲突-肖荣豪_Win10.js
Executable 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')
|
||||||
@ -4,9 +4,8 @@ import router from './router'
|
|||||||
import store from './store'
|
import store from './store'
|
||||||
import ElementUI, { Message, Pagination } from 'element-ui';
|
import ElementUI, { Message, Pagination } from 'element-ui';
|
||||||
import 'element-ui/lib/theme-chalk/index.css';
|
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 http from "@/utils/request"
|
||||||
import hintBox from '@/components/Hintbox'
|
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
@ -22,9 +21,6 @@ Vue.prototype.$pageStop = pageStop // 页面禁止滑动
|
|||||||
Vue.prototype.$pageMove = pageMove // 页面可以滑动
|
Vue.prototype.$pageMove = pageMove // 页面可以滑动
|
||||||
Vue.prototype.$Message = Message // 消息提示框
|
Vue.prototype.$Message = Message // 消息提示框
|
||||||
Vue.prototype.$copy = copy // 复制
|
Vue.prototype.$copy = copy // 复制
|
||||||
Vue.prototype.$startupUnderLoading = startupUnderLoading // 开启加载提示 element的
|
|
||||||
Vue.prototype.$closeUnderLoading = closeUnderLoading // 关闭加载提示 element的
|
|
||||||
Vue.prototype.$formattedDate = formattedDate // 时间戳转格式
|
|
||||||
|
|
||||||
//svg文件引入
|
//svg文件引入
|
||||||
import './icons'
|
import './icons'
|
||||||
|
|||||||
75
src/utils/common-冲突-肖荣豪_Win10.js
Executable file
75
src/utils/common-冲突-肖荣豪_Win10.js
Executable 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 }
|
||||||
@ -41,35 +41,10 @@ function copy(value, message) {
|
|||||||
// 向用户显示成功消息
|
// 向用户显示成功消息
|
||||||
// 从文档中删除动态创建的输入元素
|
// 从文档中删除动态创建的输入元素
|
||||||
copyInput.remove();
|
copyInput.remove();
|
||||||
|
|
||||||
if (message) this.$message.success(message);
|
if (message) this.$message.success(message);
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export { skipUrl, pageStop, pageMove, goTologin, copy }
|
||||||
// 启动加载中
|
|
||||||
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 }
|
|
||||||
1240
src/views/detail/detailIndex-冲突-肖荣豪_Win10.vue
Executable file
1240
src/views/detail/detailIndex-冲突-肖荣豪_Win10.vue
Executable file
File diff suppressed because it is too large
Load Diff
@ -4,24 +4,24 @@
|
|||||||
<div class="detail-section">版块：<span class="section-name">香港澳门台湾留学申请</span></div>
|
<div class="detail-section">版块：<span class="section-name">香港澳门台湾留学申请</span></div>
|
||||||
<div class="detail-data flexacenter">
|
<div class="detail-data flexacenter">
|
||||||
<div class="detail-data-item 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>
|
||||||
<div class="detail-data-item flexacenter">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="detail-title-box">
|
<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-jinghua flexcenter">精华</div>
|
||||||
<div class="detail-title-item detail-title-label flexcenter" v-if="info.typename">{{ info.typename }}</div>
|
<div class="detail-title-item detail-title-label flexcenter">生活贴士</div>
|
||||||
{{ info.subject }}
|
香港永久居民的申请步骤和过程
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- -->
|
<!-- -->
|
||||||
<div class="card flexcenter">
|
<div class="card flexcenter">
|
||||||
<!-- 总结开始 -->
|
<!-- 总结 -->
|
||||||
<div class="card-item shadow" v-if="type == 5">
|
<div class="card-item shadow">
|
||||||
<div class="card-head flexacenter">
|
<div class="card-head flexacenter">
|
||||||
<img class="card-head-icon"
|
<img class="card-head-icon"
|
||||||
src="https://axure-file.lanhuapp.com/md516b251fb-9cfa-46fc-a9b6-2a41a7b4dc37__3ad73406ff4bc8b138dafc6dcbf1a635.svg" />
|
src="https://axure-file.lanhuapp.com/md516b251fb-9cfa-46fc-a9b6-2a41a7b4dc37__3ad73406ff4bc8b138dafc6dcbf1a635.svg" />
|
||||||
@ -34,101 +34,52 @@
|
|||||||
<div class="summary-content">
|
<div class="summary-content">
|
||||||
<div class="summary-content-item">
|
<div class="summary-content-item">
|
||||||
<div class="summary-offer-head flexacenter">
|
<div class="summary-offer-head flexacenter">
|
||||||
<span class="summary-offer-head-title">Offer 1</span>
|
<span class="summary-offer-head-title">Offer1</span>
|
||||||
<span class="flexacenter">详情<svg-icon icon-class="arrowsBlackLeft"
|
<span class="flexacenter">详情<svg-icon icon-class="arrowsBlackLeft"
|
||||||
class-name="summary-offer-head-icon"></svg-icon></span>
|
class-name="summary-offer-head-icon"></svg-icon></span>
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
|
|
||||||
<div class="examine-btn flexcenter">
|
<div class="examine-btn flexcenter">
|
||||||
查看当前总结详情
|
查看当前捷报详情
|
||||||
<div class="examine-btn-outside flexcenter">
|
<div class="examine-btn-outside flexcenter">
|
||||||
<svg-icon icon-class="arrowsRoundBlackLeft" class-name="examine-btn-icon"></svg-icon>
|
<svg-icon icon-class="arrowsRoundBlackLeft" class-name="examine-btn-icon"></svg-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 总结结束 -->
|
|
||||||
|
|
||||||
<!-- offer -->
|
<!-- offer -->
|
||||||
<div class="card-item shadow" v-if="type == 6">
|
<div class="card-item shadow">
|
||||||
<div class="card-head flexacenter">
|
<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-content flex1 flexflex">
|
||||||
<div class="card-head-name flexflex">{{ info.author }}</div>
|
<div class="card-head-name flexflex">闫旭Mike</div>
|
||||||
<div class="card-head-time">{{ $formattedDate(info.dateline) }}</div>
|
<div class="card-head-time">2022-7-6 14:56</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-head-fool">楼主</div>
|
<div class="card-head-fool">楼主</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="offer-content">
|
<div class="offer-content">
|
||||||
<div class="offer-content-box">
|
<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-key">申请专业</div>
|
||||||
<div class="offer-content-value">韦仕敦大学</div>
|
<div class="offer-content-value">韦仕敦大学</div>
|
||||||
</div> -->
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a class="examine-btn flexcenter" :href="shareurl">
|
<div class="examine-btn flexcenter">
|
||||||
查看当前捷报详情
|
查看当前捷报详情
|
||||||
<div class="examine-btn-outside flexcenter">
|
<div class="examine-btn-outside flexcenter">
|
||||||
<svg-icon icon-class="arrowsRoundBlackLeft" class-name="examine-btn-icon"></svg-icon>
|
<svg-icon icon-class="arrowsRoundBlackLeft" class-name="examine-btn-icon"></svg-icon>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- offer结束 -->
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="card-item shadow" v-for="(item, index) in 7" :key="index">
|
<div class="card-item shadow" v-for="(item, index) in 7" :key="index">
|
||||||
<div class="card-head flexacenter">
|
<div class="card-head flexacenter">
|
||||||
@ -240,6 +191,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<detail-reply :two-comment-data="twoCommentData" :pop-state="popState"></detail-reply>
|
<detail-reply :two-comment-data="twoCommentData" :pop-state="popState"></detail-reply>
|
||||||
<coins :coin-config="coinConfig" :pop-state="popState"></coins>
|
<coins :coin-config="coinConfig" :pop-state="popState"></coins>
|
||||||
</div>
|
</div>
|
||||||
@ -265,6 +217,11 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
info: {
|
||||||
|
avatar: "https://oss.gter.net/avatar/97KwEWANd_4DHWiY6VbnSUFSCKroYWFjYQ~~/middle",
|
||||||
|
likenum: 1
|
||||||
|
},
|
||||||
|
|
||||||
islogin: true,
|
islogin: true,
|
||||||
prepareLiskeState: false,
|
prepareLiskeState: false,
|
||||||
prepareLiskeAnimateState: false,
|
prepareLiskeAnimateState: false,
|
||||||
@ -276,127 +233,15 @@ export default {
|
|||||||
ispostOfferLike: null, // 点击点赞提交状态
|
ispostOfferLike: null, // 点击点赞提交状态
|
||||||
offerLikesumTimer: 0, // offer点赞累加定时器
|
offerLikesumTimer: 0, // offer点赞累加定时器
|
||||||
offerLikesumAnimateTimer: 0, // offer点赞动画定时器
|
offerLikesumAnimateTimer: 0, // offer点赞动画定时器
|
||||||
listlist: [],
|
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 列表数据
|
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.tid = this.$route.query['tid']
|
|
||||||
this.getDetail()
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
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() {
|
tapLike() {
|
||||||
@ -771,7 +616,6 @@ export default {
|
|||||||
.summary-content-item {
|
.summary-content-item {
|
||||||
border-radius: .16rem;
|
border-radius: .16rem;
|
||||||
border: .0133rem solid rgba(235, 235, 235, 1);
|
border: .0133rem solid rgba(235, 235, 235, 1);
|
||||||
margin-bottom: .32rem;
|
|
||||||
|
|
||||||
.summary-offer-head {
|
.summary-offer-head {
|
||||||
justify-content: space-between;
|
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
332
src/views/search/searchResult/SearchResult-冲突-肖荣豪_Win10.vue
Executable 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>
|
||||||
@ -4,61 +4,64 @@
|
|||||||
<div class="search-input-box flexacenter">
|
<div class="search-input-box flexacenter">
|
||||||
<div class="search-input flexacenter">
|
<div class="search-input flexacenter">
|
||||||
<img class="search-input-icon" src="@/assets/img/headerNav/search.png">
|
<img class="search-input-icon" src="@/assets/img/headerNav/search.png">
|
||||||
<input class="search-input-input flex1" @keyup.enter="getSearchResult()" placeholder="请输入搜索关键词"
|
<input class="search-input-input flex1" placeholder="请输入搜索关键词" />
|
||||||
v-model="kw" />
|
<img class="search-input-cross" src="@/assets/img/icon/clear.png">
|
||||||
<img class="search-input-cross" @click.stop="emptyKw()" src="@/assets/img/icon/clear.png">
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="search-input-cancel" @click.stop="handCancel">取消</div>
|
<div class="search-input-cancel" @click.stop="handCancel">取消</div>
|
||||||
</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-box flexacenter">
|
||||||
<div class="result-item flexflex" v-for="(item, index) in list" :key="index">
|
<div class="result-item flexflex" v-for="item in 3" :key="item">
|
||||||
<div class="result-header one-line">
|
<div class="result-header one-line">
|
||||||
<div class="result-label">{{ item.forum }}</div>
|
<div class="result-label">租房租房租房</div>
|
||||||
<!-- <div class="result-title">{{ item.subject }}</div> -->
|
<div class="result-title">诚招室友一起合租香港大学附近房子 女生</div>
|
||||||
<div class="result-title" v-html="item.subject"></div>
|
|
||||||
</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">
|
<div class="user-info flexacenter">
|
||||||
<img class="icon-head" :src="item.avatar">
|
<svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
|
||||||
<div class="user-name">{{ item.author }}</div>
|
<div class="user-name">匿名用户</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-data flexacenter">
|
<div class="item-data flexacenter">
|
||||||
<div class="item-data-item flexacenter">
|
<div class="item-data-item flexacenter">
|
||||||
<svg-icon icon-class="look" class-name="icon-look"></svg-icon>
|
<svg-icon icon-class="look" class-name="icon-look"></svg-icon>
|
||||||
<div>{{ item.views }}</div>
|
<div>1552</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-data-item flexacenter">
|
<div class="item-data-item flexacenter">
|
||||||
<svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
|
<svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
|
||||||
<div>{{ item.replies }}</div>
|
<div>12</div>
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<img class="rightTop-img" src="@/assets/img/icon/topRight .png">
|
||||||
<span>精华</span>
|
<span>精华</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="result-empty-box flexcenter shadow" v-else>
|
<div class="paging flexcenter">
|
||||||
<img class="result-empty-icon" src="@/assets/img/icon/empty.png">
|
<el-pagination small background layout="prev, pager, next" :total="1000">
|
||||||
</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>
|
</el-pagination>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -70,33 +73,13 @@ export default {
|
|||||||
name: "SearchResult",
|
name: "SearchResult",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
kw: "",
|
|
||||||
count: 0,
|
|
||||||
limit: 4,
|
|
||||||
nextpage: true,
|
|
||||||
page: 1,
|
|
||||||
list: [],
|
|
||||||
searchResultState: false,
|
|
||||||
loading: null
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.kw = this.$route.query.kw
|
|
||||||
this.getSearchResult()
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
searchResultState(val, oldval) {
|
|
||||||
if (val) this.$startupUnderLoading(this)
|
|
||||||
else this.$closeUnderLoading(this)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
// 处理点击取消的返回上一页
|
// 处理点击取消的返回上一页
|
||||||
handCancel() {
|
handCancel() {
|
||||||
@ -104,39 +87,6 @@ export default {
|
|||||||
if (this.$route.params.page > 1) this.$router.go(-1)
|
if (this.$route.params.page > 1) this.$router.go(-1)
|
||||||
else this.$router.push('/recommend')
|
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>
|
</script>
|
||||||
@ -144,7 +94,6 @@ export default {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.container {
|
.container {
|
||||||
padding-top: 1.3rem;
|
padding-top: 1.3rem;
|
||||||
padding-bottom: 1.3rem;
|
|
||||||
|
|
||||||
.search-input-box {
|
.search-input-box {
|
||||||
margin-left: .32rem;
|
margin-left: .32rem;
|
||||||
@ -243,7 +192,6 @@ export default {
|
|||||||
line-height: .52rem;
|
line-height: .52rem;
|
||||||
font-size: .3rem;
|
font-size: .3rem;
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
height: 1.04rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.reply-visible {
|
.reply-visible {
|
||||||
@ -253,7 +201,6 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.result-info {
|
.result-info {
|
||||||
align-items: self-end;
|
|
||||||
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
@ -261,7 +208,6 @@ export default {
|
|||||||
.icon-head {
|
.icon-head {
|
||||||
width: .64rem;
|
width: .64rem;
|
||||||
height: .64rem;
|
height: .64rem;
|
||||||
border-radius: 50%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-name {
|
.user-name {
|
||||||
@ -284,13 +230,11 @@ export default {
|
|||||||
.icon-look {
|
.icon-look {
|
||||||
width: .4267rem;
|
width: .4267rem;
|
||||||
height: .18rem;
|
height: .18rem;
|
||||||
margin-right: .16rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-msg {
|
.icon-msg {
|
||||||
width: .32rem;
|
width: .32rem;
|
||||||
height: .28rem;
|
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>
|
</style>
|
||||||
|
|||||||
@ -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
309
src/views/user/UserIndex-冲突-肖荣豪_Win10.vue
Executable 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>
|
||||||
@ -2,24 +2,24 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="header flexcenter flexcolumn">
|
<div class="header flexcenter flexcolumn">
|
||||||
<div class="portrait flexcenter shadow">
|
<div class="portrait flexcenter shadow">
|
||||||
<img class="portrait-icom" :src="user.avatar" />
|
<img class="portrait-icom" :src="info.avatar" />
|
||||||
</div>
|
</div>
|
||||||
<div class="header-username flexacenter">{{ user.nickname }}</div>
|
<div class="header-username flexacenter">{{ info.nickname }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 数据展示板 -->
|
<!-- 数据展示板 -->
|
||||||
<div class="operation-box shadow data-presentation flexflex">
|
<div class="operation-box shadow data-presentation flexflex">
|
||||||
<div class="data-presentation-item flex1 flexcenter">
|
<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 class="data-presentation-name">声望</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-presentation-item flex1 flexcenter">
|
<div class="data-presentation-item flex1 flexcenter">
|
||||||
<div class="data-presentation-number">{{ count.gtercurrency }}</div>
|
<div class="data-presentation-number">279</div>
|
||||||
<div class="data-presentation-name">寄托币</div>
|
<div class="data-presentation-name">声望</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-presentation-item flex1 flexcenter">
|
<div class="data-presentation-item flex1 flexcenter">
|
||||||
<div class="data-presentation-number">{{ count.digest }}</div>
|
<div class="data-presentation-number">279</div>
|
||||||
<div class="data-presentation-name">精华</div>
|
<div class="data-presentation-name">声望</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -29,8 +29,8 @@
|
|||||||
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/information.png">消息
|
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/information.png">消息
|
||||||
</div>
|
</div>
|
||||||
<div class="operation-right flexacenter">
|
<div class="operation-right flexacenter">
|
||||||
<div v-if="user.messagenum == 0" class="operation-data flexcenter">{{ count.message }}</div>
|
<div v-if="false" class="operation-data flexcenter">{{ count.collect }}</div>
|
||||||
<div v-else class="unread-info flexcenter">{{ user.messagenum }}</div>
|
<div v-else class="unread-info flexcenter">{{ 1 }}</div>
|
||||||
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
|
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -40,7 +40,7 @@
|
|||||||
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/collect.png">收藏
|
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/collect.png">收藏
|
||||||
</div>
|
</div>
|
||||||
<div class="operation-right flexacenter">
|
<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>
|
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -49,7 +49,7 @@
|
|||||||
<img class="operation-icom" src="@/assets/img/user/postmessage.png" />发帖
|
<img class="operation-icom" src="@/assets/img/user/postmessage.png" />发帖
|
||||||
</div>
|
</div>
|
||||||
<div class="operation-right flexacenter">
|
<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>
|
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -58,7 +58,7 @@
|
|||||||
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/replymessage.png" />回帖
|
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/replymessage.png" />回帖
|
||||||
</div>
|
</div>
|
||||||
<div class="operation-right flexacenter">
|
<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>
|
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -70,6 +70,7 @@
|
|||||||
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/personaldata.png">个人资料
|
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/personaldata.png">个人资料
|
||||||
</div>
|
</div>
|
||||||
<div class="operation-right flexacenter">
|
<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>
|
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -78,6 +79,7 @@
|
|||||||
<img class="operation-icom" src="@/assets/img/user/avatarsetting.png" />设置头像
|
<img class="operation-icom" src="@/assets/img/user/avatarsetting.png" />设置头像
|
||||||
</div>
|
</div>
|
||||||
<div class="operation-right flexacenter">
|
<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>
|
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -86,6 +88,7 @@
|
|||||||
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/mystatus.png" />我的状态
|
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/mystatus.png" />我的状态
|
||||||
</div>
|
</div>
|
||||||
<div class="operation-right flexacenter">
|
<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>
|
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -94,6 +97,7 @@
|
|||||||
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/changepassword.png" />修改密码
|
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/changepassword.png" />修改密码
|
||||||
</div>
|
</div>
|
||||||
<div class="operation-right flexacenter">
|
<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>
|
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -102,6 +106,7 @@
|
|||||||
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/bindemail.png" />绑定邮箱
|
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/bindemail.png" />绑定邮箱
|
||||||
</div>
|
</div>
|
||||||
<div class="operation-right flexacenter">
|
<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>
|
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -110,6 +115,7 @@
|
|||||||
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/bindmobile.png" />绑定手机
|
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/bindmobile.png" />绑定手机
|
||||||
</div>
|
</div>
|
||||||
<div class="operation-right flexacenter">
|
<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>
|
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -118,6 +124,7 @@
|
|||||||
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/bindingthird-party .png" />绑定第三方账号
|
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/bindingthird-party .png" />绑定第三方账号
|
||||||
</div>
|
</div>
|
||||||
<div class="operation-right flexacenter">
|
<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>
|
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -126,6 +133,7 @@
|
|||||||
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/visithomepage.png" />浏览个人主页
|
<img class="operation-icom" mode="widthFix" src="@/assets/img/user/visithomepage.png" />浏览个人主页
|
||||||
</div>
|
</div>
|
||||||
<div class="operation-right flexacenter">
|
<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>
|
<svg-icon icon-class="arrowsLeft" class-name="operation-right-icom"></svg-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -133,7 +141,7 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="log-out" @click="logOut()">退出登录</div>
|
<div class="log-out">退出登录</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -144,36 +152,26 @@ export default {
|
|||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
user: {
|
info: {
|
||||||
avatar: "",
|
avatar: "https://oss.gter.net/avatar/97KwEWANd_4DHWiY6VbnSUFSCKroYWFjYQ~~/middle",
|
||||||
nickname: "",
|
nickname: "Ada.Wu"
|
||||||
messagenum: 0
|
},
|
||||||
|
count: {
|
||||||
|
collect: 10,
|
||||||
|
creation: 10,
|
||||||
|
likearticle: 10,
|
||||||
|
comment: 10,
|
||||||
},
|
},
|
||||||
count: {},
|
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.init()
|
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
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>
|
</script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user