rates.vue 7.69 KB
<template>
  <div class="box">
    <!-- 收费信息 -->
    
    <el-row>
      <el-col :span="18" style="min-height: 454px">
        <el-form :model="form" label-width="160px">
          <br>
          <br>

          <h2 style="margin-left: 90px;">会员收费账号</h2>
          <!-- 会员费用 -->
          <div>
            <el-form-item label="银行账户" prop="">
              <el-input v-model="form.bankAccountName" disabled style="width: 100%" />
            </el-form-item>
            <el-form-item label="开户行" prop="">
              <el-input v-model="form.bankName" disabled style="width: 100%" />
            </el-form-item>
            <el-form-item label="账户" prop="">
              <el-input v-model="form.bankAccount" disabled style="width: 100%" />
            </el-form-item>
            
          </div>

          <div>
            <h2>考试收费信息</h2>
            <el-form-item label="银行账户" prop="bankAccountNameExam">
              <el-input v-model="form.bankAccountNameExam" disabled style="width: 100%" />
            </el-form-item>
            <el-form-item label="开户行" prop="bankNameExam">
              <el-input v-model="form.bankNameExam" disabled style="width: 100%" />
            </el-form-item>
            <el-form-item label="账户" prop="bankAccountExam">
              <el-input v-model="form.bankAccountExam" disabled style="width: 100%" />
            </el-form-item>
          </div>
          <div>
            <h2>开票信息</h2>
            <el-form-item label="抬头名称" prop="invoiceHeader">
              <el-input v-model="form.invoiceHeader" disabled style="width: 100%" />
            </el-form-item>
            <el-form-item label="单位税号" prop="invoiceTaxNumber">
              <el-input v-model="form.invoiceTaxNumber" disabled style="width: 100%" />
            </el-form-item>
            <el-form-item label="注册地址" prop="invoiceRegAddress">
              <el-input v-model="form.invoiceRegAddress" disabled style="width: 100%" />
            </el-form-item>
            <el-form-item label="注册电话" prop="invoicePhone">
              <el-input v-model="form.invoicePhone" disabled style="width: 100%" />
            </el-form-item>
            <el-form-item label="开户银行" prop="invoiceBank">
              <el-input v-model="form.invoiceBank" disabled style="width: 100%" />
            </el-form-item>
            <el-form-item label="银行账号" prop="invoiceBankAccount">
              <el-input v-model="form.invoiceBankAccount" disabled style="width: 100%" />
            </el-form-item>

          </div>
          <br>
          <el-form-item>
            <div class="form-center">
              <el-button type="primary" size="large" style="width: 180px" @click="show=true">编辑</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 账户信息 -->
    <el-dialog
      v-model="show" center style="border-radius: 20px;" title="账户信息" :close-on-click-modal="true"
      width="900"
    >
      <!-- 团队信息 -->
      <el-form ref="formRef" :model="form" label-width="80px" :rules="rules">
        <br>
        <div>
          <h2>会员收费信息</h2>
          <el-form-item label="银行账户" prop="bankAccountName">
            <el-input v-model="form.bankAccountName" style="width: 100%" />
          </el-form-item>
          <el-form-item label="开户行" prop="bankName">
            <el-input v-model="form.bankName" style="width: 100%" />
          </el-form-item>
          <el-form-item label="账户" prop="bankAccount">
            <el-input v-model="form.bankAccount" style="width: 100%" />
          </el-form-item>
        </div>
        <div>
          <h2>考试收费信息</h2>
          <el-form-item label="银行账户" prop="bankAccountNameExam">
            <el-input v-model="form.bankAccountNameExam" style="width: 100%" />
          </el-form-item>
          <el-form-item label="开户行" prop="bankNameExam">
            <el-input v-model="form.bankNameExam" style="width: 100%" />
          </el-form-item>
          <el-form-item label="账户" prop="bankAccountExam">
            <el-input v-model="form.bankAccountExam" style="width: 100%" />
          </el-form-item>
        </div>
        <div>
          <h2>开票信息</h2>
          <el-form-item label="抬头名称" prop="invoiceHeader">
            <el-input v-model="form.invoiceHeader" style="width: 100%" />
          </el-form-item>
          <el-form-item label="单位税号" prop="invoiceTaxNumber">
            <el-input v-model="form.invoiceTaxNumber" style="width: 100%" />
          </el-form-item>
          <el-form-item label="注册地址" prop="invoiceRegAddress">
            <el-input v-model="form.invoiceRegAddress" style="width: 100%" />
          </el-form-item>
          <el-form-item label="注册电话" prop="invoicePhone">
            <el-input v-model="form.invoicePhone" style="width: 100%" />
          </el-form-item>
          <el-form-item label="开户银行" prop="invoiceBank">
            <el-input v-model="form.invoiceBank" style="width: 100%" />
          </el-form-item>
          <el-form-item label="银行账号" prop="invoiceBankAccount">
            <el-input v-model="form.invoiceBankAccount" style="width: 100%" />
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer text-center">
          <el-button type="primary" @click="submit">保存</el-button>
          <el-button @click="show=false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs, getCurrentInstance } from 'vue'
import {
  getMyOwnMemberInfo,
  editBankInfo
} from '@/api/system/userInfo.js'
const { proxy } = getCurrentInstance()
const show = ref(false)
const data = reactive({
  form: {},
  rules: {
    bankAccount: [{ required: true, trigger: 'blur', message: '请输入账号' }],
    bankName: [{ required: true, trigger: 'blur', message: '请输入开户行' }],
    bankAccountName: [{ required: true, trigger: 'blur', message: '请输入银行账号' }],
    bankAccountExam: [{ required: true, trigger: 'blur', message: '请输入账号' }],
    bankNameExam: [{ required: true, trigger: 'blur', message: '请输入开户行' }],
    invoiceHeader: [{ required: true, trigger: 'blur', message: '请输入抬头名称' }],
    invoiceTaxNumber: [{ required: true, trigger: 'blur', message: '请输入单位税号' }]
  }
})
const { form, rules } = toRefs(data)

initData()
async function initData() {
  const res = await getMyOwnMemberInfo()
  form.value = res.data.memberInfo
}

function submit(row) {
  proxy.$refs['formRef'].validate(async(valid) => {
    if (valid) {
      const res = await editBankInfo({
        bankAccount: form.value.bankAccount,
        bankName: form.value.bankName,
        bankAccountName: form.value.bankAccountName,
        memId: form.value.memId,
        bankAccountNameExam: form.value.bankAccountNameExam,
        bankAccountExam: form.value.bankAccountExam,
        bankNameExam: form.value.bankNameExam,
        invoiceHeader: form.value.invoiceHeader,
        invoiceTaxNumber: form.value.invoiceTaxNumber,
        invoiceRegAddress: form.value.invoiceRegAddress,
        invoicePhone: form.value.invoicePhone,
        invoiceBank: form.value.invoiceBank,
        invoiceBankAccount: form.value.invoiceBankAccount
      })
      if (res.code == 200) {
        proxy.$message.success('保存成功')
        show.value = false
        initData()
      }
    } else {
      proxy.$modal.msgError('请完善信息')
    }
  })
}
</script>

<style scope lang="scss">
.box {
  padding-left: 20px;
}

.form-center {
  margin-left: 200px;
}
</style>