feat(store): 新增门店中心用户管理页面

- 创建用户管理新页面，支持分页查询用户列表
- 实现昵称/手机号搜索及全部/正常/已禁用Tab筛选
- 增加用户详情弹窗展示详细信息
- 添加禁用/启用用户功能及确认弹窗
- 路由注册新增用户管理路径
- 门店中心首页添加用户管理入口卡片，蓝色主题带👥图标
- 头像支持图片压缩展示，支持无头像显示默认图标
- 优化用户状态显示，颜色区分正常与已禁用状态
- 详情弹窗覆盖手机号、真实姓名、性别、会员等级、余额、积分、邮箱等信息
- 支持列表和详情弹窗中用户状态同步更新

.workbuddy/memory/2026-07-14.md

@@ -5,3 +5,11 @@
 - 问题：订单商品图片不显示，字段名与模型不匹配
 - 修复：`coverImage` → `image`、`specInfo` → `spec`、`quantity` → `totalNum`（按 `ShopOrderGoods` 模型定义）
 - 图片压缩：`getCompressedImageUrl(goods.image, { width: 80 })`，展示尺寸 w-16 h-16（64px），压缩宽度 80 够用
+
+## 门店中心新增用户管理功能
+- 新页面：`src/pages/store/users/index.tsx`
+- 功能：分页查询用户列表、搜索（昵称/手机号）、Tab 筛选（全部/正常/已禁用）、查看用户详情弹窗、禁用/启用用户
+- 使用的 API：`pageUsers`（`/system/user/page`）、`updateUserStatus`（`/system/user/status`，参数 userId + status，0=正常 1=禁用）
+- 入口：`src/pages/store/center/index.tsx` FEATURE_CARDS 中，在 VIP会员审核上方加了"用户管理"卡片（蓝色主题 👥 图标）
+- 路由注册：`src/app.config.ts` 新增 `pages/store/users/index`
+

src/app.config.ts

@@ -91,6 +91,7 @@ export default {
     'pages/store/center/index',
     'pages/store/orders/index',
     'pages/store/goods/index',
+    'pages/store/users/index',
     // 售后页面
     'pages/after-sale/apply/index',
     'pages/after-sale/progress/index',

src/pages/store/center/index.tsx

@@ -32,6 +32,16 @@ const FEATURE_CARDS = [
     // 显示待处理订单数量角标
     showBadge: true,
   },
+  {
+    key: 'users',
+    icon: '👥',
+    title: '用户管理',
+    desc: '查看用户信息、禁用/启用用户',
+    url: '/pages/store/users/index',
+    color: '#2563eb',
+    bgColor: '#dbeafe',
+    showBadge: false,
+  },
   {
     key: 'vip-review',
     icon: '👑',

src/pages/store/users/index.tsx

@@ -0,0 +1,445 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react'
+import { View, Text, Image, ScrollView, Input } from '@tarojs/components'
+import Taro, { useDidShow } from '@tarojs/taro'
+import { pageUsers, updateUserStatus } from '@/api/system/user'
+import type { User } from '@/api/system/user/model'
+import { getCompressedImageUrl } from '@/utils/image'
+
+definePageConfig({
+  navigationBarTitleText: '用户管理',
+})
+
+// ─── Tab 配置 ──────────────────────────────────────────────────
+type TabKey = 'all' | 'normal' | 'disabled'
+
+const TABS: { key: TabKey; label: string; status?: number }[] = [
+  { key: 'all', label: '全部' },
+  { key: 'normal', label: '正常', status: 0 },
+  { key: 'disabled', label: '已禁用', status: 1 },
+]
+
+// ─── 页面组件 ──────────────────────────────────────────────────────
+export default function StoreUsersPage() {
+  const [activeTab, setActiveTab] = useState<TabKey>('all')
+
+  // 用户列表与分页
+  const [userList, setUserList] = useState<User[]>([])
+  const [page, setPage] = useState(1)
+  const [hasMore, setHasMore] = useState(true)
+  const [loading, setLoading] = useState(false)
+
+  // 搜索
+  const [keyword, setKeyword] = useState('')
+  const [searchText, setSearchText] = useState('')
+
+  // 用户详情弹窗
+  const [showDetail, setShowDetail] = useState(false)
+  const [detailUser, setDetailUser] = useState<User | null>(null)
+
+  const pageSize = 20
+  const loadingRef = useRef(false)
+
+  /** 加载用户列表 */
+  const loadUsers = useCallback(async (tab: TabKey, pageNo: number = 1, append = false, kw?: string) => {
+    if (loadingRef.current) return
+    loadingRef.current = true
+    setLoading(true)
+
+    try {
+      const tabConfig = TABS.find(t => t.key === tab)
+      const params: any = {
+        page: pageNo,
+        limit: pageSize,
+      }
+      if (tabConfig?.status !== undefined) {
+        params.status = tabConfig.status
+      }
+      const effectiveKw = kw !== undefined ? kw : keyword
+      if (effectiveKw) params.keywords = effectiveKw
+
+      const res = await pageUsers(params)
+      const list = res?.list || []
+
+      setUserList(prev => append ? [...prev, ...list] : list)
+      setPage(pageNo)
+      setHasMore(list.length >= pageSize)
+    } catch (e: any) {
+      Taro.showToast({ title: e.message || '加载失败', icon: 'none' })
+      if (!append) setUserList([])
+    } finally {
+      loadingRef.current = false
+      setLoading(false)
+    }
+  }, [keyword])
+
+  // 切换 tab 时重新加载
+  useEffect(() => {
+    loadUsers(activeTab, 1)
+  }, [activeTab, loadUsers])
+
+  // 页面重新显示时刷新
+  useDidShow(() => {
+    loadUsers(activeTab, 1)
+  })
+
+  /** 加载更多 */
+  const handleLoadMore = () => {
+    if (hasMore && !loadingRef.current) {
+      loadUsers(activeTab, page + 1, true)
+    }
+  }
+
+  /** 执行搜索 */
+  const handleSearch = () => {
+    setKeyword(searchText)
+    loadUsers(activeTab, 1, false, searchText)
+  }
+
+  /** 清除搜索 */
+  const handleClearSearch = () => {
+    setSearchText('')
+    setKeyword('')
+    loadUsers(activeTab, 1, false, '')
+  }
+
+  /** 切换用户状态（禁用/启用） */
+  const handleToggleStatus = (user: User) => {
+    const currentStatus = user.status ?? 0
+    const newStatus = currentStatus === 0 ? 1 : 0
+    const actionText = newStatus === 1 ? '禁用' : '启用'
+
+    Taro.showModal({
+      title: '确认操作',
+      content: `确定要${actionText}用户「${user.nickname || user.realName || user.phone || user.userId}」吗？${newStatus === 1 ? '禁用后该用户将无法登录。' : ''}`,
+      confirmColor: newStatus === 1 ? '#ee0a24' : '#0e932e',
+      success: async (res) => {
+        if (!res.confirm) return
+        try {
+          Taro.showLoading({ title: `${actionText}中...` })
+          await updateUserStatus(user.userId, newStatus)
+          Taro.hideLoading()
+          Taro.showToast({ title: `${actionText}成功`, icon: 'success' })
+
+          // 更新列表和详情中的用户状态
+          setUserList(prev => prev.map(u =>
+            u.userId === user.userId ? { ...u, status: newStatus } : u
+          ))
+          if (detailUser?.userId === user.userId) {
+            setDetailUser(prev => prev ? { ...prev, status: newStatus } : null)
+          }
+        } catch (e: any) {
+          Taro.hideLoading()
+          Taro.showToast({ title: e.message || `${actionText}失败`, icon: 'none' })
+        }
+      },
+    })
+  }
+
+  /** 打开用户详情 */
+  const openDetail = (user: User) => {
+    setDetailUser(user)
+    setShowDetail(true)
+  }
+
+  /** 格式化时间 */
+  const formatTime = (time?: string) => {
+    if (!time) return '-'
+    // 兼容各种时间格式
+    return time.replace('T', ' ').substring(0, 19)
+  }
+
+  /** 渲染单个用户卡片 */
+  const renderUserCard = (user: User) => {
+    const isDisabled = user.status === 1
+    const displayName = user.nickname || user.realName || '未设置昵称'
+
+    return (
+      <View
+        key={user.userId || user.id}
+        className='bg-white rounded-xl mx-3 mt-3 p-4 active:opacity-80'
+        onClick={() => openDetail(user)}
+      >
+        {/* 用户头部 */}
+        <View className='flex items-center gap-3'>
+          {/* 头像 */}
+          <View className='w-12 h-12 rounded-full overflow-hidden flex-shrink-0 bg-gray-100'>
+            {user.avatar ? (
+              <Image
+                className='w-full h-full'
+                src={getCompressedImageUrl(user.avatar, { width: 80, quality: 80 })}
+                mode='aspectFill'
+              />
+            ) : (
+              <View className='w-full h-full flex items-center justify-center'>
+                <Text className='text-2xl'>👤</Text>
+              </View>
+            )}
+          </View>
+
+          {/* 信息 */}
+          <View className='flex-1 min-w-0'>
+            <View className='flex items-center gap-2'>
+              <Text className='text-sm text-gray-800 font-medium' style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {displayName}
+              </Text>
+              <View
+                className='px-1.5 py-0.5 rounded text-[10px]'
+                style={{
+                  color: isDisabled ? '#dc2626' : '#16a34a',
+                  background: isDisabled ? '#fef2f2' : '#f0fdf4',
+                }}
+              >
+                {isDisabled ? '已禁用' : '正常'}
+              </View>
+            </View>
+            <Text className='text-xs text-gray-400 mt-0.5 block'>
+              {user.phone || user.mobile || '未绑定手机'}
+            </Text>
+          </View>
+
+          {/* 禁用/启用按钮 */}
+          <View
+            className={`px-3 py-1.5 rounded-lg flex-shrink-0 ${isDisabled ? 'bg-green-50' : 'bg-red-50'}`}
+            onClick={(e) => {
+              e.stopPropagation()
+              handleToggleStatus(user)
+            }}
+          >
+            <Text className={`text-xs ${isDisabled ? 'text-green-500' : 'text-red-500'}`}>
+              {isDisabled ? '启用' : '禁用'}
+            </Text>
+          </View>
+        </View>
+
+        {/* 附加信息 */}
+        <View className='flex items-center gap-4 mt-3 pt-3 border-t border-gray-50'>
+          {user.memberLevelName && (
+            <View className='flex items-center gap-1'>
+              <Text className='text-[10px] text-gray-400'>会员:</Text>
+              <Text className='text-xs text-purple-500'>{user.memberLevelName}</Text>
+            </View>
+          )}
+          <View className='flex items-center gap-1'>
+            <Text className='text-[10px] text-gray-400'>注册:</Text>
+            <Text className='text-xs text-gray-500'>{formatTime(user.createTime)}</Text>
+          </View>
+          {user.balance !== undefined && Number(user.balance) > 0 && (
+            <View className='flex items-center gap-1'>
+              <Text className='text-[10px] text-gray-400'>余额:</Text>
+              <Text className='text-xs text-orange-500'>¥{user.balance}</Text>
+            </View>
+          )}
+        </View>
+      </View>
+    )
+  }
+
+  return (
+    <View className='min-h-full bg-gray-50'>
+      {/* 搜索栏 */}
+      <View className='bg-white px-3 py-2 flex items-center gap-2'>
+        <View className='flex-1 flex items-center bg-gray-100 rounded-lg px-3 py-1.5'>
+          <Input
+            className='flex-1 text-sm'
+            placeholder='搜索昵称 / 手机号'
+            value={searchText}
+            onInput={(e) => setSearchText(e.detail.value)}
+            onConfirm={handleSearch}
+            confirmType='search'
+          />
+          {searchText ? (
+            <Text
+              className='text-gray-400 text-lg px-1'
+              onClick={handleClearSearch}
+            >×</Text>
+          ) : null}
+        </View>
+        <View
+          className='px-3 py-1.5 rounded-lg bg-blue-500'
+          onClick={handleSearch}
+        >
+          <Text className='text-sm text-white'>搜索</Text>
+        </View>
+      </View>
+
+      {/* Tab 栏 */}
+      <View className='bg-white flex border-b border-gray-50'>
+        {TABS.map(tab => (
+          <View
+            key={tab.key}
+            className={`flex-1 text-center py-3 border-b-2 ${activeTab === tab.key ? 'border-blue-500' : 'border-transparent'}`}
+            onClick={() => setActiveTab(tab.key)}
+          >
+            <Text className={`text-sm ${activeTab === tab.key ? 'text-blue-500 font-medium' : 'text-gray-500'}`}>
+              {tab.label}
+            </Text>
+          </View>
+        ))}
+      </View>
+
+      {/* 用户列表 */}
+      <ScrollView
+        scrollY
+        style={{ height: 'calc(100vh - 100px)' }}
+        onScrollToLower={handleLoadMore}
+        lowerThreshold={100}
+      >
+        {loading && userList.length === 0 ? (
+          <View className='flex justify-center items-center py-20'>
+            <Text className='text-gray-400'>加载中...</Text>
+          </View>
+        ) : userList.length === 0 ? (
+          <View className='flex justify-center items-center py-20'>
+            <Text className='text-gray-400'>暂无用户</Text>
+          </View>
+        ) : (
+          userList.map(renderUserCard)
+        )}
+        {loading && userList.length > 0 && (
+          <View className='flex justify-center items-center py-4'>
+            <Text className='text-gray-400 text-sm'>加载中...</Text>
+          </View>
+        )}
+        {!hasMore && userList.length > 0 && (
+          <View className='flex justify-center items-center py-4'>
+            <Text className='text-gray-300 text-xs'>没有更多了</Text>
+          </View>
+        )}
+        <View className='h-6' />
+      </ScrollView>
+
+      {/* 用户详情弹窗 */}
+      {showDetail && detailUser && (
+        <View className='fixed inset-0 z-50 flex items-end justify-center'>
+          {/* 遮罩 */}
+          <View className='absolute inset-0 bg-black/50' onClick={() => setShowDetail(false)} />
+          {/* 弹窗内容 */}
+          <View className='relative bg-white rounded-t-2xl w-full px-5 pt-6 pb-10 max-h-[75vh] overflow-y-auto'>
+            {/* 标题 */}
+            <View className='flex justify-between items-center mb-5'>
+              <Text className='text-lg font-medium text-gray-800'>用户详情</Text>
+              <Text className='text-gray-400 text-lg' onClick={() => setShowDetail(false)}>×</Text>
+            </View>
+
+            {/* 用户基本信息 */}
+            <View className='flex items-center gap-4 mb-5'>
+              <View className='w-16 h-16 rounded-full overflow-hidden flex-shrink-0 bg-gray-100'>
+                {detailUser.avatar ? (
+                  <Image
+                    className='w-full h-full'
+                    src={getCompressedImageUrl(detailUser.avatar, { width: 100, quality: 90 })}
+                    mode='aspectFill'
+                  />
+                ) : (
+                  <View className='w-full h-full flex items-center justify-center'>
+                    <Text className='text-3xl'>👤</Text>
+                  </View>
+                )}
+              </View>
+              <View className='flex-1 min-w-0'>
+                <View className='flex items-center gap-2'>
+                  <Text className='text-base font-medium text-gray-800'>
+                    {detailUser.nickname || detailUser.realName || '未设置昵称'}
+                  </Text>
+                  <View
+                    className='px-2 py-0.5 rounded text-xs'
+                    style={{
+                      color: detailUser.status === 1 ? '#dc2626' : '#16a34a',
+                      background: detailUser.status === 1 ? '#fef2f2' : '#f0fdf4',
+                    }}
+                  >
+                    {detailUser.status === 1 ? '已禁用' : '正常'}
+                  </View>
+                </View>
+                <Text className='text-xs text-gray-400 mt-1 block'>
+                  ID: {detailUser.userId || detailUser.id}
+                </Text>
+              </View>
+            </View>
+
+            {/* 详细信息列表 */}
+            <View className='bg-gray-50 rounded-xl p-4 mb-5'>
+              {/* 手机号 */}
+              <View className='flex justify-between items-center py-2 border-b border-gray-100'>
+                <Text className='text-sm text-gray-500'>手机号</Text>
+                <Text className='text-sm text-gray-800'>{detailUser.phone || detailUser.mobile || '-'}</Text>
+              </View>
+
+              {/* 真实姓名 */}
+              {detailUser.realName && (
+                <View className='flex justify-between items-center py-2 border-b border-gray-100'>
+                  <Text className='text-sm text-gray-500'>真实姓名</Text>
+                  <Text className='text-sm text-gray-800'>{detailUser.realName}</Text>
+                </View>
+              )}
+
+              {/* 性别 */}
+              <View className='flex justify-between items-center py-2 border-b border-gray-100'>
+                <Text className='text-sm text-gray-500'>性别</Text>
+                <Text className='text-sm text-gray-800'>
+                  {detailUser.gender === 1 ? '男' : detailUser.gender === 2 ? '女' : '未知'}
+                </Text>
+              </View>
+
+              {/* 会员等级 */}
+              {detailUser.memberLevelName && (
+                <View className='flex justify-between items-center py-2 border-b border-gray-100'>
+                  <Text className='text-sm text-gray-500'>会员等级</Text>
+                  <Text className='text-sm text-purple-500'>{detailUser.memberLevelName}</Text>
+                </View>
+              )}
+
+              {/* 余额 */}
+              {detailUser.balance !== undefined && (
+                <View className='flex justify-between items-center py-2 border-b border-gray-100'>
+                  <Text className='text-sm text-gray-500'>余额</Text>
+                  <Text className='text-sm text-orange-500'>¥{detailUser.balance || '0.00'}</Text>
+                </View>
+              )}
+
+              {/* 积分 */}
+              {detailUser.points !== undefined && (
+                <View className='flex justify-between items-center py-2 border-b border-gray-100'>
+                  <Text className='text-sm text-gray-500'>积分</Text>
+                  <Text className='text-sm text-gray-800'>{detailUser.points || 0}</Text>
+                </View>
+              )}
+
+              {/* 邮箱 */}
+              {detailUser.email && (
+                <View className='flex justify-between items-center py-2 border-b border-gray-100'>
+                  <Text className='text-sm text-gray-500'>邮箱</Text>
+                  <Text className='text-sm text-gray-800'>{detailUser.email}</Text>
+                </View>
+              )}
+
+              {/* 注册时间 */}
+              <View className='flex justify-between items-center py-2'>
+                <Text className='text-sm text-gray-500'>注册时间</Text>
+                <Text className='text-sm text-gray-800'>{formatTime(detailUser.createTime)}</Text>
+              </View>
+            </View>
+
+            {/* 操作按钮 */}
+            <View className='flex gap-3'>
+              <View
+                className='flex-1 py-3 rounded-xl bg-gray-100 text-center'
+                onClick={() => setShowDetail(false)}
+              >
+                <Text className='text-sm text-gray-600'>关闭</Text>
+              </View>
+              <View
+                className={`flex-1 py-3 rounded-xl text-center ${detailUser.status === 1 ? 'bg-green-500' : 'bg-red-500'}`}
+                onClick={() => handleToggleStatus(detailUser)}
+              >
+                <Text className='text-sm text-white'>
+                  {detailUser.status === 1 ? '启用用户' : '禁用用户'}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      )}
+    </View>
+  )
+}