1
admin
2026-01-14 3b4f810acdcf7db659497d8085eacb21832dbba4
src/page/kline/index.vue
@@ -81,14 +81,19 @@
          <span class="i_icon">{{ bayType }}</span>
          <span class="i_hint" style="color:#777">{{ singDetails.spell }}</span>
        </div>
        <div class="detail_title_a">{{ singDetails.name }}({{ singDetails.gid }})</div>
        <div class="detail_title_a">
          {{ singDetails.name }}({{ singDetails.gid }})
        </div>
        <div class="real_time_detail">
          <div class="left_now_price">
            <div class="top_now">
              <!-- <span :class="singDetails.nowPrice - singDetails.preclose_px > 0 ? 'price green' : 'price red'">{{
                  singDetails.nowPrice
              }}</span> -->
              <span :class="singDetails.hcrate > 0 ? 'price green' : 'price red'">{{ singDetails.nowPrice }}</span>
              <span
                :class="singDetails.hcrate > 0 ? 'price green' : 'price red'"
                >{{ singDetails.nowPrice }}</span
              >
            </div>
            <div class="bottom_now">
              <div>
@@ -99,14 +104,19 @@
                <span v-else>
                  {{
                    (singDetails.nowPrice - singDetails.preclose_px).toFixed(2)
                  }}</span>
                  }}</span
                >
              </div>
              <div class="tew" :class="singDetails.hcrate > 0 ? 'number green' : 'number red'">
              <div
                class="tew"
                :class="singDetails.hcrate > 0 ? 'number green' : 'number red'"
              >
                <span v-if="singDetails.nowPrice === 0">-</span>
                <!-- <span v-else>({{ singDetails.nowPrice - singDetails.preclose_px > 0 ? '+' : '' }}
                  {{ singDetails.hcrate ? singDetails.hcrate : '0' }}%)</span> -->
                <span v-else>
                  ({{ singDetails.hcrate ? singDetails.hcrate : "0" }}%)</span>
                  ({{ singDetails.hcrate ? singDetails.hcrate : "0" }}%)</span
                >
              </div>
            </div>
          </div>
@@ -117,16 +127,24 @@
                <!-- <span :class="singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                    singDetails.open_px
                }}</span> -->
                <span :class="singDetails.hcrate > 0 ? 'number green' : 'number red'
                  ">{{ singDetails.open_px }}</span>
                <span
                  :class="
                    singDetails.hcrate > 0 ? 'number green' : 'number red'
                  "
                  >{{ singDetails.open_px }}</span
                >
              </div>
              <div class="rights topes">
                <span class="titles">{{ $t("hj73") }}</span>
                <!-- <span :class="singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                    singDetails.today_max
                }}</span> -->
                <span :class="singDetails.hcrate > 0 ? 'number green' : 'number red'
                  ">{{ singDetails.today_max }}</span>
                <span
                  :class="
                    singDetails.hcrate > 0 ? 'number green' : 'number red'
                  "
                  >{{ singDetails.today_max }}</span
                >
              </div>
            </div>
            <div class="bottoms">
@@ -135,16 +153,24 @@
                <!-- <span :class="singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                    singDetails.preclose_px
                }}</span> -->
                <span :class="singDetails.hcrate > 0 ? 'number green' : 'number red'
                  ">{{ singDetails.preclose_px }}</span>
                <span
                  :class="
                    singDetails.hcrate > 0 ? 'number green' : 'number red'
                  "
                  >{{ singDetails.preclose_px }}</span
                >
              </div>
              <div class="rights bots">
                <span class="titles">{{ $t("hj75") }}</span>
                <!-- <span :class="singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                    singDetails.today_min
                }}</span> -->
                <span :class="singDetails.hcrate > 0 ? 'number green' : 'number red'
                  ">{{ singDetails.today_min }}</span>
                <span
                  :class="
                    singDetails.hcrate > 0 ? 'number green' : 'number red'
                  "
                  >{{ singDetails.today_min }}</span
                >
              </div>
            </div>
          </div>
@@ -153,12 +179,16 @@
      <div class="k_line_detail">
        <Kline :key="key" :type="singDetails.type" />
      </div>
      <div class="priect_top_bottom" style="display: none" v-if="
        kLineDetails.if_us != 1 &&
        kLineDetails.type != 'hk' &&
        kLineDetails.type != 'hk' &&
        kLineDetails.if_zhishu == 0
      ">
      <div
        class="priect_top_bottom"
        style="display: none"
        v-if="
          kLineDetails.if_us != 1 &&
            kLineDetails.type != 'hk' &&
            kLineDetails.type != 'hk' &&
            kLineDetails.if_zhishu == 0
        "
      >
        <div class="t_title">
          <span>{{ $t("hj76") }}</span>
        </div>
@@ -264,7 +294,11 @@
            <div class="t_ma">
              <span>{{ $t("hj80") }}</span>
            </div>
            <div class="ets" v-for="(item, i) in timedata.data.details" :key="i">
            <div
              class="ets"
              v-for="(item, i) in timedata.data.details"
              :key="i"
            >
              <div class="left_sell1">
                <span>{{ item.split(",")[0] }}</span>
              </div>
@@ -277,7 +311,11 @@
            <div class="t_ma">
              <span>{{ $t("hj81") }}</span>
            </div>
            <div class="ets" v-for="(item, i) in timedata.data.details" :key="i">
            <div
              class="ets"
              v-for="(item, i) in timedata.data.details"
              :key="i"
            >
              <div class="left_sell1">
                <span>{{ item.split(",")[1] }}</span>
              </div>
@@ -290,7 +328,11 @@
            <div class="t_ma">
              <span>{{ $t("hj82") }}</span>
            </div>
            <div class="ets" v-for="(item, i) in timedata.data.details" :key="i">
            <div
              class="ets"
              v-for="(item, i) in timedata.data.details"
              :key="i"
            >
              <div class="left_sell1">
                <span>{{ item.split(",")[2] }}</span>
              </div>
@@ -384,7 +426,11 @@
    <div class="btns">
      <div class="lefts">
        <div class="left_ca" @click="option()">
          <img src="../../assets/img/meishoucang.png" alt v-if="isOptionOpt === false" />
          <img
            src="../../assets/img/meishoucang.png"
            alt
            v-if="isOptionOpt === false"
          />
          <img src="../../assets/img/shoucangle.png" alt v-else />
        </div>
        <!-- <div class="right_xx" @click="handleJj()">
@@ -392,21 +438,15 @@
        </div> -->
      </div>
      <div class="rights">
        <div class="buy_btn">
        <!-- <div class="buy_btn">
          <div class="top_buy" @click="goBuy(0)">
            <span>{{ $t("hj84") }}</span>
          </div>
          <!-- <div class="bottom_buy">
            <span>{{ singDetails.nowPrice }}</span>
          </div> -->
        </div>
        </div> -->
        <div class="sell_btn" @click="goBuy(1)">
          <div class="top_sell">
            <span>{{ $t("hj85") }}</span>
          </div>
          <!-- <div class="bottom_sell">
            <span>{{ singDetails.nowPrice }}</span>
          </div> -->
        </div>
      </div>
    </div>
@@ -435,7 +475,8 @@
      newsdetailList: [],
      bayType: "",
      timer: null,
      key: 0
      key: 0,
      messageInstances: [] // 保存所有消息提示实例
    };
  },
  components: {
@@ -443,22 +484,46 @@
  },
  created() {
    // 进入页面的时候清除所以得计时器,防止页面切换的时候出现多个定时器
    let end = setTimeout(function() {}, 0);
    for (let i = 0; i <= end; i++) {
      clearInterval(i);
    }
    const { query } = this.$route;
    this.kLineDetails = query;
    if (query.if_us === "1") {
      this.getSingDetailUs();
    } else {
      this.getSingDetails();
      this.timer = setInterval(() => {
        this.getSingDetails();
      }, 2000);
      }, 5000);
    }
    this.getOpation();
    // this.$Lazyload();
    this.getUserInfo();
    this.getNohknews();
  },
  beforeDestroy() {
    this.clearInterval(this.timer); // 在组件销毁前清除定时器
    clearInterval(this.timer); // 在组件销毁前清除定时器
    // 关闭所有消息提示
    this.messageInstances.forEach(instance => {
      if (instance && typeof instance.close === 'function') {
        instance.close();
      }
    });
    this.messageInstances = [];
  },
  destroyed() {
    clearInterval(this.timer); // 在组件销毁前清除定时器
    // 确保所有消息提示都已关闭
    this.messageInstances.forEach(instance => {
      if (instance && typeof instance.close === 'function') {
        instance.close();
      }
    });
    this.messageInstances = [];
  },
  // beforeDestroy() {
  //   this.Klinetype = false;
@@ -486,31 +551,35 @@
        if (data.status === 0) {
          this.getOpation();
          this.optionBtn = false;
          this.$message({
          const messageInstance = this.$message({
            message: this.$t("hj97"),
            type: "success"
          });
          this.messageInstances.push(messageInstance);
        } else {
          this.optionBtn = false;
          this.$message({
          const messageInstance = this.$message({
            message: data.msg,
            type: "warning"
          });
          this.messageInstances.push(messageInstance);
        }
      } else {
        let data = await api.addOption({ code: this.kLineDetails.code });
        if (data.status === 0) {
          this.getOpation();
          this.optionBtn = false;
          this.$message({
          const messageInstance = this.$message({
            message: this.$t("hj96"),
            type: "success"
          });
          this.messageInstances.push(messageInstance);
        } else {
          this.$message({
          const messageInstance = this.$message({
            message: data.msg,
            type: "warning"
          });
          this.messageInstances.push(messageInstance);
          this.optionBtn = false;
        }
      }
@@ -804,7 +873,7 @@
  height: calc(100% - 1.7rem);
  overflow: auto;
  >.content {
  > .content {
    width: 100%;
    height: 100%;
    position: relative;
@@ -826,10 +895,10 @@
  background: #fff;
  .detail_title_a {
    font-size: .45rem;
    font-size: 0.45rem;
    font-weight: 500;
    margin-top: .2rem;
    line-height: .45rem;
    margin-top: 0.2rem;
    line-height: 0.45rem;
  }
  .i_icon {
@@ -854,7 +923,7 @@
      align-items: center;
      margin-right: 10vw;
      >img {
      > img {
        // margin-top: 0.2rem;
        width: 0.6rem;
        height: 0.6rem;
@@ -942,13 +1011,13 @@
    max-width: 70%;
    height: 100%;
    >div {
    > div {
      width: 100%;
      padding: 0.15rem 0;
      display: flex;
      align-items: center;
      >div {
      > div {
        // width: 50%;
        height: 100%;
        display: flex;
@@ -1015,7 +1084,7 @@
    justify-content: space-between;
    margin-top: 0.6rem;
    >div {
    > div {
      width: 49%;
      height: 100%;
    }
@@ -1036,7 +1105,7 @@
  display: flex;
  margin-top: 0.08rem;
  >div {
  > div {
    width: 50%;
    height: 100%;
    display: flex;
@@ -1119,9 +1188,9 @@
    height: 70%;
    display: flex;
    align-items: center;
    padding-left: .3rem;
    padding-left: 0.3rem;
    >div {
    > div {
      width: 50%;
      height: 100%;
      display: flex;
@@ -1141,9 +1210,9 @@
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: .2rem;
    padding-right: 0.2rem;
    >div {
    > div {
      border-radius: 0.15rem;
    }
@@ -1175,11 +1244,12 @@
    }
    .sell_btn {
      width: 50%;
      width: 100%;
      height: 80%;
      background: #c4d600;
      color: #fff;
      border-radius: 0 3rem 3rem 0 !important;
      // border-radius: 0 3rem 3rem 0 !important;
      border-radius: 3rem  !important;
      .top_sell {
        width: 100%;