cxhxy/addons/food/uni_app/pages/user/pact/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="shop_id" labelWidth="80" @click="shopShow = true" borderBottom>
					<u--input v-model="shop_name" type="text" 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="linkman" labelWidth="80" borderBottom>
					<u--input v-model="formData.linkman" type="text" placeholder="请输入联系人姓名" color="#999" border="none"
						clearable></u--input>
				</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="people" labelWidth="80" borderBottom>
					<u--input v-model="formData.people" type="number" placeholder="请输入就餐人数" color="#999" border="none"
						clearable></u--input>
				</u-form-item>
				<u-form-item label="约定时间" prop="pact_time" labelWidth="80" @click="pactShow = true" borderBottom>
					<u--input v-model="pact_time" type="text" 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="message" labelWidth="80" borderBottom>
					<u--input v-model="formData.message" type="text" placeholder="请输入备注信息" color="#999" border="none"
						clearable></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="hm-p-lr-b25 hm-m-t-50">
			<u-button @click="subForm" type="success" :disabled="disabled" :loading="disabled" text="提交"></u-button>
		</view>
		<u-action-sheet :show="shopShow" :actions="shop" title="请选择预定门店" @close="shopShow = false" @select="setShop"></u-action-sheet>
		<u-datetime-picker title="请选择约定时间" :show="pactShow" @close="pactShow = false" v-model="pact_time_list" @confirm="setPactTime" mode="datetime"></u-datetime-picker>
		<!-- 技术支持 -->
		<view class="hm">
			{{applet.copyright}} <text class="v">V{{applet.version}}</text>
		</view>
	</view>
</template>

<script>
	const App = getApp();
	export default {
		data() {
			return {
				applet: {},
				shop: [],
				shop_name: '',
				shopShow: false,
				pactShow: false,
				pact_time_list: Number(new Date()),
				pact_time:'',
				formData: {
					shop_id: '',
					linkman: '',
					phone: '',
					people: '',
					pact_time: '',
					message: '',
				},
				rules: {
					shop_id: {
						type: 'number',
						required: true,
						message: '请选择预订门店',
						trigger: ['blur', 'change']
					},
					linkman: {
						type: 'string',
						required: true,
						message: '请输入联系人姓名',
						trigger: ['blur', 'change']
					},
					phone: {
						type: 'number',
						required: true,
						len: 11,
						message: '请输入正确的联系电话',
						trigger: ['blur', 'change']
					},
					people: {
						type: 'string',
						required: true,
						message: '请输入就餐人数',
						trigger: ['blur', 'change']
					},
					pact_time: {
						type: 'string',
						required: true,
						message: '请选择约定时间',
						trigger: ['blur', 'change']
					},
				},
				disabled: false,
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			let _this = this;
			_this.applet = uni.getStorageSync('applet');
			_this.getShopList();
		},

		onShow() {},

		methods: {
			/**
			 * 获取分类列表
			 */
			getShopList: function() {
				let _this = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						uni.setStorageSync('location', res.latitude + ',' + res.longitude);
						App._get('shop/lists', {}, function(result) {
							let shop = result.data.list,
								arr = [];
							_this.formData.shop_id = shop[0].shop_id;
							_this.shop_name = shop[0].shop_name;
							shop.forEach(item => {
								arr.push({ shop_id: item.shop_id, name: item.shop_name });
							});
							_this.shop = arr;
						});
					}
				});
			},
			/**
			 * 设置门店
			 */
			setShop: function(e) {
				let _this = this;
				_this.shop_name = e.name;
				_this.formData.shop_id = e.shop_id;
			},
			/**
			 * 设置约定时间
			 */
			setPactTime: function(e) {
				let _this = this;
				_this.pactShow = false;
				_this.pact_time = uni.$u.timeFormat(e.value, 'yyyy年mm月dd日 hh时MM分');
				let time = String(e.value);
				time = time.slice(0,10);
				_this.formData.pact_time = time;
			},
			/**
			 * 表单提交
			 */
			subForm: function() {
				let _this = this;
				_this.$refs.form.validate().then(res => {
					_this.disabled = true; // 按钮禁用
					// 提交到后端
					App._post_form('user.pact/add', _this.formData, function(result) {
						App.showSuccess(result.msg, function() {
							App.goTo('user/pact/index');
						});
					}, false, function() {
						_this.disabled = false; // 解除禁用
					});
				}).catch(errors => {})
			},
		}
	};

</script>
<style>

</style>