jiliangxiaochengxu/components/personRegistered/uploadLicense.vue

<!-- @format -->

<template>
  <view class="container">
    <view style="color: #3c9cff" class="informationTitle">上传身份信息</view>

    <view class="cardImage">
      <view class="updateContent">
        <view style="margin: 0 auto">
          <u-upload
            name="1"
            :fileList="fileList1"
            @afterRead="afterRead"
            @delete="deletePic"
            :maxCount="1"
            width="280"
            height="180"
          >
            <view class="uploadTipcContent">
              <view>
                <view style="display: flex; justify-content: center">
                  <u-icon
                    name="arrow-upward"
                    color="#2979ff"
                    size="28"
                  ></u-icon>
                </view>
                <u-button
                  :customStyle="{ color: '#3c9cff', fontSize: '26rpx' }"
                  type="text"
                  size="small"
                  >点击上传</u-button
                >
              </view>
              <view class="topic"> 请上传被授权人身份证正面照片 </view>
            </view>
          </u-upload>
        </view>
      </view>

      <view class="updateContent">
        <view style="margin: 0 auto">
          <u-upload
            name="2"
            :fileList="fileList2"
            @afterRead="afterRead"
            @delete="deletePic"
            :maxCount="1"
            width="280"
            height="180"
          >
            <view class="uploadTipcContent">
              <view>
                <view style="display: flex; justify-content: center">
                  <u-icon
                    name="arrow-upward"
                    color="#2979ff"
                    size="28"
                  ></u-icon>
                </view>
                <u-button
                  :customStyle="{ color: '#3c9cff', fontSize: '26rpx' }"
                  type="text"
                  size="small"
                  >点击上传</u-button
                >
              </view>
              <view class="topic"> 请上传被授权人身份证背面照片 </view>
            </view>
          </u-upload>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fileList1: [],
      fileList2: [],
    };
  },
  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: {
    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);
          },
        });
      });
    },
  },
};
</script>

<style lang="scss">
.topic {
  color: #909399;
  font-size: 24rpx;
  width: 400rpx;
  margin: 20rpx auto 0;
  font-family: "宋体";
}
.uploadTipcContent {
  width: 555rpx;
  height: 260rpx;
  padding: 30rpx;
  border: 1px dotted#909399;
}
.updateContent {
  display: flex;
  background: #fff;
  padding: 30rpx;
}
.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>