mengyirong/pages/index/add.vue

<template>
	<view>
		<tn-nav-bar :bottomShadow="false" :fixed="true">
			<view slot="default" style="color: #000000;font-size: 16px;font-weight: 600;">孟易融</view>
		</tn-nav-bar>
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view style="padding: 30rpx;">
				<view style="background-color: #ffffff;padding:0rpx 30rpx;border-radius: 30rpx;">
					<tn-form>
						<tn-form-item label="姓名">
							<tn-input v-model="formData.name" :clearable="false" inputAlign="right"
								placeholder="请输入姓名" />
						</tn-form-item>
						<tn-form-item label="联系方式" :labelWidth="135">
							<tn-input v-model="formData.mobile" :clearable="false" inputAlign="right"
								placeholder="请输入联系方式" />
						</tn-form-item>
						<tn-form-item label="身份证" :labelWidth="115">
							<tn-input v-model="formData.idcard_no" :clearable="false" inputAlign="right"
								placeholder="请输入身份证" />
						</tn-form-item>
						<tn-form-item label="融资申请金额(万元)" :labelWidth="280">
							<tn-input v-model="formData.amount" :clearable="false" inputAlign="right"
								placeholder="请输入申请金额(5-2000万)" />
						</tn-form-item>
						<tn-form-item label="选择营业范围" :labelWidth="195">
							<view @click="scopeShow = true" style="text-align: right;width: 100%;color: #666666">
								<text>{{scopeName}}</text>
								<text class="tn-icon-right"></text>
							</view>
						</tn-form-item>
						<tn-form-item label="所属村镇" :borderBottom="false" :labelWidth="135">
							<view @click="townsShow = true" style="text-align: right;width: 100%;color: #666666">
								<text>{{townsName}}</text>
								<text class="tn-icon-right"></text>
							</view>
						</tn-form-item>
					</tn-form>
				</view>
			</view>
			<view class="bottomD" :style="{width:w}">
				<tn-button @click="submitDo" width="90%" height="90rpx" shape="round" backgroundColor="#5AC26F"
					fontColor="tn-color-white">提交</tn-button>
			</view>
		</view>
		<tn-select v-model="scopeShow" mode="single" :list="list" @confirm="scopeConfirm"></tn-select>
		<tn-select v-model="townsShow" mode="multi-auto" valueName="id" labelName="name" :list="townsList"
			@confirm="townsConfirm"></tn-select>
	</view>
</template>

<script>
	import {
		getArea,
		purpostAdd
	} from '@/utils/api.js'
	import data from '@/utils/scope.js'; // 引入数据文件
	export default {
		data() {
			return {
				scopeShow: false,
				scopeName: '请选择',
				townsShow: false,
				townsName: '请选择',
				list: data.data,
				townsList: [],
				formData: {
					name: '',
					mobile: '',
					idcard_no: '',
					address: '',
					amount: '',
					business_type: '',
				},
				w: '100%'
			}
		},
		onLoad() {
			const userAgent = navigator.userAgent.toLowerCase();
			if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)) {
				// 移动端
				this.w = '100%';
			} else {
				// pc端
				this.w = '828rpx';
			}
			this.getAreaList();
		},
		methods: {
			submitDo() {
				if (this.formData.name == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写姓名！',
						duration: 2000
					});
					return;
				}
				if (this.formData.mobile == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写手机号',
						duration: 2000
					});
					return;
				}
				if (this.formData.idcard_no == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写身份证号!',
						duration: 2000
					});
					return;
				}
				if (this.formData.address == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择所在村镇!',
						duration: 2000
					});
					return;
				}
				if (this.formData.amount == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写申请金额!',
						duration: 2000
					});
					return;
				}
				if (this.formData.business_type == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择经营行业!',
						duration: 2000
					});
					return;
				}
				purpostAdd(this.formData)
					.then(res => {
						console.log(res);
						if (res.code == 0) {
							uni.showToast({
								icon: 'none',
								title: '提交成功！',
								duration: 2000
							});
							this.formData = {
								name: '',
								mobile: '',
								idcard_no: '',
								address: '',
								amount: '',
								business_type: '',
							};
							this.scopeName = '请选择';
							this.townsName = '请选择';
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
								duration: 2000
							});
						}
					})
					.catch(error => {
						uni.showToast({
							icon: 'none',
							title: error,
							duration: 2000
						});
					})
			},
			getAreaList() {
				getArea({
						pid: 1563,
						disp: true
					})
					.then(res => {
						console.log(res);
						this.townsList = res.data;
					})
					.catch(error => {
						uni.showToast({
							icon: 'none',
							title: error,
							duration: 2000
						});
					})
			},
			scopeConfirm(d) {
				var info = d[0];
				this.scopeName = info.label;
				this.formData.business_type = info.label;
			},
			townsConfirm(d) {
				console.log(d);
				this.townsName = d[1].label + '/' + d[2].label;
				this.formData.address = d[1].label + '/' + d[2].label;
			},
		}
	}
</script>

<style scoped>
	.bottomD {
		text-align: center;
		line-height: 160rpx;
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(186, 189, 199, 0.2);
		height: 160rpx;
	}
</style>