guosen-ldt-client/pages/agent/agent.vue

<template>
	<view>
		<view class="container">
			<view class="title" style="padding: 50upx 0 30upx 30upx;">代理方式</view>
			<view style="padding:0 10rpx 36rpx;">
				<text class="cuIcon-title btn-color text-bold margin-left-10" style="font-size: 36rpx;"></text>
				<text>渠道合伙人</text>
			</view>
			<view class="title padding">所在城市</view>
			<u-picker mode="region" v-model="regionShow" :params="params" @confirm="getRegion"></u-picker>
			<view class="flex align-center justify-between" >
				<view class="padding-left padding-right" style="width: 100%;">
					<u-input type="select" v-model="region" placeholder="请选择代理所在城市" @click="regionShow = true"/>
				</view>
			</view>
			<view class="padding-lr"><u-line color="#eaeaea"></u-line></view>
			<view class="title padding">联系方式</view>
			<view class="padding-left">
				<u-input v-model="model.userPhone" placeholder="请输入手机号码" :clearable="false"/>
			</view>
			<view class="padding-lr"><u-line color="#eaeaea"></u-line></view>
			
			<view class="title padding">选择银行类型</view>
			<view class="flex align-center justify-between padding-bottom-sm" >
				<view class="padding-left padding-right" style="width: 100%;">
					<u-input type="select" placeholder="请选择银行类型" v-model="bankModel.bankTypeLabel" @click="bankTypeShow = true"/>
				</view>
			</view>
			
			<view class="title padding">选择账户类型</view>
			<view class="flex align-center justify-between padding-bottom-sm" >
				<view class="padding-left padding-right" style="width: 100%;">
					<u-input type="select" placeholder="请选择账户类型" v-model="bankModel.bankAccountTypeLabel" @click="bankAccountTypeShow = true"/>
				</view>
			</view>
			
			<view class="padding-lr"><u-line color="#eaeaea"></u-line></view>
			<view class="title padding">开户姓名</view>
			<view class="padding-left">
				<u-input v-model="bankModel.realName" placeholder="请输入开户姓名" :clearable="false" />
			</view>
			
			<view class="title padding" >银行卡号</view>
			<view class="padding-left padding-bottom-20">
				<u-input v-model="bankModel.cardNo" placeholder="请输入银行卡号" :clearable="false" />
			</view>
		</view>
		<view class="bottom-bar safe-area-inset-bottom margin-top-50 margin-bottom-20">
			<view @click="confirm" class="bg-gradual-base cu-btn round" style="width: 100%;padding: 46rpx;">
				下一步
			</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>
	import citySelect from '@/components/u-city-select.vue';
	export default {
		components: {
			citySelect
		},
		data() {
			return {
				//代理城市
				regionShow: false,
				region: '',
				params: {
					province: true,
					city: true,
					area: false
				},
				//银行类型
				bankTypeShow:false,
				bankTypeList:[],
				//账户类型
				bankAccountTypeShow:false,
				bankAccountTypeList:[],
				//原始对象
				originalModel:{},
				originalBankModel:{},
				model:{
					userId:'',
					userPhone:'',
					agenterTypeId:this.$global.agenterTypeId,
					enabled:-1,
					province:'',
					city:'',
				},
				//银行对象
				bankModel:{
					userId:'',
					userType:2,
					cardNo:'',
					realName:'',
					phone:'',
					bankType:'',
					bankTypeLabel:'',
					bankAccountType:'',
					bankAccountTypeLabel:''
				},
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			async init(){
				this.model.userId=this.vuex_userId
				this.model.userPhone=this.vuex_phone
				
				this.bankModel.userId=this.vuex_userId
				this.bankModel.phone=this.vuex_phone
				
				await this.getBankType()
				await this.getBankAccountType()
				
				this.fetchUserBank()
				this.fetchAgenter()
			},
			//回显 begin
			fetchUserBank(){
				let params={
					userId:this.vuex_userId
				}
				this.$api.userBank.list(params).then(res=>{
					if (!this.$isEmpty(res.data.records)) {
						this.originalBankModel=res.data.records[0]
						this.bankModel=res.data.records[0]
					}
				})
			},
			fetchAgenter(){
				let params={
					userId:this.vuex_userId
				}
				this.$api.agenter.list(params).then(res=>{
					if (!this.$isEmpty(res.data.records)) {
						this.originalModel=res.data.records[0]
						this.model=res.data.records[0]
						this.region=this.model.province + '-' + this.model.city
					}
				})
			},
			//字典 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
			},
			getRegion(data) {
				this.model.province=data.province.label
				this.model.city=data.city.label
				this.region = data.province.label + '-' + data.city.label;
			},
			confirm() {
				if (this.$isEmpty(this.model.userPhone)) {
					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
				}
				if (JSON.stringify(this.model)!=JSON.stringify(this.originalModel) &&
					JSON.stringify(this.bankModel)!=JSON.stringify(this.originalBankModel)) {
					//修改过，提交再跳转
					this.$api.userBank.submit(this.bankModel)
					this.$api.agenter.submit(this.model).then(res=>{
						if (res.success) {
							uni.navigateTo({
								url: '/pages/agent/pay'
							})
						}
					})
				}else{
					//没修改，直接跳转
					uni.navigateTo({
						url: '/pages/agent/pay'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #ffffff;
		border-radius: 16upx;
		margin: 30upx;
		.title {
			font-size: 32upx;
			font-weight: bold;
		}
	}
	.eg {
		color: #d1d1d1;
	}
	.custom-style {
		background-color: #5b3ee7;
		width: 400upx;
		color: #ffffff;
	}
</style>