zc_saas_h5/pages2/verify/input.vue

<template>
  <view class="infos" 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="refuseAgreement">稍后再填</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"
                :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="changePhotoListHeader($event, item.fieldKey)"
                :auto-upload="false"
                :custom-btn="true"
                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 : ''"
              >
                <div style="width: 100%">
                  <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>
                </div>
              </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
              >
              <div>
                <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>
              </div>
            </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>

    <!--用于图片压缩的canvas画布，不在页面中展示，且id固定不可变 position: absolute; z-index: -1; left: -10000rpx;; top: -10000rpx;-->
    <!-- style="width: {{cw}}px; height: {{cw}}px;" -->
    <view class="photo_can">
      <canvas class="zip_canvas" canvas-id="zipCanvas"></canvas>
    </view>
  </view>
</template>

<script>
import config from "@/common/config";
import { mapGetters, mapActions } from "vuex";
import Handwriting from "@/common/signature.js";
import getLessLimitSizeImage from "@/common/compressPhoto.js";
export default {
  data() {
    return {
      baseUrls: config.BASE_IMG_URL,
      cw: wx.getSystemInfoSync().windowWidth, //画板边长默认是屏幕宽度，正方形画布
      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,
      disName: false, // 姓名是否禁止输入
      disCard: false, // 身份证是否禁止输入
      auto: "180rpx",
    };
  },
  created() {
    this.$store.getters.dictObj;
  },
  async onLoad(option) {
    this.orderGoodsId = Number(option.orderGoodsId);
    this.goodsId = Number(option.id);
    this.gradeId = Number(option.gradeId);
    !this.userInfo && this.$api.refreshUserInfo();
    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) {
        this.listData.forEach((item) => {
          if (item.fieldKey == "idcard") {
            this.form.idcard = this.userInfo.idCard;
          }
          if (item.fieldKey == "telphone") {
            this.form.telphone = this.userInfo.telphone;
          }

          if (item.fieldKey == "name") {
            this.form.name = this.userInfo.realname;
          }
        });
      }
    },
  },
  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
        );
      }

      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) => {
          // #ifdef H5
          window.location.href = this.$method.splitImgHost(res.data.msg);
          // #endif
          // #ifdef MP-WEIXIN
          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) => {},
                });
              }
            },
          });
          // #endif
        });
    },
    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 && this.userInfo.companyName) {
              this.$set(this.form, "work_unit", this.userInfo.companyName);
            }
            resolve();
          });
      });
    },
    uploadImgs() {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        success: (res) => {
          if (res.tempFiles[0].size > 2097152) {
            this.$method.showToast("上传图片不得大于2M");
            return;
            // this.$method.showToast("上传图片不得大于2M");
            // 需要压缩
            let canvasId = "zipCanvas";
            let imagePath = res.tempFiles[0].path; //原图的路径
            let limitSize = 2048; //大小限制2048kb
            let drawWidth = wx.getSystemInfoSync().windowWidth; //初始绘画区域是画布自身的宽度也就是屏幕宽度
            getLessLimitSizeImage(
              canvasId,
              imagePath,
              limitSize,
              drawWidth,
              async (resPath) => {
                //resPath就是压缩后图片的路径
                this.uploadImgsChild(resPath);
              }
            );
            return;
          } else {
            // this.uploadImgsChild(res.tempFiles[0].path);
            // #ifdef MP-WEIXIN
            var type = res.tempFiles[0].path.split(".").splice(-1);
            // #endif
            // #ifdef H5
            var type = res.tempFiles[0].type.split("/").splice(-1);
            // #endif
            if (type[0] != "jpg" && type[0] != "png" && type[0] != "jpeg") {
              this.$method.showToast("请上传图片格式");
              return;
            }
            this.$set(this.form, "commitment_seal", res.tempFiles[0].path);
            this.$nextTick(() => {
              this.resultForm();
            });
          }
        },
      });
    },
    uploadImgsChild(path) {
      // #ifdef MP-WEIXIN
      var type = path.split(".").splice(-1);
      // #endif
      // #ifdef H5
      var type = type.split("/").splice(-1);
      // #endif
      if (type[0] != "jpg" && type[0] != "png" && type[0] != "jpeg") {
        this.$method.showToast("请上传图片格式");
        return;
      }
      this.$set(this.form, "commitment_seal", path);
      this.$nextTick(() => {
        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: 2,
      });
    },
    clearFun(key) {
      this.form[key] = "";
    },
    //清除按钮
    clearWatch(key) {
      if (this.form[key]) {
        return true;
      } else {
        return false;
      }
    },

    async uploadDatas(data) {
      if (this.form.recent_photos && this.form.idcard_face_photo) {
        let base64 = await this.$method.imageToBase64(
          this.form.idcard_face_photo
        );
        let resData = await this.faceCertificationIDCardOCR(1, base64);
        if (!resData.data) {
          uni.showModal({
            title: "提示",
            content: "身份证人像面照片异常，请重新上传",
            showCancel: false,
          });
          this.isUploading = false;
          return;
        }
        base64 = await this.$method.imageToBase64(this.form.recent_photos);
        this.$api
          .faceCertificationIdCardCompareFace({
            urlA: this.form.idcard_face_photo,
            oneInchPhotos: base64,
          })
          .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();
                    setTimeout(() => {
                      console.log("延迟");
                      uni.navigateBack();
                    }, 1500);
                  } 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();
                    setTimeout(() => {
                      console.log("延迟");
                      uni.navigateBack();
                    }, 1500);
                  } else {
                    this.$method.showToast(res.data.msg);
                    this.isUploading = false;
                  }
                });
              }
            } else {
              this.isUploading = false;
              uni.showModal({
                title: "提示",
                content: "个人近照和身份证人像面照片不匹配",
                showCancel: false,
              });
            }
          });
        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");
        this.$api.editbaseprofiletp(datas).then((res) => {
          this.isUploading = false;
          if (res.data.code === 200) {
            this.$method.showToast("提交成功");
            this.getUserInfo();
            setTimeout(() => {
              console.log("延迟");
              uni.navigateBack();
            }, 1500);
          } 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();
              setTimeout(() => {
                console.log("延迟");
                uni.navigateBack();
              }, 1500);
            } else {
              this.$method.showToast(res.data.msg);
              this.isUploading = false;
            }
          })
          .catch((err) => {});
      }
    },

    clearWord() {
      this.$set(this.form, "commitment_seal", "");
      this.titleName = "";
    },
    //提交表单
    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["idcard_face_photo"] &&
        data["idcard_face_photo"].indexOf("oss/images") == -1
      ) {
        data.idcard_face_photo = await this.$method.uploadFile(
          data.idcard_face_photo,
          0
        );
      }
      if (
        data["idcard_national_photo"] &&
        data["idcard_national_photo"].indexOf("oss/images") == -1
      ) {
        data.idcard_national_photo = await this.$method.uploadFile(
          data.idcard_national_photo,
          0
        );
      }
      if (
        data["commitment_electr_signature"] &&
        data["commitment_electr_signature"].indexOf("oss/images") == -1
      ) {
        data.commitment_electr_signature = await this.$method.uploadFile(
          data.commitment_electr_signature,
          0
        );
      }
      if (
        data["commitment_seal"] &&
        data["commitment_seal"].indexOf("oss/images") == -1
      ) {
        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);
    },
    async faceCertificationIDCardOCR(cardSide, base64) {
      if (!this.$method.isBase64(base64)) {
        base64 = await this.$method.fileToBase64(base64);
      }
      let res = await this.$api.faceCertificationIDCardOCR({
        cardSide: cardSide, //1人像  2 国徽
        cardImageBase64: base64,
        gradeId: this.gradeId,
      });
      return Promise.resolve(res.data);
    },
    async changePhotoListHeader(lists, key) {
      const map = {
        recent_photos: 1,
        idcard_face_photo: 2,
        idcard_national_photo: 3,
      };
      const index = map[key];
      if (lists.length) {
        // #ifdef MP-WEIXIN
        const isJPG =
          lists[0].url.indexOf("//tmp") !== -1 ||
          lists[0].url.indexOf("//temp") !== -1;
        // #endif
        // #ifdef H5
        const isJPG =
          lists[0].file.type === "image/jpeg" ||
          lists[0].file.type === "image/png" ||
          lists[0].file.type === "image/jpg";
        // #endif
        if (isJPG) {
          let size = lists[0].file.size;
          if (size < 2 * 1024 * 1024) {
            this["fileList" + index] = lists;
            if (index == 1) {
              let url = lists[0].url;
              // #ifdef MP-WEIXIN
              url = await this.$method.imageInfos(url);
              // #endif
              // #ifdef H5
              url = await this.$method.uploadFile(url, 0);
              // #endif
              this.$set(this.form, "recent_photos", url);
            } else {
              // #ifdef MP-WEIXIN
              let url = lists[0].url;
              // #endif
              // #ifdef H5
              let url = lists[0].file;
              // #endif
              this.$refs[key][0].remove(0);
              let titleMsg =
                "请上传正确清晰的身份证" +
                (index == 2 ? "人像" : "国徽") +
                "面照片";
              this.checkIdCard(index - 1, url, titleMsg, key);
            }
          } else {
            this.$refs[key][0].remove(0);
            uni.showModal({
              title: "提示",
              content: "上传图片大小不能超过 2MB!",
              showCancel: false,
            });
            return;
          }
        }
      } else {
        this["fileList" + index] = [];
        this.$set(this.form, key, "");
      }
      this.openVerify = false;
      this.$nextTick(function () {
        this.resultForm();
      });
    },
    async checkIdCard(cardSide, url, titleMsg, paramType) {
      let res = await this.faceCertificationIDCardOCR(cardSide, url);
      if (res.code == 500) {
        uni.showToast({
          icon: "none",
          title: titleMsg,
        });
        return;
      }
      if (cardSide == 1) {
        let { IdName, IdNum } = res.data;
        if (IdName != this.form.name || IdNum != this.form.idcard) {
          uni.showModal({
            content:
              IdName != this.form.name
                ? "输入的姓名和身份证人像面照片姓名不匹配,请联系客服"
                : "输入的身份证号和身份证人像面照片身份证号不匹配,请联系客服",
            showCancel: false,
            success: (resultst) => {
              if (resultst.confirm) {
                uni.navigateBack();
              }
            },
          });
          return;
        }
      }

      this.$refs[paramType][0].lists = [
        {
          url: this.$method.splitImgHost(res.data.IdImgPath),
        },
      ];
      this.$set(this.form, paramType, res.data.IdImgPath);
    },
    getTimes(key) {
      if (this.form[key]) {
        return this.form[key];
      } else {
        return "请选择时间";
      }
    },
    getarrays(key) {
      if (!this.dictObj) return;
      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 (!this.dictObj) return;
      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() {
      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];
          self.listData.forEach((item) => {
            if (item.fieldKey == "idcard") {
              this.form.idcard = this.userInfo.idCard;
              this.disCard = this.form.idcard ? true : false;
            }
            if (item.fieldKey == "telphone") {
              this.form.telphone = this.userInfo.telphone;
            }

            if (item.fieldKey == "name") {
              this.form.name = this.userInfo.realname;
              this.disName = this.form.name ? true : false;
            }
          });
          self.isRequired = self.listData.every((ims) => {
            return ims.required === false;
          });
          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 + 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 + 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 + 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();
                      }
                    });
                }
                if (result.data.data && result.data.data.status === 3) {
                  self.remark = result.data.data.text;
                  self.remarkStatus = true;
                  self.id = result.data.data.id;
                  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 + 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 + 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 + 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;
        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">
.infos {
  position: relative;
  top: 0rpx;
  left: 0rpx;
  .photo_can {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    left: -10000rpx;
    top: -10000rpx;
  }
  .zip_canvas {
    width: 100%;
    height: 600rpx;
    border: 2rpx solid #333;
  }
}
.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;
}
// /deep/ .u-input {
//   text-align: right !important;
// }
.picker {
  flex: 1;
}
/deep/ .u-form-item--right {
  .u-input__input {
    text-align: right;
  }
  uni-picker {
    flex: 1;
  }
}
.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: 400rpx;
  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>