guosen-ldt-shop/pages/userBank/add.vue

<template>
	<view>
		<view class="bg-white " style="padding: 0rpx 40rpx;margin-top: 30rpx;">
			<u-form :model="bankModel" ref="uForm" label-width="180">
					<u-form-item label="银行类型">
						<u-input type="select" placeholder="请选择银行类型" v-model="bankModel.bankTypeLabel" @click="bankTypeShow = true"/>
					</u-form-item>
					<u-form-item label="账户类型">
						<u-input type="select" placeholder="请选择账户类型" v-model="bankModel.bankAccountTypeLabel" @click="bankAccountTypeShow = true"/>
					</u-form-item>
					<u-form-item label="开户姓名">
						<u-input v-model="bankModel.realName" placeholder="请输入开户姓名"/>
					</u-form-item>
					<u-form-item label="联系方式">
						<u-input v-model="bankModel.phone" placeholder="请输入联系方式"/>
					</u-form-item>
					<u-form-item label="银行卡号">
						<u-input v-model="bankModel.cardNo" placeholder="请输入银行卡号" :clearable="false" />
					</u-form-item>
			</u-form>
		</view>
		<view class="footer-fixed" style="margin: 0 50rpx 200rpx;z-index: 9;">
			<view @click="confirm" class="bg-gradual-base cu-btn round" style="padding: 46rpx;width: calc(100% - 100rpx);">
				<text v-if="$isEmpty(id)">添加银行</text>
				<text v-else>确定修改</text>
			</view>
		</view>
		
		<u-select v-model="bankTypeShow" :default-value="bankTypeDefaultValue" :list="bankTypeList" @confirm="bankTypeConfirm"></u-select>
		<u-select v-model="bankAccountTypeShow" :default-value="bankAccountTypeDefaultValue" :list="bankAccountTypeList" @confirm="bankAccountTypeConfirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				//银行类型
				bankTypeShow:false,
				bankTypeList:[],
				//账户类型
				bankAccountTypeShow:false,
				bankAccountTypeList:[],
				//银行对象
				bankModel:{
					userId:'',
					userType:1,
					cardNo:'',
					realName:'',
					phone:'',
					bankType:'',
					bankTypeLabel:'',
					bankAccountType:'',
					bankAccountTypeLabel:''
				},
			}
		},
		onLoad(options) {
			this.id=options.id
			this.init()
		},
		methods: {
			async init(){
				this.bankModel.userId=this.vuex_shopId
				this.bankModel.phone=this.$cache.get('phone')
				
				await this.getBankType()
				await this.getBankAccountType()
				
				if (this.id) {
					uni.setNavigationBarTitle({
						title:"编辑银行卡"
					})
					this.fetchUserBank()
				}else{
					uni.setNavigationBarTitle({
						title:"添加银行卡"
					})
				}
			},
			//回显 begin
			fetchUserBank(){
				let params={
					id:this.id
				}
				this.$api.userBank.detail(params).then(res=>{
					if (!this.$isEmpty(res.data)) {
						this.bankModel=res.data
					}
				})
			},
			//字典 begin
			async getBankType() {
				let res = await this.$api.dict({code: 'bank_type'})
				res.data.forEach(item=>{
					let obj={
						label:item.dictValue,
						value:item.dictKey
					}
					this.bankTypeList.push(obj)
				})
			},
			async getBankAccountType() {
				let res = await this.$api.dict({code: 'bank_account_type'})
				res.data.forEach(item=>{
					let obj={
						label:item.dictValue,
						value:item.dictKey
					}
					this.bankAccountTypeList.push(obj)
				})
			},
			//字典 end
			bankTypeConfirm(e){
				this.bankModel.bankTypeLabel=e[0].label
				this.bankModel.bankType=e[0].value
			},
			bankAccountTypeConfirm(e){
				this.bankModel.bankAccountTypeLabel=e[0].label
				this.bankModel.bankAccountType=e[0].value
			},
			confirm() {
				if (this.$isEmpty(this.bankModel.phone)) {
					this.$u.toast('请输入联系方式')
					return
				}
				if (this.$isEmpty(this.bankModel.bankType)) {
					this.$u.toast('请选择银行类型')
					return
				}
				if (this.$isEmpty(this.bankModel.bankAccountType)) {
					this.$u.toast('请选择账户类型')
					return
				}
				if (this.$isEmpty(this.bankModel.realName)) {
					this.$u.toast('请输入开户姓名')
					return
				}
				if (this.$isEmpty(this.bankModel.cardNo)) {
					this.$u.toast('请输入银行卡号')
					return
				}
				this.$api.userBank.submit(this.bankModel).then(res=>{
					if (res.success) {
						this.$dialog.showModal('操作成功',false).then(()=>{
							uni.navigateBack()
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.custom-style {
		background-color: #5b3ee7;
		width: 400upx;
		color: #ffffff;
	}
</style>