You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
474 lines
9.7 KiB
474 lines
9.7 KiB
|
|
<!-- 自选股页面 -->
|
|
<template>
|
|
<view class="container">
|
|
<!-- 自定义导航栏 -->
|
|
<view class="custom-navbar">
|
|
<view class="navbar-content">
|
|
<view class="navbar-left">
|
|
<view class="back-btn" @click="goBack">
|
|
<image class="back-icon" src="https://d31zlh4on95l9h.cloudfront.net/images/e5c501fd23303533622fadce8dedd6a0.png" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
<view class="navbar-center">
|
|
<text class="navbar-title">我的自选</text>
|
|
</view>
|
|
<view class="navbar-right">
|
|
<image
|
|
class="navbar-btn"
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/ba5c8a2eda065274e868bcd9b2d7d914.png"
|
|
@click="onFirstButtonClick"
|
|
mode="aspectFit"
|
|
></image>
|
|
<image
|
|
class="navbar-btn"
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/a4ae8952aeae90dac6d2b4c221c65fa9.png"
|
|
@click="onSecondButtonClick"
|
|
mode="aspectFit"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 页面内容 -->
|
|
<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() {
|
|
uni.showModal({
|
|
title: '创建分组',
|
|
content: '请输入分组名称',
|
|
editable: true,
|
|
placeholderText: '请输入分组名称',
|
|
success: (res) => {
|
|
if (res.confirm && res.content) {
|
|
this.createNewGroup(res.content.trim())
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 第二个按钮点击事件
|
|
onSecondButtonClick() {
|
|
console.log('第二个按钮被点击')
|
|
// 这里可以添加具体的功能逻辑
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
/* 自定义导航栏 */
|
|
.custom-navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
background-color: #ffffff;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
}
|
|
|
|
.navbar-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 44px;
|
|
padding: 0 15px;
|
|
/* 适配状态栏高度 */
|
|
padding-top: var(--status-bar-height, 20px);
|
|
min-height: calc(44px + var(--status-bar-height, 20px));
|
|
}
|
|
|
|
.navbar-left {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.back-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.back-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.navbar-center {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.navbar-title {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
|
|
.navbar-right {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.navbar-btn {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
/* 页面内容 */
|
|
.page-content {
|
|
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: row;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.price {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
|
|
.change {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.change.up {
|
|
color: #ff3b30;
|
|
}
|
|
|
|
.change.down {
|
|
color: #34c759;
|
|
}
|
|
</style>
|