fanfpy/AssetManager.UniApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 用uview-plus组件替换原生input和button

Browse Source 
config.vue:
- 组合名称输入框替换为u-input
- 持仓列表输入框替换为u-input
- 日期选择替换为u-datetime-picker
- 创建按钮替换为u-button

detail.vue:
- 底部操作按钮替换为u-button
- 弹窗确认/取消按钮替换为u-button

strategies/edit.vue:
- 所有表单输入框替换为u-input
- 底部保存/删除按钮替换为u-button
This commit is contained in:
claw_bot 2026-03-13 03:42:25 +00:00
parent 3f692e0f74
commit bdeaa2721b
3 changed files with 162 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
pages/config/config.vue
View File

@ -11,8 +11,12 @@
<view class="form-item">
<text class="label">组合名称</text>
<input class="input-box" type="text" v-model="form.name" placeholder="给你的组合起个名字 (如: 养老定投)"
placeholder-class="placeholder-style" />
<u-input
v-model="form.name"
placeholder="给你的组合起个名字 (如: 养老定投)"
:border="false"
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '96rpx', padding: '0 32rpx' }"
/>
</view>
<view class="form-item">
@ -62,12 +66,13 @@
<view class="item-grid">
<view class="grid-col relative">
<text class="sub-label">单元名称/代码</text>
<input
class="mini-input"
<u-input
v-model="item.name"
placeholder="如 TMF"
:disabled="selectedStrategy?.type === 'risk_parity'"
@input="(e) => searchStock(e.detail.value, index)"
:border="false"
:customStyle="{ backgroundColor: '#FFFFFF', borderRadius: '16rpx', height: '72rpx', padding: '0 20rpx' }"
@input="(e) => searchStock(e, index)"
@focus="() => { activeSearchIndex.value = -1; searchResults.value = []; }"
/>
<!-- 搜索下拉列表 -->
@ -88,22 +93,38 @@
</view>
<view class="grid-col">
<text class="sub-label">买入均价</text>
<input class="mini-input" type="digit" v-model="item.price" placeholder="0.00" />
<u-input
v-model="item.price"
type="number"
placeholder="0.00"
:border="false"
:customStyle="{ backgroundColor: '#FFFFFF', borderRadius: '16rpx', height: '72rpx', padding: '0 20rpx' }"
/>
</view>
<view class="grid-col">
<text class="sub-label">持有数量</text>
<input class="mini-input" type="number" v-model="item.amount" placeholder="0" />
<u-input
v-model="item.amount"
type="number"
placeholder="0"
:border="false"
:customStyle="{ backgroundColor: '#FFFFFF', borderRadius: '16rpx', height: '72rpx', padding: '0 20rpx' }"
/>
</view>
</view>
<view class="date-row">
<text class="sub-label">建仓日期</text>
<picker mode="date" :value="item.date" @change="(e) => onDateChange(e, index)">
<u-datetime-picker
v-model="item.dateValue || Date.now()"
mode="date"
@confirm="(e) => { item.date = e.value; item.dateValue = e.value; }"
>
<view class="date-picker-display">
<text>{{ item.date || '请选择日期' }}</text>
<uni-icons type="calendar" size="16" color="#9CA3AF"></uni-icons>
<u-icon name="calendar" size="16" color="#9CA3AF"></u-icon>
</view>
</picker>
</u-datetime-picker>
</view>
</view>
@ -115,7 +136,12 @@
<text class="summary-label">预计初始投入</text>
<text class="summary-val">¥ {{ totalInvestment }}</text>
</view>
<button class="submit-btn" @click="submitForm">创建组合</button>
<u-button
type="primary"
text="创建组合"
:customStyle="{ backgroundColor: '#064E3B', borderRadius: '24rpx', height: '96rpx', fontSize: '30rpx', fontWeight: '700' }"
@click="submitForm"
></u-button>
</view>
</view>

47
pages/detail/detail.vue
View File

@ -170,17 +170,28 @@
</view>
<view class="action-section fixed-bottom">
<button class="action-btn btn-delete" @click="deletePortfolio">
<uni-icons type="trash" size="20" color="#DC2626"></uni-icons>
</button>
<button class="action-btn btn-buy" @click="handleBuy">
<uni-icons type="download" size="20" color="#FFFFFF"></uni-icons>
<text class="btn-text">增加</text>
</button>
<button class="action-btn btn-sell" @click="handleSell">
<uni-icons type="upload" size="20" color="#064E3B"></uni-icons>
<text class="btn-text">减少</text>
</button>
<u-button
type="error"
:plain="true"
icon="trash"
:customStyle="{ flex: '0 0 96rpx', width: '96rpx', height: '96rpx', borderRadius: '24rpx', backgroundColor: '#FEE2E2', borderColor: '#FEE2E2' }"
@click="deletePortfolio"
></u-button>
<u-button
type="primary"
icon="download"
text="增加"
:customStyle="{ backgroundColor: '#064E3B', borderRadius: '24rpx', height: '96rpx', fontSize: '30rpx', fontWeight: '700' }"
@click="handleBuy"
></u-button>
<u-button
type="primary"
:plain="true"
icon="upload"
text="减少"
:customStyle="{ borderRadius: '24rpx', height: '96rpx', fontSize: '30rpx', fontWeight: '700', borderColor: '#064E3B', color: '#064E3B' }"
@click="handleSell"
></u-button>
</view>
<!-- 交易表单弹窗 -->
@ -278,8 +289,18 @@
</view>
<view class="modal-footer">
<button class="cancel-btn" @click="showTransactionForm = false">取消</button>
<button class="confirm-btn" @click="submitTransaction">确认</button>
<u-button
type="default"
text="取消"
:customStyle="{ borderRadius: '12rpx', height: '80rpx', fontSize: '24rpx', fontWeight: '600', backgroundColor: '#F3F4F6', color: '#6B7280' }"
@click="showTransactionForm = false"
></u-button>
<u-button
type="primary"
text="确认"
:customStyle="{ backgroundColor: '#064E3B', borderRadius: '12rpx', height: '80rpx', fontSize: '24rpx', fontWeight: '600' }"
@click="submitTransaction"
></u-button>
</view>
</view>
</view>

107
pages/strategies/edit/edit.vue
View File

@ -38,12 +38,22 @@
<view class="form-item">
<text class="label">策略名称</text>
<input class="input-field" v-model="formData.name" placeholder="例如: 双均线趋势策略" />
<u-input
v-model="formData.name"
placeholder="例如: 双均线趋势策略"
:border="false"
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
/>
</view>
<view class="form-item">
<text class="label">策略描述</text>
<input class="input-field" v-model="formData.description" placeholder="描述策略的用途和特点" />
<u-input
v-model="formData.description"
placeholder="描述策略的用途和特点"
:border="false"
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
/>
</view>
<view class="form-item">
@ -58,18 +68,35 @@
<view class="form-item">
<text class="label">标签</text>
<input class="input-field" v-model="formData.tags" placeholder="用逗号分隔，如：趋势,均线" />
<u-input
v-model="formData.tags"
placeholder="用逗号分隔，如：趋势,均线"
:border="false"
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
/>
</view>
<template v-if="currentType === 'ma_trend'">
<view class="flex-row gap-3">
<view class="form-item flex-1">
<text class="label">短期周期</text>
<input class="input-field" type="number" v-model="formData.shortPeriod" placeholder="20" />
<u-input
v-model="formData.shortPeriod"
type="number"
placeholder="20"
:border="false"
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
/>
</view>
<view class="form-item flex-1">
<text class="label">长期周期</text>
<input class="input-field" type="number" v-model="formData.longPeriod" placeholder="60" />
<u-input
v-model="formData.longPeriod"
type="number"
placeholder="60"
:border="false"
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
/>
</view>
</view>
<view class="form-item">
@ -89,11 +116,23 @@
<template v-if="currentType === 'risk_parity'">
<view class="form-item">
<text class="label">回看周期</text>
<input class="input-field" type="number" v-model="formData.lookbackPeriod" placeholder="60" />
<u-input
v-model="formData.lookbackPeriod"
type="number"
placeholder="60"
:border="false"
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
/>
</view>
<view class="form-item">
<text class="label">再平衡阈值</text>
<input class="input-field" type="digit" v-model="formData.rebalanceThreshold" placeholder="0.05" />
<u-input
v-model="formData.rebalanceThreshold"
type="digit"
placeholder="0.05"
:border="false"
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
/>
</view>
<view class="form-item">
@ -107,11 +146,12 @@
<view class="asset-inputs">
<view class="asset-input relative">
<text class="asset-label">代码</text>
<input
class="input-field"
<u-input
v-model="asset.symbol"
placeholder="如 AAPL"
@input="(e) => searchStock(e.detail.value, index)"
:border="false"
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '16rpx', height: '72rpx', padding: '0 20rpx' }"
@input="(e) => searchStock(e, index)"
/>
<!-- 搜索下拉列表 -->
<view class="search-dropdown" v-if="searchResults.length > 0 && activeAssetIndex === index">
@ -131,7 +171,13 @@
</view>
<view class="asset-input">
<text class="asset-label">目标权重</text>
<input class="input-field" type="digit" v-model="asset.targetWeight" placeholder="0.6" />
<u-input
v-model="asset.targetWeight"
type="digit"
placeholder="0.6"
:border="false"
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '16rpx', height: '72rpx', padding: '0 20rpx' }"
/>
</view>
</view>
</view>
@ -150,11 +196,23 @@
<template v-if="currentType === 'chandelier_exit'">
<view class="form-item">
<text class="label">ATR 周期</text>
<input class="input-field" type="number" v-model="formData.period" placeholder="22" />
<u-input
v-model="formData.period"
type="number"
placeholder="22"
:border="false"
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
/>
</view>
<view class="form-item">
<text class="label">ATR 倍数</text>
<input class="input-field" type="digit" v-model="formData.multiplier" placeholder="3.0" />
<u-input
v-model="formData.multiplier"
type="digit"
placeholder="3.0"
:border="false"
:customStyle="{ backgroundColor: '#F9FAFB', borderRadius: '20rpx', height: '88rpx', padding: '0 24rpx' }"
/>
</view>
<view class="form-item">
<text class="label">使用收盘价</text>
@ -175,10 +233,27 @@
<view class="footer-bar">
<view class="btn-row" v-if="isEditMode">
<button class="delete-btn" @click="deleteStrategy">删除策略</button>
<button class="submit-btn" @click="submit">更新策略配置</button>
<u-button
type="error"
text="删除策略"
:plain="true"
:customStyle="{ flex: '0 0 180rpx', borderRadius: '24rpx', height: '96rpx', fontSize: '24rpx', fontWeight: '700', backgroundColor: '#FEE2E2', borderColor: '#FEE2E2', color: '#DC2626' }"
@click="deleteStrategy"
></u-button>
<u-button
type="primary"
text="更新策略配置"
:customStyle="{ backgroundColor: '#064E3B', borderRadius: '24rpx', height: '96rpx', fontSize: '30rpx', fontWeight: '700' }"
@click="submit"
></u-button>
</view>
<button class="submit-btn" @click="submit" v-else>保存策略配置</button>
<u-button
v-else
type="primary"
text="保存策略配置"
:customStyle="{ backgroundColor: '#064E3B', borderRadius: '24rpx', height: '96rpx', fontSize: '30rpx', fontWeight: '700' }"
@click="submit"
></u-button>
</view>
</view>