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"
						@click="handleStockClick(stock)"
					>
						<!-- 多选模式下显示复选框 -->
						<view v-if="isMultiSelectMode" class="checkbox-container">
							<view 
								:class="['checkbox', selectedStockIds.includes(stock.id) ? 'checked' : '']"
								@click.stop="toggleStockSelection(stock.id)"
							>
								<text v-if="selectedStockIds.includes(stock.id)" class="checkbox-icon">✓</text>
							</view>
						</view>
						
						<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 v-if="isMultiSelectMode" class="bottom-toolbar">
			<view class="toolbar-left">
				<text class="selected-count">已选择 {{ selectedStockIds.length }} 只股票</text>
				<text class="select-all-btn" @click="toggleSelectAll">
					{{ isAllSelected ? '取消全选' : '全选' }}
				</text>
			</view>
			<view class="toolbar-right">
				<button 
					class="delete-btn" 
					:disabled="selectedStockIds.length === 0"
					@click="deleteSelectedStocks"
				>
					删除
				</button>
				<button 
					class="add-to-group-btn" 
					:disabled="selectedStockIds.length === 0"
					@click="showGroupSelectModal = true"
				>
					添加至分组
				</button>
			</view>
		</view>
		
		<!-- 分组选择弹窗 -->
		<view v-if="showGroupSelectModal" class="modal-overlay" @click="closeGroupSelectModal">
			<view class="group-select-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">编辑分组</text>
					<text class="modal-close" @click="closeGroupSelectModal">✕</text>
				</view>
				<view class="modal-content">
					<view class="group-grid">
						<view 
							v-for="group in stockGroups" 
							:key="group.id"
							:class="['group-item', group.id === currentGroupId ? 'current-group' : '']"
							@click="selectTargetGroup(group)"
						>
							<text class="group-name">{{ group.name }}</text>
						</view>
						<view class="group-item new-group" @click="createNewGroupInModal">
							<text class="new-group-text">+ 新建分组</text>
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<button class="confirm-btn" @click="confirmMoveToGroup">确认</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getUserStockGroupList, addUserStockGroup, getUserStockList, updateUserStockGroup, deleteUserStock } from '@/api/home/mySelections.js'
	
	export default {
		data() {
			return {
				// 分组数据
				stockGroups: [],
				// 当前选中的分组ID
				currentGroupId: null,
				// 当前分组下的股票列表
				stockList: [],
				// 加载状态
				loading: false,
				// 多选模式状态
				isMultiSelectMode: false,
				// 选中的股票ID列表
				selectedStockIds: [],
				// 显示分组选择弹窗
				showGroupSelectModal: false,
				// 选中的目标分组
				selectedTargetGroup: null
			}
		},
		computed: {
			// 是否全选
			isAllSelected() {
				return this.stockList.length > 0 && this.selectedStockIds.length === this.stockList.length
			}
		},
		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() {
				this.isMultiSelectMode = !this.isMultiSelectMode
				// 退出多选模式时清空选中状态
				if (!this.isMultiSelectMode) {
					this.selectedStockIds = []
				}
				console.log('多选模式:', this.isMultiSelectMode)
			},
			
			// 处理股票点击事件
			handleStockClick(stock) {
				if (this.isMultiSelectMode) {
					// 多选模式下切换选中状态
					this.toggleStockSelection(stock.id)
				} else {
					// 普通模式下可以添加其他逻辑，比如跳转到股票详情
					console.log('点击股票:', stock)
				}
			},
			
			// 切换股票选中状态
			toggleStockSelection(stockId) {
				const index = this.selectedStockIds.indexOf(stockId)
				if (index > -1) {
					// 已选中，取消选中
					this.selectedStockIds.splice(index, 1)
				} else {
					// 未选中，添加到选中列表
					this.selectedStockIds.push(stockId)
				}
			},
			
			// 全选/取消全选
			toggleSelectAll() {
				if (this.isAllSelected) {
					// 取消全选
					this.selectedStockIds = []
				} else {
					// 全选
					this.selectedStockIds = this.stockList.map(stock => stock.id)
				}
			},
			
			// 关闭分组选择弹窗
			closeGroupSelectModal() {
				this.showGroupSelectModal = false
				this.selectedTargetGroup = null
			},
			
			// 选择目标分组
			selectTargetGroup(group) {
				this.selectedTargetGroup = group
			},
			
			// 在弹窗中创建新分组
			createNewGroupInModal() {
				uni.showModal({
					title: '创建分组',
					content: '请输入分组名称',
					editable: true,
					placeholderText: '请输入分组名称',
					success: (res) => {
						if (res.confirm && res.content) {
							this.createNewGroupAndSelect(res.content.trim())
						}
					}
				})
			},
			
			// 创建新分组并选中
			async createNewGroupAndSelect(groupName) {
				try {
					uni.showLoading({
						title: '创建中...'
					})
					
					const response = await addUserStockGroup(null, null, {
						name: groupName
					})
					
					if (response.code === 200) {
						uni.showToast({
							title: '创建成功',
							icon: 'success'
						})
						// 重新加载分组列表
						await this.loadStockGroups()
						// 选中新创建的分组作为目标分组
						if (response.data && response.data.id) {
							this.selectedTargetGroup = this.stockGroups.find(g => g.id === response.data.id)
						}
					} else {
						uni.showToast({
							title: response.message || '创建失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('创建分组失败:', error)
					uni.showToast({
						title: '创建失败，请重试',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},
			
			// 确认移动到分组
			confirmMoveToGroup() {
				if (!this.selectedTargetGroup) {
					uni.showToast({
						title: '请选择目标分组',
						icon: 'none'
					})
					return
				}
				
				if (this.selectedStockIds.length === 0) {
					uni.showToast({
						title: '请选择要移动的股票',
						icon: 'none'
					})
					return
				}
				
				// 调用移动股票的API
				this.moveStocksToGroup(this.selectedTargetGroup.id)
			},
			
			// 移动股票到指定分组
			async moveStocksToGroup(targetGroupId) {
				try {
					uni.showLoading({
						title: '移动中...'
					})
					
					// 调用API来更新股票的分组ID
					const promises = this.selectedStockIds.map(stockId => {
						return updateUserStockGroup(null, null, {
							stockId: stockId,
							groupId: targetGroupId
						})
					})
					
					await Promise.all(promises)
					
					uni.showToast({
						title: '移动成功',
						icon: 'success'
					})
					
					// 关闭弹窗
					this.closeGroupSelectModal()
					
					// 退出多选模式
					this.isMultiSelectMode = false
					this.selectedStockIds = []
					
					// 重新加载当前分组的股票列表
					this.loadStocksByGroup(this.currentGroupId)
					
				} catch (error) {
					console.error('移动股票失败:', error)
					uni.showToast({
						title: '移动失败，请重试',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},
			
			// 删除选中的股票
			async deleteSelectedStocks() {
				// 检查是否有选中的股票
				if (this.selectedStockIds.length === 0) {
					uni.showToast({
						title: '请先选择要删除的股票',
						icon: 'none'
					})
					return
				}
				
				// 显示确认删除弹窗
				uni.showModal({
					title: '确认删除',
					content: `确定要删除选中的 ${this.selectedStockIds.length} 只股票吗？`,
					success: async (res) => {
						if (res.confirm) {
							await this.performDeleteStocks()
						}
					}
				})
			},
			
			// 执行删除股票操作
			async performDeleteStocks() {
				try {
					uni.showLoading({
						title: '删除中...'
					})
					
					// 调用API删除每只选中的股票
					const deletePromises = this.selectedStockIds.map(stockId => {
						return deleteUserStock(null, null, {
							groupId: this.currentGroupId,
							id: stockId
						})
					})
					
					await Promise.all(deletePromises)
					
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					})
					
					// 退出多选模式
					this.isMultiSelectMode = false
					this.selectedStockIds = []
					
					// 重新加载当前分组的股票列表
					this.loadStocksByGroup(this.currentGroupId)
					
				} catch (error) {
					console.error('删除股票失败:', error)
					uni.showToast({
						title: '删除失败，请重试',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			}
		}
	}
</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: 20px;
	background-color: #f5f5f5;
	border: 1px solid #e0e0e0;
	transition: all 0.3s ease;
	cursor: pointer;
}

.tab-item:hover {
	background-color: #e8e8e8;
}

.tab-item.active {
	background-color: #ff3b30;
	border-color: #ff3b30;
	box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
}

.tab-text {
	font-size: 14px;
	color: #666666;
	white-space: nowrap;
	font-weight: 400;
	transition: all 0.3s ease;
}

.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;
}

/* 复选框样式 */
.checkbox-container {
	margin-right: 12px;
}

.checkbox {
	width: 20px;
	height: 20px;
	border: 2px solid #ddd;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
}

.checkbox.checked {
	background-color: #ff3b30;
	border-color: #ff3b30;
}

.checkbox-icon {
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}

/* 底部操作栏样式 */
.bottom-toolbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	border-top: 1px solid #f0f0f0;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 1000;
}

.toolbar-left {
	display: flex;
	align-items: center;
	gap: 16px;
}

.selected-count {
	font-size: 14px;
	color: #333;
}

.select-all-btn {
	font-size: 14px;
	color: #ff3b30;
	padding: 4px 8px;
}

.toolbar-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

.delete-btn {
	background-color: #ff6b6b;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 14px;
}

.delete-btn:disabled {
	background-color: #ccc;
	color: #999;
}

.add-to-group-btn {
	background-color: #ff3b30;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 14px;
}

.add-to-group-btn:disabled {
	background-color: #ccc;
	color: #999;
}

/* 弹窗样式 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: flex-end;
	z-index: 1000;
}

.group-select-modal {
	background-color: white;
	border-radius: 20rpx 20rpx 0 0;
	width: 100%;
	max-height: 80vh;
	overflow: hidden;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 40rpx;
	border-bottom: 1px solid #f0f0f0;
}

.modal-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

.modal-close {
	font-size: 40rpx;
	color: #999999;
	padding: 10rpx;
}

.modal-content {
	padding: 40rpx;
	max-height: 60vh;
	overflow-y: auto;
}

.group-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.group-item {
	background-color: #f8f8f8;
	border-radius: 16rpx;
	padding: 30rpx 20rpx;
	text-align: center;
	border: 2rpx solid transparent;
	transition: all 0.3s ease;
}

.group-item.current-group {
	background-color: #fff2f0;
	border-color: #ff4d4f;
}

.group-item:active {
	background-color: #e6f7ff;
	border-color: #1890ff;
}

.group-name {
	font-size: 28rpx;
	color: #333333;
	font-weight: 500;
}

.group-item.new-group {
	background-color: #fff;
	border: 2rpx dashed #d9d9d9;
}

.new-group-text {
	font-size: 28rpx;
	color: #ff4d4f;
	font-weight: 500;
}

.modal-footer {
	padding: 30rpx 40rpx;
	border-top: 1px solid #f0f0f0;
}

.confirm-btn {
	width: 100%;
	height: 88rpx;
	background-color: #ff4d4f;
	color: white;
	border: none;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: 500;
}
</style>