|
|
|
@ -32,28 +32,223 @@ |
|
|
|
|
|
|
|
<!-- 页面内容 --> |
|
|
|
<view class="page-content"> |
|
|
|
<!-- 分组标签 --> |
|
|
|
<view class="group-tabs" v-if="stockGroups.length > 0"> |
|
|
|
<scroll-view class="tabs-scroll" scroll-x="true" show-scrollbar="false"> |
|
|
|
<view class="tabs-container"> |
|
|
|
<view |
|
|
|
v-for="group in stockGroups" |
|
|
|
:key="group.id" |
|
|
|
:class="['tab-item', { 'active': currentGroupId === group.id }]" |
|
|
|
@click="switchGroup(group.id)" |
|
|
|
> |
|
|
|
<text class="tab-text">{{ group.name }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 股票列表 --> |
|
|
|
<view class="stock-list"> |
|
|
|
<view v-if="loading" class="loading-container"> |
|
|
|
<text class="loading-text">加载中...</text> |
|
|
|
</view> |
|
|
|
<view v-else-if="stockList.length === 0" class="empty-container"> |
|
|
|
<image |
|
|
|
class="empty-image" |
|
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/f5a9bd32c81bc7cca47252b51357c12f.png" |
|
|
|
mode="aspectFit" |
|
|
|
></image> |
|
|
|
<text class="empty-text">暂无数据~</text> |
|
|
|
</view> |
|
|
|
<view v-else> |
|
|
|
<view |
|
|
|
v-for="stock in stockList" |
|
|
|
:key="stock.id" |
|
|
|
class="stock-item" |
|
|
|
> |
|
|
|
<view class="stock-info"> |
|
|
|
<text class="stock-name">{{ stock.name || stock.code }}</text> |
|
|
|
<text class="stock-code">{{ stock.code }}</text> |
|
|
|
</view> |
|
|
|
<view class="stock-price"> |
|
|
|
<text class="price">{{ stock.price || '--' }}</text> |
|
|
|
<text :class="['change', stock.change >= 0 ? 'up' : 'down']"> |
|
|
|
{{ stock.change >= 0 ? '+' : '' }}{{ stock.change || '--' }} |
|
|
|
</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { getUserStockGroupList, addUserStockGroup, getUserStockList } from '@/api/home/mySelections.js' |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
|
|
|
|
// 分组数据 |
|
|
|
stockGroups: [], |
|
|
|
// 当前选中的分组ID |
|
|
|
currentGroupId: null, |
|
|
|
// 当前分组下的股票列表 |
|
|
|
stockList: [], |
|
|
|
// 加载状态 |
|
|
|
loading: false |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
this.loadStockGroups() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 加载股票分组 |
|
|
|
async loadStockGroups() { |
|
|
|
this.loading = true |
|
|
|
try { |
|
|
|
getUserStockGroupList( |
|
|
|
(response) => { |
|
|
|
console.log('获取分组成功:', response) |
|
|
|
if (response.code === 200 && response.data) { |
|
|
|
// 按ID排序，ID小的排在前面 |
|
|
|
this.stockGroups = response.data.sort((a, b) => a.id - b.id) |
|
|
|
// 如果有分组，默认选中第一个 |
|
|
|
if (this.stockGroups.length > 0) { |
|
|
|
this.currentGroupId = this.stockGroups[0].id |
|
|
|
this.loadStocksByGroup(this.currentGroupId) |
|
|
|
} else { |
|
|
|
// 如果没有分组，创建默认分组 |
|
|
|
this.createDefaultGroup() |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
(error) => { |
|
|
|
console.error('获取分组失败:', error) |
|
|
|
// 如果获取失败，也尝试创建默认分组 |
|
|
|
this.createDefaultGroup() |
|
|
|
} |
|
|
|
) |
|
|
|
} catch (error) { |
|
|
|
console.error('加载分组异常:', error) |
|
|
|
} finally { |
|
|
|
this.loading = false |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 创建默认分组 |
|
|
|
createDefaultGroup() { |
|
|
|
addUserStockGroup( |
|
|
|
(response) => { |
|
|
|
console.log('创建默认分组成功:', response) |
|
|
|
// 重新加载分组列表 |
|
|
|
this.loadStockGroups() |
|
|
|
}, |
|
|
|
(error) => { |
|
|
|
console.error('创建默认分组失败:', error) |
|
|
|
}, |
|
|
|
{ name: '默认分组' } |
|
|
|
) |
|
|
|
}, |
|
|
|
|
|
|
|
// 根据分组ID加载股票列表 |
|
|
|
loadStocksByGroup(groupId) { |
|
|
|
if (!groupId) return |
|
|
|
|
|
|
|
getUserStockList( |
|
|
|
(response) => { |
|
|
|
console.log('获取股票列表成功:', response) |
|
|
|
if (response.code === 200 && response.data && response.data.records) { |
|
|
|
// 股票列表在data.records中，根据groupId过滤 |
|
|
|
this.stockList = response.data.records.filter(stock => stock.groupId === groupId) |
|
|
|
} else { |
|
|
|
this.stockList = [] |
|
|
|
} |
|
|
|
}, |
|
|
|
(error) => { |
|
|
|
console.error('获取股票列表失败:', error) |
|
|
|
this.stockList = [] |
|
|
|
}, |
|
|
|
{ groupId: groupId } |
|
|
|
) |
|
|
|
}, |
|
|
|
|
|
|
|
// 切换分组 |
|
|
|
switchGroup(groupId) { |
|
|
|
if (this.currentGroupId === groupId) return |
|
|
|
|
|
|
|
this.currentGroupId = groupId |
|
|
|
this.loadStocksByGroup(groupId) |
|
|
|
}, |
|
|
|
|
|
|
|
// 创建新分组 |
|
|
|
async createNewGroup(groupName) { |
|
|
|
if (!groupName) { |
|
|
|
uni.showToast({ |
|
|
|
title: '分组名称不能为空', |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
uni.showLoading({ |
|
|
|
title: '创建中...' |
|
|
|
}) |
|
|
|
console.log('开始请求创建分组接口') |
|
|
|
try { |
|
|
|
const response = await addUserStockGroup(null, null, { |
|
|
|
name: groupName |
|
|
|
}) |
|
|
|
console.log('创建分组接口返回:', response) |
|
|
|
|
|
|
|
if (response.code === 200) { |
|
|
|
uni.showToast({ |
|
|
|
title: '创建成功', |
|
|
|
icon: 'success' |
|
|
|
}) |
|
|
|
// 重新加载分组列表 |
|
|
|
await this.loadStockGroups() |
|
|
|
// 切换到新创建的分组 |
|
|
|
if (response.data && response.data.id) { |
|
|
|
this.switchGroup(response.data.id) |
|
|
|
} |
|
|
|
} else { |
|
|
|
uni.showToast({ |
|
|
|
title: response.message || '创建失败', |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error('创建分组失败:', error) |
|
|
|
uni.showToast({ |
|
|
|
title: '创建失败，请重试', |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
} finally { |
|
|
|
// 确保在所有情况下都隐藏加载状态 |
|
|
|
uni.hideLoading() |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 返回上一页 |
|
|
|
goBack() { |
|
|
|
uni.navigateBack() |
|
|
|
}, |
|
|
|
|
|
|
|
// 第一个按钮点击事件 |
|
|
|
// 第一个按钮点击事件 - 创建分组 |
|
|
|
onFirstButtonClick() { |
|
|
|
console.log('第一个按钮被点击') |
|
|
|
// 这里可以添加具体的功能逻辑 |
|
|
|
uni.showModal({ |
|
|
|
title: '创建分组', |
|
|
|
content: '请输入分组名称', |
|
|
|
editable: true, |
|
|
|
placeholderText: '请输入分组名称', |
|
|
|
success: (res) => { |
|
|
|
if (res.confirm && res.content) { |
|
|
|
this.createNewGroup(res.content.trim()) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
// 第二个按钮点击事件 |
|
|
|
@ -140,7 +335,140 @@ |
|
|
|
|
|
|
|
/* 页面内容 */ |
|
|
|
.page-content { |
|
|
|
padding-top: calc(44px + var(--status-bar-height, 20px) + 1px); |
|
|
|
min-height: calc(100vh - 44px - var(--status-bar-height, 20px) - 1px); |
|
|
|
padding-top: calc(44px + var(--status-bar-height, 20px) + 20px); |
|
|
|
min-height: calc(100vh - 44px - var(--status-bar-height, 20px) - 20px); |
|
|
|
} |
|
|
|
|
|
|
|
/* 分组标签样式 */ |
|
|
|
.group-tabs { |
|
|
|
background-color: #ffffff; |
|
|
|
padding: 10px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.tabs-scroll { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.tabs-container { |
|
|
|
display: flex; |
|
|
|
padding: 0 15px; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-item { |
|
|
|
flex-shrink: 0; |
|
|
|
padding: 8px 16px; |
|
|
|
margin-right: 10px; |
|
|
|
border-radius: 4px; |
|
|
|
background-color: #ff3b30; |
|
|
|
transition: all 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-item.active { |
|
|
|
background-color: #ff3b30; |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-text { |
|
|
|
font-size: 14px; |
|
|
|
color: #ffffff; |
|
|
|
white-space: nowrap; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-item.active .tab-text { |
|
|
|
color: #ffffff; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
/* 股票列表样式 */ |
|
|
|
.stock-list { |
|
|
|
flex: 1; |
|
|
|
padding: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.loading-container, |
|
|
|
.empty-container { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 60px 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.loading-text { |
|
|
|
font-size: 16px; |
|
|
|
color: #666666; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-image { |
|
|
|
width: 120px; |
|
|
|
height: 120px; |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-text { |
|
|
|
font-size: 16px; |
|
|
|
color: #999999; |
|
|
|
} |
|
|
|
|
|
|
|
.stock-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 15px 0; |
|
|
|
border-bottom: 1px solid #f0f0f0; |
|
|
|
background-color: #ffffff; |
|
|
|
margin-bottom: 8px; |
|
|
|
border-radius: 8px; |
|
|
|
padding: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.stock-item:last-child { |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.stock-info { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
|
|
|
|
.stock-name { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 500; |
|
|
|
color: #333333; |
|
|
|
margin-bottom: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.stock-code { |
|
|
|
font-size: 12px; |
|
|
|
color: #999999; |
|
|
|
} |
|
|
|
|
|
|
|
.stock-price { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: flex-end; |
|
|
|
} |
|
|
|
|
|
|
|
.price { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 500; |
|
|
|
color: #333333; |
|
|
|
margin-bottom: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.change { |
|
|
|
font-size: 12px; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.change.up { |
|
|
|
color: #ff3b30; |
|
|
|
} |
|
|
|
|
|
|
|
.change.down { |
|
|
|
color: #34c759; |
|
|
|
} |
|
|
|
</style> |
宋杰
4 weeks ago