<template>
|
<div class="page wrapper">
|
<!-- <div class="header">
|
<mt-header title="">
|
<router-link to="" slot="left">
|
<span v-if="$store.state.userInfo.accountType == 1" class="status">(模拟)</span>
|
<span @click="hideNumber" class="status">资产状况
|
<i v-show="$store.state.hide" class="iconfont icon-yanjing1"></i>
|
<i v-show="!$store.state.hide" class="iconfont icon-yanjing"></i>
|
</span>
|
</router-link>
|
<mt-button @click="tosetting" class="setting" slot="right">
|
<i class="iconfont icon-shezhi"></i>
|
</mt-button>
|
</mt-header>
|
</div> -->
|
<div class="account-info">
|
<div class="account-info_avatar">
|
<img src="../../assets/ico/wogerenziliao.png" alt="">
|
</div>
|
<div class="account-info_detail">
|
<div class="account-phone">账户：{{$store.state.userInfo.phone || '未登录'}}</div>
|
<div class="account-name">昵称：{{$store.state.userInfo.nickName || '未登录'}}</div>
|
</div>
|
<div class="account-info_ctl" @click="hideNumber">
|
资产状况
|
<i v-show="$store.state.hide" class="iconfont icon-yanjing"></i>
|
<i v-show="!$store.state.hide" class="iconfont icon-yanjing1"></i>
|
</div>
|
</div>
|
<div class="account-container">
|
<!-- <div class="account-header">
|
<h2 class="title">账户总资产 <span class="sub-title">( 沪深账户 <i
|
v-if="this.$store.state.settingForm.indexDisplay">+ 指数账户</i> <i
|
v-if="this.$store.state.settingForm.futuresDisplay"> + 期货账户</i>)</span></h2>
|
<div>
|
<p v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay "
|
class="account">¥{{$store.state.hide?'****':Number($store.state.userInfo.userAmt +
|
$store.state.userInfo.userIndexAmt).toFixed(2)}}</p>
|
<p v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
|
class="account">¥{{$store.state.hide?'****':Number($store.state.userInfo.userAmt +
|
$store.state.userInfo.userFuturesAmt).toFixed(2)}}</p>
|
<p v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
|
class="account">¥{{$store.state.hide?'****':Number($store.state.userInfo.userAmt).toFixed(2)}}</p>
|
<p v-else-if="this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
|
class="account">¥{{$store.state.hide?'****':Number($store.state.userInfo.userAmt +
|
$store.state.userInfo.userIndexAmt + $store.state.userInfo.userFuturesAmt).toFixed(2)}}</p>
|
</div>
|
<div class="iconfont">
|
<mt-button class="btn-red pull-right" size="small" type="danger" @click="toCash">提现</mt-button>
|
<mt-button class="btn-red pull-right" size="small" type="danger" @click="toRecharge">充值</mt-button>
|
</div>
|
<mt-progress
|
:value="$store.state.userInfo.userAmt/($store.state.userInfo.userAmt + $store.state.userInfo.userIndexAmt)*100"
|
:bar-height="5"></mt-progress>
|
</div> -->
|
<div class="account-preview">
|
<div class="acc-pre-left">
|
<img v-show="$state.theme!='red'" src="../../assets/ico/zongzichan.png" alt="">
|
<img v-show="$state.theme=='red'" src="../../assets/ico/zongzichan-red.png" alt="">
|
|
<span class="ti">总资产</span>
|
<span class="de">
|
<div>
|
<p v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay "
|
class="account">¥{{$store.state.hide?'****':Number($store.state.userInfo.userAmt +
|
$store.state.userInfo.userIndexAmt).toFixed(2)}}</p>
|
<p v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
|
class="account">¥{{$store.state.hide?'****':Number($store.state.userInfo.userAmt +
|
$store.state.userInfo.userFuturesAmt).toFixed(2)}}</p>
|
<p v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
|
class="account">¥{{$store.state.hide?'****':Number($store.state.userInfo.userAmt).toFixed(2)}}</p>
|
<p v-else-if="this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
|
class="account">¥{{$store.state.hide?'****':Number($store.state.userInfo.userAmt +
|
$store.state.userInfo.userIndexAmt + $store.state.userInfo.userFuturesAmt).toFixed(2)}}</p>
|
</div>
|
</span>
|
</div>
|
<div class="acc-pre-center">
|
<div>沪深账户: <span>￥{{$store.state.hide?'****':$store.state.userInfo.userAmt}}</span></div>
|
<div>指数账户: <span>￥{{$store.state.hide?'****':$store.state.userInfo.userIndexAmt}}</span></div>
|
<div>期货账户: <span>￥{{$store.state.hide?'****':Number($store.state.userInfo.userFuturesAmt).toFixed(2)}}</span></div>
|
</div>
|
<div class="acc-pre-right">
|
<div class="redbtn btn" @click="toRecharge">充值</div>
|
<div class="bluebtn btn" @click="toCash">提现</div>
|
</div>
|
</div>
|
<div v-for="item in account" :key="item.key">
|
<div class="account-box" v-if="item.isDisplay">
|
<div class="header" @click="item.isShow = item.isShow?false:true">
|
<!-- <i v-if="item.isShow" class="iconfont jian"></i>
|
<i v-else class="iconfont jia"></i> -->
|
<div class="header-left">
|
<img v-if="item.isShow&&$state.theme =='red'" class="iconfont"
|
src="../../assets/ico/jian-red.png"
|
>
|
<img v-else-if="item.isShow&&$state.theme !='red'" class="iconfont"
|
src="../../assets/ico/jian.png"
|
>
|
<img v-else-if="!item.isShow&&$state.theme !='red'" class="iconfont"
|
src="../../assets/ico/jia.png"
|
>
|
<img v-else class="iconfont"
|
src="../../assets/ico/jia-red.png"
|
>
|
<span :style="{color:$state.theme =='red'?'#000':'#fff'}">{{item.name}}账户</span>
|
<span v-if="item.name == '指数'">(￥{{$store.state.hide?'****':$store.state.userInfo.userIndexAmt}})</span>
|
<span v-if="item.name == '沪深'">(￥{{$store.state.hide?'****':$store.state.userInfo.userAmt}})</span>
|
<span
|
v-if="item.name == '期货'">(￥{{$store.state.hide?'****':Number($store.state.userInfo.userFuturesAmt).toFixed(2)}})
|
</span>
|
</div>
|
<a class="pull-right" @click="toTransfer(1)">
|
<span :style="{color:$state.theme == 'red'?'#000':'#fff'}">资金互转<i class="iconfont icon-you"></i></span>
|
</a>
|
</div>
|
<div v-show="item.isShow" class="content">
|
<ul class="clearfix">
|
<li>
|
<i class="iconfont icon-zijin1"></i>
|
<div class="name">总资产</div>
|
<p v-if="item.name == '指数'" class="number yellow">
|
{{$store.state.hide?'****':$store.state.userInfo.userIndexAmt}}</p>
|
<p v-if="item.name == '沪深'" class="number yellow">
|
{{$store.state.hide?'****':$store.state.userInfo.userAmt}}</p>
|
<p v-if="item.name == '期货'" class="number yellow">
|
{{$store.state.hide?'****':Number($store.state.userInfo.userFuturesAmt).toFixed(2)}}</p>
|
</li>
|
<li>
|
<i class="iconfont icon-keyongzijin"></i>
|
<div class="name">可用资金</div>
|
<p v-if="item.name == '指数'" class="number yellow">
|
{{$store.state.hide?'****':$store.state.userInfo.enableIndexAmt}}</p>
|
<p v-if="item.name == '沪深'" class="number yellow">
|
{{$store.state.hide?'****':$store.state.userInfo.enableAmt}}</p>
|
<p v-if="item.name == '期货'" class="number yellow">
|
{{$store.state.hide?'****':$store.state.userInfo.enableFuturesAmt}}</p>
|
</li>
|
<li>
|
<i class="iconfont icon-dongjiezijin"></i>
|
<div class="name">冻结保证金</div>
|
<p v-if="item.name == '指数'" class="number yellow">
|
{{$store.state.hide?'****':$store.state.userInfo.allIndexFreezAmt}}</p>
|
<p v-if="item.name == '沪深'" class="number yellow">
|
{{$store.state.hide?'****':$store.state.userInfo.allFreezAmt}}</p>
|
<p v-if="item.name == '期货'" class="number yellow">
|
{{$store.state.hide?'****':$store.state.userInfo.allFuturesFreezAmt}}</p>
|
</li>
|
<li>
|
<i class="iconfont icon-yingkuixuanzhong"></i>
|
<div class="name">持仓总盈亏</div>
|
<p v-if="item.name == '指数'"
|
:class="$store.state.userInfo.allIndexProfitAndLose>0?'number red':$store.state.userInfo.allIndexProfitAndLose<0?'number green':'number'">
|
{{$store.state.hide?'****':$store.state.userInfo.allIndexProfitAndLose}}</p>
|
<p v-if="item.name == '沪深'"
|
:class="$store.state.userInfo.allProfitAndLose>0?'number red':$store.state.userInfo.allProfitAndLose<0?'number green':'number'">
|
{{$store.state.hide?'****':$store.state.userInfo.allProfitAndLose}}</p>
|
<p v-if="item.name == '期货'"
|
:class="$store.state.userInfo.allFuturesProfitAndLose>0?'number red':$store.state.userInfo.allFuturesProfitAndLose<0?'number green':'number'">
|
{{$store.state.hide?'****':Number($store.state.userInfo.allFuturesProfitAndLose).toFixed(2)}}</p>
|
</li>
|
<li>
|
<i class="iconfont icon-dongjiezijin"></i>
|
<div class="name">新股冻结保证金</div>
|
<p>{{shengoudj.djzj}}</p>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div v-show="item.isShow"
|
class="pcx"
|
style="padding: 0.12rem 0.4rem 0.15rem;">
|
<!-- 强制平仓线为 ： 可用资金 + 冻结保证金 * 0.6 -->
|
<div style="background:#1A1E29">
|
您的{{item.name}}账户强制平仓线为
|
<span v-if="item.name == '指数'" style="font-weight:bold;font-size:0.26rem;margin:0 0.1rem;">{{$store.state.hide?'****':Number(($store.state.userInfo.enableIndexAmt + $store.state.userInfo.allIndexFreezAmt) * indexSettingInfo.forceSellPercent).toFixed(2)}} </span>
|
<span v-if="item.name == '沪深'" style="font-weight:bold;font-size:0.26rem;margin:0 0.1rem;">{{$store.state.hide?'****':Number(($store.state.userInfo.enableAmt + $store.state.userInfo.allFreezAmt) * settingInfo.forceStopPercent).toFixed(2)}} </span>
|
<span v-if="item.name == '期货'" style="font-weight:bold;font-size:0.26rem;margin:0 0.1rem;">{{$store.state.hide?'****':Number(($store.state.userInfo.enableFuturesAmt + $store.state.userInfo.allFuturesFreezAmt) * futuresSettingInfo.forceSellPercent).toFixed(2)}} </span>
|
<!-- 请实时注意账户风险 -->
|
<i @click="focePromptPopup = true" ref="button" class="iconfont icon-xinshou"></i>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="panel">
|
<div class="panel-head">
|
<span class="font-w">分仓配资</span>
|
</div>
|
<div class="panel-body">
|
<div class="row">
|
<div @click="goFunds(3)" class="col-xs-3">
|
<i class="iconfont icon-rongzi2"></i>
|
新股申购
|
</div>
|
<div @click="goFunds(1)" class="col-xs-3">
|
<i class="iconfont icon-rongzi2"></i>
|
配资主页
|
</div>
|
<div @click="goFunds(2)" class="col-xs-3">
|
<i class="iconfont icon-rongzi2"></i>
|
按天配资
|
</div>
|
<div @click="goFundsList(1)" class="col-xs-3">
|
<i class="iconfont icon-rongzi2"></i>
|
我的配资
|
</div>
|
<div @click="goFundsList(2)" class="col-xs-3">
|
<i class="iconfont icon-rongzi2"></i>
|
配资持仓
|
</div>
|
<div @click="goFundsList(3)" class="col-xs-3">
|
<i class="iconfont icon-rongzi2"></i>
|
配资平仓
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="panel">
|
<div class="panel-head">
|
<span class="font-w">我的持仓</span>
|
</div>
|
<div class="panel-body">
|
<div class="row">
|
<div @click="goOrderList(1)" class="col-xs-3">
|
<i class="iconfont icon-rongzi2"></i>
|
沪深持仓
|
</div>
|
<div @click="goOrderList(1)" class="col-xs-3">
|
<i class="iconfont icon-rongzilishi"></i>
|
沪深平仓
|
</div>
|
<div v-if="this.$store.state.settingForm.indexDisplay" @click="goOrderList(2)" class="col-xs-3">
|
<i class="iconfont icon-zhishuyidong"></i>
|
指数持仓
|
</div>
|
<div v-if="this.$store.state.settingForm.indexDisplay" @click="goOrderList(2)" class="col-xs-3">
|
<i class="iconfont icon-geguyingkui"></i>
|
指数平仓
|
</div>
|
<div v-if="this.$store.state.settingForm.futuresDisplay" @click="goOrderList(4)" class="col-xs-3">
|
<i class="iconfont icon-jiaoyitixing"></i>
|
期货持仓
|
</div>
|
<div v-if="this.$store.state.settingForm.futuresDisplay" @click="goOrderList(4)" class="col-xs-3">
|
<i class="iconfont icon-qihuo1"></i>
|
期货平仓
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="other">
|
<ul class="after">
|
<li @click="toAuthentication">
|
<span>
|
<!-- <icon name="shoufei" slot="icon"></icon> -->
|
<!-- <i style="font-size:0.34rem" class="iconfont icon-shenfenrenzheng"></i> -->
|
<img src="../../assets/ico/shimin.png"
|
style="width:.28rem;height:.24rem;margin-right: 0.15rem;"
|
>
|
实名认证
|
<span class="renzhen done"
|
v-if="$store.state.userInfo.isActive == 2"
|
>
|
<i class="iconfont el-icon-circle-check" ></i>
|
审核通过
|
</span>
|
<span class="renzhen ing"
|
v-if="$store.state.userInfo.isActive == 0 || $store.state.userInfo.isActive == 3" style="color:red;font-size: 0.7rem;"
|
>
|
<i class="iconfont el-icon-circle-close" ></i>
|
未审核
|
</span>
|
<!-- <i v-if="$store.state.userInfo.isActive == 1" style="color:red;font-size: 0.7rem;"
|
class="iconfont icon-shenhezhong"></i>
|
<i v-if="$store.state.userInfo.isActive == 2" style="color:red;font-size: 0.7rem;"
|
class="iconfont icon-tongguo1"></i>
|
<i v-if="$store.state.userInfo.isActive == 0 || $store.state.userInfo.isActive == 3"
|
style="color:red;font-size: 0.75rem;" class="iconfont icon-icon-test"></i> -->
|
<icon name="right66" class="right" slot="icon"></icon>
|
</span>
|
</li>
|
<li @click="goCard">
|
<span>
|
<!-- <i style="font-size:0.28rem" class="iconfont icon-yinhangqia"></i> -->
|
<img src="../../assets/ico/yinhangka.png"
|
style="width:.28rem;height:.24rem;margin-right: 0.15rem;"
|
>
|
银行卡
|
<!-- <i v-if="!$store.state.bankInfo.bankNo" style="color:red;font-size: 0.3rem;margin-left: 0.1rem;"
|
class="iconfont icon-iconfontweitongguo"></i>
|
<i v-if="$store.state.bankInfo.bankNo" style="color:red;font-size: 0.3rem;margin-left: 0.1rem;"
|
class="iconfont icon-yanzhengma"></i> -->
|
<icon name="right66" class="right" slot="icon"></icon>
|
</span>
|
</li>
|
<li >
|
<span>
|
<!-- <i style="font-size:0.28rem" class="iconfont icon-yinhangqia"></i> -->
|
<img src="../../assets/ico/gaimima.png"
|
style="width:.24rem;height:.24rem;margin-right: 0.15rem;"
|
>
|
修改密码
|
<!-- <i v-if="!$store.state.bankInfo.bankNo" style="color:red;font-size: 0.3rem;margin-left: 0.1rem;"
|
class="iconfont icon-iconfontweitongguo"></i>
|
<i v-if="$store.state.bankInfo.bankNo" style="color:red;font-size: 0.3rem;margin-left: 0.1rem;"
|
class="iconfont icon-yanzhengma"></i> -->
|
<icon name="right66" class="right" slot="icon"></icon>
|
</span>
|
</li>
|
</ul>
|
<ul class="after">
|
<!-- <li @click="goOrderList">
|
<span>
|
<i style="font-size:0.28rem" class="iconfont icon-chicang"></i>
|
我的持仓
|
<icon name="right66" class="right" slot="icon"></icon>
|
</span>
|
</li> -->
|
|
</ul>
|
<ul class="after">
|
|
<li @click="goDetail">
|
<span>
|
<!-- <i style="font-size:0.28rem" class="iconfont icon-zijinmingxi"></i> -->
|
<img src="../../assets/ico/zijin.png"
|
style="width:.27rem;height:.24rem;margin-right: 0.15rem;"
|
>
|
资金明细
|
<icon name="right66" class="right" slot="icon"></icon>
|
</span>
|
</li>
|
<li @click="toRechargeList">
|
<span>
|
<!-- <i style="font-size:0.28rem" class="iconfont icon-dingdanjilu1"></i> -->
|
<img src="../../assets/ico/chongzhi.png"
|
style="width:.27rem;height:.27rem;margin-right: 0.15rem;"
|
>
|
充值记录
|
<icon name="right66" class="right" slot="icon"></icon>
|
</span>
|
</li>
|
<li @click="toCashList">
|
<span>
|
<!-- <i style="font-size:0.28rem" class="iconfont icon-dingdanjilu1"></i> -->
|
<img src="../../assets/ico/tixian.png"
|
style="width:.24rem;height:.24rem;margin-right: 0.15rem;"
|
>
|
提现记录
|
<icon name="right66" class="right" slot="icon"></icon>
|
</span>
|
</li>
|
</ul>
|
<!-- <ul class="after">
|
<li @click="changeStyle">
|
<span>
|
<i style="font-size:0.28rem" class="iconfont icon-shouye"></i>
|
主题换肤
|
<span class="right">
|
<i v-if="styleName == 'red'" style="color:#ff9800" class="iconfont icon-baitian"></i>
|
<i v-if="styleName == 'black'" style="color:#ff9800" class="iconfont icon-yewan1"></i>
|
</span>
|
</span>
|
</li>
|
</ul> -->
|
<mt-popup v-model="focePromptPopup" popup-transition="popup-fade" class="mint-popup-white">
|
<div class="clearfix">
|
<a @click="focePromptPopup = false" class="pull-right"><i class="iconfont icon-weitongguo"></i></a>
|
</div>
|
<p class="font-title">什么是强制平仓线？</p>
|
<!-- 账户可用资金 + -->
|
<p v-if="$store.state.settingForm.stockDisplay" class="font-bold">(沪深)强制平仓线 = (账户可用资金+冻结保证金) *
|
{{settingInfo.forceStopPercent ? settingInfo.forceStopPercent:0}}</p>
|
<p v-if="$store.state.settingForm.indexDisplay" class="font-bold">(指数)强制平仓线 = (账户可用资金+冻结保证金) *
|
{{indexSettingInfo.forceSellPercent ? indexSettingInfo.forceSellPercent:0}}</p>
|
<p v-if="$store.state.settingForm.futuresDisplay" class="font-bold">(期货)强制平仓线 = (账户可用资金+冻结保证金) *
|
{{futuresSettingInfo.forceSellPercent ? futuresSettingInfo.forceSellPercent:0}}</p>
|
<p v-if="$store.state.settingForm.stockDisplay">当您的沪深账户持仓总盈亏为<span class="green number">-{{Number(($store.state.userInfo.enableAmt + $store.state.userInfo.allFreezAmt) * settingInfo.forceStopPercent).toFixed(2)}}</span>时系统会强制平仓
|
</p>
|
<p v-if="$store.state.settingForm.indexDisplay">当您的指数账户持仓总盈亏为<span class="green number">-{{Number(($store.state.userInfo.allIndexFreezAmt + $store.state.userInfo.enableIndexAmt) * indexSettingInfo.forceSellPercent).toFixed(2)}}</span>时系统会强制平仓
|
</p>
|
<p v-if="$store.state.settingForm.futuresDisplay">当您的期货账户持仓总盈亏为<span class="green number">-{{Number(($store.state.userInfo.allFuturesFreezAmt + $store.state.userInfo.enableFuturesAmt) * futuresSettingInfo.forceSellPercent).toFixed(2)}}</span>时系统会强制平仓
|
</p>
|
</mt-popup>
|
<div class="btnbox">
|
<span class="text-center btnok loginout" @click="toRegister">注销登录</span>
|
</div>
|
</div>
|
<!-- <foot></foot> -->
|
</div>
|
</template>
|
<script type="text/ecmascript-6">
|
import { Toast } from 'mint-ui'
|
// import '@/assets/style/bg.less'
|
import foot from '../../components/foot/foot'
|
// import { hideNumberTo } from '@/utils/utils'
|
import * as api from '@/axios/api'
|
|
export default {
|
components: {
|
foot
|
},
|
data () {
|
return {
|
user: {
|
img: ''
|
},
|
defaultUser: {
|
img: require('../../assets/img/default-head.png')
|
},
|
changeHideStatus: false,
|
userAmt: '',
|
settingInfo: {}, // 设置信息
|
indexSettingInfo: {}, // 设置信息 指数
|
futuresSettingInfo: {}, // 设置信息 期货
|
focePromptPopup: false, // 强制平仓提示框
|
buttonBottom: 0,
|
account: [
|
{ name: '沪深', link: 'stock', isShow: true, isDisplay: false },
|
{ name: '指数', link: 'index', isShow: false, isDisplay: false },
|
{ name: '期货', link: 'futures', isShow: false, isDisplay: false }
|
],
|
showChangeBtn: false, // 是否显示资金互转按钮
|
styleName: 'black',
|
shengoudj:''
|
}
|
},
|
watch: {
|
// changeHideStatus(newval){
|
// // this.userAmt = hideNumberTo(this.$store.state.userInfo.userAmt)
|
// }
|
},
|
computed: {},
|
created () {
|
this.getUserInfo()
|
this.styleName = window.localStorage.getItem('styleName') ? window.localStorage.getItem('styleName') : 'red'
|
},
|
mounted () {
|
this.getSettingInfo()
|
this.getIndexSettingInfo()
|
this.getFuturesSetting()
|
this.getCardDetail()
|
this.getprice()
|
this.changeHideStatus = this.$store.state.hide
|
if (this.$store.state.settingForm.indexDisplay || this.$store.state.settingForm.futuresDisplay) {
|
this.showChangeBtn = true
|
}
|
},
|
methods: {
|
async getprice() {
|
let opt = {};
|
let data = await api.getprice(opt);
|
this.shengoudj = data.data;
|
console.log(this.shengoudj, "申购");
|
},
|
goFunds(type) {
|
if (type == 1) {
|
this.$router.push('/funds')
|
}
|
if (type == 2) {
|
this.$router.push('/days')
|
}
|
if (type == 3){
|
this.$router.push('/xingu')
|
}
|
},
|
changeStyle () {
|
if (this.styleName === 'red') {
|
this.styleName = 'black'
|
this.$store.state.className = 'black'
|
window.localStorage.setItem('styleName', 'black')
|
} else {
|
this.styleName = 'red'
|
this.$store.state.className = 'red'
|
window.localStorage.setItem('styleName', 'red')
|
}
|
window.location.reload()
|
},
|
async getProductSetting () {
|
let data = await api.getProductSetting()
|
if (data.status === 0) {
|
this.$store.state.settingForm = data.data
|
// if(this.$store.state.userInfo.accountType != 1){
|
this.account[0].isDisplay = data.data.stockDisplay
|
this.account[1].isDisplay = data.data.indexDisplay
|
this.account[2].isDisplay = data.data.futuresDisplay
|
// }else{
|
// this.account[0].isDisplay = true
|
// this.account[1].isDisplay = true
|
// this.account[2].isDisplay = true
|
// }
|
} else {
|
this.$message.error(data.msg)
|
}
|
},
|
hideNumber () {
|
this.changeHideStatus = this.$store.state.hide
|
let i = false
|
let j = true
|
this.$store.state.hide = this.$store.state.hide ? i : j
|
},
|
goOrderList: function (val) {
|
// this.$router.push('/orderlist')
|
this.$router.push('/orderlist?index=' + val)
|
},
|
goFundsList: function (val) {
|
this.$router.push('/fundslist?index=' + val)
|
},
|
goDetail: function () {
|
this.$router.push('/detail')
|
},
|
goCard: function () {
|
this.$router.push('/card')
|
},
|
toAggre: function () {
|
this.$router.push('/aggre')
|
},
|
toAuthentication: function () {
|
this.$router.push('/authentication')
|
},
|
toRecharge () {
|
// 充值
|
this.$router.push('/recharge')
|
},
|
toCash () {
|
// 提现
|
this.$router.push('/cash')
|
},
|
async toRegister () {
|
// 注销登陆
|
this.clearCookie()
|
let data = await api.logout()
|
if (data.status === 0) {
|
// Toast(data.msg)
|
this.$router.push('/login')
|
} else {
|
Toast(data.msg)
|
}
|
},
|
tosetting () {
|
this.$router.push('/setting')
|
},
|
toCashList () {
|
this.$router.push('/Cashlist')
|
},
|
toRechargeList () {
|
this.$router.push('/rechargelist')
|
},
|
toTransfer (val) {
|
this.$router.push({
|
path: '/transfer',
|
query: {
|
type: val
|
}
|
})
|
},
|
async getCardDetail () {
|
// 获取银行卡信息
|
let data = await api.getBankCard()
|
if (data.status === 0) {
|
this.$store.state.bankInfo = data.data
|
} else {
|
// Toast(data.msg)
|
}
|
},
|
async getSettingInfo () {
|
let data = await api.getSetting()
|
if (data.status === 0) {
|
// 成功
|
this.settingInfo = data.data
|
} else {
|
Toast(data.msg)
|
}
|
},
|
async getIndexSettingInfo () {
|
// 网站设置信息 指数
|
let data = await api.getIndexSetting()
|
if (data.status === 0) {
|
// 成功
|
this.indexSettingInfo = data.data
|
} else {
|
Toast(data.msg)
|
}
|
},
|
async getFuturesSetting () {
|
// 网站设置信息 期货
|
let data = await api.getFuturesSetting()
|
if (data.status === 0) {
|
// 成功
|
this.futuresSettingInfo = data.data
|
} else {
|
Toast(data.msg)
|
}
|
},
|
async getUserInfo () {
|
// 获取用户信息
|
// let showcookie = this.getCookie('USER_TOKEN');
|
let data = await api.getUserInfo()
|
if (data.status === 0) {
|
this.getProductSetting()
|
this.$store.state.userInfo = data.data
|
} else {
|
Toast(data.msg)
|
}
|
this.$store.state.user = this.user
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
// @bgColor: #fff;
|
@bgColor: #16171d;
|
@fontColor: #fff;
|
@borderColor: #676b6f;
|
body {
|
background: #000
|
}
|
|
.page .head {
|
width: 100%;
|
// height: 0;
|
// padding-top: 44%;
|
height: 2.8rem;
|
background-image: url('../../assets/img/header.png');
|
background-size: 100% 100%;
|
|
}
|
.wrapper {
|
background-color: @bgColor;
|
}
|
.after {
|
.iconfont {
|
vertical-align: middle;
|
margin-right: 0.15rem;
|
}
|
}
|
|
.setting {
|
margin-right: 0.2rem;
|
}
|
|
.status {
|
font-size: 0.24rem;
|
// margin-left: 0.2rem;
|
.iconfont {
|
margin-left: 0.2rem;
|
font-size: 0.24rem;
|
}
|
}
|
|
.user {
|
.user-top {
|
padding: 0 0.4rem;
|
// width: 96%;
|
// height: 1.96rem;
|
margin: 0 auto;
|
background: #2e3237;
|
// border-radius: 0.11rem;
|
box-shadow: 0.014rem 0.014rem 0.014rem rgba(103, 107, 111, 0.38);
|
// margin-top: -0.945rem;
|
position: relative;
|
margin-bottom: .16rem;
|
padding-bottom: 0.2rem;
|
margin-top: 0.1rem;
|
|
.user-header {
|
width: 1.4rem;
|
height: 1.4rem;
|
border-radius: 100%;
|
background: #000;
|
position: absolute;
|
left: 50%;
|
top: -0.68rem;
|
margin-left: -0.68rem;
|
|
.green {
|
color: green;
|
}
|
}
|
|
.user-img {
|
width: 1.3rem;
|
height: 1.3rem;
|
background-color: @bgColor;
|
border-radius: 100%;
|
margin: 0 auto;
|
margin-top: 0.014rem;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.user-box {
|
// padding-top: 1.08rem;
|
font-size: 0.33rem;
|
color: @fontColor;
|
font-weight: 700;
|
height: 0.68rem;
|
line-height: 0.695rem;
|
|
.btn-red {
|
// width: 1.418rem;
|
width: 2.418rem;
|
height: 0.68rem;
|
font-size: 0.29rem;
|
line-height: 0.68rem;
|
padding: 0;
|
border-radius: 0.028rem;
|
background: #b60c0d;
|
}
|
}
|
}
|
}
|
|
.other {
|
margin: 0.12rem .28rem;
|
|
ul {
|
position: relative;
|
background-color: #1F2636;
|
border-radius: 4px;
|
overflow: hidden;
|
padding: 0 0.2rem ;
|
li {
|
position: relative;
|
height: 0.92rem;
|
line-height: 0.92rem;
|
// padding: 0 0.4rem;
|
font-size: 0.26rem;
|
background-color: #1F2636;
|
position: relative;
|
border-bottom: 1px solid #3f444a;
|
}
|
li:last-child {
|
border-bottom: none;
|
}
|
}
|
|
.after {
|
margin-bottom: 0.125rem;
|
}
|
|
}
|
.renzhen{
|
position: relative;
|
padding: 0 .1rem;
|
font-size: .18rem;
|
height: .35rem;
|
line-height: .35rem;
|
display: inline-block;
|
vertical-align: middle;
|
padding-left: .3rem;
|
.iconfont{
|
font-size: .18rem;
|
vertical-align: middle;
|
position: absolute;
|
left: 0.05rem ;
|
top: .05rem;
|
}
|
&.ing {
|
background-color: #E6003E;
|
}
|
&.done {
|
background-color: #04823E;
|
}
|
}
|
.other ul li svg {
|
width: 16px;
|
height: 15px;
|
line-height: 25px;
|
margin-top: .28rem;
|
color: #ccc;
|
}
|
|
.other ul li svg:first {
|
float: left;
|
margin-right: 0.39rem;
|
}
|
|
.my-Assets {
|
.img-box {
|
width: 1.3rem;
|
height: 1.3rem;
|
}
|
|
.assets-box {
|
line-height: 0.5rem;
|
margin-top: 0.2rem;
|
|
.iconfont {
|
margin-right: 0.2rem;
|
}
|
}
|
|
font-size: 0.25rem;
|
padding: 0.2rem 0 0.3rem;
|
}
|
|
.user-header {
|
padding: 0rem 0.3rem 0;
|
background: #2e3237;
|
margin-bottom: 0.15rem;
|
|
.box:nth-child(1) {
|
margin-right: 6%;
|
}
|
|
.box {
|
padding: 0.26rem 0.25rem 0.3rem;
|
padding: 0.26rem 0.25rem 0.2rem;
|
background-color: #c6c8d4;
|
width: 47%;
|
float: left;
|
color: #2f2f2f;
|
border-radius: 0.2rem 0.2rem 0.1rem 0.1rem;
|
|
.name {
|
font-size: 0.26rem;
|
font-weight: bold;
|
margin-bottom: 0.2rem;
|
}
|
|
.account {
|
font-size: 0.3rem;
|
font-weight: bold;
|
}
|
|
.name2 {
|
font-size: 0.23rem;
|
margin-top: 0.2rem;
|
|
span {
|
padding-left: 0.1rem;
|
}
|
}
|
}
|
}
|
|
.loginout {
|
color: #999;
|
font-size: 0.3rem;
|
background: none;
|
}
|
|
.btnbox .btnok {
|
background: none;
|
font-size: 0.28rem;
|
height: 0.6rem;
|
line-height: 0.6rem;
|
color: #606060;
|
}
|
|
.btnbox {
|
width: 100%;
|
padding: 0 0.3rem;
|
}
|
|
.mint-popup-1 {
|
color: #333;
|
width: 200px;
|
border-radius: 8px;
|
padding: 10px;
|
transform: translate(-50%, 0);
|
|
h1 {
|
font-size: 20px;
|
color: #26a2ff;
|
}
|
|
p {
|
margin-bottom: 10px;
|
}
|
|
top: 3.2rem;
|
}
|
|
.mint-popup-1::before {
|
triangle: 10px top #fff;
|
content: '';
|
position: absolute;
|
top: -20px;
|
right: 50px;
|
}
|
|
.mint-popup-white {
|
padding: 0.3rem 0.28rem;
|
|
.font-title {
|
font-size: 0.26rem;
|
margin-bottom: 0.12rem;
|
}
|
|
.font-bold {
|
font-weight: bold;
|
}
|
|
.number {
|
margin: 0 0.1rem;
|
font-weight: bold;
|
font-size: 0.26rem;
|
}
|
|
p {
|
line-height: 0.4rem;
|
}
|
}
|
|
// 总资产
|
.account-header {
|
padding: 0.2rem 0.2rem 0;
|
position: relative;
|
background-color: #1F2636;
|
|
.iconfont {
|
position: absolute;
|
right: 0.2rem;
|
// top: 50%;
|
top: 1.1rem;
|
font-size: 0.8rem;
|
color: #FF5722;
|
margin-top: -0.4rem;
|
|
.btn-red {
|
margin-left: 0.2rem;
|
padding: 0.08rem 0.2rem;
|
background: #FF5722;
|
}
|
}
|
|
.title {
|
font-size: 0.28rem;
|
margin-bottom: 0.26rem;
|
}
|
|
.sub-title {
|
color: #7e8c8d;
|
font-size: 0.2rem;
|
|
i {
|
font-style: normal;
|
}
|
}
|
|
.account {
|
color: #b60c0d;
|
font-size: 0.4rem;
|
font-weight: 600;
|
font-family: lightnumber;
|
}
|
}
|
|
.account-box {
|
// margin-bottom: 0.12rem;
|
padding: 0 0.2rem;
|
// padding: 0 0.35rem;
|
background-color: #1F2636;
|
.header {
|
font-size: 0.22rem;
|
line-height: 0.7rem;
|
height: .7rem;
|
display: flex;
|
justify-content: space-between;
|
.header-left{
|
display: flex;
|
align-items: center;
|
}
|
img.iconfont {
|
color: #f5ca07;
|
width: .3rem;
|
height: .3rem;
|
display: inline-block;
|
margin-right: .2rem;
|
&.jian {
|
background-image: url(../../assets/ico/jian.png);
|
}
|
}
|
|
.iconfont {
|
font-size: 0.24rem;
|
vertical-align: middle;
|
margin: 0 0.05rem;
|
}
|
}
|
|
.content {
|
padding: 0 0.2rem 0.18rem;
|
|
li {
|
width: 50%;
|
float: left;
|
padding: 0.2rem 0.2rem 0.04rem 0.56rem;
|
line-height: 0.36rem;
|
position: relative;
|
|
&:nth-child(2) {
|
.iconfont {
|
color: #2f97fc;
|
}
|
}
|
|
&:nth-child(3) {
|
.iconfont {
|
color: #17b780;
|
}
|
}
|
|
&:nth-child(3) {
|
.iconfont {
|
color: #ff7602;
|
}
|
}
|
|
.iconfont {
|
position: absolute;
|
top: 0.38rem;
|
left: 0;
|
font-size: 0.42rem;
|
color: #fd4256;
|
|
}
|
|
.name {
|
color: #888;
|
font-size: 0.22rem;
|
}
|
|
.number {
|
font-size: 0.27rem;
|
}
|
|
}
|
}
|
}
|
|
.mt-progress {
|
height: 5px;
|
line-height: 5px;
|
margin-top: 0.3rem;
|
border-radius: 0.2rem;
|
// padding: 0 0.2rem;
|
/deep/ .mt-progress-runway {
|
border-radius: 0.2rem;
|
background-color: #ff7602;
|
}
|
|
/deep/ .mt-progress-progress {
|
border-radius: 0.2rem;
|
background-color: #bb3d4c;
|
}
|
}
|
|
.panel {
|
margin: 0.2rem .28rem;
|
padding: 0 0.2rem;
|
background-color: #1F2636;
|
|
.panel-head {
|
height: 0.88rem;
|
line-height: 0.88rem;
|
padding-top: .1rem;
|
text-align: center;
|
font-weight: bold;
|
.font-w {
|
font-size: 0.28rem;
|
// font-weight: 600;
|
// color: #000;
|
}
|
}
|
|
.panel-body {
|
padding: 0 0.2rem;
|
text-align: center;
|
|
.iconfont {
|
display: block;
|
font-size: 20px;
|
margin-bottom: 0.1rem;
|
color: #138DB2;
|
}
|
|
.font {
|
font-size: 0.3rem;
|
color: #000;
|
font-weight: 600;
|
line-height: 0.5rem;
|
}
|
|
.col-xs-3 {
|
padding: 0.2rem 0;
|
}
|
}
|
}
|
|
.account-info {
|
padding: .28rem;
|
display: flex;
|
justify-content: space-between;
|
&_avatar {
|
width: 1.13rem;
|
height: 1.13rem;
|
line-height: 1.13rem;
|
border-radius: 50%;
|
background-color: #444656;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
img {
|
width: .55rem;
|
height: .58rem;
|
}
|
}
|
&_detail {
|
padding-left: .22rem;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
flex: 1;
|
.account-phone{
|
font-size: .3rem;
|
color: #fff;
|
}
|
.account-name {
|
color: #636A93;
|
}
|
}
|
&_ctl {
|
margin-top: .1rem;
|
}
|
}
|
.account-container {
|
// margin: .28rem;
|
width: 6.9rem;
|
margin: .28rem auto;
|
border-radius: 5px;
|
overflow: hidden;
|
background-color: #1F2636;
|
.pcx {
|
margin: .2rem;
|
// background-color: #1F2636;
|
background:#1A1E29
|
}
|
.account-preview {
|
display: flex;
|
padding: .3rem .2rem .28rem;
|
.acc-pre-left {
|
width: 1.92rem;
|
height: 1.92rem;
|
background-image: url(../../assets/ico/round.png);
|
background-size: cover;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
text-align: center;
|
align-items: center;
|
position: relative;
|
img {
|
width:.36rem;
|
height: .36rem;
|
margin-bottom: .1rem;
|
}
|
span.ti {
|
font-size: .24rem;
|
color: #ccc;
|
margin-bottom: .1rem;
|
}
|
span.de {
|
font-size: .24rem;
|
color: #009C46;
|
font-family: lightnumber;
|
.account {
|
font-family: lightnumber;
|
}
|
}
|
&::after {
|
display: block;
|
content : "";
|
width: .67rem;
|
height: 2.21rem;
|
position: absolute;
|
top: -.16rem;
|
right: -.44rem;
|
background-image: url(../../assets/ico/round-r.png);
|
background-size: cover;
|
}
|
}
|
.acc-pre-center {
|
margin-left: .45rem;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
font-family: lightnumber;
|
color: #ccc;
|
span {
|
color: #fff;
|
font-family: lightnumber;
|
font-weight: 300;
|
}
|
}
|
.acc-pre-right {
|
flex: 1;
|
align-items: center;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
.btn {
|
color: #fff;
|
padding: 0 10px;
|
border-radius: .2rem;
|
}
|
.redbtn {
|
background-color: #E6003E;
|
}
|
.bluebtn {
|
background-color: #024DA1;
|
}
|
}
|
}
|
}
|
|
.red-theme {
|
.wrapper {
|
background-color: #E9E9E9;
|
}
|
.account-info_avatar{
|
background-color: #B5B5B5;
|
}
|
.account-phone{
|
color: #000;
|
}
|
.account-name {
|
color: #999999;
|
}
|
.account-info_ctl{
|
color: #858585;
|
}
|
.account-container{
|
background-color: #fff;
|
span.ti{
|
color: #000 !important;
|
}
|
}
|
.acc-pre-center{
|
color: #333 !important;
|
span {
|
color: #333 !important;
|
}
|
}
|
.acc-pre-right {
|
.bluebtn {
|
background-color: #222 !important;
|
}
|
}
|
.account-box{
|
background-color: #fff;
|
}
|
.name {
|
color : #12354E !important;
|
}
|
.number {
|
color: #E6003E !important;
|
}
|
.pcx {
|
background-color: #E7E7E8;
|
div {
|
background-color: transparent !important;
|
color: #000;
|
}
|
}
|
.panel {
|
background-color: #fff;
|
color: #000;
|
.panel-head {
|
border-bottom-color: #cbcbcb;
|
}
|
.iconfont {
|
color: #E6003E;
|
}
|
.font-w {
|
color: #000;
|
}
|
}
|
.other {
|
.after{
|
background-color: #fff;
|
li{
|
background-color: #fff;
|
color: #000;
|
border-bottom-color: #cbcbcb;
|
.renzhen {
|
color: #fff;
|
}
|
svg{
|
color: #222;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
