Skip to content

C
campSite
Commit 31c22665 authored by 杨梦雪's avatar 杨梦雪
Browse files
Options

11

parent 13401a66
Hide whitespace changes
Inline Side-by-side
Showing with 267 additions and 41 deletions
src/components/index/Header.vue
View file @ 31c22665
......@@ -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
View file @ 31c22665
......@@ -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
View file @ 31c22665
......@@ -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;
this.$emit("getstatus", res.data.status);
console.log(this.status_wx, " this.status_wx");
this.signUpInit(this.status_wx);
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);
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);
.img_choose {
justify-content: space-around;
img {
width: 38%;
cursor: pointer;
}
}
: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);
}
.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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment