refactor(页面): 优化页面生命周期和组件逻辑
重构页面生命周期钩子,统一使用uni-app的onShow替代vue的onShow 移除重复请求检查逻辑,简化数据获取函数 在配置页面自动填充策略参数并禁用相关输入 移除不必要的添加/删除股票行功能
This commit is contained in:
parent
43280fa447
commit
4ea7c5c2d0
@ -32,17 +32,13 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="section-card">
|
<view class="section-card">
|
||||||
<view class="card-header justify-between">
|
<view class="card-header">
|
||||||
<view class="flex-row items-center gap-2">
|
<view class="flex-row items-center gap-2">
|
||||||
<view class="header-icon bg-blue-100">
|
<view class="header-icon bg-blue-100">
|
||||||
<uni-icons type="wallet" size="18" color="#1D4ED8"></uni-icons>
|
<uni-icons type="wallet" size="18" color="#1D4ED8"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
<text class="header-title">初始化记录</text>
|
<text class="header-title">初始化记录</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="add-btn" @click="addStockRow">
|
|
||||||
<uni-icons type="plus" size="14" color="#064E3B"></uni-icons>
|
|
||||||
<text class="add-text">添加单元</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="stock-list">
|
<view class="stock-list">
|
||||||
@ -50,14 +46,12 @@
|
|||||||
|
|
||||||
<view class="item-header">
|
<view class="item-header">
|
||||||
<text class="item-index">单元 #{{ index + 1 }}</text>
|
<text class="item-index">单元 #{{ index + 1 }}</text>
|
||||||
<uni-icons type="trash" size="18" color="#EF4444" @click="removeStockRow(index)"
|
|
||||||
v-if="form.stocks.length > 1"></uni-icons>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="item-grid">
|
<view class="item-grid">
|
||||||
<view class="grid-col">
|
<view class="grid-col">
|
||||||
<text class="sub-label">单元名称/代码</text>
|
<text class="sub-label">单元名称/代码</text>
|
||||||
<input class="mini-input" v-model="item.name" placeholder="如 TMF" />
|
<input class="mini-input" v-model="item.name" placeholder="如 TMF" disabled />
|
||||||
</view>
|
</view>
|
||||||
<view class="grid-col">
|
<view class="grid-col">
|
||||||
<text class="sub-label">买入均价</text>
|
<text class="sub-label">买入均价</text>
|
||||||
@ -95,7 +89,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted, getCurrentInstance } from 'vue';
|
import { ref, computed, getCurrentInstance } from 'vue';
|
||||||
|
import { onShow } from '@dcloudio/uni-app';
|
||||||
|
|
||||||
const { proxy } = getCurrentInstance();
|
const { proxy } = getCurrentInstance();
|
||||||
const api = proxy.$api;
|
const api = proxy.$api;
|
||||||
@ -103,6 +98,9 @@ const api = proxy.$api;
|
|||||||
const strategies = ref([]);
|
const strategies = ref([]);
|
||||||
const strategyIndex = ref(-1);
|
const strategyIndex = ref(-1);
|
||||||
|
|
||||||
|
// 防止重复请求的标志
|
||||||
|
let isFetching = false;
|
||||||
|
|
||||||
const form = ref({
|
const form = ref({
|
||||||
name: '',
|
name: '',
|
||||||
stocks: [
|
stocks: [
|
||||||
@ -133,6 +131,8 @@ const fetchStrategies = async () => {
|
|||||||
id: item.id,
|
id: item.id,
|
||||||
name: item.name,
|
name: item.name,
|
||||||
desc: item.description,
|
desc: item.description,
|
||||||
|
type: item.type,
|
||||||
|
parameters: item.config ? JSON.parse(item.config) : {},
|
||||||
color: '#10B981'
|
color: '#10B981'
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
@ -141,26 +141,31 @@ const fetchStrategies = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
await fetchStrategies();
|
|
||||||
});
|
|
||||||
|
|
||||||
const onStrategyChange = (e) => {
|
const onStrategyChange = (e) => {
|
||||||
strategyIndex.value = e.detail.value;
|
strategyIndex.value = e.detail.value;
|
||||||
|
const strategy = strategies.value[strategyIndex.value];
|
||||||
|
|
||||||
|
console.log('选择的策略:', strategy);
|
||||||
|
console.log('策略参数:', strategy?.parameters);
|
||||||
|
|
||||||
|
if (strategy && strategy.parameters && strategy.parameters.assets) {
|
||||||
|
form.value.stocks = strategy.parameters.assets.map(asset => ({
|
||||||
|
name: asset.symbol,
|
||||||
|
price: '',
|
||||||
|
amount: '',
|
||||||
|
date: ''
|
||||||
|
}));
|
||||||
|
console.log('自动填充标的:', form.value.stocks);
|
||||||
|
} else {
|
||||||
|
form.value.stocks = [{ name: '', price: '', amount: '', date: '' }];
|
||||||
|
console.log('未找到标的配置,使用默认值');
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const onDateChange = (e, index) => {
|
const onDateChange = (e, index) => {
|
||||||
form.value.stocks[index].date = e.detail.value;
|
form.value.stocks[index].date = e.detail.value;
|
||||||
};
|
};
|
||||||
|
|
||||||
const addStockRow = () => {
|
|
||||||
form.value.stocks.push({ name: '', price: '', amount: '', date: '' });
|
|
||||||
};
|
|
||||||
|
|
||||||
const removeStockRow = (index) => {
|
|
||||||
form.value.stocks.splice(index, 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const submitForm = async () => {
|
const submitForm = async () => {
|
||||||
if (!form.value.name) return uni.showToast({ title: '请输入组合名称', icon: 'none' });
|
if (!form.value.name) return uni.showToast({ title: '请输入组合名称', icon: 'none' });
|
||||||
if (strategyIndex.value === -1) return uni.showToast({ title: '请选择策略', icon: 'none' });
|
if (strategyIndex.value === -1) return uni.showToast({ title: '请选择策略', icon: 'none' });
|
||||||
@ -196,6 +201,12 @@ const submitForm = async () => {
|
|||||||
uni.showToast({ title: '创建失败,请重试', icon: 'none' });
|
uni.showToast({ title: '创建失败,请重试', icon: 'none' });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
onShow(async () => {
|
||||||
|
isFetching = true;
|
||||||
|
await fetchStrategies();
|
||||||
|
isFetching = false;
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -281,22 +292,6 @@ const submitForm = async () => {
|
|||||||
color: #1F2937;
|
color: #1F2937;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 添加按钮 */
|
|
||||||
.add-btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #ECFDF5;
|
|
||||||
padding: 8rpx 20rpx;
|
|
||||||
border-radius: 100rpx;
|
|
||||||
gap: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-text {
|
|
||||||
font-size: 24rpx;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #064E3B;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 表单项 */
|
/* 表单项 */
|
||||||
.form-item {
|
.form-item {
|
||||||
margin-bottom: 32rpx;
|
margin-bottom: 32rpx;
|
||||||
@ -419,6 +414,12 @@ const submitForm = async () => {
|
|||||||
color: #1F2937;
|
color: #1F2937;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mini-input[disabled] {
|
||||||
|
background-color: #F3F4F6;
|
||||||
|
color: #6B7280;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
/* 日期选择 */
|
/* 日期选择 */
|
||||||
.date-picker-display {
|
.date-picker-display {
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
|
|||||||
@ -91,7 +91,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onShow } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
import { onShow } from '@dcloudio/uni-app';
|
||||||
import { api } from '../../utils/api';
|
import { api } from '../../utils/api';
|
||||||
|
|
||||||
// 资产数据
|
// 资产数据
|
||||||
@ -109,7 +110,6 @@ let isFetching = false;
|
|||||||
|
|
||||||
// 从后端API获取资产数据的函数
|
// 从后端API获取资产数据的函数
|
||||||
const fetchAssetData = async () => {
|
const fetchAssetData = async () => {
|
||||||
if (isFetching) return;
|
|
||||||
try {
|
try {
|
||||||
console.log('开始获取资产数据...');
|
console.log('开始获取资产数据...');
|
||||||
const response = await api.assets.getAssetData();
|
const response = await api.assets.getAssetData();
|
||||||
@ -132,7 +132,6 @@ const fetchAssetData = async () => {
|
|||||||
|
|
||||||
// 从后端API获取持仓组合数据的函数
|
// 从后端API获取持仓组合数据的函数
|
||||||
const fetchHoldingsData = async () => {
|
const fetchHoldingsData = async () => {
|
||||||
if (isFetching) return;
|
|
||||||
try {
|
try {
|
||||||
console.log('开始获取持仓数据...');
|
console.log('开始获取持仓数据...');
|
||||||
const response = await api.assets.getHoldings();
|
const response = await api.assets.getHoldings();
|
||||||
@ -161,7 +160,14 @@ const fetchHoldingsData = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 页面显示时刷新数据
|
const goConfig = () => {
|
||||||
|
uni.navigateTo({ url: '/pages/config/config' });
|
||||||
|
};
|
||||||
|
|
||||||
|
const goDetail = (holdingId) => {
|
||||||
|
uni.navigateTo({ url: `/pages/detail/detail?id=${holdingId}` });
|
||||||
|
};
|
||||||
|
|
||||||
onShow(async () => {
|
onShow(async () => {
|
||||||
console.log('首页显示,刷新数据...');
|
console.log('首页显示,刷新数据...');
|
||||||
isFetching = true;
|
isFetching = true;
|
||||||
@ -173,14 +179,6 @@ onShow(async () => {
|
|||||||
|
|
||||||
isFetching = false;
|
isFetching = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
const goConfig = () => {
|
|
||||||
uni.navigateTo({ url: '/pages/config/config' });
|
|
||||||
};
|
|
||||||
|
|
||||||
const goDetail = (holdingId) => {
|
|
||||||
uni.navigateTo({ url: `/pages/detail/detail?id=${holdingId}` });
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@ -61,7 +61,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onShow, getCurrentInstance } from 'vue';
|
import { ref, getCurrentInstance } from 'vue';
|
||||||
|
import { onShow } from '@dcloudio/uni-app';
|
||||||
|
|
||||||
const { proxy } = getCurrentInstance();
|
const { proxy } = getCurrentInstance();
|
||||||
const api = proxy.$api;
|
const api = proxy.$api;
|
||||||
@ -72,7 +73,6 @@ const strategies = ref([]);
|
|||||||
let isFetching = false;
|
let isFetching = false;
|
||||||
|
|
||||||
const fetchStrategies = async () => {
|
const fetchStrategies = async () => {
|
||||||
if (isFetching) return;
|
|
||||||
try {
|
try {
|
||||||
const response = await api.strategies.getStrategies();
|
const response = await api.strategies.getStrategies();
|
||||||
if (response.code === 200) {
|
if (response.code === 200) {
|
||||||
@ -95,7 +95,6 @@ const fetchStrategies = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 页面显示时刷新数据
|
|
||||||
onShow(async () => {
|
onShow(async () => {
|
||||||
isFetching = true;
|
isFetching = true;
|
||||||
await fetchStrategies();
|
await fetchStrategies();
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user