<template>
	<view>
		<view class="hm-header-xian"></view>
		<view class="form-box">
			<view class="form-item">
				<view class="title">店员姓名：<text class="hm-col-error">*</text></view>
				<view class="right">
					<u--input :customStyle="{'padding':'15rpx'}" v-model="data.real_name" border="none" :clearable="true" placeholder="请输入店员姓名"></u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="title">手机号码：<text class="hm-col-error">*</text></view>
				<view class="right">
					<u--input :customStyle="{'padding':'15rpx'}" v-model="data.phone" type="number" border="none" :clearable="true" placeholder="请输入手机号码"></u--input>
				</view>
			</view>
			<view class="hm-m-t-50 hm-p-lr-b25 hm-text-center">
				<u-button @click="add()" type="success" text="确认提交"></u-button>
			</view>
		</view>
		<!-- 技术支持 -->
		<view class="hm">
			{{applet.copyright}} <text class="v">V{{applet.version}}</text>
		</view>
	</view>
</template>

<script>
	let App = getApp();
	export default {
		data() {
			return {
				data:{
					real_name: '',
					phone: ''
				},
				applet: {},
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let _this = this;
			_this.applet = App.getApplet();
		},
		methods: {
			
			/**
			 * 添加
			 */
			add: function() {
				let _this = this,
					data = _this.data;
				if (data.real_name == '') {
					App.showError('店员姓名不可为空');
					return false;
				}
				if (data.phone == '') {
					App.showError('手机号码不可为空');
					return false;
				}
				App._post_form('user.clerk/add', data , function(result) {
					App.showSuccess(result.msg, function() {
						uni.navigateBack(); //返回上一页
					});
				}, false, function() {});
			}
		}
	};
</script>
<style lang="scss" scoped>
	/* 表单样式 */
	
	.form-box {
		background-color: #FFF;
		padding: 0rpx 20rpx 20rpx 20rpx;
		.form-item {
			border-bottom: 1rpx solid #f0f0f0;
			.input{
				padding: 15rpx;
				background-color: #ff0000;
			}
			.title {
				font-size: 30rpx;
				width: 23%;
				display: inline-block;
			}
			.right {
				width: 77%;
				display: inline-block;
				.radio{
					margin-left: 15rpx;
					padding: 20rpx 0rpx;
				}
			}
			.image {
				display: inline-block;
				padding: 20rpx 20rpx 10rpx 15rpx;
			}
			.upload {
				height: 105rpx;
				width: 105rpx;
				background-color: #F2F2F2;
				padding: 45rpx 0rpx 0rpx 45rpx;
				border-radius: 10rpx;
			}
			.logo{
				image {
					width: 150rpx;
					height: 150rpx;
				}
			}
			.start-time {
				display: inline-block;
				width: 33%;
			}
			.end-time {
				display: inline-block;
				width: 33%;
			}
			.time {
				display: inline-block;
				padding: 0rpx 20rpx;
			}
			.center {
				display: inline-block;
				width: 64%;
			}
			.arrow-right {
				display: inline-block;
				float: right;
				margin-top: 22rpx;
			}
		}
	}
	
</style>
