ruoyi-miniapp/sub/invite/prove.vue

<template>
  <view class="view">
    <view class="block">
      <view style="">
        <text style="color: #f8285a; margin-right: 4px">*</text>
        资质名称
      </view>
      <view
        class="value"
        @tap="showPicker('enterprise_qua', 'qualificationName')"
      >
        <view class="input-textarea" v-if="prove.qualificationName">
          {{
            $dict.echoDicValue(
              dictMap.enterprise_qua,
              prove.qualificationName
            )
          }}
        </view>
        <view class="input-textarea" style="color: #808080" v-else>
          请选择资质名称
        </view>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>

    <view class="block">
      <view style="">
        <text style="color: #f8285a; margin-right: 4px">*</text>
        资质编号
      </view>
      <view class="value">
        <input
          class="input-value"
          type="text"
          placeholder-class="txt"
          placeholder="请输入资质编号"
          v-model="prove.enterpriseAuth"
        />
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>

    <!--   <view class="block">
      <view style="">
        <text style="color: #f8285a; margin-right: 4px">*</text>
        办理时间
      </view>
      <view class="value" @tap="showCalendar('handleDate')">
        <view class="input-textarea" v-if="prove.handleDate">
          {{ prove.handleDate }}
        </view>
        <view class="input-textarea" style="color: #808080" v-else>
          请选择办理时间
        </view>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view> -->

    <view class="block">
      <view style="">
        <text style="color: #f8285a; margin-right: 4px">*</text>
        到期时间
      </view>
      <view class="value" @tap="showCalendar('expiryDate')">
        <view class="input-textarea" v-if="prove.expiryDate">
          {{ prove.expiryDate }}
        </view>
        <view class="input-textarea" style="color: #808080" v-else>
          请选择到期时间
        </view>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>

    <view class="upload-wrapper">
      <view
        class="wd-flex"
        style="
          justify-content: space-between;
          align-items: center;
          width: 100%;
        "
      >
        <view style="">
          <text style="color: #f8285a; margin-right: 4px">*</text>
          资质照片
        </view>
        <view style="color: #808080">要求清晰有效</view>
      </view>
      <u-upload
        :fileList="prove.photo"
        @afterRead="addPhoto"
        @delete="delPhoto"
        :maxCount="1"
        width="101"
        height="101"
      ></u-upload>
    </view>

    <cs-bottom-wrapper>
      <view class="operation">
        <button class="btn green" @tap="submit">保存</button>
      </view>
    </cs-bottom-wrapper>
    <u-picker
      :show="picker.show"
      :columns="picker.data"
      @cancel="closePicker"
      closeOnClickOverlay
      keyName="label"
      ref="uPicker"
      @close="closePicker"
      @confirm="confirmPicker"
    ></u-picker>
    <uni-calendar
      ref="calendarRef"
      :insert="false"
      @confirm="confirmCalendar"
    />
  </view>
</template>

<script>
import { uploadFile } from '@/api/system/file.js'
import { getDictBatchByType } from '@/api/system/dict.js'
export default {
  data() {
    return {
      prove: {
        id: '',
        qualificationName: '',
        expiryDate: '',
        enterpriseAuth: '',
        photo: []
      },
      dictMap: {},
      // 选择器
      picker: {
        show: false,
        // 做表单中键的缓存用
        key: null,
        data: []
      },
      // 日历控件
      calendar: {
        // 做表单中键的缓存用
        key: null
      }
    }
  },
  onLoad(res) {
    uni.setNavigationBarTitle({
      title: res.prove ? '编辑资质' : '新增资质'
    })
    if (res.prove) {
      this.prove = JSON.parse(res.prove)
    }
    this.getDict()
  },
  onShow() {},
  methods: {
    /**
     * 获取字典
     */
    async getDict() {
      const dict = await getDictBatchByType({
        type: ['enterprise_qua'].join(',')
      })
      this.dictMap = {
        ...dict.data
      }
    },
    /**
     * 选择图片并上传
     * @param {Object} e
     */
    async addPhoto(e) {
      uni.showLoading({
        title: '正在上传...'
      })
      this.prove.photo.push({
        ...e.file,
        status: 'uploading',
        message: '上传中'
      })
      uploadFile({ name: `file`, filePath: e.file.url }).then(res => {
        this.prove.photo = []
        this.prove.photo.push({
          ...res.data,
          status: 'success',
          message: ''
        })
        uni.hideLoading()
      })
    },
    /**
     * 删除图片
     * @param {Object} e
     */
    delPhoto(e) {
      this.prove.photo = []
    },
    /**
     * 选择器确认回调
     * @param {Object} e
     */
    confirmPicker(e) {
      const { value } = e
      this.prove[this.picker.key] = value[0].value
      this.closePicker()
    },
    /**
     * 关闭选择器
     */
    closePicker() {
      this.picker = {
        show: false,
        key: '',
        data: []
      }
    },
    showPicker(dict, key) {
      this.picker.data.push(this.dictMap[dict])
      this.picker.key = key
      this.picker.show = true
    },
    /**
     * 显示日历
     * @param {Object} key 表单中需要赋值的键
     */
    showCalendar(key) {
      this.$refs.calendarRef.open()
      this.calendar = {
        key
      }
    },
    /**
     * 日历选中之后的回调
     * @param {Object} e
     */
    confirmCalendar(e) {
      this.prove[this.calendar.key] = e.fulldate

      this.closeCalendar()
    },
    /**
     * 关闭日历
     */
    closeCalendar() {
      this.calendar = {
        key: null
      }
    },
    async submit() {
      const valide = await this.verifyForm()
      if (!valide) return
      uni.$emit('prove', this.prove)
      uni.navigateBack()
    },
    async verifyForm() {
      const msgMap = {
        qualificationName: '请填写资质名称',
        expiryDate: '请选择到期日期',
        enterpriseAuth: '请填写资质编号',
        photo: '请上传资质照片'
      }
      const keys = Object.keys(this.prove).filter(i => {
        if (!this.prove[i] && i != 'id') return i
        if (typeof this.prove[i] == 'object' && this.prove[i].length == 0)
          return i
      })
      if (keys.length > 0) {
        const msg = keys
          .map(i => {
            return msgMap[i]
          })
          .join('\n')
        uni.showToast({
          icon: 'none',
          title: msg
        })
        return false
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.view {
  padding: 12px;
  display: flex;
  flex-flow: column nowrap;
  gap: 12px;
  overflow: hidden;
  overflow-y: scroll;
  max-height: 100vh;
  padding-bottom: 12vh;
}
.block {
  display: flex;
  flex-flow: row nowrap;
  background-color: #fff;
  padding: 12px;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  .value {
    flex: 1;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: 4px;
    .input-value {
      flex: 1;
      text-align: right;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .input-textarea {
      flex: 1;
      display: -webkit-box;
      overflow: hidden;
      text-align: right;
      max-height: 3rem;
      line-height: 1rem;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }
  }
}

.upload-wrapper {
  display: flex;
  flex-flow: column nowrap;
  background-color: #fff;
  padding: 12px;
  border-radius: 8px;
  gap: 12px;
}

.operation {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  .btn {
    flex: 1;
    border-radius: 8px;
    display: flex;
    padding: 12px 0;
    align-items: center;
    justify-content: center;
  }
  .green {
    background-color: $cs-color-main;
    color: #fff;
  }
}
</style>