<template> <div class="bank"> <van-cell-group> <van-field v-model="form.bankName" label="所属银行" right-icon="arrow" placeholder="请选择" size="large" readonly /> <van-field v-model="form.cardNumber" type="number" label="银行卡卡号" placeholder="请输入" size="large" /> <van-field v-model="form.name" label="姓名" placeholder="请输入" size="large" /> </van-cell-group> <van-button type="primary" block class="btn" size="large" @click="addAndEditBankInfo" >编辑</van-button > </div> </template> <script> import { getUserBankInfo, addUserBankInfo, editUserBankInfo } from "@/api/bank"; export default { name: "Bank", data() { return { form: { bankName: "", cardNumber: "", name: "", id: "" } }; }, mounted() { this.getBankInfo(); }, methods: { addAndEditBankInfo() { const params = this.form; if (this.form.id) { editUserBankInfo(params) .then(res => { if (res.code === 0) { this.$toast.success("编辑成功"); } else { this.$toast.fail("编辑失败"); } }) .catch(error => { this.$toast.fail( error.response.data.error + error.response.data.message ); }); } else { addUserBankInfo() .then(res => { if (res.code === 0) { this.$toast.success("添加成功"); } else { this.$toast.fail("添加失败"); } }) .catch(error => { this.$toast.fail( error.response.data.error + error.response.data.message ); }); } }, getBankInfo() { const params = { userId: this.$userId }; getUserBankInfo(params).then(res => { if (res.code === 0) { this.form = res.data; } }); } } }; </script> <style lang="scss" scoped> .bank { padding: 10px 16px; } .van-cell-group { border-radius: 4px; } .btn { margin-top: 20px; } ::v-deep .van-field__control { text-align: right; } </style>