整理lab6代码中，支付功能出bug了

components.d.ts

@@ -46,4 +46,7 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     StoreItem: typeof import('./src/components/StoreItem.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

src/api/tools.ts

@@ -1,4 +1,3 @@
-// Lab2新增
 import {axios} from '../utils/request'
 import {API_MODULE} from './_prefix'
 
@@ -13,3 +12,12 @@ export const uploadImage = (payload: any) => {
             return res
         })
 }
+
+//Lab5新增
+// 获取excel的链接
+export const getExcelUrl = () => {
+    return axios.get(`${API_MODULE}/excel`, )
+        .then(res => {
+            return res
+        })
+}

src/components/PayDialog.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import {ref} from "vue"
+import {ref, onMounted} from "vue"
 import {calculateOrder, getOrderById, payOrder} from "../api/order.ts"
 import {getAvailableCouponsByStoreId} from "../api/coupon.ts"
-import {parseOrderType, parseCouponType} from "../utils/index.ts"
+import {parseOrderType, parseCouponType} from "../utils"
 import {ElTable} from "element-plus"
+import {RefreshRight} from "@element-plus/icons-vue"
 
 const saveOrderId = ref(0)
 const orderDialogVisible = ref(false)
@@ -46,29 +47,6 @@ function getOrderDetail(orderId: number) {
   })
 }
 
-function handleConfirmOrder() {
-  payOrder(saveOrderId.value, couponId.value).then(res => {
-    if (res.data.code === '000') {
-      ElMessage({
-        message: '订单支付成功！',
-        type: 'success',
-        center: true,
-      })
-      //在本项目中，传回的参数没有实际作用
-      emit("operationFinish", true)
-    } else if (res.data.code === '400') {
-      ElMessage({
-        message: res.data.msg,
-        type: 'error',
-        center: true,
-      })
-      //在本项目中，传回的参数没有实际作用
-      emit("operationFinish", false)
-    }
-    orderDialogVisible.value = false
-  })
-}
-
 // 处理优惠券
 interface Coupon {
   id: number
@@ -97,16 +75,82 @@ const handleCurrentChange = (val: Coupon | undefined) => {
     discountPrice.value = res.data.result
   })
 }
+
+//Lab5新增
+const showForm = ref(false)
+const isLoading = ref(false)
+const refreshButtonVisible = ref(false)
+
+function handleConfirmOrder() {
+  payOrder(saveOrderId.value, couponId.value).then(res => {
+    if (res.data.code === '000') {
+      //以下为Lab5新增，打开一个新的支付界面
+      isLoading.value = true
+      refreshButtonVisible.value = true
+      const paymentWindow = window.open('', '_blank')
+      if (paymentWindow) {   //只有当paymentWindow不是null时，才写入内容
+        paymentWindow.document.write(res.data.result);
+        paymentWindow.document.forms[0].submit() // 提交表单
+        showForm.value = false // 隐藏表单
+        //在本项目中，传回的参数没有实际作用
+        emit("operationFinish", true)
+      } else {
+        ElMessage({
+          message: '无法打开支付窗口',
+          type: 'error',
+          center: true,
+        })
+      }
+    } else if (res.data.code === '400') {
+      ElMessage({
+        message: res.data.msg,
+        type: 'error',
+        center: true,
+      })
+      //在本项目中，传回的参数没有实际作用
+      emit("operationFinish", false)
+    }
+  })
+}
+
+//关闭支付弹窗时，要重置一些值
+function handlePayDialogClose() {
+  orderDialogVisible.value = false
+  couponId.value = 0
+  isLoading.value = false
+  refreshButtonVisible.value = false
+}
+
+//刷新页面
+//其实我在批改作业的时候也跟不少组讲过，应该尽量避免界面刷新，更别说设置手动刷新了，
+//一方面是会影响用户体验，另一方面是其实你只修改了页面里一个很小的东西，没必要刷新，重新加载所有元素会很耗费性能
+//而这边设置手动刷新，是因为没办法让商城系统自动识别支付宝支付有没有成功。
+//其实大家应该也有经历，不少网站都是需要在支付后手动刷新的。
+function refreshPage() {
+  location.reload()
+}
+
+onMounted(() => {
+  showForm.value = true // 组件加载后显示表单
+})
 </script>
 
 
 <template>
-  <el-dialog v-model="orderDialogVisible">
+  <el-dialog v-model="orderDialogVisible" :before-close="handlePayDialogClose">
     <el-row>
       <span class="pay-dialog-title">订单支付</span>
+      <!--Lab5新增，一个支付后的刷新按钮-->
+      <el-button v-if="refreshButtonVisible" @click="refreshPage()"
+                 type="primary" plain class="pay-dialog-refresh-button">
+        已完成支付，刷新界面
+        <el-icon>
+          <RefreshRight/>
+        </el-icon>
+      </el-button>
     </el-row>
 
-    <div>
+    <div v-loading="isLoading">
       <el-form>
         <el-form-item>
           <label for="amount">购买数量：</label>

src/views/order/AllOrder.vue

@@ -2,17 +2,40 @@
 import {ref} from "vue"
 import {getAllOrder} from "../../api/order.ts"
 import OrderItem from "../../components/OrderItem.vue"
+import {getExcelUrl} from "../../api/tools.ts";
+
+const role = sessionStorage.getItem("role")
 
 const orderList = ref()
 
 getAllOrder().then(res => {
   orderList.value = res.data.result
 })
+
+function downloadOrderExcel () {
+  getExcelUrl().then(res => {
+    const link = document.createElement('a')
+    link.href = res.data.result
+    link.setAttribute('download', '')
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  })
+
+}
+
 </script>
 
 
 <template>
   <el-main>
+    <!--Lab5新增，工作人员和CEO可以下载订单报表查看-->
+    <div v-if="role === 'STAFF' || role === 'CEO'">
+        <el-button @click="downloadOrderExcel" class="get-excel-button" type="success" plain>
+          下载订单报表
+        </el-button>
+    </div>
+
     <div class="order-item-list">
       <OrderItem
           v-for="orderVO in orderList" :orderId="orderVO.id"/>