From c601d106c43692ac4ca744b0f1572baaafeb4d26 Mon Sep 17 00:00:00 2001
From: yuanteng <1876787513@qq.com>
Date: Mon, 2 Dec 2024 13:04:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=9C=8D=E5=8A=A1=E7=B1=BB?=
 =?UTF-8?q?=E5=95=86=E5=93=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                           |   6 +-
 package.json                                |   2 +-
 src/layout/components/Aside.vue             |   1 -
 src/layout/components/appointTime.vue       | 159 ++++++++++++
 src/main.ts                                 |   3 +-
 src/router/routes.ts                        |   6 +-
 src/views/Home.vue                          |   4 +-
 src/views/ServiceType/AddServiceProduct.vue | 261 +++++++++++++++++++-
 src/views/ServiceType/ProductCenter.vue     |   4 +-
 src/views/test.vue                          | 116 ++++++---
 10 files changed, 509 insertions(+), 53 deletions(-)
 create mode 100644 src/layout/components/appointTime.vue

diff --git a/package-lock.json b/package-lock.json
index fe0a671..8acefd6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -799,9 +799,9 @@
       }
     },
     "@types/node": {
-      "version": "20.16.15",
-      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.16.15.tgz",
-      "integrity": "sha512-DV58qQz9dBMqVVn+qnKwGa51QzCD4YM/tQM16qLKxdf5tqz5W4QwtrMzjSTbabN1cFTSuyxVYBy+QWHjWW8X/g==",
+      "version": "20.17.6",
+      "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.17.6.tgz",
+      "integrity": "sha512-VEI7OdvK2wP7XHnsuXbAJnEpEkF6NjSN45QJlL4VGqZSXsnicpesdTWsg9RISeSdYd3yeRj/y3k5KGjUXYnFwQ==",
       "dev": true,
       "requires": {
         "undici-types": "~6.19.2"
diff --git a/package.json b/package.json
index fb06cd4..a4e9ec8 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
   },
   "devDependencies": {
     "@tsconfig/node20": "^20.1.4",
-    "@types/node": "^20.12.5",
+    "@types/node": "^20.17.6",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/tsconfig": "^0.5.1",
     "npm-run-all2": "^6.1.2",
diff --git a/src/layout/components/Aside.vue b/src/layout/components/Aside.vue
index 7fc7a77..48fab1f 100644
--- a/src/layout/components/Aside.vue
+++ b/src/layout/components/Aside.vue
@@ -35,7 +35,6 @@
               <el-icon><List /></el-icon>
               <span slot="title">图片上传</span>
             </el-menu-item>
-
           </el-sub-menu>
 
           <el-sub-menu index="2">
diff --git a/src/layout/components/appointTime.vue b/src/layout/components/appointTime.vue
new file mode 100644
index 0000000..a119601
--- /dev/null
+++ b/src/layout/components/appointTime.vue
@@ -0,0 +1,159 @@
+<template>
+    <div class="date-picker">
+        <div class="father">
+            <div v-for="(item, index) in dayList" :key="index">
+                <div class="inner" style="font-size: medium;">
+                    第{{ index + 1 }}天
+                </div>
+                <!-- 时间段部分 -->
+                <div class="time-picker">
+                    <div v-for="(item, row) in timeList[index]" :key="row" class="box">
+                        <span>第 {{ row + 1 }} 个时间段</span>
+                        <el-time-select v-model="timeList[index][row].startTime" 
+                                        style="width: 150px"
+                                        :max-time="timeList[index][row].endTime" 
+                                        placeholder="Start time" size="default"
+                                        start="08:30" step="00:15" end="18:30" />
+                        <el-time-select v-model="timeList[index][row].endTime" style="width: 150px"
+                            :min-time="timeList[index][row].startTime" placeholder="End time" size="default"
+                            start="08:30" step="00:15" end="18:30" />
+                        <div class="numRange">
+                        <span>人数范围</span>
+                        <el-select v-model="timeList[index][row].minNumValue" 
+                                   placeholder="最小人数" 
+                                   style="width: 100px"
+                                   @change="minNumFun">
+                            <el-option v-for="item in minOptions[index][row]" 
+                                       :key="item" 
+                                       :value="item" />
+                        </el-select>
+                        <el-select v-model="timeList[index][row].maxNunValue" 
+                                   placeholder="最大人数" 
+                                   style="width: 100px">
+                            <el-option v-for="item in maxOptions[index][row]" 
+                                       :key="item" 
+                                       :value="item" />
+                        </el-select>
+                        
+                        <el-button circle @click="addList(index, row)"><el-icon>
+                                <Plus />
+                            </el-icon></el-button>
+                        <el-button circle @click="subList(index, row)" v-if="row + 1 > 1"><el-icon>
+                                <Minus />
+                            </el-icon></el-button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { Plus } from '@element-plus/icons-vue';
+const dayList = ref([0, 1, 2, 3])  //今天和未来三天
+const timeList = ref([    //时间段数组，可以直接通过timeList[index][row]访问对应的时间段
+    [
+        {
+            startTime: '',
+            endTime: '',
+            minNumValue: '',
+            maxNunValue: ''
+        }
+    ],
+    [
+        {
+            startTime: '',
+            endTime: '',
+            minNumValue: '',
+            maxNunValue: ''
+        }
+    ],
+    [
+        {
+            startTime: '',
+            endTime: '',
+            minNumValue: '',
+            maxNunValue: ''
+        }
+    ],
+    [
+        {
+            startTime: '',
+            endTime: '',
+            minNumValue: '',
+            maxNunValue: ''
+        }
+    ]
+])
+//人数数组，初始化好四天六个时间段的人数
+const minOptions = ref(
+    Array.from({length:4},()=>(
+        Array.from({length:6},()=>(
+            Array.from({length:50},()=>( 0 ))
+        ))
+    ))
+)
+const maxOptions = ref(
+    Array.from({length:4},()=>(
+        Array.from({length:6},()=>(
+            Array.from({length:50},()=>( 0 ))
+        ))
+    ))
+)
+const flag = ref(0)  //第一个人数下标
+onMounted(()=>{
+    for(let i=0; i<4; i++) {  //开始时初始化人数的数组
+        for(let j=0; j<6; j++) {
+            for(let k=0;k<50;k++) {
+                minOptions.value[i][j][k] = k+1;
+                maxOptions.value[i][j][k] = k+1;
+            }
+        }
+    }
+})
+const addList = (index: any, row: any) => {
+    if (timeList.value[index].length < 6) {
+        timeList.value[index].push({
+            startTime: '',
+            endTime: '',
+            minNumValue: '',
+            maxNunValue: ''
+        })
+        flag.value += 1 
+    }
+}
+const subList = (index: number, row: number) => {
+    console.log(index, row);
+    timeList.value[index].splice(row, 1)
+}
+const minNumFun = (number : any)=> {
+    for(let i = 0;i<number;i++) {
+        if(maxOptions.value[i] < number) {
+            maxOptions.value.splice(i,1)
+            console.log(maxOptions.value);
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
+div {
+    font-size: 12px;
+    color: rgb(96, 98, 102);
+}
+.time-picker {
+    display: flex;
+    flex-wrap: wrap;
+}
+.box {
+    width: 380px;
+    height: 50pxpx;
+    border: 1px solid red;
+}
+.numRange {
+    margin-left: 26px;
+}
+</style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 7d60ee1..5fab151 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -18,5 +18,6 @@ app.use(ElementPlus, {size: 'small'})
 app.use(router)
 //使用pinia
 app.use(pinia)
-
+//屏蔽警告
+app.config.warnHandler=()=>null
 app.mount('#app')
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 693c738..f89e196 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -1,5 +1,3 @@
-
-
 export const routes = [
     {
         path: '/',
@@ -63,12 +61,12 @@ export const routes = [
             {
                 path: '/AddServiceProduct',
                 name: '添加服务类商品',
-                componet: ()=> import("../views/ServiceType/AddServiceProduct.vue")
+                component: ()=> import("../views/ServiceType/AddServiceProduct.vue")
             },
             {
                 path: '/ProductCenter',
                 name: '服务类商品管理中心',
-                componet: ()=> import("../views/ServiceType/ProductCenter.vue")
+                component: ()=> import("../views/ServiceType/ProductCenter.vue")
             }
         ]
     },
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 0ff095f..afef39c 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,11 +1,11 @@
 <template>
  <!-- 搜索 -->
-  <!-- <div>
+  <div>
     <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入商品名称"
               v-model="Couponsname"></el-input>
     <el-button class="ml-5" type="primary" @click="load" style="height: 25px;">搜索</el-button>
     <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
-  </div> -->
+  </div>
 <!--  批量删除-->
   <!-- <div style="margin: 15px 0">
     <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
diff --git a/src/views/ServiceType/AddServiceProduct.vue b/src/views/ServiceType/AddServiceProduct.vue
index 8e8347f..1f07305 100644
--- a/src/views/ServiceType/AddServiceProduct.vue
+++ b/src/views/ServiceType/AddServiceProduct.vue
@@ -1,13 +1,268 @@
 <template>
-    <div>
-
+  <div class="totalBox">
+    <div class="fromBox">
+      <!-- 表单 ref 和 prop绑定  用于重置表单 -->
+      <el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px;" size="large">
+        <div class="totalPicture">
+          <div class="boxPicture1">
+            <el-form-item label="添加课程展示图片">
+              <!-- 下面的event的作用,传入当前事件对象 -->
+              <el-upload ref="uploadProductImg" action="#" list-type="picture-card" :auto-upload="false" multiple="true"
+                :on-remove="handleRemove" @change="(event: any) => handleChange(event, 0)"
+                :on-exceed="Exceed_ProductImg" limit="1">
+                <el-icon>
+                  <Plus />
+                </el-icon>
+              </el-upload>
+            </el-form-item>
+          </div>
+          <!--  添加图文描述-->
+          <div class="boxPicture2">
+            <el-form-item label="添加课程展示图">
+              <el-upload ref="uploadProductDetail" action="#" list-type="picture-card" :auto-upload="false"
+                multiple="true" :on-change="(event: any) => handleChange(event, 1)" :on-exceed="Exceed_ProductDetail"
+                limit="1" :on-remove="handleRemove">
+                <el-icon>
+                  <Plus />
+                </el-icon>
+              </el-upload>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="NamePrice">
+          <div class="name">
+            <el-form-item label="体验课名称" prop="name">
+              <el-input v-model="form.name" />
+            </el-form-item>
+          </div>
+          <div class="price">
+            <el-form-item label="体验课价格" prop="price">
+              <el-input v-model="form.price" style="width: 90px;" />
+            </el-form-item>
+          </div>
+        </div>
+        <el-form-item label="课程简介" prop="intro">
+          <el-input v-model="form.intro" type="textarea" style="width: 600px;" />
+        </el-form-item>
+        <!-- 使用弹窗 -->
+        <el-form-item label="产品类别" prop="type">
+          <el-select v-model="selectValue" disabled style="width: 110px;" />
+        </el-form-item>
+        <el-form-item label="商品标签" prop="label">
+          <el-input v-model="form.label" type="textarea" placeholder="使用英文;分隔符分开" style="width: 600px;" />
+        </el-form-item>
+        <el-form-item label="商品详细描述" prop="introDetail">
+          <el-input v-model="form.introDetail" type="textarea" placeholder="产品尺寸，服务等" style="width: 600px;" />
+        </el-form-item>
+        <div class="totalButton">
+          <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>
+        </div>
+      </el-form>
     </div>
+    <div class="timeTable">
+      <appointTime></appointTime>
+    </div>
+  </div>
+  
 </template>
 
 <script setup lang="ts">
-
+import { ref, onMounted, inject } from 'vue';
+import { Plus } from '@element-plus/icons-vue';
+import { ElMessage, type UploadFile, type UploadProps, genFileId, type UploadRawFile } from 'element-plus';
+import myAxios from "@/api/myAxios";
+import appointTime from '@/layout/components/appointTime.vue';
+const fileSimple = ref() //单个文件
+const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
+const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
+const resetFormData = ref()
+const selectValue = '服务类'
+const dialogVisible = ref(false)
+const count = ref(1)
+const form = ref({
+  name: '',
+  price: '',  //商品价格
+  intro: '',//产品简介
+  type: '',//类别
+  label: '',//商品标签
+  introDetail: '',//详情描述
+  goodImg: '',  //商品图片url
+  detailImg: '',  //图文详情url
+  timePeriod: '',
+  people: 0,
+  date: []
+})
+//导入组件刷新
+const reload: any = inject("reload")
+const uploadProductImg: any = ref()  //图片上传的ref绑定
+const uploadProductDetail: any = ref()  //图片上传的ref绑定
+// const startTime = ref('')
+// const endTime = ref('')
+// const timeList = ref(
+//   {
+//     days: [0,1,2,3],  //表示第几天，0是当日
+//     slot: Array.from({ length:8 },()=>({
+//       startTime: '',
+//       endTime: ''
+//     }))
+//   }
+// )
+const timeList = ref([
+  {
+    slot: Array.from({ length: 8 }, () => ({
+      startTime: '',
+      endTime: ''
+    }))
+  }
+])
+//时间段数组对象
+const arr = ref([
+  {
+    timeSlot: '',
+    isAvailable: 1,
+    numberRange: ''
+  }
+]);
+const myDate = new Date();
+onMounted(() => {
+  console.log(myDate.getHours());   //打印当前小时数
+})
+const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
+  console.log(uploadFile, uploadFiles)
+}
+//提交表单
+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: "提交成功"
+    })
+    reload() //上传完后重置表单
+  } else {
+    ElMessage.error("服务错误")
+    return;
+  }
+}
+//图片上传请求  此请求只要选择了图片，就会默认上传
+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 resetForm = () => {
+  resetFormData.value.resetFields()
+}
+const Exceed_ProductImg: UploadProps['onExceed'] = (files) => { //覆盖商品照片
+  uploadProductImg.value!.clearFiles()
+  const file = files[0] as UploadRawFile
+  file.uid = genFileId()
+  uploadProductImg.value!.handleStart(file)
+}
+const Exceed_ProductDetail: UploadProps['onExceed'] = (files) => {  //覆盖商品详情图片
+  uploadProductDetail.value!.clearFiles()
+  const file = files[0] as UploadRawFile
+  file.uid = genFileId()
+  uploadProductDetail.value!.handleStart(file)
+}
+const showDatePop = () => {
+  dialogVisible.value = true
+}
+const handleClose = () => {
+  dialogVisible.value = false;
+}
+const addList = (index: number, row: number) => {
+  console.log(index, row);
+  // if (count.value <= 6) {
+  //   timeList.value[row+1] = {
+  //     startTime: '',
+  //     endTime: ''
+  //   }
+  // }
+}
+const subList = (index: number, row: number) => {
+  // arr.value[index].splice(index, 1)
+}
 </script>
 
 <style scoped>
+.totalBox {
+  display: flex;
+}
 
+.fromBox {
+  border: 1px solid red;
+  width: 750px;
+  height: 750px;
+}
+
+.totalPicture {
+  display: flex;
+}
+
+.NamePrice {
+  display: flex;
+}
+
+.totalButton {
+  display: flex;
+  justify-content: space-evenly;
+  /*  盒子里面水平分隔开 */
+}
+
+.date-picker {
+  flex: 0.3;
+  /* 日期选择区域占据左边 */
+  display: inline-block;
+  margin-bottom: 10px;
+}
+
+.father {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border: 1px solid red;
+}
+
+.box {
+  margin-bottom: 20px;
+  /* 每个日期或时间段之间的间距 */
+  border: 1px solid yellow;
+}
+
+.inner {
+  margin-bottom: 10px;
+  border: 1px solid orange;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/ServiceType/ProductCenter.vue b/src/views/ServiceType/ProductCenter.vue
index 8e8347f..9ace828 100644
--- a/src/views/ServiceType/ProductCenter.vue
+++ b/src/views/ServiceType/ProductCenter.vue
@@ -1,7 +1,5 @@
 <template>
-    <div>
-
-    </div>
+    <div>123</div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/test.vue b/src/views/test.vue
index 8993473..8952d57 100644
--- a/src/views/test.vue
+++ b/src/views/test.vue
@@ -1,41 +1,87 @@
 <template>
-  <div>
-    <span 
-      :style="getStyle(1)" 
-      @click="selectText(1)"
-    >
-      文字1
-    </span>
-    <span 
-      :style="getStyle(2)" 
-      @click="selectText(2)"
-    >
-      文字2
-    </span>
+  <div class="date-picker">
+    <div class="father">
+    <div v-for="(item, index) in dayList" :key="index">
+      <div class="inner">
+        第{{ index + 1 }}天
+      </div>
+        <!-- 时间段部分 -->
+      <div class="time-picker">
+      <div v-for="(item, row) in timeList[index]" :key="row" class="box">
+        <span>第 {{ row+1 }} 个时间段</span>
+        <el-time-select 
+          v-model="timeList[index][row].startTime" 
+          style="width: 150px"
+          :max-time="timeList[index][row].endTime" 
+          placeholder="Start time" 
+          size="default" 
+          start="08:30" 
+          step="00:15"
+          end="18:30" />
+        <el-time-select 
+          v-model="timeList[index][row].endTime" 
+          style="width: 150px"
+          :min-time="timeList[index][row].startTime" 
+          placeholder="End time" 
+          size="default" 
+          start="08:30" 
+          step="00:15"
+          end="18:30" />
+        <el-button circle @click="addList(index, row)"><el-icon><Plus /></el-icon></el-button>
+      <el-button circle @click="subList(index, row)" v-if="row + 1 > 1"><el-icon><Minus /></el-icon></el-button>
+      </div>
+    </div>
+    </div>
+    </div>
+ 
   </div>
 </template>
 
-<script setup>
-import { ref } from 'vue';
-
-const selectedText = ref(1); // 用来存储选中的文字
-
-// 根据选中状态动态返回样式
-const getStyle = (textNum) => {
-  return {
-    'border-bottom': selectedText.value === textNum ? '2px solid black' : 'none',
-    'cursor': 'pointer'
-  };
-};
-
-const selectText = (textNum) => {
-  selectedText.value = textNum; // 更新选中的文字
-};
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Plus } from '@element-plus/icons-vue';
+const dayList = ref([0,1,2,3])  //今天和未来三天
+const timeList = ref([
+  [
+    {
+      startTime: '',
+      endTime: ''
+    }
+  ],
+  [
+    {
+      startTime: '',
+      endTime: ''
+    }
+  ],
+  [
+    {
+      startTime: '',
+      endTime: ''
+    }
+  ],
+  [
+    {
+      startTime: '',
+      endTime: ''
+    }
+  ]
+])
+const numberRange = ref([]) 
+const addList = (index: any, row: any) => {
+if ( timeList.value[index].length < 6) {
+  timeList.value[index].push({
+    startTime:'',
+    endTime:''
+  })
+}
+}
+const subList = (index: number, row: number) => {
+  console.log(index,row);
+  timeList.value[index].splice(row, 1)
+}
 </script>
 
-<style scoped>
-span {
-  margin-right: 10px;
-  padding-bottom: 5px;
-}
-</style>
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file