From f16695ec501a34b63f3c0f55b0765987a26ebfa8 Mon Sep 17 00:00:00 2001
From: XiaoMo <a1300399510@qq.com>
Date: Mon, 3 Apr 2023 14:20:10 +0800
Subject: [PATCH] =?UTF-8?q?a1300399510@qq.com=20=E6=8F=90=E4=BA=A4?=
=?UTF-8?q?=E4=BA=8E=202023/04/03=20-14:20:01?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/HeaderNav.vue | 6 +-
src/components/SearchBox.vue | 13 +-
.../search/searchResult/SearchResult.vue | 9 +-
...OP-6MA514B_3月-31-231138-2023_Conflict.vue | 267 ------------------
4 files changed, 17 insertions(+), 278 deletions(-)
delete mode 100755 src/views/search/searchResult/SearchResult_DESKTOP-6MA514B_3月-31-231138-2023_Conflict.vue
diff --git a/src/components/HeaderNav.vue b/src/components/HeaderNav.vue
index 5de69b9..1e22365 100755
--- a/src/components/HeaderNav.vue
+++ b/src/components/HeaderNav.vue
@@ -10,7 +10,7 @@
</div>
<div class="right flexacenter">
- <search-box slot="search" :issearch="issearch"></search-box>
+ <search-box slot="search" :hot-searchkeywords="hotSearchkeywords" :issearch="issearch"></search-box>
<div class="head-more flexcenter" @click="headMorePopState = !headMorePopState">
<div class="red-dot" v-if="false"></div>
@@ -119,11 +119,9 @@ export default {
this.$http.post("/api/index",).then((res) => {
if (res.code != 200) return;
// this.prototype.userInfo = res.data.user
- // this.userInfo = res.data.user;
+ this.userInfo = res.data.user;
this.islogin = res.data.user.uid > 0 ? true : false;
this.hotSearchkeywords = res.data.hotSearchkeywords
- this.prototype.userInfo = res.data.user
- console.log(this.prototype.userInfo, "userInfo");
}).catch(err => {
this.$message.error(err.message)
diff --git a/src/components/SearchBox.vue b/src/components/SearchBox.vue
index 29de112..8c121fb 100755
--- a/src/components/SearchBox.vue
+++ b/src/components/SearchBox.vue
@@ -30,9 +30,7 @@
<div class="search-content">
<div class="search-text">热门搜索</div>
<div class="search-label">
- <span>Bocconi</span>
- <span>Bocconi</span>
- <span>Bocconi</span>
+ <span v-for="(item, index) in hotSearchkeywords" :key="index" @click="toSearchResult(item)">{{ item }}</span>
</div>
</div>
</div>
@@ -49,7 +47,7 @@ export default {
showClear: false, //显示清除按钮
}
},
- props: ["issearch"],
+ props: ["issearch", "hotSearchkeywords"],
methods: {
collapseClick() {
@@ -74,7 +72,12 @@ export default {
// 清空文本框
clearText() {
this.searchText = ""
- }
+ },
+
+ // 跳转搜索结果
+ toSearchResult(kw){
+ this.$router.push(`/searchResult?kw=${kw}`)
+ },
},
mounted() {
if (this.searchText.length > 0) this.showClear = true
diff --git a/src/views/search/searchResult/SearchResult.vue b/src/views/search/searchResult/SearchResult.vue
index 695b1af..6d550af 100755
--- a/src/views/search/searchResult/SearchResult.vue
+++ b/src/views/search/searchResult/SearchResult.vue
@@ -4,7 +4,7 @@
<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="请输入搜索关键词" />
+ <input class="search-input-input flex1" placeholder="请输入搜索关键词" v-model="kw" />
<img class="search-input-cross" src="@/assets/img/icon/clear.png">
</div>
@@ -73,13 +73,18 @@ export default {
name: "SearchResult",
data() {
return {
-
+ kw: ""
}
},
components: {
},
+ mounted() {
+ this.kw = this.$route.query.kw
+ },
+
+
methods: {
// 处理点击取消的返回上一页
handCancel() {
diff --git a/src/views/search/searchResult/SearchResult_DESKTOP-6MA514B_3月-31-231138-2023_Conflict.vue b/src/views/search/searchResult/SearchResult_DESKTOP-6MA514B_3月-31-231138-2023_Conflict.vue
deleted file mode 100755
index 03656f4..0000000
--- a/src/views/search/searchResult/SearchResult_DESKTOP-6MA514B_3月-31-231138-2023_Conflict.vue
+++ /dev/null
@@ -1,267 +0,0 @@
-<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>