feat(P2): 替换股票搜索下拉为u-search+u-dropdown,移除手写下拉样式

This commit is contained in:
claw_bot 2026-03-12 12:34:52 +00:00
parent 22a7e9ae90
commit 772ff2c3ad

View File

@ -175,14 +175,15 @@
</view> </view>
<view class="form-content"> <view class="form-content">
<view class="form-item relative"> <view class="form-item">
<text class="form-label">{{ transactionType === 'sell' ? '选择持仓' : '股票代码' }}</text> <text class="form-label">{{ transactionType === 'sell' ? '选择持仓' : '股票代码' }}</text>
<u-input <u-search
v-model="transactionForm.stockCode" v-model="transactionForm.stockCode"
:placeholder="transactionType === 'sell' ? '请选择要卖出的持仓' : '请输入股票代码'" :placeholder="transactionType === 'sell' ? '请选择要卖出的持仓' : '请输入股票代码'"
:disabled="transactionType === 'sell'" :disabled="transactionType === 'sell'"
:show-action="false"
:border="false" :border="false"
@input="transactionType === 'buy' ? searchStock($event.detail.value) : () => {}" @input="transactionType === 'buy' ? searchStock($event) : () => {}"
@click="transactionType === 'sell' ? (searchResults = (positions.value || []).map(pos => ({ @click="transactionType === 'sell' ? (searchResults = (positions.value || []).map(pos => ({
ticker: pos.stockCode, ticker: pos.stockCode,
stockName: pos.stockName, stockName: pos.stockName,
@ -191,23 +192,22 @@
amount: pos.amount, amount: pos.amount,
exchange: '' exchange: ''
}))) : () => {}" }))) : () => {}"
/> >
<!-- 搜索下拉列表/持仓列表 --> <!-- 搜索下拉列表 -->
<view class="search-dropdown" v-if="searchResults.length > 0"> <view class="search-dropdown" v-if="searchResults.length > 0" slot="suffix">
<view <u-dropdown>
class="dropdown-item" <u-dropdown-item
v-for="(result, idx) in searchResults" v-for="(result, idx) in searchResults"
:key="idx" :key="idx"
:title="`${result.ticker || result.stockCode} ${result.name || result.stockName}`"
@click="selectStock(result)" @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>
<text class="item-type" v-if="result.assetType">{{ result.assetType }}</text> <text class="item-type" v-if="result.assetType">{{ result.assetType }}</text>
</view>
<text class="item-exchange">{{ result.exchange || '' }}</text> <text class="item-exchange">{{ result.exchange || '' }}</text>
</u-dropdown-item>
</u-dropdown>
</view> </view>
</view> </u-search>
</view> </view>
<view class="form-item"> <view class="form-item">
@ -844,67 +844,7 @@ const deletePortfolio = async () => {
color: #9CA3AF; color: #9CA3AF;
} }
/* 搜索下拉列表 */
.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: row;
align-items: center;
gap: 12rpx;
}
.item-ticker {
font-size: 26rpx;
font-weight: 600;
color: #1F2937;
}
.item-type {
font-size: 18rpx;
color: #064E3B;
background-color: #D1FAE5;
padding: 2rpx 8rpx;
border-radius: 4rpx;
}
.item-exchange {
font-size: 22rpx;
color: #9CA3AF;
}
.form-select { .form-select {
width: 100%; width: 100%;