diff --git a/src/layout/components/calendarUtil.vue b/src/layout/components/calendarUtil.vue
index 903df58..c714b24 100644
--- a/src/layout/components/calendarUtil.vue
+++ b/src/layout/components/calendarUtil.vue
@@ -1,96 +1,110 @@
 <template>
-  <el-calendar :disabled-date="disabledDate" class="calbox">
-    <template #date-cell="{ data }">
-      <div @click="dateForm(data)">
-        <p 
-            :class="[
-            selectedDates.includes(data.day)? 'is-selected' : '',
-            isFutureDate(data.day)? '' : 'disabled'
-          ]"
-            @click="handleDateClick(data.day)"
-            class="calendar-date-cell"
-        >
-          {{ data.day.split('-').slice(1).join('-') }}
-          <!-- {{ data.isSelected ? '✔️' : '' }} -->
-          <span v-if="selectedDates.includes(data.day)">✔️</span>
-        </p>
-      </div>
-    </template>
-  </el-calendar>
-  <el-drawer v-model="drawer" :title="'当前选择的日期是：' + periodObj.specificDate" :with-header="true" @open="drawerOpen" @closed="drawerClean">
-    <div style="margin-bottom: 20px;">选择当天时间段和人数</div>
-    <div class="timebox" v-for="(item,index) in periodObj.timePeriodAddRequestList" style="margin-bottom: 40px">
-      <span>选择时间段</span>
-      <el-time-picker
-      v-model="timePickArr[index]"
-      format='HH:mm'
-      is-range="true"
-      range-separator="到"
-      start-placeholder="开始"
-      end-placeholder="结束"
-      value-format="HH:mm"
-      :style="{ width: '236px' , marginLeft: '20px'}"
-      @change="saveTime(index)"
-    />
-      <div style="margin-top: 15px;">
-        <div style="display: flex; align-items: center">
-          <div style="margin-bottom: 15px"><span>最小人数:</span></div>
-          <el-select v-model="periodObj.timePeriodAddRequestList[index].minNumber" style="width: 100px; margin: 0 0 15px 30px" @change="minNum(index)">
-            <el-option v-for="item in minArr" :label="item" :value="item" />
-          </el-select><br>
+  <div class="calendar">
+    <el-calendar :disabled-date="disabledDate" class="calbox">
+      <template #date-cell="{ data }">
+        <div @click="dateForm(data)">
+          <p :class="[
+          selectedDates.includes(data.day) ? 'is-selected' : '',
+          isFutureDate(data.day) ? '' : 'disabled'
+        ]" @click="handleDateClick(data.day)" class="calendar-date-cell">
+            {{ data.day.split('-').slice(1).join('-') }}
+            <!-- {{ data.isSelected ? '✔️' : '' }} -->
+            <span v-if="selectedDates.includes(data.day)" style="height: 1px;width: 1px">✔️</span>
+          </p>
         </div>
+      </template>
+    </el-calendar>
 
-        <div style="display: flex; align-items: center; margin-bottom: 15px;">
-          <div><span>最大人数:</span></div>
-          <el-select v-model="periodObj.timePeriodAddRequestList[index].maxNumber" style="width: 100px; margin: 0 15px 0 30px" @change="maxNum(index)">
-            <el-option v-for="item in maxArr" :label="item" :value="item" />
-          </el-select>
-        </div>
-        <el-button circle @click="addList(index)"><el-icon>
+    <el-drawer v-model="drawer" :title="'当前选择的日期是：' + periodObj.specificDate" :with-header="true" @open="drawerOpen" @closed="drawerClean" direction="ltr">
+      <div style="margin-bottom: 20px;">选择当天时间段和人数</div>
+      <div class="timebox" v-for="(item,index) in periodObj.timePeriodAddRequestList" style="margin-bottom: 40px">
+        <span>选择时间段</span>
+        <el-time-picker
+            v-model="timePickArr[index]"
+            format='HH:mm'
+            is-range="true"
+            range-separator="到"
+            start-placeholder="开始"
+            end-placeholder="结束"
+            value-format="HH:mm"
+            :style="{ width: '236px' , marginLeft: '20px'}"
+            @change="saveTime(index)"
+        />
+        <div style="margin-top: 15px;">
+          <div style="display: flex; align-items: center">
+            <div style="margin-bottom: 15px"><span>最小人数:</span></div>
+            <el-select v-model="periodObj.timePeriodAddRequestList[index].minNumber" style="width: 100px; margin: 0 0 15px 30px" @change="minNum(index)">
+              <el-option v-for="item in minArr" :label="item" :value="item" />
+            </el-select><br>
+          </div>
+
+          <div style="display: flex; align-items: center; margin-bottom: 15px;">
+            <div><span>最大人数:</span></div>
+            <el-select v-model="periodObj.timePeriodAddRequestList[index].maxNumber" style="width: 100px; margin: 0 15px 0 30px" @change="maxNum(index)">
+              <el-option v-for="item in maxArr" :label="item" :value="item" />
+            </el-select>
+          </div>
+          <el-button circle @click="addList(index)"><el-icon>
             <Plus />
           </el-icon></el-button>
-        <el-button circle @click="subList(index)" v-if="index > 0"><el-icon>
+          <el-button circle @click="subList(index)" v-if="index > 0"><el-icon>
             <Minus />
           </el-icon></el-button>
+        </div>
       </div>
-    </div>
-    <div style="display: flex; align-items: center">
-      <el-checkbox v-model="isBook"  label="可否预约" size="large" style="margin-right: 15px"/>
-      <el-button type="success" round @click="saveInfo">保存</el-button>
-      <el-button type="danger" round @click="closeForm">取消</el-button>
-      <el-button type="primary" round @click="resetForm">重置</el-button>
-    </div>
-  </el-drawer>
-  <el-button type="success" round @click="emittValue" style="margin: 50px 0 0 50px;">保存</el-button>
+      <div style="display: flex; align-items: center">
+        <el-checkbox v-model="isBook"  label="可否预约" size="large" style="margin-right: 15px"/>
+        <el-button type="success" round @click="saveInfo">保存</el-button>
+        <el-button type="danger" round @click="closeForm">取消</el-button>
+        <el-button type="primary" round @click="resetForm">重置</el-button>
+      </div>
+    </el-drawer>
+    <el-button type="success" round @click="emittValue" style="margin: 10px 0 10px 25px;">保存</el-button>
+  </div>
+  <!-- 展示已经选择的时间端 -->
+  <el-card style="max-width: 450px" shadow="hover">
+    <template #header>
+      <div class="card-header">
+        <span>已选择的时间(日历状态:{{ calendarIsSave }})</span>
+      </div>
+    </template>
+    <el-tree
+        style="max-width: 600px"
+        :data="cardDateTree"
+        default-expand-all
+    />
+  </el-card>
 </template>
 
 <script setup lang="ts">
 import { ref , onMounted , defineEmits} from 'vue'
-import { ElMessage } from 'element-plus';
 import emitter from "@/utils/emitter";
+import {WarnInfo} from "@/utils/messageInfo";
+
+const cardDateTree : any= ref([])    //卡片里树组件变量
+const calendarIsSave = ref('未保存')
 const Selectdate = ref('')
-//日期1.20
 const selectedDates = ref<string[]>([])  //选中的日期
-  const dateDrawerData : any = ref<{
+const dateDrawerData : any = ref<{
   visible: boolean
   timeDataList: { value1: string; value2: [Date, Date] }[]  //数组类型
 }>({
   visible: false,        // 设定一个初始值
   timeDataList: []      // 设定一个初始值
 })
-const drawer = ref(false) 
+const drawer = ref(false)
 const periodObj : any = ref(
-  {
-    specificDate: '',
-    isAvailable: 0,
-    timePeriodAddRequestList: [
-      {
-        timeSlot: '',
-        minNumber: 0,
-        maxNumber: 0
-      }
-    ]
-  }
+    {
+      specificDate: '',
+      isAvailable: 0,
+      timePeriodAddRequestList: [
+        {
+          timeSlot: '',
+          minNumber: 0,
+          maxNumber: 0
+        }
+      ]
+    }
 )
 const periodMap = new Map()  //将点击保存的数据存入map，也为后续遍历出来做准备
 const timePickMap = new Map()  //暂存每次的时间段
@@ -102,6 +116,7 @@ const isTrue = ref(false)  //判断当前键是否有值
 const isBook = ref(true)
 const appointmentDateAddRequestList :any = ref([])  //传给后端的预约时间
 const emit = defineEmits(['calendar-Info'])
+
 onMounted(()=>{
   for(let i = 0;i <=50 ; i++) {  //初始化人数选择的数组
     minArr.value[i] = 5+i
@@ -120,54 +135,77 @@ const dateForm =(object : any)=>{   //赋值当前日期和弹出抽屉
 }
 const closeForm =()=>{  //缺重置表单
   drawer.value = false
-} 
+}
 const addList =(index: number)=>{  //添加当前日期的时间段
   count.value += 1
   if(count.value <= 15 && judgeNull(periodObj.value.timePeriodAddRequestList)) {
     periodObj.value.timePeriodAddRequestList.push(
-    {
-      timeSlot: '',
-      minNumber: 0,
-      maxNumber: 0
-    }
-  )
-  timePickArr.value.push([])
+        {
+          timeSlot: '',
+          minNumber: 0,
+          maxNumber: 0
+        }
+    )
+    timePickArr.value.push([])
   } else {
-    ElMessage({
-    type:'warning',
-    message:'请填写完前一段日期后再添加,我知道测试想要干什么！'
-    })
+    WarnInfo('请填写完再添加')
   }
   // console.log(index,'--->',periodObj.value);
 }
-const subList =(index: number)=>{
+const subList =(index: number)=>{    //删除时间段人数
   if(index != 0) {
     periodObj.value.timePeriodAddRequestList.splice(index,1)
   }
-} 
-const saveTime =(index : number)=>{  //将开始时间和结束时间格式化存入periodObj中
+  calendarIsSave.value = '未保存'
+  //更新日期、时间段集合
+  periodMap.set(periodObj.value.specificDate,periodObj.value)
+  timePickMap.set(periodObj.value.specificDate,timePickArr.value)
+  cardDateTree.value.splice(0,cardDateTree.value.length)
+  periodMap.forEach(loopPeriodMap)
+}
 
+const saveTime =(index : number)=>{  //将开始时间和结束时间格式化存入periodObj中
   try{
     periodObj.value.timePeriodAddRequestList[index].timeSlot = timePickArr.value[index][0]+'-'+timePickArr.value[index][1]
   } catch {
     periodObj.value.timePeriodAddRequestList[index].timeSlot = ''
   }
 }
+
 const saveInfo =()=>{  //保存当前日期的时间和人数信息
   //时间段和人数判空
   if(!judgeNull(periodObj.value.timePeriodAddRequestList)) {
-    ElMessage({
-    type:'warning',
-    message:'请填写完整时间段和人数！'
-    })
+    WarnInfo('请填写完整时间段和人数！')
     return;
   }
   isBook ? periodObj.value.isAvailable = 1 : periodObj.value.isAvailable = 0
-  periodMap.set(periodObj.value.specificDate,periodObj.value)
+  periodMap.set(periodObj.value.specificDate,periodObj.value)   //作用于回显
   timePickMap.set(periodObj.value.specificDate,timePickArr.value)
+  cardDateTree.value.splice(0,cardDateTree.value.length)
   drawer.value = false
-  console.log('periodObj--->',periodObj.value);
+  periodMap.forEach(loopPeriodMap)
+  // console.log('选择的日期和时间段--->',periodObj.value)
 }
+
+const loopPeriodMap = ( value: any,key: any,map: any ) => {
+  // console.log('value---->', value , 'key---->', key)
+  cardDateTree.value.push({
+    label:key,
+    children: dealTreeChildren(value.timePeriodAddRequestList)
+  })
+}
+
+const dealTreeChildren = ( arr : any ) => {   //处理map集合中时间段和人数格式，最后返回给树
+  let labelArrObj : any = []
+  arr.forEach((item : any) => {
+    labelArrObj.push({
+      label: '时间：' + item.timeSlot + '，人数:' + item.minNumber + '-' + item.maxNumber,
+    })
+  })
+  // console.log('value---->', arr)
+  return labelArrObj;
+}
+
 const drawerClean =()=>{   //清空对象
   periodObj.value = {
     specificDate: Selectdate.value,
@@ -188,7 +226,7 @@ const drawerOpen =()=>{  //抽屉打开时
   if(isTrue.value) {
     periodObj.value = periodMap.get(periodObj.value.specificDate)
     timePickArr.value= timePickMap.get(periodObj.value.specificDate)
-    console.log('timePickArr--->',timePickArr.value);
+    // console.log('timePickArr--->',timePickArr.value);
   }
 }
 const resetForm =()=>{  //重置表格
@@ -197,14 +235,22 @@ const resetForm =()=>{  //重置表格
     periodMap.delete(periodObj.value.specificDate)
     timePickMap.delete(periodObj.value.specificDate)
   }
+  calendarIsSave.value = '未保存'
+  cardDateTree.value.splice(0,cardDateTree.value.length)
+  periodMap.forEach(loopPeriodMap)
 }
 const emittValue =()=>{  //点击保存后将值传给父组件
   appointmentDateAddRequestList.value.splice(0,appointmentDateAddRequestList.value.length)  //防止用户狂点
   periodMap.forEach(mapFun)
   emit('calendar-Info',appointmentDateAddRequestList.value)
+  if(appointmentDateAddRequestList.value.length === 0) {
+    WarnInfo('请添加信息后再保存')
+    return;
+  }
   emitter.on('clear', () => {
     periodMap.clear()
   })
+  calendarIsSave.value = '已保存'
 }
 const mapFun =(value:any ,key:any ,map:any)=>{  //遍历map的统一函数
   if(periodMap.has(key)) {
@@ -221,20 +267,14 @@ const judgeNull =(List : any)=>{  //时间段和人数统一判空方法
 }
 const minNum =(index : number)=>{  //最小人数不能大于最大人数
   if(periodObj.value.timePeriodAddRequestList[index].minNumber > periodObj.value.timePeriodAddRequestList[index].maxNumber && periodObj.value.timePeriodAddRequestList[index].maxNumber != 0) {
-    ElMessage({
-      type: 'warning',
-      message: '最小人数不能大于最大人数'
-    })
+    WarnInfo('最小人数不能大于最大人数')
     periodObj.value.timePeriodAddRequestList[index].minNumber = 0
     return;
   }
 }
 const maxNum =(index : number)=>{
   if(periodObj.value.timePeriodAddRequestList[index].maxNumber < periodObj.value.timePeriodAddRequestList[index].minNumber) {
-    ElMessage({
-      type: 'warning',
-      message: '最大人数不能小于最小人数'
-    })
+    WarnInfo('最大人数不能小于最小人数')
     periodObj.value.timePeriodAddRequestList[index].maxNumber = 0
     return;
   }
@@ -246,7 +286,7 @@ const disabledDate = (date: any) => {   //判断日期是否是今天
   return dateString < todayString
 }
 const isFutureDate = (date: any) => {  //禁用之前的
-  const today = new Date().toISOString().split('T')[0]  
+  const today = new Date().toISOString().split('T')[0]
   return date >= today
 }
 const handleDateClick = (date: any) => {
@@ -271,14 +311,20 @@ const handleDateClick = (date: any) => {
 
 <style scoped>
 .calbox {
-  width: 550px;
-  height: 280px;
+  width: 450px;
+  height: 300px;
   font-size: 12px;
   --el-calendar-cell-width: 30px;
 }
+
 .timebox {
   margin-bottom: 20px;
 }
+
+:deep(.el-calendar__body) {
+  padding: 12px 28px 12px 0px;
+}
+
 .calendar-date-cell {
   cursor: pointer;
   display: flex;
@@ -286,6 +332,12 @@ const handleDateClick = (date: any) => {
   align-items: center;
   height: 100%;
 }
+
+.calendar{
+  /*border: 1px solid red;*/
+}
+
+/*这是过去日期不能选中的样式，请勿删除*/
 .disabled {
   color: #dcdfe6;
   pointer-events: none;
diff --git a/src/layout/components/outfitCalendarUtil.vue b/src/layout/components/outfitCalendarUtil.vue
index 9c1584e..68e200c 100644
--- a/src/layout/components/outfitCalendarUtil.vue
+++ b/src/layout/components/outfitCalendarUtil.vue
@@ -8,7 +8,7 @@
         ]" @click="handleDateClick(data.day)" class="calendar-date-cell">
           {{ data.day.split('-').slice(1).join('-') }}
           <!-- {{ data.isSelected ? '✔️' : '' }} -->
-          <span v-if="selectedDates.includes(data.day)">✔️</span>
+          <span v-if="selectedDates.includes(data.day)" style="height: 1px;width: 1px">✔️</span>
         </p>
       </div>
     </template>
@@ -43,13 +43,29 @@
       <el-button type="primary" round @click="resetForm">重置</el-button>
     </div>
   </el-drawer>
-  <el-button type="success" round @click="emittValue" style="margin: 50px 0 0 50px;">保存</el-button>
+  <el-button type="success" round @click="emittValue" style="margin: 10px 0 10px 25px;">保存</el-button>
+  <!-- 展示已经选择的时间端 -->
+  <el-card style="max-width: 450px" shadow="hover">
+    <template #header>
+      <div class="card-header">
+        <span>已选择的时间(日历状态:{{ calendarIsSave }})</span>
+      </div>
+    </template>
+    <el-tree
+        style="max-width: 600px"
+        :data="cardDateTree"
+        default-expand-all
+    />
+  </el-card>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, defineEmits } from 'vue'
-import { ElMessage } from 'element-plus';
 import emitter from "@/utils/emitter";
+import {WarnInfo} from "@/utils/messageInfo";
+
+const cardDateTree : any= ref([])    //卡片里树组件变量
+const calendarIsSave = ref('未保存')
 const Selectdate = ref('')
 const selectedDates = ref<string[]>([])  //选中的日期
 const dateDrawerData: any = ref<{
@@ -110,10 +126,7 @@ const addList = (index: number) => {  //添加当前日期的时间段
     )
     timePickArr.value.push([])
   } else {
-    ElMessage({
-      type: 'warning',
-      message: '请填写完前一段日期后再添加'
-    })
+    WarnInfo('请填写完前一段日期后再添加')
   }
   // console.log(index,'--->',periodObj.value);
 }
@@ -121,30 +134,57 @@ const subList = (index: number) => {
   if (index != 0) {
     periodObj.value.bookingTimeAddRequestList.splice(index, 1)
   }
+  calendarIsSave.value = '未保存'
+  //更新日期、时间段集合
+  periodMap.set(periodObj.value.specificDate,periodObj.value)
+  timePickMap.set(periodObj.value.specificDate,timePickArr.value)
+  cardDateTree.value.splice(0,cardDateTree.value.length)
+  periodMap.forEach(loopPeriodMap)
 }
 const saveTime = (index: number) => {  //将时间点存入periodObj对象中
-  console.log('时间点数组--->',timePickArr.value);
+  // console.log('时间点数组--->',timePickArr.value);
   try {
     periodObj.value.bookingTimeAddRequestList[index].timePoint = timePickArr.value[index]
   } catch {
     periodObj.value.bookingTimeAddRequestList[index].timePoint = ''
   }
 }
+
 const saveInfo = () => {  //保存当前日期的时间和人数信息
   //时间段和人数判空
   if (!judgeNull(periodObj.value.bookingTimeAddRequestList)) {
-    ElMessage({
-      type: 'warning',
-      message: '请填写完整时间段和人数！'
-    })
+    WarnInfo('请填写完整时间段和人数！')
     return;
   }
   isBook ? periodObj.value.isAvailable = 1 : periodObj.value.isAvailable = 0
   periodMap.set(periodObj.value.specificDate, periodObj.value)
   timePickMap.set(periodObj.value.specificDate, timePickArr.value)
+  cardDateTree.value.splice(0,cardDateTree.value.length)
   drawer.value = false
-  console.log('periodObj--->', periodObj.value);
+  periodMap.forEach(loopPeriodMap)
+  // console.log('periodObj--->', periodObj.value);
 }
+
+const loopPeriodMap = ( value: any,key: any,map: any ) => {
+  console.log('value---->', value , 'key---->', key)
+  cardDateTree.value.push({
+    label:key,
+    children: dealTreeChildren(value.bookingTimeAddRequestList)
+  })
+}
+
+const dealTreeChildren = ( arr : any ) => {   //处理map集合中时间段和人数格式，最后返回给树
+  // console.log('arr--->',arr)
+  let labelArrObj : any = []
+  arr.forEach((item : any) => {
+    labelArrObj.push({
+      label: '时间：' + item.timePoint
+    })
+  })
+  // console.log('value---->', arr)
+  return labelArrObj;
+}
+
 const drawerClean = () => {   //清空对象
   periodObj.value = {
     specificDate: Selectdate.value,
@@ -158,6 +198,7 @@ const drawerClean = () => {   //清空对象
   timePickArr.value = []
   count.value = 0;
 }
+
 const drawerOpen = () => {  //抽屉打开时
   isTrue.value = periodMap.has(periodObj.value.specificDate)  //判断之前有没有存过这个值
   if (isTrue.value) {
@@ -166,44 +207,59 @@ const drawerOpen = () => {  //抽屉打开时
     console.log('timePickArr--->', timePickArr.value);
   }
 }
+
 const resetForm = () => {  //重置表格
   drawerClean()  //视觉上先删除
   if (isTrue.value) {  //存过的一律从map中清除
     periodMap.delete(periodObj.value.specificDate)
     timePickMap.delete(periodObj.value.specificDate)
   }
+  calendarIsSave.value = '未保存'
+  cardDateTree.value.splice(0,cardDateTree.value.length)
+  periodMap.forEach(loopPeriodMap)
 }
+
 const emittValue = () => {  //点击保存后将值传给父组件
   appointmentDateAddRequestList.value.splice(0, appointmentDateAddRequestList.value.length)  //防止用户狂点
   periodMap.forEach(mapFun)
+  if(appointmentDateAddRequestList.value.length === 0) {
+    WarnInfo('请添加信息后再保存')
+    return;
+  }
   emit('calendar-Info', appointmentDateAddRequestList.value)
   emitter.on('clear', () => {   //清空日期map集合
     periodMap.clear()
   })
+  calendarIsSave.value = '已保存'
 }
+
 const mapFun = (value: any, key: any, map: any) => {  //遍历map的统一函数
   if (periodMap.has(key)) {
     appointmentDateAddRequestList.value.push(value)
   }
   console.log(appointmentDateAddRequestList.value);
 }
+
 const judgeNull = (List: any) => {  //时间段和人数统一判空方法
-  console.log('List--->', List);
+  // console.log('List--->', List);
   if (List.some((item: any) => item.timePoint === '')) {
     return false;
   }
   return true;
 }
+
 const disabledDate = (date: any) => {   //判断日期是否是今天
   const today = new Date()
   const dateString = date.toISOString().split('T')[0]
   const todayString = today.toISOString().split('T')[0]
   return dateString < todayString
 }
+
 const isFutureDate = (date: any) => {  //禁用之前的
   const today = new Date().toISOString().split('T')[0]
   return date >= today
 }
+
 const handleDateClick = (date: any) => {
   const dateStr = date
   if (isFutureDate(dateStr)) {
@@ -226,8 +282,8 @@ const handleDateClick = (date: any) => {
 
 <style scoped>
 .calbox {
-  width: 550px;
-  height: 280px;
+  width: 450px;
+  height: 300px;
   font-size: 12px;
   --el-calendar-cell-width: 30px;
 }
@@ -236,6 +292,10 @@ const handleDateClick = (date: any) => {
   margin-bottom: 20px;
 }
 
+:deep(.el-calendar__body) {
+  padding: 12px 28px 12px 0px;
+}
+
 .calendar-date-cell {
   cursor: pointer;
   display: flex;
@@ -244,6 +304,7 @@ const handleDateClick = (date: any) => {
   height: 100%;
 }
 
+/*这是过去日期不能选中的样式，请勿删除*/
 .disabled {
   color: #dcdfe6;
   pointer-events: none;
diff --git a/src/layout/components/richTextUtil.vue b/src/layout/components/richTextUtil.vue
index 4f2138b..5c747fb 100644
--- a/src/layout/components/richTextUtil.vue
+++ b/src/layout/components/richTextUtil.vue
@@ -1,8 +1,8 @@
 <template>
   <div style="border: 1px solid #ccc">
-    <Toolbar style="border-bottom: 1px solid #ccc; width: 400px;" :editor="editorRef" :defaultConfig="toolbarConfig"
+    <Toolbar style="border-bottom: 1px solid #ccc; width: 410px;" :editor="editorRef" :defaultConfig="toolbarConfig"
              :mode="mode" />
-    <Editor style="height: 500px; overflow-y: hidden; width: 400px;" v-model="valueHtml" :defaultConfig="editorConfig"
+    <Editor style="height: 500px; overflow-y: hidden; width: 410px;" v-model="valueHtml" :defaultConfig="editorConfig"
             :mode="mode" @onChange="handleChange" @onCreated="handleCreated" />
   </div>
 </template>
@@ -11,7 +11,6 @@
 import '@wangeditor/editor/dist/css/style.css' // 引入 css
 import { onBeforeUnmount, ref, shallowRef, onMounted, defineEmits } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
-import axios from "axios";
 import myAxios from "@/api/myAxios";
 // 编辑器实例，必须用 shallowRef
 const editorRef = shallowRef()
diff --git a/src/router/routes.ts b/src/router/routes.ts
index f993fba..f6ecc95 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -241,6 +241,78 @@ export const constantRoute = [
             }
         ]
     },
+    {
+        path: '/outfitLeaseManage',
+        redirect: '/AddOutfit',
+        component: () => import("@/layout/Manage.vue"),
+        meta: {
+            title: '服装租赁管理',
+            icon: '',
+            hidden: false
+        },
+        children: [
+            {
+                path: '/AddOutfit',
+                name: '添加租赁服装',
+                component: () => import("@/views/OutfitLease/AddOutfit.vue"),
+                meta: {
+                    title: '添加租赁服装',
+                    icon: 'Edit',
+                    hidden: false
+                }
+            },
+            {
+                path: '/LeaseOutfitCenter',
+                name: '租赁产品中心',
+                component: () => import("@/views/OutfitLease/LeaseOutfitCenter.vue"),
+                meta: {
+                    title: '租赁产品中心',
+                    icon: '',
+                    hidden: false
+                }
+            },
+            {
+                path: '/OutfitType',
+                name: '服装类别',
+                component: () => import("@/views/OutfitLease/OutfitType.vue"),
+                meta: {
+                    title: '服装类别管理',
+                    icon: '',
+                    hidden: false
+                }
+            },
+            {
+                path: '/LeaseOutfitDetail/:id/:flag',
+                name: '租赁服装详情',
+                component: () => import("@/views/OutfitLease/LeaseOutfitDetail.vue"),
+                meta: {
+                    title: '租赁服装详情',
+                    icon: '',
+                    hidden: true
+                }
+            },
+            {
+                path: '/OutfitLeaseOrder',
+                name: '租赁订单中心',
+                component: () => import("@/views/OutfitLease/OutfitLeaseOrderCenter.vue"),
+                meta: {
+                    title: '租赁订单中心',
+                    icon: '',
+                    hidden: false
+                }
+            },
+            {
+                path: '/LeaseOrderDetail/:id',
+                name: '租赁订单详情',
+                component: () => import("@/views/OutfitLease/LeaseOrderDetail.vue"),
+                meta: {
+                    title: '租赁订单详情',
+                    icon: '',
+                    hidden: true
+                }
+            }
+        ]
+    },
     //活动资讯管理
     {
         path: '/activityMessage',
diff --git a/src/utils/formatImgUpload.ts b/src/utils/formatImgUpload.ts
index cda7727..87a2e1b 100644
--- a/src/utils/formatImgUpload.ts
+++ b/src/utils/formatImgUpload.ts
@@ -1,4 +1,4 @@
 //上传链接
 export const uploadUrl : string = 'http://localhost:9092/api/file/uploadFile'
-// export const uploadUrl = 'https://www.carboner.cn:8888/api/file/uploadFile'
+// export const uploadUrl : string= 'https://www.carboner.cn:8888/api/file/uploadFile'
 export const downloadUrl : string = 'https://www.carboner.cn:8888/api/file/downloadFile?objectKey='
diff --git a/src/utils/imgUpload/ImgSingleUpload.vue b/src/utils/imgUpload/ImgSingleUpload.vue
index f9143b3..dddb570 100644
--- a/src/utils/imgUpload/ImgSingleUpload.vue
+++ b/src/utils/imgUpload/ImgSingleUpload.vue
@@ -9,8 +9,7 @@
       :on-remove="handleRemove"
       :on-exceed="ExceedImg"
       limit="1"
-      v-loading="loading"
-  >
+      v-loading="loading">
     <el-icon><Plus /></el-icon>
   </el-upload>
   <el-dialog v-model="dialogVisible">
@@ -45,7 +44,7 @@ const compressImage =(file: any)=> {   //图片压缩方法
     new Compressor(file.file, {
       quality: 0.3,   //压缩质量，越高文件越大
       success(result) {
-        console.log('res--->',result)
+        // console.log('res--->',result)
         // 压缩成功后的处理
         const compressedFile = new File([result], file.file.name, { type: result.type });
         // 可以在这里预览、上传或者做其他处理
diff --git a/src/views/Commodity/AddProduct.vue b/src/views/Commodity/AddProduct.vue
index 5ae63b0..9468145 100644
--- a/src/views/Commodity/AddProduct.vue
+++ b/src/views/Commodity/AddProduct.vue
@@ -126,7 +126,7 @@ const getTypeList = async () => {  //获取类别列表作为可选项
   for(let key in res.data.data) {
     typeList.value.push(res.data.data[key].typeName)
   }
-  console.log('typeList---->',typeList.value);
+  // console.log('typeList---->',typeList.value);
 }
 //提交表单
 const onSubmit = async () => {
@@ -183,6 +183,8 @@ const addLabel = () => {   //添加商品标签按钮的方法
 
 const deleteLabel = () => {   //删除标签的方法
   labelList.value.pop()
+  addLabelList()   //格式化标签
+  // console.log('标签--->',labelList.value)
 }
 
 const addLabelList = () => {   //格式化商品标签
@@ -228,8 +230,10 @@ function encode64(text: string): string {
   overflow-y: auto;
   word-break: break-all;
   width: 400px;
+  min-width: 400px;
   margin-right: 10px;
 }
+
 .form-container {
   width: 900px;
   height: 800px;
diff --git a/src/views/Commodity/EntityProductDetail.vue b/src/views/Commodity/EntityProductDetail.vue
index c7d52ca..3daf8fa 100644
--- a/src/views/Commodity/EntityProductDetail.vue
+++ b/src/views/Commodity/EntityProductDetail.vue
@@ -92,7 +92,6 @@ const typeList: any = ref([])
 const labelList = ref([''])
 const isqualify : any = ref(false)
 const typeSelect : any = ref(false)  //类别下拉选项栏的禁用状态
-const ImgArr: any = ref<UploadUserFile[]>([])
 const detailFrom : any = ref({
   name: '',   //商品名称
   price: '',  //商品价格
@@ -143,15 +142,8 @@ const getProductInfo = async () => {   //商品信息
     previewImgUrl.value = res.data.data.goodImg
     detailFrom.value = res.data.data
     previewRichText.value = res.data.data.richText
-    ImgArr.value.splice(0, ImgArr.value.length)
     detailFrom.value.festivalName = res.data.data.festivalName.substring(0,1)
     labelList.value = res.data.data.label.split(';')
-    var tempArr = res.data.data.goodImg.split(';')
-    tempArr.forEach((item: any) => {
-      ImgArr.value.push({
-        url: item
-      })
-    })
   }
 }
 
@@ -205,6 +197,7 @@ const addLabel = () => {   //添加商品标签按钮的方法
 }
 const deleteLabel = () => {   //删除标签的方法
   labelList.value.pop()
+  addLabelList()   //格式化商品标签
 }
 const addLabelList = () => {   //格式化商品标签
   var string = ''
diff --git a/src/views/Commodity/MerchandiseCenter.vue b/src/views/Commodity/MerchandiseCenter.vue
index 76ec363..e4fd436 100644
--- a/src/views/Commodity/MerchandiseCenter.vue
+++ b/src/views/Commodity/MerchandiseCenter.vue
@@ -44,27 +44,21 @@
     </el-table-column>
     <el-table-column prop="goodImg" label="商品图片">
       <template #default="scope">
-        <div>
           <img :src="downloadUrl + scope.row.goodImg.split(';')[0]" alt="" style="height: 50px;">
-        </div>
       </template>
     </el-table-column>
     <el-table-column prop="name" label="商品名称"></el-table-column>
     <el-table-column prop="price" label="商品价格" width="180">
       <template #default="scope">
-        <div>
           {{ scope.row.price }} 元
-        </div>
       </template>
     </el-table-column>
     <el-table-column prop="type" label="商品类型"></el-table-column>
     <el-table-column prop="inventory" 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>
-        </div>
       </template>
     </el-table-column>
     <el-table-column label="操作" width="250px">
@@ -196,6 +190,7 @@ const ReviseOrView = (index: number, row: any, flag: number) => {
 }
 //下架商品
 const handleOff = async (index: number, row: any) => {
+  // console.log('当前行--->',row)
   row.isShelves ? row.isShelves = 0 : row.isShelves = 1  //三元运算符  改变那一行的上架值
   editForm.value = row;
   const res = await myAxios.post('/goods/update', {...editForm.value})
diff --git a/src/views/CostumeAppointments/AddCostumes.vue b/src/views/CostumeAppointments/AddCostumes.vue
index 8e299a3..a8d8adf 100644
--- a/src/views/CostumeAppointments/AddCostumes.vue
+++ b/src/views/CostumeAppointments/AddCostumes.vue
@@ -6,43 +6,39 @@
     </el-card>
     <!-- 表单 ref 和 prop绑定  用于重置表单 -->
     <el-card class="form-FormContainer" shadow="never">
-      <el-form ref="resetFormData" :model="form" label-width="auto" size="large">
-        <el-form-item label="添加写真展示图片">
+      <el-form ref="resetFormData" :model="form" size="large">
+        <el-form-item label="添加展示图片">
           <ImgSingleUpload @update:goodImgArr="form.goodImg = $event"/>
         </el-form-item>
-        <el-form-item label="服装名称" prop="name" style="width: 300px;" label-width="70px">
+        <el-form-item label="服装名称" prop="name" style="width: 300px;">
           <el-input v-model="form.name" />
         </el-form-item>
-        <el-form-item label="价格" prop="price" label-width="70px">
+        <div style="display: flex">
+        <el-form-item label="价格" prop="price">
           <el-input-number v-model="form.price" min="0" :precision="2" :step="0.5" />
           <p>元</p>
         </el-form-item>
+        <el-form-item label="服装类别" style="width: 232px;" label-width="80">
+          <el-select v-model="form.categoryName" placeholder="请选择" @change="(event: any) => loadCategory(event)" >
+            <el-option v-for="item in typeList" :key="item" :label="item" :value="item" />
+          </el-select>
+        </el-form-item>
+        </div>
         <!-- 拍摄场地：户外、室内、均可 -->
         <div class="kinds">
-          <el-form-item label="拍摄场地" prop="type" style="width: 240px;" label-width="70px">
+          <el-form-item label="拍摄场地" style="width: 240px;">
             <el-select v-model="form.shotScene" placeholder="请选择" @change="(event: any) => loadScene(event)" >
               <el-option v-for="item in siteList" :key="item" :label="item" :value="item" />
             </el-select>
           </el-form-item>
-          <el-form-item label="服装类别" prop="type" style="width: 240px;" label-width="80px">
-            <el-select v-model="form.categoryName" placeholder="请选择" @change="(event: any) => loadCategory(event)" >
-              <el-option v-for="item in typeList" :key="item" :label="item" :value="item" />
-            </el-select>
-          </el-form-item>
-        </div>
-        <div class="numberSelect">
-          <el-form-item label="最小人数" prop="type" style="width: 240px;" label-width="70px">
-            <el-select v-model="form.minNumber" @change="minNum()">
+          <el-form-item label="限定人数" style="width: 228px;" label-width="80">
+            <el-select v-model="form.count">
               <el-option v-for="item in minArr" :label="item" :value="item" />
             </el-select>
           </el-form-item>
-          <el-form-item label="最大人数" prop="type" style="width: 240px;" label-width="80px">
-            <el-select v-model="form.maxNumber" @change="maxNum()">
-              <el-option v-for="item in maxArr" :label="item" :value="item" />
-            </el-select>
-          </el-form-item>
         </div>
-        <el-form-item label="效果图" label-width="70px">
+
+        <el-form-item label="效果图">
           <richTextUtil @richTextContent="getRichTextInfo"/>
         </el-form-item>
         <div class="totalButton">
@@ -55,16 +51,18 @@
         </div>
       </el-form>
     </el-card>
-    <el-card class="form-RichTextContainer" shadow="never">
-      <outfitCalendarUtil @calendar-info="getDateInfo"></outfitCalendarUtil>
-    </el-card>
+    <div class="diyConponent">
+      <el-card class="form-RichTextContainer" shadow="never">
+        <outfitCalendarUtil @calendar-info="getDateInfo"></outfitCalendarUtil>
+      </el-card>
+    </div>
   </div>
 
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, inject, toRaw } from 'vue';
-import { ElMessage, type UploadProps, genFileId, type UploadRawFile } from 'element-plus';
+import { ElMessage } from 'element-plus';
 import myAxios from "@/api/myAxios";
 import outfitCalendarUtil from '@/layout/components/outfitCalendarUtil.vue';
 import richTextUtil from '@/layout/components/richTextUtil.vue';
@@ -78,8 +76,7 @@ const form = ref({
   shotScene: '', //拍摄场地
   categoryName: '', //服装类别
   goodImg: '',  //商品图片url
-  minNumber: 0, //最小人数
-  maxNumber: 0, //最大人数
+  count: 0,
   richText: '',
   bookingDateAddRequestList: []  //预约时间点，是否可预约，人数范围
 })
@@ -87,8 +84,7 @@ const form = ref({
 const reload: any = inject("reload")
 const typeList = ref<String[]>([])  //服装类别数组
 const siteList = ref<String[]>(['室外','室内','均可'])  //场地类型
-const minArr = ref<Number[]>([])  //最小人数数组
-const maxArr= ref<Number[]>([])  //最大人数数组
+const minArr = ref<Number[]>([])  //最人数数组
 const previewRichText = ref('')  //预览富文本
 
 
@@ -96,7 +92,6 @@ onMounted(() => {
   getOutfitKind() //获取服装类别
   for(let i = 0;i <=50 ; i++) {  //初始化人数选择的数组
     minArr.value[i] = 1+i
-    maxArr.value[i] = 2+i
   }
 })
 
@@ -121,19 +116,18 @@ const onSubmit = async () => {
     })
     return;  //空返回结束函数
   }
-  console.log(form.value);
+  // console.log(form.value);
   const res = await myAxios.post('/photoProducts/add', {
     name: form.value.name,
     price: form.value.price,
-    minNumber: form.value.minNumber,
-    maxNumber: form.value.maxNumber,
+    count: form.value.count,
     shotScene: form.value.shotScene,
     categoryName: form.value.categoryName,
     introImg: form.value.goodImg,
     richText: form.value.richText,
     bookingDateAddRequestList: toRaw(form.value.bookingDateAddRequestList)
   })
-  console.log(res.data);
+  // console.log(res.data);
   if (res.data.code === 1) {
     ElMessage({
       type: 'success',
@@ -163,7 +157,7 @@ function encode64(text: string): string {
 }
 
 const getDateInfo = ( info:any )=>{   //日期组件传值
-  console.log('info---->',info)
+  // console.log('info---->',info)
   form.value.bookingDateAddRequestList = info
 }
 
@@ -174,44 +168,27 @@ const getOutfitKind = async ()=> {   //获取服装类别
   }
 }
 
-const minNum =()=>{  //最小人数不能大于最大人数
-  if(form.value.minNumber > form.value.maxNumber && form.value.maxNumber != 0) {
-    ElMessage({
-      type: 'warning',
-      message: '最小人数不能大于最大人数'
-    })
-    form.value.minNumber = 0
-    return;
-  }
-}
-const maxNum =()=>{
-  if(form.value.maxNumber < form.value.minNumber) {
-    ElMessage({
-      type: 'warning',
-      message: '最大人数不能小于最小人数'
-    })
-    form.value.maxNumber = 0
-    return;
-  }
-}
-
-const getInfo = (info: any) => {  //富文本赋值
-  // console.log('info', info)
-  previewRichText.value = info
-  form.value.richText = info
-}
-
 </script>
 
 <style scoped>
 
 .form-FormContainer {
-  width: 600px;
+  width: 540px;
+  min-width: 540px;
+  height: 800px;
+  overflow: auto;
   /* margin: 0 auto; */
 }
 
 .form-RichTextContainer {
-  width: 550px;
+  width: 460px;
+  min-width: 460px;
+  height: 800px;
+  overflow: auto;
+}
+
+.diyConponent /deep/ .el-card__body {
+  padding: 20px 0 10px 0 !important;
 }
 
 .flexCard {
@@ -225,6 +202,7 @@ const getInfo = (info: any) => {  //富文本赋值
   word-break: break-all;
   width: 400px;
   margin-right: 10px;
+  min-width: 400px;
 }
 
 .kinds {
diff --git a/src/views/CostumeAppointments/AppointmentOrder.vue b/src/views/CostumeAppointments/AppointmentOrder.vue
index 52af406..e0d7028 100644
--- a/src/views/CostumeAppointments/AppointmentOrder.vue
+++ b/src/views/CostumeAppointments/AppointmentOrder.vue
@@ -9,15 +9,14 @@
   <el-table v-loading="loading" :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' }" :row-style="{ height: '70px' }">
-    <!-- <el-table-column type="selection" width="55" fixed="left"></el-table-column> -->
-    <el-table-column prop="id" label="订单序号" width="80">
+    <el-table-column prop="id" label="序号" width="50">
       <template #default="{ $index }">
         {{ $index + 1 }}
       </template>
     </el-table-column>
-    <el-table-column prop="orderNumber" label="订单编号" width="300"></el-table-column>
+    <el-table-column prop="orderNumber" label="订单编号" width="250"></el-table-column>
     <el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
-    <el-table-column prop="totalAmount" label="订单实付金额"></el-table-column>
+    <el-table-column prop="totalAmount" label="订单实付金额(元)"></el-table-column>
     <el-table-column prop="orderStatus" label="订单状态">
       <template #default="scope">
         {{ scope.row.orderStatus === '待发货' ? '待消费' : scope.row.orderStatus }}
@@ -62,7 +61,7 @@
 import { onMounted, ref } from "vue";
 import myAxios from "@/api/myAxios";
 import { ElMessage } from "element-plus";
-import { SuccessInfo, ErrorInfo } from "@/utils/messageInfo";
+import {SuccessInfo, ErrorInfo, WarnInfo} from "@/utils/messageInfo";
 import { useRouter, useRoute } from "vue-router";
 import emitter from "@/utils/emitter";
 const tableData: any = ref([]);  //表单展示数据
@@ -122,7 +121,16 @@ const showDetail = (row: any) => {
   })
 };
 const changeOrderStatus = async (row: any) => {   //改变订单状态
-  const res = await myAxios.post('',{})
+  const res = await myAxios.post('/advanceOrder/update/orderStatus',{
+    id: row.id,
+    orderStatus: '交易完成'
+  })
+  if(res.data.code === 1) {
+    await getOrderList()
+    SuccessInfo('订单确认完成')
+  } else {
+    WarnInfo(res.data.message)
+  }
 }
 const deleteOrder = async (row: any) => {  //微信退款
   loading.value = true
diff --git a/src/views/CostumeAppointments/ClothingGrade.vue b/src/views/CostumeAppointments/ClothingGrade.vue
index 3e487ef..9d46a98 100644
--- a/src/views/CostumeAppointments/ClothingGrade.vue
+++ b/src/views/CostumeAppointments/ClothingGrade.vue
@@ -4,13 +4,9 @@
   </div>
   <el-dialog v-model="dialogVisible" title="服装类别" width="500">
     <el-form :model="typeForm" label-width="auto" style="max-width: 600px" v-loading="loading">
-      
       <el-form-item label="类别名">
         <el-input v-model="typeForm.name" />
       </el-form-item>
-      <!-- <el-form-item label="备注">
-        <el-input v-model="typeForm.typeIntro" />
-      </el-form-item> -->
     </el-form>
     <template #footer #default="{ row, $index }">
       <div class="dialog-footer">
@@ -30,7 +26,6 @@
     <el-table-column prop="operation" label="操作">
       <template #default="scope">
         <el-button type="success" @click="editShowForm(scope.$index, scope.row)">修改类别</el-button>
-        <!-- scope.$index是当前行 第一行为0 -->
         <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
           title="是否确认删除" @confirm="Delete_type(scope.row.id)" width=180>
           <template #reference>
@@ -43,11 +38,11 @@
 </template>
 
 <script setup lang="ts">
-import { ElMessage, type UploadProps, type UploadUserFile} from 'element-plus';
+import { ElMessage, type UploadUserFile} from 'element-plus';
 import { ErrorInfo, SuccessInfo } from '@/utils/messageInfo';
 import { onMounted, ref } from 'vue'
 import myAxios from '@/api/myAxios';
-const fileSimple = ref()  //单个文件
+
 const selectedItems = ref([]) 
 const dialogVisible = ref(false)
 const loading = ref(false)  //加载
@@ -115,9 +110,7 @@ const addOrUpdateType = async () => {
   if( flag.value === 1 ) {
     const res = await myAxios.post('/photoCategory/update',{
       id : typeForm.value.id,
-      name: typeForm.value.name,
-      // typeUrl: typeForm.value.typeUrl,
-      // typeIntro: typeForm.value.typeIntro
+      name: typeForm.value.name
     })
     if (res.data.code === 1) {
       //提交成功后，之间重置表格
@@ -136,8 +129,6 @@ const resetForm = () => {
   typeForm.value = {
     id: 0,
     name: '',
-    // typeUrl: '',
-    // typeIntro: ''
   }
 };
 const handleSelectionChange = (row: any) => {
@@ -145,27 +136,21 @@ const handleSelectionChange = (row: any) => {
 }
 //编辑
 const editShowForm = (index: number, row: any) => {
-  // typeImg.value.splice(0,typeImg.value.length) //先删除原先的
-  // typeImg.value.push({
-  //   url: row.typeUrl
-  // })
   dialogVisible.value = true
   typeForm.value = JSON.parse(JSON.stringify(row))
   flag.value = 1
-  console.log('本行--->',row)
+  // console.log('本行--->',row)
 }
 //删除类别  请求体里只传id即可
 const Delete_type = async (index: number) => {
-  console.log(typeof index)
   const res = await myAxios.post('/photoCategory/delete', { id: index })
-  console.log(res)
   if (res.data.code === 1) {
     ElMessage({
       type: 'success',
       message: '删除成功',
     })
   }
-  getTypeList()
+  await getTypeList()
 }
 </script>
 
diff --git a/src/views/CostumeAppointments/ManagementCenter.vue b/src/views/CostumeAppointments/ManagementCenter.vue
index e4cf23f..d9b7a13 100644
--- a/src/views/CostumeAppointments/ManagementCenter.vue
+++ b/src/views/CostumeAppointments/ManagementCenter.vue
@@ -1,9 +1,10 @@
 <template>
   <!-- 修改前请注释以前的 -->
   <!-- 搜索 -->
+  <div class="table_page">
   <div style="display: flex; align-items: center">
     <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入服装名称"
-      v-model="productName"></el-input>
+              v-model="productName"></el-input>
     <div>
       <el-form-item label="" style="width: 200px; margin: 3px 10px 0 0;display: inline-block;">
         <el-select size="default" v-model="state" placeholder="上架状态" @change="(event: any) => searchByState(event)">
@@ -14,49 +15,45 @@
     </div>
     <el-button class="ml-5" type="primary" @click="onSearch(productName)" style="height: 30px;">搜索</el-button>
     <el-button type="warning" @click="reset" style="height:30px">重置</el-button>
+<!--    <div style="display: flex; justify-content: center; align-items: center; position: absolute; right: 40px;">-->
+<!--      <el-form-item label="摄影服务" prop="type" style="width: 240px; margin-top: 20px;  margin-right: 20px">-->
+<!--        <template #label>-->
+<!--          <span style="font-size: 16px; line-height: 36px">摄影服务</span>-->
+<!--        </template>-->
+<!--        <el-select v-model="value1" placeholder="选择摄影编号" @change="(event: any) => loadForm1(event)" :disabled="typeSelect" size="large">-->
+<!--          <el-option v-for="item in keysArray" :key="item" :label="item" :value="item" />-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="妆造服务" prop="type" style="width: 240px; margin-top: 20px; margin-right: 20px">-->
+<!--        <template #label>-->
+<!--          <span style="font-size: 16px; line-height: 36px">妆造服务</span>-->
+<!--        </template>-->
+<!--        <el-select v-model="value2" placeholder="选择妆造编号" @change="(event: any) => loadForm2(event)" :disabled="typeSelect" size="large">-->
+<!--          <el-option v-for="item in keysArray" :key="item" :label="item" :value="item" />-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
 
-  <div style="display: flex; justify-content: center; align-items: center; position: absolute; right: 40px;">
-      <el-form-item label="摄影服务" prop="type" style="width: 240px; margin-top: 20px;  margin-right: 20px">
-        <template #label>
-          <span style="font-size: 16px; line-height: 36px">摄影服务</span>
-        </template>
-        <el-select v-model="value1" placeholder="选择摄影编号" @change="(event: any) => loadForm1(event)" :disabled="typeSelect" size="large">
-          <el-option v-for="item in keysArray" :key="item" :label="item" :value="item" />
-        </el-select>
-      </el-form-item>
-
-      <el-form-item label="妆造服务" prop="type" style="width: 240px; margin-top: 20px; margin-right: 20px">
-        <template #label>
-          <span style="font-size: 16px; line-height: 36px">妆造服务</span>
-        </template>
-        <el-select v-model="value2" placeholder="选择妆造编号" @change="(event: any) => loadForm2(event)" :disabled="typeSelect" size="large">
-          <el-option v-for="item in keysArray" :key="item" :label="item" :value="item" />
-        </el-select>
-      </el-form-item>
-
-    <el-button class="ml-5" type="primary" @click="editSpecialProducts" :disabled="isBtnShow1" style="height: 30px;">编辑</el-button>
-    <el-button type="success" @click="saveSpecialProducts" :disabled="isBtnShow2" style="height:30px">保存</el-button>
-  </div>
-
-
+<!--      <el-button class="ml-5" type="primary" @click="editSpecialProducts" :disabled="isBtnShow1" style="height: 30px;">编辑</el-button>-->
+<!--      <el-button type="success" @click="saveSpecialProducts" :disabled="isBtnShow2" style="height:30px">保存</el-button>-->
+<!--    </div>-->
   </div>
   <div style="margin: 15px 0">
     <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
-      title="您确定批量删除这些数据吗？" @confirm="delBatch" width=180>
+                   title="您确定批量删除这些数据吗？" @confirm="delBatch" width=180>
       <template #reference>
         <el-button style="height: 25px" type="danger">批量删除 <el-icon style="margin-left: 5px;">
-            <Remove />
-          </el-icon></el-button>
+          <Remove />
+        </el-icon></el-button>
       </template>
     </el-popconfirm>
   </div>
   <!-- 数据展示 -->
   <el-table :data="tableData" border stripe header-cell-class-name="headerBg"
-    :cell-style="{ 'text-align': 'center', 'font-size': '16px' }" 
-    @selection-change="handleSelectionChange"
-    @select="selectChange"
-    :header-cell-style="{ 'text-align': 'center' }" 
-    default-expand-all>
+            :cell-style="{ 'text-align': 'center', 'font-size': '16px' }"
+            @selection-change="handleSelectionChange"
+            @select="selectChange"
+            :header-cell-style="{ 'text-align': 'center' }"
+            default-expand-all>
     <el-table-column type="selection" width="55"></el-table-column>
     <el-table-column prop="id" label="服装编号" width="80">
       <template #default="{ $index }">
@@ -76,7 +73,7 @@
       <template #default="{ $index }">
         <!-- 放后端传来的预约时间 -->
         <el-table :data="appointmentDateArr[$index]" :header-cell-style="{ 'text-align': 'center' }"
-          :cell-style="{ 'text-align': 'center' }">
+                  :cell-style="{ 'text-align': 'center' }">
           <el-table-column label="是否可预约" prop="isAvailable">
             <template #default="{ row  }">
               {{ row.isAvailable == 1 ? "是" : "否" }}
@@ -96,10 +93,10 @@
                 编辑
               </el-button>
               <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled"
-                icon-color="red" title="是否确认删除" @confirm="deleteDate(scope.row.id)" width=180>
+                             icon-color="red" title="是否确认删除" @confirm="deleteDate(scope.row.id)" width=180>
                 <template #reference>
                   <el-button class="ml-5" type="danger"
-                    v-if="tableData[$index].bookingDateVOList.length>1">删除</el-button>
+                             v-if="tableData[$index].bookingDateVOList.length>1">删除</el-button>
                 </template>
               </el-popconfirm>
             </template>
@@ -128,7 +125,7 @@
           <div v-if="scope.row.isShelves == 0">上架 </div>
         </el-button>
         <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
-          title="是否确认删除" @confirm="deleteProduct(scope.row.id)" width=180>
+                       title="是否确认删除" @confirm="deleteProduct(scope.row.id)" width=180>
           <template #reference>
             <el-button class="ml-5" type="danger">删除</el-button>
           </template>
@@ -139,27 +136,28 @@
   <!-- 分页器 -->
   <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" />
+                   :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-drawer v-model="drawer" :title="'当前日期：'+drawerDate.specificDate + '&emsp;服装名称：' + outfitName" direction="ltr"
-    @closed="closedDrawer">
+             @closed="closedDrawer">
     <div style="margin-bottom: 20px">选择当天时间</div>
     <div v-for="(item,index) in drawerDate.bookingTimeVOList" style="margin-bottom: 40px">
       <div style="margin-bottom: 15px"><span>时间点</span></div>
       <div style="display: flex;">
-          <el-time-select v-model="timePickArr[index]" 
-          format='HH:mm' 
-          style="width: 240px" 
-          start="07:00" step="00:05"
-          end="20:00" placeholder="选择时间点" value-format="HH:mm" :style="{ width: '200px' }"
-          @change="saveTime(index)" 
-          :disabled="timeAbleArr[index]" />
+        <el-time-select v-model="timePickArr[index]"
+                        format='HH:mm'
+                        style="width: 240px"
+                        start="07:00" step="00:05"
+                        end="20:00" placeholder="选择时间点" value-format="HH:mm" :style="{ width: '200px' }"
+                        @change="saveTime(index)"
+                        :disabled="timeAbleArr[index]" />
         <div style="margin-left:15px">
           <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
-            title="是否确认删除" @confirm="subList(item, index)" width=180>
+                         title="是否确认删除" @confirm="subList(item, index)" width=180>
             <template #reference>
               <el-button type="danger" v-if="index > 0">删除</el-button>
             </template>
@@ -170,7 +168,7 @@
     <el-button type="success" @click="addList">{{ addbtnText }}</el-button>
   </el-drawer>
   <!-- 添加日期弹窗 -->
-  <el-dialog v-model="addDateVisible" title="添加日期" width="800">
+  <el-dialog v-model="addDateVisible" title="添加日期" width="500">
     <outfitCalendarUtil @calendar-info="handleCalendarInfo"></outfitCalendarUtil>
     <template #footer>
       <div class="dialog-footer">
@@ -216,7 +214,7 @@ const maxArr : any = ref([])  //最大人数数组
 const InfoArr : any = ref([]) //时间段人数信息数组
 const addbtnText = ref('添加时间')
 const timeAbleArr = ref( //禁用时间段组件
-  Array.from({ length: 15 },()=>(false))
+    Array.from({ length: 15 },()=>(false))
 )
 const outfitName = ref('') //服装名称
 const addDateVisible = ref(false)  //添加日期弹窗
@@ -251,7 +249,7 @@ const getOutfitList = async () => {
       appointmentDateArr.value.splice(0,total.value)
       console.log('tableData--->',tableData.value);
       tableData.value.forEach((val : any) => {
-        appointmentDateArr.value.push(val.bookingDateVOList)  
+        appointmentDateArr.value.push(val.bookingDateVOList)
       })
       console.log('时间--->',appointmentDateArr.value);
     } else {
@@ -305,9 +303,9 @@ const getOutfitKind = async ()=> {   //获取服装类别
 }
 
 //下架商品(待优化，有问题，逻辑有问题)
-const handleOff = async (row: any) => { 
+const handleOff = async (row: any) => {
   console.log(row.isShelves);
-  const res = await myAxios.post('/photoProducts/shelves',{id: row.id}) 
+  const res = await myAxios.post('/photoProducts/shelves',{id: row.id})
   if(res.data.code === 1) {
     ElMessage({
       type:'success',
@@ -338,7 +336,7 @@ const onSearch = (data : String)=>{ //搜索按钮方法
   searchParams.value.current = 1
   getOutfitList()
 }
- //批量删除服装信息
+//批量删除服装信息
 const delBatch = async ()=>{
   console.log(idList.value);
   const res = await myAxios.post('/photoProducts/delBatch',{
@@ -602,7 +600,8 @@ const loadForm2 = (value: any) => {
 </script>
 
 <style scoped>
-.headerBg {
-  background-color: #eee !important;
+.table_page {
+  min-width: 1000px;
+  overflow: auto;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/CostumeAppointments/OutfitDetail.vue b/src/views/CostumeAppointments/OutfitDetail.vue
index e5d963b..2bf26e7 100644
--- a/src/views/CostumeAppointments/OutfitDetail.vue
+++ b/src/views/CostumeAppointments/OutfitDetail.vue
@@ -6,43 +6,37 @@
     </el-card>
     <!-- 表单 ref 和 prop绑定  用于重置表单 -->
     <el-card class="form-FormContainer" shadow="never" >
-      <el-form ref="resetFormData" :model="form" label-width="auto" size="large" :disabled="disabledRichText">
+      <el-form ref="resetFormData" :model="form" size="large" :disabled="disabledRichText">
         <el-form-item label="添加写真展示图片">
           <PreviewSingleImgUpload :ImgUrlList="form.introImg" @update:goodImgArr="form.introImg = $event"/>
         </el-form-item>
-        <el-form-item label="服装名称" prop="name" style="width: 300px;" label-width="70px">
+        <el-form-item label="服装名称" prop="name" style="width: 300px;">
           <el-input v-model="form.name" />
         </el-form-item>
-        <el-form-item label="价格" prop="price" label-width="70px">
-          <el-input-number v-model="form.price" min="0" :precision="2" :step="0.5" />
-          <p>元</p>
-        </el-form-item>
-        <!-- 拍摄场地：户外、室内、均可 -->
         <div class="kinds">
-          <el-form-item label="拍摄场地" prop="type" style="width: 240px;" label-width="70px">
-            <el-select v-model="form.shotScene" placeholder="请选择" @change="(event: any) => loadScene(event)" >
-              <el-option v-for="item in siteList" :key="item" :label="item" :value="item" />
-            </el-select>
+          <el-form-item label="价格" prop="price">
+            <el-input-number v-model="form.price" min="0" :precision="2" :step="0.5" />
+            <p>元</p>
           </el-form-item>
-          <el-form-item label="服装类别" prop="type" style="width: 240px;" label-width="80px">
+          <el-form-item label="服装类别"  style="width: 232px;" label-width="80px">
             <el-select v-model="form.categoryName" placeholder="请选择" @change="(event: any) => loadCategory(event)" >
               <el-option v-for="item in typeList" :key="item" :label="item" :value="item" />
             </el-select>
           </el-form-item>
         </div>
         <div class="numberSelect">
-          <el-form-item label="最小人数" prop="type" style="width: 240px;" label-width="70px">
-            <el-select v-model="form.minNumber" @change="minNum()">
+          <el-form-item label="拍摄场地"  style="width: 240px;" >
+            <el-select v-model="form.shotScene" placeholder="请选择" @change="(event: any) => loadScene(event)" >
+              <el-option v-for="item in siteList" :key="item" :label="item" :value="item" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="限定人数" prop="type" style="width: 228px;" label-width="80px">
+            <el-select v-model="form.count" @change="minNum()">
               <el-option v-for="item in minArr" :label="item" :value="item" />
             </el-select>
           </el-form-item>
-          <el-form-item label="最大人数" prop="type" style="width: 240px;" label-width="80px">
-            <el-select v-model="form.maxNumber" @change="maxNum()">
-              <el-option v-for="item in maxArr" :label="item" :value="item" />
-            </el-select>
-          </el-form-item>
         </div>
-        <el-form-item label="效果图" label-width="70px" v-loading="loading">
+        <el-form-item label="效果图" v-loading="loading">
           <richTextUtil @richTextContent="getInfo" v-model:disableRich="disabledRichText" v-model:context="previewRichText"/>
         </el-form-item>
         <div class="totalButton">
@@ -135,8 +129,7 @@ const onSubmit = async () => {
     id: form.value.id,
     name: form.value.name,
     price: form.value.price,
-    minNumber: form.value.minNumber,
-    maxNumber: form.value.maxNumber,
+    count: form.value.count,
     shotScene: form.value.shotScene,
     categoryName: form.value.categoryName,
     introImg: form.value.introImg,
@@ -191,7 +184,7 @@ const maxNum =()=>{
 }
 
 const getInfo = (info: any) => {  //富文本赋值
-  console.log('info', info)
+  // console.log('info', info)
   previewRichText.value = info
   form.value.richText = encode64(info)
 }
diff --git a/src/views/CostumeAppointments/OutfitOrderDetail.vue b/src/views/CostumeAppointments/OutfitOrderDetail.vue
index 2079d66..b3cf68b 100644
--- a/src/views/CostumeAppointments/OutfitOrderDetail.vue
+++ b/src/views/CostumeAppointments/OutfitOrderDetail.vue
@@ -33,20 +33,20 @@
             </div>
             <div class="table-layout">
                 <el-row>
-                    <el-col :span="4" class="table-cell-title">订单编号</el-col>
-                    <el-col :span="4" class="table-cell-title">拍摄地点</el-col>
-                    <el-col :span="4" class="table-cell-title">拍摄日期</el-col>
-                    <el-col :span="4" class="table-cell-title">拍摄时间</el-col>
-                    <el-col :span="4" class="table-cell-title">妆造服务</el-col>
-                    <el-col :span="4" class="table-cell-title">拍摄服务</el-col>
+                    <el-col :span="4.8" class="table-cell-title">订单编号</el-col>
+                    <el-col :span="4.8" class="table-cell-title">拍摄地点</el-col>
+                    <el-col :span="4.8" class="table-cell-title">拍摄日期</el-col>
+                    <el-col :span="4.8" class="table-cell-title">拍摄时间</el-col>
+                    <el-col :span="4.8" class="table-cell-title">妆造服务</el-col>
+<!--                    <el-col :span="4" class="table-cell-title">拍摄服务</el-col>-->
                 </el-row>
                 <el-row>
-                    <el-col :span="4" class="table-cell">{{ orderObj.orderNumber }}</el-col>
-                    <el-col :span="4" class="table-cell">{{ orderObj.isIndoors ? '室内' : '室外' }}</el-col>
-                    <el-col :span="4" class="table-cell">{{ orderObj.specificDate }}</el-col>
-                    <el-col :span="4" class="table-cell">{{ orderObj.timePoint }}</el-col>
-                    <el-col :span="4" class="table-cell">{{ orderObj.isMakeup ? '带妆造' : '不带妆造' }}</el-col>
-                    <el-col :span="4" class="table-cell">{{ orderObj.isPhotography ? '是' : '否' }}</el-col>
+                    <el-col :span="4.8" class="table-cell">{{ orderObj.orderNumber }}</el-col>
+                    <el-col :span="4.8" class="table-cell">{{ orderObj.isIndoors ? '室内' : '室外' }}</el-col>
+                    <el-col :span="4.8" class="table-cell">{{ orderObj.specificDate }}</el-col>
+                    <el-col :span="4.8" class="table-cell">{{ orderObj.timePoint }}</el-col>
+                    <el-col :span="4.8" class="table-cell">{{ orderObj.isMakeup ? '带妆造' : '不带妆造' }}</el-col>
+<!--                    <el-col :span="4" class="table-cell">{{ orderObj.isPhotography ? '是' : '否' }}</el-col>-->
                 </el-row>
             </div>
             <div style="margin-top: 20px">
@@ -141,6 +141,7 @@ const refund = async () => {  //退款方法
     width: 80%;
     padding: 20px 20px 20px 20px;
     margin: 20px auto;
+  min-width: 800px;
 }
 
 .operate-container {
@@ -173,6 +174,7 @@ const refund = async () => {  //退款方法
     text-align: center;
     font-size: 14px;
     color: #303133;
+  width: 20%;
 }
 
 .table-cell {
@@ -185,6 +187,7 @@ const refund = async () => {  //退款方法
     color: #606266;
     text-align: center;
     overflow: hidden;
+  width: 20%;
 }
 
 .table-cell-product {
diff --git a/src/views/OutfitLease/AddOutfit.vue b/src/views/OutfitLease/AddOutfit.vue
new file mode 100644
index 0000000..97ba9d4
--- /dev/null
+++ b/src/views/OutfitLease/AddOutfit.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="flexCard">
+    <el-card class="richTextPreview" shadow="never">
+      <div class="titleText">移动端预览</div>
+      <p v-html="previewRichText"></p>
+    </el-card>
+    <!-- 表单 ref 和 prop绑定  用于重置表单 -->
+    <el-card class="form-container" shadow="never" >
+      <div class="form">
+        <el-form ref="resetFormData" :model="form" size="large" >
+          <div>
+            <el-form-item label="服装图片">
+              <ImgSingleUpload @update:goodImgArr="form.image = $event"/>
+            </el-form-item>
+          </div>
+          <el-form-item label="服装名称">
+            <el-input v-model="form.name" maxlength="12" minlength="2" show-word-limit style="width: 260px;" />
+          </el-form-item>
+          <el-form-item label="服装类别" prop="type" style="width: 240px;">
+            <el-select v-model="form.categoryId" placeholder="请选择" >
+              <el-option v-for="item in typeList" :key="item" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="租赁天数">
+            <el-input-number v-model="form.period" min="0" :precision="0" :step="1" />
+          </el-form-item>
+          <el-form-item label="租赁价格">
+            <el-input-number v-model="form.price" min="0" :precision="2" :step="1" />
+          </el-form-item>
+          <el-form-item label="服装效果图">
+            <richTextUtil @richTextContent="getInfo"/>
+          </el-form-item>
+          <el-form-item label="是否上架">
+            <el-checkbox v-model="form.isShelves" label="上架" size="large" />
+          </el-form-item>
+          <div class="btnBox">
+            <el-form-item>
+              <el-button type="primary" @click="onSubmit" :disabled="saveBtn">保存</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="resetForm">重置</el-button>
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, inject } from 'vue';
+import { SuccessInfo, WarnInfo, CommInfo } from '@/utils/messageInfo';
+import myAxios from "@/api/myAxios";
+import { saveBtn, invInput } from '@/utils/entityProduct/globalVar';
+import ImgSingleUpload from "@/utils/imgUpload/ImgSingleUpload.vue";
+import richTextUtil from '@/layout/components/richTextUtil.vue';
+
+const resetFormData = ref()
+const reload: any = inject("reload")  //导入组件刷新
+const form : any = ref({   //添加实体类商品的表单
+  name: '',
+  categoryId: '',
+  price: 0,
+  period: 0,
+  image: '',
+  richText: '',
+  isShelves: false
+})
+const typeList : any = ref([])
+const previewRichText : any = ref('')
+
+onMounted(() => {
+  getOutfitType()
+})
+
+const getOutfitType = async () => {
+  const res= await myAxios.post('/clothesCategory/list/web')
+  // console.log(res.data)
+  if(res.data.code === 1) {
+    typeList.value = res.data.data
+  }
+}
+
+//提交表单
+const onSubmit = async () => {
+  // console.log('表单--->',form.value)
+  const values = Object.values(form.value );
+  // 使用some()方法来检查是否有任何值为空
+  if (values.some((value: any) => value === null || value === undefined || value === '') || form.value.period === 0 || form.value.price === 0) {
+    WarnInfo('请检查表单数据是否完整填写')
+    return;  //空返回结束函数
+  }
+  const res = await myAxios.post('/clothes/add', {
+    name: form.value.name,
+    categoryId: form.value.categoryId,
+    price: form.value.price,
+    period: form.value.period,
+    image: form.value.image,
+    richText: form.value.richText,
+    isShelves: form.value.isShelves ? 1 : 0
+  })
+  if (res.data.code === 1) {
+    SuccessInfo('提交成功')
+    form.value = {}
+    reload() //上传完后重置表单
+  } else {
+    WarnInfo('服务错误')
+    return;
+  }
+}
+
+//清除表单
+const resetForm = () => {
+  resetFormData.value.resetFields()
+}
+
+const getInfo = (info: any) => {  //富文本赋值
+  // console.log('info', info)
+  previewRichText.value = info
+  form.value.richText = encode64(info)
+}
+
+function encode64(text: string): string {
+  return btoa(String.fromCharCode(...new TextEncoder().encode(text)))
+}
+</script>
+
+<style scoped>
+.flexCard {
+  display: flex;
+  height: 100%;
+  min-width: 800px;
+  margin: 0 auto;
+}
+
+.richTextPreview {
+  height: 80vh;
+  overflow-y: auto;
+  word-break: break-all;
+  width: 400px;
+  margin-right: 10px;
+  min-width: 400px;
+}
+
+.form-container {
+  width: 700px;
+  /*margin: 0 auto;*/
+  height: 800px;
+  overflow: auto;
+}
+.form {
+  /* width: 500px; */
+  margin: 0 auto;
+}
+
+.btnBox {
+  display: flex;
+  justify-content: space-around;
+}
+
+.titleText {
+  text-align: center;
+  margin: 0 auto;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/OutfitLease/LeaseOrderDetail.vue b/src/views/OutfitLease/LeaseOrderDetail.vue
new file mode 100644
index 0000000..0ee6caf
--- /dev/null
+++ b/src/views/OutfitLease/LeaseOrderDetail.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="detail-container">
+    <el-card shadow="hover">
+      <div class="operate-container">
+        <i class="el-icon-warning color-danger" style="margin: 10px 10px 0 20px"><el-icon><WarnTriangleFilled /></el-icon></i>
+        <span class="color-danger">当前订单状态：{{ orderObj.orderStatus }}</span>
+        <div class="operate-button-container" v-show="orderObj.orderStatus === '待支付'">
+          <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
+                         title="确定要取消订单吗？" @confirm="cancelOrder" 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>
+            </template>
+          </el-popconfirm>
+        </div>
+        <div class="operate-button-container" v-show="orderObj.orderStatus === '待发货'">
+          <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
+                         title="确定要退款吗？" @confirm="refund" 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>
+            </template>
+          </el-popconfirm>
+        </div>
+      </div>
+      <div style="margin-top: 20px">
+        <el-icon><List /></el-icon>
+        <span class="font-small">基本信息</span>
+      </div>
+      <div class="table-layout">
+        <el-row>
+          <el-col :span="8" class="table-cell-title">订单编号</el-col>
+          <el-col :span="8" class="table-cell-title">租赁天数</el-col>
+          <el-col :span="8" class="table-cell-title">取货时间</el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8" class="table-cell">{{ orderObj.orderNumber }}</el-col>
+          <el-col :span="8" class="table-cell">{{ orderObj.rentDays }}</el-col>
+          <el-col :span="8" class="table-cell">{{ orderObj.pickupTime }}</el-col>
+        </el-row>
+      </div>
+      <div style="margin-top: 20px">
+        <el-icon><List /></el-icon>
+        <span class="font-small">收货人信息</span>
+      </div>
+      <div class="table-layout">
+        <el-row>
+          <el-col :span="12" class="table-cell-title">联系人</el-col>
+          <el-col :span="12" class="table-cell-title">手机号码</el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12" class="table-cell">{{ contactsSnapshot.name }}</el-col>
+          <el-col :span="12" class="table-cell">{{ contactsSnapshot.phone }}</el-col>
+        </el-row>
+      </div>
+      <div style="margin-top: 20px">
+        <el-icon><List /></el-icon>
+        <span class="font-small">服装信息</span>
+      </div>
+      <div class="table-layout">
+        <el-row>
+          <el-col :span="6" class="table-cell-title">服装图片</el-col>
+          <el-col :span="6" class="table-cell-title">服装名</el-col>
+          <el-col :span="6" class="table-cell-title">服装类别</el-col>
+          <el-col :span="6" class="table-cell-title">服装价格</el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="6" class="table-cell-product"><img :src="downloadUrl + clothesSnapshot.image"
+                                                            style="height: 70px; width: 70px;" alt=""></el-col>
+          <el-col :span="6" class="table-cell-product">{{ clothesSnapshot.name }}</el-col>
+          <el-col :span="6" class="table-cell-product">{{ categoryName }}</el-col>
+          <el-col :span="6" class="table-cell-product">{{ clothesSnapshot.price }}</el-col>
+        </el-row>
+      </div>
+      <div style="float: right;margin: 20px">
+        合计：<span class="color-danger">￥{{ totalAmount }}</span>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {onBeforeMount, onMounted, ref} from "vue";
+import myAxios from "@/api/myAxios";
+import { SuccessInfo, ErrorInfo } from "@/utils/messageInfo";
+import { useRoute } from "vue-router";
+import { downloadUrl } from '@/utils/formatImgUpload'
+
+const route = useRoute();
+const orderObj: any = ref({})  //订单对象
+const orderStatus = ref<String>() //订单状态
+const contactsSnapshot: any = ref({})  //联系人快照
+const clothesSnapshot: any = ref({}) //商品快照
+const totalAmount: any = ref(0) //订单总价
+const categoryName = ref('')  //显示的服装类别
+
+onBeforeMount(()=>{
+})
+
+onMounted(() => {
+  getOrderItem()
+})
+
+const getClothesType = async () => {   //获取服装类别信息
+  const res = await myAxios.post('/clothesCategory/list/web')
+  if(res.data.code === 1) {
+    res.data.data.forEach((item : any) => {
+      if(item.id === orderObj.value.clothesSnapshot.categoryId) {
+        categoryName.value = item.name
+        console.log('name--->',item)
+      }
+    })
+  }
+}
+
+const getOrderItem = async () => {  //获取订单详情
+  const oid = route.params.id //传递订单id
+  const res = await myAxios.post('/clothesRent/list', { id: oid })
+  // console.log('后端传来的值---->',res.data.data)
+  if (res.data.code === 1) {
+    orderObj.value = res.data.data.records[0];
+    orderStatus.value = res.data.data.records[0].orderStatus
+    contactsSnapshot.value = res.data.data.records[0].contactsSnapshot
+    clothesSnapshot.value = res.data.data.records[0].clothesSnapshot
+    totalAmount.value = res.data.data.records[0].totalAmount
+    await getClothesType()
+  }
+  console.log('orderObj.value', orderObj.value)
+}
+const cancelOrder = async () => {  //取消订单方法
+  const res = await myAxios.post('/advanceOrder/cancel/id', { id: route.params.id })
+  console.log(res);
+
+  if (res.data.code === 1) {
+    SuccessInfo('退款成功')
+    getOrderItem()
+  }
+}
+const refund = async () => {  //退款方法
+  const res = await myAxios.post('/wechat/refund/photo/create', { id: route.params.id })
+  if (res.data.code === 1) {
+    SuccessInfo('退款成功')
+    getOrderItem()
+  } else {
+    ErrorInfo('退款失败')
+  }
+}
+</script>
+
+<style scoped>
+.detail-container {
+  width: 80%;
+  padding: 20px 20px 20px 20px;
+  margin: 20px auto;
+  min-width: 800px;
+}
+
+.operate-container {
+  background: #F2F6FC;
+  height: 80px;
+  margin: -20px -20px 0;
+  line-height: 80px;
+}
+
+.color-danger {
+  color: red;
+}
+
+.operate-button-container {
+  float: right;
+  margin-right: 20px
+}
+
+.table-layout {
+  margin-top: 20px;
+  border-left: 1px solid #DCDFE6;
+  border-top: 1px solid #DCDFE6;
+}
+
+.table-cell-title {
+  border-right: 1px solid #DCDFE6;
+  border-bottom: 1px solid #DCDFE6;
+  padding: 10px;
+  background: #F2F6FC;
+  text-align: center;
+  font-size: 14px;
+  color: #303133;
+  width: 20%;
+}
+
+.table-cell {
+  height: 60px;
+  line-height: 40px;
+  border-right: 1px solid #DCDFE6;
+  border-bottom: 1px solid #DCDFE6;
+  padding: 10px;
+  font-size: 14px;
+  color: #606266;
+  text-align: center;
+  overflow: hidden;
+  width: 20%;
+}
+
+.table-cell-product {
+  height: 100px;
+  line-height: 80px;
+  border-right: 1px solid #DCDFE6;
+  border-bottom: 1px solid #DCDFE6;
+  padding: 10px;
+  font-size: 14px;
+  color: #606266;
+  text-align: center;
+  overflow: hidden;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/OutfitLease/LeaseOutfitCenter.vue b/src/views/OutfitLease/LeaseOutfitCenter.vue
new file mode 100644
index 0000000..7198bc8
--- /dev/null
+++ b/src/views/OutfitLease/LeaseOutfitCenter.vue
@@ -0,0 +1,279 @@
+<template>
+  <!-- 修改前请注释以前的 -->
+  <!-- 搜索 -->
+  <div class="table_page">
+    <div>
+      <el-input style="width: 240px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入服装名称"  size="default"
+                v-model="outfitName"></el-input>
+      <el-button type="primary" @click="onSearch(outfitName)" style="margin-right: 10px;" size="default">
+        搜索
+      </el-button>
+      <el-select v-model="outfitType" @change="(event: any) => searchByType(event)" placeholder="服装类别"
+                 style="width: 240px;  margin-right: 10px;" size="default" :clearable="true">
+<!--        <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"/>-->
+      </el-select>
+      <el-select v-model="state" placeholder="服装状态" @change="(event: any) => searchByState(event)" size="default"
+                 style="width: 240px;  margin-right: 10px;">
+        <el-option label="已上架" value="1"/>
+        <el-option label="已下架" value="0"/>
+      </el-select>
+      <el-button type="warning" @click="reset" size="default">重置</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>
+        <template #reference>
+          <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="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
+              @select="selectChange"
+              :header-cell-style="{ 'text-align': 'center' }">
+      <el-table-column type="selection" width="55"></el-table-column>
+      <el-table-column prop="id" label="服装编号" width="80">
+        <template #default="{ $index }">
+          {{ $index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="goodImg" label="服装图片">
+        <template #default="scope">
+          <div>
+            <img :src="downloadUrl + scope.row.image" alt="" style="height: 50px;">
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="名称"></el-table-column>
+      <el-table-column prop="price" label="价格" width="180">
+        <template #default="scope">
+          <div>
+            {{ scope.row.price }} 元
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="categoryId" label="服装类别">
+        <template #default="scope">
+          <div>
+            {{ outfitTypeMap.get(scope.row.categoryId) }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="period" 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>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="250px">
+        <template #default="scope">
+          <el-button size="small" @click="ReviseOrView(scope.row , 0)">
+            详情
+          </el-button>
+          <el-button size="small" @click="ReviseOrView(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>
+          <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>
+        </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"/>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElMessage } from 'element-plus';
+import {ref, onMounted, inject, onBeforeMount} from 'vue';
+import myAxios from "@/api/myAxios";
+import { useRouter } from "vue-router";
+import {downloadUrl} from '@/utils/formatImgUpload'
+import {WarnInfo} from "@/utils/messageInfo";
+
+const router = useRouter();  //路由
+const total = ref(0); //总页数
+const idList = ref<Number[]>([]);
+const searchParams: any = ref({ //封装分页
+  current: 1, //当前页码
+  pageSize: 5, //每页显示条数
+  sortField: "id",  //根据ID分类
+  sortOrder: "descend" //降序
+})
+const outfitName = ref('');
+const state = ref('');  //根据商品上架状态select栏
+const tableData: any = ref([]);  //实体类商品表格
+const reload: any = inject("reload")  //页面重新刷新
+const typeList: any = ref([
+  {
+    value: '',
+    label: ''
+  }
+])
+const outfitType = ref('') //商品类别
+const outfitTypeMap = new Map()
+
+onBeforeMount(()=>{
+  getOutfitList()
+  getTypeList()
+})
+
+onMounted(() => {
+  // console.log('map--->',outfitTypeMap)
+})
+const getOutfitList = async () => {
+  try {
+    const res = await myAxios.post('/clothes/list/page', {...searchParams.value});
+    console.log('res--->', res.data)
+    if (res.data.code === 1) {
+      tableData.value = res.data.data.records;
+      total.value = parseInt(res.data.data.total)  //总数据量，用于分页
+    } else {
+      ElMessage({
+        message: '获取数据失败',
+      });
+      return;
+    }
+  } catch (error) {
+    ElMessage({
+      message: '发生错误',
+    });
+  }
+}
+const getTypeList = async () => {
+  const res = await myAxios.post('/clothesCategory/list/web', {})  //获取商品列表
+  // console.log('类别--->',res.data)
+  for (let key in res.data.data) {     //循环赋值
+    typeList.value[key] = {
+      value: res.data.data[key].id,
+      label: res.data.data[key].name
+    }
+    outfitTypeMap.set(res.data.data[key].id, res.data.data[key].name);
+  }
+}
+
+const searchByType = (event: any) => { //通过类别搜索
+  searchParams.value.type = event
+  searchParams.value.current = 1
+  getOutfitList()
+}
+
+const searchByState = (event: any) => {  //通过商品是否上架/下架搜索
+  searchParams.value.isShelves = event
+  searchParams.value.current = 1
+  getOutfitList()
+}
+//删除商品
+const deleteProduct = async (index: number) => {
+  console.log(typeof index)
+  const res = await myAxios.post('/clothes/delete', {id: index})
+  // console.log(res)
+  if (res.data.code === 1) {
+    ElMessage({
+      type: 'success',
+      message: '删除成功',
+    })
+    await getOutfitList()
+  } else {
+    WarnInfo(res.data.message)
+  }
+  await getTypeList()
+}
+//详情或编辑
+const ReviseOrView = (row: any, flag: number) => {
+  router.push({
+    name: '租赁服装详情',
+    params: {
+      id: row.id,
+      flag: flag
+    }
+  })
+}
+
+//下架服装
+const handleOff = async (index: number, row: any) => {
+  // console.log('此商品--->',row)
+  row.isShelves ? row.isShelves = 0 : row.isShelves = 1  //三元运算符  改变那一行的上架值
+  const res = await myAxios.post('/clothes/shelves', {id: row.id})
+  if (res.data.code === 1) {
+    ElMessage({
+      type: 'success',
+      message: '更新成功'
+    })
+  }
+}
+
+//处理行数大小变化
+const handleSizeChange = (newSize: any) => {
+  searchParams.value.pageSize = newSize //新的页面数
+  getOutfitList()
+}
+//处理当前表格变化
+const handleCurrentChange = (Current: any) => {
+  searchParams.value.current = Current
+  getOutfitList()
+}
+//重置按钮
+const reset = () => {
+  reload()
+};
+
+//批量删除
+const delBatch = async () => {
+  console.log(idList.value);
+  const res = await myAxios.post('/clothes/delBatch', {
+    idList: idList.value
+  })
+  console.log(res.data);
+  if (res.data.code === 1) {
+    ElMessage({
+      type: 'success',
+      message: '批量删除成功'
+    })
+    getOutfitList()
+  } else {
+    ElMessage.error('删除失败')
+  }
+}
+const handleSelectionChange = () => {
+}
+const selectChange = (selection: any, row: any) => {   //selction是对象数组，row是当前行对象
+  idList.value.splice(0, idList.value.length)   //删掉
+  selection.forEach((item: any) => {
+    idList.value.push(item.id)
+  })
+  // console.log('idList--->',idList.value);
+}
+
+//查询
+const onSearch = (value: string) => {}
+</script>
+
+<style scoped>
+.table_page {
+  min-width: 1000px;
+  overflow: auto;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/OutfitLease/LeaseOutfitDetail.vue b/src/views/OutfitLease/LeaseOutfitDetail.vue
new file mode 100644
index 0000000..fe998c9
--- /dev/null
+++ b/src/views/OutfitLease/LeaseOutfitDetail.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="flexCard">
+    <el-card class="richTextPreview" shadow="never">
+      <div class="titleText">移动端预览</div>
+      <p v-html="previewRichText"></p>
+    </el-card>
+    <!-- 表单 ref 和 prop绑定  用于重置表单 -->
+    <el-card class="form-container" shadow="never" >
+      <div class="form">
+        <el-form ref="resetFormData" :model="form" size="large" :disabled="disabledRichText">
+          <div>
+            <el-form-item label="服装图片">
+              <PreviewSingleImgUpload :ImgUrlList="form.image" @update:goodImgArr="form.image = $event"/>
+            </el-form-item>
+          </div>
+          <el-form-item label="服装名称">
+            <el-input v-model="form.name" maxlength="12" minlength="2" show-word-limit style="width: 260px;" />
+          </el-form-item>
+          <el-form-item label="服装类别" prop="type" style="width: 240px;">
+            <el-select v-model="form.categoryId" placeholder="请选择" >
+              <el-option v-for="item in typeList" :key="item" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="租赁天数">
+            <el-input-number v-model="form.period" min="0" :precision="0" :step="1" />
+          </el-form-item>
+          <el-form-item label="租赁价格">
+            <el-input-number v-model="form.price" min="0" :precision="2" :step="1" />
+          </el-form-item>
+          <el-form-item label="服装效果图" v-loading="loading">
+            <richTextUtil @richTextContent="getInfo" v-model:disableRich="disabledRichText" v-model:context="previewRichText"/>
+          </el-form-item>
+          <el-form-item label="是否上架">
+            <el-checkbox v-model="form.isShelves" label="上架" size="large" />
+          </el-form-item>
+          <div class="btnBox">
+            <el-form-item>
+              <el-button type="primary" @click="onSubmit" :disabled="saveBtn">保存</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="resetForm">重置</el-button>
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, onMounted, inject, onBeforeMount} from 'vue';
+import { SuccessInfo, WarnInfo, CommInfo } from '@/utils/messageInfo';
+import myAxios from "@/api/myAxios";
+import { saveBtn, invInput } from '@/utils/entityProduct/globalVar';
+import richTextUtil from '@/layout/components/richTextUtil.vue';
+import PreviewSingleImgUpload from "@/utils/imgUpload/PreviewSingleImgUpload.vue";
+import {useRoute, useRouter} from "vue-router";
+
+const resetFormData = ref()
+const form : any = ref({})
+const typeList : any = ref([])
+const previewRichText : any = ref('')
+const disabledRichText = ref(false)
+const route = useRoute();  //路由
+const router = useRouter()
+const loading = ref(true)
+
+onBeforeMount(()=> {
+  if(route.params.flag === '0') {
+    disabledRichText.value = true
+  }
+  getLeaseOutfitInfo()
+})
+
+onMounted(() => {
+  getOutfitType()
+  setTimeout(()=>{
+    loading.value = false
+  },1500)
+})
+
+const getLeaseOutfitInfo = async () => {   //获取服装信息
+  const res = await myAxios.post('/clothes/query/id',{ id: route.params.id })
+  // console.log('服装详细信息--->',res.data.data)
+  if(res.data.code === 1) {
+    form.value = res.data.data
+    previewRichText.value = res.data.data.richText
+    res.data.data.isShelves ? form.value.isShelves = true : form.value.isShelves = false
+  }
+}
+
+const getOutfitType = async () => {
+  const res= await myAxios.post('/clothesCategory/list/web')
+  // console.log(res.data)
+  if(res.data.code === 1) {
+    typeList.value = res.data.data
+  }
+}
+
+//提交表单
+const onSubmit = async () => {
+  console.log('表单--->',form.value)
+  const values = Object.values(form.value );
+  // 使用some()方法来检查是否有任何值为空
+  if (values.some((value: any) => value === null || value === undefined || value === '') || form.value.period === 0 || form.value.price === 0) {
+    WarnInfo('请检查表单数据是否完整填写')
+    return;  //空返回结束函数
+  }
+  const res = await myAxios.post('/clothes/update', {
+    id: form.value.id,
+    name: form.value.name,
+    categoryId: form.value.categoryId,
+    price: form.value.price,
+    period: form.value.period,
+    image: form.value.image,
+    richText: form.value.richText,
+    isShelves: form.value.isShelves ? 1 : 0
+  })
+  if (res.data.code === 1) {
+    SuccessInfo('提交成功')
+    await router.replace('/LeaseOutfitCenter')
+  } else {
+    WarnInfo('服务错误')
+    return;
+  }
+}
+
+//清除表单
+const resetForm = () => {
+  resetFormData.value.resetFields()
+}
+
+const getInfo = (info: any) => {  //富文本赋值
+  // console.log('info', info)
+  previewRichText.value = info
+  form.value.richText = encode64(info)
+}
+
+function encode64(text: string): string {
+  return btoa(String.fromCharCode(...new TextEncoder().encode(text)))
+}
+</script>
+
+<style scoped>
+.flexCard {
+  display: flex;
+  height: 100%;
+  min-width: 800px;
+  margin: 0 auto;
+}
+
+.richTextPreview {
+  height: 80vh;
+  overflow-y: auto;
+  word-break: break-all;
+  width: 400px;
+  margin-right: 10px;
+  min-width: 400px;
+}
+
+.form-container {
+  width: 700px;
+  /*margin: 0 auto;*/
+  height: 800px;
+  overflow: auto;
+}
+.form {
+  /* width: 500px; */
+  margin: 0 auto;
+}
+
+.btnBox {
+  display: flex;
+  justify-content: space-around;
+}
+
+.titleText {
+  text-align: center;
+  margin: 0 auto;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/OutfitLease/OutfitLeaseOrderCenter.vue b/src/views/OutfitLease/OutfitLeaseOrderCenter.vue
new file mode 100644
index 0000000..f521fe2
--- /dev/null
+++ b/src/views/OutfitLease/OutfitLeaseOrderCenter.vue
@@ -0,0 +1,208 @@
+<template>
+  <div class="mianContent">
+  <div style="margin-bottom: 20px">
+    <el-input style="width: 250px; height: 30px; margin-right: 10px; font-size: 14px" suffix-icon="Search"
+              placeholder="请输入订单编号" v-model="orderNumber"></el-input>
+    <el-button class="ml-5" type="primary" @click="load" style="height: 30px;">搜索</el-button>
+    <el-button type="warning" @click="reset" style="height:30px">重置</el-button>
+  </div>
+  <!-- 数据展示层 -->
+  <el-table v-loading="loading" :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' }" :row-style="{ height: '70px' }">
+    <el-table-column prop="id" label="序号" width="50">
+      <template #default="{ $index }">
+        {{ $index + 1 }}
+      </template>
+    </el-table-column>
+    <el-table-column prop="orderNumber" label="订单编号" width="250"></el-table-column>
+    <el-table-column prop="" label="租赁天数">
+      <template #default="scope">
+        {{ scope.row.clothesSnapshot.period }}
+      </template>
+    </el-table-column>
+    <el-table-column prop="" label="用户名">
+      <template #default="scope">
+        {{ scope.row.contactsSnapshot.name }}
+      </template>
+    </el-table-column>
+    <el-table-column prop="" label="联系电话" width="150">
+      <template #default="scope">
+        {{ scope.row.contactsSnapshot.phone }}
+      </template>
+    </el-table-column>
+    <el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
+    <el-table-column prop="totalAmount" label="订单实付金额(元)" width="180"></el-table-column>
+    <el-table-column prop="orderStatus" label="订单状态">
+      <template #default="scope">
+        {{ scope.row.orderStatus === '待发货' ? '待取货' : '已取货' }}
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" width="260px" fixed="right">
+      <template #default="scope">
+        <el-button size="small" @click="showDetail(scope.row)">
+          详情
+        </el-button>
+        <el-popconfirm confirm-button-text='是' cancel-button-text='否' icon="InfoFilled" icon-color="red"
+                       title="是否取消订单？" @confirm="cancelOrder(scope.row)" width=180 v-if="['待支付'].includes(scope.row.orderStatus)">
+          <template #reference>
+            <el-button size="small" type="primary" plain>取消订单</el-button>
+          </template>
+        </el-popconfirm>
+        <el-popconfirm confirm-button-text='是' cancel-button-text='否' icon="InfoFilled" icon-color="red"
+                       title="服装是否移交客户？" @confirm="changeOrderStatus(scope.row,'待收货')" width=180 v-if="['待发货'].includes(scope.row.orderStatus)">
+          <template #reference>
+            <el-button size="small" type="primary" plain>用户已取货</el-button>
+          </template>
+        </el-popconfirm>
+        <el-popconfirm confirm-button-text='是' cancel-button-text='否' icon="InfoFilled" icon-color="red"
+                       title="租赁是否完成？" @confirm="changeOrderStatus(scope.row,'交易完成')" width=180 v-if="['待收货'].includes(scope.row.orderStatus)">
+          <template #reference>
+            <el-button size="small" type="primary" plain>租赁完成</el-button>
+          </template>
+        </el-popconfirm>
+        <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
+                       title="确定要退款吗？" @confirm="deleteOrder(scope.row)" width=180>
+          <template #reference>
+            <el-button v-if="['待发货','待收货'].includes(scope.row.orderStatus)" size="small" type="danger" plain>退款</el-button>
+          </template>
+        </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" />
+  </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import myAxios from "@/api/myAxios";
+import { ElMessage } from "element-plus";
+import {SuccessInfo, ErrorInfo, WarnInfo} from "@/utils/messageInfo";
+import { useRouter, useRoute } from "vue-router";
+import emitter from "@/utils/emitter";
+const tableData: any = ref([]);  //表单展示数据
+const total = ref(0);
+const orderNumber = ref('')
+const searchParams: any = ref({ //封装分页
+  current: 1, //当前页码
+  pageSize: 5, //每页显示条数
+  sortField: "id",  //根据ID分类
+  sortOrder: "descend", //降序
+  orderType: 'service'
+})
+const router = useRouter()
+const loading = ref(false)
+onMounted(() => {
+  getOrderList()  //页面加载获取订单列表
+})
+
+const handleSizeChange = (newSize: any) => {
+  searchParams.value.pageSize = newSize //新的页面数
+  getOrderList()
+}
+
+const handleCurrentChange = (Current: any) => {
+  searchParams.value.current = Current
+  getOrderList()
+}
+const handleSelectionChange = (row: any) => {
+  // id.value = JSON.parse(JSON.stringify(row));
+}
+//获取写真预约订单列表
+const getOrderList = async () => {
+  try {
+    searchParams.value.orderNumber = orderNumber.value
+    const res = await myAxios.post('/clothesRent/list', { ...searchParams.value });
+    console.log('订单信息--->', res.data.data);
+    if (res.data.code === 1) {
+      tableData.value = res.data.data.records;
+      total.value = parseInt(res.data.data.total)
+      // console.log('表单信息--->', tableData.value);
+    } else {
+      ElMessage({
+        message: '获取数据失败',
+      });
+    }
+  } catch (error) {
+    ElMessage({
+      message: '发生错误',
+    });
+  }
+}
+//查看订单详情
+const showDetail = (row: any) => {
+  router.push({   //不会将参数显示到地址栏中,这么做要修改routes中对应的path
+    name: '租赁订单详情',
+    params: {
+      id: row.id
+    }
+  })
+};
+const changeOrderStatus = async (row: any, msg : string) => {   //改变订单状态
+  const res = await myAxios.post('/clothesRent/update/orderStatus',{
+    id: row.id,
+    orderStatus: msg
+  })
+  if(res.data.code === 1) {
+    await getOrderList()
+    SuccessInfo('更新成功')
+  } else {
+    WarnInfo(res.data.message)
+  }
+}
+const deleteOrder = async (row: any) => {  //微信退款
+  loading.value = true
+  console.log('row-->', row)
+  const res = await myAxios.post('/wechat/refund/create', { id: row.id })   //传入订单号取消订单并退款
+  console.log(res)
+  setTimeout(() => {
+    if (res.data.code === 1) {
+      SuccessInfo('退款成功')
+      getOrderList()
+      loading.value = false
+    }
+  }, 10000)
+}
+const reset = () => {  //重置搜索框
+  orderNumber.value = ''
+};
+const load = () => {
+  getOrderList()
+}  //搜索的方法
+const cancelOrder = async (row: any) => {  //取消订单的方法(未支付能取消)
+  console.log('点击的这一行--->', row);
+  const res = await myAxios.post('/order/cancel/id', { id: row.id })
+  if (res.data.code === 1) {
+    getOrderList()
+    SuccessInfo('取消订单成功')
+  } else {
+    ErrorInfo('请求错误')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+/* 使用 ::v-deep 来修改表头的对齐方式 */
+::v-deep .el-table__header th {
+  text-align: center;
+  /* 表头居中 */
+  font-size: 14px;
+  /* 设置字体大小 */
+  font-weight: bold;
+  /* 设置字体加粗 */
+  font-family: 'Arial', sans-serif;
+  /* 设置字体 */
+}
+
+.mianContent {
+  width: 100%;
+  min-width: 1000px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/OutfitLease/OutfitType.vue b/src/views/OutfitLease/OutfitType.vue
new file mode 100644
index 0000000..ea7c87e
--- /dev/null
+++ b/src/views/OutfitLease/OutfitType.vue
@@ -0,0 +1,153 @@
+<template>
+  <div style="margin-bottom: 10px;">
+    <el-button type="success" @click="showForm">添加类别</el-button>
+  </div>
+  <el-dialog v-model="dialogVisible" title="服装类别" width="500">
+    <el-form :model="typeForm" label-width="auto" style="max-width: 600px" v-loading="loading">
+      <el-form-item label="类别名" size="large">
+        <el-input v-model="typeForm.name" />
+      </el-form-item>
+    </el-form>
+    <template #footer #default="{ row, $index }">
+      <div class="dialog-footer">
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="addOrUpdateType" >
+          提交
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  <!-- 数据展示层 -->
+  <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="类别编号"></el-table-column>
+    <el-table-column prop="name" label="类别名称"></el-table-column>
+    <el-table-column prop="operation" label="操作">
+      <template #default="scope">
+        <el-button type="success" @click="editShowForm(scope.$index, scope.row)">修改类别</el-button>
+        <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
+                       title="是否确认删除" @confirm="Delete_type(scope.row.id)" width=180>
+          <template #reference>
+            <el-button style="height: 25px" class="ml-5" type="danger">删除类别</el-button>
+          </template>
+        </el-popconfirm>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script setup lang="ts">
+import { ElMessage } from 'element-plus';
+import { ErrorInfo, SuccessInfo } from '@/utils/messageInfo';
+import { onMounted, ref } from 'vue'
+import myAxios from '@/api/myAxios';
+const selectedItems = ref([])
+const dialogVisible = ref(false)
+const loading = ref(false)  //加载
+
+//表单数据
+const typeForm = ref({
+  id: 0,
+  name: ''
+})
+//表格数据
+const tableData = ref([])
+const flag = ref(0)
+onMounted(() => {
+  getTypeList()
+})
+//获取服装类别列表
+const getTypeList = async () => {
+  const res = await myAxios.post('/clothesCategory/list/web')
+  // console.log(res.data.data)
+  if (res.data.code === 1) {
+    tableData.value = res.data.data
+  } else {
+    ElMessage.error('获取类别列表失败，请检查服务')
+  }
+}
+//新增类别
+const showForm = async () => {
+  resetForm()
+  dialogVisible.value = true;
+  flag.value = 0
+}
+//取消
+const cancel = () => {
+  dialogVisible.value = false
+  resetForm()
+}
+//新增类别
+const addOrUpdateType = async () => {
+  if (typeForm.value.name?.indexOf(' ') !== -1 ||
+      typeForm.value.name == '' ) {
+    ElMessage({
+      type: 'warning',
+      message: '不能为空格/空字符串'
+    })
+    return
+  }
+  //取消展示表单
+  dialogVisible.value = false;
+  if (flag.value === 0) {
+    const res = await myAxios.post('/clothesCategory/add', {
+      name: typeForm.value.name
+    })
+    if (res.data.code === 1) {
+      //提交成功后，之间重置表格
+      resetForm()
+      SuccessInfo('添加成功')
+    } else {
+      ElMessage.error('提交失败')
+    }
+  }
+  if( flag.value === 1 ) {
+    const res = await myAxios.post('/clothesCategory/update',{
+      id : typeForm.value.id,
+      name: typeForm.value.name
+    })
+    if (res.data.code === 1) {
+      //提交成功后，之间重置表格
+      ElMessage({
+        type: 'success',
+        message: '更新成功'
+      })
+    } else {
+      ElMessage.error('更新失败')
+    }
+  }
+  getTypeList()
+}
+//重置表单
+const resetForm = () => {
+  typeForm.value = {
+    id: 0,
+    name: ''
+  }
+};
+const handleSelectionChange = (row: any) => {
+  selectedItems.value = JSON.parse(JSON.stringify(row))
+}
+//编辑
+const editShowForm = (index: number, row: any) => {
+  dialogVisible.value = true
+  typeForm.value = JSON.parse(JSON.stringify(row))
+  flag.value = 1
+  // console.log('本行--->',row)
+}
+//删除类别  请求体里只传id即可
+const Delete_type = async (index: number) => {
+  const res = await myAxios.post('/clothesCategory/delete', { id: index })
+  // console.log(res)
+  if (res.data.code === 1) {
+    ElMessage({
+      type: 'success',
+      message: '删除成功',
+    })
+  }
+  await getTypeList()
+}
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/views/ServiceType/AddServiceProduct.vue b/src/views/ServiceType/AddServiceProduct.vue
index f084483..526ff83 100644
--- a/src/views/ServiceType/AddServiceProduct.vue
+++ b/src/views/ServiceType/AddServiceProduct.vue
@@ -7,7 +7,7 @@
       <!-- 表单 ref 和 prop绑定  用于重置表单 -->
       <el-card class="form-FormContainer" shadow="never">
       <el-form ref="resetFormData" :model="form"  size="large">
-        <el-form-item label="添加课程展示图片" label-width="auto">
+        <el-form-item label="课程展示图片" label-width="auto">
           <ImgSingleUpload @update:goodImgArr="form.goodImg = $event"/>
         </el-form-item>
         <el-form-item label="体验课名称" prop="name" style="width:  250px" >
@@ -36,10 +36,11 @@
         </div>
       </el-form>
       </el-card>
+    <div class="diyConponent">
     <el-card class="form-RichTextContainer" shadow="never">
       <calendarUtil @calendar-info="getDateInfo"></calendarUtil>
     </el-card>
-
+    </div>
   </div>
 </template>
 
@@ -131,18 +132,25 @@ const getDateInfo =(info: any)=> {
 <style scoped>
 
 .form-FormContainer {
-  width: 600px;
+  width: 540px;
   height: 800px;
   overflow: auto;
-  min-width: 600px;
+  min-width: 540px;
   /* margin: 0 auto; */
 }
 
 .form-RichTextContainer {
-  width: 550px;
-  min-width: 550px;
+  width: 460px;
+  min-width: 460px;
+  height: 800px;
+  overflow: auto;
 }
 
+.diyConponent /deep/ .el-card__body {
+  padding: 20px 0 10px 0 !important;
+}
+
+
 .flexCard {
   display: flex;
   height: 100%;
diff --git a/src/views/ServiceType/ProductCenter.vue b/src/views/ServiceType/ProductCenter.vue
index 12e713a..4987777 100644
--- a/src/views/ServiceType/ProductCenter.vue
+++ b/src/views/ServiceType/ProductCenter.vue
@@ -160,8 +160,8 @@
   <!-- 添加日期弹窗 -->
   <el-dialog
     v-model="addDateVisible"
-    title="添加日期" 
-    width="800"
+    title="添加日期"
+    width="500"
     >
     <calendarUtil @calendar-info="handleCalendarInfo"></calendarUtil>
     <template #footer>
@@ -176,7 +176,7 @@
 </template>
 
 <script setup lang="ts">
-import { ElMessage , type UploadProps , genFileId ,type UploadRawFile  } from 'element-plus';
+import { ElMessage } from 'element-plus';
 import {ref, onMounted, inject} from 'vue';
 import myAxios from "@/api/myAxios";
 import calendarUtil from '@/layout/components/calendarUtil.vue';