<template>
|
<el-dialog
|
:title="''"
|
:close-on-click-modal="false"
|
:visible.sync="visible"
|
@close="handClose"
|
width="600px"
|
>
|
<el-form
|
:model="dataForm"
|
ref="dataForm"
|
:rules="dataRule"
|
@keyup.enter.native="dataFormSubmit()"
|
label-width="120px"
|
label-position="top"
|
style="width: auto"
|
size="mini"
|
>
|
<span>详细信息</span>
|
<el-divider></el-divider>
|
|
<el-form-item v-if="!dataForm.uuid" label="用户UID" prop="userCode" style="width: auto">
|
<el-input
|
v-model="dataForm.userCode"
|
placeholder="请输入用户UID"
|
style="width: 510px"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item label="实名姓名" prop="name" style="width: auto">
|
<el-input
|
v-model="dataForm.name"
|
placeholder="请输入实名姓名"
|
style="width: 510px"
|
></el-input>
|
</el-form-item>
|
|
<!-- <el-form-item label="证件名称" prop="idName" style="width: auto">
|
<el-input
|
v-model="dataForm.idName"
|
placeholder="请输入证件名称"
|
style="width: 510px"
|
></el-input>
|
</el-form-item> -->
|
|
<el-form-item label="证件号码" prop="idNumber" style="width: auto">
|
<el-input
|
v-model="dataForm.idNumber"
|
placeholder="请输入证件号码"
|
style="width: 510px"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item label="国籍" prop="nationality" style="width: auto">
|
<el-select
|
v-model="dataForm.nationality"
|
placeholder="请选择国籍"
|
style="width: 510px"
|
filterable
|
>
|
<el-option
|
v-for="item in countryOptions"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="认证手机号" prop="phone" style="width: auto">
|
<el-input
|
v-model="dataForm.phone"
|
placeholder="请输入认证手机号"
|
style="width: 510px"
|
></el-input>
|
</el-form-item>
|
|
<span>证件照</span>
|
<el-divider></el-divider>
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="证件正面照" prop="methodImg">
|
<el-upload
|
class="avatar-uploader"
|
:action="$http.adornUrl('/api/uploadFile')"
|
:headers="{ Authorization: $cookie.get('Authorization') }"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccess0"
|
:before-upload="beforeAvatarUpload0"
|
>
|
<img v-if="idFrontImg" :src="idFrontImg" class="avatar" />
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
</el-upload>
|
<el-button
|
v-if="idFrontImg"
|
type="primary"
|
@click="open(idFrontImg)"
|
plain
|
size="small"
|
>
|
查看
|
</el-button>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="证件背面照" prop="methodImg">
|
<el-upload
|
class="avatar-uploader"
|
:action="$http.adornUrl('/api/uploadFile')"
|
:headers="{ Authorization: $cookie.get('Authorization') }"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccess1"
|
:before-upload="beforeAvatarUpload1"
|
>
|
<img v-if="idBackImg" :src="idBackImg" class="avatar" />
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
</el-upload>
|
<el-button
|
v-if="idBackImg"
|
type="primary"
|
@click="open(idBackImg)"
|
plain
|
size="small"
|
>
|
查看
|
</el-button>
|
</el-form-item>
|
</el-col>
|
<!-- <el-col :span="8">
|
<el-form-item label="手持正面照" prop="methodImg">
|
<el-upload
|
class="avatar-uploader"
|
:action="$http.adornUrl('/api/uploadFile')"
|
:headers="{ Authorization: $cookie.get('Authorization') }"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccess2"
|
:before-upload="beforeAvatarUpload2"
|
>
|
<img v-if="handheldPhoto" :src="handheldPhoto" class="avatar" />
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
</el-upload>
|
<el-button
|
v-if="handheldPhoto"
|
type="primary"
|
@click="open(handheldPhoto)"
|
plain
|
size="small"
|
>
|
查看
|
</el-button>
|
</el-form-item>
|
</el-col> -->
|
</el-row>
|
<div class="mainCant" v-if="imgViewerVisible">
|
<div>
|
<el-image-viewer
|
:on-close="closeImgViewer"
|
class="picLoad"
|
:url-list="imgList"
|
/>
|
</div>
|
<el-button @click="closeImgViewer">关闭</el-button>
|
</div>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="visible = false">关闭</el-button>
|
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
|
</span>
|
<!-- 确认弹窗-end -->
|
</el-dialog>
|
</template>
|
|
<script>
|
import { Debounce } from "@/utils/debounce";
|
import { countries } from "@/utils/countryList";
|
import { isMobile } from "@/utils/validate";
|
export default {
|
data() {
|
return {
|
imgViewerVisible: false,
|
imgList: "",
|
idFrontImg1: "",
|
idBackImg1: "",
|
handheldPhoto1: "",
|
idFrontImg: "",
|
idBackImg: "",
|
// handheldPhoto: "",
|
visible: false,
|
dialogFormVisible: true,
|
formLabelWidth: "120px",
|
menuList: [],
|
menuListTreeProps: {
|
label: "name",
|
children: "children",
|
},
|
options: [],
|
row: "",
|
dataForm: {
|
id: "",
|
idCode: "",
|
projectName: "",
|
issuePrice: "",
|
currency: "usdt",
|
expectedLaunchTime: "",
|
subscriptionEndTime: "",
|
subscriptionStartTime: "",
|
publishTime: "",
|
minQuantity: "",
|
maxQuantity: "",
|
whitePagerAddress: "",
|
relatedStockName: [],
|
name: "",
|
natialName: "",
|
nationality: "",
|
phone: "",
|
userCode: "",
|
},
|
countryOptions: [],
|
fixstork: [], //返回的相关股票品种
|
stocks: [],
|
dataRule: {
|
userCode: [
|
{ required: true, message: "用户UID不能为空", trigger: "blur" },
|
],
|
name: [
|
{ required: true, message: "实名姓名不能为空", trigger: "blur" },
|
],
|
// idName: [
|
// { required: true, message: "证件名称不能为空", trigger: "blur" },
|
// ],
|
idNumber: [
|
{ required: true, message: "证件号码不能为空", trigger: "blur" },
|
],
|
nationality: [
|
{ required: true, message: "国籍不能为空", trigger: "change" },
|
],
|
phone: [
|
{ required: true, message: "认证手机号不能为空", trigger: "blur" },
|
// { validator: (rule, value, callback) => {
|
// if (value && !isMobile(value)) {
|
// callback(new Error("手机号格式错误"));
|
// } else {
|
// callback();
|
// }
|
// }, trigger: "blur" },
|
],
|
relatedStockName: [
|
{ required: true, message: "成分股不能为空", trigger: "blur" },
|
],
|
projectName: [{ required: true, message: "不能为空", trigger: "blur" }],
|
turnover: [
|
{ required: true, message: "成交量不能为空", trigger: "blur" },
|
],
|
initPrice: [
|
{ required: true, message: "初始化价格不能为空", trigger: "blur" },
|
],
|
minProfitLoss: [
|
{
|
required: true,
|
message: "最小变动单位的盈亏金额不能为空",
|
trigger: "blur",
|
},
|
],
|
minUnit: [
|
{ required: true, message: "最小变动单位不能为空", trigger: "blur" },
|
],
|
fee: [
|
{ required: true, message: "每张手续费不能为空", trigger: "blur" },
|
],
|
amount: [
|
{ required: true, message: "每张金额不能为空", trigger: "blur" },
|
],
|
},
|
};
|
},
|
mounted() {
|
this.initCountryOptions();
|
},
|
components: {
|
"el-image-viewer": () =>
|
import("element-ui/packages/image/src/image-viewer"),
|
},
|
methods: {
|
init(row) {
|
//console.log(row);
|
this.dataForm = {};
|
this.visible = true;
|
if (row && row.uuid) {
|
// 编辑模式：获取详情
|
let id = row.uuid;
|
this.getDesc(id);
|
} else {
|
// 新增模式：初始化空表单
|
this.$nextTick(() => {
|
if (this.$refs["dataForm"]) {
|
this.$refs["dataForm"].clearValidate();
|
}
|
});
|
}
|
},
|
handClose() {
|
this.$data.dataForm = JSON.parse(
|
JSON.stringify(this.$options.data().dataForm)
|
);
|
this.$nextTick(() => {
|
this.$refs["dataForm"].clearValidate(); // 清除表单验证
|
});
|
},
|
changeVal(val) {
|
this.$forceUpdate();
|
},
|
initCountryOptions() {
|
// 从国家列表中提取选项
|
const countryList = countries["zh-CN"] || countries["en"];
|
this.countryOptions = Object.keys(countryList).map((key) => ({
|
code: key,
|
name: countryList[key].name,
|
}));
|
// 按名称排序
|
this.countryOptions.sort((a, b) => a.name.localeCompare(b.name, "zh-CN"));
|
},
|
dataFormSubmit: Debounce(function () {
|
this.UpdateProjectBreed();
|
}),
|
open(img) {
|
// console.log(img)
|
// const image = new Image();
|
// image.src = img;
|
// const newWindow = window.open();
|
// newWindow.document.body.appendChild(image);
|
this.imgViewerVisible = true;
|
this.imgList = [img];
|
const m = (e) => {
|
e.preventDefault();
|
};
|
document.body.style.overflow = "hidden";
|
document.addEventListener("touchmove", m, false); // 禁止页面滑动
|
},
|
closeImgViewer() {
|
this.imgViewerVisible = false;
|
const m = (e) => {
|
e.preventDefault();
|
};
|
document.body.style.overflow = "auto";
|
document.removeEventListener("touchmove", m, true);
|
},
|
handleAvatarSuccess0(res, file) {
|
if (res.code == 0) {
|
this.dataForm.idFrontImg = URL.createObjectURL(file.raw); //显示地址
|
this.dataForm.imgUrl = res.data.path; //接口传递
|
this.idFrontImg = this.dataForm.idFrontImg;
|
this.idFrontImg1 = this.dataForm.imgUrl;
|
} else {
|
this.$message({
|
message: res.msg,
|
type: "error",
|
duration: 1500,
|
onClose: () => {},
|
});
|
}
|
},
|
beforeAvatarUpload0(file) {
|
// const isJPG = file.type === 'image/jpeg';
|
const isLt2M = file.size / 1024 / 1024 < 10;
|
if (!isLt2M) {
|
this.$message.error("上传图片大小不能超过 10MB!");
|
}
|
return isLt2M;
|
},
|
handleAvatarSuccess1(res, file) {
|
if (res.code == 0) {
|
this.dataForm.idBackImg = URL.createObjectURL(file.raw); //显示地址
|
this.dataForm.imgUrl = res.data.path; //接口传递
|
this.idBackImg = this.dataForm.idBackImg || "";
|
this.idBackImg1 = this.dataForm.imgUrl;
|
} else {
|
this.$message({
|
message: res.msg,
|
type: "error",
|
duration: 1500,
|
onClose: () => {},
|
});
|
}
|
},
|
beforeAvatarUpload1(file) {
|
// const isJPG = file.type === 'image/jpeg';
|
const isLt2M = file.size / 1024 / 1024 < 10;
|
if (!isLt2M) {
|
this.$message.error("上传图片大小不能超过 10MB!");
|
}
|
return isLt2M;
|
},
|
handleAvatarSuccess2(res, file) {
|
if (res.code == 0) {
|
this.dataForm.handheldPhoto = URL.createObjectURL(file.raw); //显示地址
|
this.dataForm.imgUrl = res.data.path; //接口传递
|
this.handheldPhoto = this.dataForm.handheldPhoto || "";
|
this.handheldPhoto1 = this.dataForm.imgUrl;
|
} else {
|
this.$message({
|
message: res.msg,
|
type: "error",
|
duration: 1500,
|
onClose: () => {},
|
});
|
}
|
},
|
beforeAvatarUpload2(file) {
|
// const isJPG = file.type === 'image/jpeg';
|
const isLt2M = file.size / 1024 / 1024 < 10;
|
if (!isLt2M) {
|
this.$message.error("上传图片大小不能超过 10MB!");
|
}
|
return isLt2M;
|
},
|
UpdateProjectBreed() {
|
//start
|
this.$refs["dataForm"].validate((valid) => {
|
if (valid) {
|
const isEdit = this.dataForm.uuid;
|
const requestData = {
|
userCode: this.dataForm.userCode,
|
name: this.dataForm.name,
|
idNumber: this.dataForm.idNumber,
|
nationality: this.dataForm.nationality,
|
phone: this.dataForm.phone,
|
idFrontImg: this.idFrontImg1,
|
idBackImg: this.idBackImg1,
|
// handheldPhoto: this.handheldPhoto1,
|
};
|
|
// 编辑模式需要传递 uuid
|
if (isEdit) {
|
requestData.uuid = this.dataForm.uuid;
|
}
|
|
// 新增和编辑的接口是一样的, 只是编辑需要多传个uuid
|
this.$http({
|
url: this.$http.adornUrl('/edit'),
|
method: "put",
|
data: this.$http.adornData(requestData),
|
}).then(({ data }) => {
|
if (data.code == 0) {
|
this.$message({
|
message: "操作成功",
|
type: "success",
|
duration: 1500,
|
onClose: () => {
|
this.dialogFormVisible = false;
|
this.visible = false;
|
this.$emit("refreshDataList");
|
},
|
});
|
} else {
|
this.$message({
|
message: data.msg,
|
type: "error",
|
duration: 1500,
|
onClose: () => {
|
this.dialogFormVisible = false;
|
this.visible = false;
|
},
|
});
|
}
|
});
|
}
|
});
|
//end
|
},
|
//获取详情
|
getDesc(uuid) {
|
this.$http({
|
url: this.$http.adornUrl("/getById/" + uuid),
|
method: "get",
|
}).then(({ data }) => {
|
if (data.code == 0) {
|
this.dataForm = data.data;
|
// 如果后端返回的是国家代码，直接使用；如果返回的是名称，需要找到对应的代码
|
if (this.dataForm.nationality && countries["zh-CN"] && countries["zh-CN"][this.dataForm.nationality]) {
|
this.dataForm.natialName = countries["zh-CN"][this.dataForm.nationality]["name"];
|
} else if (this.dataForm.nationality) {
|
// 如果 nationality 是代码但找不到，保持原值
|
this.dataForm.nationality = this.dataForm.nationality;
|
} else {
|
this.dataForm.nationality = "";
|
}
|
this.dataForm.phone = this.dataForm.phone || "";
|
this.dataForm.userCode = this.dataForm.userCode || "";
|
this.idFrontImg = this.dataForm.idFrontImg || "";
|
this.idBackImg = this.dataForm.idBackImg || "";
|
// this.handheldPhoto = this.dataForm.handheldPhoto || "";
|
} else {
|
this.$message({
|
message: data.msg,
|
type: "error",
|
duration: 1500,
|
});
|
}
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.mainCant{
|
position: fixed;
|
z-index: 9998;
|
width: 1200px;
|
top: 0;
|
left: 20%;
|
height: 100%;
|
background: rgba(10, 10, 10, 0.7);
|
/* background: red; */
|
}
|
.picLoad {
|
position: absolute;
|
width: 600px;
|
height: 100%;
|
left: 35%;
|
margin: 0 auto;
|
top: 100px;
|
z-index: 9999 !important;
|
}
|
.avatar-uploader .el-upload {
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
}
|
.avatar-uploader .el-upload:hover {
|
border-color: #409eff;
|
}
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
width: 178px;
|
height: 178px;
|
line-height: 178px;
|
text-align: center;
|
}
|
.avatar {
|
width: 178px;
|
height: 178px;
|
display: block;
|
}
|
|
.frame {
|
width: 700px;
|
}
|
|
.customWidth1 {
|
position: relative;
|
margin: 0 auto 50px;
|
border-radius: 2px;
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
box-sizing: border-box;
|
width: 60%;
|
}
|
/*
|
::deep .customWidth {
|
width: 45%;
|
} */
|
::v-deep .el-image-viewer__actions {
|
position: relative;
|
left: 30%;
|
z-index: 9999;
|
top: 70%;
|
font-size: 25px;
|
color: #8a9093;
|
background: rgba(10, 10, 10, 0.7);
|
width: 144px;
|
/* margin: 0; */
|
padding: 0 0 0 17px;
|
border-radius: 20px;
|
}
|
</style>
|
