deepChartVueApp/pages/customStockList/customStockList.vue

<!-- 自选股页面 -->
<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>