路由配置

src/api/myAxios.ts

@@ -4,8 +4,8 @@ import router from '../router'
 
 const myAxios = axios.create({
     withCredentials:true,
-    // baseURL: 'http://localhost:9092/api'
-    baseURL: 'http://123.249.108.160:8888/api' //测试服务器
+    baseURL: 'http://localhost:9092/api'
+    // baseURL: 'http://123.249.108.160:8888/api' //测试服务器
 });
 // 添加请求拦截器
 axios.interceptors.request.use(function (config) {

src/router/routes.ts

@@ -237,10 +237,10 @@ export const constantRoute  = [
             },
             {
                 path: '/ManagementCenter',
-                name: '写真产品详情',
+                name: '写真产品中心',
                 component: ()=> import("@/views/CostumeAppointments/ManagementCenter.vue"),
                 meta: { 
-                    title: '写真产品详情' ,
+                    title: '写真产品中心' ,
                     icon: 'Tickets',
                     hidden: false
                 }
@@ -256,7 +256,7 @@ export const constantRoute  = [
                 }
             },
             {
-                path: '/OutfitOrderDetail',
+                path: '/OutfitOrderDetail/:id',
                 name: '写真预约订单详情',
                 component: ()=> import("@/views/CostumeAppointments/OutfitOrderDetail.vue"),
                 meta: { 

src/views/CostumeAppointments/AppointmentOrder.vue

@@ -1,7 +1,7 @@
 <template>
   <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-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>
@@ -24,9 +24,12 @@
         <el-button size="small" @click="showDetail(scope.row)">
           详情
         </el-button>
-        <el-button :disabled="!['待发货'].includes(scope.row.orderStatus)" size="small" @click="deleteOrder(scope.row)" type="danger" plain>
-          退款
-        </el-button>
+        <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
+          title="确定要退款吗？" @confirm="deleteOrder(scope.row)" width=180>
+          <template #reference>
+            <el-button :disabled="!['待发货'].includes(scope.row.orderStatus)" size="small" type="danger" plain>退款</el-button>
+          </template>
+        </el-popconfirm>
       </template>
     </el-table-column>
   </el-table>
@@ -94,11 +97,13 @@ const getOrderList = async () => {
     });
   }
 }
-
 //查看订单详情
 const showDetail = (row: any) => {
-  router.push({
-    path: '/OutfitOrderDetail'
+  router.push({   //不会将参数显示到地址栏中,这么做要修改routes中对应的path
+    name: '写真预约订单详情',
+    params: {
+      id: row.id
+    }
   })
 };
 const deleteOrder = async (row: any) => {  //微信退款
@@ -135,9 +140,13 @@ const cancelOrder = async (row:any)=>{  //取消订单的方法(未支付能取
 <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; /* 设置字体 */
+  text-align: center;
+  /* 表头居中 */
+  font-size: 14px;
+  /* 设置字体大小 */
+  font-weight: bold;
+  /* 设置字体加粗 */
+  font-family: 'Arial', sans-serif;
+  /* 设置字体 */
 }
 </style>

src/views/CostumeAppointments/OutfitOrderDetail.vue

@@ -1,23 +1,200 @@
 <template>
-    <div>
-1
+    <div class="detail-container">
+        <el-card shadow="hover">
+            <div class="operate-container">
+                <i class="el-icon-warning color-danger" style="margin-left: 20px"></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">
+                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
+                <span class="font-small">基本信息</span>
+            </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-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-row>
+            </div>
+            <div style="margin-top: 20px">
+                <svg-icon icon-class="marker" style="color: #606266"></svg-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">
+                <svg-icon icon-class="marker" style="color: #606266"></svg-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="photoProductsSnapshot.introImg"
+                            style="height: 70px; width: 70px;" alt=""></el-col>
+                    <el-col :span="6" class="table-cell-product">{{ photoProductsSnapshot.name }}</el-col>
+                    <el-col :span="6" class="table-cell-product">{{ photoProductsSnapshot.categoryName }}</el-col>
+                    <el-col :span="6" class="table-cell-product">{{ photoProductsSnapshot.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 { onMounted, ref } from "vue";
 import myAxios from "@/api/myAxios";
-import { ElMessage } from "element-plus";
 import { SuccessInfo, ErrorInfo } from "@/utils/messageInfo";
-import { useRouter , useRoute } from "vue-router";
+import { useRoute } from "vue-router";
 
 const route = useRoute();
-console.log(route.params.id);
+const orderObj: any = ref({})  //订单对象
+const orderStatus = ref<String>() //订单状态
+const contactsSnapshot: any = ref({})  //联系人快照
+const photoProductsSnapshot: any = ref({}) //商品快照
+const totalAmount: any = ref(0) //订单总价
 onMounted(() => {
-
+    getOrderItem()
 })
+const getOrderItem = async () => {  //获取订单详情
+    const oid = route.params.id //传递订单id
+    const res = await myAxios.post('/advanceOrder/list', { id: oid })
+    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
+        photoProductsSnapshot.value = res.data.data.records[0].photoProductsSnapshot
+        totalAmount.value = res.data.data.records[0].totalAmount
+    }
+}
+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;
+}
 
+.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;
+}
+
+.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;
+}
+
+.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>

src/views/Orders/OrderList.vue

@@ -1,7 +1,7 @@
 <template>
   <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-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>
@@ -21,7 +21,8 @@
     <el-table-column label="所购买的商品" width="150">
       <el-table-column label="展开" type="expand" width="150">
         <template #default="props">
-          <el-table :data="props.row.orderItemList" border :cell-style="{ 'text-align': 'center', 'font-size': '14px'}">
+          <el-table :data="props.row.orderItemList" border
+            :cell-style="{ 'text-align': 'center', 'font-size': '14px' }">
             <el-table-column label="商品名称" prop="goodSnapshot.name" width="200" />
             <el-table-column label="商品图片" prop="goodSnapshot.goodImg" width="200">
               <template #default="scope">
@@ -57,15 +58,20 @@
         <el-button size="small" @click="showDetail(scope.$index, scope.row)">
           详情
         </el-button>
-        <el-button :disabled="!['待发货'].includes(scope.row.orderStatus)" 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="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>
+        <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
+          title="确定要退款吗？" @confirm="deleteOrder(scope.row)" width=180>
+          <template #reference>
+            <el-button :disabled="!['待发货'].includes(scope.row.orderItemStatus)" size="small" type="danger"
+              plain>退款</el-button>
+          </template>
+        </el-popconfirm>
       </template>
     </el-table-column>
   </el-table>
@@ -288,9 +294,13 @@ const cancelOrder = async (row:any)=>{  //取消订单的方法(未支付能取
 <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; /* 设置字体 */
+  text-align: center;
+  /* 表头居中 */
+  font-size: 14px;
+  /* 设置字体大小 */
+  font-weight: bold;
+  /* 设置字体加粗 */
+  font-family: 'Arial', sans-serif;
+  /* 设置字体 */
 }
 </style>

src/views/Orders/PendingServiceOrderList.vue

@@ -2,8 +2,8 @@
   <div style="margin-bottom: 20px;">
     <div style="display: flex; justify-content: space-around; align-items: center">
       <div>
-        <span>商品编号：</span><el-input style=" width: 150px; height: 30px; margin-right: 20px; font-size: 14px" suffix-icon="Search"
-                  placeholder="请输入商品id" v-model="goodId"></el-input>
+        <span>商品编号：</span><el-input style=" width: 150px; height: 30px; margin-right: 20px; font-size: 14px"
+          suffix-icon="Search" placeholder="请输入商品id" v-model="goodId"></el-input>
       </div>
 
       <div>
@@ -65,9 +65,12 @@
                 <el-button size="small" @click="showDetail(scope.$index, scope.row)">
                   详情
                 </el-button>
-                <el-button :disabled="!['待发货'].includes(scope.row.orderItemStatus)" size="small" @click="refundOrder(scope.row)" type="danger" plain>
-                  退款
-                </el-button>
+                <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
+                  title="确定要退款吗？" @confirm="refundOrder(scope.row)" width=180>
+                  <template #reference>
+                    <el-button :disabled="!['待发货'].includes(scope.row.orderItemStatus)" size="small" type="danger" plain>退款</el-button>
+                  </template>
+                </el-popconfirm>
               </template>
             </el-table-column>
 
@@ -306,10 +309,13 @@ const cancelOrder = async (row:any)=>{  //取消订单的方法(未支付能取
 <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; /* 设置字体 */
+  text-align: center;
+  /* 表头居中 */
+  font-size: 14px;
+  /* 设置字体大小 */
+  font-weight: bold;
+  /* 设置字体加粗 */
+  font-family: 'Arial', sans-serif;
+  /* 设置字体 */
 }
-
 </style>

src/views/Orders/ServiceOrderList.vue

@@ -53,9 +53,9 @@
     <el-table-column prop="orderStatus" 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 size="small" @click="showDetail(scope.$index, scope.row)">
           详情
-        </el-button>
+        </el-button> -->
 <!--        <el-button :disabled="!['待发货'].includes(scope.row.orderStatus)" size="small" @click="openShipmentDialog(scope.row.id)"  > &lt;!&ndash;   @click="deliverGoods(scope.row)"&ndash;&gt;-->
 <!--          发货-->
 <!--        </el-button>-->