feat: 初始化
This commit is contained in:
George
182
pages/home/components/accountCard/index.scss
Normal file
182
pages/home/components/accountCard/index.scss
Normal file
@ -0,0 +1,182 @@
|
||||
.accountCard {
|
||||
padding: 24px 16px 16px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: -1px 0px 5px 1px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
&.isHistory {
|
||||
padding-bottom: 0px;
|
||||
.accountCardHeader {
|
||||
.headerLeft {
|
||||
border-color: #e5e5e5;
|
||||
.accountType {
|
||||
color: #666666;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.accountDetails {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.accountCardHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
.headerLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 2px solid #0f3675;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
.accountType {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: -1px;
|
||||
padding: 0 20px;
|
||||
height: 102%; // 避免错误渲染出的缝隙
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background-color: #0f3675;
|
||||
}
|
||||
.accountNumber {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #071428;
|
||||
}
|
||||
}
|
||||
.historyAccountTag {
|
||||
padding: 5px 11px;
|
||||
color: #666666;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 15px;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
.moreIcon {
|
||||
width: 32px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.accountDetails {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
row-gap: 34px;
|
||||
margin-top: 24px;
|
||||
padding-bottom: 37px;
|
||||
.detailItem {
|
||||
.label {
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
.value {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
color: #333333;
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
font-weight: 700;
|
||||
.valueAfter {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.moreContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
row-gap: 9px;
|
||||
margin-top: 16px;
|
||||
padding-bottom: 10px;
|
||||
.moreContentItems {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
column-gap: 10px;
|
||||
row-gap: 12px;
|
||||
width: 100%;
|
||||
.moreContentItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
column-gap: 7px;
|
||||
height: 57px;
|
||||
font-size: min(18px, 0.9rem);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e5e5e5;
|
||||
.icon {
|
||||
flex-shrink: 0;
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.statusTag {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 3px 8px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #999999;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
}
|
||||
.divider {
|
||||
margin-bottom: 18px;
|
||||
height: 1px;
|
||||
background-color: #ececec;
|
||||
}
|
||||
.bottomBtns {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
height: 40px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #25c0e5;
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.deposit {
|
||||
color: #fff;
|
||||
background-color: #25c0e5;
|
||||
&:hover {
|
||||
background-color: #41dbec;
|
||||
}
|
||||
}
|
||||
}
|
||||
.historyAccountTip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
row-gap: 14px;
|
||||
padding: 16px 21px;
|
||||
width: 100%;
|
||||
margin-left: -16px;
|
||||
background-color: #f6f6f6;
|
||||
font-size: 16px;
|
||||
color: #777777;
|
||||
text-align: center;
|
||||
.reactivateBtn {
|
||||
padding: 4px 19px;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
color: #666666;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
175
pages/home/components/accountCard/index.vue
Normal file
175
pages/home/components/accountCard/index.vue
Normal file
@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<view :class="['accountCard', isHistory ? 'isHistory' : '']">
|
||||
<view>
|
||||
<view class="accountCardHeader">
|
||||
<view class="headerLeft">
|
||||
<view class="accountType" v-if="values.mt4_type_name">{{ values.mt4_type_name }}</view>
|
||||
<view class="accountNumber">{{ values.mt4_login }}</view>
|
||||
</view>
|
||||
<view v-if="!isHistory">
|
||||
<uni-icons v-show="!moreContentVisible" class="moreIcon" type="more-filled" size="32" @click="changeMoreContentVisible"></uni-icons>
|
||||
<uni-icons
|
||||
v-show="moreContentVisible"
|
||||
style="width: 16px; height: 16px"
|
||||
class="moreIcon"
|
||||
type="closeempty"
|
||||
:size="16"
|
||||
@click="changeMoreContentVisible"
|
||||
></uni-icons>
|
||||
</view>
|
||||
<view v-else class="historyAccountTag">{{ getHistoryAccountType() }}</view>
|
||||
</view>
|
||||
<view v-show="!moreContentVisible" class="accountDetails">
|
||||
<view class="detailItem">
|
||||
<view class="label">{{ $t('home.mtBalance') }}</view>
|
||||
<view class="value">
|
||||
{{ getNumberLocaleIntegerPart(values?.mt4_balance) }}
|
||||
<text class="valueAfter">.{{ getNumberDecimalPart(values?.mt4_balance) }} {{ values?.ifCent === 'NO' ? 'USD' : 'USC' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detailItem">
|
||||
<view class="label">{{ $t('home.mtEquity') }}</view>
|
||||
<view class="value">
|
||||
{{ getNumberLocaleIntegerPart(values?.equity) }}
|
||||
<text class="valueAfter">.{{ getNumberDecimalPart(values?.equity) }} {{ values?.ifCent === 'NO' ? 'USD' : 'USC' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detailItem">
|
||||
<view class="label">{{ $t('home.credit') }}</view>
|
||||
<view class="value">
|
||||
{{ getNumberLocaleIntegerPart(values?.mt4_credit) }}
|
||||
<text class="valueAfter">.{{ getNumberDecimalPart(values?.mt4_credit) }} {{ values?.ifCent === 'NO' ? 'USD' : 'USC' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detailItem">
|
||||
<view class="label">{{ $t('home.mtLeverage') }}</view>
|
||||
<view class="value">{{ isValidNumber(values?.mt4_leverage) ? `1:${values?.mt4_leverage}` : '-' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-show="moreContentVisible" class="moreContent">
|
||||
<view class="moreContentItems">
|
||||
<view class="moreContentItem" @click="toAdjustLeveragePage">
|
||||
<image class="icon" src="/static/leverage.png" mode="aspectFit"></image>
|
||||
<text>{{ $t('home.leverage') }}</text>
|
||||
</view>
|
||||
<view class="moreContentItem" @click="toTradeRecordPage">
|
||||
<image class="icon" src="/static/tradeRecord.png" mode="aspectFit"></image>
|
||||
<text>{{ $t('home.tradeRecord') }}</text>
|
||||
</view>
|
||||
<view class="moreContentItem" @click="toChangeTradePwdPage">
|
||||
<image class="icon" src="/static/unlock.png" mode="aspectFit"></image>
|
||||
<text>{{ $t('home.changeTradePwd') }}</text>
|
||||
</view>
|
||||
<view class="moreContentItem" @click="toChangeROPwdPage">
|
||||
<image class="icon" src="/static/unlock_eye.png" mode="aspectFit"></image>
|
||||
<text>{{ $t('home.changeROPwd') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="statusTag" @click="handleFileAccount">{{ $t('home.filedAccount') }}</view>
|
||||
</view>
|
||||
<view v-if="!isHistory && values.server_type === 'live'">
|
||||
<view class="divider"></view>
|
||||
<view class="bottomBtns" v-if="values.server_type === 'live'">
|
||||
<view class="btn deposit" @click="toDepositPage">{{ $t('home.goldin') }}</view>
|
||||
<view class="btn" @click="toWithdrawPage">{{ $t('home.goldout') }}</view>
|
||||
<view class="btn" @click="toTransferPage">{{ $t('home.transfer') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="isHistory" class="historyAccountTip">
|
||||
<text>{{ $t('home.filedAccountTip') }}</text>
|
||||
<!-- <view class="reactivateBtn">{{ $t('home.reactivate') }}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isValidNumber } from '@/utils/const.ts';
|
||||
import { savePlaceFile } from '@/services/home/home.ts';
|
||||
import { getNumberLocaleIntegerPart, getNumberDecimalPart } from '@/utils/const.ts';
|
||||
export default {
|
||||
name: 'AccountCard',
|
||||
props: {
|
||||
values: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: undefined
|
||||
},
|
||||
isHistory: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
handleFileAccount: {
|
||||
type: Function,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
moreContentVisible: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getNumberLocaleIntegerPart: getNumberLocaleIntegerPart,
|
||||
getNumberDecimalPart: getNumberDecimalPart,
|
||||
changeMoreContentVisible() {
|
||||
this.moreContentVisible = !this.moreContentVisible;
|
||||
},
|
||||
isValidNumber: isValidNumber,
|
||||
getHistoryAccountType() {
|
||||
if (this.values.server_type === 'test') {
|
||||
return this.$t('home.demo');
|
||||
} else {
|
||||
return this.$t(`home.realMT${this.values.mt_versions}`);
|
||||
}
|
||||
},
|
||||
navigatetoTarget(target) {
|
||||
uni.navigateTo({
|
||||
url: target
|
||||
});
|
||||
},
|
||||
toDepositPage() {
|
||||
uni.setStorageSync('curs', JSON.stringify(this.values.mt4_server));
|
||||
uni.setStorageSync('curl', JSON.stringify(this.values.mt4_login));
|
||||
uni.navigateTo({
|
||||
url: '/pages/capital/deposit/index'
|
||||
});
|
||||
},
|
||||
toWithdrawPage() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/capital/withdraw/index?mtLogin=${this.values.mt4_login}`
|
||||
});
|
||||
},
|
||||
toTransferPage() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/capital/transfer/index?mtLogin=${this.values.mt4_login}`
|
||||
});
|
||||
},
|
||||
toAdjustLeveragePage() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/home/adjustLeverage/index?mt4_login=${this.values.mt4_login}&mt4_server=${this.values.mt4_server}&mt4_leverage=${this.values.mt4_leverage}`
|
||||
});
|
||||
},
|
||||
toTradeRecordPage() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/home/tradeRecord/index?mt4_login=${this.values.mt4_login}&mt4_server=${this.values.mt4_server}`
|
||||
});
|
||||
},
|
||||
toChangeTradePwdPage() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/home/changeTradePwd/index?mt4_login=${this.values.mt4_login}&mt4_server=${this.values.mt4_server}`
|
||||
});
|
||||
},
|
||||
toChangeROPwdPage() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/home/changeROPwd/index?mt4_login=${this.values.mt4_login}&mt4_server=${this.values.mt4_server}`
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user