From df41a8657247c0c08e9d065b139bec3f97d9a2a4 Mon Sep 17 00:00:00 2001
From: yuanteng <1876787513@qq.com>
Date: Sun, 3 Nov 2024 12:40:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E6=B7=BB=E5=8A=A0=EF=BC=8C?=
 =?UTF-8?q?=E5=95=86=E5=93=81=E4=BF=AE=E6=94=B9=EF=BC=8C=E7=B1=BB=E5=88=AB?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Aside.vue           |  20 +-
 src/router/routes.ts                      |  15 +-
 src/store/userStore.ts                    |   2 -
 src/views/Commodity/AddProduct.vue        | 366 ++++++----------
 src/views/Commodity/MerchandiseCenter.vue | 490 +++++++++-------------
 src/views/Commodity/TypeManagement.vue    |  75 ++--
 src/views/Login.vue                       |   6 -
 src/views/Orders/OrderList.vue            |  13 +
 src/views/test.vue                        | 101 +++--
 9 files changed, 481 insertions(+), 607 deletions(-)
 create mode 100644 src/views/Orders/OrderList.vue

diff --git a/src/layout/components/Aside.vue b/src/layout/components/Aside.vue
index 3e3d5c5..01dd813 100644
--- a/src/layout/components/Aside.vue
+++ b/src/layout/components/Aside.vue
@@ -21,15 +21,16 @@
                 <span>用户管理</span>
             </template>
 
+            <el-menu-item index="/PersonalCenter">
+              <el-icon><UserFilled /></el-icon>
+              <span slot="title">个人中心</span>
+            </el-menu-item>
+
             <el-menu-item index="/UserManagement">
               <el-icon><List /></el-icon>
               <span slot="title">用户列表</span>
             </el-menu-item>
 
-            <el-menu-item index="/PersonalCenter">
-              <el-icon><UserFilled /></el-icon>
-              <span slot="title">个人中心</span>
-            </el-menu-item>
           </el-sub-menu>
 
           <el-sub-menu index="2">
@@ -54,6 +55,17 @@
             </el-menu-item>
           </el-sub-menu>
 
+          <el-sub-menu index="3">
+            <template #title>
+              <el-icon><HomeFilled /></el-icon>
+              <span>订单管理</span>
+            </template>
+
+            <el-menu-item index="/OrderList">
+              <el-icon><Menu /></el-icon>
+              <span slot="title">订单列表</span>
+            </el-menu-item>
+          </el-sub-menu>
         </el-menu>
       </el-aside>
     </el-aside>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 453b754..25ffd85 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -13,16 +13,16 @@ export const routes = [
         path: '/manage',
         component: () => import("@/layout/Manage.vue"),
         children:[
-            {
-                path: '/UserManagement',
-                name:'用户列表',
-                component: ()=> import("../views/User/UserManagement.vue")
-            },
             {
                 path: '/PersonalCenter',
                 name:'个人中心',
                 component: ()=> import("../views/User/PersonalCenter.vue")
             },
+            {
+                path: '/UserManagement',
+                name:'用户列表',
+                component: ()=> import("../views/User/UserManagement.vue")
+            },
             {
                 path: '/AddProduct',
                 name: '添加商品',
@@ -37,6 +37,11 @@ export const routes = [
                 path: '/TypeManagement',
                 name: '类别管理',
                 component: ()=> import("../views/Commodity/TypeManagement.vue")
+            },
+            {
+                path: '/OrderList',
+                name: '订单列表',
+                component: ()=> import("../views/Orders/OrderList.vue")
             }
         ]
     },
diff --git a/src/store/userStore.ts b/src/store/userStore.ts
index ef749c2..eb4ade1 100644
--- a/src/store/userStore.ts
+++ b/src/store/userStore.ts
@@ -1,5 +1,4 @@
 import { defineStore } from "pinia";
-import  myAxios  from '../api/myAxios'
 
 export const userStore = defineStore( 'user' , {
     //state是应用的核心数据，通常用于管理用户信息、应用设置、数据列表等。
@@ -26,7 +25,6 @@ export const userStore = defineStore( 'user' , {
         //更新state
         updateUser(payLoad : any) {
             this.loginUser = payLoad
-            console.log(payLoad,2654615165)
         }
     }
 })
\ No newline at end of file
diff --git a/src/views/Commodity/AddProduct.vue b/src/views/Commodity/AddProduct.vue
index 1a9ea12..f677fb5 100644
--- a/src/views/Commodity/AddProduct.vue
+++ b/src/views/Commodity/AddProduct.vue
@@ -1,260 +1,172 @@
 <template>
-<!--  添加商品图片-->
-<!-- <div style="height: auto;margin-bottom: 10px;width: 480px;">
-  <div style="font-size: 20px;margin-bottom: 10px">添加商品图片</div>
-  <el-upload action="#" v-model:file-list="uploadedFiles" list-type="picture-card" :auto-upload="false" multiple="true">
-    <el-icon><Plus /></el-icon>
-
-    <template #file="{ file }">
-      <div>
-        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
-        <span class="el-upload-list__item-actions">
-          <span
-              class="el-upload-list__item-preview"
-              @click="handlePictureCardPreview(file)"
+  <div>
+    <!-- 表单 ref 和 prop绑定  用于重置表单 -->
+    <el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px" size="large">
+      <el-form-item label="添加商品图片">
+        <!-- 下面的event的作用,传入当前事件对象 -->
+        <el-upload 
+          action="#" 
+          list-type="picture-card" 
+          :auto-upload="false" 
+          multiple="true"
+          :on-remove="handleRemove"
+          @change="(event: any) => handleChange(event, 0)" 
+          limit="1" >
+          <el-icon>
+            <Plus />
+          </el-icon>
+        </el-upload>
+      </el-form-item>
+      <!--  添加图文描述-->
+      <el-form-item label="添加图文描述">
+        <el-upload 
+          action="#" 
+          list-type="picture-card" 
+          :auto-upload="false" 
+          multiple="true"
+          :on-change="(event: any) => handleChange(event, 1)" 
+          limit="1"
+          :on-remove="handleRemove"
           >
-            <el-icon><zoom-in /></el-icon>
-          </span>
-          <span
-              v-if="!disabled"
-              class="el-upload-list__item-delete"
-              @click="handleRemove(file)"
-          >
-            <el-icon><Delete /></el-icon>
-          </span>
-        </span>
-      </div>
-    </template>
-  </el-upload> -->
-<!--  添加图文描述-->
-  <!-- <div style="margin-bottom: 10px;">
-    <div style="font-size: 20px;margin-bottom: 10px">添加图文描述</div>
-    <el-upload action="#" v-model:file-list="uploadedDescription" list-type="picture-card" :auto-upload="false" multiple="true">
-      <el-icon><Plus /></el-icon>
-
-      <template #file="{ file }">
-        <div>
-          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
-          <span class="el-upload-list__item-actions">
-          <span
-              class="el-upload-list__item-preview"
-              @click="handlePictureCardPreview(file)"
-          >
-            <el-icon><zoom-in /></el-icon>
-          </span>
-          <span
-              v-if="!disabled"
-              class="el-upload-list__item-delete"
-              @click="descriptionRemove(file)"
-          >
-            <el-icon><Delete /></el-icon>
-          </span>
-        </span>
-        </div>
-      </template>
-    </el-upload> -->
-
-    <!-- <el-dialog v-model="dialogVisible">
-      <img w-full :src="dialogImageUrl" alt="Preview Image" />
-    </el-dialog> -->
-  <!-- </div> -->
-
-  <!-- <el-dialog v-model="dialogVisible">
-    <img w-full :src="dialogImageUrl" alt="Preview Image" />
-  </el-dialog> -->
-<!-- </div> -->
-<!--  表单-->
-  <!-- <div style="position: absolute;right: 20px;top: 100px;max-width: 50%" > -->
-    <div >
-    <el-form :model="form" label-width="auto" style="width: 750px" size="large">
-      <el-form-item label="添加商品图片" #default="scope">
-  <!-- <div style="font-size: 20px;margin-bottom: 10px">添加商品图片</div> -->
-  <el-upload 
-      action="#" 
-      v-model:file-list="uploadedFiles" 
-      list-type="picture-card" 
-      :auto-upload="false" 
-      multiple="true"
-      :on-change="handleChange"
-      >
-    <el-icon><Plus /></el-icon>
-    <template #file="{ file }">
-      <div>
-        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
-        <span class="el-upload-list__item-actions">
-          <span
-              v-if="!disabled"
-              class="el-upload-list__item-delete"
-              @click="handleRemove(file)"
-          >
-            <el-icon><Delete /></el-icon>
-          </span>
-        </span>
-      </div>
-    </template>
-  </el-upload>
-</el-form-item>
-<!--  添加图文描述-->
-<el-form-item label="添加图文描述">
-    <el-upload 
-        action="#" 
-        v-model:file-list="uploadedDescription" 
-        list-type="picture-card" 
-        :auto-upload="false" 
-        multiple="true"
-        >
-      <el-icon><Plus /></el-icon>
-      <template #file="{ file }">
-        <div>
-          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
-          <span class="el-upload-list__item-actions">
-          <span
-              v-if="!disabled"
-              class="el-upload-list__item-delete"
-              @click="descriptionRemove(file)"
-          >
-            <el-icon><Delete /></el-icon>
-          </span>
-        </span>
-        </div>
-      </template>
-    </el-upload>
-</el-form-item>
-      <el-form-item label="产品名称">
+          <el-icon>
+            <Plus />
+          </el-icon>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="产品名称" prop="name">
         <el-input v-model="form.name" />
       </el-form-item>
 
-      <el-form-item label="产品价格">
+      <el-form-item label="产品价格" prop="price">
         <el-input v-model="form.price" />
       </el-form-item>
-      <el-form-item label="产品">
-        <el-input v-model="form.quantity" />
+      <el-form-item label="产品简介" prop="intro">
+        <el-input v-model="form.intro" />
       </el-form-item>
-      <el-form-item label="是否为限定类产品" >
-        <el-select v-model="form.region" placeholder="否">
-          <el-option label="是" value="ture" />
-          <el-option label="否" value="false" />
+      <el-form-item label="当前库存" prop="inventory">
+        <el-input v-model="form.inventory" />
+      </el-form-item>
+      <el-form-item label="是否为限定类产品" prop="festivalOrder">
+        <el-select v-model="form.festivalOrder" placeholder="请选择" @change="(event: any) => loadForm(event, 0)">
+          <el-option label="是" value="1" />
+          <el-option label="否" value="0" />
         </el-select>
       </el-form-item>
-      <el-form-item v-if="form.region=='ture' " label="节日名称">
+      <!-- <el-form-item v-if="form.region=='ture' " label="节日名称">
         <el-input v-model="form.festivalName" />
+      </el-form-item> -->
+      <el-form-item label="产品类别" prop="type">
+        <el-select v-model="typeList.value" placeholder="请选择" @change="(event: any) => loadForm(event, 1)">
+          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value1" />
+        </el-select>
       </el-form-item>
-      <el-form-item label="产品类型" >
-        <el-radio-group v-model="form.resource"  >
-          <el-radio value="1">材料包</el-radio>
-          <el-radio value="2">手持物</el-radio>
-          <el-radio value="3">头饰</el-radio>
-          <el-radio value="4">定制</el-radio>
-        </el-radio-group>
+      <el-form-item label="商品标签" prop="label">
+        <el-input v-model="form.label" type="textarea" placeholder="" />
       </el-form-item>
-      <el-form-item label="商品标签">
-        <el-input v-model="form.label" type="textarea" placeholder=""/>
-      </el-form-item>
-      <el-form-item label="详情描述">
-        <el-input v-model="form.desc" type="textarea" placeholder="产品尺寸，服务等"/>
+      <el-form-item label="商品详细描述" prop="introDetail">
+        <el-input v-model="form.introDetail" type="textarea" placeholder="产品尺寸，服务等" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">上架</el-button>
       </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="resetForm">重置</el-button>
+      </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref , onMounted } from 'vue';
-import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
-import {ElMessage, type UploadFile} from 'element-plus';
+import { ref, onMounted } from 'vue';
+import {  Plus } from '@element-plus/icons-vue';
+import { ElMessage, type UploadFile , type UploadProps } from 'element-plus';
 import myAxios from "@/api/myAxios";
-
-const dialogImageUrl = ref('');
-const dialogVisible = ref(false);
-const disabled = ref(false);
+const fileSimple = ref() //单个文件
 const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
 const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
+const resetFormData = ref()
 const form = ref({
-  name:'',
-  price:'',
-  quantity:'',//产品数量
-  region:'',//是否为限定
-  festivalName:'',//节日名称
-  resource:'',//类型
-  label:'',//商品标签
-  desc:'',//详情描述
+  name: '',
+  price: '',  //商品价格
+  intro: '',//产品简介
+  festivalOrder: '',//是否为限定
+  type: '',//类别
+  label: '',//商品标签
+  introDetail: '',//详情描述
+  goodImg: '',  //商品图片url
+  detailImg: '',  //图文详情url
+  inventory: '' //库存
 })
-
-const formUrl = ref({
-  productimgurl: '',  //商品图片url
-  detailimgurl: ''  //图文详情url
+const typeList: any = ref([
+  {
+    value1: '',
+    label: ''
+  }
+])
+onMounted(() => {
+  getTypeList() //加载类别列表，渲染在产品列表的select选项里面
 })
-const handleRemove = (file: UploadFile) => {
-  uploadedFiles.value = uploadedFiles.value.filter((f) => f.uid !== file.uid);
-};
-const descriptionRemove = (file: UploadFile) => {
-  uploadedDescription.value = uploadedDescription.value.filter((f) => f.uid !== file.uid);
+const getTypeList = async () => {  //获取类别列表作为可选项
+  const res = await myAxios.post('/category/list', {})  //获取商品列表
+  for (let key in res.data.data) {    //循环赋值
+    typeList.value[key] = {
+      value1: res.data.data[key].typeName,
+      label: res.data.data[key].typeName
+    }
+  }
 }
-
-onMounted(()=>{
-})
-const onSubmit = () => {
-  console.log('submit!')
+const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
+  console.log(uploadFile, uploadFiles)
 }
-
-const handleChange =(file : Event)=>{
-  console.log(file);
-  
-  // const target = file.target as HTMLInputElement;
-  // const file = target.files?.[0];
-  // if (file) {
-  //   const reader = new FileReader();
-  //   reader.onload = (e) => {
-  //     if (e.target?.result) {
-  //       typeForm.value.typeUrl = e.target.result as string; // 将图片URL赋值给表单
-  //     }
-  //   };
-  //   reader.readAsDataURL(file); // 读取文件为Data URL
-  // }
+//提交表单
+const onSubmit = async () => {
+  const values = Object.values(form.value);
+  // 使用some()方法来检查是否有任何值为空
+  if (values.some(value => value === null || value === undefined || value === '')) {
+    ElMessage({
+      type:'warning',
+      message:'请检查表单数据是否完整填写'
+    })
+    return;  //空返回结束函数
+  }
+  const res = await myAxios.post('/goods/add', { ...form.value })
+  if (res.data.code === 1) {
+    ElMessage({
+      type: 'success',
+      message: "提交成功"
+    })
+  } else {
+    ElMessage.error("服务错误")
+  }
 }
-const addProduct = async () => {
-//   const res = await myAxios.post('goods/add',{
-//     name : form.name,
-//     price : form.price,
-//     inventory : form.quantity,
-//     type: form.resource,
-//     label : form.label,
-//     intro : form.desc,
-//     festivalOrder : form.festivalName
-//   })
-//   if(res.data.code == 1){
-//     ElMessage({
-//       message: '上架成功',
-//       type: 'success'
-//     })
-//   }else{
-//     ElMessage({
-//       message: '上架失败',
-//       type: 'error'
-//     })
-//     }
-//   }
-// const upload  = async () => {
-//   const res = await myAxios.post('file/upload/server',{
-//     multipartFile : uploadedFiles.value,
-//     biz : uploadedDescription.value
-//   })
+//图片上传请求  此请求只要选择了图片，就会默认上传
+const handleChange = async (file: any, flag: number) => {
+  fileSimple.value = file
+  let formData = new FormData()  //这一步很重要 创建一个FormData对象
+  formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
+  const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
+    url: '/file/upload/server/not_login',
+    method: 'post',
+    headers: {
+      'content-Type': 'multipart/form-data'
+    },
+    data: {
+      biz: "test",
+      // 取出formData对象中的file
+      file: formData.get("file")
+    }
+  })
+  if (res.data.code === 1) {
+    //三元运算   当flag为0时，赋值给商品图片  flag为1时，赋值给详情图片
+    flag ? form.value.detailImg = res.data.data : form.value.goodImg = res.data.data
+  }
+}
+//将 商品类别 赋值到表格里
+const loadForm = (value: any, flag: number) => {
+  flag ? form.value.type = value : form.value.festivalOrder = value  //三元运算符 flag=1 是关于"商品类别"选项的值  flag=0 是关于“是否为节日限定”选项的值
+}
+//清除表单
+const resetForm = () =>{
+  resetFormData.value.resetFields()
 }
-// onMounted(() => {
-//   getProductInformation()
-// })
-// const getProductInformation = async () => {
-//   const res: any = await myAxios.get('')
-//   console.log(res)
-//   if (res.code === 1 && res.data) {
-//
-//
-//   } else {
-//     message.error(`获取数据失败：${res.message}`);
-//     backPage()
-//   }
-// }
-
 </script>
\ No newline at end of file
diff --git a/src/views/Commodity/MerchandiseCenter.vue b/src/views/Commodity/MerchandiseCenter.vue
index 6baf5f4..5462ee3 100644
--- a/src/views/Commodity/MerchandiseCenter.vue
+++ b/src/views/Commodity/MerchandiseCenter.vue
@@ -1,7 +1,9 @@
 <template>
-  <div>
+  <!-- 修改前请注释以前的 -->
+   <!-- 搜索 -->
     <div>
-      <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入商品名称" v-model="username"></el-input>
+      <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入商品名称"
+        v-model="username"></el-input>
       <el-form-item label="商品类型" style="width: 200px; margin-right: 10px;display: inline-block">
         <el-select v-model="types" placeholder="请选择">
           <el-option label="材料包" value="材料包" />
@@ -21,33 +23,21 @@
       <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
     </div>
     <div style="margin: 15px 0">
-      <el-popconfirm
-          class="ml-5"
-          confirm-button-text='确定'
-          cancel-button-text='取消'
-          icon="InfoFilled"
-          icon-color="red"
-          title="您确定批量删除这些数据吗？"
-          @confirm="delBatch"
-          width=180
-      >
+      <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
+        title="您确定批量删除这些数据吗？" @confirm="delBatch" width=180>
         <template #reference>
-          <el-button style="height: 25px" class="ml-5" type="danger">批量删除 <el-icon style="margin-left: 5px;"><Remove /></el-icon></el-button>
+          <el-button style="height: 25px" class="ml-5" type="danger">批量删除 <el-icon style="margin-left: 5px;">
+              <Remove />
+            </el-icon></el-button>
         </template>
       </el-popconfirm>
     </div>
     <!-- 数据展示 -->
-    <el-table :data="tableData" border stripe header-cell-class-name="headerBg" :cell-style="{textAlign: 'center'}"
-              @selection-change="handleSelectionChange" :header-cell-style="{'text-align': 'center'}"
-    >
+    <el-table :data="tableData" border stripe header-cell-class-name="headerBg"
+      :cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
+      :header-cell-style="{ 'text-align': 'center' }">
       <el-table-column type="selection" width="55"></el-table-column>
-      <el-table-column label="商品编号" width="80">
-        <template #default="scope">
-          <div>
-            <span style="align-items: center">{{ scope.row.id }}</span>
-          </div>
-        </template>
-      </el-table-column>
+      <el-table-column prop="id" label="商品编号" width="80"></el-table-column>
       <el-table-column prop="goodImg" label="商品图片">
         <template #default="scope">
           <div>
@@ -55,152 +45,72 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="商品名称">
-        <template #default="scope">
-          <div>
-            <span style="margin-left: 10px">{{ scope.row.name }}</span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="商品价格" width="180">
-        <template #default="scope">
-          <div>
-            <span style="margin-left: 10px">{{ scope.row.price }}</span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="商品类型">
-        <template #default="scope">
-          <div>
-            <span style="margin-left: 10px">{{ scope.row.type }}</span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="商品数量">
-        <template #default="scope">
-          <div>
-            <span style="margin-left: 10px">{{ scope.row.inventory }}</span>
-          </div>
-        </template>
-      </el-table-column>
+      <el-table-column prop="name" label="商品名称"></el-table-column>
+      <el-table-column prop="price" label="商品价格" width="180"></el-table-column>
+      <el-table-column prop="type" label="商品类型"></el-table-column>
+      <el-table-column prop="inventory" label="商品数量"></el-table-column>
+      <el-table-column prop="createTime" label="创建时间"></el-table-column>
+      <el-table-column prop="updateTime" label="更新时间"></el-table-column>
       <el-table-column label="商品状态">
         <template #default="scope">
           <div>
-            <span style="margin-left: 10px" v-if="scope.row.isShelves==1">上架</span>
-            <span style="margin-left: 10px" v-if="scope.row.isShelves==0">下架</span>
+            <span style="margin-left: 10px" v-if="scope.row.isShelves == 1">上架</span>
+            <span style="margin-left: 10px" v-if="scope.row.isShelves == 0">下架</span>
           </div>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="250px">
         <template #default="scope">
-          <el-button size="small" @click="handleView(scope.$index, scope.row)">
+          <el-button size="small" @click="ReviseOrView(scope.$index, scope.row , 0)">
             详情
           </el-button>
-          <el-button size="small" @click="handleRevise(scope.$index, scope.row)">
+          <el-button size="small" @click="ReviseOrView(scope.$index, scope.row, 1)">
             编辑
           </el-button>
-          <el-button size="small"  @click="handleOff(scope.$index, scope.row)">
-            <div v-if="scope.row.isShelves==1">下架 </div>
-            <div v-if="scope.row.isShelves==0">上架 </div>
+          <el-button size="small" @click="handleOff(scope.$index, scope.row)">
+            <div v-if="scope.row.isShelves == 1">下架 </div>
+            <div v-if="scope.row.isShelves == 0">上架 </div>
           </el-button>
-          <el-button
-              size="small"
-              type="danger"
-              @click="handleDelete(scope.$index, scope.row)"
-          >
-            删除
-          </el-button>
-          <el-popconfirm
-              confirm-button-text='确定'
-              cancel-button-text='取消'
-              icon="el-icon-info"
-              icon-color="red"
-              title="您确定删除吗？"
-          >
+          <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
+          title="是否确认删除" @confirm="deleteProduct(scope.row.id)" width=180>
+          <template #reference>
+            <el-button  class="ml-5" type="danger">删除</el-button>
+          </template>
+        </el-popconfirm>
+          <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
+            title="您确定删除吗？">
           </el-popconfirm>
         </template>
       </el-table-column>
     </el-table>
+    <!-- 分页器 -->
     <div style="padding: 10px 0">
-      <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="searchParams.current"
-          :page-size="searchParams.pageSize"
-          :page-sizes="[5, 10, 15, 20]"
-          :small="null"
-          :disabled="null"
-          :background="null"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="total"
-      />
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
+        :small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
+        :total="total" />
     </div>
-  </div>
-  <el-dialog v-model="detailDialogVisible" title="商品详情">
-    <el-form label-width="100px">
+  <!-- 编辑/详情表单 -->
+  <el-dialog v-model="DialogVisible" :title="title">
+    <el-form label-width="100px" :disabled="disabled">
       <el-form-item label="商品编号">
-        <el-input v-model="selectedProduct.id" disabled></el-input>
+        <el-input v-model="editForm.id" disabled></el-input>
       </el-form-item>
       <el-form-item label="商品图片">
-        <div v-if="selectedProduct.goodImg">
-          <img :src="selectedProduct.goodImg" alt="类别图标" class="thumbnail" style="width: 100px; height: 100px;"/>
+        <div v-if="editForm.goodImg">
+          <img :src="editForm.goodImg" alt="商品图标" class="thumbnail" style="width: 100px; height: 100px;" />
         </div>
-      </el-form-item>
-      <el-form-item label="商品名称">
-        <el-input v-model="selectedProduct.name" disabled></el-input>
-      </el-form-item>
-      <el-form-item label="商品价格">
-        <el-input v-model="selectedProduct.price" disabled></el-input>
-      </el-form-item>
-      <el-form-item label="商品类型">
-        <el-select v-model="selectedProduct.type" placeholder="请选择" disabled>
-          <el-option label="材料包" value="材料包" />
-          <el-option label="手持物" value="手持物" />
-          <el-option label="头饰" value="头饰" />
-          <el-option label="定制" value="定制" />
-          <el-option label="积分兑换" value="积分兑换" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="商品数量">
-        <el-input v-model="selectedProduct.inventory" disabled></el-input>
-      </el-form-item>
-      <el-form-item label="商品状态">
-        <el-select v-model="selectedProduct.isShelves" placeholder="请选择" disabled>
-          <el-option label="上架" value="上架" />
-          <el-option label="下架" value="下架" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="是否为限定产品">
-        <el-select v-model="selectedProduct.region" placeholder="请选择" disabled>
-          <el-option label="是" value="是" />
-          <el-option label="否" value="否" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="商品标签">
-        <el-input v-model="selectedProduct.label" disabled></el-input>
-      </el-form-item>
-      <el-form-item label="商品描述">
-        <el-input type="textarea" v-model="selectedProduct.introDetailintroDetail" disabled></el-input>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="detailDialogVisible = false">取消</el-button>
-      </span>
-    </template>
-  </el-dialog>
-
-  <el-dialog v-model="editDialogVisible" title="商品编辑">
-    <el-form label-width="100px">
-      <el-form-item label="商品编号">
-        <el-input v-model="editForm.id"></el-input>
-      </el-form-item>
-      <el-form-item label="商品图片">
-        <el-upload action="#" list-type="picture" :auto-upload="false">
-          <el-icon><Plus /></el-icon>
-          <template #file="{ file }">
-            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
-          </template>
+        <el-upload 
+          action="#" 
+          list-type="picture-card" 
+          :auto-upload="false" 
+          multiple="true"
+          :on-remove="handleRemove"
+          @change="(event: any) => handleChange(event, 0)" 
+          limit="1" >
+          <el-icon>
+            <Plus/>
+          </el-icon>
         </el-upload>
       </el-form-item>
       <el-form-item label="商品名称">
@@ -209,125 +119,92 @@
       <el-form-item label="商品价格">
         <el-input v-model="editForm.price"></el-input>
       </el-form-item>
-      <el-form-item label="商品类型">
-        <el-select v-model="editForm.type" placeholder="请选择">
-          <el-option label="材料包" value="材料包" />
-          <el-option label="手持物" value="手持物" />
-          <el-option label="头饰" value="头饰" />
-          <el-option label="定制" value="定制" />
-          <el-option label="积分兑换" value="定制" />
+      <el-form-item label="产品类别" prop="type">
+        <el-select v-model="editForm.type" @change="(event: any) => loadForm(event, 1)">
+          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value1" />
         </el-select>
       </el-form-item>
       <el-form-item label="商品数量">
         <el-input v-model="editForm.inventory"></el-input>
       </el-form-item>
       <el-form-item label="商品状态">
-        <el-select v-model="editForm.isShelves"  disabled>
+        <el-select v-model="editForm.isShelves">
           <el-option label="上架" value="上架" />
           <el-option label="下架" value="下架" />
         </el-select>
       </el-form-item>
-      <el-form-item label="是否为限定产品">
-        <el-select v-model="editForm.region" placeholder="请选择">
-          <el-option label="是" value="是" />
-          <el-option label="否" value="否" />
+      <el-form-item label="是否为限定类产品" prop="festivalOrder">
+        <el-select v-model="editForm.festivalOrder" @change="(event: any) => loadForm(event, 0)">
+          <el-option label="是" value="1" />
+          <el-option label="否" value="0" />
         </el-select>
       </el-form-item>
       <el-form-item label="商品标签">
         <el-input v-model="editForm.label"></el-input>
       </el-form-item>
+      <el-form-item label="商品图文">
+        <div v-if="editForm.detailImg">
+          <img :src="editForm.detailImg" alt="商品图标" class="thumbnail" style="width: 100px; height: 100px;" />
+        </div>
+        <el-upload 
+          action="#" 
+          list-type="picture-card" 
+          :auto-upload="false" 
+          multiple="true"
+          :on-remove="handleRemove"
+          @change="(event: any) => handleChange(event, 0)" 
+          limit="1" >
+          <el-icon>
+            <Plus/>
+          </el-icon>
+        </el-upload>
+      </el-form-item>
       <el-form-item label="商品描述">
         <el-input type="textarea" v-model="editForm.introDetail"></el-input>
       </el-form-item>
     </el-form>
-    <template #footer>
+    <template #footer >
       <span class="dialog-footer">
-        <el-button @click="editDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="saveEdit">保存</el-button>
+        <el-button @click="DialogVisible = false" :disabled="disabled">取消</el-button>
+        <el-button type="primary" @click="saveEdit" :disabled="disabled">确认</el-button>
       </span>
     </template>
   </el-dialog>
 </template>
 
-<script setup lang="ts"> 
-import { ElMessage } from 'element-plus';
-import { ref, onMounted } from 'vue';
+<script setup lang="ts">
+import { ElMessage , type UploadProps } from 'element-plus';
+import { ref, onMounted, toRaw } from 'vue';
 import myAxios from "@/api/myAxios";
-//总页数
-const total = ref(0);
+const total = ref(0); //总页数
 const id = ref([]);
-//封装分页
-const searchParams: any = ref({
-  //当前页码
-  current: 1,
-  //每页显示条数
-  pageSize: 5
+const searchParams: any = ref({ //封装分页
+  current: 1, //当前页码
+  pageSize: 5 //每页显示条数
 })
+const fileSimple = ref()
+const disabled = ref(true)
+const title = ref('')
 const username = ref('');
-const detailDialogVisible = ref(false);
-const editDialogVisible = ref(false);
+const DialogVisible = ref(false);
 const types = ref('');
 const Region = ref('');
-let selectedProduct = ref('');
-const loading = ref(false)
-const tableData = ref([]);
-//商品状态
-const status = ref(0)
-let editForm = ref({
-  id: '',
-  goodImg: '',
-  name: '',
-  price: '',
-  type: '',
-  inventory: '',
-  isShelves: '',
-  attribute:'',
-  region: '',
-  label: '',
-  introDetail: '',
-});
-//页面加载时获取商品列表
-onMounted(() => {
-  getGoodList()
+const tableData : any= ref([]);
+const editForm : any = ref({});
+const typeList: any = ref([
+  {
+    value1: '',
+    label: ''
+  }
+])
+onMounted(() => { //页面加载时获取商品列表和分类页表
+  getProductList()
+  getTypeList()
 })
-const handleSelectionChange = (row: any) => {
-  id.value = JSON.parse(JSON.stringify(row));
-};
-const handleView = (index: number, row: any) => {
-  selectedProduct = row;
-  detailDialogVisible.value = true;
-};
-const handleRevise = (index: number, row: any) => {
-  selectedProduct = row;
-  editDialogVisible.value = true;
-  editForm.value = row;
-};
-const handleOff = (index: number, row: any) => {
-  console.log()
-  if (row.isShelves === 0) {
-    row.isShelves = 1;//0下架，1上架
-    console.log(row.isShelves)
-  } else if (row.isShelves ===1) {
-    row.isShelves = 0;
-  }
-}
-
-const handleDelete = (index: number, row: any) => {
-  const confirmDelete = window.confirm('您确定要删除该商品吗？');
-  if (confirmDelete) {
-    tableData.value = tableData.value.filter((item, i) => i!== index);
-    ElMessage({
-      message: '删除成功',
-      type: 'success',
-    });
-  }
-};
-
-const getGoodList = async () => {
-  loading.value = true;
+const getProductList = async () => {
   try {
-    const res = await myAxios.post('/goods/list/page', {...searchParams.value });
-    console.log(res.data)
+    const res = await myAxios.post('/goods/list/page', { ...searchParams.value });
+    // console.log(res.data)
     if (res.data.code === 1) {
       tableData.value = res.data.data.records;
       total.value = parseInt(res.data.data.total)//总数据量，用于分页
@@ -342,67 +219,116 @@ const getGoodList = async () => {
     });
   }
 }
-//处理行数大小变化
-const handleSizeChange =(newSize : any)=>{
-  searchParams.value.pageSize = newSize //新的页面数
-  getGoodList()
+const getTypeList = async () => {
+  const res = await myAxios.post('/category/list', {})  //获取商品列表
+  for (let key in res.data.data) {    //循环赋值
+    typeList.value[key] = {
+      value1: res.data.data[key].typeName,
+      label: res.data.data[key].typeName
+    }
+  }
 }
-//处理当前页面变化
-const handleCurrentChange = (Current : any) => {
-  searchParams.value.current = Current 
-  getGoodList()
+const saveEdit = async () => { //编辑商品
+  const res = await myAxios.post('/goods/update',{...editForm.value})
+  if( res.data.code === 1 ) {
+    ElMessage({
+      type: 'success',
+      message: '更新成功'
+    })
+    DialogVisible.value = false
+  } else {
+    ElMessage.error('更新失败，请检查字段')
+  }
+}
+//删除商品
+const deleteProduct = async (index: number) => {
+  console.log(typeof index)
+  const res = await myAxios.post('/goods/delete', { id: index })
+  console.log(res)
+  if (res.data.code === 1) {
+    ElMessage({
+      type: 'success',
+      message: '删除成功',
+    })
+    getProductList()
+  }
+  getTypeList()
+}
+const handleSelectionChange = (row: any) => {
+  id.value = JSON.parse(JSON.stringify(row));
+};
+//详情或编辑 
+const ReviseOrView = (index: number, row: any , flag : number) => {
+  //flag值不同显示不同内容  disabled开启和关闭
+  flag ?  (title.value = "编辑商品" , disabled.value = false) : (title.value = "商品详情" , disabled.value = true)
+  DialogVisible.value = true;
+  editForm.value = row;
+};
+//下架商品(待优化，有问题，逻辑有问题)
+const handleOff = async (index: number, row: any) => { 
+  row.isShelves ? row.isShelves = 0 : row.isShelves = 1  //三元运算符  改变那一行的上架值
+  editForm.value = row;
+  const res = await myAxios.post('/goods/update',{...editForm.value}) 
+  if(res.data.code === 1) {
+    ElMessage({
+      type:'success',
+      message:'更新成功'
+    })
+  } 
+}
+//处理行数大小变化
+const handleSizeChange = (newSize: any) => {
+  searchParams.value.pageSize = newSize //新的页面数
+  getProductList()
+}
+//处理当前表格变化
+const handleCurrentChange = (Current: any) => {
+  searchParams.value.current = Current
+  getProductList()
 }
 const reset = () => {
   username.value = '';
   types.value = '';
   Region.value = '';
 };
-// const saveEdit = () => {
-//   const indexToUpdate = tableData.findIndex(item => item.id === editForm.value.id);
-//   if (indexToUpdate!== -1) {
-//     tableData[indexToUpdate] = {
-//       ...tableData[indexToUpdate],
-//       ...editForm.value,
-//     };
-//     ElMessage({
-//       message: '编辑成功',
-//       type: 'success',
-//     });
-//     editDialogVisible.value = false;
-//   };
-// };
+//上传图片移除 --逻辑上移除
+const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
+  console.log(uploadFile, uploadFiles)
+}
+//将 商品类别 赋值到表格里
+const loadForm = (value: any, flag: number) => {
+  flag ? editForm.value.type = value : editForm.value.festivalOrder = value  //三元运算符 flag=1 是关于"商品类别"选项的值  flag=0 是关于“是否为节日限定”选项的值
+}
+//图片上传请求  此请求只要选择了图片，就会默认上传
+const handleChange = async (file: any, flag: number) => {
+  fileSimple.value = file
+  let formData = new FormData()  //这一步很重要 创建一个FormData对象
+  formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
+  const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
+    url: '/file/upload/server/not_login',
+    method: 'post',
+    headers: {
+      'content-Type': 'multipart/form-data'
+    },
+    data: {
+      biz: "test",
+      file: formData.get("file") // 取出formData对象中的file
+    }
+  })
+  if (res.data.code === 1) {
+    //三元运算   当flag为0时，赋值给商品图片  flag为1时，赋值给详情图片
+    flag ? editForm.value.detailImg = res.data.data : editForm.value.goodImg = res.data.data
+  }
+}
 
-// const getListPage = async () => {
-//   await instance.post('/goods/list/page').then(res => {
-//     console.log(res.data.data);
-//     res.data.data.forEach(item => {
-//       console.log(item);
-//     });
-//     tableData.value = res.data.data;
-//   });
-// };
-const delBatchSuccess = () => {
-  ElMessage({
-    message: '批量删除成功',
-    type: 'success',
-  });
-};
-// const delBatch = async () => {
-//   await instance.post('').then(res => {
-//     if (res.data.code === '200') {
-//       load();
-//     } else {
-//       ElMessage({
-//         message: '批量删除失败',
-//         type: 'error',
-//       });
-//     }
-//   });
-// };
+const delBatch =()=>{
+  //批量删除
+}
+const load =()=>{}
 </script>
 
 <style scoped>
 .headerBg {
-  background-color: #eee!important;
+  background-color: #eee !important;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/Commodity/TypeManagement.vue b/src/views/Commodity/TypeManagement.vue
index 5e77404..8c5c63f 100644
--- a/src/views/Commodity/TypeManagement.vue
+++ b/src/views/Commodity/TypeManagement.vue
@@ -6,11 +6,20 @@
 
   <el-dialog v-model="dialogVisible" title="商品类别" width="500">
     <el-form :model="typeForm" label-width="auto" style="max-width: 600px">
-      <el-form-item label="类别图标">
-        <div v-if="typeForm.typeUrl">
-          <img :src="typeForm.typeUrl" alt="类别图标" class="thumbnail" style="width: 100px; height: 100px;" />
-        </div>
-        <input type="file" @change="handleFileUpload" accept="image/*" />
+      <el-form-item label="添加类别图片">
+        <!-- 下面的event的作用,传入当前事件对象 -->
+        <el-upload 
+          action="#" 
+          list-type="picture-card" 
+          :auto-upload="false" 
+          multiple="true"
+          :on-remove="handleRemove"
+          @change="(event: any) => handleChange(event)" 
+          limit="1" >
+          <el-icon>
+            <Plus />
+          </el-icon>
+        </el-upload>
       </el-form-item>
       <el-form-item label="类别名">
         <el-input v-model="typeForm.typeName" />
@@ -19,7 +28,6 @@
         <el-input v-model="typeForm.typeIntro" />
       </el-form-item>
     </el-form>
-
     <template #footer #default="{ row, $index }">
       <div class="dialog-footer">
         <el-button @click="cancel">取消</el-button>
@@ -33,6 +41,7 @@
   <el-table :data="tableData" border style="width: 100%;" :header-cell-style="{ 'text-align': 'center' }"
     @selection-change="handleSelectionChange" :cell-style="{ 'text-align': 'center', 'font-size': '16px' }">
     <el-table-column type="selection" width="55"></el-table-column>
+    <el-table-column prop="id" label="类别编号" width="150"></el-table-column>
     <el-table-column prop="typeUrl" label="类别图片" width="300">
       <!-- 插槽，拿到父组件的值typeUrl -->
       <!-- scope 提供了关于当前行的信息 -->
@@ -56,11 +65,11 @@
 </template>
 
 <script setup lang="ts">
-import { ElMessage } from 'element-plus';
+import { ElMessage ,type UploadProps} from 'element-plus';
 import { onMounted, ref } from 'vue'
 import myAxios from '@/api/myAxios';
-
-const selectedItems = ref([])
+const fileSimple = ref()  //单个文件
+const selectedItems = ref([]) 
 const dialogVisible = ref(false)
 //表单数据
 const typeForm = ref({
@@ -84,9 +93,34 @@ const getTypeList = async () => {
   // console.log(res.data.data)
   if (res.data.code === 1) {
     tableData.value = res.data.data
+  } else {
+    ElMessage.error('获取类别列表失败，请检查服务')
   }
 }
-
+//上传图片，一张图片，不需要flag值
+const handleChange = async (file: any) => {
+  fileSimple.value = file
+  let formData = new FormData()  //这一步很重要 创建一个FormData对象
+  formData.append("file", fileSimple.value.raw)  //fileSimple.value.raw 才是文件主体  将其以文件的格式插入formData
+  const res = await myAxios({   //编写请求，与以前的请求不同，这一次要指定好头部类型和文件类型
+    url: '/file/upload/server/not_login',
+    method: 'post',
+    headers: {
+      'content-Type': 'multipart/form-data'
+    },
+    data: {
+      biz: "test",
+      file: formData.get("file")  // 取出formData对象中的file
+    }
+  })
+  if ( res.data.code === 1) {
+    typeForm.value.typeUrl = res.data.data
+  }
+}
+//上传图片移除 --逻辑上移除
+const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
+  console.log(uploadFile, uploadFiles)
+}
 //新增类别
 const showForm = async () => {
   dialogVisible.value = true;
@@ -99,7 +133,7 @@ const cancel = () => {
 }
 //新增类别  很繁杂 不知道怎么改 只能不断判空
 const addOrUpdateType = async () => {
-  //判空
+  //判空(*后期引入对象判空)
   if (typeForm.value.typeName?.indexOf(' ') !== -1 ||
     typeForm.value.typeName == '' || typeForm.value.typeUrl == '') {
     ElMessage({
@@ -114,7 +148,7 @@ const addOrUpdateType = async () => {
     const res = await myAxios.post('/category/add', {
       //对齐后端请求体
       typeName: typeForm.value.typeName,
-      typeUrl: typeForm.value.typeUrl.substring(0, 10),
+      typeUrl: typeForm.value.typeUrl,
       typeIntro: typeForm.value.typeIntro
     })
     if (res.data.code === 1) {
@@ -155,25 +189,12 @@ const resetForm = () => {
 const handleSelectionChange = (row: any) => {
   selectedItems.value = JSON.parse(JSON.stringify(row))
 }
-//图片文件上传
-const handleFileUpload = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  const file = target.files?.[0];
-  if (file) {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      if (e.target?.result) {
-        typeForm.value.typeUrl = e.target.result as string; // 将图片URL赋值给表单
-      }
-    };
-    reader.readAsDataURL(file); // 读取文件为Data URL
-  }
-}
+//编辑
 const editShowForm = (index: number, row: any) => {
   dialogVisible.value = true
   typeForm.value = row
   flag.value = 1
-  console.log(row)
+  // console.log(row)
 }
 //删除类别  请求体里只传id即可
 const Delete_type = async (index: number) => {
diff --git a/src/views/Login.vue b/src/views/Login.vue
index e24049a..b4f4bf5 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -62,12 +62,6 @@
       await router.replace('/PersonalCenter')
     }
   }
-  // const login = () => {
-  //   // console.log(username)
-  //   // console.log(password)
-  //         if(username.value ==="a"&&   password.value ==="1"){
-  //            router.push("/UserManagement")
-  //         }}
   </script>
   
   <style scoped>
diff --git a/src/views/Orders/OrderList.vue b/src/views/Orders/OrderList.vue
new file mode 100644
index 0000000..b75cfc8
--- /dev/null
+++ b/src/views/Orders/OrderList.vue
@@ -0,0 +1,13 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/test.vue b/src/views/test.vue
index dca5930..e76e800 100644
--- a/src/views/test.vue
+++ b/src/views/test.vue
@@ -1,58 +1,51 @@
 <template>
-    <el-upload
- :on-preview="previewFile"
-  limit="1"
-  :on-change="changeFile"
-  :auto-upload="false" 
-  :data="uploadForm.data">
-   <template #trigger>
-      <el-button size="small" type="primary">选取附件</el-button>
-   </template>
-   <el-button style="margin-left: 10px;" size="small" type="success" 
-    @click="submitUpload">上传到服务器</el-button>
-</el-upload>
+  <div>
+    <div
+      v-for="(item, index) in items" 
+      :key="index" 
+      class="box" 
+      @click="changeColor(index)" 
+      :style="getBoxStyle(index)"
+    >
+      {{ item }} 
+    </div>
+  </div>
 </template>
- 
-<script setup lang="ts">
-import {ref, reactive} from "vue";
-import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
-import {ElMessage, type UploadFile} from 'element-plus';
-import myAxios from "@/api/myAxios";
-const file = ref()
- 
-const changeFile = (uploadFile: UploadFile) => {
-    file.value = uploadFile;
-    console.log(file.value.raw)
-}
-const uploadForm = reactive({
-    data: {
-        fileId: '',
-        name: '',
-        type: ''
-    }
-})
-const submitUpload = async () => {
-    const jsonStr = JSON.stringify(uploadForm.data);
-    const blob = new Blob([jsonStr], {
-        type: 'application/json'
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const items = ref(['Box 1', 'Box 2', 'Box 3']);
+    const currentColor = ref(null);
+
+    const changeColor = (index) => {
+      currentColor.value = index;
+    };
+
+    const getBoxStyle = (index) => ({
+      backgroundColor: currentColor.value === index ? 'lightblue' : 'gray'
     });
-    let formData = new FormData();
-    formData.append("obj", blob);
-    // 这里很重要 file.value.raw才是真实的file文件，file.value只是一个Proxy代理对象
-    formData.append("file", file.value.raw);
-    const res = await myAxios.post('/file/upload/server/not_login',{
-        biz: 'test',
-        file: formData.get("get")
-    })
-    console.log(res)
-    // axios({
-    //     method,
-    //     url,
-    //     data: formData,
-    //     headers
-    // }).then(res => {
-    //     console.log(res);
-    //     console.log(res.data);
-    // });
+
+    return {
+      items,
+      changeColor,
+      getBoxStyle,
+    };
+  },
+};
+</script>
+
+<style>
+.box {
+  width: 200px;
+  height: 100px;
+  color: black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 5px 0;
 }
-</script>
\ No newline at end of file
+</style>