9.28更换api

PC-20250623MANY\Administrator

2025-09-29 58b0f1e9bd03a472321acf1dfc4e89fc4ce9df7a

 src/components/tabHead.vue

@@ -1,286 +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">
          <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];
      }

      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: 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>