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.bankAccountTypeLabel"
						@click="bankAccountTypeShow = true" />
				</u-form-item>
				<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 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 confirm-color="#EF9944" v-model="bankTypeShow" :list="bankTypeList" @confirm="bankTypeConfirm"></u-select>
		<u-select confirm-color="#EF9944" v-model="bankAccountTypeShow" :list="bankAccountTypeList" @confirm="bankAccountTypeConfirm">
		</u-select>
		
		<toast ref="toast" ></toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				//银行类型
				bankTypeShow: false,
				bankTypeList: [],
				//账户类型
				bankAccountTypeShow: false,
				bankAccountTypeList: [],
				//银行对象
				bankModel: {
					userId: '',
					userType: '商户',
					cardNo: '',
					bankType: '',
					bankTypeLabel: '',
					bankAccountType: '',
					bankAccountTypeLabel: ''
				},
			}
		},
		onLoad(options) {
			this.id = options.id
			this.init()
		},
		methods: {
			async init() {
				this.bankModel.userId = this.vuex_shopId
				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 params = {
					code: 'bank_type',
					size: 9
				}
				let res = await this.$api.dict.dictionaryPage(params)
				let list = res.data.records
				list.shift()
				list.forEach(item => {
					let obj = {
						label: JSON.parse(item.dictValue).name,
						value: item.dictKey
					}
					this.bankTypeList.push(obj)
				})
				this.bankModel.bankTypeLabel = this.bankTypeList[0].label
				this.bankModel.bankType = this.bankTypeList[0].value
			},
			async getBankAccountType() {
				let res = await this.$api.dict.list({
					code: 'bank_account_type'
				})
				res.data.forEach(item => {
					let obj = {
						label: item.dictValue,
						value: item.dictKey
					}
					this.bankAccountTypeList.push(obj)
					this.bankModel.bankAccountType = this.bankAccountTypeList[0].value
					this.bankModel.bankAccountTypeLabel = this.bankAccountTypeList[0].label
				})
			},
			//字典 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
			},
			async confirm() {
			 	if (this.$isEmpty(this.bankModel.bankType)) {
					this.$refs.toast.warn('请选择银行类型')
					return
				}
				if (this.$isEmpty(this.bankModel.bankAccountType)) {
					this.$refs.toast.warn('请选择账户类型')
					return
				}
				if (this.$isEmpty(this.bankModel.cardNo)) {
					this.$refs.toast.warn('请输入银行卡号')
					return
				}
				let model = {
					merchantNo: this.vuex_merchantNo,
					bankCardType: this.bankModel.bankAccountType,
					accountNo: this.bankModel.cardNo,
					bankCode: this.bankModel.bankType
				}
				let res=await this.$api.yeepay.withdrawCardBind(model)
				let result=JSON.parse(res.data.result)
				if (this.$isEmpty(result.bindId)) {
					this.$refs.toast.error(result.returnMsg)
					return
				}
				this.$dialog.showModalAndBack('操作成功')
			},
		}
	}
</script>

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