1

@@ -46,3 +46,6 @@ export const cancelOrder = (data) =>
 /** 订单详情 */
 export const getOrderDetail = (data) =>
   request("GET", `/api/order/detail/${data.orderSn}`, data);
+/** 检查是否支付成功 */
+export const checkPaySuccess = (data) =>
+  request("POST", `/api/order/checkOrderIsPay/${data.orderSn}`, data);

 <script setup>
 import { confirmOrder } from "./api/index.js";
 import { ElMessage } from "element-plus";
-import { payOrder, viewPeopleList } from "./api/index.js";
-import { reactive } from "vue";
+import { payOrder, viewPeopleList, checkPaySuccess } from "./api/index.js";
 import qrCodeDialog from "./components/qrCodeDialog.vue";
+import qrcode from "qrcode";
+import { onUnmounted } from "vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -12,6 +13,25 @@ const props = defineProps({
   activityId: [String, Number],
 });
 
+let timer = null;
+const startCheckSuccessListener = (orderSn, actId) => {
+  timer = setInterval(() => {
+    checkPaySuccess({ orderSn }).then((res) => {
+      if (res.data) {
+        clearInterval(timer);
+        timer = null;
+        // 支付成功
+        payment.showCodeDialog = false;
+        router.push({
+          path: "/seat/order",
+        });
+      } else {
+        return false;
+      }
+    });
+  }, 3000);
+};
+
 const payment = reactive({
   showCodeDialog: false,
   btn_loading: false,
@@ -20,6 +40,7 @@ const payment = reactive({
     phone: "",
   },
   qrInfo: {},
+  qrCodeData: "",
   paymentHandle() {
     if (payment.form.viewers.length != order.data?.seatInfo?.length)
       return ElMessage({ type: "warning", message: "观看人与购买票数不符" });
@@ -32,17 +53,22 @@ const payment = reactive({
       payType: 1,
       paymentAmount: order.data?.paymentAmount,
     }).then((res) => {
-      // TODO: 这里有一个二维码
       payment.qrInfo = res.data;
-      payment.showCodeDialog = true;
-      router.replace({
-        path: "/seat/order",
-        query: {
-          id: props.activityId,
-        },
+      qrcode.toDataURL(res.data.scanCodeUrl, (err, url) => {
+        if (url) {
+          payment.qrCodeData = url;
+        }
       });
+      payment.showCodeDialog = true;
+      startCheckSuccessListener(res.data.orderSn, props.activityId);
     });
   },
+  handleCloce() {
+    payment.showCodeDialog = false;
+    payment.qrCodeData = "";
+    clearInterval(timer);
+    timer = null;
+  },
 });
 
 const order = reactive({
@@ -70,6 +96,10 @@ const audience = reactive({
   },
 });
 
+onUnmounted(() => {
+  clearInterval(timer)
+})
+
 audience.fetchData();
 order.fetchData();
 </script>
@@ -175,10 +205,16 @@ order.fetchData();
       <div class="pay" @click="payment.paymentHandle()">立即支付</div>
     </div>
 
-    <qrCodeDialog
-      :showCodeDialog="payment.showCodeDialog"
-      :qrCode="payment.qrInfo?.scanCodeUrl"
-    />
+    <el-dialog
+      v-model="payment.showCodeDialog"
+      title="支付"
+      width="300"
+      @closed="payment.handleCloce()"
+    >
+      <div>
+        <img class="qrcode" :src="payment.qrCodeData" />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -187,9 +223,8 @@ div {
   box-sizing: border-box;
 }
 .qrcode {
-  width: 150px;
-  height: 150px;
-  background-color: #8623fc;
+  width: 200px;
+  height: 200px;
   margin: 0 auto;
 }
 .container {
@@ -405,6 +440,7 @@ div {
       line-height: 40px;
       text-align: center;
       cursor: pointer;
+      user-select: none;
     }
   }
 }

 <script setup>
-import { reactive } from "vue";
+import { onBeforeUnmount, reactive } from "vue";
 import {
   cancelOrder,
   getOrderDetail,
   immediatePay,
   cancelPay,
+  checkPaySuccess,
 } from "./api/index.js";
 import qrCodeDialog from "./components/qrCodeDialog.vue";
 import { ElMessageBox, ElMessage } from "element-plus";
+import qrcode from "qrcode";
 
 const route = useRoute();
 const router = useRouter();
@@ -48,8 +50,26 @@ const props = defineProps({
   activityId: [String, Number],
 });
 
+let timer = null;
+const startCheckSuccessListener = (orderSn, actId) => {
+  timer = setInterval(() => {
+    checkPaySuccess({ orderSn }).then((res) => {
+      if (res.data) {
+        clearInterval(timer);
+        timer = null;
+        // 支付成功
+        detail.showCodeDialog = false;
+        detail.fetchData();
+      } else {
+        return false;
+      }
+    });
+  }, 3000);
+};
+
 const detail = reactive({
   showCodeDialog: false,
+  qrCodeData: "",
   pay_loading: false,
   qrInfo: {},
   data: null,
@@ -92,7 +112,8 @@ const detail = reactive({
           totalTime -= 1000;
           // console.log(totalTime)
         } else {
-          clearInterval(timer); // 停止调用函数
+          clearInterval(detail.timer); // 停止调用函数
+          detail.fetchData();
         }
       }, 1000);
     }
@@ -103,10 +124,22 @@ const detail = reactive({
     immediatePay({ orderSn: detail.data.orderSn, payType: 1 })
       .then((res) => {
         detail.qrInfo = res.data;
+        qrcode.toDataURL(res.data.scanCodeUrl, (err, url) => {
+          if (url) {
+            detail.qrCodeData = url;
+          }
+        });
+        startCheckSuccessListener(detail.data.orderSn);
         detail.showCodeDialog = true;
       })
       .finally(() => (detail.pay_loading = false));
   },
+  handleClose() {
+    detail.showCodeDialog = false;
+    detail.qrCodeData = "";
+    clearInterval(timer);
+    timer = null;
+  },
   // 取消支付
   cancelPay() {
     ElMessageBox.confirm("确定取消支付吗？", "提示", {
@@ -153,6 +186,11 @@ const detail = reactive({
   },
 });
 
+onBeforeUnmount(() => {
+  clearInterval(detail.timer);
+  clearInterval(timer);
+});
+
 detail.fetchData();
 </script>
 
@@ -271,14 +309,30 @@ detail.fetchData();
       </div>
     </div>
 
-    <qrCodeDialog
+    <!-- <qrCodeDialog
       :showCodeDialog="detail.showCodeDialog"
-      :qrCode="detail.qrInfo?.scanCodeUrl"
-    />
+      :qrCode="detail.qrCodeData"
+    /> -->
+
+    <el-dialog
+      v-model="detail.showCodeDialog"
+      title="支付"
+      width="300"
+      @closed="detail.handleClose()"
+    >
+      <div>
+        <img class="qrcode" :src="detail.qrCodeData" />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <style scoped lang="scss">
+.qrcode {
+  width: 200px;
+  height: 200px;
+  margin: 0 auto;
+}
 .container {
   width: 1200px;
   margin: 0 auto;

@@ -2,7 +2,7 @@
 import { getOrderList, immediatePay, cancelPay } from "./api/index.js";
 import qrCodeDialog from "./components/qrCodeDialog.vue";
 import { ElMessageBox, ElMessage } from "element-plus";
-
+import qrcode from "qrcode";
 const status = reactive({
   0: {
     txt: "待支付",
@@ -51,6 +51,7 @@ const order = reactive({
   seconds: 0,
   data: [],
   timer: null,
+  qrCodeData: "",
   fetchData() {
     getOrderList({ pageNo: order.pageNo, pageSize: order.pageSize }).then(
       (res) => {
@@ -67,10 +68,21 @@ const order = reactive({
     immediatePay({ orderSn: it.orderSn, payType: 1 })
       .then((res) => {
         order.qrInfo = res.data;
+        qrcode.toDataURL(res.data.scanCodeUrl, (err, url) => {
+          if (err) {
+            console.error(err);
+          } else {
+            order.qrCodeData = url;
+          }
+        });
         order.showCodeDialog = true;
       })
       .finally(() => (order.pay_loading = false));
   },
+  handleClose() {
+    order.showCodeDialog = false;
+    order.qrCodeData = "";
+  },
   // 取消支付
   cancelPayment(it) {
     ElMessageBox.confirm("确定取消支付吗？", "提示", {
@@ -179,19 +191,13 @@ order.fetchData();
         </div>
       </div>
       <div v-if="it.state == 0" class="btn_box">
-        <div class="pay" @click.stop="order.payment(it)">立即支付</div>
+        <div class="pay">立即支付</div>
         <div class="can_pay" @click.stop="order.cancelPayment(it)">
           取消支付
         </div>
       </div>
     </div>
 
-    <qrCodeDialog
-      :showCodeDialog="order.showCodeDialog"
-      :qrCode="order.qrInfo?.scanCodeUrl"
-      @closeDialog="order.showCodeDialog = false"
-    />
-
     <div class="pagination">
       <el-pagination
         v-show="order.total > 0"
@@ -203,10 +209,26 @@ order.fetchData();
         @current-change="order.fetchData()"
       />
     </div>
+
+    <el-dialog
+      v-model="order.showCodeDialog"
+      title="支付"
+      width="300"
+      @closed="order.handleClose()"
+    >
+      <div>
+        <img class="qrcode" :src="order.qrCodeData" />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <style scoped lang="scss">
+.qrcode {
+  width: 150px;
+  height: 150px;
+  margin: 0 auto;
+}
 .container {
   width: 1200px;
   margin: 0 auto;

@@ -231,7 +231,7 @@ const toConfirmOrder = () => {
       });
     })
     .catch((e) => {
-      if (e.code == 405) {
+      if (e.code == 'B001') {
         router.push({
           path: "/seat/order",
           query: {