|
|
@@ -1,47 +1,33 @@
|
|
|
<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 ref="BankRef" :rules="bankRules" :model="bankForm" label-width="120">
|
|
|
+ <el-form-item prop="cardHolderName" label="姓名">
|
|
|
+ <el-input v-model="bankForm.cardHolderName" :disabled="props.userInfo.isRead"></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-form-item prop="cardHolderMobile" label="持卡人手机号">
|
|
|
+ <el-input v-model="bankForm.cardHolderMobile" maxlength="11" :disabled="props.userInfo.isRead"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="bankName" label="银行">
|
|
|
+ <el-select v-model="bankForm.bankName" :disabled="props.userInfo.isRead">
|
|
|
+ <el-option v-for="item in bankOption" :key="item.id" :value="item.label" :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-input v-model="bankForm.bankCardNumber" :disabled="props.userInfo.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 prop="bankAddress" label="开户行">
|
|
|
+ <el-input v-model="bankForm.bankAddress" :disabled="props.userInfo.isRead"></el-input>
|
|
|
</el-form-item>
|
|
|
- <div style="display: flex; justify-content: flex-end" v-if="!bankForm.isRead">
|
|
|
+ <div style="display: flex; justify-content: flex-end" v-if="!props.userInfo.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 { ref, onMounted, watch } from 'vue'
|
|
|
import {ElMessage, FormInstance} from 'element-plus'
|
|
|
import api from "@/api";
|
|
|
|
|
|
@@ -49,37 +35,50 @@ const BankRef = ref<FormInstance>()
|
|
|
|
|
|
let props = defineProps<{
|
|
|
userInfo: {
|
|
|
- userJzgInfoId: string,
|
|
|
- name: string,
|
|
|
- bankName?: string,
|
|
|
- bankCardNumber?: string,
|
|
|
- bankAddress?: string,
|
|
|
- attachment?: string,
|
|
|
- imageUrl?: string
|
|
|
- isRead?: boolean
|
|
|
+ userJzgInfoId?: string,
|
|
|
+ name?: string,
|
|
|
+ isRead?: boolean,
|
|
|
+ DetailInfo?: any
|
|
|
}
|
|
|
}>()
|
|
|
+let bankForm = ref({
|
|
|
+ userJzgInfoId: '',
|
|
|
+ cardHolderName: "",
|
|
|
+ cardHolderMobile: "",
|
|
|
+ bankName: "",
|
|
|
+ bankCardNumber: "",
|
|
|
+ bankAddress: "",
|
|
|
+})
|
|
|
const emits = defineEmits(['closeDialog'])
|
|
|
watch(() => props.userInfo, (newVal, oldVal) => {
|
|
|
- bankForm.value = newVal
|
|
|
-}, { deep: true });
|
|
|
+ bankForm.value.cardHolderName = newVal.name || ''
|
|
|
+ bankForm.value.userJzgInfoId = newVal.userJzgInfoId || ''
|
|
|
+ if(newVal.DetailInfo) {
|
|
|
+ bankForm.value.userJzgInfoId = newVal.DetailInfo.userJzgInfoId || ''
|
|
|
+ bankForm.value.cardHolderName = newVal.DetailInfo.name || ''
|
|
|
+ bankForm.value.cardHolderMobile = newVal.DetailInfo.cardHolderMobile || ''
|
|
|
+ bankForm.value.bankName = newVal.DetailInfo.bankName || ''
|
|
|
+ bankForm.value.bankCardNumber = newVal.DetailInfo.bankCardNumber || ''
|
|
|
+ bankForm.value.bankAddress = newVal.DetailInfo.bankAddress || ''
|
|
|
+ }
|
|
|
+}, { immediate: 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: [
|
|
|
+ cardHolderName: [
|
|
|
{ required: true, message: '请填写姓名', trigger: 'blur' }
|
|
|
],
|
|
|
+ cardHolderMobile: [
|
|
|
+ { required: true, message: '请填写持卡人手机号', trigger: 'blur' },
|
|
|
+ {
|
|
|
+ pattern: /^1[0-9]{10}$/,
|
|
|
+ message: '请填写正确的手机号',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ],
|
|
|
bankName: [
|
|
|
- { required: true, message: '请填写开户行', trigger: 'blur' }
|
|
|
+ { required: true, message: '请填写银行名称', trigger: 'blur' }
|
|
|
],
|
|
|
bankCardNumber: [
|
|
|
{ required: true, message: '请填写银行卡号', trigger: 'blur' },
|
|
|
@@ -94,28 +93,12 @@ const bankRules = {
|
|
|
],
|
|
|
}
|
|
|
|
|
|
-// 照片
|
|
|
-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) {
|
|
|
+ api.commonApi.personInfo('bank_info').then((res:any) => {
|
|
|
+ if(res?.code == 200) {
|
|
|
bankOption.value = res.data
|
|
|
} else {
|
|
|
ElMessage({
|
|
|
@@ -135,6 +118,7 @@ const onSubmit = async (BankRef:FormInstance | undefined, type: number) => {
|
|
|
if(type) {
|
|
|
await BankRef.validate((valid) => {
|
|
|
if(valid) {
|
|
|
+ console.log(bankForm.value)
|
|
|
api.operationApi.addBankCard(bankForm.value).then(res => {
|
|
|
if(res.code == 200) {
|
|
|
ElMessage({
|