| | |
| | | <template> |
| | | <div class="bank_card_page"> |
| | | <van-nav-bar :placeholder="true" :safe-area-inset-top="true" :title="$t('hj247')" left-arrow |
| | | @click-left="$router.go(-1)"> |
| | | <van-nav-bar |
| | | :placeholder="true" |
| | | :safe-area-inset-top="true" |
| | | :title="$t('hj247')" |
| | | left-arrow |
| | | @click-left="$router.go(-1)" |
| | | > |
| | | </van-nav-bar> |
| | | <div class="content"> |
| | | <div class="bank"> |
| | | <!-- <van-swipe-cell v-for="(item, index) in banklist" :key="index" :right-width="65" @close="onClose"> --> |
| | | <van-swipe-cell v-for="(item, index) in banklist" :key="index" :right-width="65"> |
| | | <div class="bank_name" @click="openEditDialog(item)"> |
| | | <van-swipe-cell |
| | | v-for="(item, index) in banklist" |
| | | :key="index" |
| | | :right-width="65" |
| | | > |
| | | <div |
| | | class="bank_name" |
| | | @click="openEditDialog(item)" |
| | | style="background-color: #777;" |
| | | > |
| | | <!-- <div class="bank_name" @click="goBankcard(item)"> --> |
| | | <div class="lefts">{{ item.bankName }}</div> |
| | | <div class="rights">{{ item.bankNo }}</div> |
| | | <van-button square class="delete-btn" type="danger" :text="$t('删除')" |
| | | @click.stop="deleteBank(item, index)" /> |
| | | <van-button |
| | | square |
| | | class="delete-btn" |
| | | type="danger" |
| | | :text="$t('删除')" |
| | | @click.stop="deleteBank(item, index)" |
| | | /> |
| | | </div> |
| | | <!-- <template #right> |
| | | <van-button square class="delete-btn" type="danger" :text="$t('删除')" @click="deleteBank(item, index)" /> |
| | |
| | | <div class="bank_name"> |
| | | <!-- <div class="bank_box" @click="$router.push('/bankcard')"> --> |
| | | <div class="bank_box" @click="openEditDialog()"> |
| | | {{ $t("hj220").substring(0, 2) }}{{ $t("hj247") }} |
| | | {{ $t("abc") }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <!-- 编辑银行卡弹窗 --> |
| | | <van-popup v-model="showEditDialog" position="center" round> |
| | | <div class="edit-popup"> |
| | | <div class="edit-title">{{ !this.editForm.id ? $t('hj211') : $t('hj212') }}</div> |
| | | <div class="division"></div> |
| | | <div class="edit-form"> |
| | | <div class="form-item"> |
| | | <div class="form-label"><span class="required">*</span>{{ $t('hj213') }}</div> |
| | | <input type="text" v-model="editForm.bankName" :placeholder="$t('hj213')" class="form-input" /> |
| | | </div> |
| | | <div class="form-item"> |
| | | <div class="form-label"><span class="required">*</span>{{ $t('hj215') }}</div> |
| | | <input type="text" v-model="editForm.bankNo" :placeholder="$t('hj215')" class="form-input" /> |
| | | </div> |
| | | <div class="form-item" v-if="!editForm.id"> |
| | | <div class="form-label"><span class="required">*</span>{{ $t('银行卡户主名称') }}</div> |
| | | <input type="text" v-model="editForm.bankCardholderName" :placeholder="$t('银行卡户主名称')" class="form-input" /> |
| | | </div> |
| | | <div class="edit-title"> |
| | | {{ !this.editForm.id ? $t("hj211") : $t("hj212") }} |
| | | </div> |
| | | <div class="division"></div> |
| | | |
| | | <div class="edit-form"> |
| | | <div class="form-item"> |
| | | <div class="form-label"> |
| | | <span class="required">*</span>{{ $t("hj213") }} |
| | | </div> |
| | | <input |
| | | type="text" |
| | | v-model="editForm.bankName" |
| | | :placeholder="$t('hj213')" |
| | | class="form-input" |
| | | /> |
| | | </div> |
| | | <div class="form-item"> |
| | | <div class="form-label"> |
| | | <span class="required">*</span>{{ $t("hj215") }} |
| | | </div> |
| | | <input |
| | | type="text" |
| | | v-model="editForm.bankNo" |
| | | :placeholder="$t('hj215')" |
| | | class="form-input" |
| | | /> |
| | | </div> |
| | | <div class="form-item" v-if="!editForm.id"> |
| | | <div class="form-label"> |
| | | <span class="required">*</span>{{ $t("银行卡户主名称") }} |
| | | </div> |
| | | <input |
| | | type="text" |
| | | v-model="editForm.bankCardholderName" |
| | | :placeholder="$t('银行卡户主名称')" |
| | | class="form-input" |
| | | /> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="division"></div> |
| | | <div class="edit-buttons"> |
| | | <div class="cancel-btn" @click="showEditDialog = false">{{ $t('qx') }}</div> |
| | | <div class="save-btn" @click="saveEdit">{{ $t('qr') }}</div> |
| | | <div class="cancel-btn" @click="showEditDialog = false"> |
| | | {{ $t("qx") }} |
| | | </div> |
| | | <div class="save-btn" @click="saveEdit">{{ $t("qr") }}</div> |
| | | </div> |
| | | </div> |
| | | </van-popup> |
| | |
| | | <script> |
| | | import * as api from "@/axios/api"; |
| | | // import { Toast } from "mint-ui"; |
| | | import { Toast, Dialog } from 'vant'; |
| | | import { Toast, Dialog } from "vant"; |
| | | import { isNull, bankNoReg, isName } from "@/utils/utils"; |
| | | |
| | | export default { |
| | |
| | | bankName: "", |
| | | bankNo: "", |
| | | bankCardholderName: "", |
| | | id: "", |
| | | id: "" |
| | | } |
| | | } |
| | | }; |
| | | }, |
| | | created() { |
| | | this.getCardDetail(); |
| | |
| | | openEditDialog(item) { |
| | | if (!item) { |
| | | this.editForm = { |
| | | bankName: '', |
| | | bankNo: '', |
| | | bankCardholderName: "", // 如果没有持卡人信息,设置为空字符串 |
| | | } |
| | | bankName: "", |
| | | bankNo: "", |
| | | bankCardholderName: "" // 如果没有持卡人信息,设置为空字符串 |
| | | }; |
| | | } else { |
| | | this.editForm = { |
| | | bankName: item.bankName, |
| | | bankNo: item.bankNo, |
| | | bankCardholderName: item.bankCardholderName || "", // 如果没有持卡人信息,设置为空字符串 |
| | | id: item.id, |
| | | id: item.id |
| | | }; |
| | | } |
| | | this.showEditDialog = true; |
| | |
| | | Toast(this.$t("hj218")); |
| | | } else if (isNull(this.editForm.bankNo)) { |
| | | Toast(this.$t("hj217")); |
| | | } else if (isNull(this.editForm.bankCardholderName) && !this.editForm.id) { |
| | | } else if ( |
| | | isNull(this.editForm.bankCardholderName) && |
| | | !this.editForm.id |
| | | ) { |
| | | Toast(this.$t("hj316")); |
| | | } |
| | | else { |
| | | } else { |
| | | let opts = { |
| | | bankName: this.editForm.bankName, |
| | | bankNo: this.editForm.bankNo, |
| | |
| | | }, |
| | | deleteBank(item, index) { |
| | | Dialog.confirm({ |
| | | title: this.$t('删除') + '?', |
| | | confirmButtonText: this.$t('qr'), |
| | | cancelButtonText: this.$t('qx'), |
| | | title: this.$t("删除") + "?", |
| | | confirmButtonText: this.$t("qr"), |
| | | cancelButtonText: this.$t("qx") |
| | | }).then(async () => { |
| | | // 调用删除接口 |
| | | let res = await api.deleteBankCard({ id: item.id }); |
| | |
| | | } else { |
| | | Toast(res.msg); |
| | | } |
| | | }) |
| | | |
| | | }); |
| | | }, |
| | | goBankcard(item) { |
| | | // 跳转修改银行卡 |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="less"> |
| | | @green: #c4d600; |
| | | @green: #287dff; |
| | | |
| | | .bank_box { |
| | | width: 100%; |
| | |
| | | .bank_card_page { |
| | | width: 100%; |
| | | height: 100%; |
| | | background: #fff; |
| | | // background: #fff; |
| | | |
| | | .content { |
| | | width: 100%; |
| | |
| | | width: 100%; |
| | | height: 2rem; |
| | | |
| | | >div { |
| | | > div { |
| | | width: 10%; |
| | | height: 100%; |
| | | display: flex; |
| | |
| | | width: 100%; |
| | | height: 1.5rem; |
| | | display: flex; |
| | | padding: 0 0 0 .2rem; |
| | | background: rgb(247, 247, 247); |
| | | padding: 0 0 0 0.2rem; |
| | | background: @green; |
| | | border-radius: 0.2rem; |
| | | margin-top: 0.3rem; |
| | | |
| | |
| | | |
| | | /* 编辑弹窗样式 */ |
| | | /deep/ .van-popup { |
| | | border-radius: .5rem !important; |
| | | border-radius: 0.5rem !important; |
| | | } |
| | | |
| | | .edit-popup { |
| | | width: 100%; |
| | | padding: .25rem 0; |
| | | padding: 0.25rem 0; |
| | | box-sizing: border-box; |
| | | |
| | | .division { |
| | |
| | | |
| | | .edit-title { |
| | | text-align: center; |
| | | font-size: .45rem; |
| | | font-size: 0.45rem; |
| | | font-weight: 700; |
| | | padding: .25rem; |
| | | padding: 0.25rem; |
| | | color: #333; |
| | | } |
| | | |
| | | .edit-form { |
| | | padding: .25rem; |
| | | padding: 0.25rem; |
| | | } |
| | | |
| | | .form-item { |
| | | // margin-bottom: 15px; |
| | | border-bottom: 1px solid #f5f5f5; |
| | | padding: .35rem 0 .25rem; |
| | | padding: 0.35rem 0 0.25rem; |
| | | } |
| | | |
| | | .form-label { |
| | | font-size: .4rem; |
| | | margin-bottom: .2rem; |
| | | font-size: 0.4rem; |
| | | margin-bottom: 0.2rem; |
| | | color: #333; |
| | | } |
| | | |
| | |
| | | border: 1px solid #ccc; |
| | | border-radius: 4px; |
| | | padding: 0 10px; |
| | | font-size: .3rem; |
| | | font-size: 0.3rem; |
| | | box-sizing: border-box; |
| | | color: #333; |
| | | } |
| | | |
| | | .edit-buttons { |