自选股页面接口对接完成；页面逻辑完成；

.hbuilderx/launch.json

@@ -2,7 +2,7 @@
     "version" : "1.0",
     "configurations" : [
         {
-            "customPlaygroundType" : "device",
+            "customPlaygroundType" : "local",
             "packageName" : "io.dcloud.HBuilder",
             "playground" : "custom",
             "type" : "uni-app:app-android"

pages/customStockList/customStockList.vue

@@ -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>