1

admin

2026-01-06 089bf5d2378b3c4a61d795b2a92bede2c193b771

 src/views/modules/user-relation/basics-variety-add-or-update.vue

New file
@@ -0,0 +1,578 @@
<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>