tenant-Platform/src/views/partnerManagement/modules/addCard.vue

<template>
  <div class="form">
    <el-form ref="BankRef" :rules="bankRules" :model="bankForm" label-width="80">
      <el-form-item prop="name" label="姓名">
        <el-input v-model="bankForm.name" disabled></el-input>
      </el-form-item>
      <el-form-item prop="bank" label="银行">
        <el-select v-model="bankForm.bankName" :disabled="bankForm.isRead">
          <el-option v-for="item in bankOption" :key="item.id" :value="item.id" :label="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="bankCardNumber" label="银行卡号">
        <el-input v-model="bankForm.bankCardNumber" :disabled="bankForm.isRead"></el-input>
      </el-form-item>
      <el-form-item prop="bankName" label="开户行">
        <el-input v-model="bankForm.bankAddress" :disabled="bankForm.isRead"></el-input>
      </el-form-item>
      <el-form-item prop="photo" label="照片" class="upload-btn">
        <el-upload :auto-upload="false" v-if="!bankForm.imageUrl" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage">
          <el-button size="large" icon="Plus" />
        </el-upload>
        <div class="image-view" v-else>
          <img :src="bankForm.imageUrl" />
          <div class="btns" v-if="!bankForm.isRead">
            <el-upload  :disabled="bankForm.isRead" style="display: inline" :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage">
              <el-icon class="btn-icon"><Upload /></el-icon>
            </el-upload>
<!--            <el-icon class="btn-icon" @click="imageView"><View /></el-icon>-->
          </div>
        </div>
      </el-form-item>
      <div style="display: flex; justify-content: flex-end" v-if="!bankForm.isRead">
        <el-button @click="onSubmit(BankRef, 0)">取消</el-button>
        <el-button type="primary" @click="onSubmit(BankRef, 1)">确定</el-button>
      </div>
    </el-form>
    <div class="image-show" v-show="imageShow" @click="() => { imageShow = false }">
      <img :src="bankForm.imageUrl" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, onMounted, watch } from 'vue'
import {ElMessage, FormInstance} from 'element-plus'
import api from "@/api";

const BankRef = ref<FormInstance>()

let props = defineProps<{
  userInfo: {
    userJzgInfoId: string,
    name: string,
    bankName?: string,
    bankCardNumber?: string,
    bankAddress?: string,
    attachment?: string,
    imageUrl?: string
    isRead?: boolean
  }
}>()
const emits = defineEmits(['closeDialog'])
watch(() => props.userInfo, (newVal, oldVal) => {
  bankForm.value = newVal
}, { deep: true });

let bankForm = ref({
  userJzgInfoId: props.userInfo.userJzgInfoId,
  name: props.userInfo.name,
  bankName: props.userInfo.bankName,
  bankCardNumber: props.userInfo.bankCardNumber,
  bankAddress: props.userInfo.bankAddress,
  attachment: props.userInfo.attachment,
  imageUrl: props.userInfo.attachment,
  isRead: props.userInfo.isRead
})
const bankRules = {
  name: [
    { required: true, message: '请填写姓名', trigger: 'blur' }
  ],
  bankName: [
    { required: true, message: '请填写开户行', trigger: 'blur' }
  ],
  bankCardNumber: [
    { required: true, message: '请填写银行卡号', trigger: 'blur' },
    {
      pattern: /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/,
      message: '请填写正确的银行卡号',
      trigger: 'blur'
    }
  ],
  bankAddress: [
    { required: true, message: '请填写开户行', trigger: 'blur' }
  ],
}

// 照片
let imageShow = ref(false)
const uploadImage = async (file) => {
  let files = file.raw
  const params = new FormData(); // 声明formData数据类型
  params.append("file", files);
  params.append("type", "image");
  const { code, data, msg } = await api.commonApi.fileUpload(params)
  if(code == 200) {
    bankForm.value.imageUrl = data.downloadUrl
    bankForm.value.attachment = data.id
  }
}
const imageView = () => {
  imageShow.value = true
}

// 初始化银行数据
let bankOption = ref([])
const initBankCard = () => {
  api.commonApi.personInfo('bank_info').then(res => {
    if(res.code == 200) {
      bankOption.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

const onSubmit = async (BankRef:FormInstance | undefined, type: number) => {
  if(!BankRef) {
    BankRef.resetFields()
    emits('closeDialog', '取消')
    return
  }
  if(type) {
    await BankRef.validate((valid) => {
      if(valid) {
        console.log(bankForm.value)
        return
        api.operationApi.addBankCard(bankForm.value).then(res => {
          if(res.code == 200) {
            ElMessage({
              message: res.msg,
              type: 'success'
            })
          } else {
            ElMessage({
              message: res.msg,
              type: 'warning'
            })
          }
          BankRef.resetFields()
          emits('closeDialog', '确定')
        })
      } else {
        ElMessage({
          message: '请正确填写相关信息！',
          type: 'warning'
        })
      }
    })
  } else {
    BankRef.resetFields()
    emits('closeDialog', '取消')
  }
}

onMounted(() => {
  initBankCard()
})

</script>

<style scoped lang="scss">
.form{
  position: relative;
  .upload-btn{
    :deep(.el-button) {
      width: 80px;
      height: 80px;
      font-size: 30px;
      color: #ccc;
    }
  }
  .image-view{
    width: 80px;
    height: 80px;
    border-radius: 5px;
    position: relative;
    img{
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }
    .btns{
      display: none;
    }
    &:hover{
      .btns{
        width: 100%;
        height: 100%;
        border-radius: 5px;
        position: absolute;
        background: rgba(0,0,0, .3);
        top: 0;
        left: 0;
        line-height: 80px;
        display: flex;
        align-content: center;
        justify-content: center;
        .btn-icon{
          color: #fff;
          font-size: 18px;
          margin: 0 10px;
          cursor: pointer;
        }
      }
    }
  }
  .image-show{
    width: 100%;
    height: 100%;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    display: flex;
    align-content: center;
    justify-content: center;
    background: rgba(0,0,0,.4);
    img{
      display: block;
      width: 80%;
      height: 100%;
    }
  }
}
</style>