支付

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "axios": "^0.21.4",
         "core-js": "^3.6.5",
+        "cos-js-sdk-v5": "^1.4.20",
         "default-passive-events": "^2.0.0",
         "element-ui": "^2.15.6",
         "js-cookie": "^3.0.1",
@@ -3274,6 +3275,14 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
@@ -5131,6 +5140,14 @@
       "version": "1.0.3",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "node_modules/cos-js-sdk-v5": {
+      "version": "1.4.20",
+      "resolved": "https://registry.npmjs.org/cos-js-sdk-v5/-/cos-js-sdk-v5-1.4.20.tgz",
+      "integrity": "sha512-cGpmVoKN3iYBtWo8Lwp059fOrT4yyb/+I6fVS++Zyop/ZFJswDRkjnrASViwYd8N+hi3qWVAa6ruvvBsLutEwg==",
+      "dependencies": {
+        "@xmldom/xmldom": "^0.8.6"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "5.2.1",
       "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
@@ -17841,6 +17858,11 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw=="
+    },
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
@@ -19312,6 +19334,14 @@
       "version": "1.0.3",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "cos-js-sdk-v5": {
+      "version": "1.4.20",
+      "resolved": "https://registry.npmjs.org/cos-js-sdk-v5/-/cos-js-sdk-v5-1.4.20.tgz",
+      "integrity": "sha512-cGpmVoKN3iYBtWo8Lwp059fOrT4yyb/+I6fVS++Zyop/ZFJswDRkjnrASViwYd8N+hi3qWVAa6ruvvBsLutEwg==",
+      "requires": {
+        "@xmldom/xmldom": "^0.8.6"
+      }
+    },
     "cosmiconfig": {
       "version": "5.2.1",
       "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.21.4",
     "core-js": "^3.6.5",
+    "cos-js-sdk-v5": "^1.4.20",
     "default-passive-events": "^2.0.0",
     "element-ui": "^2.15.6",
     "js-cookie": "^3.0.1",

src/components/index/SignUp/ConfirmSignUp.vue

 <template>
   <el-dialog
-    title="微信支付"
-    :visible.sync="dialogVisible"
-    width="520px"
-    top="0"
     :close-on-click-modal="false"
-    @open="confirm()"
+    :visible.sync="dialogVisible"
     @close="cancelBtn()"
+    @open="confirm()"
+    title="微信支付"
+    top="0"
+    width="520px"
   >
     <div class="pay_code">
       <div v-show="isShowqr == 1">
@@ -26,7 +26,7 @@
         </div>
       </div>
     </div>
-    <span slot="footer" class="dialog-footer">
+    <span class="dialog-footer" slot="footer">
       <div class="btn">
         <el-button @click="updateCode()">刷新二维码</el-button>
         <!-- <el-button class="cancel" @click="cancelBtn()">取 消</el-button> -->
@@ -37,8 +37,7 @@
 
 <script>
   /* eslint-disable */
-  import {getWxConfig} from "r/index/pay";
-  import {SERVER_WS_URL} from "config/server";
+  import {checkAsync, getWxConfig} from "r/index/pay";
   import QRCode from "qrcodejs2";
 
   export default {
@@ -59,6 +58,7 @@
         serverTimeoutObj: null, //心跳倒计时
         timeoutnum: null, //断开 重连倒计时
         has_amount: "",
+        isSuccess: 0
       };
     },
     created() {
@@ -73,29 +73,26 @@
         let {data: res} = await getWxConfig({
           pay_type: 3,
         });
-        // console.log(res);
-
         if (res.code !== 200) {
           if (res.code == 400801) {
             return this.cancelBtn();
           }
           this.isShowqr = 2;
           this.message = res.message;
-
           return;
         }
         this.isShowqr = 1;
-        console.log(res.code_url);
         this.createQrCode(res.code_url);
         //初始化 websocket 链接
-        this.initWebSocket();
+        // this.initWebSocket();
+        this.checkStatus(3);
       },
       updateCode() {
         this.confirm();
       },
       createQrCode(qrCode) {
         this.removeQr();
-        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
+        let qrcode = new QRCode(this.$refs.qrCodeUrl, {
           text: qrCode, // 需要转换为二维码的内容
           width: 140,
           height: 140,
@@ -110,7 +107,7 @@
           // 获取 父 标签下的所有子节点
           let pObjs = this.$refs.qrCodeUrl.childNodes;
           // console.log(pObjs);
-          for (var i = pObjs.length - 1; i >= 0; i--) {
+          for (let i = pObjs.length - 1; i >= 0; i--) {
             // 一定要倒序，正序是删不干净的，可自行尝试
             this.$refs.qrCodeUrl.removeChild(pObjs[i]);
           }
@@ -120,52 +117,28 @@
       cancelBtn() {
         // 关闭时，删除二维码img标签
         this.removeQr();
-        this.closeWebSocket();
         this.dialogVisible = false;
-        this.$emit("closeCFSUDialog", this.dialogVisible, false);
+        this.$emit("closeCFSUDialog", this.dialogVisible, this.isSuccess);
       },
-      // 初始化 webSocket
-      initWebSocket() {
-        if (typeof WebSocket == "undefined") {
-          this.$message({
-            showClose: true,
-            message: "您的浏览器不支持WebSocket",
-            type: "error",
+      //订单状态检查跳转界面(成功-跳转到支付成功页面)
+      checkStatus(type) {
+        let order_no = window.localStorage.getItem(
+          "order_no" + this.$store.state.indexIdentity
+        )
+        checkAsync({order_no: order_no, pay_type: type}).then((res) => {
+          if (res.data.code != 200) {
+            return this.reconnectCheckStatus()
+          }
+          //code=200,跳到支付成功页面
+          this.isSuccess = 1
+          this.$message.success(res.data.message);
+          this.cancelBtn()
         });
-        } else if (!this.dialogVisible) {
-          return;
-        } else {
-          let code = this.$store.state.indexIdentity;
-          if (!this.token || this.token == "") {
-            this.token = window.localStorage.getItem("index-token-all");
-          }
-          let token = this.token;
-          const wssURL = SERVER_WS_URL + "/order?token=" + token + "&channel=pc";
-          this.websocket = new WebSocket(wssURL);
-          // console.log(this.websocket)
-          // 连接发生错误的回调方法
-          this.websocket.onerror = this.websocketOnerror;
-          // 连接成功建立的回调方法
-          this.websocket.onopen = this.websocketOnopen;
-          // 接收到消息的回调方法
-          this.websocket.onmessage = this.websocketOnmessage;
-          // 连接关闭的回调方法
-          this.websocket.onclose = this.websocketOnclose;
-          // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
-          this.websocket.onbeforeunload = this.websocketOnbeforeunload;
-          // this.websocketSend();
-          // setTimeout(() => {
-          //   this.websocketSend();
-          // }, 1000);
-        }
       },
-      reconnect() {
       //重新连接
+      reconnectCheckStatus() {
         let that = this;
-        if (!that.dialogVisible) {
-          return;
-        }
-        if (that.lockReconnect) {
+        if (that.dialogVisible === false) {
           return;
         }
         that.lockReconnect = true;
@@ -173,101 +146,9 @@
         that.timeoutnum && clearTimeout(that.timeoutnum);
         that.timeoutnum = setTimeout(function () {
           //新连接
-          that.initWebSocket();
+          that.checkStatus(3);
           that.lockReconnect = false;
-        }, 5000);
-      },
-      reset() {
-        //重置心跳
-        let that = this;
-        //清除时间
-        clearTimeout(that.timeoutObj);
-        clearTimeout(that.serverTimeoutObj);
-        //重启心跳
-        that.start();
-      },
-      start() {
-        //开启心跳
-        let self = this;
-        self.timeoutObj && clearTimeout(self.timeoutObj);
-        self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
-        self.timeoutObj = setTimeout(function () {
-          //这里发送一个心跳，后端收到后，返回一个心跳消息，
-          if (self.websocket.readyState == 1) {
-            //如果连接正常
-            self.websocket.send("heartCheck");
-          } else {
-            //否则重连
-            self.reconnect();
-          }
-          self.serverTimeoutObj = setTimeout(function () {
-            //超时关闭
-            self.websocket.close();
-          }, self.timeout);
-        }, self.timeout);
-      },
-      // 连接发生错误的回调方法
-      websocketOnerror() {
-        this.$message.error("WebSocket连接发生错误");
-        //重连
-        this.reconnect();
-      },
-      // 连接成功建立的回调方法
-      websocketOnopen() {
-        this.websocketSend();
-        // console.log("连接成功建立的回调方法");
-        //开启心跳
-        this.start();
-      },
-      websocketSend() {
-        //数据发送
-        let sendData = {
-          order_no: window.localStorage.getItem(
-            "order_no" + this.$store.state.indexIdentity
-          ),
-          cam_id: window.localStorage.getItem(
-            "campsite_id" + this.$store.state.indexIdentity
-          ),
-          token: this.token,
-        };
-        this.websocket.send(JSON.stringify(sendData));
-      },
-      // 接收到消息的回调方法
-      websocketOnmessage(event) {
-        console.log(event, "event");
-        if (event.data !== "Opened") {
-          //const data = JSON.parse(event.data);
-          // console.log("接收到消息的回调方法", event.data);
-          if (event.data == 1) {
-            this.lockReconnect = false;
-
-            this.closeWebSocket();
-            this.dialogVisible = false;
-            this.$emit("closeCFSUDialog", this.dialogVisible, true);
-            // status=6，跳转到报名成功页面
-            // this.$emit("getstatus", res.data.status.status);
-            let code = this.$store.state.indexIdentity;
-            this.$router.push("/signUp/success?code=" + code);
-          } else {
-            //收到服务器信息，心跳重置
-            this.reset();
-          }
-        }
-      },
-      // 连接关闭的回调方法
-      websocketOnclose() {
-        // console.log("连接关闭的回调方法");
-        //重连
-        this.reconnect();
-      },
-      // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常
-      websocketOnbeforeunload() {
-        this.closeWebSocket();
-        // console.log('监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常');
-      },
-      // 关闭WebSocket连接
-      closeWebSocket() {
-        this.websocket && this.websocket.close();
+        }, 2000);
       },
     },
     // 页面注销时候调用 避免连接错误
@@ -282,7 +163,7 @@
   };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
   .btn {
     text-align: center;
     padding-bottom: 24px;

src/request/base/login.js

@@ -16,7 +16,6 @@ export function loginCode(data) {
     method: 'post',
     url: '/web/code/loginCode',
     params: data
-
   })
 }
 

src/request/index/cosUpload.js

+import {request} from "../network";
+
+//cos签名-web直传 1-个人信息上传2-作业上传3-银行缴费截图上传
+export function getSignature(index) {
+  return request({
+    method: 'get',
+    url: `/web/download/getSignature/${index}`,
+  })
+}

src/request/index/homework.js

@@ -22,6 +22,8 @@ export function PostWorkStudentOss(data) {
     data
   })
 }
+
+
 //下载
 export function downloadTeacherWork(data) {
   data['identity'] = store.state.indexIdentity;
@@ -31,6 +33,7 @@ export function downloadTeacherWork(data) {
     params: data
   })
 }
+
 //删除图片
 export function delPic(data) {
   data['identity'] = store.state.indexIdentity;
@@ -50,6 +53,7 @@ export function getStudentWork(data) {
     params: data
   })
 }
+
 // 提交营地作业
 export function subStudentWork(data) {
   data['identity'] = store.state.indexIdentity;

src/request/index/pay.js

@@ -12,3 +12,14 @@ export function getWxConfig(data) {
     params: data
   })
 }
+
+//订单状态检查跳转界面(成功-跳转到支付成功页面)
+export function checkAsync(data) {
+  data['identity'] = store.state.indexIdentity;
+  return request({
+    method: 'post',
+    url: '/web/pay/async',
+    params: data
+  })
+}
+

src/store/index.js

@@ -25,6 +25,7 @@ let state = {
   token: localStorage.getItem("index-token-all") || "",
   isLogin: localStorage.getItem("isLogin") || "0", // 只有1为已登录
   activeIndex: window.localStorage.getItem('index-active-path') || "0",
+  isToSuccess:0,//订单状态检查跳转界面(成功-跳转到支付成功页面)
 };
 
 export default new Vuex.Store({

src/views/base/home/Home.vue

@@ -62,7 +62,7 @@
       <!--查看更多-->
       <div class="flex-line">
         <div class="line"></div>
-        <div class="view-more" @click="viewMore">查看更多</div>
+        <div @click="viewMore" class="view-more">查看更多</div>
       </div>
       <!-- 学生感想和体会   -->
       <div>
@@ -74,9 +74,6 @@
                class="reflections_item" v-for="(item, index) in reflectionsList">
             <div class="item_float">
               <div class="item_float_content">
-                <div :key="index2" class="tag" v-for="(item2, index2) in item.tag">
-                  {{item2}}
-                </div>
                 <div class="item_name">
                   <div>
                     <div class="name">
@@ -89,11 +86,18 @@
                 </div>
               </div>
             </div>
-            <div>
+            <div class="reflections_content">
+              <div class="tags">
+                <div :key="index2" class="tag" v-for="(item2, index2) in item.tag">
+                  {{item2}}
+                </div>
+              </div>
+
               <div class="item_text">
                 {{item.think}}
               </div>
             </div>
+
           </div>
         </div>
       </div>
@@ -165,7 +169,7 @@
     },
     methods: {
       // 查看更多
-      viewMore(){
+      viewMore() {
         this.$router.push('/active');
       },
       getHot() {
@@ -174,7 +178,8 @@
             return this.$message.error(res.data.msg);
           }
           this.activeList = res.data.data;
-        }).catch(err=>{})
+        }).catch(err => {
+        })
       },
     }
   }
@@ -229,7 +234,6 @@
   }
 
   .flex-line {
-    width: 80%;
     margin: 15px auto;
     display: flex;
     flex-flow: row;
@@ -245,16 +249,15 @@
       font-size: 16px;
       width: 74px;
       margin-left: 40px;
-      &:hover{
+
+      &:hover {
         cursor: pointer;
-        /*font-weight: bold;*/
         color: var(--all_color);
       }
     }
   }
 
   .reflectionList {
-    /*margin-top: 30px;*/
     display: flex;
     flex-flow: wrap;
     font-size: 12px;
@@ -263,12 +266,11 @@
       flex-basis: 48%;
       margin: 1.75% 0;
       background-color: #ffffff;
-      height: 10vw;
       min-height: 173px;
       position: relative;
       width: 200px;
       border-radius: 0 0 4px 4px;
-      border: 1px solid #aaaaaa;
+      border: 1px solid #cccccc;
 
       &:nth-child(2n+2) {
         margin: 1.75% 0 1.75% 3.5%;
@@ -287,15 +289,6 @@
           transform: translateY(-50%);
         }
 
-        .tag {
-          font-size: 14px;
-          display: flex;
-          background-color: #D7D7D7;
-          padding: 0 9px;
-          margin-right: 10px;
-          line-height: 40px;
-        }
-
         .item_name {
           line-height: 40px;
           font-size: 15px;
@@ -305,14 +298,37 @@
         }
 
         .name_line {
-          border-bottom: 2px solid #D7D7D7;
+          border-bottom: 2px solid #409EFF;
+        }
+      }
+
+      .reflections_content {
+        margin: 7%;
+      }
+
+      .tags {
+        display: flex;
+        padding: 2% 0;
 
+        :first-child {
+          background-color: #FEB370;
         }
+
+        :nth-child(2) {
+          background-color: #409EFF;
+          color: #ffffff;
+        }
+      }
+
+      .tag {
+        font-size: 14px;
+        padding: 5px 9px;
+        margin-right: 10px;
+        border-radius: 4px;
       }
 
       .item_text {
         font-size: 14px;
-        margin: 7% 3% 3%;
         line-height: 24px;
         white-space: normal;
         overflow: hidden;