111

package-lock.json

@@ -12,6 +12,7 @@
         "core-js": "^3.6.5",
         "element-ui": "^2.15.6",
         "node-sass": "^6.0.1",
+        "qrcodejs2": "^0.0.2",
         "sass": "^1.42.1",
         "vue": "^2.6.11",
         "vue-router": "^3.5.1",
@@ -11987,6 +11988,11 @@
         "teleport": ">=0.2.0"
       }
     },
+    "node_modules/qrcodejs2": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/qrcodejs2/-/qrcodejs2-0.0.2.tgz",
+      "integrity": "sha1-Rlr+Xjnxn6zsuTLBH3oYYQkUauE="
+    },
     "node_modules/qs": {
       "version": "6.5.2",
       "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
@@ -25043,6 +25049,11 @@
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
       "dev": true
     },
+    "qrcodejs2": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/qrcodejs2/-/qrcodejs2-0.0.2.tgz",
+      "integrity": "sha1-Rlr+Xjnxn6zsuTLBH3oYYQkUauE="
+    },
     "qs": {
       "version": "6.5.2",
       "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="

package.json

@@ -12,6 +12,7 @@
     "core-js": "^3.6.5",
     "element-ui": "^2.15.6",
     "node-sass": "^6.0.1",
+    "qrcodejs2": "^0.0.2",
     "sass": "^1.42.1",
     "vue": "^2.6.11",
     "vue-router": "^3.5.1",

src/common/validator.js

@@ -95,4 +95,6 @@ export default {
       callback()
     }
   },
+
+  
 }

src/components/index/SignUp/ConfirmSignUp.vue

+<template>
+  <el-dialog
+    title="微信支付"
+    :visible.sync="dialogVisible"
+    width="520px"
+    top="0"
+    :close-on-click-modal="false"
+    @open="confirm()"
+  >
+    <div class="pay_code">
+      <div v-if="isShowqr">
+        <div class="pay_time">支付剩余时间<span>15分30秒</span></div>
+        <div>￥150</div>
+        <div class="img_qr">
+          <div class="qrcode" ref="qrCodeUrl"></div>
+        </div>
+        <div>请使用<span>微信</span>扫一扫，扫描二维码支付</div>
+        <div>手机完成支付后，请等待系统处理，在此之前请勿关闭窗口</div>
+      </div>
+      <div v-if="!isShowqr">
+        <div class="info_2" style="color: #000; font-size: 18px">
+          <i class="el-icon-warning"></i>{{ message }}
+        </div>
+      </div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <div class="btn">
+        <el-button @click="dialogVisible = false">刷新二维码</el-button>
+        <el-button class="cancel" @click="cancelBtn()">取 消</el-button>
+      </div>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+/* eslint-disable */
+import { getWxConfig } from "r/index/pay.js";
+import { SERVER_WS_URL } from "config/server";
+import QRCode from "qrcodejs2";
+export default {
+  name: "ConfirmSignUp",
+  props: {
+    confirmSignUpDialogFu: Boolean,
+  },
+  data() {
+    return {
+      dialogVisible: this.confirmSignUpDialogFu,
+      message: "",
+      isShowqr: true, // 展示支付二维码
+      token: "",
+      websocket: null, //websocket连接
+      lockReconnect: false, //是否真正建立连接
+      timeout: 28 * 1000, //30秒一次心跳
+      timeoutObj: null, //心跳心跳倒计时
+      serverTimeoutObj: null, //心跳倒计时
+      timeoutnum: null, //断开 重连倒计时
+    };
+  },
+  created() {
+    this.token = window.localStorage.getItem("index-token");
+  },
+  methods: {
+    async confirm() {
+      let { data: res } = await getWxConfig({
+        exam_uuid: this.examuuid,
+        pay_type: 1,
+      });
+      console.log(res);
+      if (res.code !== 200) {
+        if (res.code == 400801) {
+          return this.cancelBtn();
+        }
+        this.message = res.message;
+        this.isShowqr = false;
+        return;
+      }
+
+      this.isShowqr = true;
+      this.createQrCode(res.code_url);
+      //初始化 websocket 链接
+      this.initWebSocket();
+    },
+    createQrCode(qrCode) {
+      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
+        text: qrCode, // 需要转换为二维码的内容
+        width: 120,
+        height: 120,
+        colorDark: "#000000",
+        colorLight: "#ffffff",
+        correctLevel: QRCode.CorrectLevel.H,
+      });
+    },
+    // 确认,关闭弹框，修改父组件的值
+    cancelBtn() {
+      // 关闭时，删除二维码img标签
+      if (this.$refs.qrCodeUrl) {
+        // 获取 父 标签下的所有子节点
+        let pObjs = this.$refs.qrCodeUrl.childNodes;
+        console.log(pObjs);
+        for (var i = pObjs.length - 1; i >= 0; i--) {
+          // 一定要倒序，正序是删不干净的，可自行尝试
+          this.$refs.qrCodeUrl.removeChild(pObjs[i]);
+        }
+      }
+
+      this.closeWebSocket();
+      this.dialogVisible = false;
+      this.$emit("closeCFSUDialog", this.dialogVisible, false);
+    },
+    // 初始化 webSocket
+    initWebSocket() {
+      if (typeof WebSocket == "undefined") {
+        this.$message({
+          showClose: true,
+          message: "您的浏览器不支持WebSocket",
+          type: "error",
+        });
+      } else if (!this.dialogVisible) {
+        return;
+      } else {
+        if (!this.token || this.token == "") {
+          this.token = window.localStorage.getItem("index-token");
+        }
+        const wssURL =
+          SERVER_WS_URL + "/city?token=" + this.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() {
+      //重新连接
+      let that = this;
+      if (!that.dialogVisible) {
+        return;
+      }
+      if (that.lockReconnect) {
+        return;
+      }
+      that.lockReconnect = true;
+      //没连接上会一直重连，设置延迟避免请求过多
+      that.timeoutnum && clearTimeout(that.timeoutnum);
+      that.timeoutnum = setTimeout(function () {
+        //新连接
+        that.initWebSocket();
+        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"),
+        exam_uuid: window.localStorage.getItem("exam_uuid"),
+        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);
+
+          this.$router.replace({ name: "applysuccess" });
+        } else {
+          //收到服务器信息，心跳重置
+          this.reset();
+        }
+      }
+    },
+    // 连接关闭的回调方法
+    websocketOnclose() {
+      console.log("连接关闭的回调方法");
+      //重连
+      this.reconnect();
+    },
+    // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常
+    websocketOnbeforeunload() {
+      this.closeWebSocket();
+      // console.log('监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常');
+    },
+    // 关闭WebSocket连接
+    closeWebSocket() {
+      this.websocket && this.websocket.close();
+    },
+  },
+  // 页面注销时候调用 避免连接错误
+  // destroyed() {
+  //   this.closeWebSocket();
+  // },
+  watch: {
+    confirmSignUpDialogFu() {
+      this.dialogVisible = this.confirmSignUpDialogFu;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.pay_code {
+  text-align: center;
+  :nth-child(1) {
+    font-size: 14px;
+    font-weight: 500;
+    color: #12141c;
+    line-height: 14px;
+    span {
+      font-size: 13px !important;
+      color: #60194a;
+    }
+  }
+  :nth-child(2) {
+    font-size: 14px;
+    font-weight: 500;
+    color: #60194a;
+    line-height: 24px;
+  }
+  :nth-child(4) {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333333;
+    line-height: 16px;
+    span {
+      font-size: 17px !important;
+      color: #60194a;
+    }
+  }
+  :nth-child(5) {
+    font-size: 12px;
+    font-weight: 500;
+    color: #666666;
+    line-height: 12px;
+  }
+}
+// .info_2 {
+//   text-align: center;
+//   margin: 10px 0;
+//   line-height: 30px !important;
+//   .el-icon-warning {
+//     font-size: 30px;
+//     vertical-align: bottom;
+//     margin-right: 10px;
+//     color: #ee7602;
+//   }
+// }
+// .img_qr {
+//   width: 140px;
+//   height: 140px;
+//   padding: 10px;
+//   border: 1px solid #000;
+//   margin: 0 auto;
+//   img {
+//     width: 120px;
+//     height: 120px;
+//   }
+// }
+// ::v-deep .el-dialog__body {
+//   padding: 0 !important;
+// }
+// ::v-deep .el-icon-close:before {
+//   content: "";
+// }
+// ::v-deep .el-dialog__footer {
+//   padding: 30px 40px !important;
+//   text-align: center;
+//   .el-button {
+//     margin: 0 !important;
+//   }
+// }
+</style>

src/components/index/SignUp/paying.vue

@@ -36,12 +36,12 @@
       </div>
     </div>
     <!-- 支付扫码框 -->
-    <el-dialog title="微信支付" :visible.sync="dialogVisible" width="20%">
+    <!-- <el-dialog title="微信支付" :visible.sync="dialogVisible" width="20%">
       <div class="pay_code">
         <div class="pay_time">支付剩余时间<span>15分30秒</span></div>
         <div>￥150</div>
         <div class="pay_img">
-          <img src="" alt="" />
+         <div class="qrcode" ref="qrCodeUrl"></div>
         </div>
         <div>请使用<span>微信</span>扫一扫，扫描二维码支付</div>
         <div>手机完成支付后，请等待系统处理，在此之前请勿关闭窗口</div>
@@ -51,23 +51,36 @@
           <el-button @click="dialogVisible = false">刷新二维码</el-button>
         </div>
       </span>
-    </el-dialog>
+    </el-dialog> -->
+    <confirm-sign-up
+      :confirmSignUpDialogFu="confirmSignUpDialogFu"
+      @closeCFSUDialog="closeCFSUDialog"
+    ></confirm-sign-up>
   </div>
 </template>
 
 <script>
 /* eslint-disable */
+import ConfirmSignUp from "c/index/SignUp/ConfirmSignUp";
 export default {
   name: "Paying",
+  components: {
+    ConfirmSignUp,
+  },
   data() {
     return {
-      dialogVisible: false,
+      confirmSignUpDialogFu: false, // 控制确认报名弹框的显示与隐藏
     };
   },
   methods: {
-    paying() {
-      this.dialogVisible = true;
+    // 子组件触发，关闭确认报名弹框
+    closeCFSUDialog(val, type) {
+      this.confirmSignUpDialogFu = val;
+      if (type) {
+        clearInterval(this.timer);
+      }
     },
+    paying() {},
   },
 };
 </script>

src/request/index/network.js

@@ -13,6 +13,47 @@ import {
 } from 'element-ui'
 import router from '@/router'
 
+const instance = axios.create({
+  baseURL: SERVER_URL,
+  timeout: 60000,
+  method: "post",
+  headers: {
+    "Content-Type": "application/x-www-form-urlencoded",
+  },
+});
+
+instance.interceptors.request.use(
+  (config) => {
+    console.log(config);
+    if (config.method === "post" && !config.notQs) {
+      config.data = qs.stringify(config.data);
+    }
+    if (config.url.indexOf(SERVER_URL) === -1) {
+      console.log("upload");
+      config.headers["Content-Type"] = "multipart/form-data";
+    } else {
+      config.headers["Content-Type"] = "application/x-www-form-urlencoded";
+    }
+    // 调用接口请求添加token认证信息
+    let token = localStorage.getItem("index-token");
+    if (token) config.headers.authorization = token;
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+instance.interceptors.response.use(
+  (response) => {
+    return response.data;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+export default instance;
+
 // 正在进行中的请求列表
 const reqList = []
 
@@ -51,8 +92,7 @@ let loadingInstance = null
 export function request(config) {
   const instance = axios.create({
     baseURL: process.env.NODE_ENV === 'development' ?
-      DEVELOPMENT_SERVER_URL :
-      SERVER_URL,
+      DEVELOPMENT_SERVER_URL : SERVER_URL,
     timeout: 60 * 1000
   })
   instance.interceptors.request.use(
@@ -180,9 +220,28 @@ export function request(config) {
     }
   )
 
+
   return instance(config)
 }
 
+  /**
+   * axios:upload 文件上传方法
+   * @param url
+   * @param data
+   * @returns {Promise}
+   */
+  export function upload(url, data = {}) {
+    return new Promise((resolve, reject) => {
+      axios.post(url, data).then(
+        (response) => {
+          resolve(response);
+        },
+        (err) => {
+          reject(err);
+        }
+      );
+    });
+  }
 // 合并多个请求
 export function allRequest(arrRequest) {
   return axios.all(arrRequest)

src/request/index/pay.js

+/* eslint-disable */
+import {
+  request
+} from './network'
+
+const identity = localStorage.getItem('index-identity')
+// 报名初始化
+export function getWxConfig(data) {
+  data['identity'] = identity;
+  return request({
+    method: 'post',
+    url: '/web/pay/getWxPreselectionConfig',
+    params: data
+  })
+}

src/request/index/signUp.js

@@ -50,7 +50,7 @@ export function getAchievementOss(data) {
   return request({
     method: 'post',
     url: '/web/signUp/getAchievementOss',
-    params: data
+    data
   })
 }