326 lines
7.0 KiB
Vue
326 lines
7.0 KiB
Vue
<script setup>
|
|
// 添加银行卡
|
|
import {
|
|
ref,
|
|
reactive,
|
|
computed,
|
|
getCurrentInstance,
|
|
} from 'vue'
|
|
import {
|
|
useStore
|
|
} from 'vuex'
|
|
import {
|
|
onLoad,
|
|
} from '@dcloudio/uni-app'
|
|
// 工具库
|
|
import util from '@/common/js/util.js'
|
|
// api
|
|
import api from '@/api/index.js'
|
|
// 获取验证码
|
|
import getCode from '@/components/getCode/getCode'
|
|
//
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance()
|
|
// 银行搜索
|
|
const bankSearch = ref('')
|
|
// 银行卡列表
|
|
const bankList = reactive([])
|
|
// 银行卡类型列表
|
|
const bankTypeList = reactive([])
|
|
// 银行卡类型下标
|
|
const bankTypeIndex = ref('')
|
|
// 表单对象
|
|
const form = reactive({
|
|
bankName: '',
|
|
cardType: '',
|
|
cardNumber: '',
|
|
phoneNumber: '',
|
|
userIdCard: '',
|
|
userRealName: '',
|
|
})
|
|
|
|
onLoad(() => {
|
|
// 获取字典
|
|
getBankList()
|
|
// 获取银行卡类型
|
|
getBankTypes()
|
|
})
|
|
|
|
// 获取银行卡
|
|
function getBankList() {
|
|
api.getDicFuzzy({
|
|
path: ['bank_type'],
|
|
query: {
|
|
dictLabel: bankSearch.value,
|
|
}
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
bankList.length = 0
|
|
bankList.push(...rs.data)
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
}
|
|
|
|
// 获取银行卡类型
|
|
function getBankTypes() {
|
|
api.getDict({
|
|
path: ['card_type'],
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
bankTypeList.length = 0
|
|
bankTypeList.push(...rs.data.map(item => {
|
|
// 转大写
|
|
item.dictValue = item.dictValue.toUpperCase()
|
|
return item
|
|
}))
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 选择银行
|
|
* @param {Object} item 银行列表项
|
|
*/
|
|
function handleSelectBank(item) {
|
|
if (form.bankName === item.bankName) return
|
|
form.bankName = item.dictLabel
|
|
proxy.$refs.bankRef.close()
|
|
}
|
|
|
|
/**
|
|
* @param {Object} event
|
|
*/
|
|
function handleBankTypeIndex(event) {
|
|
const index = event.detail.value
|
|
if (bankTypeIndex.value === index) return
|
|
bankTypeIndex.value = index
|
|
}
|
|
|
|
// 绑定
|
|
function handleSubmit() {
|
|
const data = {
|
|
...form
|
|
}
|
|
|
|
//
|
|
if (!data.bankName) {
|
|
util.alert('银行卡名称不能为空')
|
|
return
|
|
}
|
|
if (bankTypeIndex.value === '') {
|
|
util.alert('银行卡类型不能为空')
|
|
return
|
|
}
|
|
if (!data.phoneNumber) {
|
|
util.alert('手机号不能为空')
|
|
return
|
|
}
|
|
if (!data.userIdCard) {
|
|
util.alert('身份证号不能为空')
|
|
return
|
|
}
|
|
if (!data.cardNumber) {
|
|
util.alert('用户手机号不能为空')
|
|
return
|
|
}
|
|
if (!data.userRealName) {
|
|
util.alert('真实姓名不能为空')
|
|
return
|
|
}
|
|
//
|
|
data.cardType = bankTypeList[bankTypeIndex.value].dictValue
|
|
|
|
//
|
|
api.mine.addBankCard({
|
|
data,
|
|
}).then(rs => {
|
|
if (rs.code == 200) {
|
|
uni.$emit('updateBindingBank')
|
|
util.alert('添加成功')
|
|
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 500)
|
|
return
|
|
}
|
|
util.alert({
|
|
content: rs.msg,
|
|
showCancel: false,
|
|
})
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="appbw">
|
|
<!-- 表单 -->
|
|
<view class="form mtb30 mlr40">
|
|
<view class="line" @click="$refs.bankRef.open()">
|
|
<view class="title">银行名称</view>
|
|
<view class="inputBox rows">
|
|
<view class="f1" v-if="form.bankName">{{form.bankName}}</view>
|
|
<view class="placeholderStyle f1" v-else>请选择银行名称</view>
|
|
<uni-icons type="bottom" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="line">
|
|
<view class="title">银行卡类型</view>
|
|
<view class="inputBox">
|
|
<picker :range="bankTypeList" range-key="dictLabel" @change="handleBankTypeIndex">
|
|
<view class="rows">
|
|
<view class="f1" v-if="bankTypeIndex!==''">{{bankTypeList[bankTypeIndex].dictLabel}}</view>
|
|
<view class="placeholderStyle f1" v-else>请选择银行名称</view>
|
|
<uni-icons type="bottom" />
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="line">
|
|
<view class="title">银行卡卡号</view>
|
|
<view class="inputBox">
|
|
<input class="input" v-model="form.cardNumber" type="text" placeholder="请输入银行卡卡号"
|
|
placeholder-class="placeholderStyle" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="line">
|
|
<view class="title">姓名</view>
|
|
<view class="inputBox">
|
|
<input class="input" v-model="form.userRealName" type="text" placeholder="请输入姓名"
|
|
placeholder-class="placeholderStyle" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="line">
|
|
<view class="title">身份证号</view>
|
|
<view class="inputBox">
|
|
<input class="input" v-model="form.userIdCard" type="text" placeholder="请输入身份证号"
|
|
placeholder-class="placeholderStyle" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="line">
|
|
<view class="title">手机号（银行绑定的手机号）</view>
|
|
<view class="inputBox">
|
|
<input class="input" v-model="form.phoneNumber" type="text" placeholder="请输入手机号"
|
|
placeholder-class="placeholderStyle" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <view class="line">
|
|
<view class="title">验证码</view>
|
|
<view class="inputBox rows">
|
|
<input class="input" type="text" placeholder="请输入验证码" />
|
|
<view class="getCode btn black plr30">
|
|
<getCode />
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- 温馨提示 -->
|
|
<view class="notice ptb20 plr30 br20">
|
|
<view class="key">温馨提示</view>
|
|
<view class="content mt15 c333 f28">
|
|
<view>为保证账户资金安全，请仔细核对好填写信息，在点击绑定</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="btn lg black mt50" @click="handleSubmit">绑定</view>
|
|
</view>
|
|
|
|
<view class="fill"></view>
|
|
</view>
|
|
|
|
<!-- 搜索银行卡 -->
|
|
<uni-popup ref="bankRef" type="bottom">
|
|
<view class="selectionBox ptb20 plr20 bfff c999 f28">
|
|
<view class="title c333 f34 tac">选择银行卡</view>
|
|
|
|
<!-- 可选的列表 -->
|
|
<view class="mt20">
|
|
<scroll-view scroll-y="true" class="scroll">
|
|
<view class="selection">
|
|
<view class="option df aic" v-for="(item,index) in bankList" :key="index"
|
|
@click="handleSelectBank(item,index)" :class="{'active': item.dictLabel === form.bankName}">
|
|
<text class="thd f1">{{item.dictLabel}}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- -->
|
|
<view class="inputBox rows mt20 ptb10 plr20 br20">
|
|
<input class="f1" type="text" v-model="bankSearch" placeholder="输入你想选择的用户" />
|
|
<view class="" @click="getBankList">搜索</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
// 图表
|
|
.form {
|
|
|
|
//
|
|
.line {
|
|
margin: 30rpx 0;
|
|
|
|
//
|
|
.title {
|
|
color: #111;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
//
|
|
.inputBox {
|
|
margin-top: 15rpx;
|
|
padding: 10rpx 30rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 菜单选择列表
|
|
.selectionBox {
|
|
.scroll {
|
|
height: 800rpx;
|
|
|
|
.option {
|
|
box-sizing: border-box;
|
|
height: 60rpx;
|
|
border-bottom: 1rpx solid #E5E5E5;
|
|
|
|
// 被选择的
|
|
&.active {
|
|
background-color: #E5E5E5;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
.editBox {
|
|
background-color: #F4F4F4;
|
|
}
|
|
}
|
|
|
|
//
|
|
.notice {
|
|
background-color: #ff888844;
|
|
|
|
.content {
|
|
color: #aa3333;
|
|
}
|
|
}
|
|
</style> |