refactor: 清理detail.vue未使用代码
- 移除未使用的JS变量: currencyList, currencyIndex, onCurrencyChange - 移除未使用的CSS: .nav-bar, .page-title, .action-btn, .btn-*, .form-input, .cancel-btn, .confirm-btn - 简化selectStock方法,移除currencyMap逻辑 - 添加onDateChange方法到正确位置 - resetTransactionForm添加dateTimestamp重置
This commit is contained in:
parent
a9af4e549c
commit
709a57e073
@ -306,7 +306,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, watch } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
import { api } from '../../utils/api';
|
import { api } from '../../utils/api';
|
||||||
|
|
||||||
// 获取货币符号
|
// 获取货币符号
|
||||||
@ -358,42 +358,18 @@ const transactionForm = ref({
|
|||||||
stockCode: '',
|
stockCode: '',
|
||||||
amount: '',
|
amount: '',
|
||||||
price: '',
|
price: '',
|
||||||
currency: '', // 默认使用组合币种
|
currency: '',
|
||||||
transactionDate: getCurrentDate(),
|
transactionDate: getCurrentDate(),
|
||||||
dateTimestamp: Date.now(),
|
dateTimestamp: Date.now(),
|
||||||
remark: ''
|
remark: ''
|
||||||
});
|
});
|
||||||
// 当前选中持仓的最大可卖数量
|
|
||||||
const maxSellAmount = ref(0);
|
const maxSellAmount = ref(0);
|
||||||
|
|
||||||
// 货币选择相关
|
|
||||||
const currencyList = ref([
|
|
||||||
{ name: 'CNY', code: 'CNY' },
|
|
||||||
{ name: 'USD', code: 'USD' },
|
|
||||||
{ name: 'HKD', code: 'HKD' }
|
|
||||||
]);
|
|
||||||
const currencyIndex = ref(0);
|
|
||||||
|
|
||||||
const onCurrencyChange = (e) => {
|
|
||||||
currencyIndex.value = e.detail.value;
|
|
||||||
transactionForm.value.currency = currencyList.value[currencyIndex.value].code;
|
|
||||||
};
|
|
||||||
|
|
||||||
const onDateChange = (e) => {
|
|
||||||
// u-datetime-picker返回时间戳
|
|
||||||
const date = new Date(e.value);
|
|
||||||
const year = date.getFullYear();
|
|
||||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
||||||
const day = String(date.getDate()).padStart(2, '0');
|
|
||||||
transactionForm.value.transactionDate = `${year}-${month}-${day}`;
|
|
||||||
transactionForm.value.dateTimestamp = e.value;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 股票搜索相关
|
// 股票搜索相关
|
||||||
const searchResults = ref([]);
|
const searchResults = ref([]);
|
||||||
const searchTimer = ref(null);
|
const searchTimer = ref(null);
|
||||||
|
|
||||||
// 点击股票代码输入框(卖出时显示持仓列表)
|
|
||||||
const handleStockInputClick = () => {
|
const handleStockInputClick = () => {
|
||||||
if (transactionType.value === 'sell') {
|
if (transactionType.value === 'sell') {
|
||||||
// 卖出时显示当前持仓列表
|
// 卖出时显示当前持仓列表
|
||||||
@ -433,20 +409,10 @@ const searchStock = async (keyword) => {
|
|||||||
|
|
||||||
const selectStock = (result) => {
|
const selectStock = (result) => {
|
||||||
transactionForm.value.stockCode = result.ticker || result.Ticker || result.stockCode;
|
transactionForm.value.stockCode = result.ticker || result.Ticker || result.stockCode;
|
||||||
// 自动填充对应货币
|
|
||||||
const currency = result.priceCurrency || result.currency;
|
const currency = result.priceCurrency || result.currency;
|
||||||
if (currency) {
|
if (currency) {
|
||||||
const currencyMap = {
|
|
||||||
'CNY': 0,
|
|
||||||
'USD': 1,
|
|
||||||
'HKD': 2
|
|
||||||
};
|
|
||||||
if (currencyMap[currency] !== undefined) {
|
|
||||||
currencyIndex.value = currencyMap[currency];
|
|
||||||
transactionForm.value.currency = currency;
|
transactionForm.value.currency = currency;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
// 如果是卖出,获取该持仓的最大可卖数量
|
|
||||||
if (transactionType.value === 'sell') {
|
if (transactionType.value === 'sell') {
|
||||||
const position = positions.value.find(pos => pos.stockCode === transactionForm.value.stockCode);
|
const position = positions.value.find(pos => pos.stockCode === transactionForm.value.stockCode);
|
||||||
maxSellAmount.value = position ? position.amount : 0;
|
maxSellAmount.value = position ? position.amount : 0;
|
||||||
@ -515,7 +481,6 @@ const goStrategyConfig = () => {
|
|||||||
const handleBuy = () => {
|
const handleBuy = () => {
|
||||||
transactionType.value = 'buy';
|
transactionType.value = 'buy';
|
||||||
resetTransactionForm();
|
resetTransactionForm();
|
||||||
// 默认使用组合币种
|
|
||||||
transactionForm.value.currency = portfolioData.value.currency;
|
transactionForm.value.currency = portfolioData.value.currency;
|
||||||
showTransactionForm.value = true;
|
showTransactionForm.value = true;
|
||||||
};
|
};
|
||||||
@ -523,17 +488,7 @@ const handleBuy = () => {
|
|||||||
const handleSell = () => {
|
const handleSell = () => {
|
||||||
transactionType.value = 'sell';
|
transactionType.value = 'sell';
|
||||||
resetTransactionForm();
|
resetTransactionForm();
|
||||||
// 默认使用组合币种
|
|
||||||
transactionForm.value.currency = portfolioData.value.currency;
|
transactionForm.value.currency = portfolioData.value.currency;
|
||||||
// 卖出时自动填充持仓列表作为可选
|
|
||||||
searchResults.value = positions.value.map(pos => ({
|
|
||||||
ticker: pos.stockCode,
|
|
||||||
stockName: pos.stockName,
|
|
||||||
assetType: pos.assetType || 'Stock',
|
|
||||||
currency: pos.currency,
|
|
||||||
amount: pos.amount,
|
|
||||||
exchange: ''
|
|
||||||
}));
|
|
||||||
showTransactionForm.value = true;
|
showTransactionForm.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -544,14 +499,22 @@ const resetTransactionForm = () => {
|
|||||||
price: '',
|
price: '',
|
||||||
currency: 'CNY',
|
currency: 'CNY',
|
||||||
transactionDate: getCurrentDate(),
|
transactionDate: getCurrentDate(),
|
||||||
|
dateTimestamp: Date.now(),
|
||||||
remark: ''
|
remark: ''
|
||||||
};
|
};
|
||||||
// 重置搜索结果
|
|
||||||
searchResults.value = [];
|
searchResults.value = [];
|
||||||
// 重置最大可卖数量
|
|
||||||
maxSellAmount.value = 0;
|
maxSellAmount.value = 0;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const onDateChange = (e) => {
|
||||||
|
const date = new Date(e.value);
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(date.getDate()).padStart(2, '0');
|
||||||
|
transactionForm.value.transactionDate = `${year}-${month}-${day}`;
|
||||||
|
transactionForm.value.dateTimestamp = e.value;
|
||||||
|
};
|
||||||
|
|
||||||
const submitTransaction = async () => {
|
const submitTransaction = async () => {
|
||||||
// 表单验证
|
// 表单验证
|
||||||
if (!transactionForm.value.stockCode) {
|
if (!transactionForm.value.stockCode) {
|
||||||
@ -669,20 +632,6 @@ const deletePortfolio = async () => {
|
|||||||
.bg-red { background-color: #EF4444; }
|
.bg-red { background-color: #EF4444; }
|
||||||
.bg-green { background-color: #10B981; }
|
.bg-green { background-color: #10B981; }
|
||||||
|
|
||||||
/* 1. 导航栏 */
|
|
||||||
.nav-bar {
|
|
||||||
background-color: #fff;
|
|
||||||
padding: var(--status-bar-height) 32rpx 20rpx 32rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
.page-title { font-size: 34rpx; font-weight: 700; color: #111827; }
|
|
||||||
|
|
||||||
/* 2. 头部深色卡片 */
|
|
||||||
.header-section { padding: 20rpx 32rpx; }
|
.header-section { padding: 20rpx 32rpx; }
|
||||||
.asset-card {
|
.asset-card {
|
||||||
background-color: #064E3B;
|
background-color: #064E3B;
|
||||||
@ -776,7 +725,6 @@ const deletePortfolio = async () => {
|
|||||||
.tl-desc { font-size: 24rpx; color: #6B7280; margin-top: 8rpx; }
|
.tl-desc { font-size: 24rpx; color: #6B7280; margin-top: 8rpx; }
|
||||||
.w-full { width: 100%; }
|
.w-full { width: 100%; }
|
||||||
|
|
||||||
/* 底部固定操作栏 */
|
|
||||||
.fixed-bottom {
|
.fixed-bottom {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
@ -785,47 +733,11 @@ const deletePortfolio = async () => {
|
|||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 24rpx;
|
gap: 24rpx;
|
||||||
padding: 20rpx 32rpx 50rpx 32rpx; /* 适配 iPhone X */
|
padding: 20rpx 32rpx 50rpx 32rpx;
|
||||||
box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.05);
|
box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.05);
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
flex: 1;
|
|
||||||
height: 96rpx;
|
|
||||||
border-radius: 24rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 12rpx;
|
|
||||||
font-size: 30rpx;
|
|
||||||
font-weight: 700;
|
|
||||||
border: none;
|
|
||||||
flex-direction: row;
|
|
||||||
padding: 0 16rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.btn-delete {
|
|
||||||
flex: 0 0 96rpx;
|
|
||||||
background-color: #FEE2E2;
|
|
||||||
color: #DC2626;
|
|
||||||
}
|
|
||||||
.btn-delete:active {
|
|
||||||
background-color: #FECACA;
|
|
||||||
}
|
|
||||||
.btn-text {
|
|
||||||
font-size: 30rpx;
|
|
||||||
font-weight: 700;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1.3;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.btn-buy { background-color: #064E3B; color: #FFFFFF; box-shadow: 0 8rpx 20rpx rgba(6, 78, 59, 0.2); }
|
|
||||||
.btn-buy:active { background-color: #047857; }
|
|
||||||
.btn-sell { background-color: #FFFFFF; color: #064E3B; border: 2rpx solid #064E3B; }
|
|
||||||
.btn-sell:active { background-color: #ECFDF5; }
|
|
||||||
|
|
||||||
/* 交易表单弹窗 */
|
|
||||||
.transaction-modal {
|
.transaction-modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -885,23 +797,6 @@ const deletePortfolio = async () => {
|
|||||||
margin-bottom: 12rpx;
|
margin-bottom: 12rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-input {
|
|
||||||
width: 100%;
|
|
||||||
height: 72rpx;
|
|
||||||
border: 1rpx solid #E5E7EB;
|
|
||||||
border-radius: 12rpx;
|
|
||||||
padding: 0 20rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #111827;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-input::placeholder {
|
|
||||||
color: #9CA3AF;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.form-select {
|
.form-select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
@ -923,33 +818,7 @@ const deletePortfolio = async () => {
|
|||||||
gap: 16rpx;
|
gap: 16rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cancel-btn,
|
.relative { position: relative; }
|
||||||
.confirm-btn {
|
|
||||||
flex: 1;
|
|
||||||
height: 80rpx;
|
|
||||||
border-radius: 12rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
font-weight: 600;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cancel-btn {
|
|
||||||
background-color: #F3F4F6;
|
|
||||||
color: #6B7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
.confirm-btn {
|
|
||||||
background-color: #064E3B;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 搜索下拉列表 */
|
|
||||||
.relative {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-dropdown {
|
.search-dropdown {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user