From 5f59d3d8d4aa06d736643d2dd4e4fb2dcd35aca8 Mon Sep 17 00:00:00 2001
From: ywyonui <ywyonui@163.com>
Date: Tue, 1 Jul 2025 16:17:13 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E8=B0=83=E6=95=B4=E6=94=AF=E4=BB=98?=
 =?UTF-8?q?=202=E3=80=81=E8=B0=83=E6=95=B4Websocket=E7=9B=91=E5=90=AC?=
 =?UTF-8?q?=E6=94=AF=E4=BB=98=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/base/server.ts                       |   7 +
 src/pages.json                               |  10 ++
 src/pages/base/course-selection/pay-wait.vue |  42 ++++++
 src/pages/base/course-selection/payment.vue  |  90 +++++++-----
 src/pages/base/grades/detail.vue             |  13 +-
 src/store/modules/user.ts                    |   2 +-
 src/utils/webSocket/webSocket.ts             | 138 ++++++++++---------
 7 files changed, 204 insertions(+), 98 deletions(-)
 create mode 100644 src/pages/base/course-selection/pay-wait.vue

diff --git a/src/api/base/server.ts b/src/api/base/server.ts
index a2e35fa..7e0931b 100644
--- a/src/api/base/server.ts
+++ b/src/api/base/server.ts
@@ -101,6 +101,13 @@ export const jzXkFqJfjApi = async (params: any) => {
   return await post("/mobile/jz/xk/fqjf", params);
 };
 
+/**
+ * 家长取消选课，不支付
+ */
+export const jzXkCancelApi = async (params: any) => {
+  return await post("/mobile/jz/xk/cancel", params);
+};
+
 /**
  * 家长退课
  */
diff --git a/src/pages.json b/src/pages.json
index ebb77f1..b941d7e 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -183,6 +183,16 @@
         "enablePullDownRefresh": false
       }
     },
+    {
+      "path": "pages/base/course-selection/pay-wait",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false,
+        "navigationBarBackgroundColor": "#ffffff",
+        "navigationBarTextStyle": "black",
+        "backgroundColor": "#ffffff"
+      }
+    },
     {
       "path": "pages/base/course-selection/payment-success",
       "style": {
diff --git a/src/pages/base/course-selection/pay-wait.vue b/src/pages/base/course-selection/pay-wait.vue
new file mode 100644
index 0000000..bac6517
--- /dev/null
+++ b/src/pages/base/course-selection/pay-wait.vue
@@ -0,0 +1,42 @@
+<template>
+  <view class="wh-full">
+    <web-view :src="payUrl"></web-view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { onLoad } from "@dcloudio/uni-app";
+import { useWebSocket } from '@/utils/webSocket/webSocket'
+import { useUserStore } from "@/store/modules/user";
+const { getUser } = useUserStore();
+
+const payUrl = ref("");
+const ws = useWebSocket(`/zhxy/webSocket/${getUser.userId}`, (type: string, data: any) => {
+  console.log('收到WebSocket消息:', type, data);
+  if (type === 'pay') {
+    uni.showToast({
+      title: '支付成功',
+      icon: 'success',
+    })
+    // 跳转到支付成功页面
+    setTimeout(() => {
+      uni.reLaunch({
+        url: "/pages/base/course-selection/payment-success",
+      });
+    }, 1000)
+  }
+});
+onLoad((options: any) => {
+  if (options.payUrl) {
+    payUrl.value = decodeURIComponent(options.payUrl);
+    ws.reconnect();
+  } else {
+    uni.showToast({ title: '缺少支付地址', icon: 'none' })
+    setTimeout(() => {
+      uni.navigateBack()
+    }, 1000)
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/pages/base/course-selection/payment.vue b/src/pages/base/course-selection/payment.vue
index edf2da3..dcb5b7c 100644
--- a/src/pages/base/course-selection/payment.vue
+++ b/src/pages/base/course-selection/payment.vue
@@ -19,39 +19,36 @@
 
       <view class="student-info">
         <view class="student-avatar">
-          <image
-            src="/static/images/student-avatar.jpg"
-            mode="aspectFill"
-          ></image>
+          <image :src="curXs.xstxUrl || '/static/base/home/11222.png'" class="tx-img"></image>
         </view>
         <view class="student-details">
           <view class="student-name">
-            {{ student.xm }}
+            {{ curXs.xm }}
           </view>
           <view class="student-class"
-            >{{ student.njmc }}{{ student.bjmc }}</view
+            >{{ curXs.njmc }}{{ curXs.bjmc }}</view
           >
         </view>
       </view>
     </view>
 
     <!-- 课程信息卡片 -->
-    <view class="info-card">
+    <view class="info-card" v-for="(xkqd, index) in xkqdList" :key="index">
       <view class="card-title">课程信息</view>
       <view class="divider"></view>
 
       <view class="course-info">
         <image
           class="course-image"
-          :src="imagUrl(course.xkkcImg)"
+          :src="xkqd.lxtp ? imagUrl(xkqd.lxtp) : '/static/base/home/11222.png'"
           mode="aspectFill"
         ></image>
         <view class="course-details">
-          <view class="course-name">{{ course.kcmc }}</view>
-          <view class="course-teacher">开课老师：{{ course.jsName }}</view>
-          <view class="course-location">上课地点：{{ course.kcdd }}</view>
+          <view class="course-name">{{ xkqd.kcmc }}</view>
+          <view class="course-teacher">开课老师：{{ xkqd.jsxm }}</view>
+          <view class="course-location">上课地点：{{ xkqd.kcdd }}</view>
           <view class="course-price"
-            >金额：<text class="price-value">¥{{ course.kcje }}</text></view
+            >金额：<text class="price-value">¥{{ xkqd.kcje }}</text></view
           >
         </view>
       </view>
@@ -61,7 +58,7 @@
     <view class="payment-footer">
       <view class="total-amount">
         <text>总金额：</text>
-        <text class="amount-value">¥{{ course.kcje }}</text>
+        <text class="amount-value">¥{{ totalJe }}</text>
       </view>
 
       <view class="action-buttons">
@@ -73,25 +70,36 @@
 </template>
 
 <script setup lang="ts">
-import { xkqddeleteApi } from "@/api/base/server";
-import { useDataStore } from "@/store/modules/data";
+import { jzXkCancelApi, jzXkFqJfjApi } from "@/api/base/server";
 import { imagUrl } from "@/utils";
-import { ref, onMounted, onUnmounted } from "vue";
-const useData = useDataStore();
-const { getData } = storeToRefs(useData);
+import { useUserStore } from "@/store/modules/user";
+import { useDataStore } from "@/store/modules/data";
+import { result } from "lodash";
+const { getCurXs, getUser } = useUserStore();
+const { setData, getData } = useDataStore();
+
+// 学生信息
+const curXs = computed(() => getCurXs);
+// 课程信息
+const xkqdList = computed(() => getData.xkqdList);
+// 总金额
+const totalJe = computed(() => {
+  // 循环xkqdList.value 求和
+  if (!xkqdList.value || !xkqdList.value.length) {
+    return 0;
+  }
+  let total = 0;
+  for (let i = 0; i < xkqdList.value.length; i++) {
+    total += xkqdList.value[i].kcje;
+  }
+  return total;
+});
 
 // 倒计时
 // const countdownTime = ref("1分20秒");
 // let timer: any = null;
 // let seconds = 1 * 60 + 20; // 1分20秒
 
-// 学生信息
-const student = ref(getData.value.studentInfo);
-
-// 课程信息
-const course = ref(getData.value.enrolledCourse);
-console.log(course.value);
-
 // 开始倒计时
 // const startCountdown = () => {
 //   timer = setInterval(() => {
@@ -127,10 +135,10 @@ const cancelRegistration = () => {
     content: "确定要取消报名吗？",
     success: async (res) => {
       if (res.confirm) {
-        await xkqddeleteApi({
-          id: course.value.id,
+        await jzXkCancelApi({
+          xsId: getData.xsId,
+          xkId: getData.xkId
         });
-
         uni.showToast({
           title: "已取消报名",
           icon: "success",
@@ -144,10 +152,28 @@ const cancelRegistration = () => {
 };
 
 // 立即支付
-const payNow = () => {
-  uni.showLoading({
-    title: "支付中...",
-  });
+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) {
+    uni.redirectTo({
+      url: `/pages/base/course-selection/pay-wait?payUrl=${encodeURIComponent(res.result)}`
+    });
+  }
+ 
+  // uni.showLoading({
+  //   title: "支付中...",
+  // });
 
   // // 模拟支付过程
   // setTimeout(() => {
diff --git a/src/pages/base/grades/detail.vue b/src/pages/base/grades/detail.vue
index 59f2539..03c2afd 100644
--- a/src/pages/base/grades/detail.vue
+++ b/src/pages/base/grades/detail.vue
@@ -161,6 +161,7 @@ import dayjs from "dayjs";
 import { xsKscjApi } from "@/api/base/server";
 import { useUserStore } from "@/store/modules/user";
 import { useDataStore } from "@/store/modules/data";
+import { format } from "path";
 const { getCurXs } = useUserStore();
 const { getData } = useDataStore();
 dayjs.locale("zh-cn");
@@ -342,7 +343,7 @@ const drawTrendChart = () => {
             animation: true,
             background: "#FFFFFF",
             padding: [15, 15, 0, 15],
-            dataLabel: true,
+            dataLabel: false,
             dataPointShape: true,
             enableScroll: false,
             legend: {
@@ -358,10 +359,17 @@ const drawTrendChart = () => {
               dashLength: 2,
               data: [
                 {
-                  min: 80,
+                  min: 0,
                   max: 100,
                 },
               ],
+              min: 0,             // 纵坐标最小值设为0
+              max: 100,           // 纵坐标最大值设为100
+              axisLabel: {        // 标签配置
+                show: function(value: any) {
+                  return value === 0 || value === 100;  // 只显示0和100
+                }
+              },
             },
             extra: {
               line: {
@@ -497,6 +505,7 @@ onMounted(() => {
       initKsdj();
       // 重构显示数据
       rebuildData();
+      activeTab.value = "trend";
 		}
   })
   .catch((error) => {
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 651f749..8e3893e 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -20,7 +20,7 @@ export const useUserStore = defineStore({
     // token
     token: '',
     //用户注册信息
-    auth: [],
+    auth: []
   }),
   getters: {
     getToken(): string {
diff --git a/src/utils/webSocket/webSocket.ts b/src/utils/webSocket/webSocket.ts
index 6ecd507..96d7aa0 100644
--- a/src/utils/webSocket/webSocket.ts
+++ b/src/utils/webSocket/webSocket.ts
@@ -1,85 +1,97 @@
-import {BASE_WS_URL} from "@/config";
-import {hideLoading, showLoading} from "@/utils/uniapp";
+import { BASE_WS_URL } from "@/config";
+import { hideLoading, showLoading } from "@/utils/uniapp";
 
 export interface WebSocketReturn {
-    reconnect: () => void,
-    heartbeat: () => void,
+  reconnect: () => void,
+  heartbeat: () => void,
+  closeConnect: () => void
 }
 
 let isLoading = false
 
 function heartbeatState(state: boolean) {
-    if (!state) {
-        if (!isLoading) {
-            showLoading({title: '网络异常,重新连接中'})
-        }
-        isLoading = true
-    }
-    if (state) {
-        hideLoading()
-        isLoading = false
+  if (!state) {
+    if (!isLoading) {
+      showLoading({ title: '网络异常,重新连接中' })
     }
+    isLoading = true
+  }
+  if (state) {
+    hideLoading()
+    isLoading = false
+  }
 }
 
 export let socketSuccess = false
 
-export function useWebSocket(url: string, callback ?: Function, OBJECT ?: UniNamespace.ConnectSocketOption): WebSocketReturn {
-    let reconnectInterval: NodeJS.Timer | null = null
+export function useWebSocket(url: string, callback?: Function, OBJECT?: UniNamespace.ConnectSocketOption): WebSocketReturn {
+  let reconnectInterval: NodeJS.Timer | null = null
 
-    function heartbeat() {
-        console.log("启动心跳");
-        if (reconnectInterval) {
+  function heartbeat() {
+    console.log("启动心跳");
+    if (reconnectInterval) {
+      clearInterval(reconnectInterval)
+    }
+    reconnectInterval = setInterval(() => {
+      uni.sendSocketMessage({
+        data: JSON.stringify({
+          action: "heartbeat",
+          message: '心跳'
+        }),
+        success: () => {
+          heartbeatState(true)
+        },
+        fail: (err) => {
+          heartbeatState(false)
+          socketSuccess = false
+          console.log('心跳失败')
+          if (reconnectInterval) {
             clearInterval(reconnectInterval)
+          }
+          console.log('重新连接')
+          connect()
         }
-        reconnectInterval = setInterval(() => {
-            uni.sendSocketMessage({
-                data: JSON.stringify({
-                    action: "heartbeat",
-                    message: '心跳'
-                }),
-                success: () => {
-                    heartbeatState(true)
-                },
-                fail: (err) => {
-                    heartbeatState(false)
-                    socketSuccess = false
-                    console.log('心跳失败')
-                    if (reconnectInterval) {
-                        clearInterval(reconnectInterval)
-                    }
-                    console.log('重新连接')
-                    connect()
-                }
-            })
-        }, 3000)
-    }
+      })
+    }, 5000)
+  }
 
-    //创建一个 WebSocket 连接。
-    function connect() {
-        console.log('连接socket地址', BASE_WS_URL + url)
-        uni.connectSocket({
-            url: BASE_WS_URL + url,
-            ...OBJECT,
-            success: () => {
-                socketSuccess = true
-                console.log('socket启动成功')
-                heartbeat()
-            }
-        })
-    }
+  //创建一个 WebSocket 连接。
+  function connect() {
+    console.log('连接socket地址', BASE_WS_URL + url)
+    uni.connectSocket({
+      url: BASE_WS_URL + url,
+      ...OBJECT,
+      success: () => {
+        socketSuccess = true
+        console.log('socket启动成功')
+        heartbeat()
+      }
+    })
+  }
 
-    //监听WebSocket接受到服务器的消息事件。
-    uni.onSocketMessage(function (res) {
-        if (callback) {
-            callback('data', res)
+  function closeConnect() {
+    // uni-app 提供的关闭方法（如果支持）
+    if (typeof uni.closeSocket === 'function') {
+      uni.closeSocket({
+        success: () => {
+          console.log('WebSocket 已主动关闭');
         }
-    });
+      });
+    }
+  }
 
-    return {reconnect: connect, heartbeat}
+  //监听WebSocket接受到服务器的消息事件。
+  uni.onSocketMessage(function (res) {
+    if (callback) {
+      callback('data', res)
+    }
+  });
+
+  return { reconnect: connect, heartbeat, closeConnect }
 }
 
-export function sendSocket(value: string | ArrayBuffer, fail ?: Function) {
-    uni.sendSocketMessage({
-        data: value,
-    })
+export function sendSocket(value: string | ArrayBuffer, fail?: Function) {
+  uni.sendSocketMessage({
+    data: value,
+  })
 }
\ No newline at end of file