You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
268 lines
6.4 KiB
268 lines
6.4 KiB
<template>
|
|
<view>
|
|
<!-- 搜索商品 -->
|
|
<view>
|
|
<view class="flex-items-plus flex-row mar-top-20">
|
|
<view class="searchImg-box flex-items-plus">
|
|
<image class="searchImg" src="http://36.138.125.206:8081/ceres-local-file/image/shop_collect_search.png"></image>
|
|
<input class="search-box fs26" v-model="keyWord" maxlength="20" placeholder-class="searchboxPlace"
|
|
:placeholder="$t('common.searchproduct_hint')" />
|
|
<!-- <image class="searchClose-icon" @click="searchTextDel"
|
|
src="http://36.138.125.206:8081/ceres-local-file/static/img/index/searchClose_icon.png"></image>-->
|
|
</view>
|
|
<view class="mar-left-40 fs26" @click="getList">{{$t('page.search')}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 热门搜索 -->
|
|
<view class="hotSearchBox tipsBox">
|
|
<view class="boxTitle mar-leftgetList-30" v-if="hotSearchList.length>0">
|
|
<label class="fs28 font-color-90919C fs-weight-300">{{$t('common.hotsearch')}}</label>
|
|
<image class="seeIcon hotSearchListSee-icon" v-if="isSee" @click="changeHotSearchListIsSee"
|
|
src="http://36.138.125.206:8081/ceres-local-file/image/see.png"></image>
|
|
<image class="seeIcon hotSearchListNotSee-icon" v-else @click="changeHotSearchListIsSee"
|
|
src="http://36.138.125.206:8081/ceres-local-file/image/not_see.png"></image>
|
|
</view>
|
|
<view>
|
|
<view class="flex-wrap-1 flex-row" v-if="isSee">
|
|
<view v-for="(item, index) in hotSearchList" :key="index"
|
|
class="historySearDel-box flex-items-plus mar-right-30">
|
|
<view class="boxContent" @click="historyKeyword(item)">{{item}}</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="notSeeContent">{{$t('client.hotsearchhide')}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="line" color="#F3F4F5" />
|
|
|
|
<!-- 历史搜索 -->
|
|
<view class="historyBox tipsBox">
|
|
<view class="boxTitle mar-leftgetList-30" v-if="historyList.length>0">
|
|
<label class="fs28 font-color-90919C fs-weight-300 ">{{$t('common.historysearch')}}</label>
|
|
<image class="historyDel-icon" @click="historyDelAll" src="http://36.138.125.206:8081/ceres-local-file/image/his_del.png">
|
|
</image>
|
|
</view>
|
|
<view class="historySear-box flex-wrap-1 flex-row">
|
|
<view
|
|
v-for="(item, index) in historyList"
|
|
:key="item.searchId"
|
|
class="historySearDel-box flex-items-plus flex-sp-between mar-right-30"
|
|
>
|
|
<view class="boxContent historyText line1" @click="historyKeyword(item.search)">{{item.search}}</view>
|
|
<label class="font-color-D3D4DE fs18 text-align">|</label>
|
|
<view class="historyIconBox" @click="historyDelOne(item.searchId)">
|
|
<image class="historySearDel-icon text-align"
|
|
src="http://36.138.125.206:8081/ceres-local-file/image/search_his_label_del.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const NET = require('../../../utils/request')
|
|
const API = require('../../../config/api')
|
|
export default {
|
|
data() {
|
|
return {
|
|
keyWord: '',
|
|
historyList: [],
|
|
hotSearchList: [],
|
|
list: [],
|
|
isSee: true
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
this.findSearchHistory()
|
|
this.findHotSearch()
|
|
},
|
|
methods: {
|
|
searchTextDel() {
|
|
this.keyWord = ''
|
|
},
|
|
getList() {
|
|
if (!this.keyWord) {
|
|
uni.showToast({
|
|
title: '请输入要搜索内容！',
|
|
duration: 2000,
|
|
icon: 'none'
|
|
});
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '../../goodsModule/goodsList?keyWord=' + this.keyWord,
|
|
})
|
|
}
|
|
},
|
|
historyKeyword(keyWord) {
|
|
uni.navigateTo({
|
|
url: '../../goodsModule/goodsList?keyWord=' + keyWord,
|
|
})
|
|
},
|
|
//热门搜索
|
|
findHotSearch() {
|
|
NET.request(API.SelectHotSearch, {}, 'GET').then(res => {
|
|
this.hotSearchList = res.data
|
|
})
|
|
},
|
|
changeHotSearchListIsSee() {
|
|
this.isSee = !this.isSee
|
|
},
|
|
//历史记录
|
|
findSearchHistory() {
|
|
NET.request(API.SearchHistory, {}, 'GET').then(res => {
|
|
this.historyList = res.data
|
|
}).catch(res => {
|
|
|
|
})
|
|
},
|
|
historyDelAll() {
|
|
let _this = this;
|
|
uni.showModal({
|
|
title: _this.$t('common.notice_dialog_title'),
|
|
content: '您确定要清空搜索记录吗？',
|
|
confirmText: '确定清空',
|
|
cancelText: '点错了',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.deleteAllSearch()
|
|
} else if (res.cancel) {
|
|
}
|
|
}
|
|
})
|
|
},
|
|
deleteAllSearch() {
|
|
NET.request(API.DeleteAllSearch, {}, 'POST').then(res => {
|
|
this.historyList = res.data
|
|
}).catch(res => {
|
|
|
|
})
|
|
},
|
|
historyDelOne(searchId) {
|
|
let _this= this;
|
|
uni.showModal({
|
|
title: _this.$t('common.notice_dialog_title'),
|
|
content: '您确定要删除这一条记录吗？',
|
|
confirmText: '确定删除',
|
|
cancelText: '点错了',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
NET.request(API.DeleteSearch, {
|
|
searchId: searchId
|
|
}, 'POST').then(res => {
|
|
this.findSearchHistory()
|
|
}).catch(res => {})
|
|
} else if (res.cancel) {
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
input {
|
|
padding-left: 80upx;
|
|
}
|
|
.searchImg-box{
|
|
.searchImg {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
position: absolute;
|
|
left: 60upx;
|
|
}
|
|
.search-box {
|
|
background-color: #F2F2F6;
|
|
width: 530upx;
|
|
height: 66upx;
|
|
border-radius: 35rpx;
|
|
}
|
|
.searchboxPlace {
|
|
font-size: 26rpx;
|
|
color: #90919C;
|
|
padding-right: 30upx;
|
|
}
|
|
.searchClose-icon {
|
|
width: 30upx;
|
|
height: 30upx;
|
|
margin-left: -50upx;
|
|
z-index: 99999;
|
|
}
|
|
}
|
|
// 热门搜索
|
|
.hotSearchBox{
|
|
padding: 0 36upx;
|
|
.historyText{
|
|
flex: 1;
|
|
}
|
|
.hotSearchListSee-icon {
|
|
height: 36rpx;
|
|
}
|
|
.hotSearchListNotSee-icon {
|
|
height: 36rpx;
|
|
}
|
|
.seeIcon {
|
|
width: 36rpx;
|
|
position: absolute;
|
|
right: 30upx;
|
|
}
|
|
.notSeeContent {
|
|
margin-top: 20upx;
|
|
text-align: center;
|
|
font-size: 24upx;
|
|
color: #CCCCCC;
|
|
}
|
|
}
|
|
.line{
|
|
margin: 70upx 0;
|
|
height: 1rpx;
|
|
background: #F2F2F6;
|
|
}
|
|
// 历史搜索
|
|
.historyBox{
|
|
padding: 0 36upx;
|
|
.historySear-box{
|
|
width: 100%;
|
|
}
|
|
.historyDel-icon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
position: absolute;
|
|
right: 30upx;
|
|
}
|
|
.historyIconBox{
|
|
width: 50upx;
|
|
.historySearDel-icon {
|
|
position: relative;
|
|
width: 19rpx;
|
|
height: 19rpx;
|
|
}
|
|
}
|
|
}
|
|
.tipsBox{
|
|
padding: 15rpx 24rpx;
|
|
}
|
|
.boxTitle{
|
|
margin: 30rpx 0;
|
|
}
|
|
.historySearDel-box {
|
|
height: 54upx;
|
|
line-height: 54upx;
|
|
margin: 15rpx 15rpx;
|
|
background-color: #F2F2F6;
|
|
border-radius: 40rpx;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
.boxContent{
|
|
font-size: 28rpx;
|
|
padding: 0 30rpx;
|
|
color: #252744;
|
|
}
|
|
}
|
|
</style>
|