sc

src/pages/account/accountForm.vue

@@ -40,6 +40,18 @@
             />
           </view>
         </view>
+        
+        <view class="form-item">
+          <view class="form-label">状态</view>
+          <view class="form-control">
+            <view class="status-switch">
+              <view class="status-text">{{ form.status === 0 ? '启用' : '禁用' }}</view>
+              <view class="switch" :class="{ 'active': form.status === 0 }" @click="form.status = form.status === 0 ? 1 : 0">
+                <view class="switch-button"></view>
+              </view>
+            </view>
+          </view>
+        </view>
       </view>
       
       <!-- 菜单权限 -->
@@ -100,7 +112,8 @@
     nickname: '',
     mobile: '',
     menuIds: [],
-    dataScope: '1' // 默认全部数据
+    dataScope: '1', // 默认全部数据
+    status: 0 // 默认启用
   });
   
   // 菜单列表
@@ -305,6 +318,48 @@
     color: #303133;
   }
   
+  /* 状态开关 */
+  .status-switch {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .status-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  .switch {
+    width: 80rpx;
+    height: 40rpx;
+    background-color: #dcdfe6;
+    border-radius: 20rpx;
+    position: relative;
+    transition: all 0.3s ease-in-out;
+    cursor: pointer;
+  }
+  
+  .switch.active {
+    background-color: #409eff;
+  }
+  
+  .switch-button {
+    width: 36rpx;
+    height: 36rpx;
+    background-color: #ffffff;
+    border-radius: 50%;
+    position: absolute;
+    top: 2rpx;
+    left: 2rpx;
+    transition: all 0.3s ease-in-out;
+    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  .switch.active .switch-button {
+    left: 42rpx;
+  }
+