11

src/components/index/Header.vue

@@ -26,10 +26,10 @@
             <i class="el-icon-arrow-down el-icon--right"></i>
           </div>
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="1" @click="toCenter">
+            <!-- <el-dropdown-item command="1" @click="toCenter">
               <i class="el-icon-user"></i>个人中心
             </el-dropdown-item
-            >
+            > -->
             <el-dropdown-item command="2" @click="logout">
               <i class="el-icon-switch-button"></i>退出
             </el-dropdown-item

src/components/index/SignUp/ConfirmSignUp.vue

@@ -71,6 +71,7 @@ export default {
         pay_type: 1,
       });
       // console.log(res);
+      
       if (res.code !== 200) {
         if (res.code == 400801) {
           return this.cancelBtn();

src/components/index/SignUp/paying.vue

@@ -53,6 +53,33 @@
         </div>
       </span>
     </el-dialog> -->
+    <!-- 微信支付宝2选1 -->
+    <el-dialog
+      title="支付方式"
+      :visible.sync="dialogChoose"
+      width="40%"
+      :before-close="handleClose"
+    >
+      <div class="choose">
+        <div class="flex img_choose">
+          <img
+            src="../../../assets/img/paying/weichat.png"
+            alt=""
+            @click="toWeichat"
+          />
+          <img
+            src="../../../assets/img/paying/paybao.png"
+            alt=""
+            @click="toPaybao"
+          />
+        </div>
+        <div class="text_choose">请选择支付方式</div>
+        <div class="btn">
+          <el-button @click="dialogChoose = false">确 定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 微信支付 -->
     <confirm-sign-up
       :confirmSignUpDialogFu="confirmSignUpDialogFu"
       @closeCFSUDialog="closeCFSUDialog"
@@ -74,6 +101,7 @@ export default {
   },
   data() {
     return {
+      dialogChoose: false, //付款方式选择
       confirmSignUpDialogFu: false, // 控制确认报名弹框的显示与隐藏
       personalInfo: {},
       camp_name: "", //营地名称
@@ -90,26 +118,205 @@ export default {
     this.getAccount();
   },
   methods: {
+    handleClose(done) {
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          done();
+        })
+        .catch((_) => {});
+    },
     // 子组件触发，关闭确认报名弹框
     closeCFSUDialog(val, type) {
-      this.confirmSignUpDialogFu = val;
+      console.log(val, "val");
       if (type) {
         clearInterval(this.timer);
       }
     },
-
-    paying() {
-      console.log(111)
+    toWeichat() {
+      this.dialogChoose = false;
+      this.confirmSignUpDialogFu = true;
+      // getWxConfig({
+      //   pay_type: 1,
+      // }).then((res) => {
+      //   console.log(res, "getWxConfig");
+      //   if (res.data.code != 200) {
+      //     return this.$message.error(res.data.message);
+      //   }
+      //   this.status_wx = res.data.status;
+      //   this.$emit("getstatus", res.data.status);
+      //   // console.log(this.status_wx, " this.status_wx");
+      //   this.signUpInit(this.status_wx);
+      // });
+    },
+    toPaybao() {
       getWxConfig({
-        pay_type: 1,
+        pay_type: 2,
       }).then((res) => {
         console.log(res, "getWxConfig");
-        // this.status_wx = res.data.status;
+        if (res.data.code != 200) {
+          return this.$message.error(res.data.message);
+        }
+        /* 此处form就是后台返回接收到的数据 */
+        var form = res.data.data;
+        console.log(form);
+        const div = document.createElement("div");
+        div.innerHTML = form;
+        document.body.appendChild(div);
+        document.forms[0].acceptCharset = "GBK"; //保持与支付宝默认编码格式一致，如果不一致将会出现：调试错误，请回到请求来源地.
+        // 重新发起请求，错误代码 invalid-signature 错误原因: 验签出错，建议检查签名字符串或签名私钥与应用公钥是否匹配
+        document.forms[0].submit(); //
+        console.log(res.data.status, " this.status_wx");
         this.$emit("getstatus", res.data.status);
-        console.log(this.status_wx, " this.status_wx");
-        this.signUpInit(this.status_wx);
+        this.signUpInit(res.data.status);
+        //初始化 websocket 链接
+        this.initWebSocket();
       });
-      // return;
+    },
+    // 初始化 webSocket
+    initWebSocket() {
+      if (typeof WebSocket == "undefined") {
+        this.$message({
+          showClose: true,
+          message: "您的浏览器不支持WebSocket",
+          type: "error",
+        });
+      } else if (!this.dialogVisible) {
+        return;
+      } else {
+        let code = this.$store.state.indexIdentity;
+        if (!this.token || this.token == "") {
+          this.token = window.localStorage.getItem("index-token" + code);
+        }
+        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() {
+      //重新连接
+      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" + 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);
+        } else {
+          //收到服务器信息，心跳重置
+          this.reset();
+        }
+      }
+    },
+    // 连接关闭的回调方法
+    websocketOnclose() {
+      // console.log("连接关闭的回调方法");
+      //重连
+      this.reconnect();
+    },
+    // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常
+    websocketOnbeforeunload() {
+      this.closeWebSocket();
+      // console.log('监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常');
+    },
+    // 关闭WebSocket连接
+    closeWebSocket() {
+      this.websocket && this.websocket.close();
+    },
+
+    paying() {
+      this.dialogChoose = true;
     },
     signUpInit(status_wx) {
       signUpInit({}).then((res) => {
@@ -212,39 +419,57 @@ export default {
     line-height: 21px;
   }
 }
-.pay_code {
+.choose {
   text-align: center;
-  :nth-child(1) {
-    font-size: 14px;
-    font-weight: 500;
-    color: #12141c;
-    line-height: 14px;
-    span {
-      font-size: 13px !important;
-      color: var(--color);
-    }
-  }
-  :nth-child(2) {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--color);
-    line-height: 24px;
+  .img_choose {
+    justify-content: space-around;
+    img {
+      width: 38%;
+      cursor: pointer;
     }
-  :nth-child(4) {
-    font-size: 14px;
-    font-weight: 500;
-    color: #333333;
-    line-height: 16px;
-    span {
-      font-size: 17px !important;
-      color: var(--color);
   }
+
+  .text_choose {
+    font-size: 15px;
+    margin-top: 20px;
   }
-  :nth-child(5) {
-    font-size: 12px;
-    font-weight: 500;
-    color: #666666;
-    line-height: 12px;
+  .btn .el-button {
+    width: 120px !important;
   }
 }
+// .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: var(--color);
+//     }
+//   }
+//   :nth-child(2) {
+//     font-size: 14px;
+//     font-weight: 500;
+//     color: var(--color);
+//     line-height: 24px;
+//   }
+//   :nth-child(4) {
+//     font-size: 14px;
+//     font-weight: 500;
+//     color: #333333;
+//     line-height: 16px;
+//     span {
+//       font-size: 17px !important;
+//       color: var(--color);
+//     }
+//   }
+//   :nth-child(5) {
+//     font-size: 12px;
+//     font-weight: 500;
+//     color: #666666;
+//     line-height: 12px;
+//   }
+// }
 </style>