vant单张图片上传

vant单张图片上传

<template>
  <div class="upload-health-certificate">
    <van-form
      ref="form"
      class="form"
      error-message-align="right"
      input-align="right"
      :show-error="false"
    >
      <van-field
        clickable
        label="发证时间"
        placeholder="请选择发证时间"
        readonly
        right-icon="arrow"
        :rules="rules.checkDate"
        :value="form.checkDate"
        @click="picker.show = true"
      />
      <van-field
        clickable
        label="发证时间"
        placeholder="请选择发证时间"
        readonly
        :rules="rules.photo"
        :value="form.photo"
      >
        <template #input>
          <div class="file-wrapper">
            <div v-show="!form.photo" class="upload" @click="chooseImg">
              <i></i>
              <p>上传照片</p>
            </div>
            <van-image
              v-show="form.photo"
              class="image"
              fit="cover"
              :src="form.photo"
            />
            <i v-show="form.photo" class="delete" @click="form.photo = ''"></i>
          </div>
        </template>
      </van-field>
    </van-form>
    <div class="bottom-btn-group">
      <button @click="onSubmit">提交审核</button>
    </div>
    <van-popup v-model="picker.show" position="bottom">
      <van-datetime-picker
        v-model="picker.currentDate"
        :max-date="picker.maxDate"
        title="选择时间"
        type="date"
        @cancel="picker.show = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
  import { Form, Field, Popup, DatetimePicker, Image } from 'vant'
  import mixJsBridge from '@/utils/mixJsBridge'
  import { uploadFiles } from '@/api/public'
  import { uploadHealthCertificate } from '@/api/housekeeper'
  import dayJs from 'dayjs'

  export default {
    components: {
      [Form.name]: Form,
      [Field.name]: Field,
      [Popup.name]: Popup,
      [DatetimePicker.name]: DatetimePicker,
      [Image.name]: Image,
    },
    data() {
      return {
        housekeeperId: this.$route.query.housekeeperId,
        form: {
          checkDate: '',
          photo: '',
        },
        rules: {
          checkDate: [
            { required: true, message: '请选择发证时间', trigger: 'onChange' },
          ],
          photo: [
            { required: true, message: '请上传照片', trigger: 'onChange' },
          ],
        },
        picker: {
          show: false,
          minDate: new Date(2000, 0, 1),
          maxDate: new Date(),
          currentDate: new Date(),
        },
      }
    },
    methods: {
      chooseImg() {
        mixJsBridge
          ._chooseImage()
          .then((data) => {
            data.map((item) => {
              this.upload(item.split(',')[1])
            })
          })
          .catch(() => {
            // this.$baseToast(err.result)
          })
      },
      async upload(base64Str) {
        const { data } = await uploadFiles({
          attach_type: 'examine',
          attach_data: base64Str,
          suffix: 'jpeg',
        })
        this.form.photo = `${process.env.VUE_APP_IMG_URL}${data.url}`
      },
      onConfirm(val) {
        this.form.checkDate = dayJs(val).format('YYYY-MM-DD')
        this.picker.show = false
      },
      onSubmit() {
        this.$refs.form
          .validate()
          .then(() => {
            const { checkDate, photo } = this.form
            uploadHealthCertificate({
              checkup_date: checkDate,
              photo_urls: [photo],
            }).then(() => {
              this.$router.go(-1)
            })
          })
          .catch((err) => {
            console.log(err)
          })
      },
    },
  }
</script>

<style type="text/scss" lang="scss" scoped>
  ::v-deep {
    .van-field__right-icon {
      color: #bdbdbd;
    }
    .van-cell--required::before {
      left: 12px;
    }
    .van-cell {
      padding: 10px 16px;
    }
  }
  .file-wrapper {
    position: relative;
    .upload {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 146px;
      height: 168px;
      background: #f8f8f8;
      border: 2px dashed #cdcdcd;
      border-radius: 4px;
      i {
        width: 36px;
        height: 38px;
        background: url('~@/assets/img/tz@3x.png') no-repeat;
        background-size: contain;
      }
      p {
        margin-top: 20px;
        font-size: 24px;
        line-height: 34px;
        color: #999;
      }
    }
    .image {
      width: 146px;
      height: 168px;
    }
    i.delete {
      position: absolute;
      top: -12px;
      right: -12px;
      width: 36px;
      height: 36px;
      background: url('~@/assets/img/sc@3x.png') no-repeat;
      background-size: contain;
    }
  }
  .bottom-btn-group {
    background: transparent;
  }
</style>