合伙人添加银行卡

src/views/partnerManagement/modules/addCard.vue

@@ -0,0 +1,239 @@
+<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>

src/views/partnerManagement/partnerDetail.vue

@@ -176,6 +176,7 @@ import pinyin from "js-pinyin";
 import { ElMessage, ElMessageBox } from 'element-plus'
 import Allocation from "@/views/operationManagement/modules/allocation.vue";
 import { useRoute, useRouter } from 'vue-router'
+import addCard from './modules/addCard.vue'
 import api from '@/api'
 import {OperationIsEnable} from "@/api/modules/operation.ts";
 import router from "@/router";