aaa

doum

2026-06-08 cf2da3b2a63840888815c6a81cbd7948faf93533

 h5/components/search.vue

@@ -13,11 +13,17 @@
            </view>
         </view>
         <view class="search_box_item_xl" v-if="searchData && searchData.length > 0">
            <view class="search_box_item_xl_item" v-for="(item, i) in searchData" :key="i">
               <view :class="index === i ? 'search_box_item_xl_item_name active' : 'search_box_item_xl_item_name'" @click="clickItem(item, i)" @mouseenter="aaa(i)" @mouseleave="bbb">
                  <span :style="{ color: fontColorIndex === i ? fontColor : '' }">{{ item.name }}</span>
            <view class="search_box_item_xl_head">
               <text class="search_box_item_xl_head_label">搜索结果</text>
               <text class="search_box_item_xl_head_count">{{ searchData.length }} 条</text>
            </view>
            <view class="search_box_item_xl_body">
               <view class="search_box_item_xl_item" v-for="(item, i) in searchData" :key="i">
                  <view :class="index === i ? 'search_box_item_xl_item_name active' : 'search_box_item_xl_item_name'" @click="clickItem(item, i)" @mouseenter="aaa(i)" @mouseleave="bbb">
                     <span :style="{ color: fontColorIndex === i ? fontColor : '' }">{{ item.name }}</span>
                  </view>
                  <span class="search_box_item_xl_price" v-if="item.price">￥{{ item.price }}</span>
               </view>
               <span v-if="item.price">￥{{ item.price }}</span>
            </view>
         </view>
      </view>
@@ -89,7 +95,7 @@

<script>
   import { listForH5 } from '@/apis/index.js'
   import { filterGoods } from '@/utils/goodsFilter.js'
   import { filterGoods, matchKeyword } from '@/utils/goodsFilter.js'

   const DEFAULT_THEME_BG = '#4A3728'
   const DEFAULT_THEME_COLOR = '#FFFFFF'
@@ -269,29 +275,13 @@
            }
            if (!this.category && this.name) {
               this.type = 1
               let arr = this.shopList.map(item => {
                  if (item.name.indexOf(this.name) != -1 || item.pinyin.indexOf(this.name) != -1 || item.shortPinyin.indexOf(this.name) != -1) {
                     return item
                  }
               })
               arr = arr.filter(Boolean)
               return arr
               this.searchData = this.shopList.filter(item => matchKeyword(item, this.name))
               return this.searchData
            }
            if (this.category && this.name) {
               this.type = 2
               let arr = this.shopList.map(item => {
                  if (item.categoryName == this.category) {
                     return item
                  }
               })
               arr = arr.filter(Boolean)
               let arrOne = arr.map(item => {
                  if (item.name.indexOf(this.name) != -1 || item.pinyin.indexOf(this.name) != -1 || item.shortPinyin.indexOf(this.name) != -1) {
                     return item
                  }
               })
               arrOne = arrOne.filter(Boolean)
               this.searchData = arrOne
               const arr = this.shopList.filter(item => item.categoryName == this.category)
               this.searchData = arr.filter(item => matchKeyword(item, this.name))
            } else {
               this.searchData = []
            }
@@ -304,13 +294,7 @@
                     this.searchData = []
                     return
                  }
                  let arr = this.categoryList.map(item => {
                     if (item.name.indexOf(this.category) != -1 || item.pinyin.indexOf(this.category) != -1 || item.shortPinyin.indexOf(this.category) != -1) {
                        return item
                     }
                  })
                  arr = arr.filter(Boolean)
                  this.searchData = arr
                  this.searchData = this.categoryList.filter(item => matchKeyword(item, this.category))
               } else if (type === 2) {
                  if (!this.category) {
                     this.searchData = []
@@ -673,76 +657,129 @@
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(61, 46, 34, 0.48);
      backdrop-filter: blur(4px);
      padding: 24px 16px;
      box-sizing: border-box;

      .search_box {
         width: 660px;
         width: 100%;
         max-width: 660px;
         height: auto;
         display: flex;
         flex-direction: column;
         border-radius: 18px;
         overflow: hidden;
         box-shadow: 0 20px 48px rgba(61, 46, 34, 0.28);
         border: 1px solid rgba(255, 255, 255, 0.12);

         .search_box_item_xl::-webkit-scrollbar {
            width: 5px;
            background: rgba(232, 220, 200, 0.35);
            border-radius: 999px;
         }

         .search_box_item_xl::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(74, 55, 40, 0.42) 0%, rgba(74, 55, 40, 0.28) 100%);
            background: rgba(74, 55, 40, 0.28);
            border-radius: 999px;
         }

         .search_box_item_xl {
            width: 100%;
            max-height: 60px;
            min-height: 240px;
            overflow-y: scroll;
            background: rgba(5, 35, 102, 0.7);
            border-radius: 8px;
            max-height: min(52vh, 360px);
            display: flex;
            flex-direction: column;
            background: linear-gradient(180deg, #FFFBF5 0%, $panel-bg 100%);
            border-radius: 0 0 18px 18px;
            overflow: hidden;
         }

            .search_box_item_xl_item {
               width: 100%;
               height: 40px;
               padding: 0 24px;
               cursor: pointer;
               box-sizing: border-box;
         .search_box_item_xl_head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 18px;
            background: $brown;
            color: #fff;
            flex-shrink: 0;
         }

         .search_box_item_xl_head_label {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.5px;
         }

         .search_box_item_xl_head_count {
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 999px;
            background: rgba(255, 216, 138, 0.22);
            color: $gold;
            font-weight: 600;
         }

         .search_box_item_xl_body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
         }

         .search_box_item_xl_item {
            width: 100%;
            min-height: 44px;
            padding: 0 18px;
            cursor: pointer;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid rgba(74, 55, 40, 0.06);
            transition: background 0.12s;

            &:last-child {
               border-bottom: none;
            }

            &:hover {
               background: rgba(255, 216, 138, 0.22);
            }

            .active {
               color: $orange !important;
               font-weight: 600;
            }

            .search_box_item_xl_item_name {
               flex: 1;
               min-width: 0;
               height: 100%;
               display: flex;
               align-items: center;
               overflow: hidden;
               white-space: nowrap;
               text-overflow: ellipsis;
               font-size: 14px;
               color: $brown;
            }

               .active {
                  color: #FFF200 !important;
               }

               .search_box_item_xl_item_name {
                  flex: 1;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  font-size: 16px;
                  color: #FFFFFF;
               }

               span {
                  flex-shrink: 0;
                  font-size: 16px;
                  color: #FFFFFF;
                  margin-left: 10px;
               }
            .search_box_item_xl_price {
               flex-shrink: 0;
               font-size: 13px;
               font-weight: 600;
               color: $orange;
            }
         }

         .search_box_item {
            width: 100%;
            height: 72px;
            background: rgba(5, 35, 102, 0.7);
            border-radius: 32px;
            background: $brown;
            border-radius: 0;
            display: flex;
            align-items: center;
            padding: 0 30px;
            padding: 0 24px;
            box-sizing: border-box;
            margin-bottom: 16px;
            margin-bottom: 0;
            flex-shrink: 0;

            .search_box_item_right {
               display: flex;
@@ -752,9 +789,10 @@

               text {
                  flex-shrink: 0;
                  font-size: 16px;
                  color: #FFFFFF;
                  font-size: 15px;
                  color: $gold;
                  margin-right: 10px;
                  font-weight: 500;
               }

               input,
@@ -762,7 +800,7 @@
                  flex: 1;
                  min-width: 0;
                  height: 100%;
                  font-size: 16px;
                  font-size: 15px;
                  color: #FFFFFF;
                  background: transparent;
                  border: none;
@@ -774,7 +812,9 @@
               width: 20px;
               height: 20px;
               flex-shrink: 0;
               margin-right: 18px;
               margin-right: 14px;
               filter: brightness(0) invert(1);
               opacity: 0.9;

               image {
                  width: 100%;
@@ -783,8 +823,8 @@
            }

            .placeholder {
               color: rgba(255, 255, 255, 0.5);
               font-size: 16px;
               color: rgba(255, 255, 255, 0.45);
               font-size: 15px;
            }
         }
      }