From ee7de58ba49b9396b138a96de6ad56a9a2defc3b Mon Sep 17 00:00:00 2001
From: ywyonui <ywyonui@163.com>
Date: Mon, 21 Jul 2025 14:34:20 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E8=B0=83=E6=95=B4websocket=E7=9A=84?=
 =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=202=E3=80=81=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E6=94=AF=E4=BB=98=E7=9A=84=E5=80=92=E8=AE=A1=E6=97=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/base/server.ts                       |   6 +
 src/pages/base/class-schedule/index.vue      |  19 +-
 src/pages/base/course-selection/pay-wait.vue | 187 ++++++++++++++++++-
 src/pages/base/course-selection/payment.vue  | 164 +++++++---------
 src/store/modules/user.ts                    |  26 ++-
 5 files changed, 293 insertions(+), 109 deletions(-)

diff --git a/src/api/base/server.ts b/src/api/base/server.ts
index 741e2c3..59676cc 100644
--- a/src/api/base/server.ts
+++ b/src/api/base/server.ts
@@ -101,6 +101,12 @@ export const xsKscjApi = async (params: any) => {
 export const jzXkQkjApi = async (params: any) => {
   return await post("/mobile/jz/xk/qk", params);
 };
+/**
+ * 家长获取抢课到期时间
+ */
+export const jzGetQkExpiredTime = async (params: any) => {
+  return await get("/mobile/jz/xk/getQkExpiredTime", params);
+};
 /**
  * 家长发起缴费
  */
diff --git a/src/pages/base/class-schedule/index.vue b/src/pages/base/class-schedule/index.vue
index 89b79a8..ee78891 100644
--- a/src/pages/base/class-schedule/index.vue
+++ b/src/pages/base/class-schedule/index.vue
@@ -52,7 +52,7 @@
               { active: zc.djz === curZc.djz },
             ]" @click="selectWeek(zc)">
               <text>{{ zc.mc }}</text>
-              <text v-if="zc.djz === curZc.djz" class="current-tag">当前周</text>
+              <text v-if="zc.dnDjz === dnDjz" class="current-tag">当前周</text>
             </view>
           </scroll-view>
         </view>
@@ -63,16 +63,27 @@
 
 <script lang="ts" setup>
 import { ref, reactive, computed, onMounted, nextTick } from "vue";
-import { dqpkApi, drpkkbApi, gzlGetDqXqAndZcApi } from "@/api/base/server";
+import { dqpkApi, drpkkbApi } from "@/api/base/server";
 import { useUserStore } from "@/store/modules/user";
 const { getCurXs } = useUserStore();
+import dayjs from "dayjs";
+import "dayjs/locale/zh-cn";
+import weekOfYear from "dayjs/plugin/weekOfYear";
+import isoWeek from "dayjs/plugin/isoWeek";
+
+dayjs.locale("zh-cn");
+dayjs.extend(weekOfYear);
+dayjs.extend(isoWeek);
 
 let dqZc = 0;
 let xqId = '';
 
-// 当前周次
+// 这是当年的第几周
+const dnDjz = ref(dayjs().isoWeek());
+
+// 当前选中周次
 const curZc = ref<any>({});
-// 当前日期序号
+// 当前选中日期序号
 const curRqIndex = ref(0)
 // 周次列表
 const zcList = ref<any>([])
diff --git a/src/pages/base/course-selection/pay-wait.vue b/src/pages/base/course-selection/pay-wait.vue
index fd66965..ead0a95 100644
--- a/src/pages/base/course-selection/pay-wait.vue
+++ b/src/pages/base/course-selection/pay-wait.vue
@@ -1,17 +1,40 @@
 <template>
-  <view class="wh-full">
-    <web-view :src="payUrl"></web-view>
+  <view class="payment-page">
+    <!-- 倒计时区域 -->
+    <view class="countdown-section">
+      <view class="countdown-icon">
+        <u-icon name="clock" size="22" color="#fff"></u-icon>
+      </view>
+      <view class="countdown-text">待支付</view>
+      <view class="countdown-timer">
+        <text>剩余：</text>
+        <text class="time-value">{{ countdownTime }}</text>
+      </view>
+    </view>
+
+    <view class="scrollable-content">
+      <web-view :src="payUrl" style="flex: 1;"></web-view>
+    </view>
+
+    <!-- 底部支付区域 -->
+    <view class="payment-footer">
+      <view class="action-buttons">
+        <view class="cancel-btn" @click="cancelRegistration">取消报名</view>
+      </view>
+    </view>
   </view>
 </template>
 
 <script lang="ts" setup>
 import { onLoad } from "@dcloudio/uni-app";
-import { useWebSocket } from '@/utils/webSocket/webSocket'
+import { jzGetQkExpiredTime, jzXkCancelApi } from "@/api/base/server";
 import { useUserStore } from "@/store/modules/user";
-const { getUser } = useUserStore();
+import { useDataStore } from "@/store/modules/data";
+const { getCurXs, getUser, setWsCallback } = useUserStore();
+const { getData } = useDataStore();
 
 const payUrl = ref("");
-const ws = useWebSocket(`/zhxy/webSocket/${getUser.userId}`, (type: string, res: any) => {
+setWsCallback((type: string, res: any) => {
   console.log('收到WebSocket消息:', type, res.data);
   // 将data从字符串转为对象
   const dataObj = JSON.parse(res.data);
@@ -20,7 +43,7 @@ const ws = useWebSocket(`/zhxy/webSocket/${getUser.userId}`, (type: string, res:
       title: '支付成功',
       icon: 'success',
     });
-    ws.closeConnect();
+    setWsCallback((type: string, res: any) => {})
     // 跳转到支付成功页面
     setTimeout(() => {
       uni.reLaunch({
@@ -29,10 +52,70 @@ const ws = useWebSocket(`/zhxy/webSocket/${getUser.userId}`, (type: string, res:
     }, 1000)
   }
 });
-onLoad((options: any) => {
+
+// 倒计时
+const countdownTime = ref("1分20秒");
+let timer: any = null;
+let seconds = 1 * 60 + 20; // 1分20秒
+
+// 开始倒计时
+const startCountdown = () => {
+  timer = setInterval(() => {
+    seconds--;
+    if (seconds <= 0) {
+      clearInterval(timer);
+      uni.showModal({
+        title: "支付超时",
+        content: "支付已超时，请重新选课",
+        showCancel: false,
+        success: () => {
+          cancelRegistration();
+        },
+      });
+      return;
+    }
+    const minutes = Math.floor(seconds / 60);
+    const remainSeconds = seconds % 60;
+    countdownTime.value = `${minutes}分${remainSeconds}秒`;
+  }, 1000);
+};
+
+// 返回上一页
+const goBack = () => {
+  uni.reLaunch({
+    url: getData.backUrl
+  });
+};
+
+// 取消报名
+const cancelRegistration = () => {
+  uni.showModal({
+    title: "取消报名",
+    content: "确定要取消报名吗？",
+    success: async (res) => {
+      if (res.confirm) {
+        await jzXkCancelApi({
+          xsId: getData.xsId,
+          xkId: getData.xkId
+        });
+        uni.showToast({
+          title: "已取消报名",
+          icon: "success",
+        });
+        goBack();
+      }
+    },
+  });
+};
+
+
+
+onLoad(async (options: any) => {
   if (options.payUrl) {
     payUrl.value = decodeURIComponent(options.payUrl);
-    ws.reconnect();
+    const res = await jzGetQkExpiredTime({ xsId: getCurXs.id} );
+    seconds = res.result;
+    startCountdown();
   } else {
     uni.showToast({ title: '缺少支付地址', icon: 'none' })
     setTimeout(() => {
@@ -42,8 +125,92 @@ onLoad((options: any) => {
 });
 
 onBeforeUnmount(() => {
-  ws.closeConnect();
+  if (timer) {
+    clearInterval(timer);
+  }
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.payment-page {
+  min-height: 100%;
+  background-color: #f5f7fa;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+// 可滚动内容区域样式
+.scrollable-content {
+  flex: 1;
+  display: flex;
+  position: relative;
+}
+
+.countdown-section {
+  display: flex;
+  align-items: center;
+  padding: 15px;
+  background-color: #2879ff;
+
+  .countdown-icon {
+    margin-right: 10px;
+  }
+
+  .countdown-text {
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+    margin-right: auto;
+  }
+
+  .countdown-timer {
+    font-size: 15px;
+    color: #fff;
+
+    .time-value {
+      color: #ff4d4f;
+      font-weight: 500;
+    }
+  }
+}
+
+.payment-footer {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  padding: 15px;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
+
+  .total-amount {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    font-size: 15px;
+    color: #333;
+
+    .amount-value {
+      color: #ff6b00;
+      font-size: 20px;
+      font-weight: 500;
+    }
+  }
+
+  .action-buttons {
+    .cancel-btn {
+      height: 44px;
+      line-height: 44px;
+      text-align: center;
+      border-radius: 22px;
+      font-size: 16px;
+      background-color: #fff;
+      color: #333;
+      border: 1px solid #ddd;
+    }
+  }
+}
+
+</style>
diff --git a/src/pages/base/course-selection/payment.vue b/src/pages/base/course-selection/payment.vue
index 94f65b8..19f976e 100644
--- a/src/pages/base/course-selection/payment.vue
+++ b/src/pages/base/course-selection/payment.vue
@@ -6,17 +6,21 @@
         <u-icon name="clock" size="22" color="#fff"></u-icon>
       </view>
       <view class="countdown-text">待支付</view>
-      <!-- <view class="countdown-timer">
+      <view class="countdown-timer">
         <text>剩余：</text>
         <text class="time-value">{{ countdownTime }}</text>
-      </view> -->
+      </view>
     </view>
 
-    <!-- 学生信息卡片 -->
-    <XkPayXs />
+    <view class="scrollable-content">
 
-    <!-- 课程信息卡片 -->
-    <XkPayXkqd />
+      <!-- 学生信息卡片 -->
+      <XkPayXs />
+
+      <!-- 课程信息卡片 -->
+      <XkPayXkqd />
+
+    </view>
 
     <!-- 底部支付区域 -->
     <view class="payment-footer">
@@ -36,7 +40,7 @@
 <script setup lang="ts">
 import XkPayXs from "@/pages/base/components/XkPayXs/index.vue"
 import XkPayXkqd from "@/pages/base/components/XkPayXkqd/index.vue"
-import { jzXkCancelApi, jzXkFqJfjApi } from "@/api/base/server";
+import { jzGetQkExpiredTime, jzXkCancelApi, jzXkFqJfjApi } from "@/api/base/server";
 import { useUserStore } from "@/store/modules/user";
 import { useDataStore } from "@/store/modules/data";
 const { getCurXs, getUser } = useUserStore();
@@ -60,32 +64,32 @@ const totalJe = computed(() => {
 });
 
 // 倒计时
-// const countdownTime = ref("1分20秒");
-// let timer: any = null;
-// let seconds = 1 * 60 + 20; // 1分20秒
+const countdownTime = ref("1分20秒");
+let timer: any = null;
+let seconds = 1 * 60 + 20; // 1分20秒
 
 // 开始倒计时
-// const startCountdown = () => {
-//   timer = setInterval(() => {
-//     seconds--;
-//     if (seconds <= 0) {
-//       clearInterval(timer);
-//       uni.showModal({
-//         title: "支付超时",
-//         content: "支付已超时，请重新选课",
-//         showCancel: false,
-//         success: () => {
-//           goBack();
-//         },
-//       });
-//       return;
-//     }
+const startCountdown = () => {
+  timer = setInterval(() => {
+    seconds--;
+    if (seconds <= 0) {
+      clearInterval(timer);
+      uni.showModal({
+        title: "支付超时",
+        content: "支付已超时，请重新选课",
+        showCancel: false,
+        success: () => {
+          cancelRegistration();
+        },
+      });
+      return;
+    }
 
-//     const minutes = Math.floor(seconds / 60);
-//     const remainSeconds = seconds % 60;
-//     countdownTime.value = `${minutes}分${remainSeconds}秒`;
-//   }, 1000);
-// };
+    const minutes = Math.floor(seconds / 60);
+    const remainSeconds = seconds % 60;
+    countdownTime.value = `${minutes}分${remainSeconds}秒`;
+  }, 1000);
+};
 
 // 返回上一页
 const goBack = () => {
@@ -117,49 +121,40 @@ const cancelRegistration = () => {
 
 // 立即支付
 const payNow = async () => {
-  const res = await jzXkFqJfjApi({
-    xsId: getData.xsId,
-    xkId: getData.xkId,
-    jffs: "四川农信", // TODO: 目前只支持四川农信
-    jzId: getUser.jzId,
-    userId: getUser.userId,
-    openId: getUser.openId,
-  });
-  // const res = {
-  //   resultCode: 1,
-  //   result: "https://pay.weixin.qq.com/wxpay/pay.action?prepay_id=wx20191018103005f5c0c0f5c0c"
-  // }
-  if (res.resultCode === 1 && res.result) {
+  try {
+    const res = await jzXkFqJfjApi({
+      xsId: getData.xsId,
+      xkId: getData.xkId,
+      jffs: "四川农信", // TODO: 目前只支持四川农信
+      jzId: getUser.jzId,
+      userId: getUser.userId,
+      openId: getUser.openId,
+    });
+    if (res.resultCode === 1 && res.result) {
+      uni.redirectTo({
+        url: `/pages/base/course-selection/pay-wait?payUrl=${encodeURIComponent(res.result)}`
+      });
+    }
+  } catch (error) {
+    console.log(error);
+    const url = "https://www.baidu.com";
     uni.redirectTo({
-      url: `/pages/base/course-selection/pay-wait?payUrl=${encodeURIComponent(res.result)}`
+      url: `/pages/base/course-selection/pay-wait?payUrl=${encodeURIComponent(url)}`
     });
   }
- 
-  // uni.showLoading({
-  //   title: "支付中...",
-  // });
-
-  // // 模拟支付过程
-  // setTimeout(() => {
-  //   uni.hideLoading();
-
-  //   uni.redirectTo({
-  //     url: "/pages/base/course-selection/payment-success",
-  //   });
-  //   // uni.redirectTo({
-  //   //   url: "/pages/base/course-selection/payment-fail",
-  //   // });
-  // }, 2000);
 };
 
-onMounted(() => {
-  // startCountdown();
+onMounted(async() => {
+  const res = await jzGetQkExpiredTime({ xsId: getCurXs.id} );
+  console.log('获取倒计时', res);
+  seconds = res.result;
+  startCountdown();
 });
 
 onUnmounted(() => {
-  // if (timer) {
-  //   clearInterval(timer);
-  // }
+  if (timer) {
+    clearInterval(timer);
+  }
 });
 </script>
 
@@ -167,34 +162,17 @@ onUnmounted(() => {
 .payment-page {
   min-height: 100%;
   background-color: #f5f7fa;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
 }
 
-.nav-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 15px;
-  height: 44px;
-  background-color: #2879ff;
-
-  .nav-left {
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-  }
-
-  .nav-title {
-    font-size: 18px;
-    font-weight: 500;
-    color: #fff;
-  }
-
-  .nav-right {
-    width: 40px;
-    display: flex;
-    justify-content: flex-end;
-  }
+// 可滚动内容区域样式
+.scrollable-content {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch; // 增强iOS滚动体验
 }
 
 .countdown-section {
@@ -226,10 +204,10 @@ onUnmounted(() => {
 }
 
 .payment-footer {
-  position: fixed;
+  position: sticky;
+  bottom: 0;
   left: 0;
   right: 0;
-  bottom: 0;
   background-color: #fff;
   padding: 15px;
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 8e3893e..ca9d3f6 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -2,12 +2,15 @@ import { defineStore } from "pinia";
 import { authenticationApi, loginCode, loginPass, weChatLogin } from "@/api/system/login";
 import { AUTH_KEY } from "@/config";
 import { imagUrl } from "@/utils";
+import { useWebSocket } from '@/utils/webSocket/webSocket'
 
 interface UserState {
   userdata: any;
   curXs: any;
   token: string;
-  auth: string[]
+  auth: string[],
+  ws: any,
+  wsCallback: any
 }
 
 export const useUserStore = defineStore({
@@ -20,7 +23,9 @@ export const useUserStore = defineStore({
     // token
     token: '',
     //用户注册信息
-    auth: []
+    auth: [],
+    ws: null,
+    wsCallback: (type: string, res: any) => {}
   }),
   getters: {
     getToken(): string {
@@ -49,6 +54,9 @@ export const useUserStore = defineStore({
     setAuth(data: string[]) {
       this.auth = data;
     },
+    setWsCallback(callback: any) {
+      this.wsCallback = callback;
+    },
     /**
      * @description: 验证码登录
      */
@@ -99,6 +107,15 @@ export const useUserStore = defineStore({
       if (value[AUTH_KEY]) {
         this.setToken(value[AUTH_KEY])
       }
+      if (!this.ws) {
+        this.ws = useWebSocket(`/zhxy/webSocket/${value.userId}`, (type: string, res: any) => {
+          // 判断this.wsCallback是函数，调用
+          if (typeof this.wsCallback === "function") {
+            this.wsCallback(type, res);
+          }
+        });
+        this.ws.reconnect();
+      }
       authenticationApi({ userId: value.userId }).then(({ result }) => {
         if (result) {
           this.setAuth(result)
@@ -113,6 +130,11 @@ export const useUserStore = defineStore({
       this.setUser('')
       this.setCurXs({})
       this.setAuth([])
+      if (this.ws) {
+        this.ws.closeConnect();
+        this.ws = null;
+      }
+      this.wsCallback((type: string, res: any) => {});
     },
   },
   persist: {