guosen-ldt-client/pagesB/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>{{salesmanId}}</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="model.agentArea" 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="bankModel.phone" 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>
		<toast ref="toast" ></toast>
		<login ref="login"  @signIn="signIn"></login>
	</view>
</template>

<script>
	import login from "@/components/login.vue"
	import citySelect from '../../comps/u-city-select.vue';
	export default {
		components: {
			login,
			citySelect
		},
		data() {
			return {
				//代理城市
				regionShow: false,
				params: {
					province: true,
					city: true,
					area: false
				},
				//银行类型
				bankTypeShow:false,
				bankTypeList:[],
				//账户类型
				bankAccountTypeShow:false,
				bankAccountTypeList:[],
				//原始对象
				originalModel:{},
				originalBankModel:{},
				model:{
					accountId:'',
					agentType:'代理商',
					agentArea:'',
					areaCode:'',
					enabled:0,//是否启用0
					salesmanId:''
				},
				//银行对象
				bankModel:{
					userId:'',
					userType:'用户',
					cardNo:'',
					realName:'',
					phone:'',
					bankType:'',
					bankTypeLabel:'',
					bankAccountType:'',
					bankAccountTypeLabel:''
				},
			}
		},
		onLoad() {
			this.init()
		},
		onShow() {
			this.login()
		},
		computed:{
			salesmanId(){
				if (this.$isNotEmpty(this.model.salesmanId)) {
					return this.model.salesmanId
				}
				
				if (this.$cache.get('salesmanId')) {
					return this.$cache.get('salesmanId')
				}
				return '暂无'
			}
		},
		methods: {
			async init(){
				if (this.$cache.get('salesmanId')) {
					this.model.salesmanId=this.$cache.get('salesmanId')
				}
				this.model.accountId=this.vuex_userId
				
				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 || '-1'
				}
				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={
					accountId:this.vuex_userId || '-1'
				}
				this.$api.agenter.list(params).then(res=>{
					if (this.$isNotEmpty(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 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
			},
			getRegion(e) {
				this.model.agentArea = e.province.label + '-' + e.city.label
				this.model.areaCode=e.province.value+"0000,"+e.city.value+"00"
			},
			confirm() {
				if (this.$isEmpty(this.vuex_userId)) {
					this.showLogin()
					return
				}
				if (this.$isEmpty(this.bankModel.phone)) {
					this.$refs.toast.warn('请输入联系方式')
					return
				}
				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.realName)) {
					this.$refs.toast.warn('请输入开户姓名')
					return
				}
				if (this.$isEmpty(this.bankModel.cardNo)) {
					this.$refs.toast.warn('请输入银行卡号')
					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: '/pagesB/pages/agent/pay'
							})
						}
					})
				}else{
					//没修改，直接跳转
					uni.navigateTo({
						url: '/pagesB/pages/agent/pay'
					})
				}
			},
			// 登录 begin
			showLogin(){
				this.$refs.login.show()
			},
			showPhoneModal(){
				this.$refs.login.showPhoneModal()
			},
			signIn(resp){
				//获取手机号
				if (this.$isEmpty(this.vuex_phone)) {
					this.showPhoneModal()
				}else{
					this.$refs.toast.info('登录成功')
				}
				//获取数据
				this.init()
			},
			async login(e){
				if (this.$isEmpty(this.vuex_userId)) {
					this.showLogin()
					return
				}
				//获取数据
				this.init()
				//获取手机号
				if (this.$isEmpty(this.vuex_phone)) {
					this.showPhoneModal()
				}
			},
			// 登录 end
		}
	}
</script>

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