1

PC-20250623MANY\Administrator

2025-07-13 f7a99184725f7ea0884cf478f169aad4e5b6583c

 src/components/tabHead.vue

@@ -1,7 +1,10 @@
<template>
  <div class="tab_head">
    <div class="icon" @click="searchShow = true">
      <van-icon name="search" size=".5em" />
    <div class="head_left">
      <div class="icon" @click="searchShow = true" v-if="leftShow">
        <van-icon name="search" size=".5em" />
      </div>
      <slot name="left"></slot>
    </div>
    <div class="head_right">
      <div class="icon" v-if="rightShow" @click="aRouter1">
@@ -13,17 +16,34 @@
      <slot></slot>
    </div>
    <!-- 搜索弹窗 -->
    <van-popup v-model="searchShow" round position="bottom" :style="{ height: '80%' }">
    <van-popup
      v-model="searchShow"
      round
      position="bottom"
      :style="{ height: '80%' }"
    >
      <div class="popup_head">
        <van-icon name="arrow-left" size=".5em" @click="searchShow = false" />
        <div class="popup_input">
          <van-field v-model="searchValue" :placeholder="$t('hj37')" left-icon="search" clearable />
          <van-field
            v-model="searchValue"
            :placeholder="$t('hj37')"
            left-icon="search"
            clearable
          />
        </div>
        <van-button type="primary" round @click="submit">{{ $t("Search") }}</van-button>
        <van-button type="primary" round @click="submit">{{
          $t("Search")
        }}</van-button>
      </div>

      <van-list v-model="loading" :finished="finished" :finished-text="$t('hj43')" @load="onLoad"
        v-if="(lists && lists.length > 0) || !finished">
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="$t('hj43')"
        @load="onLoad"
        v-if="(lists && lists.length > 0) || !finished"
      >
        <van-cell v-for="item in lists" :key="item.id">
          <div class="search_item">
            <div class="search_item_left">
@@ -57,35 +77,43 @@
  data() {
    return {
      searchShow: false, // 搜索弹窗
      searchValue: '', // 搜索内容
      searchValue: "", // 搜索内容
      lists: [], // 搜索列表
      loading: false, // 是否加载
      finished: true, // 是否加载完成
      pageNum: 1,
      pageSize: 20,
      pageSize: 20
    };
  },
  props: {
    rightShow: { // 是否显示客服和设置图标
    // 是否显示客服和设置图标
    rightShow: {
      type: Boolean,
      default: true
    },
    // 是否显示左侧搜索
    leftShow: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    searchShow() {
      this.searchValue = ''
      this.init()
      this.searchValue = "";
      this.init();
    }
  },
  async mounted() {
    this.init()
    this.init();
    this.getInfoSite();
  },
  methods: {
    aRouter1() { // 跳转客服页面
    aRouter1() {
      // 跳转客服页面
      window.open(this.onlineService);
    },
    async getInfoSite() { // 获取客服地址
    async getInfoSite() {
      // 获取客服地址
      let data = await api.getInfoSite();
      if (data.status === 0) {
        this.onlineService = data.data.onlineService;
@@ -93,23 +121,25 @@
      } else {
        this.$store.commit("elAlertShow", {
          elAlertShow: true,
          elAlertText: data.msg,
          elAlertText: data.msg
        });
      }
    },
    goToTopUp() { // 跳转设置页面
    goToTopUp() {
      // 跳转设置页面
      this.$router.push("/setting");
    },
    onLoad: handleDt.throttle(async function (a, b) { // 搜索列表加载
    onLoad: handleDt.throttle(async function(a, b) {
      // 搜索列表加载
      this.finished = false;
      let opt = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        stockPlate: "",
        keyWords: this.searchValue,
        stockType: '',
        orderBy: "",
      }
        stockType: "",
        orderBy: ""
      };

      let data = await api.getStockByType(opt);
      this.loading = false; // 加载状态结束
@@ -118,23 +148,25 @@
        this.lists = [...this.lists, ...data.data.list];
      }

      if (data.data.list && data.data.list.length <= 0) { // 数据全部加载完成
      if (data.data.list && data.data.list.length <= 0) {
        // 数据全部加载完成
        this.finished = true;

      } else {
        this.pageNum++;
      }
    }, 500),
    init() { // 初始化
    init() {
      // 初始化
      this.pageNum = 1;
      this.lists = [];
      this.finished = true;
    },
    submit() { // 提交搜索
      this.init()
      this.onLoad()
    submit() {
      // 提交搜索
      this.init();
      this.onLoad();
    }
  },
  }
};
</script>

@@ -144,7 +176,7 @@

.tab_head {
  font-size: 10vw;
  padding: .266em;
  padding: 0.266em;
  display: flex;
  justify-content: space-between;
  align-items: center;
@@ -154,7 +186,7 @@
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: .5em;
    padding-top: 0.5em;

    img {
      width: 65%;
@@ -166,22 +198,22 @@
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    padding: .5em 0;
    padding: 0.5em 0;

    .search_item_left {
      flex: 1;

      .search_item_left_hint {
        margin-top: .3em;
        margin-top: 0.3em;
        color: #969799;
        font-size: .8em;
        font-size: 0.8em;

        span {
          border-radius: 0 26em 26em 0;
          background: @dark_green;
          color: #fff;
          padding: 0 .3em;
          margin-right: .1em;
          padding: 0 0.3em;
          margin-right: 0.1em;
        }
      }
    }
@@ -193,7 +225,7 @@
      color: #969799;

      span {
        margin-right: .5em;
        margin-right: 0.5em;
      }
    }
  }
@@ -202,7 +234,7 @@
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .25em;
    padding: 0.25em;

    /deep/ .van-cell {
      background: none;
@@ -222,11 +254,11 @@
      @inpH: 1em;
      height: @inpH;
      flex: 1;
      border-radius: @inpH/2;
      border-radius: @inpH / 2;
      display: flex;
      align-items: center;
      margin-left: .5em;
      margin-right: .5em
      margin-left: 0.5em;
      margin-right: 0.5em;
    }
  }

@@ -237,7 +269,7 @@
    background: @grey;
    display: flex;
    justify-content: center;
    align-items: center
    align-items: center;
  }

  .head_right {
@@ -247,7 +279,7 @@

  .head_right {
    .icon {
      margin-left: .266em;
      margin-left: 0.266em;
    }
  }
}