9.28更换api

PC-20250623MANY\Administrator

2025-09-29 58b0f1e9bd03a472321acf1dfc4e89fc4ce9df7a

 src/components/tabHead.vue

@@ -1,254 +1,45 @@
<template>
  <div class="tab_head">
    <div class="icon" @click="searchShow = true">
      <van-icon name="search" size=".5em" />
    </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">
          <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
    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];
      }

      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()
    }
  },
  data() {
    return {};
  }
};
</script>

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

.tab_head {
  font-size: 10vw;
  padding: .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: .5em;

    img {
      width: 65%;
    }
  }

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

    .search_item_left {
      flex: 1;

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

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

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

      span {
        margin-right: .5em;
      }
    }
  }

  .popup_head {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .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: .5em;
      margin-right: .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: .266em;
    }
  .tab_title {
    font-size: 0.55em;
    font-weight: 700;
    color: #ccc;
  }
}
</style>