1.0web商城实体类业务流程完成

src/views/CostumeAppointments/timeManagement.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <!-- <div> -->
     <!--    <el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px" size="large">-->
     <!--      <el-form-item label="服装类别" prop="type">-->
     <!--        <el-select v-model="typeList.value" placeholder="请选择" @change="(event: any) => loadType(event)">-->
@@ -13,7 +13,7 @@
     <!--      </el-form-item>-->
     <!--    </el-form>-->
 
-    <el-calendar :disabled-date="disabledDate" class="disabledDate">
+    <!-- <el-calendar :disabled-date="disabledDate" class="disabledDate">
       <template #date-cell="{ data }">
         <p
             :class="[
@@ -27,9 +27,9 @@
           <span v-if="selectedDates.includes(data.day)">✔️</span>
         </p>
       </template>
-    </el-calendar>
+    </el-calendar> -->
     <!--抽屉-->
-    <el-drawer
+    <!-- <el-drawer
         v-for="(drawerInfo, date) in dateDrawerData"
         :key="date"
         v-model="drawerInfo.visible"
@@ -51,134 +51,134 @@
   </el-form-item>
   <el-form-item>
     <el-button type="primary" @click="resetForm">重置</el-button>
-  </el-form-item>
+  </el-form-item> -->
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
-import { ElButton, ElTimePicker, ElDrawer } from 'element-plus'
-import myAxios from "@/api/myAxios"
+// import { ref, onMounted } from 'vue'
+// import { ElButton, ElTimePicker, ElDrawer } from 'element-plus'
+// import myAxios from "@/api/myAxios"
 
-const dateDrawerData = ref<{
-  visible: boolean
-  timeDataList: { value1: string; value2: [Date, Date] }[]
-}>({})
+// const dateDrawerData = ref<{
+//   visible: boolean
+//   timeDataList: { value1: string; value2: [Date, Date] }[]
+// }>({})
 
-const addTimePickers = (date: string) => {
-  if (!dateDrawerData.value[date]) {
-    dateDrawerData.value[date] = {
-      visible: false,
-      timeDataList: []
-    }
-  }
-  dateDrawerData.value[date].timeDataList.push({
-    value1: '',
-    value2: [new Date(), new Date()]
-  })
-}
+// const addTimePickers = (date: string) => {
+//   if (!dateDrawerData.value[date]) {
+//     dateDrawerData.value[date] = {
+//       visible: false,
+//       timeDataList: []
+//     }
+//   }
+//   dateDrawerData.value[date].timeDataList.push({
+//     value1: '',
+//     value2: [new Date(), new Date()]
+//   })
+// }
 
-const deleteTimePicker = (index: number, date: string) => {
-  if (dateDrawerData.value[date]) {
-    dateDrawerData.value[date].timeDataList.splice(index, 1)
-  }
-}
+// const deleteTimePicker = (index: number, date: string) => {
+//   if (dateDrawerData.value[date]) {
+//     dateDrawerData.value[date].timeDataList.splice(index, 1)
+//   }
+// }
 
-const printSelectedTimePeriods = (date: string) => {
-  if (dateDrawerData.value[date]) {
-    const selectedTimePeriods = dateDrawerData.value[date].timeDataList.map((timeData) => {
-      return {
-        time1: timeData.value1
-      }
-    })
-    console.log(selectedTimePeriods);
-  }
-}
+// const printSelectedTimePeriods = (date: string) => {
+//   if (dateDrawerData.value[date]) {
+//     const selectedTimePeriods = dateDrawerData.value[date].timeDataList.map((timeData) => {
+//       return {
+//         time1: timeData.value1
+//       }
+//     })
+//     console.log(selectedTimePeriods);
+//   }
+// }
 
-const selectedDates = ref<string[]>([])
-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 selectedDates = ref<string[]>([])
+// 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 isFutureDate = (date: any) => {
+//   const today = new Date().toISOString().split('T')[0]
+//   return date >= today
+// }
 
-const handleDateClick = (date: any) => {
-  const dateStr = date
-  if (isFutureDate(dateStr)) {
-    if (selectedDates.value.includes(dateStr)) {
-      selectedDates.value = selectedDates.value.filter(d => d!== dateStr)
-    } else {
-      selectedDates.value.push(dateStr)
-      if (!dateDrawerData.value[dateStr]) {
-        dateDrawerData.value[dateStr] = {
-          visible: true,
-          timeDataList: []
-        }
-      } else {
-        dateDrawerData.value[dateStr].visible = true;
-      }
-    }
-  }
-}
+// const handleDateClick = (date: any) => {
+//   const dateStr = date
+//   if (isFutureDate(dateStr)) {
+//     if (selectedDates.value.includes(dateStr)) {
+//       selectedDates.value = selectedDates.value.filter(d => d!== dateStr)
+//     } else {
+//       selectedDates.value.push(dateStr)
+//       if (!dateDrawerData.value[dateStr]) {
+//         dateDrawerData.value[dateStr] = {
+//           visible: true,
+//           timeDataList: []
+//         }
+//       } else {
+//         dateDrawerData.value[dateStr].visible = true;
+//       }
+//     }
+//   }
+// }
 
-onMounted(() => {
-  getType();
-})
+// onMounted(() => {
+//   getType();
+// })
 
-const form = ref({
-  type: '',
-  name: ''
-})
+// const form = ref({
+//   type: '',
+//   name: ''
+// })
 
 
-const typeList = ref<{ type: string; label: string }[]>([])
+// const typeList = ref<{ type: string; label: string }[]>([])
 
-const getType = async () => {
-  const res = await myAxios.post('/clothesGrade/list', {})
-  typeList.value = res.data.data.map((item: any) => ({
-    type: item.clothesType,
-    label: item.clothesType
-  }))
-}
+// const getType = async () => {
+//   const res = await myAxios.post('/clothesGrade/list', {})
+//   typeList.value = res.data.data.map((item: any) => ({
+//     type: item.clothesType,
+//     label: item.clothesType
+//   }))
+// }
 
-const nameList = ref<{ name: string; label: string }[]>([])
+// const nameList = ref<{ name: string; label: string }[]>([])
 
-const loadType = (value: any) => {
-  form.value.type = value
-  getName()
+// const loadType = (value: any) => {
+//   form.value.type = value
+//   getName()
 
-}
-const loadName = (value: any) => {
+// }
+// const loadName = (value: any) => {
 
-  form.value.name = value;
-}
+//   form.value.name = value;
+// }
 
-const getName = async () => {
-  const selectedType = form.value.type;
-  const res = await myAxios.post('/clothesInfo/list/page', {
-    clothesType: selectedType
-  })
-  console.log(selectedType, '1111111111111');
-  nameList.value = res.data.data.records.map((item: any) => ({
-    name: item.name,
-    label: item.name
-  }))
-}
+// const getName = async () => {
+//   const selectedType = form.value.type;
+//   const res = await myAxios.post('/clothesInfo/list/page', {
+//     clothesType: selectedType
+//   })
+//   console.log(selectedType, '1111111111111');
+//   nameList.value = res.data.data.records.map((item: any) => ({
+//     name: item.name,
+//     label: item.name
+//   }))
+// }
 
-//提交
-const onSubmit = () => {
+// //提交
+// const onSubmit = () => {
 
-}
+// }
 
-//重置
-const resetForm = () => {
+// //重置
+// const resetForm = () => {
 
-}
+// }
 </script>
 
 <style scoped>

src/views/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <!-- <div> -->
 <!--    <el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px" size="large">-->
 <!--      <el-form-item label="服装类别" prop="type">-->
 <!--        <el-select v-model="typeList.value" placeholder="请选择" @change="(event: any) => loadType(event)">-->
@@ -13,7 +13,7 @@
 <!--      </el-form-item>-->
 <!--    </el-form>-->
 
-    <el-calendar :disabled-date="disabledDate" class="disabledDate">
+    <!-- <el-calendar :disabled-date="disabledDate" class="disabledDate">
       <template #date-cell="{ data }">
         <p
             :class="[
@@ -27,9 +27,9 @@
           <span v-if="selectedDates.includes(data.day)">✔️</span>
         </p>
       </template>
-    </el-calendar>
+    </el-calendar> -->
     <!--抽屉-->
-    <el-drawer
+    <!-- <el-drawer
         v-for="(drawerInfo, date) in dateDrawerData"
         :key="date"
         v-model="drawerInfo.visible"
@@ -51,7 +51,7 @@
   </el-form-item>
   <el-form-item>
     <el-button type="primary" @click="resetForm">重置</el-button>
-  </el-form-item>
+  </el-form-item> -->
 </template>
 
 <script lang="ts" setup>
@@ -59,40 +59,40 @@ import { ref, onMounted } from 'vue'
 import { ElButton, ElTimePicker, ElDrawer } from 'element-plus'
 import myAxios from "@/api/myAxios"
 
-const dateDrawerData = ref<{
-  visible: boolean
-  timeDataList: { value1: string; value2: [Date, Date] }[]
-}>({})
+// const dateDrawerData = ref<{
+//   visible: boolean
+//   timeDataList: { value1: string; value2: [Date, Date] }[]
+// }>({})
 
-const addTimePickers = (date: string) => {
-  if (!dateDrawerData.value[date]) {
-    dateDrawerData.value[date] = {
-      visible: false,
-      timeDataList: []
-    }
-  }
-  dateDrawerData.value[date].timeDataList.push({
-    value1: '',
-    value2: [new Date(), new Date()]
-  })
-}
+// const addTimePickers = (date: string) => {
+//   if (!dateDrawerData.value[date]) {
+//     dateDrawerData.value[date] = {
+//       visible: false,
+//       timeDataList: []
+//     }
+//   }
+//   dateDrawerData.value[date].timeDataList.push({
+//     value1: '',
+//     value2: [new Date(), new Date()]
+//   })
+// }
 
-const deleteTimePicker = (index: number, date: string) => {
-  if (dateDrawerData.value[date]) {
-    dateDrawerData.value[date].timeDataList.splice(index, 1)
-  }
-}
+// const deleteTimePicker = (index: number, date: string) => {
+//   if (dateDrawerData.value[date]) {
+//     dateDrawerData.value[date].timeDataList.splice(index, 1)
+//   }
+// }
 
-const printSelectedTimePeriods = (date: string) => {
-  if (dateDrawerData.value[date]) {
-    const selectedTimePeriods = dateDrawerData.value[date].timeDataList.map((timeData) => {
-      return {
-        time1: timeData.value1
-      }
-    })
-    console.log(selectedTimePeriods);
-  }
-}
+// const printSelectedTimePeriods = (date: string) => {
+//   if (dateDrawerData.value[date]) {
+//     const selectedTimePeriods = dateDrawerData.value[date].timeDataList.map((timeData) => {
+//       return {
+//         time1: timeData.value1
+//       }
+//     })
+//     console.log(selectedTimePeriods);
+//   }
+// }
 
 const selectedDates = ref<string[]>([])
 const disabledDate = (date: any) => {
@@ -107,24 +107,24 @@ const isFutureDate = (date: any) => {
   return date >= today
 }
 
-const handleDateClick = (date: any) => {
-  const dateStr = date
-  if (isFutureDate(dateStr)) {
-    if (selectedDates.value.includes(dateStr)) {
-      selectedDates.value = selectedDates.value.filter(d => d!== dateStr)
-    } else {
-      selectedDates.value.push(dateStr)
-      if (!dateDrawerData.value[dateStr]) {
-        dateDrawerData.value[dateStr] = {
-          visible: true,
-          timeDataList: []
-        }
-      } else {
-        dateDrawerData.value[dateStr].visible = true;
-      }
-    }
-  }
-}
+// const handleDateClick = (date: any) => {
+//   const dateStr = date
+//   if (isFutureDate(dateStr)) {
+//     if (selectedDates.value.includes(dateStr)) {
+//       selectedDates.value = selectedDates.value.filter(d => d!== dateStr)
+//     } else {
+//       selectedDates.value.push(dateStr)
+//       if (!dateDrawerData.value[dateStr]) {
+//         dateDrawerData.value[dateStr] = {
+//           visible: true,
+//           timeDataList: []
+//         }
+//       } else {
+//         dateDrawerData.value[dateStr].visible = true;
+//       }
+//     }
+//   }
+// }
 
 onMounted(() => {
   getType();

src/views/Orders/OrderList.vue

@@ -6,7 +6,7 @@
     <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
   </div>
   <!-- 数据展示层 -->
-  <el-table :data="tableData" border stripe header-cell-class-name="headerBg"
+  <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' }">
     <el-table-column type="selection" width="55" fixed="left"></el-table-column>
@@ -26,7 +26,7 @@
             <el-table-column label="商品图片" prop="goodSnapshot.goodImg">
               <template #default="scope">
                 <div>
-                  <img :src="scope.row.goodSnapshot.goodImg" alt="" style="height: 50px;">
+                  <img :src="scope.row.goodSnapshot.goodImg.split(';')[0]" alt="" style="height: 50px;">
                 </div>
               </template>
             </el-table-column>
@@ -51,21 +51,25 @@
     </el-table-column>
     <el-table-column prop="totalAmount" label="订单总金额"></el-table-column>
     <el-table-column prop="orderStatus" label="订单状态"></el-table-column>
-    <el-table-column prop="orderStatus" label="快递单号"></el-table-column>
+    <el-table-column prop="trackingNumber" label="快递单号"></el-table-column>
     <el-table-column label="操作" width="220px" fixed="right">
       <template #default="scope">
         <el-button size="small" @click="showDetail(scope.$index, scope.row)">
           详情
         </el-button>
-     <el-button size="small" @click="openShipmentDialog(scope.row.id)"  > <!--   @click="deliverGoods(scope.row)"-->
+     <el-button :disabled="!['待发货'].includes(scope.row.orderStatus)" size="small" @click="openShipmentDialog(scope.row.id)"  > <!--   @click="deliverGoods(scope.row)"-->
           发货
         </el-button>
-        <el-button      :disabled="!['待支付', '待发货'].includes(scope.row.orderStatus)" size="small" @click="deleteOrder(scope.row)" type="warning" plain>
+        <el-button :disabled="!['待支付'].includes(scope.row.orderStatus)" size="small" @click="cancelOrder(scope.row)" type="warning" plain>
           取消订单
         </el-button>
+        <el-button :disabled="!['待发货'].includes(scope.row.orderStatus)" size="small" @click="deleteOrder(scope.row)" type="danger" plain>
+          退款
+        </el-button>
       </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]"
@@ -104,7 +108,7 @@
         </el-form-item>
       </div>
       <el-form-item label="快递单号" style="width: 300px">
-        <!-- <el-input v-model="editForm.totalAmount" autocomplete="off"></el-input> -->
+        <el-input v-model="editForm.trackingNumber" autocomplete="off"></el-input>
       </el-form-item>
       <div style="display: flex">
         <el-form-item label="创建时间"  style="width: 300px;">
@@ -143,6 +147,7 @@
 import { onMounted, ref } from "vue";
 import myAxios from "@/api/myAxios";
 import { ElMessage } from "element-plus";
+import { SuccessInfo , ErrorInfo } from "@/utils/messageInfo";
 const tableData: any = ref([]);  //表单展示数据
 const total = ref(0);
 const title = ref('')
@@ -154,17 +159,13 @@ const shipment:any = ref({
 const DialogVisible = ref(false); //详情展示
 const shipments = ref(false)
 const name = ref('')
-const searchParams: any = ref({ //封装分页
+const searchParams: any = ref({ //封装分页 
   current: 1, //当前页码
   pageSize: 5, //每页显示条数
   sortField: "id",  //根据ID分类
   sortOrder: "descend" //降序
 })
-const id = ref({})
-const num = ref(0)
-const orderDetail: any = ref([])  //订单中的商品明细，多个商品
-//订单列表
-const orderList = ref([{}])
+const loading = ref(false)
 onMounted(() => {
   getOrderList()  //页面加载获取订单列表
 })
@@ -187,7 +188,7 @@ const getOrderList = async () => {
     if (res.data.code === 1) {
       tableData.value = res.data.data.records;
       total.value = parseInt(res.data.data.total)
-      // console.log('表单信息--->', tableData.value);
+      console.log('表单信息--->', tableData.value);
     } else {
       ElMessage({
         message: '获取数据失败',
@@ -212,8 +213,7 @@ const openShipmentDialog = (id: number) => {
   shipments.value = true;
   currentId.value = id;
 }
-
-const deliverGoods = async () => {
+const deliverGoods = async () => {  //发货方法
   if (currentId.value) {
     const res = await myAxios.post('/order/update', {
       id: currentId.value,
@@ -231,25 +231,32 @@ const deliverGoods = async () => {
   }
   shipments.value = false;
 }
-const deleteOrder = async (row : any) => {  //取消订单+微信退款
-  console.log('row-->',row.id)
+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)
-  if (res.data.code === 1) {
-    ElMessage({
-      type: 'success',
-      message: '退款成功',
-    })
-    getOrderList()
-  }
+  setTimeout(()=>{
+    if(res.data.code === 1) {
+      SuccessInfo('退款成功')
+      getOrderList()
+      loading.value = false
+    }
+  },10000)
 }
-const reset = () => {
+const reset = () => {  //重置搜索框
   name.value = '';
 };
-const load = () => { }
-//保存订单状态
-const save =()=>{
-
+const load = () => { }  //搜索的方法
+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>