多于元

DESKTOP-CVS3R96\我恁爹

2022-11-15 d8f6c671a613b841566c8d7b1f36eb2bb9640ea9

 src/page/kline/index.vue

@@ -8,49 +8,50 @@
              <img src="../../assets/img/zuojiantou.png" alt />
            </div>
            <div class="right_title">
              <div class="t_t">
                <span>{{ kLineDetails.name }}</span>
              <div class="t_t" style="white-space: nowrap;">
                <span>{{ kLineDetails.name | getName }}</span>
              </div>
              <div class="b_t">
                <span>{{ singDetails.code }}</span>
              </div>
            </div>
          </div>
          <div class="right_money sss" @click="openDialog()">
          <div class="right_money sss">
            <div class="content_money">
              <div class="top_price">
                <div class="left">
                  <span>{{ '余额' }}</span>
                  <span>{{ $t('hj47') }}</span>
                </div>
                <div class="right">
                  <span v-if="$store.state.userInfo.userAmt==undefined">¥0.00</span>
                  <span
                    v-if="$store.state.userInfo&&kLineDetails.if_zhishu!='0'"
                    style="white-space: nowarp;"
                  >
                    {{ '¥' + $store.state.userInfo.userIndexAmt
                  <span v-if="$store.state.userInfo.userAmt == undefined">¥0.00</span>
                  <span v-if="$store.state.userInfo && kLineDetails.if_zhishu != '0'" style="white-space: nowarp;">
                    {{ kLineDetails.if_us == 1 ? '$' + Number(Number($store.state.userInfo.userIndexAmt) /
                        7.1).toFixed(2) :
                        kLineDetails.if_us == 2 ? 'HK$' + (Number($store.state.userInfo.userIndexAmt) / 0.9).toFixed(2) :
                          '¥' +
                          $store.state.userInfo.userIndexAmt
                    }}
                  </span>
                  <span
                    v-if="$store.state.userInfo.userAmt!=undefined&&kLineDetails.if_zhishu=='0'"
                    style="white-space: nowarp;"
                  >
                    {{ '¥ ' + $store.state.userInfo.userAmt
                  <span v-if="$store.state.userInfo.userAmt != undefined && kLineDetails.if_zhishu == '0'"
                    style="white-space: nowarp;">
                    {{ kLineDetails.if_us == 1 ? '$' + Number(Number($store.state.userInfo.userAmt) / 7.1).toFixed(2) :
                        kLineDetails.if_us == 2 ? 'HK$' + (Number($store.state.userInfo.userAmt) / 0.9).toFixed(2) : '¥ ' +
                          $store.state.userInfo.userAmt
                    }}
                  </span>
                </div>
                <div class="sanjiao">
                  <img
                  <!-- <img
                    :class="dialogFlag ? 'xuanz' : ''"
                    style="transition: all 0.5s;"
                    src="../../assets/img/xiala.png"
                    alt
                  />
                  /> -->
                </div>
              </div>
              <div class="bottom_balance">
                <div>
                  <span>{{ '可用余额' }}</span>
                  <span>{{ $t('hj48') }}</span>
                </div>
              </div>
            </div>
@@ -70,7 +71,8 @@
                    ? '+' : ''
                }}{{ (singDetails.nowPrice - singDetails.preclose_px).toFixed(2) }}</span>
              </div>
              <div class="tew" :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">
              <div class="tew"
                :class="singDetails.nowPrice - singDetails.preclose_px < 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>
@@ -80,13 +82,13 @@
          <div class="right_ets">
            <div class="tops">
              <div class="lefts topes">
                <span class="titles">{{ '今开' }}</span>
                <span class="titles">{{ $t('hj72') }}</span>
                <span :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                    singDetails.open_px
                }}</span>
              </div>
              <div class="rights topes">
                <span class="titles">{{ '最高' }}</span>
                <span class="titles">{{ $t('hj73') }}</span>
                <span :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                    singDetails.today_max
                }}</span>
@@ -94,13 +96,13 @@
            </div>
            <div class="bottoms">
              <div class="lefts bots">
                <span class="titles">{{ '昨收' }}</span>
                <span class="titles">{{ $t('hj74') }}</span>
                <span :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                    singDetails.preclose_px
                }}</span>
              </div>
              <div class="rights bots">
                <span class="titles">{{ '最低' }}</span>
                <span class="titles">{{ $t('hj75') }}</span>
                <span :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                    singDetails.today_min
                }}</span>
@@ -110,16 +112,17 @@
        </div>
      </div>
      <div class="k_line_detail">
        <Kline />
        <Kline :type="singDetails.type" />
      </div>
      <div class="priect_top_bottom">
      <div class="priect_top_bottom"
        v-if="(kLineDetails.if_us != 1 && kLineDetails.type != 'hk') && kLineDetails.type != 'hk' && kLineDetails.if_zhishu == 0">
        <div class="t_title">
          <span>{{ '五档' }}</span>
          <span>{{ $t('hj76') }}</span>
        </div>
        <div class="charts">
          <div class="left_s">
            <div class="t_ma">
              <span>{{ '买' }}</span>
              <span>{{ $t('hj77') }}</span>
            </div>
            <div class="ets">
              <div class="left_sell1">
@@ -164,7 +167,7 @@
          </div>
          <div class="right_h">
            <div class="t_ma">
              <span>{{ '卖' }}</span>
              <span>{{ $t('hj78') }}</span>
            </div>
            <div class="ets">
              <div class="left_sell1">
@@ -211,12 +214,97 @@
          </div>
        </div>
      </div>
      <div class="jianjie" :class="acseFlag ? 'isjj' : ''" ref="isjj" id="isjj">
      <div class="priect_top_bottom" v-if="kLineDetails.if_us == 1">
        <div class="t_title">
          <span>{{ $t('hj79') }}</span>
        </div>
        <div class="charts">
          <div class="left_s">
            <div class="t_ma">
              <span>{{ $t('hj80') }}</span>
            </div>
            <div class="ets" v-for="item in timedata.data.details">
              <div class="left_sell1">
                <span>{{ item.split(',')[0] }}</span>
              </div>
              <div class="right_sell1">
                <span>{{ }}</span>
              </div>
            </div>

          </div>
          <div class="right_h">
            <div class="t_ma">
              <span>{{ $t('hj81') }}</span>
            </div>
            <div class="ets" v-for="item in timedata.data.details">
              <div class="left_sell1">
                <span>{{ item.split(',')[1] }}</span>
              </div>
              <div class="right_sell1">
                <span>{{ }}</span>
              </div>
            </div>

          </div>
          <div class="right_h">
            <div class="t_ma">
              <span>{{ $t('hj82') }}</span>
            </div>
            <div class="ets" v-for="item in timedata.data.details">
              <div class="left_sell1">
                <span>{{ item.split(',')[2] }}</span>
              </div>
              <div class="right_sell1">
                <span>{{ }}</span>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="jianjie" v-if="!(kLineDetails.if_zhishu != '0' && singDetails.gid.indexOf('hk') > -1)"
        :class="acseFlag ? 'isjj' : ''" ref="isjj" id="isjj">
        <div class="top_jj">
          <span>{{ '简介' }}</span>
          <span>{{ $t('hj83') }}</span>
        </div>
        <div class="jet">
          <span>{{ jianjie }}</span>
        </div>
      </div>
      <div class="hknews" v-if="kLineDetails.if_zhishu != '0' && singDetails.gid.indexOf('hk') > -1">

        <div class="news-tab">
          <div class="t_title">
            <span>{{ $t('hj6') }}</span>
          </div>
          <mt-tab-container v-model="news" :swipeable="false" style="padding-top: 0.5rem;">
            <mt-tab-container-item id="tab_2">
              <div class="news-content">
                <div class="item-out" v-for="(item, inde) in newsdetailList" :key="inde">
                  <div class="item-times">{{ item.Art_ShowTime | utc2beijing }}</div>
                  <div class="titContent" style="-webkit-box-orient: vertical;">{{ item.Art_Title }}</div>
                </div>
              </div>
            </mt-tab-container-item>
          </mt-tab-container>
        </div>
      </div>
      <div class="hknews" v-else>
        <div class="news-tab">
          <div class="t_title">
            <span>{{ $t('hj6') }}</span>
          </div>
          <mt-tab-container v-model="news" :swipeable="false" style="padding-top: 0.5rem;">
            <mt-tab-container-item id="tab_2">
              <div class="news-content">
                <div class="item-out" v-for="(item, inde) in newsdetailList" :key="inde">
                  <div class="item-times">{{ item.addTime | gettime }}</div>
                  <div class="titContent" style="-webkit-box-orient: vertical;">{{ item.title }}</div>
                </div>
              </div>
            </mt-tab-container-item>
          </mt-tab-container>
        </div>
      </div>
      <div class="border_bottom"></div>
@@ -228,13 +316,13 @@
          <img src="../../assets/img/shoucangle.png" alt v-else />
        </div>
        <div class="right_xx" @click="handleJj()">
          <a href="#isjj"><img src="../../assets/img/xiaoxi.png" alt /></a>
          <a href="#"><img src="../../assets/img/xiaoxi.png" alt /></a>
        </div>
      </div>
      <div class="rights">
        <div class="buy_btn">
          <div class="top_buy" @click="goBuy(0)">
            <span>{{ '卖出' }}</span>
            <span>{{ $t('hj84') }}</span>
          </div>
          <div class="bottom_buy">
            <span>{{ singDetails.nowPrice }}</span>
@@ -242,7 +330,7 @@
        </div>
        <div class="sell_btn" @click="goBuy(1)">
          <div class="top_sell">
            <span>{{ '买入' }}</span>
            <span>{{ $t('hj85') }}</span>
          </div>
          <div class="bottom_sell">
            <span>{{ singDetails.nowPrice }}</span>
@@ -261,30 +349,55 @@
  name: "kline",
  data() {
    return {
      news: 'tab_2',
      kLineDetails: {}, // K线图详情数据
      singDetails: {},
      scFlag: false,
      acseFlag: false,
      jianjie: "",
      optionBtn:false,
      isOptionOpt:false,
      dialogFlag:false,
      optionBtn: false,
      isOptionOpt: false,
      dialogFlag: false,
      timedata: [],
      newsdetailList: []
    };
  },
  components: {
    Kline
  },
  created() {

    const { query } = this.$route;
    this.kLineDetails = query;
    if (query.if_us == '1') {

      this.getSingDetailUs();
    } else {
      this.getSingDetails();
    }
    this.getOpation();
    // this.$Lazyload();
    this.getSingDetails();
    this.getUserInfo();
  },

  // beforeDestroy() {
  //   this.Klinetype = false;
  //   window.clearInterval()
  // },
  methods: {
    async getHknews() {
      await api.queryIndexNews().then(res => {
        if (res.status == 0) {
          this.newsdetailList = res.data.data;
        }
      });
    },
    async getNohknews() {
      let data = await api.queryNewsList(4);
      this.newsdetailList = data.data.list
    },
    async option() {
      if(this.optionBtn){
      if (this.optionBtn) {
        return
      };
      this.optionBtn = true;
@@ -293,20 +406,37 @@
        if (data.status === 0) {
          this.getOpation();
          this.optionBtn = false;
          this.$message({
            message: this.$t('hj97'),
            type: 'success'
          });
        } else {
          this.optionBtn = false;
          console.log(data.msg);
         
          this.$message({
            message: data.msg,
            type: 'warning'
          });
        }
      } else {
        let data = await api.addOption({ code: this.kLineDetails.code });
        if (data.status === 0) {
          this.getOpation();
          this.optionBtn = false;
          this.$message({
            message: this.$t('hj96'),
            type: 'success'
          });
        } else {
          console.log(data.msg);
          this.$message({
            message: data.msg,
            type: 'warning'
          });
          this.optionBtn = false;
        }
      }
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    },
    async getUserInfo() {
@@ -321,18 +451,18 @@
      }
      this.$store.state.user = this.user;
    },
    async getOpation () {
        let opts = {
          code: this.$route.query.code
        }
        let data = await api.isOption(opts)
        if (data.status === 0) {
          // 0 --> 未添加
          this.isOptionOpt = false
        } else {
          this.isOptionOpt = true
        }
      },
    async getOpation() {
      let opts = {
        code: this.$route.query.code
      }
      let data = await api.isOption(opts)
      if (data.status === 0) {
        // 0 --> 未添加
        this.isOptionOpt = false
      } else {
        this.isOptionOpt = true
      }
    },
    async getSingDetails() {
      let opts = {
        code: this.kLineDetails.code,
@@ -341,11 +471,44 @@
      await api.getSingleStock(opts).then(res => {
        if (res.status === 0) {
          this.singDetails = res.data.stock;

          if (res.data.introduction) {
            this.jianjie = res.data.introduction.result.data.fareArea;
            this.jianjie = res.data.introduction;
          } else {
            this.jianjie = res.data.indexintroduction;
          }
          console.log(this.singDetails);
          if (this.kLineDetails.if_zhishu != '0' && this.singDetails.gid.indexOf('hk') > -1) {
            this.getHknews();
          } else {
            this.getNohknews();
          }
        }
      });
    },
    async getSingDetailUs() {
      let opts = {
        code: this.kLineDetails.code,
        stockType: this.kLineDetails.type
      };
      await api.getUsDetail(opts).then(res => {
        // console.log(res,1111123);
        // var that = this
        // if(!res){
        //   setTimeout(() => {
        //     that.getSingDetailUs()
        //   }, 3000);

        // }
        if (res.status === 0) {
          this.singDetails = res.data.stock;
          this.timedata = res.data.timedata;
          if (res.data.introduction) {
            this.jianjie = res.data.introduction;
          } else {
            this.jianjie = res.data.indexintroduction;
          }
          this.getNohknews();
          console.log(this.singDetails);
        }
      });
@@ -355,6 +518,10 @@
      setTimeout(() => {
        this.acseFlag = false;
      }, 1000);
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    },
    handleBack() {
      this.$router.go(-1);
@@ -366,23 +533,169 @@
      this.$router.push({
        path: "/TradingBuy",
        query: {
          t:index,
          code:this.kLineDetails.code,
          m:this.singDetails.nowPrice,
          type:this.kLineDetails.if_zhishu,
          name:this.kLineDetails.name,
          t: index,
          code: this.kLineDetails.code,
          m: this.singDetails.nowPrice,
          type: this.kLineDetails.if_zhishu,
          name: this.kLineDetails.name,
          if_us: this.kLineDetails.if_us,
        }
      });
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    }
  },
  filters: {
    getName(name) {
      if (name.length > 15) {
        return name.substring(0, 14);
      } else {
        return name;
      }
    },
    gettime(time) {
      if (!time) {
        return "";
      }
      var nd = new Date(time);
      var y = nd.getFullYear();
      var mm = nd.getMonth() + 1;
      var d = nd.getDate();
      var h = nd.getHours();
      var m = nd.getMinutes();
      var c = nd.getSeconds();
      if (mm < 10) {
        mm = "0" + mm;
      }
      if (d < 10) {
        d = "0" + d;
      }
      if (h < 10) {
        h = "0" + h;
      }
      if (m < 10) {
        m = "0" + m;
      }
      if (c < 10) {
        c = "0" + c;
      }
      //17:35:2922-06-2022
      return y + "-" + mm + "-" + d + " " + h + ":" + m + ":" + c;
    },
    utc2beijing(utc_datetime) {
      // 转为正常的时间格式 年-月-日 时:分:秒
      var T_pos = utc_datetime.indexOf('T');
      var Z_pos = utc_datetime.indexOf('Z');
      var year_month_day = utc_datetime.substr(0, T_pos);
      var hour_minute_second = utc_datetime.substr(T_pos + 1, Z_pos - T_pos - 1);
      var new_datetime = year_month_day + " " + hour_minute_second; // 2017-03-31 08:02:06

      // 处理成为时间戳
      timestamp = new Date(Date.parse(new_datetime));
      timestamp = timestamp.getTime();
      timestamp = timestamp / 1000;

      // 增加8个小时，北京时间比utc时间多八个时区
      var timestamp = timestamp + 8 * 60 * 60;

      // 时间戳转为时间
      var beijing_datetime = new Date(parseInt(timestamp) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
      return beijing_datetime; // 2017-03-31 16:02:06
    }
  }
};
</script>

<style scoped lang="less">
.news-tab {
  width: 100%;
  position: relative;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 0.2rem;
  border-radius: 0.4rem 0.4rem 0 0;
  padding-top: 0.3rem;

  .t_title {
    width: 100%;
    font-size: 0.4546rem;
    margin-top: 0.2rem;
    padding: 0 0.3rem;

    span {
      font-weight: 700;
    }
  }

  /deep/.is-selected .tab-name {
    position: relative;
  }

  /deep/.mint-navbar .mint-tab-item.is-selected {
    border: 0 !important;
    border-bottom: none;
  }

  /deep/.is-selected .tab-name:after {
    position: absolute;
    display: block;
    content: '';
    height: .07rem;
    background-color: #1381A4;
    width: 100%;
    left: 0;
    bottom: -.25rem;
  }
}

.news-content {
  position: relative;
  padding: 0.3rem;
}

.item-out {
  position: relative;
  border-left: 0.01rem solid rgba(192, 192, 192, 0.8);
  padding: 0 0.25rem 1rem 0.25rem;
}

.item-out::before {
  content: "●";
  position: absolute;
  top: -0.1rem;
  left: -0.128rem;
  margin: auto;
}

.item-times {
  color: #999;
  margin-bottom: 0.15rem;
}

.titContent {
  position: relative;
  width: 100%;
  font-size: .35rem;
  line-height: .46rem;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
}






.ti_cont {
  width: 100%;
  display: flex;
}

.kline_detail_page {
  width: 100%;
  height: calc(100% - 1.7rem);
@@ -394,6 +707,7 @@
    position: relative;
  }
}

.sss {
  width: 50%;
  height: 1.2rem;
@@ -401,6 +715,7 @@
  justify-content: flex-end;
  align-items: center;
}

.detail_title {
  width: 100%;
  height: 3.2rem;
@@ -752,12 +1067,12 @@

.jianjie {
  width: 100%;
  height: 5rem;
  // height: 5rem;
  background: rgb(255, 255, 255);
  margin-top: 0.2rem;
  border-radius: 0.3rem 0.3rem 0 0;
  margin-bottom: 1.7rem;
  padding: 0 0.3rem;
  border-radius: 0.3rem;
  margin-bottom: 0.3rem;
  padding: 0.4rem 0.3rem;

  .top_jj {
    width: 100%;
@@ -780,7 +1095,7 @@
  }
}

  @-webkit-keyframes zy{
@-webkit-keyframes zy {
  10% {
    transform: rotate(15deg);
  }
@@ -813,10 +1128,12 @@
  animation: zy 2.5s 0.15s linear infinite;
  animation: zy 2.5s 0.15s linear infinite;
}

.content_money {
  width: 80%;
  height: 80%;
}

.sanjiao {
  width: 0.4rem;
  height: 0.4rem;
@@ -829,12 +1146,14 @@
    height: 0.4rem;
  }
}

.top_price {
  width: 100%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .left {
    width: 0.8rem;
    height: 0.4103rem;
@@ -863,12 +1182,14 @@
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    min-width: 1.9rem;

    span {
      font-weight: 600;
      text-align: right;
    }
  }
}

.bottom_balance {
  width: 100%;
  height: 30%;