1

PC-20250623MANY\Administrator

2025-08-13 79db9782438e27a9006d540d18d649c720180a31

 src/components/tabHead.vue

@@ -1,289 +1,45 @@
<template>
  <div class="tab_head">
    <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">
        <van-icon name="service-o" size=".5em" />
      </div>
      <div class="icon" v-if="rightShow" @click="goToTopUp">
        <van-icon name="setting" size=".5em" />
      </div>
      <slot></slot>
    </div>
    <!-- 搜索弹窗 -->
    <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 />
        </div>
        <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-cell v-for="item in lists" :key="item.id" @click="toDetails(item)">
          <div class="search_item">
            <div class="search_item_left">
              <div class="search_item_left_name">{{ item.name }}</div>
              <div class="search_item_left_hint">
                <span>{{ item.stock_type }}</span>
                {{ item.spell }}
              </div>
            </div>

            <div class="search_item_right">
              <span>{{ item.nowPrice }}</span>
              <van-icon name="arrow" size="1em" />
            </div>
          </div>
        </van-cell>
      </van-list>

      <div class="zhaobudao" v-else>
        <img src="../assets/img/zhaobudao.png" alt="" />
      </div>
    </van-popup>
    <slot name="left"></slot>
    <div class="tab_title">{{ title }}</div>
    <slot></slot>
  </div>
</template>

<script>
import * as api from "@/axios/api";
import handleDt from "@/utils/deTh";
export default {
  name: "tabHead",
  data() {
    return {
      searchShow: false, // 搜索弹窗
      searchValue: "", // 搜索内容
      lists: [], // 搜索列表
      loading: false, // 是否加载
      finished: true, // 是否加载完成
      pageNum: 1,
      pageSize: 20
    };
  },
  props: {
    // 是否显示客服和设置图标
    rightShow: {
      type: Boolean,
      default: true
    },
    // 是否显示左侧搜索
    leftShow: {
      type: Boolean,
      default: true
    title: {
      type: String,
      default: ""
    }
  },
  watch: {
    searchShow() {
      this.searchValue = "";
      this.init();
    }
  },
  async mounted() {
    this.init();
    this.getInfoSite();
  },
  methods: {
    // 跳转客服页面
    aRouter1() {
      window.open(this.onlineService);
    },
    // 获取客服地址
    async getInfoSite() {
      let data = await api.getInfoSite();
      if (data.status === 0) {
        this.onlineService = data.data.onlineService;
        // console.log(this.onlineService, 'this.onlineService');
      } else {
        this.$store.commit("elAlertShow", {
          elAlertShow: true,
          elAlertText: data.msg
        });
      }
    },
    goToTopUp() {
      // 跳转设置页面
      this.$router.push("/setting");
    },
    onLoad: handleDt.throttle(async function (a, b) {
      // 搜索列表加载
      this.finished = false;
      let opt = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        stockPlate: "",
        keyWords: this.searchValue,
        stockType: "",
        orderBy: ""
      };

      let data = await api.getStockByType(opt);
      this.loading = false; // 加载状态结束

      if (data.status === 0 && data.data.list) {
        this.lists = [...this.lists, ...data.data.list];
      } else if (data.status != 0) {
        this.finished = true;
      }

      if (data.data.list && data.data.list.length <= 0) {
        // 数据全部加载完成
        this.finished = true;
      } else {
        this.pageNum++;
      }
    }, 500),
    init() {
      // 初始化
      this.pageNum = 1;
      this.lists = [];
      this.finished = true;
    },
    submit() {
      // 提交搜索
      this.init();
      this.onLoad();
    },
    // 点击进入详情
    toDetails(item) {
      const obj = {
        pid: item.code || "",
        type: item.stock_type || ""
      };
      window.localStorage.setItem("kLine", JSON.stringify(obj));

      this.$router.push({
        path: "/kline",
        query: {
          code: item.code,
          type: item.stock_type
        }
      });
    },
  data() {
    return {};
  }
};
</script>

<style lang="less" scoped>
@grey: #dddddd;
@dark_green: #07c160;

.tab_head {
  font-size: 10vw;
  padding: 0.266em;
  padding: 0.2em 0.525em;
  background: #13161e;
  display: flex;
  justify-content: space-between;
  align-items: center;
  justify-content: space-between;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
  height: 1.5em;

  .zhaobudao {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0.5em;

    img {
      width: 65%;
    }
  }

  .search_item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    padding: 0.5em 0;

    .search_item_left {
      flex: 1;

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

        span {
          border-radius: 0 26em 26em 0;
          background: @dark_green;
          color: #fff;
          padding: 0 0.3em;
          margin-right: 0.1em;
        }
      }
    }

    .search_item_right {
      display: flex;
      justify-content: end;
      align-items: center;
      color: #969799;

      span {
        margin-right: 0.5em;
      }
    }
  }

  .popup_head {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25em;

    /deep/ .van-cell {
      background: none;
    }

    /deep/ .van-field__left-icon .van-icon,
    .van-field__right-icon .van-icon {
      font-size: 1.5em;
    }

    /deep/ .van-field__control {
      font-size: 1.5em;
    }

    .popup_input {
      background: #f7f8fa;
      @inpH: 1em;
      height: @inpH;
      flex: 1;
      border-radius: @inpH / 2;
      display: flex;
      align-items: center;
      margin-left: 0.5em;
      margin-right: 0.5em;
    }
  }

  .icon {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: @grey;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .head_right {
    display: flex;
    justify-content: end;
  }

  .head_right {
    .icon {
      margin-left: 0.266em;
    }
  .tab_title {
    font-size: 0.55em;
    font-weight: 700;
    color: #ccc;
  }
}
</style>