Skip to content

C
campSite
Commit 98c00ea4 authored by ‘yangmengxue’'s avatar ‘yangmengxue’
Browse files
Options

支付文字修改

parent 31ac18b2
Hide whitespace changes
Inline Side-by-side
Showing with 595 additions and 563 deletions
src/components/index/SignUp/paying.vue
View file @ 98c00ea4
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
</div> </div>
<div class="btn"> <div class="btn">
<el-button @click="paying()" v-if="$store.state.human == 1" <el-button @click="paying()" v-if="$store.state.human == 1"
>上传缴费截图 >上传缴费截图
</el-button> </el-button>
<el-button @click="paying()" v-else>立即支付</el-button> <el-button @click="paying()" v-else>立即支付</el-button>
</div> </div>
...@@ -106,19 +106,34 @@ ...@@ -106,19 +106,34 @@
title="提示" title="提示"
width="30%" width="30%"
> >
<div class="margin1">
如您使用手机报名：点击“确认”后将直接发起微信支付，按照指引完成支付即可。
</div>
<div class="margin1">
如您使用电脑报名：点击“确认”后系统将出现支付二维码，使用手机微信或支付宝扫码，按照指引完成支付即可。
</div>
<div> <div>
<div>为保障支付顺利，请注意：</div> <div v-if="this.transfer_account == 1">
<div>1、请确保支付账户余额充足。</div> <div>
<div> <div>为确保缴费流程顺利，请注意：</div>
2、如因支付失败需再次支付时，务必使用和第一次支付时相同的微信或支付宝账号进行操作。 <div>1、请在缴费时仔细核对收款账户信息，确保信息准确无误。</div>
<div>2、在转账过程中，务必在附言或备注栏中注明“学生本人姓名”。</div>
<div>
3、完成支付后，将带有订单编号的付款截图作为转账凭证上传至指定界面。
</div>
</div>
</div>
<div v-else>
<div class="margin1">
如您使用手机报名：点击“确认”后将直接发起微信支付，按照指引完成支付即可。
</div>
<div class="margin1">
如您使用电脑报名：点击“确认”后系统将出现支付二维码，使用手机微信或支付宝扫码，按照指引完成支付即可。
</div>
<div>
<div>为保障支付顺利，请注意：</div>
<div>1、请确保支付账户余额充足。</div>
<div>
2、如因支付失败需再次支付时，务必使用和第一次支付时相同的微信或支付宝账号进行操作。
</div>
</div>
</div> </div>
</div> </div>
<span class="dialog-footer" slot="footer"> <span class="dialog-footer" slot="footer">
<el-button @click="dialogPayingVisible = false">取 消</el-button> <el-button @click="dialogPayingVisible = false">取 消</el-button>
<el-button @click="toPaying" type="primary">确 定</el-button> <el-button @click="toPaying" type="primary">确 定</el-button>
...@@ -163,7 +178,7 @@ ...@@ -163,7 +178,7 @@
<div><span>收款单位:</span>{{ payee }}</div> <div><span>收款单位:</span>{{ payee }}</div>
<div><span>账号:</span>{{ bank_idcard }}</div> <div><span>账号:</span>{{ bank_idcard }}</div>
<div><span>开户行:</span>{{ bank_first }}</div> <div><span>开户行:</span>{{ bank_first }}</div>
<span>上传转账截图</span> <span>上传带有订单编号的转账截图</span>
<div class="image_add"> <div class="image_add">
<div class="image_in"> <div class="image_in">
<el-upload <el-upload
...@@ -188,27 +203,27 @@ ...@@ -188,27 +203,27 @@
class="el-upload-list__item-thumbnail" class="el-upload-list__item-thumbnail"
/> />
<span class="el-upload-list__item-actions"> <span class="el-upload-list__item-actions">
<span <span
@click="handlePictureCardPreview(file)" @click="handlePictureCardPreview(file)"
class="el-upload-list__item-preview" class="el-upload-list__item-preview"
> >
<i class="el-icon-zoom-in"></i> <i class="el-icon-zoom-in"></i>
</span> </span>
<span <span
@click="handleDownload(file)" @click="handleDownload(file)"
class="el-upload-list__item-delete" class="el-upload-list__item-delete"
v-if="!disabled" v-if="!disabled"
> >
<i class="el-icon-download"></i> <i class="el-icon-download"></i>
</span> </span>
<span <span
@click="handleRemove(file)" @click="handleRemove(file)"
class="el-upload-list__item-delete" class="el-upload-list__item-delete"
v-if="!disabled" v-if="!disabled"
> >
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</span>
</span> </span>
</span>
</div> </div>
</div> </div>
<i class="el-icon-circle-plus"> </i> <i class="el-icon-circle-plus"> </i>
...@@ -216,12 +231,11 @@ ...@@ -216,12 +231,11 @@
</div> </div>
<el-dialog :visible.sync="dialogVisible"> <el-dialog :visible.sync="dialogVisible">
<img :src="resultPicture" alt="" width="100%"/> <img :src="resultPicture" alt="" width="100%" />
</el-dialog> </el-dialog>
</div> </div>
</div> </div>
<span class="dialog-footer" slot="footer"> <span class="dialog-footer" slot="footer">
<el-button @click="bankDialogVisible = false">取 消</el-button> <el-button @click="bankDialogVisible = false">取 消</el-button>
<el-button @click="uploadConfirm" type="primary">确 定</el-button> <el-button @click="uploadConfirm" type="primary">确 定</el-button>
...@@ -231,338 +245,346 @@ ...@@ -231,338 +245,346 @@
</template> </template>
<script> <script>
/* eslint-disable */ /* eslint-disable */
import ConfirmSignUp from "c/index/SignUp/ConfirmSignUp"; import ConfirmSignUp from "c/index/SignUp/ConfirmSignUp";
import {delPayingPic, getAccount, signUpInit,} from "r/index/signUp"; import { delPayingPic, getAccount, signUpInit } from "r/index/signUp";
import {getWxConfig} from "r/index/pay"; import { getWxConfig } from "r/index/pay";
import {achievementCallBack, cosSignature} from "r/index/cosUpload"; import { achievementCallBack, cosSignature } from "r/index/cosUpload";
import COS from "cos-js-sdk-v5"; import COS from "cos-js-sdk-v5";
export default { export default {
name: "Paying", name: "Paying",
components: { components: {
ConfirmSignUp, 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,
isBank_infoFile: false,
};
},
created() {
const code = this.$store.state.indexIdentity;
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((_) => {});
}, },
data() { // 子组件触发，关闭确认报名弹框
return { closeCFSUDialog(val, isSuccess) {
dialogPayingVisible: false, //支付时候tip console.log(val, "val");
dialogChoose: false, //付款方式选择 console.log(isSuccess, "isSuccess");
confirmSignUpDialogFu: false, // 控制确认报名弹框的显示与隐藏 this.confirmSignUpDialogFu = val;
bankDialogVisible: false, //上传银行截图弹框的显示与隐藏 if (isSuccess == 1) {
personalInfo: {}, this.$emit("getstatus", 6);
camp_name: "", //营地名称 }
has_amount: "", //支付金额 },
status: "", //状态 toWechat() {
status_wx: "", //状态 // this.dialogChoose = false;
type: "", //状态 this.confirmSignUpDialogFu = true;
//支付状态判断
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,
isBank_infoFile: false,
};
}, },
created() { toPaybao() {
const code = this.$store.state.indexIdentity; getWxConfig({
this.has_amount = window.localStorage.getItem("has_amount" + code); pay_type: 2,
// 已上传的银行付款图片 }).then((res) => {
let bank_infoFile = window.localStorage.getItem( console.log(res, "getWxConfig");
"bank_info" + window.localStorage.getItem("index-phone-all") + code if (res.data.code != 200) {
); return this.$message.error(res.data.msg);
JSON.parse(bank_infoFile).map((i) => {
if (i.url != '') {
this.isBank_infoFile = true
} }
}) /* 此处form就是后台返回接收到的数据 */
if (bank_infoFile && this.isBank_infoFile == true && JSON.parse(bank_infoFile).length > 0) { let form = res.data.data;
console.log(JSON.parse(bank_infoFile)); console.log(form);
this.fileList = JSON.parse(bank_infoFile); // 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;
} }
this.getAccount();
this.commonApi(33)
}, },
methods: { toPaying() {
handleClose(done) { this.commonApi(34);
this.$confirm("确认关闭？") this.dialogPayingVisible = false;
.then((_) => { if (this.has_amount == 0) {
done(); getWxConfig({ pay_type: 3 }).then((res) => {
}) console.log(res, "signUpInit");
.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) { if (res.data.code != 200) {
return this.$message.error(res.data.msg); return this.$message.error(res.data.msg);
} }
/* 此处form就是后台返回接收到的数据 */ this.$message.success(res.data.err_msg);
let form = res.data.data; this.$emit("getstatus", 6);
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);
}); });
}, } else {
// 立即支付-按钮 // transfer_account 判断微信支付宝或者银行卡支付
paying() { if (this.transfer_account == 0) {
let code = this.$store.state.indexIdentity; this.dialogChoose = true;
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.msg);
}
this.$message.success(res.data.err_msg);
this.$emit("getstatus", 6);
});
} else { } else {
// transfer_account 判断微信支付宝或者银行卡支付 this.bankDialogVisible = true;
if (this.transfer_account == 0) { if (this.fileList.length >= 1) {
this.dialogChoose = true; this.hideUpload = true;
} else {
this.bankDialogVisible = true;
if (this.fileList.length >= 1) {
this.hideUpload = true;
}
} }
} }
// setTimeout(this.signUpInit(this.status_wx), 1000); }
}, // setTimeout(this.signUpInit(this.status_wx), 1000);
signUpInit() { },
signUpInit({}).then((res) => { signUpInit() {
console.log(res, "signUpInit"); signUpInit({}).then((res) => {
if (res.data.code != 200) { console.log(res, "signUpInit");
return this.$message.error(res.data.msg); if (res.data.code != 200) {
return this.$message.error(res.data.msg);
}
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;
}
} }
this.status = res.data.status; if (res.data.pay_amount == 0) {
// return; getWxConfig({ pay_type: 3 }).then((res) => {
// 点击下一步传值给status,更新 console.log(res, "signUpInit");
if (this.status == 4) { if (res.data.code != 200) {
this.type = "check"; return this.$message.error(res.data.msg);
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;
} }
} this.$message.success(res.data.err_msg);
if (res.data.pay_amount == 0) { });
getWxConfig({pay_type: 3}).then((res) => { }
console.log(res, "signUpInit"); // pay_amount支付金额等于0，直接跳到成功页面
if (res.data.code != 200) { } else if (this.status == 5) {
return this.$message.error(res.data.msg); this.type = "pay";
} // pay_amount支付金额等于0，直接跳到成功页面
this.$message.success(res.data.err_msg); if (res.data.pay_amount == 0) {
}); this.type = "success";
} this.$emit("getstatus", 6);
// pay_amount支付金额等于0，直接跳到成功页面 } else {
} else if (this.status == 5) { // transfer_account 判断微信支付宝或者银行卡支付
this.type = "pay"; if (this.transfer_account == 0) {
// pay_amount支付金额等于0，直接跳到成功页面 this.dialogChoose = true;
if (res.data.pay_amount == 0) {
this.type = "success";
this.$emit("getstatus", 6);
} else { } else {
// transfer_account 判断微信支付宝或者银行卡支付 this.bankDialogVisible = true;
if (this.transfer_account == 0) { if (this.fileList.length >= 1) {
this.dialogChoose = true; this.hideUpload = true;
} else {
this.bankDialogVisible = true;
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.msg);
}
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) { // else if (this.status == 6) {
this.$message.info("上传图片大小不能超过 10MB!"); // this.type = "success";
} // }
return (isJPG || isPng || isJPEG) && isLt10M; this.$emit("getstatus", res.data.status);
}, });
handlePictureCardPreview(file) { },
console.log(file, "11111111"); getAccount() {
this.resultPicture = file.url; getAccount({}).then((res) => {
this.dialogVisible = true; // console.log(res, "getAccount");
}, if (res.data.code != 200) {
// 文件上传中处理 return this.$message.error(res.data.msg);
handleUploadProgress(event, file, fileList) {
// console.log(fileList);
this.isUploading = true;
if (this.fileList.length < 1) {
return this.$message.info("超过上传数量");
} }
}, this.personalInfo = res.data.info;
uploadSuccess(res, file, fileList) { // this.personalInfo.create_time = parseTime(res.data.info.create_time);
this.referForm.achievementPath = res; });
this.fileList = { },
name: file.name,
url: res, // 图片上传成功前钩子
}; beforeAvatarUpload(file) {
// console.log(file, "beforeImage");
this.$refs["imgUrl"].clearFiles(); //上传成功之后清除历史记录 const isJPG = file.type === "image/jpg";
}, const isPng = file.type === "image/png";
uploadPicture(params) { const isJPEG = file.type === "image/jpeg";
// console.log("已经准备好上传图片", params); const isLt10M = file.size / 1024 / 1024 < 10;
this.file = params.file; // console.log(isLt10M)
let raw = params.file; if (!isJPG && !isPng && !isJPEG) {
let image = { this.$message.info("上传图片只能是 JPG,JPEG或png 格式!");
name: raw.name, }
size: raw.size, if (!isLt10M) {
type: raw.type, this.$message.info("上传图片大小不能超过 10MB!");
}; }
this.file_image = image; return (isJPG || isPng || isJPEG) && isLt10M;
this.getCosConfigs(this.file_image, params.file); },
}, handlePictureCardPreview(file) {
// 上传截图 console.log(file, "11111111");
uploadConfirm() { this.resultPicture = file.url;
this.bankDialogVisible = false; this.dialogVisible = true;
// this.$message.success("你的支付信息已提交，请留意短信通知。"); },
// this.getOssConfigs(this.file_image, this.file); // 文件上传中处理
}, handleUploadProgress(event, file, fileList) {
async changeStatus() { // console.log(fileList);
// console.log(SERVER_WS_URL); this.isUploading = true;
let {data: res} = await getWxConfig({ if (this.fileList.length < 1) {
pay_type: 4, return this.$message.info("超过上传数量");
}); }
}, },
// cos上传 uploadSuccess(res, file, fileList) {
async getCosConfigs(image, file) { this.referForm.achievementPath = res;
this.loading = true; this.fileList = {
await cosSignature({image: image, index: '3'}) name: file.name,
.then((res) => { url: res,
let resData = res.data.data };
if (res.data.code === 200) {
const cos = new COS({ this.$refs["imgUrl"].clearFiles(); //上传成功之后清除历史记录
// 必选参数 },
getAuthorization: (options, callback) => { uploadPicture(params) {
callback({ // console.log("已经准备好上传图片", params);
TmpSecretId: resData.credentials.credential.credentials.tmpSecretId, this.file = params.file;
TmpSecretKey: resData.credentials.credential.credentials.tmpSecretKey, let raw = params.file;
XCosSecurityToken: resData.credentials.credential.credentials.sessionToken, let image = {
StartTime: resData.credentials.credential.startTime, // 时间戳，单位秒，如：1580000000 name: raw.name,
ExpiredTime: resData.credentials.credential.expiredTime, // 时间戳，单位秒，如：1580000900 size: raw.size,
}); type: raw.type,
}, };
}); this.file_image = image;
console.log(resData) this.getCosConfigs(this.file_image, params.file);
cos.putObject({ },
Bucket: resData.credentials.bucket, // 上传截图
Region: resData.credentials.region, uploadConfirm() {
Key: resData.key, this.bankDialogVisible = false;
Body: file, // this.$message.success("你的支付信息已提交，请留意短信通知。");
onProgress: (progressData) => { // this.getOssConfigs(this.file_image, this.file);
console.log("上传进度：" + JSON.stringify(progressData)); },
}, async changeStatus() {
// console.log(SERVER_WS_URL);
let { data: res } = await getWxConfig({
pay_type: 4,
});
},
// cos上传
async getCosConfigs(image, file) {
this.loading = true;
await cosSignature({ image: image, index: "3" })
.then((res) => {
let resData = res.data.data;
if (res.data.code === 200) {
const cos = new COS({
// 必选参数
getAuthorization: (options, callback) => {
callback({
TmpSecretId:
resData.credentials.credential.credentials.tmpSecretId,
TmpSecretKey:
resData.credentials.credential.credentials.tmpSecretKey,
XCosSecurityToken:
resData.credentials.credential.credentials.sessionToken,
StartTime: resData.credentials.credential.startTime, // 时间戳，单位秒，如：1580000000
ExpiredTime: resData.credentials.credential.expiredTime, // 时间戳，单位秒，如：1580000900
});
},
});
console.log(resData);
cos.putObject(
{
Bucket: resData.credentials.bucket,
Region: resData.credentials.region,
Key: resData.key,
Body: file,
onProgress: (progressData) => {
console.log("上传进度：" + JSON.stringify(progressData));
}, },
(err, data) => { },
(err, data) => {
console.log(data);
if (err) {
console.log(err);
this.loading = false;
this.$message.error("上传失败！");
} else {
console.log(data); console.log(data);
if (err) { this.signUploadSuccess("http://" + data.Location, resData);
console.log(err);
this.loading = false;
this.$message.error('上传失败！')
} else {
console.log(data);
this.signUploadSuccess('http://' + data.Location, resData);
}
} }
); }
} else { );
this.$message.error(resData.msg); } else {
} this.$message.error(resData.msg);
}) }
.catch((err) => { })
console.log(err); .catch((err) => {
}); console.log(err);
}, });
// cos上传-告诉后端上传成功 },
async signUploadSuccess(path, resData) { // cos上传-告诉后端上传成功
await achievementCallBack({key: resData.key, index: 3}).then(res => { async signUploadSuccess(path, resData) {
await achievementCallBack({ key: resData.key, index: 3 })
.then((res) => {
if (res.data.code != 200) { if (res.data.code != 200) {
this.loading = false; this.loading = false;
return this.$message.error('上传失败！'); return this.$message.error("上传失败！");
} }
console.log(res) console.log(res);
this.loading = false; this.loading = false;
this.$message.success('上传成功！'); this.$message.success("上传成功！");
this.resultPicture = path + "?t=" + Date.parse(new Date()); this.resultPicture = path + "?t=" + Date.parse(new Date());
this.$forceUpdate(); this.$forceUpdate();
let obj = { let obj = {
...@@ -570,274 +592,284 @@ ...@@ -570,274 +592,284 @@
}; };
this.fileList.push(obj); this.fileList.push(obj);
let code = this.$store.state.indexIdentity; let code = this.$store.state.indexIdentity;
window.localStorage.setItem("sign_up_payfile_" + window.localStorage.getItem("index-phone-all") + code, JSON.stringify(this.fileList)); window.localStorage.setItem(
"sign_up_payfile_" +
window.localStorage.getItem("index-phone-all") +
code,
JSON.stringify(this.fileList)
);
this.$message.success({ this.$message.success({
message: message: "您已上传成功，等待短信通知，审核通过后登录报名网址。",
"您已上传成功，等待短信通知，审核通过后登录报名网址。",
duration: 5000, duration: 5000,
}); });
this.hideUpload = this.fileList.length >= 1; this.hideUpload = this.fileList.length >= 1;
this.changeStatus(); this.changeStatus();
}).catch(err => {
this.loading = false;
}) })
}, .catch((err) => {
// async getOssConfigs(image, file) { this.loading = false;
// let obj = { });
// url: "", },
// savefile: "", // async getOssConfigs(image, file) {
// }; // let obj = {
// await getBankInfoOss({image: image}) // url: "",
// .then((res) => { // savefile: "",
// console.log(res, "开始上传图片"); // };
// if (res.data.code === 200) { // await getBankInfoOss({image: image})
// let oss_url = res.data.config.host; // .then((res) => {
// let filename = res.data.config.file; // console.log(res, "开始上传图片");
// let formData = new FormData(); // if (res.data.code === 200) {
// formData.append("OSSAccessKeyId", res.data.config.accessid); // let oss_url = res.data.config.host;
// formData.append("policy", res.data.config.policy); // let filename = res.data.config.file;
// formData.append("signature", res.data.config.signature); // let formData = new FormData();
// formData.append("filename", res.data.config.file); // formData.append("OSSAccessKeyId", res.data.config.accessid);
// formData.append("key", res.data.config.savefile); // formData.append("policy", res.data.config.policy);
// formData.append("callback", res.data.config.callback); // formData.append("signature", res.data.config.signature);
// formData.append("success_action_status", 200); // formData.append("filename", res.data.config.file);
// formData.append("file", file); // formData.append("key", res.data.config.savefile);
// // console.log(formData); // formData.append("callback", res.data.config.callback);
// upload(oss_url, formData) // formData.append("success_action_status", 200);
// .then((ress) => { // formData.append("file", file);
// console.log(555555555); // // console.log(formData);
// console.log(ress, "ress"); // upload(oss_url, formData)
// if (ress.data.code != 200) { // .then((ress) => {
// return this.$message.error(ress.data.msg); // console.log(555555555);
// } // console.log(ress, "ress");
// this.resultPicture = filename + "?t=" + Date.parse(new Date()); // if (ress.data.code != 200) {
// // this.$forceUpdate(); // return this.$message.error(ress.data.msg);
// obj = { // }
// url: ress.data.picture_path, // this.resultPicture = filename + "?t=" + Date.parse(new Date());
// savefile: res.data.config.savefile, // // this.$forceUpdate();
// }; // obj = {
// this.fileList.push(obj); // url: ress.data.picture_path,
// let code = this.$store.state.indexIdentity; // savefile: res.data.config.savefile,
// window.localStorage.setItem("sign_up_payfile_" + window.localStorage.getItem("index-phone-all") + code, JSON.stringify(this.fileList)); // };
// this.$message.success({ // this.fileList.push(obj);
// message: // let code = this.$store.state.indexIdentity;
// "您已上传成功，等待短信通知，审核通过后登录报名网址。", // window.localStorage.setItem("sign_up_payfile_" + window.localStorage.getItem("index-phone-all") + code, JSON.stringify(this.fileList));
// duration: 5000, // this.$message.success({
// }); // message:
// this.changeStatus(); // "您已上传成功，等待短信通知，审核通过后登录报名网址。",
// this.hideUpload = this.fileList.length >= this.limitCount; // duration: 5000,
// }) // });
// .catch((err) => { // this.changeStatus();
// this.$message.error(err); // this.hideUpload = this.fileList.length >= this.limitCount;
// }); // })
// } else { // .catch((err) => {
// this.$message.error(res.data.msg); // this.$message.error(err);
// } // });
// }) // } else {
// .catch((err) => { // this.$message.error(res.data.msg);
// // console.log(err); // }
// }); // })
// }, // .catch((err) => {
// 下载证明资料图片 // // console.log(err);
handleDownload(file) { // });
// console.log(file,'file22'); // },
window.location.href = file.url; // 下载证明资料图片
}, handleDownload(file) {
//删除图片 // console.log(file,'file22');
handleRemove(file) { window.location.href = file.url;
console.log(file, "file"); },
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", { //删除图片
confirmButtonText: "确定", handleRemove(file) {
cancelButtonText: "取消", console.log(file, "file");
type: "warning", this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
}) confirmButtonText: "确定",
.then(() => { cancelButtonText: "取消",
let getfile = file.url; type: "warning",
console.log(file) })
// console.log(savefile.match(/^(?:[^\/]|\/\/)*/),'222222')；//获取域名 .then(() => {
let str = getfile.split( let getfile = file.url;
"https://yingdi-bank-info-1320656968.cos.ap-beijing.myqcloud.com/" console.log(file);
); //https://yingdi-bank-info-1320656968.cos.ap-beijing.myqcloud.com/进行分割， // console.log(savefile.match(/^(?:[^\/]|\/\/)*/),'222222')；//获取域名
let str = getfile.split(
let savefile = str[1].split('?')[0]; "https://yingdi-bank-info-1320656968.cos.ap-beijing.myqcloud.com/"
delPayingPic({object: savefile}).then((res) => { ); //https://yingdi-bank-info-1320656968.cos.ap-beijing.myqcloud.com/进行分割，
if (res.data.code != 200) {
return this.$message.error(res.data.msg); let savefile = str[1].split("?")[0];
} delPayingPic({ object: savefile }).then((res) => {
this.fileList.forEach((item, idx) => { if (res.data.code != 200) {
if (item.url == file.url) { return this.$message.error(res.data.msg);
this.fileList.splice(idx, 1); }
let code = this.$store.state.indexIdentity; this.fileList.forEach((item, idx) => {
window.localStorage.setItem("sign_up_payfile_" + window.localStorage.getItem("index-phone-all") + code, JSON.stringify(this.fileList)); if (item.url == file.url) {
this.$message.success("删除成功"); this.fileList.splice(idx, 1);
this.hideUpload = this.fileList.length >= 1; let code = this.$store.state.indexIdentity;
window.localStorage.removeItem( window.localStorage.setItem(
"bank_info" + "sign_up_payfile_" +
window.localStorage.getItem("index-phone-all") +
code,
JSON.stringify(this.fileList)
);
this.$message.success("删除成功");
this.hideUpload = this.fileList.length >= 1;
window.localStorage.removeItem(
"bank_info" +
window.localStorage.getItem("index-phone-all") + window.localStorage.getItem("index-phone-all") +
code code
); );
} }
});
});
})
.catch((err) => {
this.$message({
type: "info",
message: "取消删除",
}); });
}); });
}, })
.catch((err) => {
this.$message({
type: "info",
message: "取消删除",
});
});
}, },
}; },
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "a/scss/btn"; @import "a/scss/btn";
@import "a/scss/dialog"; @import "a/scss/dialog";
.btn { .btn {
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
.flex {
display: flex;
}
.flex { .margin1 {
display: flex; margin-bottom: 1rem;
}
::v-deep .hide {
.el-upload--picture-card {
display: none;
} }
.margin1 { .el-upload-list__item div {
margin-bottom: 1rem; height: 100%;
} }
}
::v-deep .hide { .paying {
.el-upload--picture-card { padding: 0 56px 65px 56px;
display: none;
}
.el-upload-list__item div { .pay_titile {
height: 100%; font-size: 18px;
} font-weight: 500;
color: #12141c;
line-height: 18px;
} }
.paying { .pay_top {
padding: 0 56px 65px 56px; margin: 24px 0;
.pay_titile { div {
font-size: 18px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #12141c; color: #12141c;
line-height: 18px; line-height: 32px;
} }
}
.pay_top { .line {
margin: 24px 0; height: 1px;
border-bottom: 1px solid #d1d1d1;
}
div { .pay-money {
font-size: 14px; font-size: 18px;
font-weight: 500; font-weight: 500;
color: #12141c; color: #12141c;
line-height: 32px; line-height: 24px;
} justify-content: space-between;
} margin: 43px 0 0 0;
.line { span {
height: 1px; color: #60194a;
border-bottom: 1px solid #d1d1d1;
} }
}
.pay-money { .pay_bottom {
font-size: 18px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #12141c; color: #999999;
line-height: 24px; line-height: 21px;
justify-content: space-between;
margin: 43px 0 0 0;
span { .cc {
color: #60194a; font-weight: 600;
} color: black;
} }
.pay_bottom { .starIcon {
font-size: 12px; color: red;
font-weight: 500;
color: #999999;
line-height: 21px;
.cc {
font-weight: 600;
color: black;
}
.starIcon {
color: red;
}
} }
} }
}
.choose { .choose {
text-align: center; text-align: center;
.img_choose { .img_choose {
justify-content: space-around; justify-content: space-around;
img { img {
width: 38%; width: 38%;
cursor: pointer; cursor: pointer;
}
}
.text_choose {
font-size: 15px;
margin: 20px 0 50px 0;
} }
}
.btn .el-button { .text_choose {
width: 120px !important; font-size: 15px;
} margin: 20px 0 50px 0;
} }
// .pay_code { .btn .el-button {
// text-align: center; width: 120px !important;
// :nth-child(1) { }
// font-size: 14px; }
// font-weight: 500;
// color: #12141c; // .pay_code {
// line-height: 14px; // text-align: center;
// span { // :nth-child(1) {
// font-size: 13px !important; // font-size: 14px;
// color: var(--color); // font-weight: 500;
// } // color: #12141c;
// } // line-height: 14px;
// :nth-child(2) { // span {
// font-size: 14px; // font-size: 13px !important;
// font-weight: 500; // color: var(--color);
// color: var(--color); // }
// line-height: 24px; // }
// } // :nth-child(2) {
// :nth-child(4) { // font-size: 14px;
// font-size: 14px; // font-weight: 500;
// font-weight: 500; // color: var(--color);
// color: #333333; // line-height: 24px;
// line-height: 16px; // }
// span { // :nth-child(4) {
// font-size: 17px !important; // font-size: 14px;
// color: var(--color); // font-weight: 500;
// } // color: #333333;
// } // line-height: 16px;
// :nth-child(5) { // span {
// font-size: 12px; // font-size: 17px !important;
// font-weight: 500; // color: var(--color);
// color: #666666; // }
// line-height: 12px; // }
// } // :nth-child(5) {
// } // font-size: 12px;
// font-weight: 500;
.bank_pay { // color: #666666;
& div { // line-height: 12px;
margin: 8px 0; // }
} // }
.bank_pay {
& div {
margin: 8px 0;
}
& span { & span {
font-weight: 600; font-weight: 600;
}
} }
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment