Skip to content

C
campSite
Commit 97d2bb9c authored by 杨梦雪's avatar 杨梦雪
Browse files
Options

111

parent b4cc10cd
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 858 additions and 137 deletions
package-lock.json
View file @ 97d2bb9c
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
"core-js": "^3.6.5", "core-js": "^3.6.5",
"element-ui": "^2.15.6", "element-ui": "^2.15.6",
"node-sass": "^6.0.1", "node-sass": "^6.0.1",
"qrcodejs2": "^0.0.2",
"sass": "^1.42.1", "sass": "^1.42.1",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
...@@ -11987,6 +11988,11 @@ ...@@ -11987,6 +11988,11 @@
"teleport": ">=0.2.0" "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": { "node_modules/qs": {
"version": "6.5.2", "version": "6.5.2",
"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==", "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
...@@ -25043,6 +25049,11 @@ ...@@ -25043,6 +25049,11 @@
"integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=", "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
"dev": true "dev": true
}, },
"qrcodejs2": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/qrcodejs2/-/qrcodejs2-0.0.2.tgz",
"integrity": "sha1-Rlr+Xjnxn6zsuTLBH3oYYQkUauE="
},
"qs": { "qs": {
"version": "6.5.2", "version": "6.5.2",
"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==" "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
......
package.json
View file @ 97d2bb9c
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
"core-js": "^3.6.5", "core-js": "^3.6.5",
"element-ui": "^2.15.6", "element-ui": "^2.15.6",
"node-sass": "^6.0.1", "node-sass": "^6.0.1",
"qrcodejs2": "^0.0.2",
"sass": "^1.42.1", "sass": "^1.42.1",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
......
src/common/validator.js
View file @ 97d2bb9c
...@@ -95,4 +95,6 @@ export default { ...@@ -95,4 +95,6 @@ export default {
callback() callback()
} }
}, },
} }
src/components/index/SignUp/ConfirmSignUp.vue 0 → 100644
View file @ 97d2bb9c
<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
View file @ 97d2bb9c
...@@ -36,12 +36,12 @@ ...@@ -36,12 +36,12 @@
</div> </div>
</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_code">
<div class="pay_time">支付剩余时间<span>15分30秒</span></div> <div class="pay_time">支付剩余时间<span>15分30秒</span></div>
<div>￥150</div> <div>￥150</div>
<div class="pay_img"> <div class="pay_img">
<img src="" alt="" /> <div class="qrcode" ref="qrCodeUrl"></div>
</div> </div>
<div>请使用<span>微信</span>扫一扫，扫描二维码支付</div> <div>请使用<span>微信</span>扫一扫，扫描二维码支付</div>
<div>手机完成支付后，请等待系统处理，在此之前请勿关闭窗口</div> <div>手机完成支付后，请等待系统处理，在此之前请勿关闭窗口</div>
...@@ -51,23 +51,36 @@ ...@@ -51,23 +51,36 @@
<el-button @click="dialogVisible = false">刷新二维码</el-button> <el-button @click="dialogVisible = false">刷新二维码</el-button>
</div> </div>
</span> </span>
</el-dialog> </el-dialog> -->
<confirm-sign-up
:confirmSignUpDialogFu="confirmSignUpDialogFu"
@closeCFSUDialog="closeCFSUDialog"
></confirm-sign-up>
</div> </div>
</template> </template>
<script> <script>
/* eslint-disable */ /* eslint-disable */
import ConfirmSignUp from "c/index/SignUp/ConfirmSignUp";
export default { export default {
name: "Paying", name: "Paying",
components: {
ConfirmSignUp,
},
data() { data() {
return { return {
dialogVisible: false, confirmSignUpDialogFu: false, // 控制确认报名弹框的显示与隐藏
}; };
}, },
methods: { methods: {
paying() { // 子组件触发，关闭确认报名弹框
this.dialogVisible = true; closeCFSUDialog(val, type) {
this.confirmSignUpDialogFu = val;
if (type) {
clearInterval(this.timer);
}
}, },
paying() {},
}, },
}; };
</script> </script>
......
src/components/index/SignUp/referInfo.vue
View file @ 97d2bb9c
This diff is collapsed.
src/request/index/network.js
View file @ 97d2bb9c
...@@ -13,6 +13,47 @@ import { ...@@ -13,6 +13,47 @@ import {
} from 'element-ui' } from 'element-ui'
import router from '@/router' 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 = [] const reqList = []
...@@ -51,8 +92,7 @@ let loadingInstance = null ...@@ -51,8 +92,7 @@ let loadingInstance = null
export function request(config) { export function request(config) {
const instance = axios.create({ const instance = axios.create({
baseURL: process.env.NODE_ENV === 'development' ? baseURL: process.env.NODE_ENV === 'development' ?
DEVELOPMENT_SERVER_URL : DEVELOPMENT_SERVER_URL : SERVER_URL,
SERVER_URL,
timeout: 60 * 1000 timeout: 60 * 1000
}) })
instance.interceptors.request.use( instance.interceptors.request.use(
...@@ -78,7 +118,7 @@ export function request(config) { ...@@ -78,7 +118,7 @@ export function request(config) {
const token = localStorage.getItem('index-token') const token = localStorage.getItem('index-token')
if (token) { if (token) {
// console.log(token) // console.log(token)
config.headers.token = token config.headers.token = token
} else { } else {
window.localStorage.clear() window.localStorage.clear()
...@@ -180,9 +220,28 @@ export function request(config) { ...@@ -180,9 +220,28 @@ export function request(config) {
} }
) )
return instance(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) { export function allRequest(arrRequest) {
return axios.all(arrRequest) return axios.all(arrRequest)
......
src/request/index/pay.js 0 → 100644
View file @ 97d2bb9c
/* 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
View file @ 97d2bb9c
...@@ -50,7 +50,7 @@ export function getAchievementOss(data) { ...@@ -50,7 +50,7 @@ export function getAchievementOss(data) {
return request({ return request({
method: 'post', method: 'post',
url: '/web/signUp/getAchievementOss', url: '/web/signUp/getAchievementOss',
params: data data
}) })
} }
......
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