fix: 修复交易弹窗表单组件样式和功能
- 股票代码输入框：添加模糊搜索功能，买入时搜索API，卖出时显示持仓列表 - 数量输入框：添加边框样式 - 价格输入框：添加边框样式 - 交易时间：修复u-datetime-picker用法，添加完整边框 - 备注输入框：添加边框样式 - 添加handleStockInputClick方法处理卖出时持仓选择 - 添加搜索下拉列表样式
This commit is contained in:
parent
bdeaa2721b
commit
837bf61533
@ -207,46 +207,45 @@
|
||||
<view class="form-content">
|
||||
<view class="form-item">
|
||||
<text class="form-label">{{ transactionType === 'sell' ? '选择持仓' : '股票代码' }}</text>
|
||||
<u-search
|
||||
v-model="transactionForm.stockCode"
|
||||
:placeholder="transactionType === 'sell' ? '请选择要卖出的持仓' : '请输入股票代码'"
|
||||
:disabled="transactionType === 'sell'"
|
||||
:show-action="false"
|
||||
:border="false"
|
||||
@input="transactionType === 'buy' ? searchStock($event) : () => {}"
|
||||
@click="transactionType === 'sell' ? (searchResults = (positions.value || []).map(pos => ({
|
||||
ticker: pos.stockCode,
|
||||
stockName: pos.stockName,
|
||||
assetType: pos.assetType || 'Stock',
|
||||
currency: pos.currency,
|
||||
amount: pos.amount,
|
||||
exchange: ''
|
||||
}))) : () => {}"
|
||||
>
|
||||
<view class="relative">
|
||||
<u-input
|
||||
v-model="transactionForm.stockCode"
|
||||
:placeholder="transactionType === 'sell' ? '点击选择要卖出的持仓' : '请输入股票代码搜索'"
|
||||
:disabled="transactionType === 'sell'"
|
||||
:border="false"
|
||||
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '16rpx', height: '80rpx', padding: '0 20rpx', border: '2rpx solid #E5E7EB' }"
|
||||
@input="transactionType === 'buy' ? searchStock($event) : () => {}"
|
||||
@click="handleStockInputClick"
|
||||
/>
|
||||
<!-- 搜索下拉列表 -->
|
||||
<view class="search-dropdown" v-if="searchResults.length > 0" slot="suffix">
|
||||
<u-dropdown>
|
||||
<u-dropdown-item
|
||||
v-for="(result, idx) in searchResults"
|
||||
:key="idx"
|
||||
:title="`${result.ticker || result.stockCode} ${result.name || result.stockName}`"
|
||||
@click="selectStock(result)"
|
||||
>
|
||||
<view class="search-dropdown" v-if="searchResults.length > 0">
|
||||
<view
|
||||
class="dropdown-item"
|
||||
v-for="(result, idx) in searchResults"
|
||||
:key="idx"
|
||||
@click="selectStock(result)"
|
||||
>
|
||||
<view class="item-left">
|
||||
<text class="item-ticker">{{ result.ticker || result.stockCode }}</text>
|
||||
<text class="item-name">{{ result.name || result.stockName }}</text>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<text class="item-type" v-if="result.assetType">{{ result.assetType }}</text>
|
||||
<text class="item-exchange">{{ result.exchange || '' }}</text>
|
||||
</u-dropdown-item>
|
||||
</u-dropdown>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-search>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">数量{{ transactionType === 'sell' && maxSellAmount > 0 ? `(最多可卖 ${maxSellAmount} 份)` : '' }}</text>
|
||||
<text class="form-label">数量{{ transactionType === 'sell' && maxSellAmount > 0 ? ` (最多可卖 ${maxSellAmount} 份)` : '' }}</text>
|
||||
<u-input
|
||||
v-model="transactionForm.amount"
|
||||
type="number"
|
||||
:placeholder="transactionType === 'sell' && maxSellAmount > 0 ? `请输入数量，不超过 ${maxSellAmount}` : '请输入数量'"
|
||||
:border="false"
|
||||
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '16rpx', height: '80rpx', padding: '0 20rpx', border: '2rpx solid #E5E7EB' }"
|
||||
/>
|
||||
</view>
|
||||
|
||||
@ -254,25 +253,22 @@
|
||||
<text class="form-label">价格</text>
|
||||
<u-input
|
||||
v-model="transactionForm.price"
|
||||
type="number"
|
||||
step="0.01"
|
||||
type="digit"
|
||||
placeholder="请输入价格"
|
||||
:border="false"
|
||||
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '16rpx', height: '80rpx', padding: '0 20rpx', border: '2rpx solid #E5E7EB' }"
|
||||
/>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">交易时间</text>
|
||||
<u-datetime-picker
|
||||
v-model="showDatePicker"
|
||||
v-model="transactionForm.dateTimestamp"
|
||||
mode="date"
|
||||
:value="transactionForm.transactionDate"
|
||||
@confirm="onDateChange"
|
||||
>
|
||||
<view class="form-select">
|
||||
<text>{{ transactionForm.transactionDate }}</text>
|
||||
<text>{{ transactionForm.transactionDate || '请选择日期' }}</text>
|
||||
<u-icon name="arrow-down" size="14" color="#9CA3AF"></u-icon>
|
||||
</view>
|
||||
</u-datetime-picker>
|
||||
@ -282,8 +278,9 @@
|
||||
<text class="form-label">备注</text>
|
||||
<u-input
|
||||
v-model="transactionForm.remark"
|
||||
placeholder="请输入备注"
|
||||
placeholder="请输入备注（可选）"
|
||||
:border="false"
|
||||
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '16rpx', height: '80rpx', padding: '0 20rpx', border: '2rpx solid #E5E7EB' }"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
@ -363,12 +360,11 @@ const transactionForm = ref({
|
||||
price: '',
|
||||
currency: '', // 默认使用组合币种
|
||||
transactionDate: getCurrentDate(),
|
||||
dateTimestamp: Date.now(),
|
||||
remark: ''
|
||||
});
|
||||
// 当前选中持仓的最大可卖数量
|
||||
const maxSellAmount = ref(0);
|
||||
// 日期选择器显示状态
|
||||
const showDatePicker = ref(false);
|
||||
|
||||
// 货币选择相关
|
||||
const currencyList = ref([
|
||||
@ -384,14 +380,36 @@ const onCurrencyChange = (e) => {
|
||||
};
|
||||
|
||||
const onDateChange = (e) => {
|
||||
// u-datetime-picker返回格式为YYYY-MM-DD
|
||||
transactionForm.value.transactionDate = e.value;
|
||||
showDatePicker.value = false;
|
||||
// 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 searchTimer = ref(null);
|
||||
|
||||
// 点击股票代码输入框（卖出时显示持仓列表）
|
||||
const handleStockInputClick = () => {
|
||||
if (transactionType.value === 'sell') {
|
||||
// 卖出时显示当前持仓列表
|
||||
searchResults.value = positions.value.map(pos => ({
|
||||
ticker: pos.stockCode,
|
||||
stockCode: pos.stockCode,
|
||||
stockName: pos.stockName,
|
||||
name: pos.stockName,
|
||||
assetType: pos.assetType || 'Stock',
|
||||
currency: pos.currency,
|
||||
amount: pos.amount,
|
||||
exchange: ''
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const searchStock = async (keyword) => {
|
||||
// 防抖
|
||||
if (searchTimer.value) clearTimeout(searchTimer.value);
|
||||
@ -886,16 +904,16 @@ const deletePortfolio = async () => {
|
||||
|
||||
.form-select {
|
||||
width: 100%;
|
||||
max-width: 200rpx; /* 限制货币选择框最大宽度 */
|
||||
height: 72rpx;
|
||||
border: 1rpx solid #E5E7EB;
|
||||
border-radius: 12rpx;
|
||||
height: 80rpx;
|
||||
background-color: #F9FAFB;
|
||||
border: 2rpx solid #E5E7EB;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
color: #111827;
|
||||
font-size: 26rpx;
|
||||
color: #1F2937;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
@ -927,4 +945,77 @@ const deletePortfolio = async () => {
|
||||
background-color: #064E3B;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 搜索下拉列表 */
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #FFFFFF;
|
||||
border: 1rpx solid #E5E7EB;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 4rpx;
|
||||
max-height: 300rpx;
|
||||
overflow-y: auto;
|
||||
z-index: 100;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 16rpx 20rpx;
|
||||
border-bottom: 1rpx solid #F3F4F6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dropdown-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.dropdown-item:active {
|
||||
background-color: #F3F4F6;
|
||||
}
|
||||
|
||||
.item-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.item-ticker {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #1F2937;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 22rpx;
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
.item-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.item-type {
|
||||
font-size: 18rpx;
|
||||
color: #064E3B;
|
||||
background-color: #D1FAE5;
|
||||
padding: 2rpx 8rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.item-exchange {
|
||||
font-size: 22rpx;
|
||||
color: #9CA3AF;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user