| | |
| | | <template> |
| | | <div class="my_order"> |
| | | <tab-head :title="$t('订单')"></tab-head> |
| | | <tab-head :title="$t('订单')" v-if="!Operation"></tab-head> |
| | | |
| | | <div v-if="!Operation" style="padding: 0 0.3rem;"> |
| | | <div class="tui-money"> |
| | | <div class="normal flex-center"> |
| | | <div> |
| | | <div class="text-xs">{{ $t("浮動盈虧") }}</div> |
| | | <div class="price"> |
| | | {{ moneyData.symbol }} {{ moneyData.profitAndLoss }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="all-assets flex-between"> |
| | | <div class="assets-item flex-center" style="align-items: start;"> |
| | | <div class="all-size">{{ $t("總資產") }}</div> |
| | | <div class="big-size"> |
| | | {{ moneyData.symbol }}{{ moneyData.totalMoney }} |
| | | </div> |
| | | </div> |
| | | <div class="assets-item flex-center"> |
| | | <div class="all-size"> |
| | | {{ $t("hj48") }} |
| | | </div> |
| | | <div class="big-size"> |
| | | {{ moneyData.symbol }}{{ moneyData.availableBalance }} |
| | | </div> |
| | | </div> |
| | | <div class="assets-item flex-center" style="align-items: end;"> |
| | | <div class="all-size">{{ $t("账户盈亏") }}</div> |
| | | <div class="big-size"> |
| | | {{ moneyData.symbol }}{{ moneyData.cumulativeProfitAndLoss }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="control flex-between"> |
| | | <div class="control-item flex-center" @click="$router.push('/markets-list')"> |
| | | <img src="@/assets/img/mr.png" /> |
| | | <div class="action-item-text">{{ $t("gm") }}</div> |
| | | </div> |
| | | <div class="control-item flex-center" @click="$router.push('/markets-list')"> |
| | | <img src="@/assets/img/mc.png" /> |
| | | <div class="action-item-text">{{ $t("gm") }}</div> |
| | | </div> |
| | | <div class="control-item flex-center" @click="$router.push('/Record')"> |
| | | <img src="@/assets/img/pc.png" /> |
| | | <div class="action-item-text">{{ $t("jl") }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <van-tabs v-model="active" title-inactive-color="#898a8e"> |
| | | <van-tab |
| | | :title="$t('hj2')" |
| | |
| | | style="font-size: .4rem;text-align: end;" |
| | | :style=" |
| | | `color:${ |
| | | i.profitAndLose > 0 |
| | | i.profitAndLose < 0 |
| | | ? 'green' |
| | | : i.profitAndLose < 0 |
| | | : i.profitAndLose > 0 |
| | | ? 'red' |
| | | : '' |
| | | }` |
| | |
| | | style="font-size: .28rem;text-align: end;" |
| | | :style=" |
| | | `color:${ |
| | | i.profitAndLose > 0 |
| | | i.profitAndLose < 0 |
| | | ? 'green' |
| | | : i.profitAndLose < 0 |
| | | : i.profitAndLose > 0 |
| | | ? 'red' |
| | | : '' |
| | | }` |
| | |
| | | list: [], // 持仓数据 |
| | | list2: [], // 平仓数据 |
| | | actObj: {}, // 选择的持仓对象 |
| | | actIndex: null |
| | | actIndex: null, |
| | | moneyData: {} // 账户金额 |
| | | }; |
| | | }, |
| | | watch: { |
| | |
| | | default: false |
| | | } |
| | | }, |
| | | created() {}, |
| | | created() { |
| | | if (!this.Operation) this.getMoney(); |
| | | }, |
| | | methods: { |
| | | // 获取 持仓 数据 |
| | | async getList(state = 0) { |
| | |
| | | path: "/Stockdetail", |
| | | query: { codes: i.positionSn } |
| | | }); |
| | | }, |
| | | // 获取账户金额 |
| | | async getMoney() { |
| | | let data = await api.getMoney(); |
| | | if (data.status === 0) { |
| | | this.moneyData = data.data[0]; |
| | | } |
| | | } |
| | | } |
| | | }; |
| | |
| | | width: 100%; |
| | | font-size: 0.3rem; |
| | | background-color: rgba(#000, 0.9); |
| | | .tui-money { |
| | | margin-top: 0.65rem; |
| | | margin-bottom: 0.3rem; |
| | | width: 100%; |
| | | background: linear-gradient(90deg, #585fb4, #48529e); |
| | | border-radius: 0.175rem; |
| | | .control { |
| | | width: 100%; |
| | | padding: 0.2rem 0.3rem; |
| | | .control-item { |
| | | width: 33%; |
| | | padding-top: .1rem; |
| | | flex-direction: column; |
| | | .action-item-text { |
| | | font-size: 0.3rem; |
| | | line-height: 0.3rem; |
| | | color: #aaa; |
| | | } |
| | | img { |
| | | width: 0.5rem; |
| | | height: 0.5rem; |
| | | margin-bottom: 0.3rem; |
| | | } |
| | | } |
| | | } |
| | | .all-assets { |
| | | width: 100%; |
| | | padding: 0.225rem 0.3rem 0.35rem; |
| | | justify-content: space-evenly; |
| | | border-bottom: #aaa solid 1px; |
| | | .assets-item { |
| | | width: 33%; |
| | | flex-shrink: 0; |
| | | flex-direction: column; |
| | | .big-size { |
| | | font-size: 0.35rem; |
| | | 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; |
| | | .price { |
| | | font-size: 0.825rem; |
| | | line-height: 0.825rem; |
| | | font-weight: 500; |
| | | padding-top: 0.3rem; |
| | | color: #fff; |
| | | } |
| | | .text-xs { |
| | | font-size: 0.3rem; |
| | | color: #c7c9e6; |
| | | text-align: center; |
| | | } |
| | | } |
| | | } |
| | | .mo_list { |
| | | padding: 0 0.35rem; |
| | | .mol_item { |