123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262 |
- <template>
- <view class="search">
- <view class="top">
- <!-- @searchConfirm="searchConfirm" @searchBlur="searchBlur" -->
- <navbar ref="nav" :config="config" backColor="#666">
- <!-- <view slot="right" @click="goSearchConfirm" style="font-size: 28rpx; font-weight: 500; color: #FFFFFF;margin-right: 30rpx;" >
- 搜索
- </view> -->
- </navbar>
- </view>
- <div class="search-box">
- <div class="search-wap">
- <text class="hxicon search-icon"></text>
- <input type="text" focus class="sput" placeholder-style="color: #ddd;" confirm-type="search"
- v-model="inputValue" placeholder="请输入搜索内容" @confirm="searchConfirm" />
- </div>
- <div class="word" @click="goSearchConfirm">搜索</div>
- </div>
- <view class="record" v-if="recordList.length>0">
- <view class="record-top"> 历史记录 </view>
- <view class="record-flex">
- <view class="record-item" v-for="(item,index) in recordList" :key="index" @click="goProductList(item)">
- {{ item }}
- </view>
- </view>
- </view>
- <view class="find">
- <view class="find-top"> 搜索发现 </view>
- <view class="find-flex">
- <view class="find-item" v-for="(item,index) in findList" :key="index" @click="goProductList(item.key_word)">
- {{ item.key_word }}
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- recordList: [],
- findList: [],
- config: {
- back: true, //false是tolbar页面 是则不写
- title: "搜索",
- color: "#1A1A1A",
- //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
- backgroundColor: [1, "#fff "],
- // rightSlot: true,
- // search: {
- // value: "",
- // placeholder: "请输入搜索关键字",
- // disabled: false,
- // },
- },
- inputValue: ''
- };
- },
- onShow() {
- // this.recordList = uni.getStorageSync("history") ?
- // uni.getStorageSync("history") :
- // [];
- if (uni.getStorageSync("history")) {
- this.recordList = uni.getStorageSync("history").reverse();
- }
- this.$http.get("/keyword/search/list", {
- limit: 20
- }).then((res) => {
- if (res && res.code == 200) {
- this.findList = res.list;
- }
- });
- },
- methods: {
- onClickBtn(data) {
- //console.log(data);
- },
- //点击按钮
- goSearchConfirm() {
- // this.inputValue = this.$refs.nav.config.search.value;
- this.historyRecored()
- uni.navigateTo({
- url: "/pages/product/search/productList?keyword=" + this.inputValue
- });
- },
- historyRecored() {
- let word = this.inputValue
- if (word != '') {
- let history = uni.getStorageSync("history");
- if (!history) {
- uni.setStorageSync("history", [word]);
- } else {
- let arr = uni.getStorageSync("history");
- let isHad = false;
- for (var i = 0; i < arr.length; i++) {
- if (arr[i] == word) {
- isHad = true;
- break;
- }
- }
- if (!isHad) {
- if (arr.length > 10) {
- arr.splice(9, 1);
- let pp = arr.concat([word]);
- uni.setStorageSync("history", pp);
- } else {
- history = history.concat([word]);
- uni.setStorageSync("history", history);
- }
- this.recordList = uni.getStorageSync("history").reverse();
- }
- }
- }
- },
- searchBlur(e) {
- this.inputValue = e.value
- },
- searchConfirm() {
- // if (e.value) {
- // if (e.value.length > 50) {
- // this.$mUtil.toast("搜索最多50个字符");
- // return false;
- // }
- this.historyRecored()
- uni.navigateTo({
- url: "/pages/product/search/productList?keyword=" + this.inputValue,
- });
- // }
- }, //搜索结果页
- goProductList(text) {
- uni.navigateTo({
- url: "/pages/product/search/productList?keyword=" + text,
- });
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- @font-face {
- font-family: 'hxicon';
- /* project id 2009392 */
- src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
- }
- .hxicon {
- font-family: "hxicon" !important;
- font-size: 20px;
- font-style: normal;
- /* #ifndef APP-NVUE */
- -webkit-font-smoothing: antialiased;
- -webkit-text-stroke-width: 0.2px;
- -moz-osx-font-smoothing: grayscale;
- /* #endif */
- }
- /deep/.hx-navbar__content__main_search_hxicon {
- span {
- font-size: 30rpx;
- }
- }
- .search-box {
- height: 85rpx;
- padding: 0 30rpx;
- // width: 100%;
- background-color: #fff;
- display: flex;
- // align-items: center;
- .search-wap {
- width: 600rpx;
- height: 60rpx;
- display: flex;
- align-items: center;
- background: #fff;
- border: 1px solid rgba(0, 0, 0, 0.42);
- border-radius: 30rpx;
- position: relative;
- .search-icon {
- font-size: 18px;
- margin-left: 30rpx;
- }
- .sput {
- margin-left: 25rpx;
- font-size: 22rpx;
- color: #ffffff;
- width: 100%;
- }
- }
- .word {
- font-size: 28rpx;
- margin-left: 24rpx;
- line-height: 60rpx;
- }
- }
- .find {
- margin: 10rpx 30rpx 0 30rpx;
- .find-top {
- color: #1a1a1a;
- font-size: 32rpx;
- font-weight: 700;
- line-height: 28rpx;
- }
- .find-flex {
- display: flex;
- flex-wrap: wrap;
- margin-top: 20rpx;
- .find-item {
- color: #999999;
- font-size: 24rpx;
- font-weight: 400;
- line-height: 24rpx;
- padding: 18rpx 30rpx;
- background-color: #f5f5f5;
- border-radius: 36rpx;
- margin: 0 22rpx 32rpx 0;
- }
- }
- }
- .record {
- margin: 30rpx;
- .record-top {
- font-size: 32rpx;
- font-weight: 700;
- color: #1a1a1a;
- }
- .record-flex {
- display: flex;
- flex-wrap: wrap;
- margin-top: 30rpx;
- .record-item {
- margin: 0 22rpx 30rpx 0;
- padding: 20rpx 30rpx;
- color: #999999;
- font-size: 24rpx;
- font-weight: 400;
- background-color: #f5f5f5;
- line-height: 24rpx;
- border-radius: 36rpx;
- }
- }
- }
- </style>
|