陶杰
2024-12-23 d39644872fa6f9499fc2c1651bced631a9e96b19
pages/home/components/home-search.vue
@@ -1,18 +1,44 @@
<template>
   <view class="p15 bg-white">
      <view class="search-container m-t-12 flex">
         <!-- <view class="flex m-r-20" @click="changeType">
            <view class="m-r-10" style="line-height: 80rpx;" >
               {{type=='flower'?'按鲜花':'按店铺'}}
            </view>
            <u-icon name="arrow-down"></u-icon>
         </view> -->
         <view class="flex m-r-20">
            <um-dropdown width="200rpx" @change="fnChange" :defaultIndex="def" rangeKey="label" :optionList="typeList"></um-dropdown>
         </view>
         <view class="flex1 input">
            <u-input placeholder="请输入花名" v-model="search_flow">
            <u-input :placeholder="search_home_placeholder" v-model="search_flow" clearable @confirm="buttonSearchFlow" @clear="()=>{
               $nextTick(()=>{buttonSearchFlow()})
            }">
               <!-- <u--text text="http://" slot="prefix" margin="0 3px 0 0" type="tips"></u--text> -->
               <template slot="suffix">
                  <uni-icons color="#20613D" type="search" size="24" @click="buttonSearchFlow"></uni-icons>
               </template>
            </u-input>
         </view>
      </view>
      <view class="m-t-12">
         <view class="title">搜索历史</view>
         <view class="m-t-12 flex flex-wrap-normal history-item-list">
            <view class="history-item" v-for="item of history" :key="item" @click="searchBy(item)">
      <view class="m-t-20">
         <view class="title flex">
            <view class="m-l-0 m-r-a">搜索历史</view>
            <view class="bg-white desc-gray  text-center m-l-a m-r-0" @click.stop="clearHistory">
               一键清空
            </view>
         </view>
         <view class="m-t-12 flex history-item-list" v-show="type=='flower'">
            <view class="history-item" v-for="(item,j) of history_flower" :key="j" @click="searchBy(item)">
               {{item}}
            </view>
         </view>
         <view class="m-t-12 flex history-item-list" v-show="type=='supplier'">
            <view class="history-item" v-for="(item,j) of history_supplier" :key="j" @click="searchBy(item)">
               {{item}}
            </view>
         </view>
@@ -25,36 +51,128 @@
      data() {
         return {
            search_flow: '',
            history: [],
            history_supplier: [],
            history_flower: [],
            type: 'flower', //supplierName
            def: 0,
            typeList:[
               {
                  label: '按鲜花',
                  value: 'flower',
               },
               {
                  label: '按店铺',
                  value: 'supplier',
               },
            ],
        search_home_placeholder:"请输入花名",
         }
      },
      onShow() {
         var k = this.$storage.getItem("cache_home_search")
         this.history = k && JSON.parse(k) || []
      },
      onHide() {
         this.$storage.setItem("cache_home_search", JSON.stringify(this.history))
         this.$storage.setItem("cache_home_search_supplier", JSON.stringify(this.history_supplier))
         this.$storage.setItem("cache_home_search_flower", JSON.stringify(this.history_flower))
      },
      onLoad() {
         if (true) {
            var k = this.$storage.getItem("cache_home_search_flower")
            this.history_flower = k && JSON.parse(k) || []
         }
         if (true) {
            var k = this.$storage.getItem("cache_home_search_supplier")
            this.history_supplier = k && JSON.parse(k) || []
         }
      },
      methods: {
         buttonSearchFlow() {
            if (this.history.indexOf(name) >= 0) {
               this.history.splice(this.history.indexOf(name), 1)
            }
            this.history.unshift(name)
      fnChange(e) {
        this.type = e.value
        if (this.type == 'flower') {
          this.search_home_placeholder = '请输入花名'
          uni.setNavigationBarTitle({
            title: '搜鲜花',
            success: function() {
              // console.log('标题搜鲜花修改成功');
            }
          });
            console.log('buttonSearchFlow')
            uni.navigateTo({
               url: '/sub_pages/customer/trade/list?name=' + this.search_flow
            })
        } else {
          this.search_home_placeholder = '请输入店铺名'
          uni.setNavigationBarTitle({
            title: '搜店铺',
            success: function() {
              // console.log('标题搜店铺修改成功');
            }
          });
        }
      },
         changeType() {
            if (this.type == 'flower') {
               this.type = 'supplier'
            } else {
               this.type = 'flower'
            }
         },
         searchBy(name) {
            if (this.history.indexOf(name) >= 0) {
               this.history.splice(this.history.indexOf(name), 1)
         buttonSearchFlow() {
            var name = this.search_flow
            if (name) {
               var p = ''
               if (this.type === 'flower') {
                  p = 'name=' + this.search_flow
                  if (this.history_flower.indexOf(name) >= 0) {
                  } else {
                     this.history_flower.unshift(name)
                  }
                  if (this.history_flower.length >= 10) {
                     this.history_flower.splice(this.history_flower.length - 1, 1)
                  }
               } else {
                  p = 'supplierName=' + this.search_flow
                  if (this.history_supplier.indexOf(name) >= 0) {
                  } else {
                     this.history_supplier.unshift(name)
                  }
                  if (this.history_supplier.length >= 10) {
                     this.history_supplier.splice(this.history_supplier.length - 1, 1)
                  }
               }
               uni.navigateTo({
                  url: '/sub_pages/customer/trade/list?' + p
               })
            }
            this.history.unshift(name)
         },
         async clearHistory() {
            await this.$message.confirm('是否清空历史记录')
            if (this.type === 'flower') {
               this.history_flower = []
               this.$storage.setItem("cache_home_search_flower", JSON.stringify(this.history_flower))
            }
            if (this.type === 'supplier') {
               this.history_supplier = []
               this.$storage.setItem("cache_home_search_supplier", JSON.stringify(this.history_supplier))
            }
         },
         searchBy(clickname) {
            //值一瞬间会变,引用,所以用加一个,来更改引用
            var name = '' + clickname
            var p = ''
            if (this.type === 'flower') {
               p = 'name=' + name
            } else {
               p = 'supplierName=' + name
            }
            console.log('searchBy', clickname, name, p)
            uni.navigateTo({
               url: '/sub_pages/customer/trade/list?name=' + name
               url: '/sub_pages/customer/trade/list?' + p
            })
         }
      }
@@ -64,14 +182,17 @@
<style lang="scss" scoped>
   .history-item-list {
      .history-item {
         margin-right: 20rpx;
         margin-right: 30rpx;
         min-width: 100rpx;
         padding: 10rpx 20rpx;
         margin-bottom: 20rpx;
         margin-bottom: 30rpx;
         text-align: center;
         height: 30rpx;
         line-height: 30rpx;
         font-size: 28rpx;
         // padding-left: 10rpx;
         // padding-right: 10rpx;
         border: 2rpx solid #e9e9e9;
      }
   }
</style>