From 31b4821f310c57267f8d08229d6ad8d059e128ee Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期五, 02 九月 2022 15:01:57 +0800
Subject: [PATCH] 调整搜索界面
---
src/views/Select/FindKeyWordsData.vue | 454 ++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 375 insertions(+), 79 deletions(-)
diff --git a/src/views/Select/FindKeyWordsData.vue b/src/views/Select/FindKeyWordsData.vue
index 24e50dc..14f379b 100644
--- a/src/views/Select/FindKeyWordsData.vue
+++ b/src/views/Select/FindKeyWordsData.vue
@@ -1,114 +1,323 @@
<template>
<div class="findData_box">
- <!-- 澶撮儴瀵艰埅鏍� -->
- <van-nav-bar style="background-color:#528abe;">
- <template #left>
- <div @click="pageBack" style="display: flex; align-items: center">
- <van-icon name="arrow-left" size="18" />
- <span>{{$t('selectPage.index.TR')}}</span>
- </div>
- </template>
- <template #title>
- <label>{{$t('ebookPage.search.TR')}}</label>
- </template>
- <template #right>
- <div></div>
- </template>
- </van-nav-bar>
<div class="findData_main">
- <van-search v-model="m_keyWord" show-action :placeholder="$t('ebookPage.keyWordRule.TR')" @search="onSearch">
- <template #action>
- <div @click="onSearch">
- <span style="color:#36489e">{{$t('ebookPage.search.TR')}}</span>
- </div>
- </template>
- </van-search>
+ <div
+ style="
+ display: flex;
+ align-items: center;
+ width: 100%;
+ justify-content: center;
+ "
+ >
+ <div
+ @click="pageBack"
+ style="
+ display: flex;
+ align-items: center;
+ width: 10%;
+ justify-content: center;
+ "
+ >
+ <van-icon name="arrow-left" size="18" />
+ </div>
+ <van-search
+ v-model="m_keyWord"
+ shape="round"
+ background="#fff"
+ show-action
+ style="width: 90%"
+ :placeholder="$t('ebookPage.keyWordRule.TR')"
+ @search="onSearch"
+ >
+ <template #action>
+ <div @click="onSearch">
+ <span style="color: #36489e">{{
+ $t("ebookPage.search.TR")
+ }}</span>
+ </div>
+ </template>
+ </van-search>
+ </div>
<!-- 鍘嗗彶璁板綍鍒楄〃 -->
- <div class="history_record" v-if="m_historyKeyWords.length>0">
+ <div class="history_record" v-if="m_historyKeyWords.length > 0">
<div class="recode_btn">
<span>鎼滅储鍘嗗彶</span>
<van-icon name="delete-o" @click="deletedHistoryTag" />
</div>
<div class="tag_list">
<van-tag
- v-for="(tagItem,index) in m_historyKeyWords"
+ v-for="(tagItem, index) in m_historyKeyWords"
@click="changeTagSearch(tagItem)"
:key="index"
round
type="primary"
- style="margin-right:5px;"
- >{{tagItem}}</van-tag>
+ class="kwy-style"
+ style="margin-right: 5px"
+ >{{ tagItem }}</van-tag
+ >
</div>
</div>
- <div class="data_list">
- <van-cell
- @click="goPumpDetail(item)"
- clickable
- center
- is-link
- title-style="color:#528abe"
- :title="item.Name"
- :label="item.CatalogName"
- v-for="(item, index) in m_dataList"
- :key="index"
- >
- <template #icon>
- <van-image
- width="80"
- height="50"
- :src="item.ThumbnailImage"
- >
- </van-image>
- </template>
- </van-cell>
+ <!-- 鎺ㄨ崘鎼滅储 -->
+ <div
+ class="history_record"
+ style="height: 149px"
+ v-if="m_recommendList.length > 0"
+ >
+ <div class="recode_btn">
+ <span>鎺ㄨ崘鎼滅储</span>
+ </div>
+ <div class="tag_list">
+ <van-tag
+ v-for="(recomm_item, index) in m_recommendList"
+ @click="changeTagSearch(recomm_item.name)"
+ :key="index"
+ round
+ type="primary"
+ class="kwy-style"
+ style="margin-right: 5px"
+ >{{ recomm_item.name }}
+ <div
+ v-if="recomm_item.statusContent"
+ class="recommend-dot"
+ :style="{ backgroundColor: recomm_item.statusColor }"
+ >
+ <span style="color: #fff">{{ recomm_item.statusContent }}</span>
+ </div>
+ </van-tag>
+ </div>
</div>
+ <!-- 鐑悳 -->
+ <div
+ class="history_record"
+ style="height: calc(100vh - 300px)"
+ v-if="m_recommendList.length > 0"
+ >
+ <div class="recode_btn" style="height: 15%">
+ <span style="color: red">鐑悳</span>
+ </div>
+ <div
+ class="tag_list hot-list"
+ style="width: unset; padding-right: 10px; height: 85%"
+ >
+ <div
+ class="hot-li"
+ v-for="(hot_item, hot_index) in m_HotSearchList"
+ :key="hot_index"
+ @click="changeTagSearch(hot_item.name)"
+ >
+ <div class="hot-icon" :class="hot_item.isHot ? '' : 'normal-icon'">
+ <i
+ class="iconfont iconremen"
+ v-if="hot_item.isHot"
+ :style="{ color: hot_item.hotColor }"
+ ></i>
+ <div v-else class="normal-icon-style"></div>
+ <text>{{ hot_item.hotLevel }}</text>
+ </div>
+ <div class="hot-title">{{ hot_item.name }}</div>
+ <div class="hot-view-count">{{ hot_item.downCount }}娆�</div>
+ </div>
+ </div>
+ </div>
+ <van-popup v-model:show="showSearchList">
+ <div
+ style="
+ display: flex;
+ align-items: center;
+ width: 100%;
+ justify-content: center;
+ "
+ >
+ <div
+ @click="showSearchList = false"
+ style="
+ display: flex;
+ align-items: center;
+ width: 10%;
+ justify-content: center;
+ font-size: 14px;
+ "
+ >
+ 鍙栨秷
+ </div>
+ <van-search
+ v-model="m_keyWord"
+ shape="round"
+ background="#fff"
+ show-action
+ style="width: 90%;padding-left: unset;"
+ :placeholder="$t('ebookPage.keyWordRule.TR')"
+ @search="onSearch"
+ >
+ <template #action>
+ <div @click="onSearch">
+ <span style="color: #36489e">{{
+ $t("ebookPage.search.TR")
+ }}</span>
+ </div>
+ </template>
+ </van-search>
+ </div>
+ <div class="data_list">
+ <van-cell
+ @click="goPumpDetail(item)"
+ clickable
+ center
+ is-link
+ title-style="color:#528abe"
+ :title="item.Name"
+ :label="item.CatalogName"
+ v-for="(item, index) in m_dataList"
+ :key="index"
+ >
+ <template #icon>
+ <van-image width="80" height="50" :src="item.ThumbnailImage">
+ </van-image>
+ </template>
+ </van-cell></div
+ ></van-popup>
</div>
</div>
</template>
<script>
import languageMixin from "@/mixin/language.js";
-
+import db from "@/store/db.js";
export default {
mixins: [languageMixin],
data() {
return {
- m_Title:"",
+ m_Title: "",
m_keyWord: "", //鍏抽敭璇�
m_historyKeyWords: [], //鍘嗗彶鍏抽敭璇嶈褰�
- m_dataList: [] //鏌ヨ鍑烘潵鐨勫垪琛�
+ m_recommendList: [
+ {
+ name: "AS",
+ statusContent: "鐑�",
+ statusColor: "red",
+ },
+ {
+ name: "CDL",
+ statusContent: "鏂�",
+ statusColor: "#528abe",
+ },
+ {
+ name: "CDM",
+ statusContent: "",
+ statusColor: "",
+ },
+ {
+ name: "CDS",
+ statusContent: "",
+ statusColor: "",
+ },
+ {
+ name: "CDF",
+ statusContent: "",
+ statusColor: "",
+ },
+ ], //鎺ㄨ崘鎼滅储
+ m_HotSearchList: [
+ {
+ name: "CDL",
+ downCount: "12567",
+ hotLevel: "1",
+ hotColor: "red",
+ isHot: true,
+ },
+ {
+ name: "AS",
+ downCount: "12375",
+ hotLevel: "2",
+ hotColor: "#fda085",
+ isHot: true,
+ },
+ {
+ name: "TP",
+ downCount: "6666",
+ hotLevel: "3",
+ hotColor: "#f6d365",
+ isHot: true,
+ },
+ {
+ name: "SOW",
+ downCount: "3333",
+ hotLevel: "4",
+ hotColor: "",
+ isHot: false,
+ },
+ {
+ name: "TQL",
+ downCount: "2222",
+ hotLevel: "5",
+ hotColor: "",
+ isHot: false,
+ },
+ {
+ name: "BW",
+ downCount: "1111",
+ hotLevel: "6",
+ hotColor: "",
+ isHot: false,
+ },
+ {
+ name: "WQ",
+ downCount: "1001",
+ hotLevel: "7",
+ hotColor: "",
+ isHot: false,
+ },
+ {
+ name: "SGW-G",
+ downCount: "999",
+ hotLevel: "8",
+ hotColor: "",
+ isHot: false,
+ },
+ {
+ name: "BWJ",
+ downCount: "987",
+ hotLevel: "9",
+ hotColor: "",
+ isHot: false,
+ },
+ ],
+ m_dataList: [], //鏌ヨ鍑烘潵鐨勫垪琛�
+ showSearchList: false,
};
},
mounted() {
- this.m_Title = this.getSoftName();
- document.title = this.m_Title
- if (this.$cookies.isKey("historyRecord")) {
+ this.m_Title = this.getSoftName();
+ document.title = this.m_Title;
+ if (db.get("historyRecord")) {
//console.log(this.$cookies.get("historyRecord"),74)
- this.m_historyKeyWords = this.$cookies.get("historyRecord").split(",");
+ this.m_historyKeyWords = db.get("historyRecord");
}
},
methods: {
onSearch() {
let _this = this;
+ _this.showSearchList = true;
let Toast = _this.$toast;
Toast.loading({
duration: 0, //涓�0鏃� 涓嶅叧闂璽oast妗�
message: "Loading...",
- forbidClick: true
+ forbidClick: true,
});
_this
.$axios({
methods: "get",
url:
- _this.$globalConfig.WebApiUrl.MainUrl + "v1/Mobile/FilterByKeyWrd/GetList",
+ _this.$globalConfig.WebApiUrl.MainUrl +
+ "v1/Mobile/FilterByKeyWrd/GetList",
params: {
KeyWord: _this.m_keyWord,
- Lang: _this.getCurrentLanguageUrl()
- }
+ Lang: _this.getCurrentLanguageUrl(),
+ },
})
- .then(function(res) {
+ .then(function (res) {
Toast.clear();
- //console.log(res);
+ console.log(res);
let result = res.data;
if (result.Code != 0) {
Toast.fail(result.Message);
@@ -118,18 +327,18 @@
if (_this.m_historyKeyWords.indexOf(_this.m_keyWord) == -1) {
_this.m_historyKeyWords.push(_this.m_keyWord);
}
-
- _this.$cookies.set("historyRecord", _this.m_historyKeyWords);
+ db.set("historyRecord", _this.m_historyKeyWords);
let seriesList = [];
- result.Data.forEach(item => {
+ result.Data.forEach((item) => {
let productItem = {
ObjectType: item.ObjectType,
PumpID: item.PumpID,
SeriesID: item.SeriesID,
CatalogName: item.CatalogName,
Name: item.Name,
- ThumbnailImage: _this.$globalConfig.WebApiUrl.FileUrl + item.ThumbnailImage,
- Description: item.Description
+ ThumbnailImage:
+ _this.$globalConfig.WebApiUrl.FileUrl + item.ThumbnailImage,
+ Description: item.Description,
};
seriesList.push(productItem);
});
@@ -138,7 +347,7 @@
//console.log(Object.entries(_this.m_ShowSeriesList), 80);
}
})
- .catch(function(err) {
+ .catch(function (err) {
Toast.clear();
console.log(err);
});
@@ -151,24 +360,24 @@
//鍒犻櫎鍘嗗彶璁板綍鏍囩
deletedHistoryTag() {
this.m_historyKeyWords = [];
- this.$cookies.remove("historyRecord");
+ db.remove("historyRecord");
},
//璺宠浆鍒拌鎯�
goPumpDetail(item) {
- // console.log(item, 204);
+ console.log(item, 204);
if (item.ObjectType != 0) {
- let query = { SID: item.SeriesID, PID: item.PumpID }
+ let query = { SID: item.SeriesID, PID: item.PumpID };
this.gotoPage("/byParas/Index", query, null);
} else if (item.ObjectType == 0) {
- let query = { ID: item.SeriesID }
+ let query = { ID: item.SeriesID };
this.gotoPage("/EBook/SeriesDetailPump", query, null);
}
},
//杩斿洖涓婁竴椤�
pageBack() {
this.$router.go(-1);
- }
- }
+ },
+ },
};
</script>
@@ -179,11 +388,12 @@
background-color: #fafafa;
.findData_main {
width: 100%;
- height: calc(100% - 46px);
- background-color: #fafafa;
+ height: calc(100% - 0px);
+ background-color: #fff;
.history_record {
width: 100%;
- height: 45px;
+ height: 90px;
+ background-color: #fff;
.recode_btn {
width: 96%;
height: 30%;
@@ -193,21 +403,24 @@
padding-top: 5px;
padding-left: 10px;
span {
- font-size: 12px;
- color: #aaaaaa;
+ font-size: 16px;
+ color: #000;
+ font-weight: 600;
}
}
.tag_list {
width: 96%;
display: flex;
height: 70%;
- align-items: center;
+ flex-wrap: wrap;
+ align-content: flex-start;
+ justify-content: flex-start;
padding-left: 10px;
}
}
.data_list {
width: 100%;
- height: calc(100% - 100px);
+ height: calc(100% - 55px);
overflow: auto;
margin-top: 1px;
.van-cell__title,
@@ -222,5 +435,88 @@
}
}
}
+ .kwy-style {
+ margin-right: 5px;
+ margin-bottom: 15px;
+ width: 80px;
+ height: 25px;
+ justify-content: center;
+ background-color: #f7f8fa;
+ color: #000000;
+ }
+ .recommend-dot {
+ width: 16px;
+ height: 16px;
+ margin-left: 5px;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+ }
+ .hot-list {
+ border: 1px solid #f1f2f3;
+ box-sizing: border-box;
+ width: unset;
+ margin: 0 15px;
+ border-bottom: unset;
+ border-top-left-radius: 15px;
+ border-top-right-radius: 15px;
+ .hot-li {
+ width: 100%;
+ display: flex;
+ margin: 5px 0px;
+ line-height: 30px;
+ align-items: center;
+ .hot-title {
+ flex: 1;
+ text-align: left;
+ text-indent: 16px;
+ font-weight: 600;
+ }
+ .hot-icon {
+ position: relative;
+ i {
+ font-size: 30px;
+ color: red;
+ }
+ text {
+ position: absolute;
+ left: 10px;
+ top: 5px;
+ color: #fff;
+ font-weight: 600;
+ font-family: "iconfont";
+ font-size: 14px;
+ }
+ }
+ .normal-icon {
+ position: relative;
+ width: 30px;
+ height: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ line-height: 30px;
+ .normal-icon-style {
+ width: 25px;
+ height: 25px;
+ background-color: #cccccc;
+ border-radius: 8px;
+ text-align: center;
+ line-height: 30px;
+ }
+ text {
+ top: 0px;
+ }
+ }
+ .hot-view-count {
+ color: #c1c2c3;
+ font-size: 14px;
+ }
+ }
+ }
+ .van-popup--center {
+ width: 100%;
+ height: 100%;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3