|
@@ -0,0 +1,336 @@
|
|
|
+<template>
|
|
|
+ <view class="dSLComVue">
|
|
|
+ <view class="dSLComVueTop">
|
|
|
+ <view class="dSLComVueTopLeft">
|
|
|
+ <image src="/static/icon_img/search.png" class="dSLComVueTopLeftImg"
|
|
|
+ style="width: 30rpx;height: 30rpx;flex: none;"></image>
|
|
|
+ <input class="dSLComVueTopLeftInput" v-model="search_input" type="text" :placeholder="placeholder"
|
|
|
+ @blur="onClickInput" />
|
|
|
+ <view class="dSLComVueTopLeftDel" v-if="search_input" @click="onClickDel">
|
|
|
+ <image src="/static/icon_img/del.png" class="dSLComVueTopLeftDelImg"
|
|
|
+ style="width: 35rpx;height: 35rpx;flex: none;"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="dSLComVueTopRight">
|
|
|
+ <view class="dSLComVueTopRightBtn" @click="onClickInput"
|
|
|
+ :style="'border: 1rpx solid '+color_border+';color: '+color_text+';'">
|
|
|
+ {{search_name?search_name:'搜索'}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="is_show_more" class="dSLComVues">
|
|
|
+ <view class="dSLComVueTitle">
|
|
|
+ <text>搜索历史</text>
|
|
|
+ <view style="width: 100rpx;height: 60rpx;display: flex;align-items: center;justify-content: flex-end;"
|
|
|
+ @click="onClickDelAll">
|
|
|
+ <image src="/static/icon_img/del2.png" style="width: 36rpx;height: 36rpx;margin-right: 35rpx;">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="search_list_old.length==0" class="mytext">暂无</view>
|
|
|
+ <view class="dSLComVueLog" v-if="search_list_old.length>0">
|
|
|
+ <text class="dSLComVueLogBox mytext" v-for="(item,index) in search_list_old" :key="index"
|
|
|
+ @click="onClickInputValue(item)">
|
|
|
+ {{item?item:'无'}}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="dSLComVueTitle" v-if="search_list_hot.length>0" style="margin-top: 20rpx;">
|
|
|
+ <text>热门搜索</text>
|
|
|
+ <view style="width: 100rpx;height: 60rpx;display: flex;align-items: center;justify-content: flex-end;"
|
|
|
+ @click="onClickShowHot">
|
|
|
+ <image :src="is_hot_show?'/static/icon_img/yan_open.png':'/static/icon_img/yan_close.png'"
|
|
|
+ style="width: 36rpx;height: 36rpx;margin-right: 35rpx;"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="dSLComVueLog" v-if="search_list_hot.length>0 && is_hot_show">
|
|
|
+ <text class="dSLComVueLogBox mytext" v-for="(item,index) in search_list_hot" :key="index"
|
|
|
+ @click="onClickInputValue(item)">
|
|
|
+ {{item?item:'无'}}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ search_list_old: [],
|
|
|
+ search_input: '',
|
|
|
+ is_hot_show: true,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this._init_search()
|
|
|
+
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ is_show_more: {
|
|
|
+ value: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ search_list_old_man_num: {
|
|
|
+ value: Number,
|
|
|
+ default: 10
|
|
|
+ },
|
|
|
+ search_list_hot: {
|
|
|
+ value: Array,
|
|
|
+ default: []
|
|
|
+ },
|
|
|
+ //HM修改 定义默认搜索关键词(水印文字)
|
|
|
+ placeholder: {
|
|
|
+ value: String,
|
|
|
+ default: '请输入搜索内容'
|
|
|
+ },
|
|
|
+ store_key: {
|
|
|
+ value: String,
|
|
|
+ default: 'search_list'
|
|
|
+ },
|
|
|
+ color_border: {
|
|
|
+ value: String,
|
|
|
+ default: '#08979c'
|
|
|
+ },
|
|
|
+ color_text: {
|
|
|
+ value: String,
|
|
|
+ default: '#08979c'
|
|
|
+ },
|
|
|
+ search_name: {
|
|
|
+ value: String,
|
|
|
+ default: '搜索'
|
|
|
+ },
|
|
|
+ input_text: {
|
|
|
+ value: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ search_list_hot(newVal) {
|
|
|
+ if (newVal) {
|
|
|
+ this.search_list_hot = newVal
|
|
|
+ }
|
|
|
+ },
|
|
|
+ input_text(newVal) {
|
|
|
+ if (newVal) {
|
|
|
+ this.search_input = newVal
|
|
|
+ this.saveKeyword()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onClickInput() {
|
|
|
+ this.saveKeyword()
|
|
|
+ },
|
|
|
+ onClickInputValue(search_input) {
|
|
|
+ if (!search_input) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.search_input = search_input.toLowerCase()
|
|
|
+ this.saveKeyword()
|
|
|
+ },
|
|
|
+ _init_search() {
|
|
|
+ var that = this;
|
|
|
+ var store_key = that.store_key;
|
|
|
+ uni.getStorage({
|
|
|
+ key: store_key,
|
|
|
+ success: (res) => {
|
|
|
+ var old_data = JSON.parse(res.data);
|
|
|
+ that.search_list_old = old_data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ saveKeyword() {
|
|
|
+ var that = this
|
|
|
+ if (!this.search_input) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.search_input = this.search_input.toLowerCase()
|
|
|
+ var search_input = this.search_input
|
|
|
+ var store_key = that.store_key
|
|
|
+ uni.getStorage({
|
|
|
+ key: store_key,
|
|
|
+ success: (res) => {
|
|
|
+ var old_data = JSON.parse(res.data);
|
|
|
+ var findIndex = old_data.indexOf(search_input);
|
|
|
+ if (findIndex == -1) {
|
|
|
+ old_data.unshift(search_input);
|
|
|
+ } else {
|
|
|
+ old_data.splice(findIndex, 1);
|
|
|
+ old_data.unshift(search_input);
|
|
|
+ }
|
|
|
+ //最多10个纪录
|
|
|
+ old_data.length > that.search_list_old_man_num && old_data.pop();
|
|
|
+ uni.setStorage({
|
|
|
+ key: store_key,
|
|
|
+ data: JSON.stringify(old_data)
|
|
|
+ });
|
|
|
+ that.search_list_old = old_data; //更新历史搜索
|
|
|
+ },
|
|
|
+ fail: (e) => {
|
|
|
+ var old_data = [search_input];
|
|
|
+ uni.setStorage({
|
|
|
+ key: store_key,
|
|
|
+ data: JSON.stringify(old_data)
|
|
|
+ });
|
|
|
+ that.search_list_old = old_data; //更新历史搜索
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 向父级发送搜索的事件
|
|
|
+ that.$emit('onSearchNameApi', this.search_input);
|
|
|
+ //
|
|
|
+ },
|
|
|
+ onClickDel() {
|
|
|
+ this.search_input = ''
|
|
|
+ this.$emit('onSearchNameApi', '');
|
|
|
+ },
|
|
|
+
|
|
|
+ onClickDelAll() {
|
|
|
+ var that = this
|
|
|
+ console.log('---全部删除-log--')
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定全部删除',
|
|
|
+ success(res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.removeStorageSync(that.store_key)
|
|
|
+ that.search_list_old = []
|
|
|
+ that.$emit('onClickDelAllApi', '');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onClickShowHot() {
|
|
|
+ this.is_hot_show = this.is_hot_show == true ? false : true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .myborder {
|
|
|
+ border: 1rpx solid #60DF9D;
|
|
|
+ color: #30c66c;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mytext {
|
|
|
+ color: #8799a3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dSLComVue {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .dSLComVues {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dSLComVueTop {
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-radius: 40rpx;
|
|
|
+
|
|
|
+ .dSLComVueTopLeft {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ height: 60rpx;
|
|
|
+ background-color: #e8e8e8;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 3%;
|
|
|
+ // background-color: #ccc;
|
|
|
+ border: 1rpx solid #f2f2f2;
|
|
|
+
|
|
|
+ .dSLComVueTopLeftImg {
|
|
|
+ flex: 1;
|
|
|
+ height: 80rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dSLComVueTopLeftInput {
|
|
|
+ flex: 1;
|
|
|
+ height: 60rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .dSLComVueTopLeftDel {
|
|
|
+ width: 70rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dSLComVueTopRight {
|
|
|
+ width: 120rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ .dSLComVueTopRightBtn {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .dSLComVueTitle {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ display: flex;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 26rpx;
|
|
|
+ align-items: center;
|
|
|
+ // background-color: #30c66c;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dSLComVueLog {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+
|
|
|
+ .dSLComVueLogBox {
|
|
|
+ line-height: 55rpx;
|
|
|
+ background-color: #e8e8e8;
|
|
|
+ padding: 0rpx 30rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ flex: none;
|
|
|
+ margin: 10rpx 25rpx 15rpx 0;
|
|
|
+ // border: 1rpx solid #ccc
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|