cxhxy/addons/food/uni_app/pages/user/address/add.vue

<template>
	<view>
		<view class="hm-header-xian"></view>
		<view class="hm-p-20 hm-bg-f">
			<u--form labelPosition="left" :rules="rules" :model="formData" ref="form">
				<u-form-item label="收货人" prop="name" labelWidth="80" borderBottom>
					<u--input v-model="formData.name" type="text" placeholder="请输入收货人姓名" color="#999"
						border="none" clearable></u--input>
				</u-form-item>
				<u-form-item label="性别" prop="gender" labelWidth="80" @click="genderShow = true" borderBottom>
					<u--input v-model="genderText" type="number" placeholder="请选择性别" disabledColor="#fff" color="#999"
						border="none" disabled></u--input>
						<u-icon slot="right" name="arrow-right" color="#999"></u-icon>
				</u-form-item>
				<u-form-item label="手机号码" prop="phone" labelWidth="80" borderBottom>
					<u--input v-model="formData.phone" type="number" placeholder="请输入收货人联系电话" color="#999"
						border="none" clearable></u--input>
				</u-form-item>
				<u-form-item label="所在位置" prop="district" labelWidth="80" borderBottom @click="chooseLocation">
					<u--input v-model="formData.district" type="text"
						color="#999" disabled disabledColor="#fff" border="none" placeholder="请选择所在位置"></u--input>
					<u-icon slot="right" name="arrow-right" color="#999"></u-icon>
				</u-form-item>
				<u-form-item label="详细地址" prop="detail" labelWidth="80" ref="item1">
					<u--input v-model="formData.detail" type="text" placeholder="请输入街道小区门牌号" color="#999"
						border="none" clearable></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="hm">
			{{applet.copyright}} <text class="v">V{{applet.version}}</text>
		</view>
		<view class="hm-footer-fixed">
			<view class="hm-w-b100 hm-p-lr-b25">
				<u-button @click="subForm" type="success" :disabled="disabled" :loading="disabled" text="提交"></u-button>
			</view>
		</view>
		<u-action-sheet :show="genderShow" :actions="gender" title="请选择性别" @close="genderShow = false"
			@select="selectGender">
		</u-action-sheet>
	</view>
</template>

<script>
	let App = getApp();

	export default {
		data() {
			return {
				applet: {},
				formData: {
					name: '',
					gender: '',
					phone: '',
					location: '',
					province: '',
					city: '',
					district: '',
					detail: '',
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请输入收货人姓名',
						trigger: ['blur', 'change']
					},
					phone: {
						type: 'number',
						required: true,
						len: 11,
						message: '请输入正确的收货人联系电话',
						trigger: ['blur', 'change']
					},
					district: {
						type: 'string',
						required: true,
						message: '请选择所在位置',
						trigger: ['blur', 'change']
					},
					detail: {
						type: 'string',
						required: true,
						message: '请输入街道小区门牌号',
						trigger: ['blur', 'change']
					},
					gender: {
						type: 'number',
						max: 1,
						required: true,
						message: '请选择性别',
						trigger: ['blur', 'change']
					},
				},
				genderShow: false,
				genderText:'',
				gender: [
					{
						name: '先生',
						value:1
					},
					{
						name: '女士',
						value:2
					},
				],
				disabled: false
			};
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			let _this = this;
			_this.$refs.form.setRules(_this.rules)
		},
		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let _this = this;
			_this.applet = uni.getStorageSync('applet');
		},
		methods: {
			selectGender(e) {
				let _this = this;
				_this.formData.gender = e.value;
				_this.genderText = e.name;
			},
			/**
			 * 获取所在地区
			 */
			chooseLocation: function() {
				let _this = this,
					location = '';
				uni.chooseLocation({
					success: function(res) {
						location = res.latitude + ',' + res.longitude;
						App._get('user.address/getLocation', {
							location
						}, function(result) {
							let wz = result.data.location;
							_this.formData.location = location;
							_this.formData.province = wz.province;
							_this.formData.city = wz.city;
							_this.formData.district = wz.district;
							_this.formData.detail = res.name;
						});
					}
				});
			},

			/**
			 * 表单提交
			 */
			subForm: function() {
				let _this = this;
				_this.$refs.form.validate().then(res => {
					_this.disabled = true; // 按钮禁用
					// 提交到后端
					App._post_form('user.address/add', _this.formData, function(result) {
						App.showSuccess(result.msg, function() {
							uni.navigateBack();
						});
					}, false, function() {
						_this.disabled = false; // 解除禁用
					});
				}).catch(errors => {})
			}
		}
	};
</script>
<style>

</style>