addCard.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template>
  2. <div>
  3. <el-form ref="BankRef" :rules="bankRules" :model="bankForm" label-width="80">
  4. <el-form-item prop="name" label="姓名">
  5. <el-input v-model="bankForm.name" disabled></el-input>
  6. </el-form-item>
  7. <el-form-item prop="bank" label="银行">
  8. <el-select v-model="bankForm.bank">
  9. <el-option key="1" value="银行1"></el-option>
  10. </el-select>
  11. </el-form-item>
  12. <el-form-item prop="card" label="银行卡号">
  13. <el-input v-model="bankForm.card"></el-input>
  14. </el-form-item>
  15. <el-form-item prop="bankName" label="开户行">
  16. <el-input v-model="bankForm.bankName"></el-input>
  17. </el-form-item>
  18. <el-form-item prop="photo" label="照片">
  19. <ImageUpload action="#" :ext="['png','jpg','jpeg']" :size="5"></ImageUpload>
  20. </el-form-item>
  21. </el-form>
  22. </div>
  23. </template>
  24. <script setup lang="ts">
  25. import { ref } from 'vue'
  26. let bankForm = ref({
  27. name: '',
  28. bank: '',
  29. card: '',
  30. bankName: '',
  31. photo: ''
  32. })
  33. const bankRules = {
  34. name: [
  35. { required: true, message: '请填写姓名', trigger: 'blur' }
  36. ],
  37. card: [
  38. { required: true, message: '请填写银行卡号', trigger: 'blur' }
  39. ],
  40. bankName: [
  41. { required: true, message: '请填写开户行', trigger: 'blur' }
  42. ],
  43. }
  44. </script>
  45. <style scoped lang="scss">
  46. </style>