odd_job_applet/pages/agent/agentform.vue

<template>
	<view>
		
		<image class="echo-agentformpic" mode="widthFix" :src="param.agentformpic"></image>
		
		<view class="padding-xl"></view>
		<view class="cu-bar bg-white tabbar border shop foot">
			<view class="btn-group">
				<button class="cu-btn bg-red round shadow-blur" @tap="tabModal" style="width: 80%;">立即申请成为代理</button>
			</view>
		</view>
		
		<view class="cu-modal" :class="showform">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">申请成为代理</view>
					<view class="action" @tap="tabModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding bg-white margin-top-xs echo-agentform">
					<form>
						<view class="cu-form-group">
							<view class="title">姓名</view>
							<input placeholder="请输入姓名" @input="bindInput" data-val="realname" :value="forminfo.realname"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">手机号</view>
							<input placeholder="请输入手机号" @input="bindInput" data-val="mobile" :value="forminfo.mobile"></input>
						</view>	
						<view class="cu-form-group">
							<view class="title">当前住址</view>
							<input placeholder="请输入当前住址" @input="bindInput" data-val="address" :value="forminfo.address"></input>
						</view>	
						<view class="cu-form-group">
							<view class="title">身份证号</view>
							<input placeholder="请输入身份证号" @input="bindInput" data-val="idcard" :value="forminfo.idcard"></input>
						</view>	
						<view class="cu-form-group solids-bottom">
							<view class="title">推荐人</view>
							<input placeholder="请输入推荐人" @input="bindInput" data-val="recommender" :value="forminfo.recommender"></input>
						</view>	
						<view class="padding-lr padding-top flex flex-direction">
							<button class="cu-btn bg-orange margin-tb-sm lg" @tap="regBroker">确认提交</button>
						</view>
					</form>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				showform: '',
				param: {},
				isRotate: false,
				forminfo: {
					realname: "",
					mobile: "",
					address: "",
					idcard: "",
					recommender: ""
				}
			};
		},
		onLoad: function(){ 
			_this = this;
			_this.$req.ajax({
				path: "agent/pageform",
				data: {}
			}).then((data) => {
				_this.param = data.param;
			}).catch((err) => {
				uni.showModal({
					title: '信息提示',
					content: err,
					showCancel: false
				});
			});
		},
		methods: {
			regBroker: function() {
				if(_this.isRotate){
					return false;
				}
				_this.isRotate = true;
				_this.$req.ajax({
					path: "agent/regagent",
					data: {
						realname: _this.forminfo.realname,
						mobile: _this.forminfo.mobile,
						address: _this.forminfo.address,
						idcard: _this.forminfo.idcard,
						recommender: _this.forminfo.recommender
					}
				}).then((data) => {
					uni.showModal({
						title: '信息提示',
						content: "注册申请提交成功，请耐心等待。",
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								_this.forminfo = {
									realname: "",
									mobile: "",
									address: "",
									idcard: "",
									recommender: ""
								};
								_this.tabModal();
							}
						}
					});
					_this.isRotate = false;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
					_this.isRotate = false;
				});
			},
			
			bindInput: function(e) {
				var dataval = e.currentTarget.dataset.val;
				_this.forminfo[dataval] = e.detail.value;
			},
			tabModal: function() {
				_this.showform = _this.showform=="show" ? "" : "show";
			}
		}
	}
</script>

<style>
	.echo-agentformpic{ width: 100%; display: block; }
	.echo-agentform view.title{ text-align: left !important; width: 30%; }
	.echo-agentform input{ text-align: left !important; width: 70%; }
</style>