完善页面6

components/CategoryFormDrawer.vue

@@ -0,0 +1,153 @@
+<template>
+  <uni-drawer ref="drawerRef" mode="right" :width="400">
+    <view class="drawer-content">
+      <view class="drawer-header">
+        <text class="title">{{ isEdit ? "编辑分类" : "添加分类" }}</text>
+        <uni-icons type="closeempty" size="24" @click="close"></uni-icons>
+      </view>
+      <scroll-view scroll-y class="drawer-body">
+        <uni-forms
+          ref="formRef"
+          :model="formData"
+          :rules="rules"
+          label-width="80px"
+        >
+          <uni-forms-item label="分类名称" name="name" required>
+            <uni-easyinput
+              v-model="formData.name"
+              placeholder="请输入分类名称"
+            />
+          </uni-forms-item>
+          <uni-forms-item label="排序" name="sort">
+            <uni-easyinput
+              type="number"
+              v-model="formData.sort"
+              placeholder="请输入排序"
+            />
+          </uni-forms-item>
+          <uni-forms-item label="状态" name="status">
+            <switch
+              :checked="formData.status === 1"
+              @change="(e) => (formData.status = e.detail.value ? 1 : 0)"
+            />
+          </uni-forms-item>
+        </uni-forms>
+      </scroll-view>
+      <view class="drawer-footer">
+        <button class="btn-cancel" @click="close">取消</button>
+        <button
+          class="btn-confirm"
+          type="primary"
+          @click="submit"
+          :loading="loading"
+        >
+          确定
+        </button>
+      </view>
+    </view>
+  </uni-drawer>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import { api } from "@/services/api.js";
+
+const emit = defineEmits(["success"]);
+const drawerRef = ref(null);
+const formRef = ref(null);
+const isEdit = ref(false);
+const loading = ref(false);
+const editId = ref(null);
+
+const formData = reactive({
+  name: "",
+  sort: 0,
+  status: 1,
+});
+
+const rules = {
+  name: {
+    rules: [{ required: true, errorMessage: "请输入分类名称" }],
+  },
+};
+
+const open = (row) => {
+  if (row) {
+    isEdit.value = true;
+    editId.value = row.id;
+    Object.assign(formData, {
+      name: row.name,
+      sort: row.sort,
+      status: row.status,
+    });
+  } else {
+    isEdit.value = false;
+    editId.value = null;
+    Object.assign(formData, {
+      name: "",
+      sort: 0,
+      status: 1,
+    });
+  }
+  drawerRef.value.open();
+};
+
+const close = () => {
+  drawerRef.value.close();
+};
+
+const submit = async () => {
+  try {
+    await formRef.value.validate();
+    loading.value = true;
+    if (isEdit.value) {
+      await api.updateCategory(editId.value, formData);
+    } else {
+      await api.addCategory(formData);
+    }
+    uni.showToast({ title: "保存成功", icon: "success" });
+    emit("success");
+    close();
+  } catch (e) {
+    console.error(e);
+  } finally {
+    loading.value = false;
+  }
+};
+
+defineExpose({ open, close });
+</script>
+
+<style scoped>
+.drawer-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #fff;
+}
+.drawer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  border-bottom: 1px solid #eee;
+}
+.drawer-header .title {
+  font-size: 16px;
+  font-weight: bold;
+}
+.drawer-body {
+  flex: 1;
+  padding: 15px;
+}
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 15px;
+  border-top: 1px solid #eee;
+}
+.drawer-footer button {
+  margin-left: 10px;
+  min-width: 80px;
+}
+</style>