VAVABUY/pages/index/search.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar
        border
        autoBack
        fixed
        @leftClick="leftClick"
        @rightClick="rightClick"
      >
        <template #center>
          <view class="nav_center">
            <Search
              v-model="searchValue"
              focus
              :placeholder="t('商品的链接或名称')"
              confirm-type="search"
            >
              <template #prefix>
                <i class="icon-font icon-search"></i>
              </template>
              <template #suffix>
                <i class="icon-font icon-camera" @click="openCamera"></i>
              </template>
            </Search>
          </view>
        </template>
        <template #right>
          <view class="nav_right">
            <trans _t="搜索" />
          </view>
        </template>
      </Navbar>
      <view class="content">
        <template v-if="search_list.length">
          <view class="search_info_title">
            <trans _t="搜索历史" />
            <i class="icon-font icon-delete" @click="remove"></i>
          </view>
          <view class="search_item_list mb-24">
            <view
              class="_list"
              v-for="(item, index) in search_list"
              :key="index"
              @click="searchClick(item)"
            >
              {{ item }}
            </view>
          </view>
        </template>
        <view class="search_info_title">
          <trans _t="热门搜索" />
        </view>
        <view class="search_item_list">
          <view
            class="_list"
            v-for="(item, index) in hot_list"
            :key="index"
            @click="searchClick(item.title)"
          >
            {{ item.title }}
          </view>
        </view>
      </view>
      <CameraUpload @confirm="getUrl" ref="cameraUploadRef" />
    </view>
  </Theme>
</template>
<script setup>
import { ref, computed } from "vue";
import Navbar from "@/components/navbar";
import Search from "@/components/input";
// import popOver from "@/components/popover";
import CameraUpload from "@/components/CameraUpload";
import singleImageUploader from "@/components/singleImageUploader";
import { t } from "@/locale";
import { useShopStore } from "@/store";
import { setStorage, getStorage, removeStorage } from "@/utils";

const useShop = useShopStore();
const searchValue = ref("");
// const optionsList = ref(['拍照', '相册'])
const hot_list = computed(() => useShop.getHotLink);
const searchList = ref(JSON.parse(getStorage("search_list") || "[]"));
const search_list = computed(() => searchList.value || []);

const cameraUploadRef = ref(null);
const openCamera = () => {
  cameraUploadRef.value && cameraUploadRef.value.open();
};

const getUrl = (url) => {
  uni.navigateTo({ url: `/pages/index/products?searchImg=${url}` });
};

const leftClick = () => {
  uni.switchTab({ url: "/pages/index/index" });
};

const searchClick = (item) => {
  const searchText = item.length > 20 ? item.substring(0, 20) + "..." : item;
  search_list.value.unshift(searchText);
  let arr = search_list.value.slice(0, 8);
  setStorage("search_list", JSON.stringify([...new Set(arr)]));
  searchList.value = JSON.parse(getStorage("search_list") || "[]");
  uni.navigateTo({ url: `/pages/index/products?searchText=${item}` });
};

const rightClick = () => {
  if (!searchValue.value) return;
  const searchText =
    searchValue.value.length > 20
      ? searchValue.value.substring(0, 20) + "..."
      : searchValue.value;

  search_list.value.unshift(searchText);
  let arr = search_list.value.slice(0, 8);
  setStorage("search_list", JSON.stringify([...new Set(arr)]));
  searchList.value = JSON.parse(getStorage("search_list") || "[]");
  uni.navigateTo({
    url: `/pages/index/products?searchText=${searchValue.value}`,
  });
};

const remove = () => {
  removeStorage("search_list");
  searchList.value = JSON.parse(getStorage("search_list") || "[]");
};
</script>
<style lang="less" scoped>
@import url("@/style.less");

.mb-24 {
  margin-bottom: 48rpx;
}

.wrap {
  min-height: 100vh;

  .nav_center {
    // width: calc(100% - 46px - 50px);
    flex: 1;

    .icon-camera {
      color: #adb8cc;
      font-size: 56rpx;
    }
  }

  /deep/ .u-navbar {
    .u-navbar__content__left,
    .u-navbar__content__right {
      position: unset;
    }
  }

  .nav_right {
    color: var(--black);
    .size(12px);
    font-weight: 700;
  }

  .content {
    padding: 24rpx;

    .search_info_title {
      .flex_position(space-between, center);
      .size(28rpx);
      font-weight: 700;
      height: 60rpx;
      color: var(--text);

      .icon-delete {
        color: #c3cad9;
        cursor: pointer;
        .size(40rpx);
        font-weight: 400;
        padding: 10rpx;
      }
    }

    .search_item_list {
      .flex();
      flex-wrap: wrap;
      gap: 16rpx;
      margin-top: 16rpx;

      ._list {
        .ver();
        background-color: var(--bg-primary);
        border-radius: 16rpx;
        color: var(--text-02);
        .size(24rpx);
        height: 48rpx;
        padding: 0 16rpx;
      }
    }
  }
}
</style>