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
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

244
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" />
@@ -34,101 +34,52 @@
<div class="summary-content">
<div class="summary-content-item">
<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"
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>
</div>
<!-- offer结束 -->
<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>