新增假的迁移股票的方法；增加选中股票的逻辑；新增底部操作框；

api/home/mySelections.js

@@ -325,6 +325,37 @@ class MySelectionsAPI {
             throw error
         }
     }
+
+    /**
+     * 更新自选股分组（假接口）
+     * @param {Function} successCallback - 成功回调函数
+     * @param {Function} failCallback - 失败回调函数
+     * @param {Object} data - 请求参数 {stockId: number, groupId: number}
+     * @returns {Promise}
+     */
+    static async updateUserStockGroup(successCallback, failCallback = null, data = {}) {
+        const url = '/api/homePage/userStock/updateGroup'
+        
+        try {
+            const response = await http({
+                url: url,
+                method: 'POST',
+                data: data
+            })
+            
+            console.log('更新自选股分组 - 响应:', response)
+            if (successCallback && typeof successCallback === 'function') {
+                successCallback(response)
+            }
+            return response
+        } catch (error) {
+            console.error('更新自选股分组 - 失败:', error)
+            if (failCallback && typeof failCallback === 'function') {
+                failCallback(error)
+            }
+            throw error
+        }
+    }
 }
 
 // 导出API类
@@ -341,5 +372,6 @@ export const {
     updateUserStockGroupName,
     deleteUserStockGroup,
     deleteUserStock,
-    addUserStock
+    addUserStock,
+    updateUserStockGroup
 } = MySelectionsAPI

pages/customStockList/customStockList.vue

@@ -66,7 +66,18 @@
 						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>
@@ -81,11 +92,58 @@
 				</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="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 } from '@/api/home/mySelections.js'
+	import { getUserStockGroupList, addUserStockGroup, getUserStockList, updateUserStockGroup } from '@/api/home/mySelections.js'
 	
 	export default {
 		data() {
@@ -97,7 +155,21 @@
 				// 当前分组下的股票列表
 				stockList: [],
 				// 加载状态
-				loading: false
+				loading: false,
+				// 多选模式状态
+				isMultiSelectMode: false,
+				// 选中的股票ID列表
+				selectedStockIds: [],
+				// 显示分组选择弹窗
+				showGroupSelectModal: false,
+				// 选中的目标分组
+				selectedTargetGroup: null
+			}
+		},
+		computed: {
+			// 是否全选
+			isAllSelected() {
+				return this.stockList.length > 0 && this.selectedStockIds.length === this.stockList.length
 			}
 		},
 		onLoad() {
@@ -251,10 +323,178 @@
 				})
 			},
 			
-			// 第二个按钮点击事件
+			// 第二个按钮点击事件 - 切换多选模式
 			onSecondButtonClick() {
-				console.log('第二个按钮被点击')
-				// 这里可以添加具体的功能逻辑
+				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.loadStockList()
+					
+				} catch (error) {
+					console.error('移动股票失败:', error)
+					uni.showToast({
+						title: '移动失败，请重试',
+						icon: 'none'
+					})
+				} finally {
+					uni.hideLoading()
+				}
 			}
 		}
 	}
@@ -471,4 +711,187 @@
 .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;
+}
+
+.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>