You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
517 lines
13 KiB
517 lines
13 KiB
<template>
|
|
<view class="d-flex flex-col">
|
|
<v-header class="nav_bar" :title="$t('base.h4')"></v-header>
|
|
<view class="layout-main">
|
|
<scroll-view scroll-y="true" class="scroll_height">
|
|
<view class="container">
|
|
|
|
<!-- 1. 顶部全局切换 Tab -->
|
|
<view class="global-tabs">
|
|
<view
|
|
class="tab-item"
|
|
:class="{ active: mainTab === 'stock' }"
|
|
@click="switchMainTab('stock')"
|
|
>
|
|
<text>{{$t('automation.a3')}}</text>
|
|
<view class="line" v-if="mainTab === 'stock'"></view>
|
|
</view>
|
|
<view
|
|
class="tab-item"
|
|
:class="{ active: mainTab === 'crypto' }"
|
|
@click="switchMainTab('crypto')"
|
|
>
|
|
<text>{{$t('automation.a4')}}</text>
|
|
<view class="line" v-if="mainTab === 'crypto'"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 2. 黑色资产信息面板 -->
|
|
<view class="black-panel">
|
|
<view class="panel-header">
|
|
<view class="title-box">
|
|
<text class="title">{{$t('automation.a1')}}</text>
|
|
<text class="subtitle">{{$t('automation.a2')}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="asset-grid">
|
|
<view class="grid-item w-60">
|
|
<text class="label">{{$t('automation.a5')}}</text>
|
|
<text class="value">{{ currentAccount.total }} {{ currency }}</text>
|
|
</view>
|
|
<view class="grid-item w-40 text-right" @click="goToRecord">
|
|
<text class="link-text">{{$t('automation.a6')}} ></text>
|
|
</view>
|
|
|
|
<view class="grid-item w-60 mt-20">
|
|
<text class="label">{{$t('automation.a7')}}</text>
|
|
<text class="value">{{ currentAccount.usable }} {{ currency }}</text>
|
|
</view>
|
|
<view class="grid-item w-40 mt-20 text-right">
|
|
<text class="label">{{$t('automation.a8')}}</text>
|
|
<text class="value text-green">{{ currentAccount.todayProfit }} {{ currency }}</text>
|
|
</view>
|
|
|
|
<view class="grid-item w-60 mt-20">
|
|
<text class="label">{{$t('automation.a32')}}</text>
|
|
<text class="value text-green">{{ currentAccount.totalProfit }} {{ currency }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="action-buttons">
|
|
<view class="action-btn" @click="openModal('deposit')">{{$t('automation.a10')}} ></view>
|
|
<view class="action-btn" @click="openModal('withdraw')">{{$t('automation.a11')}} ></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 3. 白色内容区域 -->
|
|
<view class="white-panel">
|
|
<!-- 内部 Tab -->
|
|
<view class="sub-tabs">
|
|
<view
|
|
class="sub-tab-item"
|
|
:class="{ active: subTab === 'market' }"
|
|
@click="subTab = 'market'"
|
|
>
|
|
{{$t('automation.a33')}}
|
|
</view>
|
|
<view class="sub-tab-item right-tab">
|
|
<v-link class="tolink" tag="view" to="/pages/ellasAlpha/history">
|
|
<text class="icon-history">🕒</text> {{$t('automation.a12')}}
|
|
</v-link>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 市场列表 -->
|
|
<view class="list-container" v-if="subTab === 'market'">
|
|
<view class="list-header">
|
|
<text class="col-name">{{ mainTab === 'stock' ? $t('automation.a3') : $t('automation.a13') }}</text>
|
|
<text class="col-price">{{$t('automation.a14')}}</text>
|
|
<text class="col-change">{{$t('automation.a15')}}</text>
|
|
</view>
|
|
|
|
<view class="list-row" v-for="(item, index) in currentList" :key="index">
|
|
<view class="col-name row-flex">
|
|
<!-- 占位图标 -->
|
|
<view class="coin-icon" :style="{ backgroundColor: item.color }">{{ item.symbol.charAt(0) }}</view>
|
|
<view class="coin-info">
|
|
<text class="coin-name">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="col-price">
|
|
<text class="price-text">{{ item.price }}</text>
|
|
</view>
|
|
<view class="col-change">
|
|
<text :class="['change-text', item.change > 0 ? 'text-green' : 'text-red']">
|
|
{{ item.change > 0 ? '+' : '' }}{{ item.change }}%
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 历史订单 -->
|
|
<!-- <view class="history-container" v-if="subTab === 'history'">
|
|
<view class="empty-state">暫無資料</view>
|
|
</view> -->
|
|
</view>
|
|
|
|
<!-- ================= 弹窗遮罩与内容 ================= -->
|
|
<view class="modal-mask" v-if="modalType !== ''" @click="closeModal"></view>
|
|
|
|
<view class="modal-content" v-if="modalType !== ''">
|
|
<view class="modal-header">
|
|
<text class="modal-title">{{ modalType === 'deposit' ? $t('automation.a10') : $t('automation.a11') }}</text>
|
|
<text class="modal-close" @click="closeModal">✕</text>
|
|
</view>
|
|
|
|
<view class="modal-body">
|
|
<view class="input-label">
|
|
<text class="text-red">*</text> <text>{{$t('common.money')}}</text>
|
|
</view>
|
|
<input
|
|
class="amount-input"
|
|
type="digit"
|
|
:placeholder="$t('automation.a31')"
|
|
v-model="formAmount"
|
|
/>
|
|
|
|
<!-- 存入资金的提示 -->
|
|
<view class="tips-box" v-if="modalType === 'deposit'">
|
|
<text class="tip-text">{{$t('automation.a5')}}: {{ currentAccount.total }} {{ currency }}</text>
|
|
<text class="tip-text">{{$t('automation.a28')}}: {{ currency }}</text>
|
|
</view>
|
|
|
|
<!-- 提取资金的提示 -->
|
|
<view class="tips-box" v-if="modalType === 'withdraw'">
|
|
<text class="tip-text">{{$t('common.d22')}}: {{ currentAccount.usable }} {{ currency }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="modal-footer">
|
|
<view class="btn-cancel" @click="closeModal">{{$t('automation.a29')}}</view>
|
|
<view class="btn-confirm" @click="confirmAction">{{$t('automation.a30')}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
mainTab: 'stock', // 'stock' 或 'crypto'
|
|
subTab: 'market', // 'market' 或 'history'
|
|
modalType: '', // '' | 'deposit' | 'withdraw'
|
|
formAmount: '',
|
|
|
|
// 账户资产数据
|
|
accountData: {
|
|
stock: {
|
|
total: '0.00',
|
|
usable: '0.00',
|
|
todayProfit: '0.00',
|
|
totalProfit: '0.00'
|
|
},
|
|
crypto: {
|
|
total: '209,000.00',
|
|
usable: '90,000.00',
|
|
todayProfit: '0.00',
|
|
totalProfit: '0.00'
|
|
}
|
|
},
|
|
|
|
// 列表数据
|
|
marketData: {
|
|
stock: [
|
|
{ name: 'Micron Technology...', symbol: 'MU', price: '996.00', change: -7.74, color: '#2980b9' },
|
|
{ name: 'Nvidia Corp', symbol: 'NVDA', price: '218.66', change: 1.82, color: '#27ae60' },
|
|
{ name: 'Broadcom Inc. Com...', symbol: 'AVGO', price: '418.91', change: -12.59, color: '#c0392b' },
|
|
{ name: 'Marvell Technology', symbol: 'MRVL', price: '316.43', change: 4.90, color: '#8e44ad' },
|
|
{ name: 'Alphabet Inc. Class ...', symbol: 'GOOGL', price: '372.19', change: 3.68, color: '#f39c12' },
|
|
{ name: 'Advanced Micro De...', symbol: 'AMD', price: '523.20', change: -3.56, color: '#34495e' },
|
|
],
|
|
crypto: [
|
|
{ name: 'SOL/USDC', symbol: 'SOL', price: '65.40', change: -5.26, color: '#000000' },
|
|
{ name: 'BTC/USDC', symbol: 'BTC', price: '62,533.25', change: -1.61, color: '#f39c12' },
|
|
{ name: 'GALA/USDC', symbol: 'GALA', price: '0.00', change: -5.19, color: '#7f8c8d' },
|
|
{ name: 'FIL/USDC', symbol: 'FIL', price: '0.78', change: -8.95, color: '#3498db' },
|
|
{ name: 'GRT/USDC', symbol: 'GRT', price: '0.02', change: -6.22, color: '#9b59b6' },
|
|
]
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
currency() {
|
|
return this.mainTab === 'stock' ? 'USDT' : 'USDC';
|
|
},
|
|
currentAccount() {
|
|
return this.accountData[this.mainTab];
|
|
},
|
|
currentList() {
|
|
return this.marketData[this.mainTab];
|
|
}
|
|
},
|
|
methods: {
|
|
switchMainTab(tab) {
|
|
this.mainTab = tab;
|
|
},
|
|
openModal(type) {
|
|
this.formAmount = '';
|
|
this.modalType = type;
|
|
},
|
|
closeModal() {
|
|
this.modalType = '';
|
|
},
|
|
confirmAction() {
|
|
if (!this.formAmount) {
|
|
uni.showToast({ title: this.$t("automation.a31"), icon: 'none' });
|
|
return;
|
|
}
|
|
uni.showToast({ title: this.$t("assets.e4"), icon: 'success' });
|
|
this.closeModal();
|
|
},
|
|
goToRecord() {
|
|
// uni.showToast({ title: '跳轉到資金記錄', icon: 'none' });
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 基础容器，允许原生滚动 */
|
|
.container {
|
|
min-height: 100vh;
|
|
background-color: #ffffff;
|
|
padding-bottom: 50rpx; /* 底部留白 */
|
|
}
|
|
.scroll_height{
|
|
height: calc(100vh - 45px);
|
|
}
|
|
|
|
/* ================= 1. 顶部 Tab ================= */
|
|
.global-tabs {
|
|
display: flex;
|
|
background-color: #ffffff;
|
|
height: 90rpx;
|
|
}
|
|
.tab-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 30rpx;
|
|
color: #999;
|
|
position: relative;
|
|
}
|
|
.tab-item.active {
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
.tab-item .line {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 60rpx;
|
|
height: 6rpx;
|
|
background-color: #000;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
/* ================= 2. 黑色面板 ================= */
|
|
.black-panel {
|
|
background-color: #000000;
|
|
color: #ffffff;
|
|
padding: 40rpx 30rpx;
|
|
}
|
|
.panel-header {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
.title {
|
|
font-size: 44rpx;
|
|
font-weight: bold;
|
|
display: block;
|
|
}
|
|
.subtitle {
|
|
font-size: 24rpx;
|
|
color: #aaaaaa;
|
|
margin-top: 10rpx;
|
|
display: block;
|
|
}
|
|
|
|
/* 资产网格布局 */
|
|
.asset-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
.grid-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.w-60 { width: 60%; }
|
|
.w-40 { width: 40%; }
|
|
.mt-20 { margin-top: 30rpx; }
|
|
.text-right { text-align: right; align-items: flex-end; }
|
|
|
|
.label {
|
|
font-size: 24rpx;
|
|
color: #aaaaaa;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.value {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
.link-text {
|
|
font-size: 24rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* 操作按钮 */
|
|
.action-buttons {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 20rpx;
|
|
padding-top: 30rpx;
|
|
/* border-top: 1rpx solid #333333; */
|
|
}
|
|
.action-btn {
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
padding: 10rpx 40rpx;
|
|
}
|
|
|
|
/* ================= 3. 白色面板区域 ================= */
|
|
.white-panel {
|
|
background-color: #ffffff;
|
|
padding: 0 30rpx;
|
|
}
|
|
|
|
/* 内部 Tabs */
|
|
.sub-tabs {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 30rpx 0;
|
|
/* border-bottom: 1rpx solid #eeeeee; */
|
|
}
|
|
.sub-tab-item {
|
|
font-size: 30rpx;
|
|
color: #666666;
|
|
}
|
|
.sub-tab-item.active {
|
|
color: #333333;
|
|
}
|
|
.right-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #999999;
|
|
}
|
|
.icon-history {
|
|
margin-right: 10rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
/* 列表头部 */
|
|
.list-header {
|
|
display: flex;
|
|
padding: 20rpx 0;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|
}
|
|
.col-name { flex: 4; }
|
|
.col-price { flex: 3; text-align: left; }
|
|
.col-change { flex: 2; text-align: right; }
|
|
|
|
/* 列表行 */
|
|
.list-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30rpx 0;
|
|
border-bottom: 1rpx solid #f9f9f9;
|
|
}
|
|
.row-flex {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.coin-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
.coin-name {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
.price-text {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
.change-text {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
/* 颜色公共类 */
|
|
.text-green { color: #00d26a; }
|
|
.text-red { color: #ff4d4f; }
|
|
|
|
/* 历史记录空状态 */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 100rpx 0;
|
|
color: #999999;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
/* ================= 4. 弹窗样式 ================= */
|
|
.modal-mask {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 998;
|
|
}
|
|
.modal-content {
|
|
position: fixed;
|
|
top: 50%; left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 85%;
|
|
background-color: #ffffff;
|
|
border-radius: 20rpx;
|
|
z-index: 999;
|
|
overflow: hidden;
|
|
}
|
|
.modal-header {
|
|
position: relative;
|
|
text-align: center;
|
|
padding: 40rpx 0 20rpx;
|
|
}
|
|
.modal-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.modal-close {
|
|
position: absolute;
|
|
right: 30rpx;
|
|
top: 30rpx;
|
|
font-size: 40rpx;
|
|
color: #999;
|
|
}
|
|
.modal-body {
|
|
padding: 20rpx 40rpx;
|
|
}
|
|
.input-label {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.amount-input {
|
|
height: 80rpx;
|
|
border: 1rpx solid #dddddd;
|
|
border-radius: 10rpx;
|
|
padding: 0 20rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.tips-box {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.tip-text {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
margin-top: 10rpx;
|
|
}
|
|
.modal-footer {
|
|
display: flex;
|
|
padding: 40rpx;
|
|
justify-content: space-between;
|
|
}
|
|
.btn-cancel, .btn-confirm {
|
|
width: 46%;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
border-radius: 10rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
.btn-cancel {
|
|
border: 2rpx solid #2979ff;
|
|
color: #2979ff;
|
|
background-color: #fff;
|
|
}
|
|
.btn-confirm {
|
|
background-color: #2979ff;
|
|
color: #fff;
|
|
}
|
|
</style>
|