<template>
|
<div class="UploadBox">
|
<div class="title">线下汇款说明</div>
|
<div class="close iconfont" @click="close"></div>
|
<div class="content scroll">
|
<el-form
|
:model="certificateForm"
|
ref="certificateForm"
|
label-width="118px"
|
>
|
<div
|
v-for="(item, index) in certificateForm.list"
|
:key="index"
|
class="form-area"
|
>
|
<div class="text-right" v-if="index != 0">
|
<div class="devide-dash"></div>
|
<el-button class="btn-remove" @click="removeItem(index)"
|
>删除此付款信息</el-button
|
>
|
</div>
|
<el-form-item
|
label="付款单位/姓名"
|
:prop="`list[${index}].payUser`"
|
:rules="[
|
{
|
required: true,
|
message: '请输入付款单位/姓名',
|
trigger: 'blur',
|
},
|
]"
|
>
|
<el-input class="h32" v-model="item.payUser"></el-input>
|
</el-form-item>
|
<el-form-item
|
label="付款账号"
|
:prop="`list[${index}].payAccount`"
|
:rules="[
|
{ required: true, message: '请输入付款账号', trigger: 'blur' },
|
]"
|
>
|
<el-input class="h32" v-model="item.payAccount"></el-input>
|
</el-form-item>
|
<el-form-item
|
label="付款金额(元)"
|
:prop="`list[${index}].payMoney`"
|
:rules="[
|
{ required: true, message: '请输入付款金额', trigger: 'blur' },
|
{
|
type: 'number',
|
min: 0,
|
message: '请输入大于零的数字',
|
trigger: 'blur',
|
},
|
]"
|
>
|
<el-input class="h32" v-model.number="item.payMoney">
|
<!-- <template slot="append">元</template> -->
|
</el-input>
|
</el-form-item>
|
<el-form-item label="备注" prop="reserved">
|
<el-input type="textarea" v-model="item.reserved"></el-input>
|
</el-form-item>
|
<el-form-item
|
label="付款凭证"
|
:prop="`list[${index}].appendix`"
|
:rules="[
|
{ required: true, message: '请上传凭证', trigger: 'blur' },
|
]"
|
>
|
<el-image
|
class="preview"
|
v-if="item.appendix"
|
:src="`/httpImage/${item.appendix}`"
|
fit="contain"
|
></el-image>
|
<el-upload
|
v-else
|
class="upload-demo"
|
drag
|
action="https://jsonplaceholder.typicode.com/posts/"
|
:http-request="(param) => definedUpload(param, index)"
|
:show-file-list="false"
|
accept=".jpg, .jpeg, .png"
|
>
|
<div class="el-upload__text">
|
<i class="el-icon-plus"></i>
|
<span class="words">
|
<em>点击上传</em>
|
</span>
|
</div>
|
</el-upload>
|
<div>
|
<i
|
class="el-icon-error remove"
|
v-if="item.appendix"
|
@click="item.appendix = ''"
|
></i>
|
</div>
|
</el-form-item>
|
<!-- <div class="text-left" v-if="index!=0">
|
<el-button
|
icon="el-icon-remove"
|
type="text"
|
style="color:#f90;"
|
@click="removeItem(index)"
|
>移除</el-button>
|
</div>-->
|
</div>
|
<el-button class="btn-add" @click="addPayInfo">添加付款信息</el-button>
|
</el-form>
|
|
<div class="btns">
|
<div class="button cancel" @click="back">取消</div>
|
<div class="button confirm" @click="saveCertificate">上传凭证</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { saveOrderCertificate } from "@/api/order";
|
import request from "@/scripts/httpRequest";
|
|
export default {
|
props: {
|
orderId: {},
|
},
|
mounted() {
|
this.certificateForm.orderId = this.orderId;
|
},
|
data() {
|
return {
|
certificateForm: {
|
orderId: "",
|
list: [
|
{
|
id: "",
|
payUser: "",
|
payAccount: "",
|
payMoney: "",
|
reserved: "",
|
appendix: "",
|
},
|
],
|
},
|
certificateRule: {
|
payUser: [
|
{ required: true, message: "请输入付款单位/姓名", trigger: "blur" },
|
],
|
payAccount: [
|
{ required: true, message: "请输入付款账号", trigger: "blur" },
|
],
|
payMoney: [
|
{ required: true, message: "请输入付款金额", trigger: "blur" },
|
],
|
},
|
};
|
},
|
methods: {
|
close() {
|
this.$emit("close");
|
},
|
back() {
|
this.$emit("back");
|
},
|
removeItem(index) {
|
this.certificateForm.list.splice(index, 1);
|
},
|
definedUpload(param, index) {
|
const fileName = param.file.name;
|
const m = fileName.match(/\.(\w+)(#|\?|$)/);
|
const fileType = (m && m[1]).toString().toLowerCase();
|
const validType = ["jpg", "jpeg", "png"].includes(fileType);
|
if (!validType) {
|
this.$notify({
|
message: "上传格式有误",
|
type: "warning",
|
});
|
return;
|
}
|
|
let _this = this;
|
const fd = new FormData();
|
fd.append("file", param.file);
|
console.log(param);
|
request({
|
method: "post",
|
url: `/saas/api-s/saasFile/upload`,
|
data: fd,
|
})
|
.then((res) => {
|
_this.certificateForm.list[index].appendix = res.data.picUrl;
|
})
|
.catch((err) => {
|
this.$notify({
|
type: "error",
|
message: "上传失败",
|
duration: 2500,
|
offset: 57,
|
});
|
});
|
},
|
saveCertificate() {
|
this.$refs["certificateForm"].validate((valid) => {
|
if (valid) {
|
//校验成功提交凭证
|
saveOrderCertificate(this.certificateForm)
|
.then((res) => {
|
if (res.success) {
|
this.$notify({
|
type: "success",
|
message: "保存成功",
|
duration: 2500,
|
offset: 57,
|
});
|
|
if (this.$route.path === "/personalCenter") {
|
this.$emit("closeAll");
|
return;
|
}
|
|
this.$router.push({
|
path: "/personalCenter",
|
query: {
|
id: 0,
|
},
|
});
|
}
|
})
|
.catch((e) => {
|
this.$notify({
|
type: "error",
|
message: "保存失败,请稍后重试",
|
duration: 2500,
|
offset: 57,
|
});
|
});
|
} else {
|
return false;
|
}
|
});
|
},
|
addPayInfo(e) {
|
this.certificateForm.list.push(this.newPayInfo());
|
},
|
newPayInfo() {
|
return {
|
id: "",
|
payUser: "",
|
payAccount: "",
|
payMoney: "",
|
reserved: "",
|
appendix: "",
|
};
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped >
|
.UploadBox {
|
.title {
|
box-sizing: border-box;
|
padding: 20px;
|
height: 64px;
|
border-bottom: 1px solid #e9ebee;
|
font-size: 18px;
|
font-weight: 700;
|
}
|
|
.close {
|
position: absolute;
|
top: 20px;
|
right: 20px;
|
font-size: 16px;
|
color: #666;
|
cursor: pointer;
|
}
|
|
.tip {
|
position: absolute;
|
top: 20px;
|
right: 40px;
|
font-size: 16px;
|
color: #dbdbdb;
|
cursor: pointer;
|
}
|
|
.content {
|
height: 533px;
|
overflow-y: auto;
|
box-sizing: border-box;
|
padding: 30px 20px 20px 20px;
|
font-size: 14px;
|
}
|
|
.btns {
|
position: absolute;
|
right: 20px;
|
bottom: 20px;
|
display: flex;
|
justify-content: flex-end;
|
text-align: center;
|
line-height: 40px;
|
|
.confirm {
|
margin-left: 10px;
|
width: 112px;
|
height: 40px;
|
background: #0065ff;
|
color: #fff;
|
}
|
|
.cancel {
|
width: 80px;
|
height: 40px;
|
border: 1px solid #0065ff;
|
color: #0065ff;
|
}
|
}
|
|
.h32 {
|
height: 32px;
|
line-height: 32px;
|
|
::v-deep input {
|
height: 32px;
|
}
|
|
.el-icon-arrow-up {
|
line-height: 32px;
|
}
|
|
::v-deep .el-icon-arrow-up {
|
height: 32px;
|
}
|
}
|
|
.btn-add {
|
margin-left: 120px;
|
width: 88px;
|
height: 24px;
|
border-radius: 3px;
|
background: #0064ff;
|
color: #fff;
|
padding: 3px 8px;
|
font-size: 12px;
|
}
|
}
|
.el-image {
|
width: 120px;
|
}
|
</style>
|
|
<style lang="scss">
|
.el-upload-dragger {
|
width: 120px;
|
height: 120px;
|
border: 1px dashed #c0c5cc !important;
|
border-radius: 3px;
|
background: #e9ebee;
|
|
.el-upload__text {
|
margin-top: 35px;
|
display: flex;
|
flex-direction: column;
|
i {
|
font-size: 28px;
|
margin-bottom: 10px;
|
}
|
.words {
|
margin: 0 auto;
|
width: 84px;
|
height: 34px;
|
font-size: 12px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #888888;
|
line-height: 17px;
|
}
|
|
em {
|
color: #999;
|
}
|
}
|
}
|
</style>
|
