zc_saas_h5/pages2/verify/input.vue

<template>
  <view style="padding: 30rpx">
    <nav-bar title="填写审核资料"></nav-bar>
    <view v-show="!agreementModal">
      <view class="topBox">
        <view>
          <u-icon name="error-circle-fill" color="#FF3B30" size="28"></u-icon>
          <text style="color: #ff3b30; margin-left: 10rpx"
            >学习前请提交完整审核资料</text
          >
        </view>
        <view style="color: #007aff" @click="backPage">稍后再填</view>
      </view>
      <u-collapse
        v-show="remarkStatus"
        :item-style="itemStyle"
        event-type="close"
        ref="collapse"
      >
        <u-collapse-item title="审核结果反馈">
          <view style="padding-bottom: 30rpx">
            <text class="collapse-item">{{ remark || "" }}</text>
          </view>
        </u-collapse-item>
      </u-collapse>
      <view class="bodyBox" style="margin-top: 30rpx; padding: 0 20rpx">
        <u-form :model="form" ref="uForm" :error-type="errorType">
          <template v-for="(item, index) in listData">
            <u-form-item
              :key="index"
              v-if="item.fieldKey == 'name'"
              :label="item.fieldName"
              :required="item.required"
              :label-width="auto"
              :prop="item.required ? item.fieldKey : ''"
            >
              <u-input
                v-model="form.name"
                :disabled="disName"
                :placeholder="`请输入${item.fieldName}`"
              />
            </u-form-item>
            <u-form-item
              :key="index"
              v-if="item.fieldKey == 'idcard'"
              :label="item.fieldName"
              :required="item.required"
              :label-width="auto"
              :prop="item.required ? item.fieldKey : ''"
            >
              <u-input
                :disabled="disCard"
                v-model="form.idcard"
                :placeholder="`请输入${item.fieldName}`"
              />
            </u-form-item>
            <u-form-item
              :key="index"
              v-if="item.fieldKey == 'telphone'"
              :label="item.fieldName"
              :required="item.required"
              :label-width="auto"
              :disabled="true"
              :prop="item.required ? item.fieldKey : ''"
            >
              <u-input
                disabled
                v-model="form.telphone"
                :placeholder="`请输入${item.fieldName}`"
              />
            </u-form-item>
            <u-form-item
              :key="index"
              v-if="item.fieldKey == 'school'"
              :label="item.fieldName"
              :required="item.required"
              :label-width="auto"
              :prop="item.required ? item.fieldKey : ''"
            >
              <u-input
                v-model="form.school"
                :placeholder="`请输入${item.fieldName}`"
              />
            </u-form-item>
            <u-form-item
              :key="index"
              v-if="item.fieldKey == 'work_unit'"
              :label="item.fieldName"
              :required="item.required"
              :label-width="auto"
              :prop="item.required ? item.fieldKey : ''"
            >
              <u-input
                v-model="form.work_unit"
                :placeholder="`请输入${item.fieldName}`"
              />
            </u-form-item>
            <u-form-item
              :key="index"
              v-if="item.fieldKey == 'unit_contact'"
              :label="item.fieldName"
              :required="item.required"
              :label-width="auto"
              :prop="item.required ? item.fieldKey : ''"
            >
              <u-input
                v-model="form.unit_contact"
                :placeholder="`请输入${item.fieldName}`"
              />
            </u-form-item>
            <u-form-item
              :key="index"
              v-if="item.fieldKey == 'unit_tel'"
              :label="item.fieldName"
              :required="item.required"
              :label-width="auto"
              :prop="item.required ? item.fieldKey : ''"
            >
              <u-input
                v-model="form.unit_tel"
                :placeholder="`请输入${item.fieldName}`"
              />
            </u-form-item>
            <u-form-item
              :key="index"
              v-if="item.fieldKey == 'apply_post'"
              :label="item.fieldName"
              :required="item.required"
              :label-width="auto"
              :prop="item.required ? item.fieldKey : ''"
            >
              <u-input
                v-model="form.apply_post"
                :disabled="apply_post_disabled"
                :placeholder="`请输入${item.fieldName}`"
              />
            </u-form-item>
            <u-form-item
              :key="index"
              v-if="item.fieldKey == 'major'"
              :label="item.fieldName"
              :required="item.required"
              :label-width="auto"
              :prop="item.required ? item.fieldKey : ''"
            >
              <u-input
                v-model="form.major"
                :placeholder="`请输入${item.fieldName}`"
              />
            </u-form-item>
            <u-form-item
              :key="index"
              v-if="item.inputType == 2"
              :label="item.fieldName"
              :label-width="auto"
              :required="item.required"
              :prop="item.required ? item.fieldKey : ''"
            >
              <picker
                @change="bindPickerChange(item.fieldKey, $event)"
                :value="form[item.fieldKey]"
                :range="getarrays(item.fieldKey)"
              >
                <view class="picker">
                  {{ returnName(item.fieldKey) }}
                  <image
                    src="@/static/icon/clears.png"
                    v-if="clearWatch(item.fieldKey)"
                    @click.stop="clearFun(item.fieldKey)"
                    mode=""
                    style="
                      width: 30rpx;
                      height: 30rpx;
                      vertical-align: middle;
                      margin-left: 10rpx;
                    "
                  ></image>
                </view>
              </picker>
            </u-form-item>
            <u-form-item
              :key="index"
              v-if="item.inputType == 5"
              :label="item.fieldName"
              :label-width="auto"
              :required="item.required"
              :prop="item.required ? item.fieldKey : ''"
            >
              <picker
                mode="date"
                :value="form[item.fieldKey]"
                @change="bindDateChange(item.fieldKey, $event)"
              >
                <view class="picker">
                  {{ getTimes(item.fieldKey) }}
                  <image
                    src="@/static/icon/clears.png"
                    v-if="clearWatch(item.fieldKey)"
                    @click.stop="clearFun(item.fieldKey)"
                    mode=""
                    style="
                      width: 30rpx;
                      height: 30rpx;
                      vertical-align: middle;
                      margin-left: 10rpx;
                    "
                  ></image>
                </view>
              </picker>
            </u-form-item>
            <u-form-item
              :key="index"
              v-if="
                item.inputType == 3 &&
                item.fieldKey !== 'commitment_electr_signature'
              "
              :label="item.fieldName"
              :required="item.required"
              :label-width="auto"
              label-position="top"
              :prop="item.required ? item.fieldKey : ''"
            >
              <text
                v-if="item.fieldKey === 'recent_photos'"
                style="
                  color: #999999;
                  position: absolute;
                  top: 20rpx;
                  left: 130rpx;
                "
                >竖向证件照 文件大小≤2M</text
              >
              <text
                v-if="
                  item.fieldKey === 'idcard_face_photo' ||
                  item.fieldKey === 'idcard_national_photo'
                "
                style="
                  color: #999999;
                  position: absolute;
                  top: 20rpx;
                  left: 180rpx;
                "
              >
                文件大小≤2M
              </text>
              <u-upload
                :show-progress="false"
                :max-size="2097152"
                :ref="
                  item.fieldKey === 'recent_photos'
                    ? 'recent_photos'
                    : item.fieldKey === 'idcard_face_photo'
                    ? 'idcard_face_photo'
                    : item.fieldKey === 'idcard_national_photo'
                    ? 'idcard_national_photo'
                    : ''
                "
                @on-list-change="
                  item.fieldKey === 'recent_photos'
                    ? changePhotoListHeader1($event)
                    : item.fieldKey === 'idcard_face_photo'
                    ? changePhotoListHeader2($event)
                    : item.fieldKey === 'idcard_national_photo'
                    ? changePhotoListHeader3($event)
                    : ''
                "
                :auto-upload="false"
                custom-btn="true"
                :action="action"
                :file-list="
                  item.fieldKey === 'recent_photos'
                    ? fileList1
                    : item.fieldKey === 'idcard_face_photo'
                    ? fileList2
                    : item.fieldKey === 'idcard_national_photo'
                    ? fileList3
                    : ''
                "
                width="120"
                height="120"
                size-type="['compressed']"
                max-count="1"
              >
                <template v-slot:addBtn>
                  <image
                    :src="
                      item.fieldKey === 'recent_photos'
                        ? '/static/info_1.png'
                        : item.fieldKey === 'idcard_face_photo'
                        ? '/static/info_2.png'
                        : item.fieldKey === 'idcard_national_photo'
                        ? '/static/info_3.png'
                        : ''
                    "
                    :style="
                      item.fieldKey === 'recent_photos'
                        ? 'width: 120rpx; height: 169rpx;'
                        : item.fieldKey === 'idcard_face_photo'
                        ? 'width: 120rpx; height: 82rpx;'
                        : item.fieldKey === 'idcard_national_photo'
                        ? 'width: 120rpx; height: 82rpx;'
                        : ''
                    "
                  ></image>
                </template>
              </u-upload>
            </u-form-item>
            <view
              :key="index"
              v-if="
                item.inputType == 3 &&
                item.fieldKey === 'commitment_electr_signature'
              "
            >
              <u-form-item
                v-if="
                  item.inputType == 3 &&
                  item.fieldKey === 'commitment_electr_signature'
                "
                label="承诺书"
                :required="item.required"
                :label-width="auto"
                label-position="top"
              >
                <view style="line-height: 40rpx; text-indent: 2em">
                  <text>
                    本人自愿做出如下承诺：本人己仔细阅读《广东省住房和城乡建设厅关于推进住房和城乡建设领域施工现场专业人员职业培训工作的通知》
                    全部内容并知晓和理解，本人的学历证书、身份证、工作年限、相片等所有资料完全真实、符合报名条件、资格审查要求和相关规定，本人在报名、审查、培训、测试等有关的事项中会严格道守相关规定和要求，如有虛假或与实际规定不符等情况造成的一切后果由本人承担。
                  </text>
                  <view style="line-height: 40rpx; text-indent: 2em"
                    ><text>特此承诺！</text></view
                  >
                </view>
              </u-form-item>
              <u-form-item
                v-if="
                  item.inputType == 3 &&
                  item.fieldKey === 'commitment_electr_signature'
                "
                label="签名板"
                :required="item.required"
                :label-width="auto"
                label-position="top"
                :prop="item.required ? item.fieldKey : ''"
              >
                <view class="dis_stys">
                  <text style="color: #999999">请在下方签名区进行签名</text>
                  <text @click="retDraw" mode="">清空</text>
                </view>
                <view class="handCenter">
                  <canvas
                    v-if="!form[item.fieldKey]"
                    class="handWriting"
                    disable-scroll="true"
                    :catchtouchmove="true"
                    @touchstart="uploadScaleStart"
                    @touchmove="uploadScaleMove"
                    @touchend="uploadScaleEnd"
                    canvas-id="handWriting"
                  ></canvas>
                  <view
                    v-else
                    style="width: 100%; height: 100%; position: relative"
                  >
                    <view class="ctoples">图片</view>
                    <image
                      style="width: 100%; height: 100%"
                      :src="$method.splitImgHost(form[item.fieldKey])"
                      mode=""
                    ></image>
                  </view>
                </view>
              </u-form-item>
            </view>
            <u-form-item
              v-if="item.inputType == 4"
              :key="index"
              :label="item.fieldName"
              :required="item.required"
              :label-width="auto"
              :prop="item.required ? item.fieldKey : ''"
              label-position="top"
            >
              <text
                style="
                  color: #007aff;
                  position: absolute;
                  top: 20rpx;
                  left: 180rpx;
                  text-decoration: underline;
                "
                @click="downDocx(item.url)"
                >点击下载</text
              >
              <view class="dis_stys"
                ><text style="color: #999999"
                  >下载承诺书进行填写并签名盖章后上传（≤2M）</text
                ></view
              >
              <image
                v-if="!form[item.fieldKey]"
                style="width: 169rpx; height: 169rpx"
                @click="getChast"
                src="@/static/info_4.png"
              ></image>
              <view class="quzw" v-if="form[item.fieldKey]">
                <view
                  v-if="
                    form[item.fieldKey].split('.').splice(-1)[0] == 'docx' ||
                    form[item.fieldKey].split('.').splice(-1)[0] == 'doc'
                  "
                  class="borsrs"
                >
                  <image
                    src="@/static/icon/jy_icon.png"
                    style="width: 168rpx; height: 168rpx"
                  ></image>
                  <text>{{ titleName }}</text>
                </view>
                <image
                  v-else
                  :src="$method.splitImgHost(form[item.fieldKey])"
                  style="width: 100%; height: 100%"
                  mode="aspectFit"
                  @click="seePhotos(form[item.fieldKey])"
                ></image>
                <u-icon
                  name="close-circle-fill"
                  color="red"
                  size="44"
                  class="optionsAbs"
                  @click="clearWord"
                ></u-icon>
              </view>
            </u-form-item>
          </template>
        </u-form>
      </view>
      <view @click="submits" class="submit_btn">提交资料</view>
    </view>

    <u-popup
      class="modal"
      catchtouchmove="return"
      v-model="agreementModal"
      mode="center"
      border-radius="24"
      :mask-close-able="false"
    >
      <view class="agreement">
        <view class="body">
          <scroll-view scroll-y="true" style="height: 600rpx">
            <view class="content">
              <view
                >本产品（或服务）提供【{{
                  goodsData.goodsName
                }}】课程的在线学习功能，为使用这些功能，我们需要使用您设备上的摄像头，并收集以下个人信息：
                <text v-for="(item, listIndex) in listData" :key="listIndex"
                  >{{ item.fieldName }}、</text
                >
                <!-- 姓名、性别、身份证号码、移动电话号码、身份证照片、一寸照、证书名称/岗位、证书编号、有效期、人脸照片（每节课随机拍摄三张）、 -->
                学习详细记录。</view
              >
              <view
                >我们会将上述信息提供至广东省建设执业注册管理中心等第三方组织使用，用于继续教育备案等。如果您拒绝，将导致这些功能无法实现，但不影响您使用本产品（或服务）的其他业务功能。</view
              >
            </view>
          </scroll-view>
        </view>
        <view class="footer">
          <view class="btn cancel" @click="refuseAgreement">取消</view>
          <view class="btn ok" @click="agree">同意并继续</view>
        </view>
      </view>
    </u-popup>

    <u-action-sheet
      :list="list"
      v-model="showTableDown"
      @click="clickIndex"
    ></u-action-sheet>
  </view>
</template>

<script>
import * as baseUrls from "@/common/request.js";
import { mapGetters, mapActions } from "vuex";
import Handwriting from "@/common/signature.js";
export default {
  data() {
    return {
      list: [
        {
          text: "上传图片",
        },
        // {
        // 	text: '上传文件'
        // }
      ],
      showTableDown: false,
      gradeId: 0,
      errorType: ["message"],
      agreementModal: true,
      goodsData: {},
      itemStyle: {
        marginTop: "20px",
        backgroundColor: "#fff",
        borderRadius: "24rpx",
        padding: "0rpx 20rpx",
      },
      isUploading: false,
      form: {
        name: "",
        sex: "",
        idcard: "",
        telphone: "",
        education: "",
        school: "",
        graduation_time: "",
        work_unit: "",
        unit_contact: "",
        unit_tel: "",
        apply_post: "",
        major: "",
        working_years: "",
        recent_photos: "",
        idcard_face_photo: "",
        idcard_national_photo: "",
        commitment_electr_signature: "",
        commitment_seal: "",
      },
      lineColor: "black",
      slideValue: 50,
      handwriting: "",
      goodsId: null,
      listData: [], //页面数据
      ast: [],
      fileList1: [], //个人近照
      fileList2: [], //人像
      fileList3: [], //国徽
      openVerify: false, // 控制是否手动验证
      id: null, //获取修改ID内容
      remark: "", //反馈文本
      remarkStatus: false, //是否存在审核结果反馈
      // nextStatus: false, //是否有下一步
      copyData: [], //备份数据
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: ["change", "blur"],
          },
        ],
        sex: [
          {
            required: true,
            message: "请选择性别",
            trigger: "change",
          },
        ],
        idcard: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: ["change", "blur"],
          },
          // {
          // 	validator: (rule, value, callback) => {
          // 		return this.$u.test.idCard(value);
          // 	},
          // 	message: '身份证号不正确',
          // 	trigger: ['change', 'blur']
          // }
        ],
        telphone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: ["change", "blur"],
          },
          // {
          // 	validator: (rule, value, callback) => {
          // 		var vartest = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
          // 		if (this.$u.test.mobile(value) || vartest.test(value)) {
          // 			return true;
          // 		} else {
          // 			return false;
          // 		}
          // 	},
          // 	message: '手机号码不正确',
          // 	trigger: ['change', 'blur']
          // }
        ],
        education: [
          {
            required: true,
            message: "请选择学历",
            trigger: "change",
          },
        ],
        school: [
          {
            required: true,
            message: "请输入毕业院校",
            trigger: ["change", "blur"],
          },
        ],
        graduation_time: [
          {
            required: true,
            message: "请选择毕业时间",
            trigger: "change",
          },
        ],
        work_unit: [
          {
            required: true,
            message: "请输入工作单位",
            trigger: ["change", "blur"],
          },
        ],
        unit_contact: [
          {
            required: true,
            message: "请输入单位联系人",
            trigger: ["change", "blur"],
          },
        ],
        unit_tel: [
          {
            required: true,
            message: "请输入单位联系电话",
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              var vartest = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
              var vartest1 = /^([0-9]{3,4})?[0-9]{7,8}$/;
              if (
                this.$u.test.mobile(value) ||
                vartest.test(value) ||
                vartest1.test(value)
              ) {
                return true;
              } else {
                return false;
              }
            },
            message: "单位联系电话不正确",
            trigger: ["change", "blur"],
          },
        ],
        apply_post: [
          {
            required: true,
            message: "请输入报名岗位",
            trigger: ["change", "blur"],
          },
        ],
        major: [
          {
            required: true,
            message: "请输入所学专业",
            trigger: ["change", "blur"],
          },
        ],
        working_years: [
          {
            required: true,
            message: "请选择工作年限",
            trigger: "change",
          },
        ],
        recent_photos: [
          {
            required: true,
            message: "请上传个人近照",
            trigger: ["change", "blur"],
          },
        ],
        idcard_face_photo: [
          {
            required: true,
            message: "请上传身份证人像面",
            trigger: ["change", "blur"],
          },
        ],
        idcard_national_photo: [
          {
            required: true,
            message: "请上传身份证国徽面",
            trigger: ["change", "blur"],
          },
        ],
        commitment_electr_signature: [
          {
            required: true,
            message: "请签写承诺书电子签",
            trigger: ["change", "blur"],
          },
        ],
        commitment_seal: [
          {
            required: true,
            message: "请上传承诺书盖章",
            trigger: ["change", "blur"],
          },
        ],
      },
      apply_post_disabled: false,
      isRequired: false,
      orderGoodsId: 0,
      veryIdCard: "",
      veryIdName: "",
      disName: false, // 姓名是否禁止输入
      disCard: false, // 身份证是否禁止输入
    };
  },
  created() {
    this.$store.getters.dictObj;
  },
  async onLoad(option) {
    this.orderGoodsId = Number(option.orderGoodsId);
    this.goodsId = Number(option.id);
    this.gradeId = Number(option.gradeId);
    await this.getInfo();
    await this.getGoodsDetail();
  },
  onReady(res) {
    this.handwriting = new Handwriting({
      lineColor: this.lineColor,
      slideValue: this.slideValue, // 0, 25, 50, 75, 100
      canvasName: "handWriting",
    });
    this.$refs.uForm.setRules(this.rules);
  },
  computed: { ...mapGetters(["dictObj", "userInfo"]) },
  watch: {
    userInfo(val, oldVal) {
      //普通的watch监听
      if (val) {
        console.log(val, "val");
        this.listData.forEach((item) => {
          if (item.fieldKey == "idcard") {
            this.form.idcard = this.userInfo.idCard;
            console.log('监听监听111')
          }
          if (item.fieldKey == "telphone") {
            this.form.telphone = this.userInfo.telphone;
          }

          if (item.fieldKey == "name") {
            this.form.name = this.userInfo.realname;
            console.log('监听监听')
          }
        });
      }
    },
  },
  methods: {
    ...mapActions(["getUserInfo"]),
    inputName(event) {
      console.log('enevt', event, this.form.name)
    },
    clickIndex(inds) {
      if (inds === 0) {
        this.uploadImgs();
      }
      if (inds === 1) {
        this.uploadFieds();
      }
    },
    getChast() {
      this.showTableDown = true;
    },
    seePhotos(url) {
      uni.previewImage({
        urls: [url],
      });
    },
    async downDocx(url) {
      let self = this;

      var ast = this.listData.some((item) => {
        return item.fieldKey === "commitment_electr_signature";
      });
      if (ast) {
        await this.subCanvas();
      }
      let data = JSON.parse(JSON.stringify(this.form));
      if (data["commitment_electr_signature"]) {
        data.commitment_electr_signature = await this.$method.uploadFile(
          data.commitment_electr_signature,
          0
        );
      }

      console.log(data);
      console.log(self.copyData);
      console.log(444);

      if (this.remarkStatus) {
        var arsty = {};
        for (let k in data) {
          for (let j in self.copyData) {
            if (k === j) {
              if (self.copyData[j].value === data[k]) {
                arsty[k] = {
                  fieldKey: k,
                  value: data[k],
                  fieldName: (function () {
                    for (let i = 0; i < self.listData.length; i++) {
                      if (self.listData[i].fieldKey == k) {
                        return self.listData[i].fieldName;
                      }
                    }
                  })(),
                  status: 0,
                };
              } else {
                arsty[k] = {
                  fieldKey: k,
                  value: data[k],
                  fieldName: (function () {
                    for (let i = 0; i < self.listData.length; i++) {
                      if (self.listData[i].fieldKey == k) {
                        return self.listData[i].fieldName;
                      }
                    }
                  })(),
                  status: 1,
                };
              }
            }
          }
        }
      } else {
        var arsty = {};
        for (let k in data) {
          arsty[k] = {
            fieldKey: k,
            value: data[k],
            fieldName: (function () {
              for (let i = 0; i < self.listData.length; i++) {
                if (self.listData[i].fieldKey == k) {
                  return self.listData[i].fieldName;
                }
              }
            })(),
            status: 0,
          };
        }
      }

      console.log(arsty);
      this.$api
        .baseProfileStampV2AddWord({
          goodsId: this.goodsId,
          keyValue: JSON.stringify(arsty),
        })
        .then((res) => {
          uni.downloadFile({
            url: this.$method.splitImgHost(res.data.msg),
            success: (result) => {
              if (result.statusCode === 200) {
                const filePath = result.tempFilePath;
                console.log(this.$method.splitImgHost(res.data.msg));
                this.$method.showToast("下载成功");
                uni.saveImageToPhotosAlbum({
                  filePath: filePath,
                  success: function (errMsg) {
                    uni.showToast({
                      mask: true,
                      title: "保存成功",
                    });
                  },
                  fail: (errMsg) => {
                    uni.showToast({
                      mask: true,
                      title: "保存失败",
                    });
                  },
                  complete: (errMsg) => {},
                });
              }
            },
          });
        });
    },
    getGoodsDetail() {
      return new Promise((resolve) => {
        this.$api
          .orderInfo({
            orderGoodsId: this.orderGoodsId,
          })
          .then((res) => {
            this.goodsData = res.data.data;
            if (this.goodsData.categoryName) {
              this.$set(this.form, "apply_post", this.goodsData.categoryName);
              console.log(this.form);
              if (this.goodsData.categoryName) {
                this.apply_post_disabled = true;
              }
            }

            if (this.userInfo.companyName) {
              this.$set(this.form, "work_unit", this.userInfo.companyName);
            }
            resolve();
          });
      });
    },
    uploadImgs() {
      var self = this;
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        success: function (res) {
          if (res.tempFiles[0].size > 2097152) {
            self.$method.showToast("上传图片不得大于2M");
            return;
          } else {
            var type = res.tempFiles[0].path.split(".").splice(-1);
            if (type[0] != "jpg" && type[0] != "png" && type[0] != "jpeg") {
              self.$method.showToast("请上传图片格式");
              return;
            }
            self.$set(self.form, "commitment_seal", res.tempFiles[0].path);
            self.$nextTick(function () {
              this.resultForm();
            });
          }
        },
      });
    },
    uploadFieds() {
      var self = this;
      wx.chooseMessageFile({
        count: 1,
        size: 2097152,
        type: "file",
        success(res) {
          if (res.tempFiles[0].size > 2097152) {
            self.$method.showToast("上传文件不得大于2M");
            return;
          } else {
            var type = res.tempFiles[0].path.split(".").splice(-1);
            if (
              type[0] != "jpg" &&
              type[0] != "png" &&
              type[0] != "jpeg" &&
              type[0] != "docx" &&
              type[0] != "doc"
            ) {
              self.$method.showToast("请上传word文档或图片");
              return;
            }
            self.titleName = res.tempFiles[0].name;
            self.$set(self.form, "commitment_seal", res.tempFiles[0].path);
            self.$nextTick(function () {
              this.resultForm();
            });
          }
        },
      });
    },
    agree() {
      this.agreementModal = false;
      setTimeout(() => {
        this.$refs.collapse.init();
      }, 1000);
    },
    refuseAgreement() {
      uni.navigateBack({
        delta: 1,
      });
    },
    clearFun(key) {
      this.form[key] = "";
    },
    //清除按钮
    clearWatch(key) {
      if (this.form[key]) {
        return true;
      } else {
        return false;
      }
    },
    cahngeText() {
      this.$set(this.form, "name", "唐");
      console.log(this.form.name, 123);
    },

    async uploadDatas(data) {
      if (this.form.recent_photos && this.form.idcard_face_photo) {
        uni.downloadFile({
          url: this.$method.splitImgHost(this.form.idcard_face_photo),
          success: async (res) => {
            if (res.statusCode === 200) {
              let resData = await this.faceCertificationIDCardOCR(
                1,
                res.tempFilePath
              );

              if (!resData.data.data) {
                uni.showModal({
                  title: "提示",
                  content: "身份证人像面照片异常，请重新上传",
                  showCancel: false,
                });
                this.isUploading = false;
                return;
              }
              this.veryIdCard = resData.data.data.IdNum;
              this.veryIdName = resData.data.data.IdName;

              // if(this.form.idcard) {
              // 	if(this.form.idcard != this.veryIdCard) {
              // 		uni.showModal({
              // 			title:'提示',
              // 			content:'输入的身份证号和身份证人像面照片身份证号不匹配',
              // 			showCancel:false,
              // 		})
              // 		this.isUploading = false;
              // 		return;
              // 	}
              // }

              uni.downloadFile({
                url: this.$method.splitImgHost(this.form.recent_photos),
                success: (res) => {
                  if (res.statusCode === 200) {
                    console.log("下载成功");
                    let fileSystem = uni.getFileSystemManager();
                    fileSystem.readFile({
                      filePath: res.tempFilePath,
                      encoding: "base64",
                      position: 0,
                      success: (res) => {
                        let base64 = "data:image/jpg;base64," + res.data;
                        let newdata = {
                          urlA: this.form.idcard_face_photo,
                          oneInchPhotos: base64,
                        };

                        this.$api
                          .faceCertificationIdCardCompareFace(newdata)
                          .then((res1) => {
                            if (res1.data.data >= 70) {
                              var self = this;
                              if (self.remarkStatus) {
                                var arsty = {};
                                for (let k in data) {
                                  for (let j in self.copyData) {
                                    if (k === j) {
                                      if (self.copyData[j].value === data[k]) {
                                        arsty[k] = {
                                          fieldKey: k,
                                          value: data[k],
                                          fieldName: (function () {
                                            for (
                                              let i = 0;
                                              i < self.listData.length;
                                              i++
                                            ) {
                                              if (
                                                self.listData[i].fieldKey == k
                                              ) {
                                                return self.listData[i]
                                                  .fieldName;
                                              }
                                            }
                                          })(),
                                          status: 0,
                                        };
                                      } else {
                                        arsty[k] = {
                                          fieldKey: k,
                                          value: data[k],
                                          fieldName: (function () {
                                            for (
                                              let i = 0;
                                              i < self.listData.length;
                                              i++
                                            ) {
                                              if (
                                                self.listData[i].fieldKey == k
                                              ) {
                                                return self.listData[i]
                                                  .fieldName;
                                              }
                                            }
                                          })(),
                                          status: 1,
                                        };
                                      }
                                    }
                                  }
                                }
                                var datas = {
                                  id: this.id,
                                  goodsId: this.goodsId,
                                  orderGoodsId: this.orderGoodsId,
                                  keyValue: JSON.stringify(arsty),
                                };
                                console.log(datas, "datas0");
                                // this.isUploading = false;
                                // return;
                                this.$api
                                  .editbaseprofiletp(datas)
                                  .then((res) => {
                                    this.isUploading = false;
                                    if (res.data.code === 200) {
                                      this.$method.showToast("提交成功");
                                      this.getUserInfo();
                                      uni.navigateBack();
                                    } else {
                                      this.$method.showToast(res.data.msg);
                                      this.isUploading = false;
                                    }
                                  });
                              } else {
                                var objs = {};
                                for (let k in data) {
                                  objs[k] = {
                                    fieldKey: k,
                                    value: data[k],
                                    fieldName: (function () {
                                      for (
                                        let i = 0;
                                        i < self.listData.length;
                                        i++
                                      ) {
                                        if (self.listData[i].fieldKey == k) {
                                          return self.listData[i].fieldName;
                                        }
                                      }
                                    })(),
                                    status: 0,
                                  };
                                }
                                var datas = {
                                  goodsId: this.goodsId,
                                  profileTpId: this.goodsId,
                                  orderGoodsId: this.orderGoodsId,
                                  keyValue: JSON.stringify(objs),
                                };

                                console.log(data, "datas");
                                // this.isUploading = false;
                                // return;
                                this.$api
                                  .addbaseprofiletp(datas)
                                  .then((res) => {
                                    this.isUploading = false;
                                    if (res.data.code === 200) {
                                      this.$method.showToast("提交成功");
                                      this.getUserInfo();
                                      uni.navigateBack();
                                    } else {
                                      this.$method.showToast(res.data.msg);
                                      this.isUploading = false;
                                    }
                                  });
                              }
                            } else {
                              this.isUploading = false;
                              uni.showModal({
                                title: "提示",
                                content: "个人近照和身份证人像面照片不匹配",
                                showCancel: false,
                              });
                            }
                          });
                      },
                      fail(err) {
                        this.isUploading = false;
                        console.error(err, "err");
                      },
                    });
                  }
                },
              });
            }
          },
        });

        return;
      }

      var self = this;
      if (self.remarkStatus) {
        var arsty = {};
        for (let k in data) {
          for (let j in self.copyData) {
            if (k === j) {
              if (self.copyData[j].value === data[k]) {
                arsty[k] = {
                  fieldKey: k,
                  value: data[k],
                  fieldName: (function () {
                    for (let i = 0; i < self.listData.length; i++) {
                      if (self.listData[i].fieldKey == k) {
                        return self.listData[i].fieldName;
                      }
                    }
                  })(),
                  status: 0,
                };
              } else {
                arsty[k] = {
                  fieldKey: k,
                  value: data[k],
                  fieldName: (function () {
                    for (let i = 0; i < self.listData.length; i++) {
                      if (self.listData[i].fieldKey == k) {
                        return self.listData[i].fieldName;
                      }
                    }
                  })(),
                  status: 1,
                };
              }
            }
          }
        }

        console.log(arsty, "arsty");
        if (Object.keys(arsty).length == 0) {
          uni.showModal({
            title: "提示",
            content: "数据错误，请联系管理员",
          });
          this.isUploading = false;
          return;
        }
        var datas = {
          id: this.id,
          goodsId: this.goodsId,
          orderGoodsId: this.orderGoodsId,
          keyValue: JSON.stringify(arsty),
        };

        console.log(datas, "datas1");

        // return;
        this.$api.editbaseprofiletp(datas).then((res) => {
          this.isUploading = false;
          if (res.data.code === 200) {
            this.$method.showToast("提交成功");
            this.getUserInfo();
            uni.navigateBack();
          } else {
            this.$method.showToast(res.data.msg);
            this.isUploading = false;
          }
        });
      } else {
        var objs = {};
        for (let k in data) {
          objs[k] = {
            fieldKey: k,
            value: data[k],
            fieldName: (function () {
              for (let i = 0; i < self.listData.length; i++) {
                if (self.listData[i].fieldKey == k) {
                  return self.listData[i].fieldName;
                }
              }
            })(),
            status: 0,
          };
        }
        var datas = {
          goodsId: this.goodsId,
          profileTpId: this.goodsId,
          orderGoodsId: this.orderGoodsId,
          keyValue: JSON.stringify(objs),
        };

        console.log(datas, "datas2");
        // this.isUploading = false;
        // return;
        this.$api
          .addbaseprofiletp(datas)
          .then((res) => {
            this.isUploading = false;
            if (res.data.code === 200) {
              this.$method.showToast("提交成功");
              this.getUserInfo();
              uni.navigateBack();
            } else {
              this.$method.showToast(res.data.msg);
              this.isUploading = false;
            }
          })
          .catch((err) => {});
      }
    },
    clearWord() {
      this.$set(this.form, "commitment_seal", "");
      this.titleName = "";
    },
    backPage() {
      uni.navigateBack();
    },
    //提交表单
    async submitApi() {
      var data = JSON.parse(JSON.stringify(this.form));
      if (data["sex"]) {
        data.sex = this.dictObj["sys_user_sex"][Number(data.sex)];
      }
      if (data["education"]) {
        data.education = this.dictObj["edu_level"][Number(data.education)];
      }
      if (data["working_years"]) {
        data.working_years =
          this.dictObj["working_years"][Number(data.working_years)];
      }
      if (data["recent_photos"]) {
        data.recent_photos = await this.$method.uploadFile(
          data.recent_photos,
          0
        );
      }
      if (data["idcard_face_photo"]) {
        console.log("idcard_face_photo");
        data.idcard_face_photo = await this.$method.uploadFile(
          data.idcard_face_photo,
          0
        );
      }
      if (data["idcard_national_photo"]) {
        data.idcard_national_photo = await this.$method.uploadFile(
          data.idcard_national_photo,
          0
        );
      }
      if (data["commitment_electr_signature"]) {
        data.commitment_electr_signature = await this.$method.uploadFile(
          data.commitment_electr_signature,
          0
        );
      }
      if (data["commitment_seal"]) {
        data.commitment_seal = await this.$method.uploadFile(
          data.commitment_seal,
          0
        );
      }

      this.uploadDatas(data);
    },
    //验证表单
    resultForm(int) {
      console.log(this.openVerify, "openVerify");
      console.log(this.isRequired, "isRequired");
      if (this.openVerify) {
        if (this.isRequired) {
          this.submitApi();
        } else {
          if (int === 1) {
            this.errorType = ["toast"];
          } else {
            this.errorType = ["message"];
          }
          this.$nextTick(() => {
            this.$refs.uForm.validate((valid) => {
              if (valid) {
                if (int === 1) {
                  this.submitApi();
                }
              } else {
                this.isUploading = false;
                this.errorType = ["message"];
                console.log(this.form);
                console.log("验证失败");
              }
            });
          });
        }
      }
    },
    async submits() {
      if (this.isUploading) {
        return;
      }
      this.isUploading = true;
      var ast = this.listData.some((item) => {
        return item.fieldKey === "commitment_electr_signature";
      });
      if (ast) {
        await this.subCanvas();
      }
      this.openVerify = true;
      this.resultForm(1);
    },
    faceCertificationIDCardOCR(cardSide, url) {
      return new Promise((resolve) => {
        let fileSystem = uni.getFileSystemManager();
        fileSystem.readFile({
          filePath: url,
          encoding: "base64",
          position: 0,
          success: (res) => {
            let base64 = "data:image/jpg;base64," + res.data;
            this.$api
              .faceCertificationIDCardOCR({
                cardSide: cardSide, //1人像  2 国徽
                cardImageBase64: base64,
                gradeId: this.gradeId,
              })
              .then((res) => {
                resolve(res);
              });
          },
          fail(err) {
            console.error(err, "err");
          },
        });
      });
    },
    async changePhotoListHeader1(lists, name) {
      console.log(lists);
      if (lists.length) {
        this.fileList1 = lists;
        console.log(lists, "lists1");
        if (
          lists[0].url.indexOf("//tmp") !== -1 ||
          lists[0].url.indexOf("//temp") !== -1
        ) {
          this.$set(
            this.form,
            "recent_photos",
            await this.$method.imageInfos(lists[0].url)
          );
        }
      } else {
        this.fileList1 = [];
        this.$set(this.form, "recent_photos", "");
        console.log(3, this.form.recent_photos);
      }
      this.openVerify = false;
      this.$nextTick(function () {
        console.log(4);
        this.resultForm();
      });
    },
    async changePhotoListHeader2(lists, name) {
      if (lists.length) {
        this.fileList2 = lists;
        if (
          lists[0].url.indexOf("//tmp") !== -1 ||
          lists[0].url.indexOf("//temp") !== -1
        ) {
          let url = lists[0].url;
          this.$refs.idcard_face_photo[0].remove(0);

          uni.compressImage({
            src: url,
            quality: 75,
            width: "50%",
            height: "50%",
            success: async (rest) => {
              let res = await this.faceCertificationIDCardOCR(
                1,
                rest.tempFilePath
              );

              if (res.data.code == 500) {
                uni.showToast({
                  icon: "none",
                  title: "请上传正确清晰的身份证人像面照片",
                });
                return;
              }
              this.$refs.idcard_face_photo[0].lists = [
                {
                  url: this.$method.splitImgHost(res.data.data.IdImgPath),
                },
              ];
              this.$set(
                this.form,
                "idcard_face_photo",
                res.data.data.IdImgPath
              );
              console.log(this.form, "idcard_face_photo");
            },
          });
        }
      } else {
        this.fileList2 = [];
        this.$set(this.form, "idcard_face_photo", "");
      }
      this.openVerify = false;
      this.$nextTick(function () {
        this.resultForm();
      });
    },
    async changePhotoListHeader3(lists, name) {
      if (lists.length) {
        this.fileList3 = lists;
        if (
          lists[0].url.indexOf("//tmp") !== -1 ||
          lists[0].url.indexOf("//temp") !== -1
        ) {
          console.log("//tem");
          let url = lists[0].url;
          this.$refs.idcard_national_photo[0].remove(0);
          uni.compressImage({
            src: url,
            quality: 75,
            width: "50%",
            height: "50%",
            success: async (rest) => {
              let res = await this.faceCertificationIDCardOCR(
                2,
                rest.tempFilePath
              );
              if (res.data.code == 500) {
                uni.showToast({
                  icon: "none",
                  title: "请上传正确清晰的身份证国徽面照片",
                });
                return;
              }
              this.$refs.idcard_national_photo[0].lists = [
                {
                  url: this.$method.splitImgHost(res.data.data.IdImgPath),
                },
              ];
              this.$set(
                this.form,
                "idcard_national_photo",
                res.data.data.IdImgPath
              );
              console.log(this.form, "idcard_national_photo");
            },
          });
        }
      } else {
        this.fileList3 = [];
        this.$set(this.form, "idcard_national_photo", "");
      }
      this.openVerify = false;
      this.$nextTick(function () {
        this.resultForm();
      });
    },
    getTimes(key) {
      if (this.form[key]) {
        return this.form[key];
      } else {
        return "请选择时间";
      }
    },
    getarrays(key) {
      if (key === "sex") {
        return this.dictObj["sys_user_sex"];
      }
      if (key === "education") {
        return this.dictObj["edu_level"];
      }
      if (key === "working_years") {
        return this.dictObj["working_years"];
      }
    },
    returnName(key) {
      if (key === "sex") {
        if (this.form[key]) {
          return this.dictObj["sys_user_sex"][Number(this.form[key])];
        } else {
          return "请选择性别";
        }
      }
      if (key === "education") {
        if (this.form[key]) {
          return this.dictObj["edu_level"][Number(this.form[key])];
        } else {
          return "请选择学历";
        }
      }
      if (key === "working_years") {
        if (this.form[key]) {
          return this.dictObj["working_years"][Number(this.form[key])];
        } else {
          return "请选择工作年限";
        }
      }
    },
    /**
     *  getbaseprofiletpgetInfo接口返回值result.data.data不存在的话说明是第一次填写资料
     */
    getInfo() {
      console.log("getInfo", this.userInfo);
      return new Promise((resolve) => {
        var self = this;
        this.$api.getbaseprofiletpId(this.goodsId).then((res) => {
          self.listData = JSON.parse(res.data.data.keyValue);
          var ast = JSON.parse(res.data.data.keyValue2);
          self.listData = [...self.listData, ...ast];
          console.log(self.listData, "listData");
          self.listData.forEach((item) => {
            if (item.fieldKey == "idcard") {
              console.log(this.userInfo.idCard, "this.userInfo.idCard");
              this.form.idcard = this.userInfo.idCard;
              this.disCard = this.form.idcard ? true : false
              console.log(this.form.idcard);
            }
            if (item.fieldKey == "telphone") {
              console.log(this.userInfo.telphone, "this.userInfo.telphone");
              this.form.telphone = this.userInfo.telphone;
              console.log(this.form.telphone);
            }

            if (item.fieldKey == "name") {
              console.log(this.userInfo.realname, "this.userInfo.realname");
              this.form.name = this.userInfo.realname;
              this.disName = this.form.name ? true : false
              console.log('this.disName', this.form.name, this.disName);
            }
          });
          self.isRequired = self.listData.every((ims) => {
            return ims.required === false;
          });
          console.log(self.isRequired, "self.isRequired ");
          this.$nextTick(() => {
            this.agreementModal = true;
          });
          self.$api
            .getbaseprofiletpgetInfo({
              goodsId: self.goodsId,
              orderGoodsId: self.orderGoodsId,
            })
            .then((result) => {
              if (result.data.code === 200) {
                if (!result.data.data) {
                  self.$api
                    .getbaseprofiletplistProfile({ pageNum: 1, pageSize: 1 })
                    .then((kit) => {
                      if (kit.data.rows.length) {
                        var ajson = JSON.parse(kit.data.rows[0].keyValue);
                        self.listData.forEach((zyitem, zyindex) => {
                          for (let k in ajson) {
                            if (zyitem.fieldKey == k && ajson[k].value) {
                              if (k === "sex") {
                                const sexIndex =
                                  self.dictObj["sys_user_sex"].indexOf(
                                    ajson[k].value
                                  ) + "";
                                self.$set(self.form, k, sexIndex);
                              } else if (k === "education") {
                                const sexIndex =
                                  self.dictObj["edu_level"].indexOf(
                                    ajson[k].value
                                  ) + "";
                                self.$set(self.form, k, sexIndex);
                              } else if (k === "working_years") {
                                const sexIndex =
                                  self.dictObj["working_years"].indexOf(
                                    ajson[k].value
                                  ) + "";
                                self.$set(self.form, k, sexIndex);
                              } else if (k === "recent_photos") {
                                self.$set(self.form, k, ajson[k].value);
                                if (ajson[k].value) {
                                  self.fileList1 = [
                                    {
                                      url:
                                        baseUrls.BASE_IMG_URL + ajson[k].value,
                                    },
                                  ];
                                }
                              } else if (k === "idcard_face_photo") {
                                self.$set(self.form, k, ajson[k].value);
                                if (ajson[k].value) {
                                  self.fileList2 = [
                                    {
                                      url:
                                        baseUrls.BASE_IMG_URL + ajson[k].value,
                                    },
                                  ];
                                }
                              } else if (k === "idcard_national_photo") {
                                self.$set(self.form, k, ajson[k].value);
                                if (ajson[k].value) {
                                  self.fileList3 = [
                                    {
                                      url:
                                        baseUrls.BASE_IMG_URL + ajson[k].value,
                                    },
                                  ];
                                }
                              } else {
                                if (k === "name") {
                                  self.$set(
                                    self.form,
                                    k,
                                    this.$store.state.userInfo.realname
                                  );
                                } else if (k === "idcard") {
                                  self.$set(
                                    self.form,
                                    k,
                                    this.$store.state.userInfo.idCard
                                  );
                                } else if (k === "telphone") {
                                  self.$set(
                                    self.form,
                                    k,
                                    this.$store.state.userInfo.telphone
                                  );
                                } else if (
                                  k !== "commitment_electr_signature"
                                ) {
                                  self.$set(self.form, k, ajson[k].value);
                                }
                              }
                            }
                          }
                        });
                        resolve();
                      } else {
                        resolve();
                      }
                    });
                }
                console.log(result.data.data, "result.data.data");
                if (result.data.data && result.data.data.status === 3) {
                  self.remark = result.data.data.text;
                  self.remarkStatus = true;
                  self.id = result.data.data.id;
                  console.log(result.data.data, "result.data.data");
                  var arrays = JSON.parse(result.data.data.keyValue);
                  // var arrays1 = JSON.parse(result.data.data.keyValue2);
                  self.copyData = JSON.parse(JSON.stringify(arrays));
                  for (let k in arrays) {
                    if (k === "sex") {
                      if (arrays[k].value) {
                        const sexIndex =
                          self.dictObj["sys_user_sex"].indexOf(
                            arrays[k].value
                          ) + "";
                        self.$set(self.form, k, sexIndex);
                      }
                    } else if (k === "education") {
                      if (arrays[k].value) {
                        const sexIndex =
                          self.dictObj["edu_level"].indexOf(arrays[k].value) +
                          "";
                        self.$set(self.form, k, sexIndex);
                      }
                    } else if (k === "working_years") {
                      if (arrays[k].value) {
                        const sexIndex =
                          self.dictObj["working_years"].indexOf(
                            arrays[k].value
                          ) + "";
                        self.$set(self.form, k, sexIndex);
                      }
                    } else if (k === "recent_photos") {
                      self.$set(self.form, k, arrays[k].value);
                      if (arrays[k].value) {
                        self.fileList1 = [
                          { url: baseUrls.BASE_IMG_URL + arrays[k].value },
                        ];
                      }
                    } else if (k === "idcard_face_photo") {
                      self.$set(self.form, k, arrays[k].value);
                      if (arrays[k].value) {
                        self.fileList2 = [
                          { url: baseUrls.BASE_IMG_URL + arrays[k].value },
                        ];
                      }
                    } else if (k === "idcard_national_photo") {
                      self.$set(self.form, k, arrays[k].value);
                      if (arrays[k].value) {
                        self.fileList3 = [
                          { url: baseUrls.BASE_IMG_URL + arrays[k].value },
                        ];
                      }
                    } else if (k === "name") {
                      self.$set(
                        self.form,
                        k,
                        this.$store.state.userInfo.realname
                      );
                    } else if (k === "idcard") {
                      self.$set(
                        self.form,
                        k,
                        this.$store.state.userInfo.idCard
                      );
                    } else if (k === "telphone") {
                      self.$set(
                        self.form,
                        k,
                        this.$store.state.userInfo.telphone
                      );
                    } else {
                      self.$set(self.form, k, arrays[k].value);
                    }
                  }
                  resolve();
                } else if (
                  result.data.data &&
                  (result.data.data.status === 1 ||
                    result.data.data.status === 2)
                ) {
                  uni.showModal({
                    showCancel: false,
                    content:
                      result.data.data.status === 1
                        ? "该商品审核资料已通过，不可重复提交资料"
                        : result.data.data.status === 2
                        ? "该商品审核资料处于待审核状态，不可重复提交资料"
                        : "请联系管理员",
                    success: function (k) {
                      if (k.confirm) {
                        uni.navigateBack();
                      }
                    },
                  });
                }
              }
            });
        });
      });
    },
    bindPickerChange(key, e) {
      this.$set(this.form, key, e.detail.value);
      this.openVerify = false;
      this.$nextTick(function () {
        this.resultForm();
      });
    },
    bindDateChange(key, e) {
      this.form[key] = e.detail.value;
    },
    retDraw() {
      this.handwriting.retDraw();
      this.$set(this.form, "commitment_electr_signature", "");
      this.openVerify = false;
      this.$nextTick(function () {
        this.resultForm();
      });
    },
    uploadScaleStart(event) {
      this.handwriting.uploadScaleStart(event);
    },
    uploadScaleMove(event) {
      this.handwriting.uploadScaleMove(event);
    },
    uploadScaleEnd(event) {
      this.handwriting.uploadScaleEnd(event);
    },
    subCanvas() {
      return new Promise((resolve, reject) => {
        var self = this;
        console.log(self.form, "self.form");
        if (self.form.commitment_electr_signature) {
          resolve();
          return;
        }
        self.handwriting
          .saveCanvas()
          .then((res) => {
            if (this.handwriting.linePrack.length) {
              this.$set(this.form, "commitment_electr_signature", res);
            }
            resolve(res);
          })
          .catch((err) => {
            uni.showToast({
              title: "签名上传失败",
              icon: "error",
            });

            this.isUploading = false;
          });
      });
    },
  },
};
</script>
<style>
page {
  background: #eaeef1;
}
</style>
<style scope lang="scss">
.ctoples {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2rpx 23rpx;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.4);
  font-size: 28rpx;
  color: #fff;
  border-bottom-right-radius: 24rpx;
}
.quzw {
  width: 638rpx;
  height: 638rpx;
  position: relative;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
}
.handWriting {
  width: 100%;
  height: 100%;
}
/deep/ .u-collapse-title {
  color: #ff3b30;
  font-size: 24rpx;
}
.collapse-item {
  color: #666;
  font-size: 24rpx;
  padding-bottom: 30rpx;
}
.dis_stys {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.handCenter {
  background: #f7f7f7;
  border: 2rpx solid #eeeeee;
  border-radius: 24rpx;
  width: 100%;
  height: 300rpx;
  overflow: hidden;
}
.headerSDels {
  height: 58rpx;
  padding: 0rpx 24rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
.listBox {
  margin: 24rpx 32rpx 0rpx;
  box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
  border-radius: 32rpx;
  background-color: #fff;
  overflow: hidden;
}
.imgBoxs {
  width: 156rpx;
  height: 203rpx;
}
.imgBoxs2 {
  width: 171rpx;
  height: 108rpx;
}
.submit_btn {
  width: 526rpx;
  height: 80rpx;
  background: #007aff;
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
  color: #ffffff;
  margin: 30rpx auto;
}
.picker {
  text-align: right;
}
input {
  text-align: right;
}
.bodyBox {
  background: #ffffff;
  border-radius: 24rpx;
  width: 100%;
}
.topBox {
  height: 80rpx;
  background: #ffffff;
  border-radius: 24rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  line-height: 80rpx;
  padding: 0 20rpx;
  font-size: 24rpx;
}

.modal {
  .agreement {
    width: 640rpx;
    height: 740rpx;
    background: #ffffff;
    display: flex;
    flex-direction: column;

    .body {
      flex: 1;

      .content {
        padding: 30rpx 40rpx 28rpx;
        line-height: 40rpx;
        font-size: 26rpx;
        color: #666;

        .bold {
          color: #333;
          font-size: 26rpx;
          font-weight: bold;
        }

        .center {
          text-align: center;
        }
      }
    }

    .footer {
      height: 140rpx;
      border-top: 1px solid #eeeeee;
      display: flex;
      align-items: center;
      justify-content: center;

      .btn {
        margin: 0 12rpx;
        width: 200rpx;
        height: 80rpx;
        color: #007aff;
        font-size: 30rpx;
        text-align: center;
        line-height: 80rpx;
        background: #f5f5f5;
        border-radius: 40rpx 40rpx 40rpx 40rpx;

        &.ok {
          width: 336rpx;
          height: 80rpx;
          background: #007aff;
          color: #fff;
        }

        &.close {
          color: #fff;
          width: 560rpx;
          height: 80rpx;
          background: #007aff;
          border-radius: 40rpx 40rpx 40rpx 40rpx;
        }
      }
    }
  }
}
</style>