feat: 添加商品管理页面和角色权限控制

src/pages.json

@@ -18,6 +18,12 @@
         "navigationBarTitleText": "商品列表"
       }
     },
+    {
+      "path": "pages/product/manage",
+      "style": {
+        "navigationBarTitleText": "商品管理"
+      }
+    },
     {
       "path": "pages/order/create",
       "style": {

src/pages/index/index.vue

@@ -10,9 +10,9 @@
       </view>
     </view>
 
-    <!-- 功能菜单 - 管理员/销售 -->
+    <!-- 功能菜单 - 管理员 -->
-    <view class="menu-grid" v-if="!isCustomer">
+    <view class="menu-grid" v-if="isAdmin">
-      <view class="menu-item" @click="goTo('/pages/product/list')">
+      <view class="menu-item" @click="goTo('/pages/product/manage')">
         <text class="menu-icon">📦</text>
         <text class="menu-text">商品管理</text>
       </view>
@@ -30,8 +30,41 @@
       </view>
     </view>
 
+    <!-- 功能菜单 - 销售人员 -->
+    <view class="menu-grid" v-else-if="isSales">
+      <view class="menu-item" @click="goTo('/pages/product/list')">
+        <text class="menu-icon">📦</text>
+        <text class="menu-text">商品浏览</text>
+      </view>
+      <view class="menu-item" @click="goTo('/pages/order/create')">
+        <text class="menu-icon">📝</text>
+        <text class="menu-text">创建订单</text>
+      </view>
+      <view class="menu-item" @click="goTo('/pages/order/list')">
+        <text class="menu-icon">📋</text>
+        <text class="menu-text">订单列表</text>
+      </view>
+    </view>
+
     <!-- 功能菜单 - 顾客 -->
-    <view class="menu-grid" v-else>
+    <view class="menu-grid" v-else-if="isCustomer">
+      <view class="menu-item" @click="goTo('/pages/product/list')">
+        <text class="menu-icon">📦</text>
+        <text class="menu-text">商品浏览</text>
+      </view>
+      <view class="menu-item" @click="goTo('/pages/order/list')">
+        <text class="menu-icon">📋</text>
+        <text class="menu-text">我的订单</text>
+      </view>
+    </view>
+
+    <!-- 功能菜单 - 游客 -->
+    <view class="menu-grid" v-else-if="isGuest">
+      <view class="menu-item" @click="goTo('/pages/login/index')">
+        <text class="menu-icon">🔑</text>
+        <text class="menu-text">请先登录</text>
+      </view>
+    </view>
       <view class="menu-item" @click="goTo('/pages/product/list')">
         <text class="menu-icon">📦</text>
         <text class="menu-text">商品浏览</text>
@@ -62,7 +95,7 @@
     </view>
 
     <!-- 顾客提示 -->
-    <view class="section" v-else>
+    <view class="section" v-if="isCustomer">
       <view class="section-title">温馨提示</view>
       <view class="tips">
         <text class="tip-text">• 您可以浏览商品</text>
@@ -71,8 +104,17 @@
       </view>
     </view>
 
+    <!-- 游客提示 -->
+    <view class="section" v-if="isGuest">
+      <view class="section-title">欢迎使用</view>
+      <view class="tips">
+        <text class="tip-text">• 请登录后使用完整功能</text>
+        <text class="tip-text">• 登录后可浏览商品和查看订单</text>
+      </view>
+    </view>
+
     <!-- 退出登录 -->
-    <button class="logout-btn" @click="logout">退出登录</button>
+    <button class="logout-btn" @click="logout" v-if="!isGuest">退出登录</button>
   </view>
 </template>
 
@@ -80,14 +122,17 @@
 import authApi from '@/api/auth'
 import orderApi from '@/api/order'
 import productApi from '@/api/product'
-import { getRole, isCustomer as checkIsCustomer } from '@/utils/auth'
+import { getRole, isAdmin, isSales, isCustomer as checkIsCustomer, isGuest as checkIsGuest, canManageProduct, canCreateOrder, canViewStats } from '@/utils/auth'
 
 export default {
   data() {
     return {
       userInfo: {},
-      role: 'admin',
+      role: 'guest',
+      isAdmin: false,
+      isSales: false,
       isCustomer: false,
+      isGuest: false,
       stats: {
         orderCount: 0,
         actualAmount: 0,
@@ -97,14 +142,20 @@ export default {
   },
   computed: {
     roleText() {
-      return this.isCustomer ? '顾客' : '销售员'
+      if (this.isAdmin) return '管理员'
+      if (this.isSales) return '销售员'
+      if (this.isCustomer) return '顾客'
+      return '游客'
     }
   },
   onLoad() {
     this.role = getRole()
+    this.isAdmin = isAdmin()
+    this.isSales = isSales()
     this.isCustomer = checkIsCustomer()
+    this.isGuest = checkIsGuest()
     this.loadUserInfo()
-    if (!this.isCustomer) {
+    if (canViewStats()) {
       this.loadStats()
     }
   },

src/pages/login/index.vue

@@ -96,6 +96,7 @@ export default {
       }
 
       // 假登录（演示用）
+      // 管理员
       if (this.username === 'admin' && this.password === 'admin') {
         const mockData = {
           token: 'mock-token-admin',
@@ -106,7 +107,25 @@ export default {
         uni.setStorageSync('userId', mockData.userId)
         uni.setStorageSync('role', mockData.role)
         
-        uni.showToast({ title: '登录成功', icon: 'success' })
+        uni.showToast({ title: '管理员登录成功', icon: 'success' })
+        setTimeout(() => {
+          uni.reLaunch({ url: '/pages/index/index' })
+        }, 1000)
+        return
+      }
+
+      // 销售人员
+      if (this.username === 'sales' && this.password === 'sales') {
+        const mockData = {
+          token: 'mock-token-sales',
+          userId: 'sales-001',
+          role: 'sales'
+        }
+        uni.setStorageSync('token', mockData.token)
+        uni.setStorageSync('userId', mockData.userId)
+        uni.setStorageSync('role', mockData.role)
+        
+        uni.showToast({ title: '销售人员登录成功', icon: 'success' })
         setTimeout(() => {
           uni.reLaunch({ url: '/pages/index/index' })
         }, 1000)

src/pages/product/manage.vue

@@ -0,0 +1,496 @@
+<template>
+  <view class="page">
+    <!-- 搜索栏 -->
+    <view class="search-bar">
+      <input 
+        class="search-input" 
+        v-model="keyword" 
+        placeholder="搜索商品名称" 
+        @confirm="search"
+      />
+      <button class="search-btn" @click="search">搜索</button>
+      <button class="add-btn" @click="addProduct">+</button>
+    </view>
+
+    <!-- 商品列表 -->
+    <view class="product-list">
+      <view 
+        v-for="item in products" 
+        :key="item.productId" 
+        class="product-item"
+      >
+        <view class="product-info" @click="editProduct(item)">
+          <text class="product-name">{{ item.name }}</text>
+          <text class="product-spec">{{ item.spec || '-' }}</text>
+          <view class="product-price">
+            <text class="price">¥{{ item.price }}</text>
+            <text class="unit">/{{ item.unit }}</text>
+          </view>
+          <view class="product-status">
+            <text :class="['status', item.status === 1 ? 'on' : 'off']">
+              {{ item.status === 1 ? '上架' : '下架' }}
+            </text>
+          </view>
+        </view>
+        <view class="product-actions">
+          <view class="action-btn" @click="toggleStatus(item)">
+            {{ item.status === 1 ? '下架' : '上架' }}
+          </view>
+          <view class="action-btn delete" @click="deleteProduct(item)">
+            删除
+          </view>
+        </view>
+      </view>
+      
+      <!-- 空状态 -->
+      <view v-if="products.length === 0" class="empty">
+        <text>暂无商品</text>
+      </view>
+    </view>
+
+    <!-- 商品表单弹窗 -->
+    <view class="modal" v-if="showModal">
+      <view class="modal-mask" @click="closeModal"></view>
+      <view class="modal-content">
+        <view class="modal-header">
+          <text>{{ isEdit ? '编辑商品' : '新增商品' }}</text>
+          <text class="close-btn" @click="closeModal">×</text>
+        </view>
+        <view class="modal-body">
+          <view class="form-item">
+            <text class="label">商品名称*</text>
+            <input class="input" v-model="form.name" placeholder="请输入商品名称" />
+          </view>
+          <view class="form-item">
+            <text class="label">规格</text>
+            <input class="input" v-model="form.spec" placeholder="请输入规格" />
+          </view>
+          <view class="form-item">
+            <text class="label">单位*</text>
+            <input class="input" v-model="form.unit" placeholder="如：个、箱、米" />
+          </view>
+          <view class="form-item">
+            <text class="label">价格*</text>
+            <input class="input" type="digit" v-model="form.price" placeholder="请输入价格" />
+          </view>
+          <view class="form-item">
+            <text class="label">分类</text>
+            <picker :range="categories" range-key="name" @change="onCategoryChange">
+              <view class="picker">
+                {{ form.categoryId ? getCategoryName(form.categoryId) : '请选择分类' }}
+              </view>
+            </picker>
+          </view>
+          <view class="form-item">
+            <text class="label">备注</text>
+            <textarea class="textarea" v-model="form.remark" placeholder="请输入备注" />
+          </view>
+        </view>
+        <view class="modal-footer">
+          <button class="cancel-btn" @click="closeModal">取消</button>
+          <button class="confirm-btn" @click="saveProduct">保存</button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import productApi from '@/api/product'
+import { canManageProduct } from '@/utils/auth'
+
+export default {
+  data() {
+    return {
+      keyword: '',
+      products: [],
+      categories: [],
+      showModal: false,
+      isEdit: false,
+      form: {
+        productId: '',
+        name: '',
+        spec: '',
+        unit: '',
+        price: '',
+        categoryId: '',
+        remark: '',
+        status: 1
+      }
+    }
+  },
+  onLoad() {
+    if (!canManageProduct()) {
+      uni.showToast({ title: '无权限', icon: 'none' })
+      uni.navigateBack()
+      return
+    }
+    this.loadCategories()
+    this.loadProducts()
+  },
+  methods: {
+    async loadCategories() {
+      try {
+        const categories = await productApi.getCategories()
+        this.categories = categories || []
+      } catch (e) {
+        console.error(e)
+      }
+    },
+    async loadProducts() {
+      try {
+        const res = await productApi.getProducts({
+          keyword: this.keyword,
+          page: 1,
+          pageSize: 100
+        })
+        this.products = res.records || []
+      } catch (e) {
+        console.error(e)
+      }
+    },
+    search() {
+      this.loadProducts()
+    },
+    addProduct() {
+      this.isEdit = false
+      this.form = {
+        productId: '',
+        name: '',
+        spec: '',
+        unit: '',
+        price: '',
+        categoryId: '',
+        remark: '',
+        status: 1
+      }
+      this.showModal = true
+    },
+    editProduct(item) {
+      this.isEdit = true
+      this.form = { ...item }
+      this.showModal = true
+    },
+    closeModal() {
+      this.showModal = false
+    },
+    onCategoryChange(e) {
+      const index = e.detail.value
+      this.form.categoryId = this.categories[index].categoryId
+    },
+    getCategoryName(categoryId) {
+      const cat = this.categories.find(c => c.categoryId === categoryId)
+      return cat ? cat.name : ''
+    },
+    async saveProduct() {
+      if (!this.form.name) {
+        uni.showToast({ title: '请输入商品名称', icon: 'none' })
+        return
+      }
+      if (!this.form.unit) {
+        uni.showToast({ title: '请输入单位', icon: 'none' })
+        return
+      }
+      if (!this.form.price) {
+        uni.showToast({ title: '请输入价格', icon: 'none' })
+        return
+      }
+
+      try {
+        if (this.isEdit) {
+          await productApi.updateProduct(this.form)
+          uni.showToast({ title: '更新成功', icon: 'success' })
+        } else {
+          await productApi.createProduct(this.form)
+          uni.showToast({ title: '创建成功', icon: 'success' })
+        }
+        this.closeModal()
+        this.loadProducts()
+      } catch (e) {
+        console.error(e)
+        uni.showToast({ title: e.message || '操作失败', icon: 'none' })
+      }
+    },
+    async toggleStatus(item) {
+      const newStatus = item.status === 1 ? 0 : 1
+      try {
+        await productApi.updateProduct({
+          productId: item.productId,
+          status: newStatus
+        })
+        uni.showToast({ title: newStatus === 1 ? '已上架' : '已下架', icon: 'success' })
+        this.loadProducts()
+      } catch (e) {
+        console.error(e)
+        uni.showToast({ title: '操作失败', icon: 'none' })
+      }
+    },
+    async deleteProduct(item) {
+      uni.showModal({
+        title: '确认删除',
+        content: `确定要删除商品"${item.name}"吗？`,
+        success: async (res) => {
+          if (res.confirm) {
+            try {
+              await productApi.deleteProduct(item.productId)
+              uni.showToast({ title: '删除成功', icon: 'success' })
+              this.loadProducts()
+            } catch (e) {
+              console.error(e)
+              uni.showToast({ title: '删除失败', icon: 'none' })
+            }
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.page {
+  padding: 20rpx;
+}
+
+.search-bar {
+  display: flex;
+  margin-bottom: 20rpx;
+}
+
+.search-input {
+  flex: 1;
+  height: 70rpx;
+  padding: 0 20rpx;
+  background: #fff;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+}
+
+.search-btn {
+  width: 120rpx;
+  height: 70rpx;
+  line-height: 70rpx;
+  background: #3cc51f;
+  color: #fff;
+  border: none;
+  border-radius: 8rpx;
+  margin-left: 20rpx;
+  font-size: 28rpx;
+}
+
+.add-btn {
+  width: 70rpx;
+  height: 70rpx;
+  line-height: 70rpx;
+  background: #1890ff;
+  color: #fff;
+  border: none;
+  border-radius: 8rpx;
+  margin-left: 20rpx;
+  font-size: 40rpx;
+}
+
+.product-list {
+  background: #fff;
+  border-radius: 16rpx;
+}
+
+.product-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 24rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+}
+
+.product-info {
+  flex: 1;
+}
+
+.product-name {
+  font-size: 28rpx;
+  font-weight: bold;
+  display: block;
+}
+
+.product-spec {
+  font-size: 24rpx;
+  color: #999;
+  margin-top: 8rpx;
+  display: block;
+}
+
+.product-price {
+  margin-top: 12rpx;
+}
+
+.price {
+  color: #ff4d4f;
+  font-size: 28rpx;
+  font-weight: bold;
+}
+
+.unit {
+  color: #999;
+  font-size: 24rpx;
+}
+
+.product-status {
+  margin-top: 8rpx;
+}
+
+.status {
+  font-size: 22rpx;
+  padding: 4rpx 12rpx;
+  border-radius: 4rpx;
+}
+
+.status.on {
+  background: #e6f7ff;
+  color: #1890ff;
+}
+
+.status.off {
+  background: #fff7e6;
+  color: #fa8c16;
+}
+
+.product-actions {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.action-btn {
+  padding: 8rpx 20rpx;
+  background: #e6f7ff;
+  color: #1890ff;
+  border-radius: 4rpx;
+  font-size: 24rpx;
+  margin-bottom: 10rpx;
+}
+
+.action-btn.delete {
+  background: #fff1f0;
+  color: #ff4d4f;
+}
+
+.empty {
+  padding: 100rpx;
+  text-align: center;
+  color: #999;
+}
+
+/* 弹窗 */
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+}
+
+.modal-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  border-radius: 24rpx 24rpx 0 0;
+  max-height: 80vh;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+.close-btn {
+  font-size: 48rpx;
+  color: #999;
+}
+
+.modal-body {
+  padding: 30rpx;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.form-item {
+  margin-bottom: 24rpx;
+}
+
+.label {
+  display: block;
+  font-size: 26rpx;
+  color: #666;
+  margin-bottom: 10rpx;
+}
+
+.input {
+  width: 100%;
+  height: 70rpx;
+  padding: 0 20rpx;
+  background: #f5f5f5;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+}
+
+.picker {
+  width: 100%;
+  height: 70rpx;
+  padding: 0 20rpx;
+  background: #f5f5f5;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  line-height: 70rpx;
+}
+
+.textarea {
+  width: 100%;
+  height: 150rpx;
+  padding: 20rpx;
+  background: #f5f5f5;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+}
+
+.modal-footer {
+  display: flex;
+  padding: 30rpx;
+  border-top: 1rpx solid #f5f5f5;
+}
+
+.cancel-btn, .confirm-btn {
+  flex: 1;
+  height: 80rpx;
+  line-height: 80rpx;
+  border-radius: 40rpx;
+  font-size: 28rpx;
+}
+
+.cancel-btn {
+  background: #f5f5f5;
+  color: #666;
+  margin-right: 20rpx;
+}
+
+.confirm-btn {
+  background: #3cc51f;
+  color: #fff;
+}
+</style>

src/utils/auth.js

@@ -10,16 +10,42 @@ export function isAdmin() {
   return getRole() === 'admin'
 }
 
+export function isSales() {
+  return getRole() === 'sales'
+}
+
 export function isCustomer() {
   return getRole() === 'customer'
 }
 
-export function canCreateOrder() {
+export function isGuest() {
-  // 只有管理员/销售可以创建订单，顾客不可以
+  return getRole() === 'guest' || !uni.getStorageSync('token')
-  return !isCustomer()
 }
 
-export function canViewAllOrders() {
+/**
-  // 只有管理员/销售可以查看全部订单
+ * 是否有商品维护权限（仅管理员）
-  return !isCustomer()
+ */
+export function canManageProduct() {
+  return isAdmin()
+}
+
+/**
+ * 是否有创建订单权限（管理员/销售）
+ */
+export function canCreateOrder() {
+  return isAdmin() || isSales()
+}
+
+/**
+ * 是否有查看全部订单权限（管理员/销售）
+ */
+export function canViewAllOrders() {
+  return isAdmin() || isSales()
+}
+
+/**
+ * 是否可以查看首页统计（管理员/销售）
+ */
+export function canViewStats() {
+  return isAdmin() || isSales()
 }