refactor: 移除条件编译,专注于微信小程序端

- config.vue: 使用原生picker替代u-picker,删除不需要的代码
- detail.vue: 使用原生input和picker,恢复搜索功能
- 添加form-input样式,统一输入框外观
- 移除所有条件编译,简化代码结构
This commit is contained in:
claw_bot 2026-03-13 10:12:59 +00:00
parent 8d99ec307a
commit 8584640282
2 changed files with 29 additions and 119 deletions

View File

@ -23,27 +23,8 @@
<view class="form-item"> <view class="form-item">
<text class="label">选择逻辑模板</text> <text class="label">选择逻辑模板</text>
<!-- #ifdef H5 || APP-PLUS -->
<u-picker
:show="showStrategyPicker"
:columns="[strategies.map(s => s.name)]"
keyName="name"
@confirm="onStrategyPickerConfirm"
@cancel="showStrategyPicker = false"
>
<view class="picker-box" @click="showStrategyPicker = true">
<view class="flex-row items-center gap-2" v-if="selectedStrategy">
<view class="strategy-dot" :style="{ backgroundColor: selectedStrategy.color }"></view>
<text class="picker-text">{{ selectedStrategy.name }}</text>
</view>
<text class="picker-placeholder" v-else>点击选择逻辑规则</text>
<u-icon name="arrow-down" size="14" color="#9CA3AF"></u-icon>
</view>
</u-picker>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<picker @change="onStrategyChange" :value="strategyIndex" :range="strategies" range-key="name"> <picker @change="onStrategyChange" :value="strategyIndex" :range="strategies" range-key="name">
<view class="picker-box" @click="showStrategyPicker = true"> <view class="picker-box">
<view class="flex-row items-center gap-2" v-if="selectedStrategy"> <view class="flex-row items-center gap-2" v-if="selectedStrategy">
<view class="strategy-dot" :style="{ backgroundColor: selectedStrategy.color }"></view> <view class="strategy-dot" :style="{ backgroundColor: selectedStrategy.color }"></view>
<text class="picker-text">{{ selectedStrategy.name }}</text> <text class="picker-text">{{ selectedStrategy.name }}</text>
@ -52,34 +33,17 @@
<uni-icons type="bottom" size="14" color="#9CA3AF"></uni-icons> <uni-icons type="bottom" size="14" color="#9CA3AF"></uni-icons>
</view> </view>
</picker> </picker>
<!-- #endif -->
<text class="helper-text" v-if="selectedStrategy">{{ selectedStrategy.desc }}</text> <text class="helper-text" v-if="selectedStrategy">{{ selectedStrategy.desc }}</text>
</view> </view>
<view class="form-item"> <view class="form-item">
<text class="label">组合币种</text> <text class="label">组合币种</text>
<!-- #ifdef H5 || APP-PLUS -->
<u-picker
:show="showCurrencyPicker"
:columns="[currencyList.map(c => c.name)]"
keyName="name"
@confirm="onCurrencyPickerConfirm"
@cancel="showCurrencyPicker = false"
>
<view class="picker-box" @click="showCurrencyPicker = true">
<text class="picker-text">{{ currencyList[currencyIndex].name }}</text>
<u-icon name="arrow-down" size="14" color="#9CA3AF"></u-icon>
</view>
</u-picker>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<picker @change="onCurrencyChange" :value="currencyIndex" :range="currencyList" range-key="name"> <picker @change="onCurrencyChange" :value="currencyIndex" :range="currencyList" range-key="name">
<view class="picker-box" @click="showCurrencyPicker = true"> <view class="picker-box">
<text class="picker-text">{{ currencyList[currencyIndex].name }}</text> <text class="picker-text">{{ currencyList[currencyIndex].name }}</text>
<uni-icons type="bottom" size="14" color="#9CA3AF"></uni-icons> <uni-icons type="bottom" size="14" color="#9CA3AF"></uni-icons>
</view> </view>
</picker> </picker>
<!-- #endif -->
<text class="helper-text">创建后币种不可修改所有交易只能使用该币种</text> <text class="helper-text">创建后币种不可修改所有交易只能使用该币种</text>
</view> </view>
</view> </view>
@ -210,14 +174,9 @@ const currencyList = ref([
]); ]);
const currencyIndex = ref(0); // CNY const currencyIndex = ref(0); // CNY
// Picker
const showStrategyPicker = ref(false);
const showCurrencyPicker = ref(false);
// picker // picker
const onStrategyChange = (e) => { const onStrategyChange = (e) => {
strategyIndex.value = e.detail.value; strategyIndex.value = e.detail.value;
showStrategyPicker.value = false;
// //
const strategy = strategies.value[strategyIndex.value]; const strategy = strategies.value[strategyIndex.value];
@ -235,7 +194,6 @@ const onStrategyChange = (e) => {
const onCurrencyChange = (e) => { const onCurrencyChange = (e) => {
currencyIndex.value = e.detail.value; currencyIndex.value = e.detail.value;
showCurrencyPicker.value = false;
}; };
// //
@ -346,32 +304,6 @@ const onDateChange = (e, index) => {
form.value.stocks[index].date = e.detail.value; form.value.stocks[index].date = e.detail.value;
}; };
// u-picker
const onStrategyPickerConfirm = (e) => {
const { value, index } = e;
strategyIndex.value = index[0];
showStrategyPicker.value = false;
//
const strategy = strategies.value[strategyIndex.value];
if (strategy && strategy.parameters && strategy.parameters.assets) {
form.value.stocks = strategy.parameters.assets.map(asset => ({
name: asset.symbol,
price: '',
amount: '',
date: ''
}));
} else {
form.value.stocks = [{ name: '', price: '', amount: '', date: '' }];
}
};
const onCurrencyPickerConfirm = (e) => {
const { value, index } = e;
currencyIndex.value = index[0];
showCurrencyPicker.value = false;
};
const submitForm = async () => { const submitForm = async () => {
if (!form.value.name) { if (!form.value.name) {
proxy?.$refs.uToastRef?.show({ proxy?.$refs.uToastRef?.show({

View File

@ -249,32 +249,14 @@
<view class="form-item"> <view class="form-item">
<text class="form-label">{{ transactionType === 'sell' ? '选择持仓' : '股票代码' }}</text> <text class="form-label">{{ transactionType === 'sell' ? '选择持仓' : '股票代码' }}</text>
<view class="relative"> <view class="relative">
<!-- #ifdef H5 || APP-PLUS --> <input
<u-input
v-model="transactionForm.stockCode" v-model="transactionForm.stockCode"
class="stock-input"
:placeholder="transactionType === 'sell' ? '点击选择要卖出的持仓' : '请输入股票代码搜索'" :placeholder="transactionType === 'sell' ? '点击选择要卖出的持仓' : '请输入股票代码搜索'"
:disabled="transactionType === 'sell'" :disabled="transactionType === 'sell'"
:border="false"
:customStyle="{
backgroundColor: '#F9FAFB',
borderRadius: '16rpx',
height: '80rpx',
padding: '0 20rpx',
border: '2rpx solid #E5E7EB',
fontSize: '28rpx',
color: '#1F2937'
}"
@input="onStockInput" @input="onStockInput"
@click="handleStockInputClick" @click="handleStockInputClick"
/> />
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<input
v-model="transactionForm.stockCode"
placeholder="请输入股票代码"
/>
<!-- #endif -->
<!-- #ifdef H5 || APP-PLUS -->
<!-- 搜索下拉列表 --> <!-- 搜索下拉列表 -->
<view class="search-dropdown" v-if="searchResults.length > 0"> <view class="search-dropdown" v-if="searchResults.length > 0">
<view <view
@ -293,54 +275,37 @@
</view> </view>
</view> </view>
</view> </view>
<!-- #endif -->
</view> </view>
</view> </view>
<view class="form-item"> <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 <input
v-model="transactionForm.amount" v-model="transactionForm.amount"
type="number" type="number"
class="form-input"
:placeholder="transactionType === 'sell' && maxSellAmount > 0 ? `请输入数量,不超过 ${maxSellAmount}` : '请输入数量'" :placeholder="transactionType === 'sell' && maxSellAmount > 0 ? `请输入数量,不超过 ${maxSellAmount}` : '请输入数量'"
:border="false"
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '16rpx', height: '80rpx', padding: '0 20rpx', border: '2rpx solid #E5E7EB' }"
/> />
</view> </view>
<view class="form-item"> <view class="form-item">
<text class="form-label">价格</text> <text class="form-label">价格</text>
<u-input <input
v-model="transactionForm.price" v-model="transactionForm.price"
type="digit" type="digit"
class="form-input"
placeholder="请输入价格" placeholder="请输入价格"
:border="false"
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '16rpx', height: '80rpx', padding: '0 20rpx', border: '2rpx solid #E5E7EB' }"
/> />
</view> </view>
<view class="form-item"> <view class="form-item">
<text class="form-label">交易时间</text> <text class="form-label">交易时间</text>
<!-- #ifdef H5 || APP-PLUS -->
<u-datetime-picker
v-model="transactionForm.dateTimestamp"
mode="date"
@confirm="onDateChange"
>
<view class="form-select">
<text>{{ transactionForm.transactionDate || '请选择日期' }}</text>
<u-icon name="arrow-down" size="14" color="#9CA3AF"></u-icon>
</view>
</u-datetime-picker>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<picker mode="date" :value="transactionForm.transactionDate" @change="onDateChange"> <picker mode="date" :value="transactionForm.transactionDate" @change="onDateChange">
<view class="form-select"> <view class="form-select">
<text>{{ transactionForm.transactionDate || '请选择日期' }}</text> <text>{{ transactionForm.transactionDate || '请选择日期' }}</text>
<uni-icons type="bottom" size="14" color="#9CA3AF"></uni-icons> <uni-icons type="bottom" size="14" color="#9CA3AF"></uni-icons>
</view> </view>
</picker> </picker>
<!-- #endif -->
</view> </view>
<view class="form-item"> <view class="form-item">
@ -464,7 +429,6 @@ const searchResults = ref([]);
const searchTimer = ref(null); const searchTimer = ref(null);
const handleStockInputClick = () => { const handleStockInputClick = () => {
// #ifdef H5 || APP-PLUS
if (transactionType.value === 'sell') { if (transactionType.value === 'sell') {
searchResults.value = positions.value.map(pos => ({ searchResults.value = positions.value.map(pos => ({
ticker: pos.stockCode, ticker: pos.stockCode,
@ -480,14 +444,9 @@ const handleStockInputClick = () => {
}; };
const onStockInput = (e) => { const onStockInput = (e) => {
// #ifdef H5 || APP-PLUS
const keyword = e.detail.value; const keyword = e.detail.value;
console.log('🔍 股票输入:', keyword); console.log('🔍 股票输入:', keyword);
searchStock(keyword); searchStock(keyword);
// #endif
// #ifdef MP-WEIXIN
//
// #endif
}; };
const searchStock = async (keyword) => { const searchStock = async (keyword) => {
@ -961,9 +920,28 @@ const deletePortfolio = async () => {
margin-bottom: 12rpx; margin-bottom: 12rpx;
} }
/* .stock-input 已替换为 u-input样式已通过 customStyle 设置 */
.stock-input { .stock-input {
/* 样式已内联设置 */ width: 100%;
height: 80rpx;
background-color: #F9FAFB;
border: 2rpx solid #E5E7EB;
border-radius: 16rpx;
padding: 0 20rpx;
font-size: 28rpx;
color: #1F2937;
box-sizing: border-box;
}
.form-input {
width: 100%;
height: 80rpx;
background-color: #F9FAFB;
border: 2rpx solid #E5E7EB;
border-radius: 16rpx;
padding: 0 20rpx;
font-size: 28rpx;
color: #1F2937;
box-sizing: border-box;
} }
.form-select { .form-select {