| | |
| | | <div class="tui-money"> |
| | | <div class="normal flex-center"> |
| | | <div> |
| | | <div class="text-xs">{{ $t("浮動盈虧") }}</div> |
| | | <div class="price"> |
| | | <div class="text-xs"> |
| | | {{ $t("浮動盈虧") }} |
| | | <van-icon name="eye-o" /> |
| | | </div> |
| | | <div class="price" :style="`color:${moneyData.profitAndLoss > 0 |
| | | ? 'red' |
| | | : moneyData.profitAndLoss < 0 |
| | | ? 'green' |
| | | : '' |
| | | }` |
| | | "> |
| | | {{ moneyData.symbol }} {{ moneyData.profitAndLoss }} |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="assets-item flex-center" style="align-items: end;"> |
| | | <div class="all-size">{{ $t("账户盈亏") }}</div> |
| | | <div class="all-size">{{ $t("平仓盈亏") }}</div> |
| | | <div class="big-size"> |
| | | {{ moneyData.symbol }}{{ moneyData.cumulativeProfitAndLoss }} |
| | | </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 class="action-item-text">{{ $t("hj78") }}</div> |
| | | </div> |
| | | <div class="control-item flex-center" @click="$router.push('/Record')"> |
| | | <img src="@/assets/img/pc.png" /> |
| | |
| | | </div> |
| | | |
| | | <van-tabs v-model="active" title-inactive-color="#898a8e"> |
| | | <van-tab |
| | | :title="$t('hj2')" |
| | | name="0" |
| | | title-style="font-size:0.4rem;" |
| | | ></van-tab> |
| | | <van-tab |
| | | :title="$t('hj121')" |
| | | name="1" |
| | | title-style="font-size:0.4rem;" |
| | | ></van-tab> |
| | | <van-tab :title="$t('hj2')" name="0" title-style="font-size:0.4rem;"></van-tab> |
| | | <van-tab :title="$t('hj121')" name="1" title-style="font-size:0.4rem;"></van-tab> |
| | | </van-tabs> |
| | | |
| | | <div class="mo_list" v-if="active == '0'"> |
| | | <div |
| | | class="mol_item" |
| | | v-for="(i, index) in list" |
| | | :key="i.id" |
| | | @click="open(i, index)" |
| | | > |
| | | <div class="mo_all_sell" @click="allsellclick()"> |
| | | <div>{{ $t("gball") }}</div> |
| | | </div> |
| | | <div class="mol_item" v-for="(i, index) in list" :key="i.id" @click="open(i, index)"> |
| | | <div class="moli_title flex-between"> |
| | | <div> |
| | | {{ i.stockSpell }} |
| | |
| | | </div> |
| | | |
| | | <div class="tui-wrapItem" style="width: 22%;"> |
| | | <div |
| | | style="font-size: 0.28rem;margin-bottom: .25rem;text-align: center;" |
| | | > |
| | | <div style="font-size: 0.28rem;margin-bottom: .25rem;text-align: center;"> |
| | | {{ $t("持股") }}/{{ $t("可卖") }} |
| | | </div> |
| | | <div style="font-size: .4rem;text-align: center;"> |
| | |
| | | </div> |
| | | |
| | | <div class="tui-wrapItem" style="width: 25%;"> |
| | | <div |
| | | style="font-size: 0.28rem;margin-bottom: .25rem;text-align: end;" |
| | | > |
| | | <div style="font-size: 0.28rem;margin-bottom: .25rem;text-align: end;"> |
| | | {{ $t("Current") }}/{{ $t("Cost") }} |
| | | </div> |
| | | <div style="font-size: .4rem;text-align: end;"> |
| | |
| | | </div> |
| | | |
| | | <div class="tui-wrapItem" style="width: 28%;"> |
| | | <div |
| | | style="font-size: 0.28rem;margin-bottom: .25rem;text-align: end;" |
| | | > |
| | | <div style="font-size: 0.28rem;margin-bottom: .25rem;text-align: end;"> |
| | | {{ $t("盈虧") }}/{{ $t("hj141") }} |
| | | </div> |
| | | <div |
| | | style="font-size: .4rem;text-align: end;" |
| | | :style=" |
| | | `color:${ |
| | | i.profitAndLose < 0 |
| | | ? 'green' |
| | | : i.profitAndLose > 0 |
| | | ? 'red' |
| | | : '' |
| | | }` |
| | | " |
| | | > |
| | | <div style="font-size: .4rem;text-align: end;" :style="`color:${i.profitAndLose < 0 |
| | | ? 'green' |
| | | : i.profitAndLose > 0 |
| | | ? 'red' |
| | | : '' |
| | | }` |
| | | "> |
| | | {{ i.profitAndLose }} |
| | | </div> |
| | | <div |
| | | style="font-size: .28rem;text-align: end;" |
| | | :style=" |
| | | `color:${ |
| | | i.profitAndLose < 0 |
| | | ? 'green' |
| | | : i.profitAndLose > 0 |
| | | ? 'red' |
| | | : '' |
| | | }` |
| | | " |
| | | > |
| | | <div style="font-size: .28rem;text-align: end;" :style="`color:${i.profitAndLose < 0 |
| | | ? 'green' |
| | | : i.profitAndLose > 0 |
| | | ? 'red' |
| | | : '' |
| | | }` |
| | | "> |
| | | {{ i.profitAndLoseParent }} |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | |
| | | <div class="mo_list" v-if="active == '1'"> |
| | | <div |
| | | class="mol_item" |
| | | v-for="(i, index) in list2" |
| | | :key="i.id" |
| | | @click="open(i, index)" |
| | | > |
| | | <div class="mol_item" v-for="(i, index) in list2" :key="i.id" @click="open(i, index)"> |
| | | <div class="moli_title flex-between"> |
| | | <div> |
| | | {{ i.stockSpell }} |
| | |
| | | <div> |
| | | {{ $t("盈虧") }} |
| | | </div> |
| | | <div |
| | | style="margin-left: .25rem;font-size: .4rem;" |
| | | :style=" |
| | | `color:${ |
| | | i.profitAndLose > 0 |
| | | ? 'green' |
| | | : i.profitAndLose < 0 |
| | | ? 'red' |
| | | : '' |
| | | }` |
| | | " |
| | | > |
| | | <div style="margin-left: .25rem;font-size: .4rem;" :style="`color:${i.profitAndLose > 0 |
| | | ? 'green' |
| | | : i.profitAndLose < 0 |
| | | ? 'red' |
| | | : '' |
| | | }` |
| | | "> |
| | | {{ i.profitAndLose }} |
| | | </div> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | let teimss = null; // 轮询获取账户金额计时器 |
| | | let teimss2 = null; // 轮询获取持仓数据计时器 |
| | | import tabHead from "@/components/tabHead.vue"; |
| | | import * as api from "@/axios/api"; |
| | | import { Notify } from "vant"; |
| | | export default { |
| | | components: { |
| | | tabHead |
| | |
| | | handler(state) { |
| | | this.pageNum = 1; |
| | | this.getList(state); |
| | | |
| | | clearInterval(teimss2); |
| | | // 判断如果是获取平仓数据就不再轮询 |
| | | if(state == '1') return |
| | | teimss2 = setInterval(() => { |
| | | this.getList(state); |
| | | }, 3000); |
| | | }, |
| | | immediate: true |
| | | } |
| | |
| | | } |
| | | }, |
| | | created() { |
| | | if (!this.Operation) this.getMoney(); |
| | | this.getMoney(); |
| | | teimss = setInterval(() => { |
| | | this.getMoney(); |
| | | }, 3000); |
| | | }, |
| | | beforeDestroy() { |
| | | clearInterval(teimss); |
| | | clearInterval(teimss2); |
| | | }, |
| | | methods: { |
| | | // 获取 持仓 数据 |
| | |
| | | pageNum: this.pageNum, |
| | | pageSize: this.pageSize |
| | | }; |
| | | |
| | | let data = await api.getchicang(opt); |
| | | |
| | | if (data.status === 0) { |
| | | if (this.active == "0") this.list = data.data.list; |
| | | else this.list2 = data.data.list; |
| | | } |
| | | }, |
| | | // 一键平仓 |
| | | async allsellclick(){ |
| | | let data = await api.allsell(); |
| | | if (data.status === 0) { |
| | | Notify({ type: "success", message: data.msg }); |
| | | this.getList(state); |
| | | } else { |
| | | Notify({ type: "danger", message: data.msg }); |
| | | } |
| | | }, |
| | | open(i, index) { |
| | | if (!this.Operation) return; |
| | | // if (!this.Operation) return; |
| | | this.actObj = i; |
| | | this.actIndex = index; |
| | | }, |
| | |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | .mo_all_sell{ |
| | | padding: 20px 10px; |
| | | background: linear-gradient(90deg, #585fb4, #48529e); |
| | | border-radius: 25px; |
| | | text-align: center; |
| | | margin: 15px ; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | /deep/ .van-tabs__nav { |
| | | background: none; |
| | | |
| | | .van-tab__text--ellipsis { |
| | | overflow: visible; |
| | | } |
| | | |
| | | .van-tab--active { |
| | | color: #ccc !important; |
| | | } |
| | | } |
| | | |
| | | /deep/ .van-tabs__line { |
| | | background-color: rgb(82, 91, 173); |
| | | } |
| | | |
| | | .my_order { |
| | | 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; |
| | | padding-top: 0.1rem; |
| | | flex-direction: column; |
| | | |
| | | .action-item-text { |
| | | font-size: 0.3rem; |
| | | line-height: 0.3rem; |
| | | color: #aaa; |
| | | } |
| | | |
| | | img { |
| | | width: 0.5rem; |
| | | height: 0.5rem; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .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; |
| | |
| | | padding-top: 0.3rem; |
| | | color: #fff; |
| | | } |
| | | |
| | | .text-xs { |
| | | font-size: 0.3rem; |
| | | font-size: 0.45rem; |
| | | color: #c7c9e6; |
| | | text-align: center; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .mo_list { |
| | | padding: 0 0.35rem; |
| | | |
| | | .mol_item { |
| | | margin: 0 0 0.3rem; |
| | | background-color: #13161e; |
| | | border-radius: 0.325rem; |
| | | color: #898a8e; |
| | | margin-top: 0.3rem; |
| | | |
| | | .jiaoyi-action { |
| | | width: 100%; |
| | | height: 1.5rem; |
| | | background-color: #191d27; |
| | | |
| | | .action-item { |
| | | width: 33%; |
| | | flex-shrink: 0; |
| | | flex-direction: column; |
| | | |
| | | .action-item-text { |
| | | font-size: 0.3rem; |
| | | line-height: 0.3rem; |
| | | color: #898a8e; |
| | | } |
| | | |
| | | img { |
| | | width: 0.5rem; |
| | | height: 0.5rem; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .tui-wrapItem { |
| | | padding: 0.175rem 0rem 0; |
| | | color: #898a8e; |
| | | width: 54%; |
| | | line-height: 0.4rem; |
| | | } |
| | | |
| | | .moli_orderTitle { |
| | | padding: 0.3rem 0.3rem 0; |
| | | color: #ccc; |
| | | } |
| | | |
| | | .moli_title { |
| | | padding: 0.3rem; |
| | | border-bottom: 1px solid #494949; |