1

李

22 hours ago eeb8f18b48989bac5eb5847a51359496956c5339

 src/page/user/account.vue

@@ -12,102 +12,240 @@
      </template>
    </tab-head>

    <div class="wallet">
    <!-- <div class="wallet">
      <div class="wallet_title flex-start">
        <img src="@/assets/img/钱袋.png" alt="" />
        <span>{{ $t("hj244") }}</span>
      </div>

      <div class="wallet_price flex-between">
        <span>MX$ 16,407,946.28</span>
        <span>MX$ 3,247,918.14</span>
      <div class="wallet_record flex-center" @click="toPage('/wallet')">
        <span>{{ $t("我的钱包") }}</span>
        <van-icon name="play" size=".5em" />
      </div>

      <div class="wallet_price_name flex-between">
        <span>{{ $t("hometips") }}</span>
        <span>{{ $t("hj48") }}</span>
      </div>

      <div class="wallet_record flex-center">
      <div class="wallet_record flex-center" @click="toPage('/Record')">
        <span>{{ $t("账户变动记录") }}</span>
        <van-icon name="play" size=".5em" />
      </div>
    </div>
    </div> -->

    <div class="account_tabs flex-between">
      <div class="tab flex-center ">
      <div class="tab flex-center" @click="czts()">
        <img src="@/assets/img/cz.png" alt="" />
        <span>{{ $t("hj172") }}</span>
      </div>
      <div class="tab flex-center ">
      <div class="tab flex-center" @click="toPage('/RechargeSure')">
        <img src="@/assets/img/tx.png" alt="" />
        <span>{{ $t("subdka") }}</span>
      </div>
      <div class="tab flex-center ">
      <div class="tab flex-center" @click="toPage('/wallet')">
        <div class="qb_icon flex-center">
          <img src="@/assets/img/qb.png" alt="" />
        </div>
        <span>{{ $t("hj244") }}</span>
      </div>
      <div class="tab flex-center" @click="toPage('/moneyRecord')">
        <img src="@/assets/img/jl.png" alt="" />
        <span>{{ $t("jl") }}</span>
        <span>{{ $t("资金记录") }}</span>
      </div>
    </div>

    <div class="wallet">
      <div class="wallet_item" v-for="i in moneyData" :key="i.id">
        <div class="wallet_item_title flex-start">
          <img src="@/assets/img/qz_r.png" v-if="i.accectType == 'JP'" />
          <img src="@/assets/img/qz_m.png" v-else-if="i.accectType == 'US'" />
          <span>{{ i.accectType }} {{ $t("Account") }}</span>
        </div>

        <div class="wallet_item_content flex-between">
          <div>
            <div class="wic_title">{{ $t("hometips") }}</div>
            <div class="wic_money">{{ i.symbol }} {{ i.totalMoney }}</div>
          </div>
          <div>
            <div class="wic_title" style="text-align: end;">{{ $t("hj48") }}</div>
            <div class="wic_money" style="text-align: end;">
              {{ i.symbol }} {{ i.availableBalance }}
            </div>
          </div>
        </div>

        <div class="wallet_item_content flex-between" style="padding-top: 0;">
          <div>
            <div class="wic_title">{{ $t("冻结资金") }}</div>
            <div class="wic_money">{{ i.symbol }} {{ i.freezeMoney }}</div>
          </div>
        </div>

        <div class="wallet_item_but flex-between">
          <div class="flex-center" @click="czts()">
            <span>{{ $t("hj172") }}</span>
          </div>
          <div class="flex-center" @click="toPage('/RechargeSure')">
            <span>{{ $t("subdka") }}</span>
          </div>
          <div class="flex-center" @click="toPage('/transferNew')">
            <span>{{ $t("划转") }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="account_loan flex-between" @click="toPage('/loan')">
      <div class="loan_left">
        <p class="loan_left_title">{{ $t("待还款金额") }}</p>
        <p>$ {{ userInfo.refundAmount || 0 }}</p>
      </div>
      <div class="flex-end loan_right">
        {{ $t("我的贷款") }}
        <van-icon name="play" style="margin-left:.5em" />
      </div>
    </div> -->

    <div class="account_card">
      <div class="held_head flex-between">
        <div class="flex-center head_left">
        <div class="flex-center head_left" @click="toPage('/tradeNew')">
          <span>{{ $t("hj2") }}</span>
          <img src="@/assets/img/cc_ss.png" alt="" />
        </div>
        <div class="flex-center head_right">
          <span>{{ $t("jl") }}</span>
        <div class="flex-center head_right" @click="toPage('/stockRecord')">
          <span>{{ $t("hj121") }}</span>
          <img src="@/assets/img/cc_jl.png" alt="" />
        </div>
      </div>

      <div class="held_item flex-between">
        <div class="item_left flex-start">
          <span class="held_icon">MEX</span>
          <span class="held_icon">US</span>
          <p>{{ $t("Worth") }}</p>
        </div>
        <div class="item_right flex-end">
          3,010 MXN
          {{ positionData.usMarketValue }} USD
        </div>
      </div>

      <div class="held_item flex-between">
        <div class="item_left flex-start">
          <span class="held_icon">MEX</span>
          <span class="held_icon">US</span>
          <p>{{ $t("持仓收益") }}</p>
        </div>
        <div class="item_right flex-end" :class="'rise'">
          <img src="@/assets/img/rise.png" alt="" />
          2,010 (201%)
        <div class="item_right flex-end" :class="{
          descend: positionData.usPositionEarnings < 0,
          rise: positionData.usPositionEarnings > 0
        }">
          <img src="@/assets/img/rise.png" v-if="positionData.usPositionEarnings > 0" />
          <img src="@/assets/img/descend.png" alt="" v-else-if="positionData.usPositionEarnings < 0" />
          {{ positionData.usPositionEarnings }}
          ({{ positionData.usPositionEarningsParent }})
        </div>
      </div>

      <div class="held_item flex-between">
      <!-- <div class="held_item flex-between">
        <div class="item_left flex-start">
          <span class="held_icon2">US</span>
          <span class="held_icon2">JP</span>
          <p>{{ $t("Worth") }}</p>
        </div>
        <div class="item_right flex-end">
          685,059.11 USD
          {{ positionData.jpMarketValue }} JPY
        </div>
      </div>

      <div class="held_item flex-between">
        <div class="item_left flex-start">
          <span class="held_icon2">US</span>
          <span class="held_icon2">JP</span>
          <p>{{ $t("持仓收益") }}</p>
        </div>
        <div class="item_right flex-end" :class="'descend'">
          <img src="@/assets/img/descend.png" alt="" />
          191,980.42 (38.94%)
        <div class="item_right flex-end" :class="{
          descend: positionData.jpPositionEarnings < 0,
          rise: positionData.jpPositionEarnings > 0
        }">
          <img src="@/assets/img/rise.png" v-if="positionData.jpPositionEarnings > 0" />
          <img src="@/assets/img/descend.png" alt="" v-else-if="positionData.jpPositionEarnings < 0" />
          {{ positionData.jpPositionEarnings }}
          ({{ positionData.jpPositionEarningsParent }})
        </div>
      </div> -->
      <!-- <div class="held_item flex-between">
        <div class="item_left flex-start">
          <span class="held_icon2">HK</span>
          <p>{{ $t("Worth") }}</p>
        </div>
        <div class="item_right flex-end">
          {{ positionData.hkMarketValue }} HKD
        </div>
      </div>

      <div class="held_item flex-between">
        <div class="item_left flex-start">
          <span class="held_icon2">HK</span>
          <p>{{ $t("持仓收益") }}</p>
        </div>
        <div
          class="item_right flex-end"
          :class="{
            descend: positionData.hkPositionEarnings < 0,
            rise: positionData.hkPositionEarnings > 0
          }"
        >
          <img
            src="@/assets/img/rise.png"
            v-if="positionData.hkPositionEarnings > 0"
          />
          <img
            src="@/assets/img/descend.png"
            alt=""
            v-else-if="positionData.hkPositionEarnings < 0"
          />
          {{ positionData.hkPositionEarnings }}
          ({{ positionData.hkPositionEarningsParent }})
        </div>
      </div> -->


      <!-- <div class="held_item flex-between">
        <div class="item_left flex-start">
          <span class="held_icon2">TW</span>
          <p>{{ $t("Worth") }}</p>
        </div>
        <div class="item_right flex-end">
          {{ positionData.twMarketValue }} TWD
        </div>
      </div>

      <div class="held_item flex-between">
        <div class="item_left flex-start">
          <span class="held_icon2">TW</span>
          <p>{{ $t("持仓收益") }}</p>
        </div>
        <div
          class="item_right flex-end"
          :class="{
            descend: positionData.twPositionEarnings < 0,
            rise: positionData.twPositionEarnings > 0
          }"
        >
          <img
            src="@/assets/img/rise.png"
            v-if="positionData.twPositionEarnings > 0"
          />
          <img
            src="@/assets/img/descend.png"
            alt=""
            v-else-if="positionData.twPositionEarnings < 0"
          />
          {{ positionData.twPositionEarnings }}
          ({{ positionData.twPositionEarningsParent }})
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import tabHead from "@/components/tabHead.vue";
import config from "@/config";
import * as api from "@/axios/api";
export default {
  name: "account",
@@ -116,12 +254,28 @@
  },
  data() {
    return {
      userInfo: {}
      userInfo: {}, // 用户信息
      moneyData: [], // 账户金额, 包含可用余额数组
      positionData: {} // 账户持仓数据
    };
  },
  methods: {
    // 获取账户金额
    async getMoney() {
      let data = await api.getMoney();
      if (data.status === 0) {
        this.moneyData = data.data;
      }
    },
    // 获取账户持仓数据
    async getMyPositionProfitAndLose() {
      let data = await api.getMyPositionProfitAndLose();
      if (data.status === 0) {
        this.positionData = data.data;
      }
    },
    // 获取用户信息
    async getUserInfo() {
      // 获取用户信息
      let data = await api.getUserInfodata();
      if (data.status === 0) {
        // 判断是否登录
@@ -131,32 +285,68 @@
      } else {
        this.$store.commit("dialogVisible", true);
      }
    },
    // 跳转
    toPage(url) {
      if (!url) return;
      this.$router.push(url);
    },
    // 充值提示
    czts() {
      // Toast(this.$t("充值提示"));
      window.open(config.onlineService); // 跳转客服
    }
  },
  created() {
    this.getUserInfo();
    this.getMoney();
    this.getMyPositionProfitAndLose();
  }
};
</script>

<style lang="less" scoped>
@purple: #3d1152;
@green: #c4d600;
@green: #00f0ff;
@red: #ee0a24;
@dark_green: #07c160;

.account {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: #fff;
  font-size: 10vw;
  padding-top: 0.2em;
  padding-bottom: 1.4rem;
  padding-bottom: 1.6rem;

  .account_loan {
    height: 2em;
    background-color: #e5eff7;
    width: 100%;
    padding: 0 0.5em 0.15em;

    .loan_left {
      p {
        font-size: 0.4em;
      }

      .loan_left_title {
        font-size: 0.3em;
        color: #999;
        margin-bottom: 0.75em;
      }
    }

    .loan_right {
      font-size: 0.4em;
    }
  }

  .account_card {
    background-color: #f5f5f5;
    border-radius: 0.25em;
    width: 9.5em;
    margin: 0.5em auto 0;
    margin: 0.25em auto 0;

    .held_item {
      padding: 0.42em 0;
@@ -167,7 +357,7 @@
      }

      .item_left {
        font-size: 0.4em;
        font-size: 0.32em;
        font-weight: 300;
        color: #777;

@@ -190,7 +380,7 @@
      }

      .item_right {
        font-size: 0.48em;
        font-size: 0.35em;

        img {
          width: 1em;
@@ -210,11 +400,14 @@
    .held_head {
      height: 1.333em;
      box-shadow: 0 0.05333rem 0.26667rem #0000000d;
      font-size: .8rem;

      .head_left,
      .head_right {
        width: 50%;
        height: 100%;
      }

      .head_left {
        color: @green;
        position: relative;
@@ -229,13 +422,16 @@
          background-color: #ddd;
        }
      }

      .head_right {
        color: @red;
      }

      img {
        width: 0.6em;
        margin-left: 0.1em;
      }

      span {
        font-size: 0.45em;
        font-weight: 600;
@@ -244,7 +440,7 @@
  }

  .account_tabs {
    box-shadow: 0 -0.26667rem 0.53333rem #1a00394d;
    // box-shadow: 0 -0.26667rem 0.53333rem #1a00394d;
    width: 100%;
    padding: 0.4em 0.25em 0.5em;
    background-color: #f1f1f1;
@@ -253,6 +449,7 @@
      width: 33.33%;
      flex-direction: column;
      position: relative;
      text-align: center;

      &:not(:last-child)::after {
        content: "  ";
@@ -268,7 +465,20 @@
        font-size: 0.42em;
      }

      img {
      .qb_icon {
        width: 1.6em;
        height: 1.6em;
        background-color: rgba(@green, 0.2);
        border-radius: 50%;
        margin-bottom: 0.3em;

        img {
          width: 1em;
          height: auto;
        }
      }

      &>img {
        width: 1.6em;
        margin-bottom: 0.3em;
      }
@@ -279,28 +489,40 @@
    width: 9.5em;
    margin: 0.2em auto 0;
    padding-top: 0.25em;
    background-color: @purple;
    // background-color: @purple;
    border-radius: 0.25em 0.25em 0 0;
    color: #fff;
    // color: #fff;

    .wallet_record {
      color: @green;
      margin-top: 0.5em;
      padding: 0.5em;
      // margin-top: 0.5em;
      padding: 0.3em;
      border-top: 0.01em solid rgba(#fff, 0.1);

      span {
        font-size: 0.4em;
      }
    }

    .wallet_price_name {
      padding: 0 0.25em;
      padding: 0 0.25em 0.25em;

      span {
        font-size: 0.3em;
      }
    }

    .wallet_i_title {
      border-top: rgba(#fff, 0.1) solid 0.01em;
      font-size: 0.4em;
      padding: 0.6em 0;
    }

    .wallet_price {
      color: #f7b52b;
      padding: 0 0.25em;
      margin-bottom: 0.25em;

      span {
        font-size: 0.4em;
      }
@@ -309,11 +531,71 @@
    .wallet_title {
      padding: 0 0.25em;
      margin-bottom: 0.25em;

      span {
        font-size: 0.5em;
      }

      img {
        width: 0.75em;
      }
    }

    .wallet_item {
      width: 100%;
      padding: 0.35em 0.4em;
      border-top: rgba(#666, 0.1) solid 0.01em;

      .wallet_item_but {
        font-weight: 600;
        margin-top: 0.275em;
        gap: 0.5em;

        & > div {
          border: 0.01em solid rgba(#666, 0.2);
          border-radius: 0.5em;
          height: 1em;
          flex: 1;
          width: 0;

          span {
            font-size: 0.35em;
            font-weight: 600;
            color: @green;
          }
        }
      }

      .wallet_item_title {
        opacity: 0.9;

        img {
          width: 0.65em;
          height: 0.65em;
          border-radius: 50%;
          margin-right: 0.15em;
        }

        span {
          font-size: 0.45em;
        }
      }

      .wallet_item_content {
        padding: 0.425em 0;

        .wic_title {
          font-size: 0.35em;
          margin-bottom: 0.5em;
          font-weight: 600;
          opacity: 0.8;
        }

        .wic_money {
          font-size: 0.4em;
          font-weight: 600;
          color: #f7b52b;
        }
      }
    }
  }
@@ -325,9 +607,11 @@
      border-radius: 50%;
      margin-right: 0.25em;
    }

    .real_name {
      font-size: 0.5em;
    }

    .phone {
      font-size: 0.4em;
      color: #999;