1

PC-20250623MANY\Administrator

2025-08-16 c4d78a9bd30ee90374c1d8be8dc13375c6878830

1

 src/assets/img/account_1.png

 src/assets/img/account_2.png

 src/assets/img/account_3.png

 src/assets/img/account_4.png

 src/assets/img/account_5.png

 src/assets/img/avatar_.png

 src/assets/img/fund_10.png

 src/assets/img/fund_2.png

 src/assets/img/fund_3.png

 src/assets/img/fund_4.png

 src/assets/img/fund_5.png

 src/assets/img/fund_6.png

 src/assets/img/fund_7.png

 src/assets/img/fund_8.png

 src/assets/img/fund_9.png

 src/assets/img/fund_icon.png

 src/assets/img/services.png

 src/assets/img/setting.png

 src/axios/api.url.js

@@ -14,7 +14,7 @@
  // 本地
  baseURL:
    // process.env.NODE_ENV == "development" ? "http://192.168.10.5:8091/" : "https://api.kuspitai.com/",
    process.env.NODE_ENV == "development" ? "https://ciapi.yanshiz.com/" : "https://usapi.yanshiz.com/",
    process.env.NODE_ENV == "development" ? "https://usapi.yanshiz.com/" : "https://usapi.yanshiz.com/",
  util: {
    image: "/util/image.html" // 图片上传
  }

 src/locales/cht.json

@@ -693,5 +693,16 @@
  "加载更多": "加載更多",
  "加载中": "加載中...",
  "沒有更多了": "沒有更多了",
  "成交价": "成交價"
  "成交价": "成交價",
  "余额宝规则": "餘額寶規則",
  "餘額寶總餘額": "餘額寶總餘額",
  "存入": "存入",
  "转出": "轉出",
  "明细": "明細",
  "已确认份额": "已確認份額",
  "待确认份额": "待確認份額",
  "今日剩余入金次数": "今日剩餘入金次數",
  "今日剩余出金次数": "今日剩餘出金次數",
  "账户盈亏": "賬戶盈虧",
  "今日盈亏": "今日盈虧"
}

 src/page/home/fundIndex.vue

@@ -1,3 +1,225 @@
<template>
    <div>理财</div>
</template>
  <div class="fund_index">
    <div class="fund_head flex-end">
      <img
        src="@/assets/img/fund_icon.png"
        @click="$router.push('/fund_rules')"
      />
    </div>

    <div class="circular-content">
      <div class="circulars">
        <div class="ring"></div>
      </div>

      <div class="cc_title">{{ $t("餘額寶總餘額") }}</div>
      <div class="cc_price">{{ 24095.55 }}</div>
    </div>

    <div class="tui-card">
      <div class="tui-cardItem">
        <img src="@/assets/img/fund_2.png" />
        <div class="tui_text">{{ $t("存入") }}</div>
      </div>
      <div class="tui-border"></div>
      <div class="tui-cardItem">
        <img src="@/assets/img/fund_3.png" />
        <div class="tui_text">{{ $t("转出") }}</div>
      </div>
      <div class="tui-border"></div>
      <div class="tui-cardItem">
        <img src="@/assets/img/fund_4.png" />
        <div class="tui_text">{{ $t("明细") }}</div>
      </div>
    </div>

    <div class="tui-grad">
      <div class="tui-gradItem" v-for="i in lists" :key="i.title">
        <img :src="i.img" />
        <div class="tui_title">{{ i.title }}</div>
        <div class="tui_desc">{{ i.desc }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lists: [
        {
          img: require("@/assets/img/fund_5.png"),
          title: this.$t("已确认份额"),
          desc: "1095.54"
        },
        {
          img: require("@/assets/img/fund_6.png"),
          title: this.$t("待确认份额"),
          desc: "23000"
        },
        {
          img: require("@/assets/img/fund_7.png"),
          title: this.$t("Profit"),
          desc: "0.00"
        },
        {
          img: require("@/assets/img/fund_8.png"),
          title: this.$t("syl"),
          desc: "1%"
        },
        {
          img: require("@/assets/img/fund_9.png"),
          title: this.$t("今日剩余入金次数"),
          desc: "60"
        },
        {
          img: require("@/assets/img/fund_10.png"),
          title: this.$t("今日剩餘出金次數"),
          desc: "60"
        }
      ]
    };
  },
  computed: {}
};
</script>

<style lang="less" scoped>
.fund_index {
  padding: 0 0.9rem .5rem;
  .tui-grad {
    border-radius: 0 0 0.325rem 0.325rem;
    padding-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 0.3rem;
    .tui-gradItem {
      transform: translateX(0) !important;
      width: 3.95rem;
      margin-bottom: 0.3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 0.45rem 0;
      box-sizing: border-box;
      background-color: #525bad;
      border-radius: 0.325rem;
      transition: all 0.5s ease;
      .tui_desc {
        font-size: 0.475rem;
        color: #fff;
        padding-top: 0.075rem;
      }
      .tui_title {
        color: #ccc;
        font-size: 0.375rem;
        padding-top: 0.3rem;
      }
      img {
        width: 1.075rem;
        height: 1.075rem;
      }
    }
  }
  .tui-card {
    background-color: #525bad;
    border-radius: 0.357rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.8rem;
    .tui-border {
      width: 1px;
      height: 1rem;
      background-color: #ccc;
    }
    .tui-cardItem {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0.45rem;
      box-sizing: border-box;
      .tui_text {
        font-size: 0.375rem;
        padding-top: 0.15rem;
        // color: #fff;
      }
      img {
        width: 1.075rem;
        height: 1.075rem;
      }
    }
  }

  .circular-content {
    width: 100%;
    height: 4rem;
    position: relative;
    top: 0;
    left: 0;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    overflow: hidden;
    @kg: 8rem;
    .cc_title {
      padding-top: 2rem;
      font-size: 0.3rem;
      text-align: center;
    }
    .cc_price {
      padding-top: 0.4rem;
      font-size: 0.8rem;
      text-align: center;
    }
    .circulars {
      height: @kg;
      width: @kg;
      //   position: relative;
      position: absolute;
      top: 0.1rem;
      left: 50%;
      transform: translateX(-50%);

      &::after {
        content: "";
        display: block;
        height: 2.5rem;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
      }

      .ring {
        height: @kg;
        width: @kg;
        border-width: 0.5rem;
        border-color: #fff #4f58a8 #4f58a8;
        border-style: solid;
        box-sizing: border-box;
        position: relative;
        border-radius: 100%;
        // transform: rotate(315deg); // 满值
        // transform:rotate(135deg); // 初始值  180/10 = 18
        transform: rotate(135deg); // 初始值v2
        transition: 1.5s ease-out;
      }
    }
  }

  .fund_head {
    width: 100%;
    padding-top: 0.3rem;
    img {
      width: 1.275rem;
      height: auto;
    }
  }
}
</style>

 src/page/home/fundRules.vue

New file
@@ -0,0 +1,60 @@
<template>
  <div class="fund_rules">
    <pageHead :title="$t('余额宝规则')"></pageHead>

    <div class="tui-header">余额宝的交易规则？</div>

    <div class="tui-content">
      <p>
        欢迎使用余额宝，您的智慧财富管理工具。
      </p>
      <p></p>
      <p>日化1%</p>
      <p>1天后随取随用。</p>
      <p>单日转入、转出最高60次。</p>
      <p>门槛单笔最低20元，轻松起步，随时加入。</p>
      <p>
        转入余额宝的资金在第二个交易日由基金公司进行份额确认，对已确认的份额，基金公司产生的当天收益会在次日上午08:
        00在余额宝中显示。
      </p>
      <p>
        温馨提示：08:
        00后转入的资金会顺延1个交易日确认，双休日及国家法定假期，基金公司不进行份额确认。
      </p>
    </div>
  </div>
</template>

<script>
import pageHead from "@/components/pageHead.vue";
export default {
  name: "fundRules",
  components: {
    pageHead
  }
};
</script>

<style lang="less" scoped>
.fund_rules {
  width: 100%;
  .tui-content {
    margin-top: 0.4rem;
    font-size: 0.35rem;
    color: #ccc;
    line-height: 0.6rem;
    text-align: justify;
    padding: 0 0.525rem;
    p {
      display: block;
      unicode-bidi: isolate;
    }
  }
  .tui-header {
    padding: 0 0.525rem;
    margin-top: 0.9rem;
    font-size: 0.6rem;
    font-weight: 800;
  }
}
</style>

 src/page/user/account.vue

@@ -1,242 +1,78 @@
<template>
  <div class="account">
    <!-- <tab-head :leftShow="false">
      <template slot="left">
        <div class="user flex-start">
          <img src="@/assets/img/img_log_home.png" alt="" />
          <div>
            <p class="real_name">{{ userInfo.realName }}</p>
            <p class="phone">ID:{{ userInfo.phone }}</p>
    <div class="tui-userInfo flex-between">
      <div class="userinfo-box flex-center">
        <img src="@/assets/img/avatar_.png" alt="" />
        <div>{{ userInfo.phone }}</div>
      </div>
      <div class="tui-rightsetting flex-center">
        <img
          src="@/assets/img/services.png"
          alt=""
          @click="$store.dispatch('CustomerService')"
        />
        <img src="@/assets/img/setting.png" alt="" />
      </div>
    </div>

    <div class="tui-money">
      <div class="normal flex-between">
        <div>
          <div class="text-xs">{{ $t("hometips") }}</div>
          <div class="price">
            {{ moneyData.symbol }} {{ moneyData.totalMoney }}
          </div>
        </div>
      </template>
    </tab-head>

    <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>{{ moneyData.symbol }} {{ moneyData.totalMoney }}</span>
        <span>{{ moneyData.symbol }} {{ moneyData.availableBalance }}</span>
      </div>

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

      <div class="wallet_record flex-center" @click="toPage('/Record')">
        <span>{{ $t("账户变动记录") }}</span>
        <van-icon name="play" size=".5em" />
      <div class="all-assets flex-between">
        <div class="assets-item flex-center">
          <div class="all-size">{{ $t("hj48") }}</div>
          <div class="big-size">{{ moneyData.availableBalance }}</div>
        </div>
        <div class="assets-item flex-center">
          <div class="all-size">{{ $t("账户盈亏") }}</div>
          <div class="big-size">{{ moneyData.cumulativeProfitAndLoss }}</div>
        </div>
        <!-- <div class="assets-item flex-center">
          <div class="all-size">{{ $t("今日盈亏") }}</div>
          <div class="big-size">0.00</div>
        </div> -->
      </div>
    </div>

    <div class="account_tabs flex-between">
      <div class="tab flex-center" @click="toPage('/recharge')">
        <img src="@/assets/img/cz.png" alt="" />
        <span>{{ $t("hj172") }}</span>
      </div>
      <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" @click="toPage('/rechargelist')">
        <img src="@/assets/img/jl.png" alt="" />
        <span>{{ $t("jl") }}</span>
      </div>
      <div class="tab flex-center" @click="toPage('/transferNew')">
        <img src="@/assets/img/jl.png" alt="" />
        <span>{{ $t("划转") }}</span>
    <div class="tui-spendMoney flex-between">
      <div class="tui-rightItem flex-center" v-for="i in tabs" :key="i.name">
        <img :src="i.img" />
        <div class="text">{{ i.name }}</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" @click="toPage('/tradeNew')">
          <span>{{ $t("hj2") }}</span>
          <img src="@/assets/img/cc_ss.png" alt="" />
        </div>
        <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">US</span>
          <p>{{ $t("Worth") }}</p>
        </div>
        <div class="item_right flex-end">
          {{ positionData.usMarketValue }} USD
        </div>
      </div>

      <div class="held_item flex-between">
        <div class="item_left flex-start">
          <span class="held_icon">US</span>
          <p>{{ $t("持仓收益") }}</p>
        </div>
        <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="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">IN</span>
          <p>{{ $t("Worth") }}</p>
        </div>
        <div class="item_right flex-end">
          {{ positionData.inMarketValue }} INR
        </div>
      </div>

      <div class="held_item flex-between">
        <div class="item_left flex-start">
          <span class="held_icon2">IN</span>
          <p>{{ $t("持仓收益") }}</p>
        </div>
        <div
          class="item_right flex-end"
          :class="{
            descend: positionData.inPositionEarnings < 0,
            rise: positionData.inPositionEarnings > 0
          }"
        >
          <img
            src="@/assets/img/rise.png"
            v-if="positionData.inPositionEarnings > 0"
          />
          <img
            src="@/assets/img/descend.png"
            alt=""
            v-else-if="positionData.inPositionEarnings < 0"
          />
          {{ positionData.inPositionEarnings }}
          ({{ positionData.inPositionEarningsParent }})
        </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> -->
    资产
    <my-order></my-order>
  </div>
</template>

<script>
import tabHead from "@/components/tabHead.vue";
import myOrder from "@/page/user/myOrder.vue";
import * as api from "@/axios/api";
export default {
  name: "account",
  components: {
    tabHead
    tabHead,
    myOrder
  },
  data() {
    return {
      userInfo: {}, // 用户信息
      moneyData: {}, // 账户金额
      positionData: {} // 账户持仓数据
      positionData: {}, // 账户持仓数据
      tabs: [
        { name: this.$t("hj172"), img: require("@/assets/img/account_1.png") },
        { name: this.$t("hj177"), img: require("@/assets/img/account_2.png") },
        { name: this.$t("hj168"), img: require("@/assets/img/account_3.png") },
        { name: this.$t("hj162"), img: require("@/assets/img/account_4.png") },
        { name: this.$t("hj247"), img: require("@/assets/img/account_5.png") }
      ]
    };
  },
  methods: {
@@ -275,222 +111,99 @@
  created() {
    this.getUserInfo();
    this.getMoney();
    this.getMyPositionProfitAndLose();
    // this.getMyPositionProfitAndLose();
  }
};
</script>

<style lang="less" scoped>
@purple: #3d1152;
@green: #c4d600;
@red: #ee0a24;
@dark_green: #07c160;
.account {
  width: 100%;
  min-height: 100vh;
  font-size: 10vw;
  padding-top: 0.2em;
  padding-bottom: 1.4rem;
  .account_loan {
    height: 2em;
    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.25em auto 0;

    .held_item {
      padding: 0.42em 0;
      margin: 0 0.25em;

      &:not(:last-child) {
        border-bottom: 0.01em solid #ddd;
      }

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

        .held_icon {
          background: @green;
        }

        .held_icon2 {
          background: @dark_green;
        }

        .held_icon,
        .held_icon2 {
          border-radius: 0 26em 26em 0;
          color: #fff;
          padding: 0.1em 0.5em 0.1em 0.4em;
          margin-right: 0.3em;
          font-size: 0.8em;
        }
      }

      .item_right {
        font-size: 0.48em;

        img {
          width: 1em;
          margin-right: 0.3em;
        }
      }

      .rise {
        color: @dark_green;
      }

      .descend {
        color: @red;
      }
    }

    .held_head {
      height: 1.333em;
      box-shadow: 0 0.05333rem 0.26667rem #0000000d;
      .head_left,
      .head_right {
        width: 50%;
        height: 100%;
      }
      .head_left {
        color: @green;
        position: relative;

        &::after {
          content: "  ";
          position: absolute;
          right: 0;
          top: 0.45em;
          height: 0.5em;
          width: 0.01em;
          background-color: #ddd;
        }
      }
      .head_right {
        color: @red;
      }
      img {
        width: 0.6em;
        margin-left: 0.1em;
      }
      span {
        font-size: 0.45em;
        font-weight: 600;
      }
    }
  }

  .account_tabs {
    box-shadow: 0 -0.26667rem 0.53333rem #1a00394d;
    width: 100%;
    padding: 0.4em 0.25em 0.5em;
    background-color: #f1f1f1;

    .tab {
      width: 33.33%;
  padding: 0 0.475rem;
  .tui-spendMoney {
    font-size: 0.375rem;
    margin-top: 0.3rem;
    .tui-rightItem {
      padding: 0.4rem 0;
      width: 20%;
      border-radius: 0.325rem;
      flex-direction: column;
      .text {
        width: 100%;
        font-size: 0.35rem;
        font-weight: 500;
        padding-top: 0.15rem;
        text-align: center;
        color: #b1b2b3;
      }
      img {
        width: 0.825rem;
        height: 0.825rem;
      }
    }
  }
  .tui-money {
    margin-top: 0.65rem;
    background: linear-gradient(90deg, #585fb4, #48529e);
    border-radius: 0.175rem;
    .all-assets {
      width: 100%;
      padding: 0.225rem 0 0.35rem;
      justify-content: space-evenly;
      .assets-item {
        width: 33.33%;
        flex-shrink: 0;
        flex-direction: column;
        .big-size {
          font-size: 0.4rem;
          color: #fff;
          padding-top: 0.15rem;
        }
        .all-size {
          font-size: 0.35rem;
          color: #c4c7e4;
        }
      }
    }
    .normal {
      padding: 0.375rem 0;
      margin: 0 0.375rem;
      position: relative;

      &:not(:last-child)::after {
        content: "  ";
        position: absolute;
        right: 0;
        top: 0.7em;
        height: 1em;
        width: 0.01em;
        background-color: #ddd;
      .price {
        font-size: 0.825rem;
        line-height: 0.825rem;
        font-weight: 500;
        padding-top: 0.3rem;
        color: #fff;
      }

      span {
        font-size: 0.42em;
      }

      img {
        width: 1.6em;
        margin-bottom: 0.3em;
      .text-xs {
        font-size: 0.3rem;
        color: #c7c9e6;
      }
    }
  }

  .wallet {
    width: 9.5em;
    margin: 0.2em auto 0;
    padding-top: 0.25em;
    background-color: @purple;
    border-radius: 0.25em 0.25em 0 0;
    color: #fff;
    .wallet_record {
      color: @green;
      margin-top: 0.5em;
      padding: 0.5em;
      border-top: 0.01em solid rgba(#fff, 0.1);
      span {
        font-size: 0.4em;
      }
    }
    .wallet_price_name {
      padding: 0 0.25em;
      span {
        font-size: 0.3em;
      }
    }
    .wallet_price {
      color: #f7b52b;
      padding: 0 0.25em;
      margin-bottom: 0.25em;
      span {
        font-size: 0.4em;
      }
    }

    .wallet_title {
      padding: 0 0.25em;
      margin-bottom: 0.25em;
      span {
        font-size: 0.5em;
      }
  .tui-userInfo {
    box-sizing: border-box;
    padding-top: 0.95rem;
    height: 2.1rem;
    .tui-rightsetting {
      img {
        width: 0.75em;
        display: block;
        width: 0.675rem;
        height: 0.675rem;
        margin: 0 0.175rem;
      }
    }
  }

  .user {
    img {
      width: 1.2em;
      height: 1.2em;
      border-radius: 50%;
      margin-right: 0.25em;
    }
    .real_name {
      font-size: 0.5em;
    }
    .phone {
      font-size: 0.4em;
      color: #999;
      margin-top: 0.1em;
    .userinfo-box {
      font-size: 0.65rem;
      font-weight: 700;
      color: #fff;
      img {
        width: 1.2rem;
        height: 1.2rem;
        margin-right: 0.35rem;
      }
    }
  }
}

 src/router/index.js

@@ -330,6 +330,18 @@
      },
      component: () => import("@/page/home/fundIndex.vue")
    },
    // 理财规则
    {
      path: "/fund_rules",
      name: "fund_rules",
      meta: {
        title: i18n.t("理财"),
        requireAuth: false,
        show: true,
        index: 0
      },
      component: () => import("@/page/home/fundRules.vue")
    },
    // 我的订单,包括持仓和平仓
    {
      path: "/myorder",