jiliangxiaochengxu/components/personRegistered/uploadLicense.vue

<!-- @format -->

<template>
  <view class="container">
    <view style="color: #3c9cff" class="informationTitle"
      >上传身份信息 (个人注册前需要先注册企业账号)</view
    >

    <view class="cardImage">
      <view class="conmpan">
        <view style="width: 85%; margin: 0 auto">
          <u-form>
            <u-form-item
              labelPosition="top"
              labelWidth="160"
              :required="true"
              label="企业社会统一信用代码"
            >
              <u-input
                @blur="handleDetect"
                v-model="conmpanCode"
                placeholder="请输入企业社会统一信用代码"
              ></u-input>
            </u-form-item>
          </u-form>
        </view>
      </view>

      <view class="updateContent" :style="{ opacity: !isPass ? '0.5' : 1 }">
        <view style="margin: 0 auto">
          <u-upload
            name="1"
            :disabled="!isPass"
            :fileList="fileList1"
            @afterRead="afterRead"
            @delete="deletePic"
            :maxCount="1"
            width="280"
            height="180"
          >
            <view class="uploadTipcContent">
              <view class="cardImg">
                <image
                  style="height: 180rpx; width: 400rpx"
                  mode="widthFix"
                  :src="require('@/static/images/cardzm.png')"
                ></image>
                <view class="topic"> 请上传被授权人身份证人像照片 </view>
              </view>
            </view>
          </u-upload>
        </view>
      </view>
      <view class="updateContent" :style="{ opacity: !isPass ? '0.5' : 1 }">
        <view style="margin: 0 auto">
          <u-upload
            :disabled="!isPass"
            name="2"
            :fileList="fileList2"
            @afterRead="afterRead"
            @delete="deletePic"
            :maxCount="1"
            width="280"
            height="180"
          >
            <view class="uploadTipcContent">
              <view class="cardImg">
                <image
                  style="height: 180rpx; width: 430rpx; margin-left: 30rpx"
                  mode="widthFix"
                  :src="require('@/static/images/cardbm.png')"
                ></image>
                <view class="topic"> 请上传被授权人身份证国徽照片 </view>
              </view>
            </view>
          </u-upload>
        </view>
      </view>
    </view>

    <u-modal
      @cancel="showModal = false"
      confirmText="退出"
      @confirm="handleCancel"
      :show="showModal"
      :title="'提示'"
      :content="'您输入的企业没有注册，需要先进行企业注册。'"
    ></u-modal>
  </view>
</template>

<script>
import { checkMechanismIsExist } from "@/api/login";
export default {
  data() {
    return {
      showModal: false,
      isPass: false,
      fileList1: [],
      fileList2: [],
      conmpanCode: "",
    };
  },
  props: {
    formdData: {
      type: Object,
      default: () => ({}),
    },
  },

  created() {
    if (this.formdData.cardFrontImg || this.formdData.cardBackImg) {
      this.fileList1[0] = {
        url: this.$baseUrl + this.formdData.cardFrontImg,
      };
      this.fileList2[0] = {
        url: this.$baseUrl + this.formdData.cardBackImg,
      };
    }
  },

  methods: {
    handleCancel() {
      this.showModal = false;
    },
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: JSON.parse(result.data).fileName,
          })
        );

        if (event.name == 1) {
          this.$emit("update:formdData", {
            ...this.formdData,
            cardFrontImg: JSON.parse(result.data).fileName,
          });
        } else {
          this.$emit("update:formdData", {
            ...this.formdData,
            cardBackImg: JSON.parse(result.data).fileName,
          });
        }

        fileListLen++;
      }
    },

    //上传
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: `${this.$baseUrl}/api/common/upload`, // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          success: (res) => {
            setTimeout(() => {
              resolve(res);
            }, 1000);
          },
        });
      });
    },
    //检测企业代码是否合法
    async handleDetect() {
      if (!this.conmpanCode) return;
      uni.showLoading({
        title: "检测企业是否注册...",
      });
      try {
        let { code } = await checkMechanismIsExist({ code: this.conmpanCode });
        if (code == 200) {
          this.isPass = true;
          uni.showToast({
            title: "检测通过",
            //将值设置为 success 或者直接不用写icon这个参数
            //显示持续时间为 2秒
            duration: 2000,
          });
        }
      } catch (error) {
        this.isPass = false;
      }
    },
  },
};
</script>

<style lang="scss">
.container {
  height: 100vh;
  background: #fff;
}
.cardImg {
  width: 100%;
  display: flex;
  justify-content: center;
}
.conmpan {
  width: 100%;
  margin: 0 auto;
  background: #fff;
}
.topic {
  color: #909399;
  font-size: 24rpx;
  width: 400rpx;
  margin: 20rpx auto 0;
  font-family: "宋体";
  position: absolute;
  bottom: 20rpx;
  left: 50%;
  transform: translateX(-43%);
}

.uploadTipcContent {
  width: 600rpx;
  height: 260rpx;
  position: relative;
  // padding: 30rpx;

  // border: 1px dotted#909399;
}

.updateContent {
  display: flex;
  background: #fff;
  padding: 20rpx;
}

.informationTitle {
  margin-bottom: 30rpx;
  font-size: 30;
}

.contentItems {
  width: 100%;
  border-radius: 6px;
  background: #fff;
  margin: 0rpx auto 30rpx;
  padding: 20rpx 30rpx 20rpx;

  .content {
    border-bottom: 1px solid rgb(242, 242, 242);
    padding: 0rpx 0 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .content:last-child {
    border-bottom: none;
  }

  .title {
    font-size: 30rpx;
    color: black;
    letter-spacing: 3rpx;
  }

  .message {
    margin-left: 70rpx;
    text-align: right;
    // width: 420rpx;
    font-size: 30rpx;
    color: rgb(146, 146, 146);
    // white-space: nowrap;
    // /* 禁止文本换行 */
    // overflow: hidden;
    // /* 隐藏超出容器的文本 */
    // text-overflow: ellipsis;
    /* 使用省略号表示被截断的文本 */
  }
}
</style>