2
PC-20250623MANY\Administrator
2025-09-28 258c7fb2632175f63c7b1602e56721e7f9ca741a
src/views/home/components/HomeRight.vue
@@ -1,38 +1,21 @@
<template>
  <div class="home_right">
    <div class="deal_type">
      <div
        class="deal_item flex-center bt"
        :class="{ deal_item_active: active == 0 }"
        @click="changeTab(0)"
      >
      <div class="deal_item flex-center bt" :class="{ deal_item_active: active == 0 }" @click="changeTab(0)">
        {{ $t("buy") }}
      </div>
      <div
        v-if="!!positionSn"
        class="deal_item flex-center bt"
        :class="{ deal_item_active: active == 1 }"
        @click="changeTab(1)"
      >
      <div v-if="!!positionSn" class="deal_item flex-center bt" :class="{ deal_item_active: active == 1 }"
        @click="changeTab(1)">
        {{ $t("hj121") }}
      </div>
    </div>
    <!-- buy -->
    <div class="submit_form" v-if="active == 0">
      <el-input
        v-model="bform.price"
        style="text-align: end"
        oninput="value=value.replace(/[^\d.]/g,'')"
        disabled
      >
      <el-input v-model="bform.price" style="text-align: end" oninput="value=value.replace(/[^\d.]/g,'')" disabled>
        <div slot="prefix" class="inp_prefix flex-center">{{ $t("bp") }}</div>
      </el-input>
      <el-input
        v-model="bform.num"
        style="text-align: end"
        oninput="value=value.replace(/[^\d.]/g,'')"
      >
      <el-input v-model="bform.num" style="text-align: end" oninput="value=value.replace(/[^\d.]/g,'')">
        <div slot="prefix" class="inp_prefix flex-center">{{ $t("sl") }}</div>
      </el-input>
@@ -45,17 +28,17 @@
        <div class="value">
          {{ obj.type | currencySymbol }}
          {{ (obj.nowPrice * bform.num) | _toLocaleString }}
          <div v-if="obj.type != $mc">
          <!-- <div v-if="obj.type != $mc">
            ≈ $
            {{ (obj.nowPrice * bform.num * rate(obj.type)) | _toLocaleString }}
          </div>
          </div> -->
        </div>
      </div>
      <div class="info_item flex-between">
        <div class="label">{{ $t("hj48") }}</div>
        <div class="value">
          {{ moneyData.symbol }} {{ moneyData.availableBalance }}
          {{ CurrentMoneyData.symbol }} {{ CurrentMoneyData.availableBalance }}
        </div>
      </div>
@@ -78,36 +61,27 @@
        </div>
      </div>
      <el-input
        v-model="sform.price"
        style="text-align: end"
        oninput="value=value.replace(/[^\d.]/g,'')"
        disabled
      >
      <el-input v-model="sform.price" style="text-align: end" oninput="value=value.replace(/[^\d.]/g,'')" disabled>
        <div slot="prefix" class="inp_prefix flex-center">{{ $t("sp") }}</div>
      </el-input>
      <el-input
        v-model="sform.num"
        style="text-align: end"
        oninput="value=value.replace(/[^\d.]/g,'')"
      >
      <el-input v-model="sform.num" style="text-align: end" oninput="value=value.replace(/[^\d.]/g,'')">
        <div slot="prefix" class="inp_prefix flex-center">{{ $t("sl") }}</div>
      </el-input>
      <div class="slider_box">
      <!-- <div class="slider_box">
        <el-slider v-model="sVal" :marks="marks"> </el-slider>
      </div>
      </div> -->
      <div class="info_item flex-between">
        <div class="label">{{ $t("tc") }}</div>
        <div class="value">
          {{ obj.type | currencySymbol }}
          {{ (obj.nowPrice * sform.num) | _toLocaleString }}
          <div v-if="obj.type != $mc">
          <!-- <div v-if="obj.type != $mc">
            ≈ $
            {{ (obj.nowPrice * sform.num * rate(obj.type)) | _toLocaleString }}
          </div>
          </div> -->
        </div>
      </div>
@@ -145,18 +119,30 @@
        100: "100%",
      },
      depositAmount: "", // 存款金额
      moneyData: {}, // 账户金额
      moneyData: [], // 账户金额
      pages: {}, // 已购买股票信息
    };
  },
  props: {
    obj: {
      type: Object,
      default: () => {},
      default: () => { },
    },
    positionSn: {
      type: String,
      default: null,
    },
  },
  computed: {
    // 当前账户金额
    CurrentMoneyData() {
      let obj = {};
      this.moneyData.forEach((i) => {
        if (i.accectType == this.obj.type) {
          obj = i;
        }
      });
      return obj;
    },
  },
  watch: {
@@ -169,15 +155,10 @@
    },
    // 通过进度条来计算数量
    bVal(val) {
      if (this.obj.type != this.$mc)
        this.bform.num = Math.floor(
          (this.moneyData.availableBalance * (val / 100)) /
            (this.obj.nowPrice * this.rate(this.obj.type))
        );
      else
        this.bform.num = Math.floor(
          (this.moneyData.availableBalance * (val / 100)) / this.obj.nowPrice
        );
      this.bform.num = Math.floor(
        (this.CurrentMoneyData.availableBalance * (val / 100)) /
        this.obj.nowPrice
      );
    },
    sVal(val) {
      this.sform.num = Math.ceil(this.pages.orderNum * (val / 100));
@@ -202,7 +183,7 @@
    async getMoney() {
      let data = await api.getMoney();
      if (data.status === 0) {
        this.moneyData = data.data[0];
        this.moneyData = data.data;
      }
    },
    // 买卖,买:0,卖:1
@@ -217,6 +198,7 @@
      if (data.status === 0) {
        this.$message.success(data.msg);
        this.getMoney();
        this.$emit("Refresh");
      } else {
        this.$message.error(data.msg);
      }
@@ -241,6 +223,7 @@
      if (data.status == 0) {
        this.$message.success(data.msg);
        this.getInfoSite();
        this.$emit("Refresh");
      }
    }),
  },
@@ -250,6 +233,7 @@
<style lang="scss" scoped>
.home_right {
  width: 100%;
  .submit_form {
    padding: 16px;
    display: flex;
@@ -267,6 +251,7 @@
      display: flex;
      flex-direction: column;
      gap: 10px;
      .position_item {
        background-color: #fff;
        padding: 10px;
@@ -329,6 +314,7 @@
        height: 40px;
        border-radius: 40px;
      }
      .bt2 {
        background-color: #dfb758;
      }
@@ -355,6 +341,7 @@
      color: #fff;
      background-color: #07c160;
    }
    .deal_item_active:nth-child(2) {
      background-color: #dfb758;
    }