Skip to content

C
campSite
Commit 89a5bd49 authored by 杨梦雪's avatar 杨梦雪
Browse files
Options

支付

parent 8c223690
Hide whitespace changes
Inline Side-by-side
Showing with 1333 additions and 1344 deletions
package-lock.json
View file @ 89a5bd49
......@@ -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
View file @ 89a5bd49
......@@ -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
View file @ 89a5bd49
<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);
},
// 初始化 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-all");
this.$emit("closeCFSUDialog", this.dialogVisible, this.isSuccess);
},
//订单状态检查跳转界面(成功-跳转到支付成功页面)
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()
}
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);
}
//code=200,跳到支付成功页面
this.isSuccess = 1
this.$message.success(res.data.message);
this.cancelBtn()
});
},
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/components/index/SignUp/paying.vue
View file @ 89a5bd49
<template>
<div class="paying">
<div class="paying">
<div>
<span class="pay_titile">报名信息</span>
<div class="pay_top">
<div>营地名称：{{ camp_name }}</div>
<div>真实姓名：{{ personalInfo.name }}</div>
<div>身份证号：{{ personalInfo.id_card }}</div>
<!-- <div>缴费时间：{{ personalInfo.create_time }}</div> -->
<div>报名费用： {{ has_amount }}元</div>
</div>
<div class="line"></div>
<div class="pay-money flex">
<div>
<span class="pay_titile">报名信息</span>
<div class="pay_top">
<div>营地名称：{{ camp_name }}</div>
<div>真实姓名：{{ personalInfo.name }}</div>
<div>身份证号：{{ personalInfo.id_card }}</div>
<!-- <div>缴费时间：{{ personalInfo.create_time }}</div> -->
<div>报名费用： {{ has_amount }}元</div>
</div>
<div class="line"></div>
<div class="pay-money flex">
<div>
报名费用 ：<span>￥{{ has_amount }} </span>
</div>
<div class="btn">
<el-button v-if="$store.state.human == 1" @click="paying()"
>上传缴费截图
</el-button>
<el-button v-else @click="paying()">立即支付</el-button>
</div>
</div>
报名费用 ：<span>￥{{ has_amount }} </span>
</div>
<div class="btn">
<el-button @click="paying()" v-if="$store.state.human == 1"
>上传缴费截图
</el-button>
<el-button @click="paying()" v-else>立即支付</el-button>
</div>
</div>
<div>
<!-- 清华大学人文学院 “中国现当代文学经典研读”学分课程 -->
<div
class="pay_bottom"
v-if="
<div>
<!-- 清华大学人文学院 “中国现当代文学经典研读”学分课程 -->
<div
class="pay_bottom"
v-if="
$store.state.human == 1 &&
$store.state.indexIdentity == '6c6884d1c83040ee8ca17736a8d67b93'
"
>
<div class="cc"><span class="starIcon">*</span>注意事项：</div>
<div>
请参照清华大学人文学院“中国现当代文学经典研读”学分课程简章中缴费方式。
<span class="cc">汇款或扫码支付后请务必保留付款截图</span>。
</div>
<div>
1、银行转账汇款时，请在附言/用途栏中注明 "21069363022 +学员姓名"。
</div>
<div>2、扫码支付时，请在备注栏中注明“学员姓名”。</div>
<div>3、未满18岁的学员，缴费请由家长支付。</div>
</div>
<!-- 清华历史课“中国历史通解”（第二期）学分课程 -->
<div
class="pay_bottom"
v-else-if="
>
<div class="cc"><span class="starIcon">*</span>注意事项：</div>
<div>
请参照清华大学人文学院“中国现当代文学经典研读”学分课程简章中缴费方式。
<span class="cc">汇款或扫码支付后请务必保留付款截图</span>。
</div>
<div>
1、银行转账汇款时，请在附言/用途栏中注明 "21069363022 +学员姓名"。
</div>
<div>2、扫码支付时，请在备注栏中注明“学员姓名”。</div>
<div>3、未满18岁的学员，缴费请由家长支付。</div>
</div>
<!-- 清华历史课“中国历史通解”（第二期）学分课程 -->
<div
class="pay_bottom"
v-else-if="
$store.state.human == 1 &&
$store.state.indexIdentity == '479205eb2dbf48fcbbeaee710a9b9d24'
"
>
<div class="cc"><span class="starIcon">*</span>注意事项：</div>
<div>1、支付成功后请务必保留付款截图。</div>
<div>
2、银行转账汇款时，请在附言/用途栏中注明“22069363005+学员姓名”。
</div>
<div>3、未满18岁的学员，缴费请由家长支付。</div>
<div class="cc" style="margin-top: 10px">
<span class="starIcon">*</span>汇款信息：
</div>
<div>收款单位：清华大学</div>
<div>帐号：0200004509089131550</div>
<div>开户行：工行北京分行海淀西区支行</div>
<div>附言/用途：请在附言栏中注明“22069363005+学员姓名”</div>
</div>
<div v-else class="pay_bottom">
<div class="cc"><span class="starIcon">*</span>注意事项：</div>
<div>
1、学生支付完成后请不要立即关闭浏览器，等待支付完成返回本页面，以确认支付完成。
</div>
<div>
2、支付确认后，将不能再修改姓名和身份证号，请在支付前核对信息。
</div>
<div>
3、如果在完成支付后，状态许久未更新为“报名成功”，请仔细核查自己支付账号是否已扣费。
</div>
<div>
4、对于多次缴费的学生，除生效一笔之外其他重复支付的费用会在缴费结束阶段统一退费。
</div>
<!-- <div>5、网上缴费如有问题，请致电项目组工作人员：XXX-XXXXXXXXX。</div> -->
</div>
</div>
>
<div class="cc"><span class="starIcon">*</span>注意事项：</div>
<div>1、支付成功后请务必保留付款截图。</div>
<div>
2、银行转账汇款时，请在附言/用途栏中注明“22069363005+学员姓名”。
</div>
<div>3、未满18岁的学员，缴费请由家长支付。</div>
<div class="cc" style="margin-top: 10px">
<span class="starIcon">*</span>汇款信息：
</div>
<div>收款单位：清华大学</div>
<div>帐号：0200004509089131550</div>
<div>开户行：工行北京分行海淀西区支行</div>
<div>附言/用途：请在附言栏中注明“22069363005+学员姓名”</div>
</div>
<!-- 支付扫码框 -->
<!-- <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">
<div class="qrcode" ref="qrCodeUrl"></div>
</div>
<div>请使用<span>微信</span>扫一扫，扫描二维码支付</div>
<div>手机完成支付后，请等待系统处理，在此之前请勿关闭窗口</div>
<div class="pay_bottom" v-else>
<div class="cc"><span class="starIcon">*</span>注意事项：</div>
<div>
1、学生支付完成后请不要立即关闭浏览器，等待支付完成返回本页面，以确认支付完成。
</div>
<span slot="footer" class="dialog-footer">
<div class="btn">
<el-button @click="dialogVisible = false">刷新二维码</el-button>
</div>
</span>
</el-dialog> -->
<!-- 提示：打开电脑端后不能切换手机端 -->
<el-dialog
title="提示"
:visible.sync="dialogPayingVisible"
width="30%"
:before-close="handleClose"
>
<div class="margin1">
如您使用手机报名：点击“确认”后将直接发起微信支付，按照指引完成支付即可。
</div>
<div class="margin1">
如您使用电脑报名：点击“确认”后系统将出现支付二维码，使用手机微信或支付宝扫码，按照指引完成支付即可。
</div>
<div>
<div>为保障支付顺利，请注意：</div>
<div>1、请确保支付账户余额充足。</div>
<div>
2、如因支付失败需再次支付时，务必使用和第一次支付时相同的微信或支付宝账号进行操作。
</div>
</div>
<span slot="footer" class="dialog-footer">
<div>
2、支付确认后，将不能再修改姓名和身份证号，请在支付前核对信息。
</div>
<div>
3、如果在完成支付后，状态许久未更新为“报名成功”，请仔细核查自己支付账号是否已扣费。
</div>
<div>
4、对于多次缴费的学生，除生效一笔之外其他重复支付的费用会在缴费结束阶段统一退费。
</div>
<!-- <div>5、网上缴费如有问题，请致电项目组工作人员：XXX-XXXXXXXXX。</div> -->
</div>
</div>
</div>
<!-- 支付扫码框 -->
<!-- <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">
<div class="qrcode" ref="qrCodeUrl"></div>
</div>
<div>请使用<span>微信</span>扫一扫，扫描二维码支付</div>
<div>手机完成支付后，请等待系统处理，在此之前请勿关闭窗口</div>
</div>
<span slot="footer" class="dialog-footer">
<div class="btn">
<el-button @click="dialogVisible = false">刷新二维码</el-button>
</div>
</span>
</el-dialog> -->
<!-- 提示：打开电脑端后不能切换手机端 -->
<el-dialog
:before-close="handleClose"
:visible.sync="dialogPayingVisible"
title="提示"
width="30%"
>
<div class="margin1">
如您使用手机报名：点击“确认”后将直接发起微信支付，按照指引完成支付即可。
</div>
<div class="margin1">
如您使用电脑报名：点击“确认”后系统将出现支付二维码，使用手机微信或支付宝扫码，按照指引完成支付即可。
</div>
<div>
<div>为保障支付顺利，请注意：</div>
<div>1、请确保支付账户余额充足。</div>
<div>
2、如因支付失败需再次支付时，务必使用和第一次支付时相同的微信或支付宝账号进行操作。
</div>
</div>
<span class="dialog-footer" slot="footer">
<el-button @click="dialogPayingVisible = false">取 消</el-button>
<el-button type="primary" @click="toPaying">确 定</el-button>
<el-button @click="toPaying" type="primary">确 定</el-button>
</span>
</el-dialog>
<!-- 微信支付宝2选1 -->
<el-dialog
title="支付方式"
:visible.sync="dialogChoose"
width="600px"
: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>
</el-dialog>
<!-- 微信支付 -->
<confirm-sign-up
:confirmSignUpDialogFu="confirmSignUpDialogFu"
@closeCFSUDialog="closeCFSUDialog"
></confirm-sign-up>
<!-- 上传付款材料 -->
<el-dialog
title="银行卡支付"
:visible.sync="bankDialogVisible"
width="30%"
:before-close="handleClose"
>
<div>收款单位：{{ payee }}</div>
<div>账号：{{ bank_idcard }}</div>
<div>开户行：{{ bank_first }}</div>
<div>上传转账截图</div>
<div class="image_add">
<div class="image_in">
<el-upload
:class="{ hide: hideUpload }"
ref="imgUrl"
name="multipartFile"
list-type="picture-card"
:disabled="isUploading || fileList.length >= 1"
action="#"
accept=".jpg,.jpeg,.png"
:limit="1"
:file-list="fileList"
:before-upload="beforeAvatarUpload"
:on-progress="handleUploadProgress"
:on-success="uploadSuccess"
:http-request="uploadPicture"
>
<div slot="file" slot-scope="{ file }">
<div v-for="(item, idx) in fileList" :key="idx">
<img
class="el-upload-list__item-thumbnail"
:src="file.url"
alt=""
/>
<span class="el-upload-list__item-actions">
</el-dialog>
<!-- 微信支付宝2选1 -->
<el-dialog
:before-close="handleClose"
:visible.sync="dialogChoose"
title="支付方式"
width="600px"
>
<div class="choose">
<div class="flex img_choose">
<img
@click="toWechat"
alt=""
src="../../../assets/img/paying/weichat.png"
/>
<img
@click="toPaybao"
alt=""
src="../../../assets/img/paying/paybao.png"
/>
</div>
<div class="text_choose">请选择支付方式</div>
</div>
</el-dialog>
<!-- 微信支付 -->
<confirm-sign-up
:confirmSignUpDialogFu="confirmSignUpDialogFu"
@closeCFSUDialog="closeCFSUDialog"
></confirm-sign-up>
<!-- 上传付款材料 -->
<el-dialog
:before-close="handleClose"
:visible.sync="bankDialogVisible"
title="银行卡支付"
width="30%"
>
<div>收款单位：{{ payee }}</div>
<div>账号：{{ bank_idcard }}</div>
<div>开户行：{{ bank_first }}</div>
<div>上传转账截图</div>
<div class="image_add">
<div class="image_in">
<el-upload
:before-upload="beforeAvatarUpload"
:class="{ hide: hideUpload }"
:disabled="isUploading || fileList.length >= 1"
:file-list="fileList"
:http-request="uploadPicture"
:limit="1"
:on-progress="handleUploadProgress"
:on-success="uploadSuccess"
accept=".jpg,.jpeg,.png"
action="#"
list-type="picture-card"
name="multipartFile"
ref="imgUrl"
>
<div slot="file" slot-scope="{ file }">
<div :key="idx" v-for="(item, idx) in fileList">
<img
:src="file.url"
alt=""
class="el-upload-list__item-thumbnail"
/>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
@click="handlePictureCardPreview(file)"
class="el-upload-list__item-preview"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
@click="handleDownload(file)"
class="el-upload-list__item-delete"
v-if="!disabled"
>
<i class="el-icon-download"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
@click="handleRemove(file)"
class="el-upload-list__item-delete"
v-if="!disabled"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</div>
<i style="font-size: 44px" class="el-icon-circle-plus"> </i>
</el-upload>
</div>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="resultPicture" alt=""/>
</el-dialog>
</div>
</div>
<i class="el-icon-circle-plus" style="font-size: 44px"> </i>
</el-upload>
</div>
<el-dialog :visible.sync="dialogVisible">
<img :src="resultPicture" alt="" width="100%"/>
</el-dialog>
</div>
<span slot="footer" class="dialog-footer">
<span class="dialog-footer" slot="footer">
<el-button @click="bankDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="uploadConfirm">确 定</el-button>
<el-button @click="uploadConfirm" type="primary">确 定</el-button>
</span>
</el-dialog>
</div>
</el-dialog>
</div>
</template>
<script>
/* eslint-disable */
import ConfirmSignUp from "c/index/SignUp/ConfirmSignUp";
import {SERVER_WS_URL} from "@/config/server";
import {
signUpInit,
getAccount,
getBankInfoOss,
delPayingPic,
} from "r/index/signUp";
import {getWxConfig} from "r/index/pay";
import {upload} from "r/index/network";
export default {
name: "Paying",
components: {
ConfirmSignUp,
},
data() {
return {
dialogPayingVisible: false, //支付时候tip
dialogChoose: false, //付款方式选择
confirmSignUpDialogFu: false, // 控制确认报名弹框的显示与隐藏
bankDialogVisible: false, //上传银行截图弹框的显示与隐藏
personalInfo: {},
camp_name: "", //营地名称
has_amount: "", //支付金额
status: "", //状态
status_wx: "", //状态
type: "", //状态
//支付状态判断
transfer_account: window.localStorage.getItem(
"transfer_account" + this.$store.state.indexIdentity
),
payee: window.localStorage.getItem(
"payee" + this.$store.state.indexIdentity
),
bank_first: window.localStorage.getItem(
"bank_first" + this.$store.state.indexIdentity
),
bank_idcard: window.localStorage.getItem(
"bank_idcard" + this.$store.state.indexIdentity
),
isUploading: false, // 图片上传蒙层
dialogVisible: false,
fileList: [],
file: "",
file_image: {},
resultPicture: "",
disabled: false, //限制输入框
hideUpload: false,
limitCount: 1,
isBank_infoFile: false,
};
},
created() {
const code = this.$store.state.indexIdentity;
this.camp_name = window.localStorage.getItem("camp_name" + code);
this.has_amount = window.localStorage.getItem("has_amount" + code);
// 已上传的银行付款图片
let bank_infoFile = window.localStorage.getItem(
"bank_info" + window.localStorage.getItem("index-phone-all") + code
);
JSON.parse(bank_infoFile).map((i) => {
if (i.url != '') {
this.isBank_infoFile = true
}
})
if (bank_infoFile && this.isBank_infoFile == true && JSON.parse(bank_infoFile).length > 0) {
console.log(JSON.parse(bank_infoFile));
this.fileList = JSON.parse(bank_infoFile);
/* eslint-disable */
import ConfirmSignUp from "c/index/SignUp/ConfirmSignUp";
import {SERVER_WS_URL} from "@/config/server";
import {delPayingPic, getAccount, signUpInit,} from "r/index/signUp";
import {getWxConfig} from "r/index/pay";
import {getSignature,checkAsync} from "r/index/cosUpload";
import COS from "cos-js-sdk-v5";
export default {
name: "Paying",
components: {
ConfirmSignUp,
},
data() {
return {
dialogPayingVisible: false, //支付时候tip
dialogChoose: false, //付款方式选择
confirmSignUpDialogFu: false, // 控制确认报名弹框的显示与隐藏
bankDialogVisible: false, //上传银行截图弹框的显示与隐藏
personalInfo: {},
camp_name: "", //营地名称
has_amount: "", //支付金额
status: "", //状态
status_wx: "", //状态
type: "", //状态
//支付状态判断
transfer_account: window.localStorage.getItem(
"transfer_account" + this.$store.state.indexIdentity
),
payee: window.localStorage.getItem(
"payee" + this.$store.state.indexIdentity
),
bank_first: window.localStorage.getItem(
"bank_first" + this.$store.state.indexIdentity
),
bank_idcard: window.localStorage.getItem(
"bank_idcard" + this.$store.state.indexIdentity
),
isUploading: false, // 图片上传蒙层
dialogVisible: false,
fileList: [],
file: "",
file_image: {},
resultPicture: "",
disabled: false, //限制输入框
hideUpload: false,
limitCount: 1,
isBank_infoFile: false,
};
},
created() {
const code = this.$store.state.indexIdentity;
this.camp_name = window.localStorage.getItem("camp_name" + code);
this.has_amount = window.localStorage.getItem("has_amount" + code);
// 已上传的银行付款图片
let bank_infoFile = window.localStorage.getItem(
"bank_info" + window.localStorage.getItem("index-phone-all") + code
);
JSON.parse(bank_infoFile).map((i) => {
if (i.url != '') {
this.isBank_infoFile = true
}
})
if (bank_infoFile && this.isBank_infoFile == true && JSON.parse(bank_infoFile).length > 0) {
console.log(JSON.parse(bank_infoFile));
this.fileList = JSON.parse(bank_infoFile);
}
this.getAccount();
this.commonApi(33)
},
methods: {
handleClose(done) {
this.$confirm("确认关闭？")
.then((_) => {
done();
})
.catch((_) => {
});
},
// 子组件触发，关闭确认报名弹框
closeCFSUDialog(val,isSuccess) {
console.log(val, "val");
console.log(isSuccess, "isSuccess");
this.confirmSignUpDialogFu = val;
if(isSuccess==1){
this.$emit("getstatus", 6);
}
},
toWechat() {
// this.dialogChoose = false;
this.confirmSignUpDialogFu = true;
},
toPaybao() {
getWxConfig({
pay_type: 2,
}).then((res) => {
console.log(res, "getWxConfig");
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
/* 此处form就是后台返回接收到的数据 */
let form = res.data.data;
console.log(form);
// return
let div = document.createElement("div");
div.innerHTML = form;
document.body.appendChild(div);
document.forms[0].acceptCharset = "GBK"; //保持与支付宝默认编码格式一致，如果不一致将会出现：调试错误，请回到请求来源地.
// 重新发起请求，错误代码 invalid-signature 错误原因: 验签出错，建议检查签名字符串或签名私钥与应用公钥是否匹配
document.forms[0].submit(); //
let alipay_submit = document.getElementById("alipay_submit");
div.removeChild(alipay_submit);
});
},
// 立即支付-按钮
paying() {
let code = this.$store.state.indexIdentity;
if (code == "3c7e84455750447799e4b70bda5f4493") {
this.toPaying();
} else {
this.dialogPayingVisible = true;
}
},
toPaying() {
this.commonApi(34)
this.dialogPayingVisible = false;
if (this.has_amount == 0) {
// getWxConfig({pay_type: 3}).then((res) => {
// console.log(res, "signUpInit");
// if (res.data.code != 200) {
// return this.$message.error(res.data.message);
// }
// this.$message.success(res.data.err_msg);
// });
this.$emit("getstatus", 6);
} else {
// transfer_account 判断微信支付宝或者银行卡支付
if (this.transfer_account == 0) {
this.dialogChoose = true;
} else {
this.bankDialogVisible = true;
if (this.fileList.length >= 1) {
this.hideUpload = true;
}
this.getAccount();
this.commonApi(33)
},
methods: {
handleClose(done) {
this.$confirm("确认关闭？")
.then((_) => {
done();
})
.catch((_) => {
});
},
// 子组件触发，关闭确认报名弹框
closeCFSUDialog(val) {
console.log(val, "val");
this.confirmSignUpDialogFu = val;
},
toWeichat() {
// this.dialogChoose = false;
this.confirmSignUpDialogFu = true;
},
toPaybao() {
getWxConfig({
pay_type: 2,
}).then((res) => {
console.log(res, "getWxConfig");
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
/* 此处form就是后台返回接收到的数据 */
let form = res.data.data;
console.log(form);
// return
let div = document.createElement("div");
div.innerHTML = form;
document.body.appendChild(div);
document.forms[0].acceptCharset = "GBK"; //保持与支付宝默认编码格式一致，如果不一致将会出现：调试错误，请回到请求来源地.
// 重新发起请求，错误代码 invalid-signature 错误原因: 验签出错，建议检查签名字符串或签名私钥与应用公钥是否匹配
document.forms[0].submit(); //
let alipay_submit = document.getElementById("alipay_submit");
div.removeChild(alipay_submit);
//初始化 websocket 链接
this.initWebSocket();
});
},
// 初始化 webSocket
initWebSocket() {
if (typeof WebSocket == "undefined") {
this.$message({
showClose: true,
message: "您的浏览器不支持WebSocket",
type: "error",
});
} else if (!this.dialogChoose) {
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;
var wssURL = SERVER_WS_URL + "/order?token=" + token + "&channel=pc";
console.log(wssURL);
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.dialogChoose) {
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);
} 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() {
console.log(this.$store.state);
let code = this.$store.state.indexIdentity;
console.log(code == "3c7e84455750447799e4b70bda5f4493")
if (code == "3c7e84455750447799e4b70bda5f4493") {
console.log('1111')
this.toPaying();
} else {
this.dialogPayingVisible = true;
}
},
toPaying() {
this.commonApi(34)
this.dialogPayingVisible = false;
if (this.has_amount == 0) {
getWxConfig({pay_type: 3}).then((res) => {
console.log(res, "signUpInit");
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
this.$message.success(res.data.err_msg);
});
this.$emit("getstatus", 6);
} else {
// transfer_account 判断微信支付宝或者银行卡支付
if (this.transfer_account == 0) {
this.dialogChoose = true;
} else {
this.bankDialogVisible = true;
console.log(this.fileList);
console.log(this.fileList != []);
if (this.fileList.length >= 1) {
this.hideUpload = true;
}
}
}
}
// setTimeout(this.signUpInit(this.status_wx), 1000);
},
signUpInit() {
signUpInit({}).then((res) => {
console.log(res, "signUpInit");
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
this.status = res.data.status;
// return;
// 点击下一步传值给status,更新
if (this.status == 4) {
this.type = "check";
this.status = 3;
if (this.isNexts == 1) {
if (res.data.examine_status == 1) {
this.type = "pay";
this.status = 4;
} else if (res.data.examine_status == 2) {
this.type = "referInfo";
this.status = 2;
}
}
if (res.data.pay_amount == 0) {
getWxConfig({pay_type: 3}).then((res) => {
console.log(res, "signUpInit");
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
// setTimeout(this.signUpInit(this.status_wx), 1000);
},
signUpInit() {
signUpInit({}).then((res) => {
console.log(res, "signUpInit");
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
this.status = res.data.status;
// return;
// 点击下一步传值给status,更新
if (this.status == 4) {
this.type = "check";
this.status = 3;
if (this.isNexts == 1) {
if (res.data.examine_status == 1) {
console.log(333);
this.type = "pay";
this.status = 4;
} else if (res.data.examine_status == 2) {
this.type = "referInfo";
this.status = 2;
}
}
if (res.data.pay_amount == 0) {
getWxConfig({pay_type: 3}).then((res) => {
console.log(res, "signUpInit");
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
this.$message.success(res.data.err_msg);
});
}
// pay_amount支付金额等于0，直接跳到成功页面
} else if (this.status == 5) {
this.type = "pay";
// pay_amount支付金额等于0，直接跳到成功页面
if (res.data.pay_amount == 0) {
this.type = "success";
this.$emit("getstatus", 6);
} else {
// transfer_account 判断微信支付宝或者银行卡支付
if (this.transfer_account == 0) {
this.dialogChoose = true;
} else {
this.bankDialogVisible = true;
console.log(this.fileList);
console.log(this.fileList != []);
if (this.fileList.length >= 1) {
this.hideUpload = true;
}
}
}
}
// else if (this.status == 6) {
// this.type = "success";
// }
this.$emit("getstatus", res.data.status);
});
},
getAccount() {
getAccount({}).then((res) => {
// console.log(res, "getAccount");
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
this.personalInfo = res.data.info;
// this.personalInfo.create_time = parseTime(res.data.info.create_time);
});
},
// 图片上传成功前钩子
beforeAvatarUpload(file) {
// console.log(file, "beforeImage");
const isJPG = file.type === "image/jpg";
const isPng = file.type === "image/png";
const isJPEG = file.type === "image/jpeg";
const isLt10M = file.size / 1024 / 1024 < 10;
// console.log(isLt10M)
if (!isJPG && !isPng && !isJPEG) {
this.$message.info("上传图片只能是 JPG,JPEG或png 格式!");
this.$message.success(res.data.err_msg);
});
}
// pay_amount支付金额等于0，直接跳到成功页面
} else if (this.status == 5) {
this.type = "pay";
// pay_amount支付金额等于0，直接跳到成功页面
if (res.data.pay_amount == 0) {
this.type = "success";
this.$emit("getstatus", 6);
} else {
// transfer_account 判断微信支付宝或者银行卡支付
if (this.transfer_account == 0) {
this.dialogChoose = true;
} else {
this.bankDialogVisible = true;
if (this.fileList.length >= 1) {
this.hideUpload = true;
}
if (!isLt10M) {
this.$message.info("上传图片大小不能超过 10MB!");
}
}
}
// else if (this.status == 6) {
// this.type = "success";
// }
this.$emit("getstatus", res.data.status);
});
},
getAccount() {
getAccount({}).then((res) => {
// console.log(res, "getAccount");
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
this.personalInfo = res.data.info;
// this.personalInfo.create_time = parseTime(res.data.info.create_time);
});
},
// 图片上传成功前钩子
beforeAvatarUpload(file) {
// console.log(file, "beforeImage");
const isJPG = file.type === "image/jpg";
const isPng = file.type === "image/png";
const isJPEG = file.type === "image/jpeg";
const isLt10M = file.size / 1024 / 1024 < 10;
// console.log(isLt10M)
if (!isJPG && !isPng && !isJPEG) {
this.$message.info("上传图片只能是 JPG,JPEG或png 格式!");
}
if (!isLt10M) {
this.$message.info("上传图片大小不能超过 10MB!");
}
return (isJPG || isPng || isJPEG) && isLt10M;
},
handlePictureCardPreview(file) {
console.log(file, "11111111");
this.resultPicture = file.url;
this.dialogVisible = true;
},
// 文件上传中处理
handleUploadProgress(event, file, fileList) {
// console.log(fileList);
this.isUploading = true;
if (this.fileList.length < 1) {
return this.$message.info("超过上传数量");
}
},
uploadSuccess(res, file, fileList) {
this.referForm.achievementPath = res;
this.fileList = {
name: file.name,
url: res,
};
this.$refs["imgUrl"].clearFiles(); //上传成功之后清除历史记录
},
uploadPicture(params) {
// console.log("已经准备好上传图片", params);
this.file = params.file;
let raw = params.file;
let image = {
name: raw.name,
size: raw.size,
type: raw.type,
};
this.file_image = image;
this.getCosConfigs(this.file_image, params.file);
},
// 上传截图
uploadConfirm() {
this.bankDialogVisible = false;
// this.$message.success("你的支付信息已提交，请留意短信通知。");
// this.getOssConfigs(this.file_image, this.file);
},
async changeStatus() {
// console.log(SERVER_WS_URL);
let {data: res} = await getWxConfig({
pay_type: 4,
});
},
// cos上传
async getCosConfigs(image, file) {
console.log(file)
this.loading = true;
await getSignature(3)
.then((res) => {
console.log(res, "开始上传图片");
let resData = res.data.data
if (res.data.code === 200) {
const cos = new COS({
// 必选参数
getAuthorization: (options, callback) => {
callback({
TmpSecretId: resData.credentials.tmpSecretId,
TmpSecretKey: resData.credentials.tmpSecretKey,
XCosSecurityToken: resData.credentials.sessionToken,
StartTime: resData.startTime, // 时间戳，单位秒，如：1580000000
ExpiredTime: resData.expiredTime, // 时间戳，单位秒，如：1580000900
});
},
});
console.log(resData)
cos.putObject({
Bucket: resData.bucket,
Region: resData.region,
Key: '111/fg.png',
Body: file,
onProgress: (progressData) => {
console.log("上传进度：" + JSON.stringify(progressData));
},
},
(err, data) => {
console.log(data);
if (err) {
console.log(err);
this.loading = false;
this.$message.error('上传失败！')
} else {
console.log(data);
this.signUploadSuccess('http://' + data.Location);
}
}
return (isJPG || isPng || isJPEG) && isLt10M;
},
handlePictureCardPreview(file) {
console.log(file, "11111111");
this.resultPicture = file.url;
this.dialogVisible = true;
},
// 文件上传中处理
handleUploadProgress(event, file, fileList) {
// console.log(fileList);
this.isUploading = true;
if (this.fileList.length < 1) {
return this.$message.info("超过上传数量");
);
} else {
this.$message.error(resData.message);
}
})
.catch((err) => {
console.log(err);
// this.getIdCardPic();
});
},
// cos上传-告诉后端上传成功
async signUploadSuccess(path) {
await getSignature(3).then(res => {
if (res.data.code != 200) {
this.loading = false;
return this.$message.error('上传失败！');
}
this.loading = false;
this.$message.success('上传成功！');
// this.selfInfo.picture_path = path + "?t=" + Date.parse(new Date());
this.$forceUpdate();
}).catch(err => {
this.loading = false;
})
},
// async getOssConfigs(image, file) {
// let obj = {
// url: "",
// savefile: "",
// };
// await getBankInfoOss({image: image})
// .then((res) => {
// console.log(res, "开始上传图片");
// if (res.data.code === 200) {
// let oss_url = res.data.config.host;
// let filename = res.data.config.file;
// let formData = new FormData();
// formData.append("OSSAccessKeyId", res.data.config.accessid);
// formData.append("policy", res.data.config.policy);
// formData.append("signature", res.data.config.signature);
// formData.append("filename", res.data.config.file);
// formData.append("key", res.data.config.savefile);
// formData.append("callback", res.data.config.callback);
// formData.append("success_action_status", 200);
// formData.append("file", file);
// // console.log(formData);
// upload(oss_url, formData)
// .then((ress) => {
// console.log(555555555);
// console.log(ress, "ress");
// if (ress.data.code != 200) {
// return this.$message.error(ress.data.message);
// }
// this.resultPicture = filename + "?t=" + Date.parse(new Date());
// // this.$forceUpdate();
// obj = {
// url: ress.data.picture_path,
// savefile: res.data.config.savefile,
// };
// this.fileList.push(obj);
// let code = this.$store.state.indexIdentity;
// window.localStorage.setItem("sign_up_payfile_" + window.localStorage.getItem("index-phone-all") + code, JSON.stringify(this.fileList));
// this.$message.success({
// message:
// "您已上传成功，等待短信通知，审核通过后登录报名网址。",
// duration: 5000,
// });
// this.changeStatus();
// this.hideUpload = this.fileList.length >= this.limitCount;
// })
// .catch((err) => {
// this.$message.error(err);
// });
// } else {
// this.$message.error(res.data.message);
// }
// })
// .catch((err) => {
// // console.log(err);
// });
// },
// 下载证明资料图片
handleDownload(file) {
// console.log(file,'file22');
window.location.href = file.url;
},
//删除图片
handleRemove(file) {
console.log(file, "file");
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
let getfile = file.url;
// console.log(savefile.match(/^(?:[^\/]|\/\/)*/),'222222')；//获取域名
let str = getfile.split(
"https://yingdi-bank-info.oss-cn-beijing.aliyuncs.com/"
); //https://yingdi-achievement.oss-cn-beijing.aliyuncs.com/进行分割，
let savefile = str[1];
delPayingPic({object: savefile}).then((res) => {
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
this.fileList.forEach((item, idx) => {
if (item.url == file.url) {
this.fileList.splice(idx, 1);
let code = this.$store.state.indexIdentity;
window.localStorage.setItem("sign_up_payfile_" + window.localStorage.getItem("index-phone-all") + code, JSON.stringify(this.fileList));
this.$message.success("删除成功");
this.hideUpload = this.fileList.length >= this.limitCount;
window.localStorage.removeItem(
"bank_info" +
window.localStorage.getItem("index-phone-all") +
code
);
}
},
uploadSuccess(res, file, fileList) {
// console.log(res, "res");
// console.log(file, "file");
// console.log(fileList, "fileList");
this.referForm.achievementPath = res;
this.fileList = {
name: file.name,
url: res,
};
this.$refs["imgUrl"].clearFiles(); //上传成功之后清除历史记录
},
uploadPicture(params) {
// console.log("已经准备好上传图片", params);
this.file = params.file;
let raw = params.file;
let image = {
name: raw.name,
size: raw.size,
type: raw.type,
};
this.file_image = image;
this.getOssConfigs(this.file_image, params.file);
},
// 上传截图
uploadConfirm() {
this.bankDialogVisible = false;
// this.$message.success("你的支付信息已提交，请留意短信通知。");
// this.getOssConfigs(this.file_image, this.file);
},
async changeStatus() {
// console.log(SERVER_WS_URL);
let {data: res} = await getWxConfig({
pay_type: 4,
});
},
async getOssConfigs(image, file) {
let obj = {
url: "",
savefile: "",
};
await getBankInfoOss({image: image})
.then((res) => {
console.log(res, "开始上传图片");
if (res.data.code === 200) {
let oss_url = res.data.config.host;
let filename = res.data.config.file;
let formData = new FormData();
formData.append("OSSAccessKeyId", res.data.config.accessid);
formData.append("policy", res.data.config.policy);
formData.append("signature", res.data.config.signature);
formData.append("filename", res.data.config.file);
formData.append("key", res.data.config.savefile);
formData.append("callback", res.data.config.callback);
formData.append("success_action_status", 200);
formData.append("file", file);
// console.log(formData);
upload(oss_url, formData)
.then((ress) => {
console.log(555555555);
console.log(ress, "ress");
if (ress.data.code != 200) {
return this.$message.error(ress.data.message);
}
this.resultPicture = filename + "?t=" + Date.parse(new Date());
// this.$forceUpdate();
obj = {
url: ress.data.picture_path,
savefile: res.data.config.savefile,
};
this.fileList.push(obj);
let code = this.$store.state.indexIdentity;
window.localStorage.setItem("sign_up_payfile_" + window.localStorage.getItem("index-phone-all") + code, JSON.stringify(this.fileList));
this.$message.success({
message:
"您已上传成功，等待短信通知，审核通过后登录报名网址。",
duration: 5000,
});
this.changeStatus();
this.hideUpload = this.fileList.length >= this.limitCount;
})
.catch((err) => {
this.$message.error(err);
});
} else {
this.$message.error(res.data.message);
}
})
.catch((err) => {
// console.log(err);
});
},
// 下载证明资料图片
handleDownload(file) {
// console.log(file,'file22');
window.location.href = file.url;
},
//删除图片
handleRemove(file) {
console.log(file, "file");
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
let getfile = file.url;
// console.log(savefile.match(/^(?:[^\/]|\/\/)*/),'222222')；//获取域名
let str = getfile.split(
"https://yingdi-bank-info.oss-cn-beijing.aliyuncs.com/"
); //https://yingdi-achievement.oss-cn-beijing.aliyuncs.com/进行分割，
let savefile = str[1];
delPayingPic({object: savefile}).then((res) => {
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
this.fileList.forEach((item, idx) => {
if (item.url == file.url) {
this.fileList.splice(idx, 1);
let code = this.$store.state.indexIdentity;
window.localStorage.setItem("sign_up_payfile_" + window.localStorage.getItem("index-phone-all") + code, JSON.stringify(this.fileList));
this.$message.success("删除成功");
this.hideUpload = this.fileList.length >= this.limitCount;
window.localStorage.removeItem(
"bank_info" +
window.localStorage.getItem("index-phone-all") +
code
);
}
});
// console.log(this.fileList);
});
})
.catch((err) => {
this.$message({
type: "info",
message: "取消删除",
});
});
},
},
};
});
// console.log(this.fileList);
});
})
.catch((err) => {
this.$message({
type: "info",
message: "取消删除",
});
});
},
},
};
</script>
<style lang="scss" scoped>
@import "a/scss/btn";
@import "a/scss/dialog";
.btn {
padding-bottom: 0 !important;
}
.btn {
padding-bottom: 0 !important;
}
.flex {
display: flex;
}
.flex {
display: flex;
}
.margin1 {
margin-bottom: 1rem;
}
.margin1 {
margin-bottom: 1rem;
}
::v-deep .hide {
.el-upload--picture-card {
display: none;
}
.el-upload-list__item div {
height: 100%;
}
::v-deep .hide {
.el-upload--picture-card {
display: none;
}
.paying {
padding: 0 56px 65px 56px;
.el-upload-list__item div {
height: 100%;
}
}
.pay_titile {
font-size: 18px;
font-weight: 500;
color: #12141c;
line-height: 18px;
}
.paying {
padding: 0 56px 65px 56px;
.pay_top {
margin: 24px 0;
.pay_titile {
font-size: 18px;
font-weight: 500;
color: #12141c;
line-height: 18px;
}
div {
font-size: 14px;
font-weight: 500;
color: #12141c;
line-height: 32px;
}
}
.pay_top {
margin: 24px 0;
.line {
height: 1px;
border-bottom: 1px solid #d1d1d1;
}
div {
font-size: 14px;
font-weight: 500;
color: #12141c;
line-height: 32px;
}
}
.pay-money {
font-size: 18px;
font-weight: 500;
color: #12141c;
line-height: 24px;
justify-content: space-between;
margin: 43px 0 0 0;
.line {
height: 1px;
border-bottom: 1px solid #d1d1d1;
}
span {
color: #60194a;
}
}
.pay-money {
font-size: 18px;
font-weight: 500;
color: #12141c;
line-height: 24px;
justify-content: space-between;
margin: 43px 0 0 0;
span {
color: #60194a;
}
}
.pay_bottom {
font-size: 12px;
font-weight: 500;
color: #999999;
line-height: 21px;
.pay_bottom {
font-size: 12px;
font-weight: 500;
color: #999999;
line-height: 21px;
.cc {
font-weight: 600;
color: black;
}
.cc {
font-weight: 600;
color: black;
}
.starIcon {
color: red;
}
}
.starIcon {
color: red;
}
}
}
.choose {
text-align: center;
.choose {
text-align: center;
.img_choose {
justify-content: space-around;
.img_choose {
justify-content: space-around;
img {
width: 38%;
cursor: pointer;
}
}
.text_choose {
font-size: 15px;
margin: 20px 0 50px 0;
}
img {
width: 38%;
cursor: pointer;
}
}
.btn .el-button {
width: 120px !important;
}
.text_choose {
font-size: 15px;
margin: 20px 0 50px 0;
}
// .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;
// }
// }
.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>
src/components/index/SignUp/referInfo.vue
View file @ 89a5bd49
......@@ -2,49 +2,49 @@
<div class="referInfo">
<!-- 测试 -->
<el-form
ref="referRef"
:model="referForm"
label-position="top"
class="checkForm"
:rules="referInfoRules"
class="checkForm"
label-position="top"
ref="referRef"
>
<div class="cont_title">个人信息</div>
<el-row :gutter="20">
<!-- 姓名 -->
<el-col :span="12" v-show="configJson.name == 1">
<el-form-item
label="姓名"
prop="name"
style="height: 73px"
:rules="
configJson.name == 1 ? referInfoRules.name : [{ required: false }]
"
label="姓名"
prop="name"
style="height: 73px"
>
<el-input
ref="name"
v-model="referForm.name"
clearable
placeholder="填写真实姓名"
ref="name"
size="small"
clearable
v-model="referForm.name"
/>
</el-form-item>
</el-col>
<!-- 性别 -->
<el-col :span="12" v-show="configJson.gender == 1">
<el-form-item
label="性别"
prop="gender"
style="height: 73px"
:rules="
configJson.gender == 1
? referInfoRules.gender
: [{ required: false }]
"
label="性别"
prop="gender"
style="height: 73px"
>
<el-radio-group
v-model="referForm.gender"
ref="gender"
size="small"
v-model="referForm.gender"
>
<el-radio :label="0">男</el-radio>
<el-radio :label="1">女</el-radio>
......@@ -54,45 +54,45 @@
<!-- 年龄 -->
<el-col :span="12" v-show="configJson.age == 1">
<el-form-item
label="年龄"
prop="age"
style="height: 70px"
:rules="
configJson.age == 1 ? referInfoRules.age : [{ required: false }]
"
label="年龄"
prop="age"
style="height: 70px"
>
<el-input
ref="age"
v-model="referForm.age"
clearable
placeholder="填写年龄"
ref="age"
size="small"
clearable
v-model="referForm.age"
/>
</el-form-item>
</el-col>
<!--国籍-->
<el-col :span="12" v-show="configJson.country == 1">
<el-form-item
label="国籍"
prop="country"
style="height: 70px"
:rules="
configJson.country == 1
? referInfoRules.country
: [{ required: false }]
"
label="国籍"
prop="country"
style="height: 70px"
>
<el-select
v-model="referForm.country"
placeholder="国籍"
:popper-append-to-body="false"
filterable
placeholder="国籍"
v-model="referForm.country"
>
<el-option
v-for="(item, index) in countryList"
:key="index"
:label="item.label"
:value="item.label"
v-for="(item, index) in countryList"
>
</el-option>
</el-select>
......@@ -142,20 +142,20 @@
<!-- 身份证号 -->
<el-col :span="12" v-show="configJson.idCard == 1">
<el-form-item
label="身份证号"
prop="id_card"
style="height: 70px"
:rules="
configJson.idCard == 1
? referInfoRules.idCard
: [{ required: false }]
"
label="身份证号"
prop="id_card"
style="height: 70px"
>
<el-input
ref="id_card"
v-model="referForm.id_card"
placeholder="填写真实身份证号"
ref="id_card"
size="small"
v-model="referForm.id_card"
/>
</el-form-item>
......@@ -163,45 +163,45 @@
<!-- 手机号 -->
<el-col :span="12" v-show="configJson.phone == 1">
<el-form-item
label="手机号"
style="height: 70px"
:rules="
configJson.phone == 1
? referInfoRules.phone
: [{ required: false }]
"
label="手机号"
style="height: 70px"
>
<el-input
v-model="referForm.phone"
:disabled="true"
placeholder="请输入手机号"
size="small"
:disabled="true"
v-model="referForm.phone"
/>
</el-form-item>
</el-col>
<!-- 学历 -->
<el-col :span="12" v-show="configJson.education == 1">
<el-form-item
label="学历"
prop="education"
style="height: 70px"
:rules="
configJson.education == 1
? referInfoRules.education
: [{ required: false }]
"
label="学历"
prop="education"
style="height: 70px"
>
<el-select
v-model="referForm.education"
placeholder="请选择学历"
:popper-append-to-body="false"
clearable
placeholder="请选择学历"
v-model="referForm.education"
>
<el-option
v-for="(item, index) in EducationArrs"
:key="index"
:label="item"
:value="item"
v-for="(item, index) in EducationArrs"
>
</el-option>
</el-select>
......@@ -210,38 +210,38 @@
<!-- 单位名称 -->
<el-col :span="12" v-show="configJson.unitandIdentity == 1">
<el-form-item
label="单位名称及身份"
prop="unit_and_identity"
style="height: 70px"
:rules="
configJson.unitandIdentity == 1
? referInfoRules.unit_and_identity
: [{ required: false }]
"
label="单位名称及身份"
prop="unit_and_identity"
style="height: 70px"
>
<el-input
v-model="referForm.unit_and_identity"
placeholder="请输入单位名称及身份"
size="small"
v-model="referForm.unit_and_identity"
/>
</el-form-item>
</el-col>
<!-- 电子邮箱 -->
<el-col :span="12" v-show="configJson.email == 1">
<el-form-item
label="电子邮箱"
prop="email"
style="height: 73px"
:rules="
configJson.email == 1
? referInfoRules.email
: [{ required: false }]
"
label="电子邮箱"
prop="email"
style="height: 73px"
>
<el-input
v-model="referForm.email"
placeholder="填写电子邮箱"
size="small"
v-model="referForm.email"
/>
</el-form-item>
</el-col>
......@@ -252,68 +252,68 @@
style="height: 73px"
>
<el-input
v-model="referForm.recommend"
placeholder="填写推荐人或渠道（选填）"
size="small"
v-model="referForm.recommend"
/>
</el-form-item>
</el-col>
<!-- 出生日期 -->
<el-col :span="12" v-show="configJson.birthday == 1">
<el-form-item
label="出生日期"
prop="birthday"
style="height: 73px"
:rules="
configJson.birthday == 1
? referInfoRules.birthday
: [{ required: false }]
"
label="出生日期"
prop="birthday"
style="height: 73px"
>
<el-row :gutter="20">
<el-col :span="8">
<el-select
v-model="bdYear"
placeholder="年"
:popper-append-to-body="false"
placeholder="年"
v-model="bdYear"
>
<el-option
v-for="(item, index) in yearArrs"
:key="index"
:label="item"
:value="item"
v-for="(item, index) in yearArrs"
>
</el-option>
</el-select>
</el-col>
<el-col :span="8">
<el-select
v-model="bdMonth"
placeholder="月"
:popper-append-to-body="false"
placeholder="月"
v-model="bdMonth"
>
<el-option
v-for="(item, index) in monthArrs"
:key="index"
:label="item"
:value="item"
v-for="(item, index) in monthArrs"
>
</el-option>
</el-select>
</el-col>
<el-col :span="8">
<el-select
ref="birthday"
v-model="bdDay"
placeholder="日"
:popper-append-to-body="false"
@change="getTime"
placeholder="日"
ref="birthday"
v-model="bdDay"
>
<el-option
v-for="(item, index) in dayArrs"
:key="index"
:label="item"
:value="item"
v-for="(item, index) in dayArrs"
>
</el-option>
</el-select>
......@@ -324,46 +324,46 @@
<!-- 籍贯 -->
<el-col :span="12" v-show="configJson.jiguanCity == 1">
<el-form-item
label="籍贯"
prop="jiguan_code"
style="height: 73px"
:rules="
configJson.jiguanCity == 1
? referInfoRules.jiguan_code
: [{ required: false }]
"
label="籍贯"
prop="jiguan_code"
style="height: 73px"
>
<el-row :gutter="20">
<el-col :span="12">
<!-- @keyup.enter.native="selsectProvince" -->
<el-select
v-model="jgProvinceCode"
placeholder="省"
:popper-append-to-body="false"
@change="changeProvince(1, $event)"
placeholder="省"
v-model="jgProvinceCode"
>
<el-option
v-for="item in selectProvince"
:key="item.id"
:label="item.name"
:value="item.id"
v-for="item in selectProvince"
>
</el-option>
</el-select>
</el-col>
<el-col :span="12">
<el-select
ref="jiguan_code"
v-model="jiguan_city"
placeholder="市"
:popper-append-to-body="false"
@change="getJiguan()"
placeholder="市"
ref="jiguan_code"
v-model="jiguan_city"
>
<el-option
v-for="item in selectCityJiguan"
:key="item.id"
:label="item.name"
:value="item.id"
v-for="item in selectCityJiguan"
>
</el-option>
</el-select>
......@@ -374,35 +374,35 @@
<!-- 民族 -->
<el-col :span="12" v-show="configJson.nation == 1">
<el-form-item
label="民族"
prop="nation"
style="height: 73px"
:rules="
configJson.nation == 1
? referInfoRules.nation
: [{ required: false }]
"
label="民族"
prop="nation"
style="height: 73px"
>
<el-input
ref="nation"
v-model="referForm.nation"
clearable
placeholder="填写民族"
ref="nation"
size="small"
clearable
v-model="referForm.nation"
/>
</el-form-item>
</el-col>
<!-- 入学年份 -->
<el-col :span="12" v-show="configJson.startSchoolDate == 1">
<el-form-item
label="入学年份"
prop="start_school_date"
style="height: 73px"
:rules="
configJson.startSchoolDate == 1
? referInfoRules.start_school_date
: [{ required: false }]
"
label="入学年份"
prop="start_school_date"
style="height: 73px"
>
<el-row :gutter="20">
<!-- <el-col :span="12">
......@@ -423,18 +423,18 @@
</el-col> -->
<!-- <el-col :span="12"> -->
<el-select
ref="start_school_date"
v-model="start_year"
placeholder="年份"
clearable
:popper-append-to-body="false"
@change="getyear()"
clearable
placeholder="年份"
ref="start_school_date"
v-model="start_year"
>
<el-option
v-for="(item, index) in yearArrs"
:key="index"
:label="item"
:value="item"
v-for="(item, index) in yearArrs"
>
</el-option>
</el-select>
......@@ -445,27 +445,27 @@
<!-- 政治面貌 -->
<el-col :span="12" v-show="configJson.politicalStatus == 1">
<el-form-item
label="政治面貌"
prop="political_status"
style="height: 73px"
:rules="
configJson.politicalStatus == 1
? referInfoRules.political_status
: [{ required: false }]
"
label="政治面貌"
prop="political_status"
style="height: 73px"
>
<el-select
ref="political_status"
v-model="referForm.political_status"
placeholder="填写政治面貌"
:popper-append-to-body="false"
clearable
placeholder="填写政治面貌"
ref="political_status"
v-model="referForm.political_status"
>
<el-option
v-for="item in political_status"
:key="item.id"
:label="item.name"
:value="item.name"
v-for="item in political_status"
>
</el-option>
</el-select>
......@@ -474,26 +474,26 @@
<!-- 在读年级 -->
<el-col :span="12" v-show="configJson.grade == 1">
<el-form-item
label="在读年级"
prop="grade"
style="height: 73px"
:rules="
configJson.grade == 1
? referInfoRules.grade
: [{ required: false }]
"
label="在读年级"
prop="grade"
style="height: 73px"
>
<el-select
v-model="referForm.grade"
placeholder="在读年级"
:popper-append-to-body="false"
clearable
placeholder="在读年级"
v-model="referForm.grade"
>
<el-option
v-for="(item, index) in gradeArrs"
:key="index"
:label="item"
:value="item"
v-for="(item, index) in gradeArrs"
>
</el-option>
</el-select>
......@@ -503,27 +503,27 @@
<!-- 选科情况 -->
<el-col :span="12" v-show="configJson.electSubjectSituation == 1">
<el-form-item
label="选科情况"
prop="subjectState"
style="height: 73px"
:rules="
configJson.electSubjectSituation == 1
? referInfoRules.subjectState
: [{ required: false }]
"
label="选科情况"
prop="subjectState"
style="height: 73px"
>
<el-select
v-model="referForm.subjectState"
placeholder="请选科"
:popper-append-to-body="false"
@change="changeSubjectState"
clearable
placeholder="请选科"
v-model="referForm.subjectState"
>
<el-option
v-for="(item, index) in electSubjectArrs"
:key="index"
:label="item"
:value="item"
v-for="(item, index) in electSubjectArrs"
>
</el-option>
</el-select>
......@@ -532,29 +532,29 @@
<!--已选科-->
<el-col :span="12" v-if="configJson.electSubjectSituation == 1&& showSubject == 1">
<el-form-item
label="选科(最多选三科)"
prop="chooseSubject"
style="height: 73px"
:rules="
showSubject == 1
? referInfoRules.chooseSubject
: [{ required: false }]
"
label="选科(最多选三科)"
prop="chooseSubject"
style="height: 73px"
>
<el-select
v-model="referForm.chooseSubject"
multiple
placeholder="请选科"
:popper-append-to-body="false"
:multiple-limit="3"
:popper-append-to-body="false"
@change="changeSubjectList"
clearable
multiple
placeholder="请选科"
v-model="referForm.chooseSubject"
>
<el-option
v-for="(item, index) in SubjectArrs"
:key="index"
:label="item"
:value="item"
v-for="(item, index) in SubjectArrs"
>
</el-option>
</el-select>
......@@ -563,69 +563,69 @@
<!-- 既往病史或过敏史 -->
<el-col :span="12" v-show="configJson.pastMedicalHistory == 1&&isOffline==true">
<el-form-item
label="既往病史或过敏史"
prop="past_medical_history"
style="height: 73px"
:rules="
(configJson.pastMedicalHistory == 1?true:false)&&isOffline==true
? referInfoRules.clothesSize
: [{ required: false }]
"
label="既往病史或过敏史"
prop="past_medical_history"
style="height: 73px"
>
<el-input
ref="code"
v-model="referForm.past_medical_history"
clearable
placeholder="填写既往病史或过敏史"
ref="code"
size="small"
clearable
v-model="referForm.past_medical_history"
/>
</el-form-item>
</el-col>
<!-- 备注或其它 -->
<el-col :span="12" v-show="configJson.noteOther == 1&&isOffline==true">
<el-form-item
label="备注或其它"
prop="clothes_size"
style="height: 73px"
:rules="
(configJson.noteOther == 1?true:false)&&isOffline==true
? referInfoRules.clothesSize
: [{ required: false }]
"
label="备注或其它"
prop="clothes_size"
style="height: 73px"
>
<el-input
ref="code"
v-model="referForm.note_other"
clearable
placeholder="填写备注或其它"
ref="code"
size="small"
clearable
v-model="referForm.note_other"
/>
</el-form-item>
</el-col>
<!-- 衣服尺码-->
<el-col :span="12" v-show="configJson.clothesSize == 1&&isOffline==true">
<el-form-item
label="衣服尺码"
prop="clothes_size"
style="height: 73px"
:rules="
(configJson.clothesSize == 1?true:false)&&isOffline==true
? referInfoRules.clothesSize
: [{ required: false }]
"
label="衣服尺码"
prop="clothes_size"
style="height: 73px"
>
<el-select
ref="clothes_size"
v-model="referForm.clothes_size"
placeholder="填写衣服尺码"
:popper-append-to-body="false"
clearable
placeholder="填写衣服尺码"
ref="clothes_size"
v-model="referForm.clothes_size"
>
<el-option
v-for="item in clothesSize"
:key="item.id"
:label="item.name"
:value="item.name"
v-for="item in clothesSize"
>
</el-option>
</el-select>
......@@ -634,19 +634,19 @@
<!-- 邀请码 -->
<el-col :span="12" v-show="configJson.code == 1">
<el-form-item
prop="code"
label="邀请码"
prop="code"
style="height: 73px"
>
<el-input
ref="code"
v-model="referForm.code"
placeholder="邀请码"
size="small"
:disabled="isCode"
@change="changeCode"
clearable
placeholder="邀请码"
ref="code"
size="small"
v-model="referForm.code"
/>
</el-form-item>
<div class="tipsMsg">
......@@ -656,25 +656,25 @@
<!-- 自我介绍 -->
<el-col :span="12" v-show="configJson.introduceMyself == 1">
<el-form-item
prop="introduce"
label="自我介绍"
style="height:100%"
:rules="
configJson.introduceMyself == 1
? referInfoRules.introduceMyself
: [{ required: false }]
"
label="自我介绍"
prop="introduce"
style="height:100%"
>
<el-input
ref="code"
v-model="referForm.introduce"
placeholder="自我介绍"
type="textarea"
:rows="6"
@change="changeIntroduce"
maxlength="200"
placeholder="自我介绍"
ref="code"
show-word-limit
size="small"
@change="changeIntroduce"
show-word-limit/>
type="textarea"
v-model="referForm.introduce"/>
</el-form-item>
<div class="tipsMsg">
用清晰、简洁的语言介绍自己对科学和创新的兴趣、经验和动机，以及为什么希望参加“强国有我”复旦大学信息科学与工程学院青少年科学营
......@@ -693,40 +693,40 @@
<!-- 紧急联系人 -->
<el-col :span="12" v-show="configJson.emergency == 1">
<el-form-item
label="紧急联系人"
prop="emergency"
:rules="
configJson.emergency == 1
? referInfoRules.emergency
: [{ required: false }]
"
label="紧急联系人"
prop="emergency"
>
<el-input
ref="code"
v-model="referForm.emergency"
clearable
placeholder="填写紧急联系人"
ref="code"
size="small"
clearable
v-model="referForm.emergency"
/>
</el-form-item>
</el-col>
<!-- 紧急联系人电话 -->
<el-col :span="12" v-show="configJson.emergencyPhone == 1">
<el-form-item
label="紧急联系人电话"
prop="emergency_phone"
:rules="
configJson.emergencyPhone == 1
? referInfoRules.emergency_phone
: [{ required: false }]
"
label="紧急联系人电话"
prop="emergency_phone"
>
<el-input
ref="code"
v-model="referForm.emergency_phone"
clearable
placeholder="填写紧急联系人电话"
ref="code"
size="small"
clearable
v-model="referForm.emergency_phone"
/>
</el-form-item>
</el-col>
......@@ -746,27 +746,27 @@
<div class="school_info" v-show="configJson.school == 1">
<el-col :span="6">
<el-form-item
label="就读中学"
prop="school_province"
:rules="
configJson.school == 1
? referInfoRules.school_province
: [{ required: false }]
"
label="就读中学"
prop="school_province"
>
<el-select
ref="school_province"
v-model="referForm.school_province"
clearable
placeholder="省"
:popper-append-to-body="false"
@change="changeProvince(2, $event)"
clearable
placeholder="省"
ref="school_province"
v-model="referForm.school_province"
>
<el-option
v-for="item in selectProvince"
:key="item.id"
:label="item.name"
:value="item.id"
v-for="item in selectProvince"
>
</el-option>
</el-select>
......@@ -774,28 +774,28 @@
</el-col>
<el-col :span="6">
<el-form-item
class="no_label"
label=" "
prop="school_city"
:rules="
configJson.school == 1
? referInfoRules.school_city
: [{ required: false }]
"
class="no_label"
label=" "
prop="school_city"
>
<el-select
ref="school_city"
v-model="referForm.school_city"
clearable
placeholder="市"
:popper-append-to-body="false"
@change="changeCity($event)"
clearable
placeholder="市"
ref="school_city"
v-model="referForm.school_city"
>
<el-option
v-for="item in selectCitySchool"
:key="item.id"
:label="item.name"
:value="item.id"
v-for="item in selectCitySchool"
>
</el-option>
</el-select>
......@@ -803,28 +803,28 @@
</el-col>
<el-col :span="12">
<el-form-item
class="no_label"
label=" "
prop="school"
:rules="
configJson.school == 1
? referInfoRules.school
: [{ required: false }]
"
class="no_label"
label=" "
prop="school"
>
<el-select
:popper-append-to-body="false"
clearable
filterable
placeholder="中学"
ref="school"
v-model="referForm.school"
clearable
placeholder="中学"
:popper-append-to-body="false"
>
<el-option
v-for="item in selectSchoolList"
:key="item.id"
:label="item.name"
:value="item.id"
v-for="item in selectSchoolList"
>
</el-option>
</el-select>
......@@ -840,39 +840,39 @@
<el-col :span="12" v-show="configJson.schoolContacts == 1">
<el-form-item
label="中学联系人"
prop="school_contacts"
:rules="
configJson.schoolContacts == 1
? referInfoRules.school_contacts
: [{ required: false }]
"
label="中学联系人"
prop="school_contacts"
>
<el-input
ref="school_contacts"
v-model="referForm.school_contacts"
clearable
placeholder="填写中学联系人"
ref="school_contacts"
size="small"
clearable
v-model="referForm.school_contacts"
/>
</el-form-item>
</el-col>
<el-col :span="12" v-show="configJson.schoolPhone == 1">
<el-form-item
label="中学联系人电话（手机）"
prop="school_phone"
:rules="
configJson.schoolPhone == 1
? referInfoRules.school_phone
: [{ required: false }]
"
label="中学联系人电话（手机）"
prop="school_phone"
>
<el-input
ref="school_phone"
v-model="referForm.school_phone"
clearable
placeholder="填写中学联系人电话（手机）"
ref="school_phone"
size="small"
clearable
v-model="referForm.school_phone"
/>
</el-form-item>
</el-col>
......@@ -883,10 +883,10 @@
<div v-show="configJson.achievementPath == 1">
<div class="cont_title">学习成绩证明材料</div>
<el-form-item
class="bgPic"
label="上传申请资料图片"
prop="backgroundPicture"
style="height: 100%"
class="bgPic"
>
<div class="bgInfo">
1、资料包括：近期校级考试的成绩单、在校期间获得证书等相关证明；
......@@ -897,46 +897,46 @@
<div class="image_add">
<div class="image_in">
<el-upload
ref="imgUrl"
name="multipartFile"
list-type="picture-card"
:before-upload="beforeAvatarUpload"
:disabled="isUploading || fileList.length >= 10"
action="#"
accept=".jpg,.jpeg,.png"
:limit="10"
:file-list="fileList"
:before-upload="beforeAvatarUpload"
:http-request="uploadPicture"
:limit="10"
:on-progress="handleUploadProgress"
:on-success="uploadSuccess"
:http-request="uploadPicture"
accept=".jpg,.jpeg,.png"
action="#"
list-type="picture-card"
name="multipartFile"
ref="imgUrl"
>
<i style="font-size: 44px" class="el-icon-circle-plus"> </i>
<i class="el-icon-circle-plus" style="font-size: 44px"> </i>
<!-- <div class="text">上传材料</div> -->
<div slot="file" slot-scope="{ file }">
<div v-for="(item, idx) in fileList" :key="idx">
<div :key="idx" v-for="(item, idx) in fileList">
<img
class="el-upload-list__item-thumbnail"
:src="file.url"
alt=""
class="el-upload-list__item-thumbnail"
/>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
class="el-upload-list__item-preview"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
class="el-upload-list__item-delete"
v-if="!disabled"
>
<i class="el-icon-download"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
class="el-upload-list__item-delete"
v-if="!disabled"
>
<i class="el-icon-delete"></i>
</span>
......@@ -947,7 +947,7 @@
</div>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="resultPicture" alt=""/>
<img :src="resultPicture" alt="" width="100%"/>
</el-dialog>
</div>
</el-form-item>
......@@ -964,16 +964,9 @@
<script>
/* eslint-disable */
import {setInviteCode} from "r/index/signUp";
import {
getAccount,
getAchievementOss,
delPic,
setAccount,
getProAndCity,
getSchool,
} from "r/index/signUp";
import {upload} from "r/index/network";
import {delPic, getAccount, getProAndCity, getSchool, setAccount} from "r/index/signUp";
import COS from "cos-js-sdk-v5";
import {getSignature} from "r/index/cosUpload";
import validator from "common/validator";
import area from "config/area";
import cueDialog from "c/index/cueDialog";
......@@ -1811,61 +1804,128 @@
size: raw.size,
type: raw.type,
};
this.getOssConfigs(image, params.file);
this.getCosConfigs(image, params.file);
},
async getOssConfigs(image, file) {
let obj = {
url: "",
savefile: "",
};
await getAchievementOss({image: image})
// cos上传
async getCosConfigs(image, file) {
console.log(file)
this.loading = true;
await getSignature(1)
.then((res) => {
// console.log(res, "开始上传图片");
console.log(res, "开始上传图片");
let resData = res.data.data
if (res.data.code === 200) {
let oss_url = res.data.config.host;
let filename = res.data.config.file;
let formData = new FormData();
formData.append("OSSAccessKeyId", res.data.config.accessid);
formData.append("policy", res.data.config.policy);
formData.append("signature", res.data.config.signature);
formData.append("filename", res.data.config.file);
formData.append("key", res.data.config.savefile);
formData.append("callback", res.data.config.callback);
formData.append("success_action_status", 200);
formData.append("file", file);
// console.log(formData);
upload(oss_url, formData)
.then((ress) => {
// console.log(ress, "ress");
if (ress.data.code != 200) {
return this.$message.error(ress.data.message);
const cos = new COS({
// 必选参数
getAuthorization: (options, callback) => {
callback({
TmpSecretId: resData.credentials.tmpSecretId,
TmpSecretKey: resData.credentials.tmpSecretKey,
XCosSecurityToken: resData.credentials.sessionToken,
StartTime: resData.startTime, // 时间戳，单位秒，如：1580000000
ExpiredTime: resData.expiredTime, // 时间戳，单位秒，如：1580000900
});
},
});
console.log(resData)
cos.putObject({
Bucket: resData.bucket,
Region: resData.region,
Key: '111/fg.png',
Body: file,
onProgress: (progressData) => {
console.log("上传进度：" + JSON.stringify(progressData));
},
},
(err, data) => {
console.log(data);
if (err) {
console.log(err);
this.loading = false;
this.$message.error('上传失败！')
} else {
console.log(data);
this.signUploadSuccess('http://' + data.Location);
}
this.resultPicture = filename + "?t=" + Date.parse(new Date());
this.$forceUpdate();
this.$message.success("上传成功");
obj = {
url: ress.data.picture_path,
savefile: res.data.config.savefile,
};
this.fileList.push(obj);
let code = this.$store.state.indexIdentity;
window.localStorage.setItem("sign_up_file_" +
+window.localStorage.getItem("index-phone-all") +
code,
JSON.stringify(this.fileList)
);
})
.catch((err) => {
this.$message.error(err);
});
}
);
} else {
this.$message.error(res.data.message);
this.$message.error(resData.message);
}
})
.catch((err) => {
// console.log(err);
console.log(err);
// this.getIdCardPic();
});
},
// cos上传-告诉后端上传成功
async signUploadSuccess(path) {
await getSignature(1).then(res => {
if (res.data.code != 200) {
this.loading = false;
return this.$message.error('上传失败！');
}
this.loading = false;
this.$message.success('上传成功！');
// this.selfInfo.picture_path = path + "?t=" + Date.parse(new Date());
this.$forceUpdate();
}).catch(err => {
this.loading = false;
})
},
// async getOssConfigs(image, file) {
// let obj = {
// url: "",
// savefile: "",
// };
// await getAchievementOss({image: image})
// .then((res) => {
// // console.log(res, "开始上传图片");
// if (res.data.code === 200) {
// let oss_url = res.data.config.host;
// let filename = res.data.config.file;
// let formData = new FormData();
// formData.append("OSSAccessKeyId", res.data.config.accessid);
// formData.append("policy", res.data.config.policy);
// formData.append("signature", res.data.config.signature);
// formData.append("filename", res.data.config.file);
// formData.append("key", res.data.config.savefile);
// formData.append("callback", res.data.config.callback);
// formData.append("success_action_status", 200);
// formData.append("file", file);
// // console.log(formData);
// upload(oss_url, formData)
// .then((ress) => {
// // console.log(ress, "ress");
// if (ress.data.code != 200) {
// return this.$message.error(ress.data.message);
// }
// this.resultPicture = filename + "?t=" + Date.parse(new Date());
// this.$forceUpdate();
// this.$message.success("上传成功");
// obj = {
// url: ress.data.picture_path,
// savefile: res.data.config.savefile,
// };
// this.fileList.push(obj);
// let code = this.$store.state.indexIdentity;
// window.localStorage.setItem("sign_up_file_" +
// +window.localStorage.getItem("index-phone-all") +
// code,
// JSON.stringify(this.fileList)
// );
// })
// .catch((err) => {
// this.$message.error(err);
// });
// } else {
// this.$message.error(res.data.message);
// }
// })
// .catch((err) => {
// // console.log(err);
// });
// },
// 下载证明资料图片
handleDownload(file) {
// console.log(file,'file22');
......@@ -2068,7 +2128,7 @@
};
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
@import "a/scss/btn";
@import "a/scss/SignUp/referInfo";
</style>
src/request/base/login.js
View file @ 89a5bd49
......@@ -16,7 +16,6 @@ export function loginCode(data) {
method: 'post',
url: '/web/code/loginCode',
params: data
})
}
......
src/request/index/cosUpload.js 0 → 100644
View file @ 89a5bd49
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
View file @ 89a5bd49
......@@ -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
View file @ 89a5bd49
......@@ -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
View file @ 89a5bd49
......@@ -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
View file @ 89a5bd49
......@@ -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;
......
src/views/index/camp/homework/refer.vue
View file @ 89a5bd49
<template>
<div>
<el-dialog
:title="work_name"
:visible.sync="dialogVisible"
width="650px"
top="0"
:before-close="cancelBtn"
:close-on-click-modal="false"
:title="work_name"
:visible.sync="dialogVisible"
@open="open"
top="0"
width="650px"
>
<div class="referHome">
<el-form
:model="formData"
:rules="referRules"
ref="formRef_stu"
label-position="top"
class="readForm"
label-position="top"
ref="formRef_stu"
>
<!-- 老师布置的作业 -->
<div class="cont_title">
......@@ -25,26 +25,26 @@
</div>
</div>
<div class="cont_title_2">作业内容</div>
<div v-html="work_contexts" class="cont_info">}</div>
<div class="cont_info" v-html="work_contexts">}</div>
<div class="cont_title_2">相关附件</div>
<div class="upload_box">
<div v-if="teaFileList.length > 0">
<div
:key="index"
class="img_list"
v-for="(item, index) in teaFileList"
:key="index"
>
<div>
<el-image :src="fileImg"></el-image>
<div class="item_name">{{ item.name }}</div>
<div class="item_remove" @click="downloadStuFile(item.url)">
<div @click="downloadStuFile(item.url)" class="item_remove">
下载
</div>
</div>
</div>
</div>
<div v-if="teaFileList.length <= 0" class="img_list">
<div class="img_list" v-if="teaFileList.length <= 0">
<div>
<div class="item_name">暂无相关附件</div>
</div>
......@@ -61,14 +61,14 @@
prop="stu_answer"
>
<el-input
:disabled="is_end===false"
:maxlength="300"
placeholder="请输入300字以内的描述"
ref="stu_answer"
show-word-limit
size="small"
type="textarea"
v-model="formData.stu_answer"
placeholder="请输入300字以内的描述"
size="small"
:maxlength="300"
show-word-limit
:disabled="is_end===false"
/>
</el-form-item>
<!-- 上传相关附件 -->
......@@ -79,33 +79,29 @@
</div>
<div class="upload_box">
<div
:key="index"
class="img_list"
v-for="(item, index) in stu_fileList"
:key="index"
>
<div>
<el-image class="home_icon" :src="fileImg"></el-image>
<el-image :src="fileImg" class="home_icon"></el-image>
<div class="item_name">{{ item.name }}</div>
<div class="flex">
<div
@click="handleRemove(item)"
class="item_remove"
v-show="is_end===true"
@click="handleRemove(item)"
>
删除
</div>
<div
class="item_remove"
@click="handleCheck(item.url_open)"
class="item_remove"
>
查看作业
</div>
</div>
</div>
</div>
<!-- <div v-if="stu_fileList.length <= 0" class="img_list">-->
<!-- <div>-->
......@@ -114,25 +110,25 @@
<!-- </div>-->
<!-- </div>-->
<el-upload
v-if="stu_fileList.length < 10 "
ref="formData.stu_enclosure_url"
name="multipartFile"
action="#"
:file-list="stu_fileList"
:before-upload="beforeAvatarUpload"
:disabled="isUploading || stu_fileList.length >= 10"
:file-list="stu_fileList"
:http-request="uploadPicture"
:limit="10"
list-type="picture-card"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:http-request="uploadPicture"
action="#"
list-type="picture-card"
name="multipartFile"
ref="formData.stu_enclosure_url"
v-if="stu_fileList.length < 10 "
>
<i
v-if="!isUploading"
class="el-icon-plus avatar-uploader-icon"
v-if="!isUploading"
></i>
<i
v-if="isUploading"
class="el-icon-loading avatar-uploader-icon"
v-if="isUploading"
></i>
</el-upload>
......@@ -181,31 +177,31 @@
</el-form-item>
</div> -->
<!-- 评阅结果 -->
<div v-if="student_status == 2" style="height: 350px">
<div style="height: 350px" v-if="student_status == 2">
<div class="cont_title">
<div class="line"></div>
<div class="lf">
<span>评阅结果</span>
</div>
</div>
<div v-if="this.time_out != 3" class="cont_title_2">导师评分</div>
<div v-if="this.time_out != 3" class="cont_info">{{ score }}</div>
<div v-if="this.time_out == 3" class="cont_title_2">导师评语</div>
<div v-if="this.time_out == 3" v-html="teacher_commment" class="cont_info">}</div>
<div v-if="this.time_out != 3" class="cont_title_2">相关附件</div>
<div v-if="this.time_out != 3" class="upload_box">
<div class="cont_title_2" v-if="this.time_out != 3">导师评分</div>
<div class="cont_info" v-if="this.time_out != 3">{{ score }}</div>
<div class="cont_title_2" v-if="this.time_out == 3">导师评语</div>
<div class="cont_info" v-html="teacher_commment" v-if="this.time_out == 3">}</div>
<div class="cont_title_2" v-if="this.time_out != 3">相关附件</div>
<div class="upload_box" v-if="this.time_out != 3">
<div v-if="tea_scoreFileList.length > 0">
<div
:key="index"
class="img_list"
v-for="(item, index) in tea_scoreFileList"
:key="index"
>
<div>
<el-image :src="fileImg"></el-image>
<div class="item_name">{{ item.name }}</div>
<div
class="item_remove"
@click="downloadScoreFile(item.url)"
class="item_remove"
>
下载
</div>
......@@ -213,16 +209,15 @@
</div>
</div>
<div v-if="tea_scoreFileList.length <= 0" class="img_list">
<div class="img_list" v-if="tea_scoreFileList.length <= 0">
<div>
<div class="item_name">暂无相关附件</div>
</div>
</div>
</div>
</div>
<el-form-item class="btn">
<el-button type="primary" v-preventReClick="1000" @click="confirm"
<el-button @click="confirm" type="primary" v-preventReClick="1000"
>提交
</el-button
>
......@@ -232,16 +227,16 @@
</el-dialog>
<!--查看作业图片 -->
<el-dialog
title="作业"
:visible.sync="dialogVisibleImage"
width="30%"
:before-close="handleImageClose"
:visible.sync="dialogVisibleImage"
append-to-body
title="作业"
width="30%"
>
<el-image
:lazy='true'
:src="srcList_url_open"
:preview-src-list="srcList"
:src="srcList_url_open"
></el-image>
</el-dialog>
</div>
......@@ -249,9 +244,18 @@
</template>
<script>
import {delPic, downloadTeacherWork, getStudentWork, PostWorkStudentOss, subStudentWork,} from "r/index/homework";
import {
delPic,
downloadTeacherWork,
getStudentWork,
PostWorkStudentOss,
subStudentWork
} from "r/index/homework";
import {
getSignature,
} from "r/index/cosUpload";
import fileImg from "@/assets/img/homework/file_img.png";
import {parseTime} from "@/common/utils";
import COS from "cos-js-sdk-v5";
export default {
name: "ReadForm",
......@@ -267,7 +271,7 @@
end_time: [Boolean], //作业截止时间
},
data() {
var validateNum = (rule, value, callback) => {
const validateNum = (rule, value, callback) => {
console.log(value, "value");
// let code = this.$store.state.indexIdentity;
// this.formData.stu_enclosure_url = window.localStorage.getItem(
......@@ -456,7 +460,6 @@
});
},
// 成功确认取消,关闭弹框，修改父组件的值
cancelBtnTrue() {
let code = this.$store.state.indexIdentity;
......@@ -501,7 +504,74 @@
size: raw.size,
type: raw.type,
};
this.getOssConfigs(image, params.file);
this.getCosConfigs(image, params.file);
},
// cos上传
async getCosConfigs(image, file) {
console.log(file)
this.loading = true;
await getSignature(2)
.then((res) => {
console.log(res, "开始上传图片");
let resData = res.data.data
if (res.data.code === 200) {
const cos = new COS({
// 必选参数
getAuthorization: (options, callback) => {
callback({
TmpSecretId: resData.credentials.tmpSecretId,
TmpSecretKey: resData.credentials.tmpSecretKey,
XCosSecurityToken: resData.credentials.sessionToken,
StartTime: resData.startTime, // 时间戳，单位秒，如：1580000000
ExpiredTime: resData.expiredTime, // 时间戳，单位秒，如：1580000900
});
},
});
console.log(resData)
cos.putObject({
Bucket: resData.bucket,
Region: resData.region,
Key: '111/fg.png',
Body: file,
onProgress: (progressData) => {
console.log("上传进度：" + JSON.stringify(progressData));
},
},
(err, data) => {
console.log(data);
if (err) {
console.log(err);
this.loading = false;
this.$message.error('上传失败！')
} else {
console.log(data);
this.signUploadSuccess('http://' + data.Location);
}
}
);
} else {
this.$message.error(resData.message);
}
})
.catch((err) => {
console.log(err);
// this.getIdCardPic();
});
},
// cos上传-告诉后端上传成功
async signUploadSuccess(path) {
await getSignature(2).then(res => {
if (res.data.code != 200) {
this.loading = false;
return this.$message.error('上传失败！');
}
this.loading = false;
this.$message.success('上传成功！');
// this.selfInfo.picture_path = path + "?t=" + Date.parse(new Date());
this.$forceUpdate();
}).catch(err => {
this.loading = false;
})
},
async getOssConfigs(image, file) {
let obj = {
......@@ -759,7 +829,7 @@
};
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
@import "a/scss/btn";
@import "a/scss/homework/refer";
......
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