手机开门及用户注册流程

src/projects/business/views/Common/Device/OpenDoor.vue

@@ -23,7 +23,7 @@
 			<div class="vongi-opendoor-bottom">
 				<div v-for="(item,index) in doorList" class="flew-sp">
 					{{item.name}}
-					<button class="mui-btn mui-btn-primary" @click="open(item.id)">开门</button>
+					<button :disabled="!item.isOnline" class="mui-btn mui-btn-primary" @click="open(item.id)">开门</button>
 				</div>
 			</div>
 		</div>

src/projects/home/apis/person.js

@@ -19,7 +19,7 @@ export function validateCode(params) {
 	})
 }
 
-//用户注册提交信息
+//用户登录提交信息
 export function save(params) {
 	return request({
 		url: '/mobile/personInfoApi/save',
@@ -27,3 +27,66 @@ export function save(params) {
 		method: 'post',
 	})
 }
+
+
+//==================场景注册==================
+
+//获取场景列表
+export function getSceneList() {
+	return request({
+		url: '/mobile/scene/sceneList',
+		data: Qs.stringify(),
+		method: 'post',
+	})
+}
+
+//获取区域列表
+export function getRegionList(regionName) {
+	return request({
+		url: '/mobile/scene/regionList',
+		data: Qs.stringify({
+			regionName: regionName
+		}),
+		method: 'post',
+	})
+}
+
+//根据区域获取公司列表
+export function getCompanyList(params) {
+	return request({
+		url: '/mobile/scene/companyListByRegion',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}
+
+//按照场景查询用户角色列表
+export function getPersonRoleListByScene(sceneId) {
+	return request({
+		url: '/mobile/scene/personRoleListByScene',
+		data: Qs.stringify({
+			sceneId: sceneId
+		}),
+		method: 'post',
+	})
+}
+
+//按照公司id查询结构列表-一级
+export function getCompanyStructureList(companyId) {
+	return request({
+		url: '/mobile/scene/companyStructureList',
+		data: Qs.stringify({
+			companyId: companyId
+		}),
+		method: 'post',
+	})
+}
+
+//提交注册
+export function register(params) {
+	return request({
+		url: '/mobile/personInfoApi/register',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}

src/projects/home/router/index.js

@@ -134,7 +134,7 @@ const routes = [
 		children: [
 			//选择行业
 			{
-				path: 'home',
+				path: '',
 				name: 'RegisterHome',
 				component: () => import('../views/Register/Home.vue'),
 				meta: {

src/projects/home/views/Register/Business/Step1.vue

@@ -1,9 +1,8 @@
 <template>
 	<div>
-		<header class="mui-bar mui-bar-nav">
-			<h1 class="mui-title">注册</h1>
-			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-		</header>
+		<common @asynCallBack="asynCallBack"></common>
+		<top-header :pageTitle="pageTitle"></top-header>
+
 		<div class="mui-content margin60">
 			<div class="mui-content-padded">
 				<h5>该号码尚未注册，正在为您注册新的身份：</h5>
@@ -12,55 +11,143 @@
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label>选择行业</label>
-						<button class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:50%">
-							工厂园区
+						<button class="mui-btn mui-btn-block" type='button' style="width:50%">
+							{{this.subForm.sceneName}}
 						</button>
 					</div>
 					<div class="mui-input-row">
 						<label>您的单位</label>
-						<button class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:50%">
-							请选择
+						<button @click="goToSelectCompany" class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:50%">
+							{{this.subForm.companyName}}
 						</button>
 					</div>
 				</form>
 			</div>
 			<!-- 状态 -->
-			<!-- <div class="vongi-zc vongi-fklist">
+			<div v-show="subForm.companyId" class="vongi-zc vongi-fklist">
 				<div class="mui-content-padded">
 					<h5>请选择您的身份进行认证</h5>
 				</div>
 				<ul class="mui-table-view mui-table-view-chevron openfyy-list">
-					<li class="mui-table-view-cell mui-media">
-						<a class="mui-navigate-right" href="">
-							<div class="mui-media-object mui-pull-left">
-								<img src="~$project/assets/img/02.jpg">
-							</div>
-							<div class="mui-media-body">
-								<h4 class="mui-ellipsis">我是员工</h4>
-			                    <h6 class="mui-ellipsis">开启以下功能</h6>
-								<h5 class="mui-ellipsis">健康证、测温记录、考勤记录、请假</h5>
-							</div>
-						</a>
-					</li>
-					<li class="mui-table-view-cell mui-media">
-						<a class="mui-navigate-right" href="">
+					<li v-for="(item,index) in roleList" class="mui-table-view-cell mui-media">
+						<a @click="selectRole(item)" class="mui-navigate-right">
 							<div class="mui-media-object mui-pull-left">
 								<img src="~$project/assets/img/02.jpg">
 							</div>
 							<div class="mui-media-body">
-								<h4 class="mui-ellipsis">我是员工</h4>
-			                    <h6 class="mui-ellipsis">开启以下功能</h6>
-								<h5 class="mui-ellipsis">健康证、测温记录、考勤记录、请假</h5>
+								<h4 class="mui-ellipsis" v-text="item.name"></h4>
+								<h6 class="mui-ellipsis">开启以下功能</h6>
+								<h5 class="mui-ellipsis" v-text="item.remark"></h5>
 							</div>
 						</a>
 					</li>
 				</ul>
-			</div> -->
+			</div>
 		</div>
+		
+		<loading :visible="isLoading"></loading>
 	</div>
 </template>
 
 <script>
+	import * as API_Person from '@/apis/person'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import TopHeader from '$project/components/TopHeader.vue'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	import * as types from '$project/store/mutation-types'
+	export default {
+		name: 'RegisterBusinessStep1',
+		components: {
+			Common,
+			Loading,
+			TopHeader
+		},
+		data() {
+			return {
+				pageTitle: '注册',
+
+				subForm: {
+					sceneId: '',
+					sceneName: '',
+					personRoleId: '',
+					roleName: '',
+					name: '',
+					telephone: '',
+					personId: '',
+					companyId: '',
+					companyName: '请选择',
+					companyStructureId: '',
+					companyStructureName: '请选择',
+					address: '',
+					idCard: '',
+					faceImageUrl: ''
+				},
+
+				isLoading: false,
+
+				roleList: [],
+			}
+		},
+		created() {
+			this.subForm = this.register_form_data;
+		},
+		methods: {
+			//获取用户角色列表
+			getRoleList() {
+				this.isLoading = true;
+				API_Person.getPersonRoleListByScene(this.subForm.sceneId).then(response => {
+					this.isLoading = false;
+
+					this.roleList = response;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//到选择单位页面
+			goToSelectCompany() {
+				this.$router.push({
+					name: 'RegisterBusinessStep2'
+				})
+			},
+			//选择角色
+			selectRole(item) {
+				this.subForm.personRoleId = item.id;
+				this.subForm.roleName = item.name;
+				this.set_register_form_data(this.subForm);
+				this.$router.push({
+					name: 'RegisterBusinessStep3'
+				})
+			},
+
+			asynCallBack() {
+
+			},
+			...mapMutations({
+				set_register_form_data: types.SET_REGISTER_FORM_DATA,
+			})
+		},
+		mounted() {
+			//获取用户角色列表
+			this.getRoleList();
+		},
+		destroyed() {
+
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+				register_form_data: 'register_form_data'
+			})
+		}
+	}
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>

src/projects/home/views/Register/Business/Step2.vue

@@ -1,38 +1,49 @@
 <template>
-<div>
-    <header class="mui-bar mui-bar-nav">
-			<h1 class="mui-title">选择单位</h1>
-			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-		</header>
+	<div>
+		<common @asynCallBack="asynCallBack"></common>
+		<top-header :pageTitle="pageTitle"></top-header>
+
 		<div class="mui-content vongi-xzdw">
 			<div class="mui-content-padded vongi-xzdw-search">
-				<input type="search" placeholder="请输入姓名">
+				<input type="search" placeholder="请输入公司名称">
 				<span class="mui-icon mui-icon-search"></span>
 			</div>
 			<div class="mui-content-padded fyy-date mui-clearfix">
-				<h5>荆州市 > 沙市区</h5>
+				<h5>{{firstAreaName}} > {{secondAreaName}}</h5>
+			</div>
+			<!--地区选择-->
+			<div v-show="nowLevel==1" class="mui-row mui-fullscreen vongi-xzdw-city">
+				<div class="mui-col-xs-3">
+					<div class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
+						<a @click="clickFirstArea(item)" v-for="(item,index) in firstAreaList" :class="'mui-control-item '+(item.name==firstAreaName?'mui-active':'')"
+						 v-text="item.name"></a>
+					</div>
+				</div>
+				<div class="mui-col-xs-9">
+					<div class="mui-control-content">
+						<ul class="mui-table-view">
+							<li @click="clickSecondArea(item)" v-for="(item,index) in secondAreaList" class="mui-table-view-cell" v-text="item.name"></li>
+						</ul>
+					</div>
+				</div>
 			</div>
-			<div class="mui-row mui-fullscreen vongi-xzdw-city">
+			<!--公司选择-->
+			<div v-show="nowLevel==2" class="mui-row mui-fullscreen vongi-xzdw-city">
 				<div class="mui-col-xs-3">
 					<div class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
-						<a class="mui-control-item mui-active" href="">荆州市</a>
-						<a class="mui-control-item" href="">荆州市</a>
-						<a class="mui-control-item" href="">荆州市</a>
-						<a class="mui-control-item" href="">荆州市</a>
+						<a @click="clickFirstCompany(item)" v-for="(item,index) in firstCompanyList" :class="'mui-control-item '+(item.name==secondAreaName?'mui-active':'')"
+						 v-text="item.name"></a>
 					</div>
 				</div>
 				<div class="mui-col-xs-9">
 					<div class="mui-control-content">
 						<ul class="mui-table-view">
-							<li class="mui-table-view-cell">市辖区</li>
-							<li class="mui-table-view-cell">市辖区</li>
-							<li class="mui-table-view-cell">市辖区</li>
-							<li class="mui-table-view-cell">市辖区</li>
+							<li @click="clickSecondCompany(item)" v-for="(item,index) in secondCompanyList" class="mui-table-view-cell"
+							 v-text="item.name"></li>
 						</ul>
 					</div>
 				</div>
 			</div>
-			
 		</div>
 		<!--搜索结果的状态-->
 		<!-- <div class="mui-content vongi-xzdw">			
@@ -51,10 +62,165 @@
 				</li>
 			</ul>
 		</div> -->
-</div>
+		
+		<loading :visible="isLoading"></loading>
+	</div>
 </template>
 
 <script>
+	import * as API_Person from '@/apis/person'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import TopHeader from '$project/components/TopHeader.vue'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	import * as types from '$project/store/mutation-types'
+	export default {
+		name: 'RegisterBusinessStep2',
+		components: {
+			Common,
+			Loading,
+			TopHeader
+		},
+		data() {
+			return {
+				pageTitle: '选择单位',
+
+				subForm: {
+					sceneId: '',
+					sceneName: '',
+					personRoleId: '',
+					roleName: '',
+					name: '',
+					telephone: '',
+					personId: '',
+					companyId: '',
+					companyName: '请选择',
+					companyStructureId: '',
+					companyStructureName: '请选择',
+					address: '',
+					idCard: '',
+					faceImageUrl: ''
+				},
+
+				isLoading: false,
+
+				firstAreaList: [],
+				secondAreaList: [],
+				firstAreaName: '',
+				secondAreaName: '',
+				//当前选择的层次
+				nowLevel: 1,
+
+				companyForm: {
+					sceneId: '',
+					regionId: '',
+				},
+				firstCompanyList: [],
+				secondCompanyList: [],
+			}
+		},
+		created() {
+			this.subForm = this.register_form_data;
+			this.companyForm.sceneId = this.subForm.sceneId;
+		},
+		methods: {
+			//获取一级地区列表
+			getFirstAreaList() {
+				this.firstAreaName = '';
+				this.getRegionList();
+			},
+			//获取地区列表
+			getRegionList() {
+				this.isLoading = true;
+				API_Person.getRegionList(this.firstAreaName).then(response => {
+					this.isLoading = false;
+					if (this.firstAreaName) {
+						for (var i = 0; i < response.length; i++) {
+							if (response[i].name == this.firstAreaName) {
+								this.secondAreaList = response[i].list;
+								break;
+							}
+						}
+					} else {
+						this.firstAreaList = response;
+						this.firstAreaName = response[0].name;
+					}
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//一级地区选择点击
+			clickFirstArea(item) {
+				this.firstAreaName = item.name;
+			},
+			//二级地区选择点击
+			clickSecondArea(item) {
+				this.companyForm.regionId = item.id;
+				this.secondAreaName = item.name;
+				this.nowLevel = 2;
+				this.firstCompanyList = this.secondAreaList;
+				this.companyForm.regionId = this.secondAreaList[0].id;
+			},
+			//获取公司列表
+			getCompanyList() {
+				this.isLoading = true;
+				API_Person.getCompanyList(this.companyForm).then(response => {
+					this.isLoading = false;
+					this.secondCompanyList = response.list;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//一级公司选择
+			clickFirstCompany(item) {
+				this.secondAreaName = item.name;
+				this.companyForm.regionId = item.id;
+			},
+			//二级公司选择
+			clickSecondCompany(item) {
+				this.subForm.companyId = item.id;
+				this.subForm.companyName = item.name;
+				this.set_register_form_data(this.subForm);
+				this.$router.push({
+					name: 'RegisterBusinessStep1'
+				})
+			},
+			asynCallBack() {
+
+			},
+			...mapMutations({
+				set_register_form_data: types.SET_REGISTER_FORM_DATA,
+			})
+		},
+		mounted() {
+			this.getFirstAreaList();
+		},
+		destroyed() {
+
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+				register_form_data: 'register_form_data'
+			})
+		},
+		watch: {
+			'firstAreaName': function(val) {
+				this.getRegionList();
+			},
+			'companyForm.regionId': function(val) {
+				this.getCompanyList();
+			}
+		}
+	}
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>

src/projects/home/views/Register/Business/Step3.vue

@@ -1,19 +1,18 @@
 <template>
-<div>
-   <header class="mui-bar mui-bar-nav">
-			<h1 class="mui-title">注册</h1>
-			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-		</header>
+	<div>
+		<common @asynCallBack="asynCallBack"></common>
+		<top-header :pageTitle="pageTitle"></top-header>
+
 		<div class="mui-content">
 			<div class="mui-content-padded vongi-qingjiadt">
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label>您的单位</label>
-						<span>湖北荆鹏软件集团有限公司</span>
+						<span v-text="subForm.companyName"></span>
 					</div>
 					<div class="mui-input-row">
 						<label>您的身份</label>
-						<span>员工</span>
+						<span v-text="subForm.roleName"></span>
 					</div>
 				</form>
 			</div>
@@ -21,25 +20,149 @@
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label>所属部门</label>
-						<button class="mui-btn mui-btn-block mui-navigate-right mui-ellipsis" type='button' style="width:65%">
-							信息工程中心
+						<button @click="selectStructure" class="mui-btn mui-btn-block mui-navigate-right mui-ellipsis" type='button'
+						 style="width:65%">
+							{{subForm.companyStructureName}}
 						</button>
 					</div>
 				</form>
 			</div>
 			<div class="vongi-btn vongi-login-btn">
-				<button class="mui-btn mui-btn-primary ">
-						下一步
-					</button>
+				<button class="mui-btn mui-btn-primary" @click="nextStep">
+					下一步
+				</button>
 			</div>
 		</div>
-</div>
+
+		<loading :visible="isLoading"></loading>
+	</div>
 </template>
 
 <script>
+	require('$project/assets/js/mui.picker.min.js');
+	import * as API_Person from '@/apis/person'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import TopHeader from '$project/components/TopHeader.vue'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	import * as types from '$project/store/mutation-types'
+	export default {
+		name: 'RegisterBusinessStep3',
+		components: {
+			Common,
+			Loading,
+			TopHeader
+		},
+		data() {
+			return {
+				pageTitle: '注册',
+
+				subForm: {
+					sceneId: '',
+					sceneName: '',
+					personRoleId: '',
+					roleName: '',
+					name: '',
+					telephone: '',
+					personId: '',
+					companyId: '',
+					companyName: '请选择',
+					companyStructureId: '',
+					companyStructureName: '请选择',
+					address: '',
+					idCard: '',
+					faceImageUrl: ''
+				},
+
+				isLoading: false,
+
+				structureList: [],
+			}
+		},
+		created() {
+			this.subForm = this.register_form_data;
+		},
+		methods: {
+			//获取公司部门列表
+			getStructureList() {
+				this.isLoading = true;
+				API_Person.getCompanyStructureList(this.subForm.companyId).then(response => {
+					this.isLoading = false;
+
+					this.structureList = response;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//选择部门
+			selectStructure() {
+				var structureList = [];
+				for (var i = 0; i < this.structureList.length; i++) {
+					structureList.push({
+						value: this.structureList[i]['id'],
+						text: this.structureList[i]['structureName'],
+					})
+				}
+				var _this = this;
+				var picker = new mui.PopPicker();
+				picker.setData(structureList);
+				picker.show(function(selectItems) {
+					_this.subForm.companyStructureId = selectItems[0].value;
+					_this.subForm.companyStructureName = selectItems[0].text;
+				})
+			},
+			//检测表单
+			checkForm() {
+				if (!this.subForm.companyStructureId) {
+					mui.toast('请选择组织部门');
+					return false;
+				} else {
+					return true;
+				}
+			},
+			//下一步
+			nextStep() {
+				if (this.checkForm()) {
+					this.set_register_form_data(this.subForm);
+					this.$router.push({
+						name: 'RegisterBusinessStep4'
+					})
+				}
+			},
+
+
+			asynCallBack() {
+
+			},
+			...mapMutations({
+				set_register_form_data: types.SET_REGISTER_FORM_DATA,
+			})
+		},
+		mounted() {
+			//获取公司部门列表
+			this.getStructureList();
+		},
+		destroyed() {
+
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+				register_form_data: 'register_form_data'
+			})
+		}
+	}
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>
 <style src="$project/assets/css/iconfont.css"></style>
+<style src="$project/assets/css/mui.picker.min.css"></style>
 <style>
 </style>

src/projects/home/views/Register/Business/Step4.vue

@@ -1,23 +1,22 @@
 <template>
-<div>
-   <header class="mui-bar mui-bar-nav">
-			<h1 class="mui-title">注册</h1>
-			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-		</header>
+	<div>
+		<common @asynCallBack="asynCallBack"></common>
+		<top-header :pageTitle="pageTitle"></top-header>
+
 		<div class="mui-content">
 			<div class="mui-content-padded vongi-qingjiadt">
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label>单位</label>
-						<span>湖北荆鹏软件集团有限公司</span>
+						<span v-text="subForm.companyName"></span>
 					</div>
 					<div class="mui-input-row">
 						<label>您的身份</label>
-						<span>员工</span>
+						<span v-text="subForm.roleName"></span>
 					</div>
 					<div class="mui-input-row">
 						<label>部门</label>
-						<span>信息工程中心</span>
+						<span v-text="subForm.companyStructureName"></span>
 					</div>
 				</form>
 			</div>
@@ -25,34 +24,216 @@
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label>姓名</label>
-						<span>姓名</span>
+						<input v-model="subForm.name" type="text" class="mui-input-clear" placeholder="请输入姓名">
 					</div>
 					<div class="mui-input-row">
 						<label>手机号码</label>
-						<span>15500001111</span>
+						<input v-model="subForm.telephone" type="text" class="mui-input-clear" placeholder="请输入手机号码">
 					</div>
 					<div class="mui-input-row">
 						<label>身份证号</label>
-						<input type="text" class="mui-input-clear" placeholder="请输入身份证号">
+						<input v-model="subForm.idCard" type="text" class="mui-input-clear" placeholder="请输入身份证号">
 					</div>
 					<div class="mui-input-row">
 						<label style="width:50%">人脸识别照片<i class="iconfont icon-tishi color4fc5f7"></i></label>
-						<button class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:50%">
-							<img src="~$project/assets/img/audit1.png" /> 
+						<button @click="chooseImage" class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:50%">
+							<img v-if="subForm.faceImageUrl" :src="subForm.faceImageUrl" />
+							<font v-else>请选择</font>
 						</button>
 					</div>
 				</form>
 			</div>
 			<div class="vongi-btn vongi-login-btn">
-				<button class="mui-btn mui-btn-primary ">
-						提  交
-					</button>
+				<button class="mui-btn mui-btn-primary" @click="submit">
+					提 交
+				</button>
 			</div>
 		</div>
-</div>
+
+		<loading :visible="isLoading"></loading>
+
+		<!--图片裁剪-->
+		<cropper :cwidth="cropperWidth" :cheight="cropperHeight" :visible="cropperVisible" :field="cropperField" :cropper="cropper"
+		 @cropperFinish="cropperFinish" @cropperCancel="cropperCancel"></cropper>
+	</div>
 </template>
 
 <script>
+	import * as API_Person from '@/apis/person'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import TopHeader from '$project/components/TopHeader.vue'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	import * as types from '$project/store/mutation-types'
+	import Cropper from '$project/components/Cropper.vue'
+	import * as WxJsApi from '$project/utils/wxJsApi'
+	import {
+		checkPhone,
+	} from '$project/utils'
+	export default {
+		name: 'RegisterBusinessStep4',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+			Cropper
+		},
+		data() {
+			return {
+				pageTitle: '注册',
+
+				subForm: {
+					sceneId: '',
+					sceneName: '',
+					personRoleId: '',
+					roleName: '',
+					name: '',
+					telephone: '',
+					personId: '',
+					companyId: '',
+					companyName: '请选择',
+					companyStructureId: '',
+					companyStructureName: '请选择',
+					address: '',
+					idCard: '',
+					faceImageUrl: ''
+				},
+
+				isLoading: false,
+
+				roleList: [],
+
+				cropperVisible: '',
+				cropperField: '',
+				cropperWidth: 250,
+				cropperHeight: 350,
+				cropper: {
+					img: '',
+					info: true,
+					size: 1,
+					outputType: 'jpeg',
+					canScale: false,
+					autoCrop: false,
+					// 只有自动截图开启 宽度高度才生效
+					autoCropWidth: 250,
+					autoCropHeight: 350,
+					fixed: true,
+					// 真实的输出宽高
+					infoTrue: true,
+					fixedNumber: [5, 7]
+				},
+			}
+		},
+		created() {
+			this.subForm = this.register_form_data;
+		},
+		methods: {
+			//微信选择图片
+			chooseImage() {
+				WxJsApi.chooseImage().then(res => {
+					var localData = res.localData;
+
+					if (localData.indexOf('data:image') != 0) {
+						//判断是否有这样的头部
+						localData = 'data:image/jpeg;base64,' + localData
+					}
+					localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
+					this.imgBase64 = localData;
+					//显示裁剪图片
+					this.showCropper('faceImageUrl');
+					//this.uploadpic();
+				}).catch(error => {
+					mui.toast(error);
+				})
+			},
+			//显示裁剪图片
+			showCropper(field) {
+				this.cropper.img = this.imgBase64;
+				this.cropperField = field;
+				this.cropperVisible = true;
+			},
+			//裁剪图片
+			cropperFinish(obj) {
+				console.log(obj);
+				this.imgBase64 = obj.data;
+				this.uploadpic(obj.field);
+				this.cropperVisible = false;
+			},
+			//隐藏裁剪图片
+			cropperCancel() {
+				this.cropperVisible = false;
+			},
+			//上传图片
+			uploadpic() {
+				this.isLoading = true;
+				WxJsApi.uploadPic(this.imgBase64).then(response => {
+					this.isLoading = false;
+
+					this.subForm.faceImageUrl = response;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//表单检测
+			checkFrom() {
+				let phoneResult = checkPhone(this.subForm.telephone);
+				if (!this.subForm.name) {
+					mui.toast('请输入姓名');
+					return false;
+				} else if (typeof phoneResult == 'string') {
+					mui.toast('请输入手机号');
+					return false;
+				} else if (!this.subForm.faceImageUrl) {
+					mui.toast('请上传人脸照片');
+					return false;
+				} else {
+					return true;
+				}
+			},
+			//提交
+			submit() {
+				if (this.checkFrom()) {
+					this.isLoading = true;
+					API_Person.register(this.subForm).then(response => {
+						this.isLoading = false;
+
+						//跳转到项目主页上去
+						window.location.href = '../business/#/master';
+
+					}).catch(error => {
+						this.isLoading = false;
+						mui.toast(error);
+					})
+				}
+			},
+			asynCallBack() {
+
+			},
+			...mapMutations({
+				set_register_form_data: types.SET_REGISTER_FORM_DATA,
+			})
+		},
+		mounted() {
+			//获取微信配置
+			WxJsApi.getWxConfig();
+		},
+		destroyed() {
+
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+				register_form_data: 'register_form_data'
+			})
+		}
+	}
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>

src/projects/home/views/Register/Home.vue

@@ -1,9 +1,8 @@
 <template>
-<div>
-   <header class="mui-bar mui-bar-nav">
-			<h1 class="mui-title">注册</h1>
-			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-		</header>
+	<div>
+		<common @asynCallBack="asynCallBack"></common>
+		<top-header :pageTitle="pageTitle"></top-header>
+
 		<div class="mui-content margin60">
 			<div class="mui-content-padded">
 				<h5>该号码尚未注册，正在为您注册新的身份：</h5>
@@ -12,20 +11,155 @@
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label>选择行业</label>
-						<button class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:50%">
-							请选择
+						<button @click="selectScene" class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:50%">
+							{{subForm.sceneName}}
 						</button>
 					</div>
 				</form>
 			</div>
 		</div>
-</div>
+		
+		<loading :visible="isLoading"></loading>
+	</div>
 </template>
 
 <script>
+	require('$project/assets/js/mui.picker.min.js');
+	import * as API_Person from '@/apis/person'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import TopHeader from '$project/components/TopHeader.vue'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	import * as types from '$project/store/mutation-types'
+	export default {
+		name: 'RegisterHome',
+		components: {
+			Common,
+			Loading,
+			TopHeader
+		},
+		data() {
+			return {
+				pageTitle: '注册',
+
+				subForm: {
+					sceneId: '',
+					sceneName: '请选择',
+					personRoleId: '',
+					roleName:'',
+					name: '',
+					telephone: '',
+					personId: '',
+					companyId: '',
+					companyName: '请选择',
+					companyStructureId: '',
+					companyStructureName: '请选择',
+					address: '',
+					idCard: '',
+					faceImageUrl: ''
+				},
+
+				isLoading: false,
+
+				sceneList: [],
+			}
+		},
+		created() {
+			if (this.person_data.id) {
+				this.subForm.personId = this.person_data.id;
+			}
+		},
+		methods: {
+			//获取场景列表
+			getSceneList() {
+				this.isLoading = true;
+				API_Person.getSceneList().then(response => {
+					this.isLoading = false;
+
+					this.sceneList = response.list;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//选择场景
+			selectScene() {
+				var sceneList = [];
+				for (var i = 0; i < this.sceneList.length; i++) {
+					sceneList.push({
+						value: this.sceneList[i]['id'],
+						text: this.sceneList[i]['sceneName'],
+					})
+				}
+				var _this = this;
+				var picker = new mui.PopPicker();
+				picker.setData(sceneList);
+				picker.show(function(selectItems) {
+					_this.subForm.sceneId = selectItems[0].value;
+					_this.subForm.sceneName = selectItems[0].text;
+					_this.nextStep();
+				})
+			},
+			//检测表单
+			checkForm() {
+				if (!this.subForm.sceneId) {
+					mui.toast('请选择场景');
+					return false;
+				} else {
+					return true;
+				}
+			},
+			//下一步
+			nextStep() {
+				if (this.checkForm()) {
+					let routeName = '';
+					if (['1'].indexOf(this.subForm.sceneId) > -1) {
+						routeName = 'RegisterBusinessStep1';
+					} else if (['2'].indexOf(this.subForm.sceneId) > -1) {
+						routeName = 'RegisterResidenceStep1';
+					} else if (['3', '4'].indexOf(this.subForm.sceneId) > -1) {
+						routeName = 'RegisterPensionStep1';
+					} else {
+						mui.toast('场景不匹配');
+						return false;
+					}
+					this.set_register_form_data(this.subForm);
+					this.$router.push({
+						name: routeName
+					})
+				}
+			},
+			asynCallBack() {
+
+			},
+			...mapMutations({
+				set_register_form_data: types.SET_REGISTER_FORM_DATA,
+			})
+		},
+		mounted() {
+			//获取场景列表
+			this.getSceneList()
+		},
+		destroyed() {
+
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+				register_form_data: 'register_form_data'
+			})
+		}
+	}
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>
 <style src="$project/assets/css/iconfont.css"></style>
-<style>
+<style src="$project/assets/css/mui.picker.min.css"></style>
+<style scoped>
 </style>

src/store/getters.js

@@ -12,4 +12,6 @@ export const menu_list = state => state.menu_list
 
 export const person_temp = state => state.person_temp
 
-export const fun_list = state => state.fun_list
+export const fun_list = state => state.fun_list
+
+export const register_form_data = state => state.register_form_data

src/store/mutation-types.js

@@ -6,4 +6,5 @@ export const SET_PERSON_POPEDOM = 'SET_PERSON_POPEDOM'
 export const SET_ADD_PERSON_DATA = 'SET_ADD_PERSON_DATA'
 export const SET_MENI_LIST = 'SET_MENI_LIST'
 export const SET_PERSON_TEMP = 'SET_PERSON_TEMP'
-export const SET_FUN_LIST = 'SET_FUN_LIST'
+export const SET_FUN_LIST = 'SET_FUN_LIST'
+export const SET_REGISTER_FORM_DATA = 'SET_REGISTER_FORM_DATA'

src/store/mutations.js

@@ -6,7 +6,8 @@ import {
 	setPersonPopedom,
 	setMenuList,
 	setPersonTemp,
-	setFunList
+	setFunList,
+	setRegisterFormData
 } from '../utils/storage'
 
 var storage_prefix = process.env.VUE_APP_LOCAL_STORAGE_PREFIX;
@@ -46,16 +47,21 @@ const mutations = {
 		setMenuList(storage_prefix, data)
 		state.menu_list = data
 	},
-	
+
 	[types.SET_PERSON_TEMP](state, data) {
 		setPersonTemp(storage_prefix, data)
 		state.person_temp = data
 	},
-	
+
 	[types.SET_FUN_LIST](state, data) {
 		setFunList(storage_prefix, data)
 		state.fun_list = data
 	},
+
+	[types.SET_REGISTER_FORM_DATA](state, data) {
+		setRegisterFormData(storage_prefix, data)
+		state.register_form_data = data
+	},
 }
 
 export default mutations

src/store/state.js

@@ -5,7 +5,8 @@ import {
 	getPersonPopedom,
 	getMenuList,
 	getPersonTemp,
-	getFunList
+	getFunList,
+	getRegisterFormData
 } from '../utils/storage'
 
 var storage_prefix = process.env.VUE_APP_LOCAL_STORAGE_PREFIX;
@@ -21,6 +22,7 @@ const state = {
 	menu_list: getMenuList(storage_prefix),
 	person_temp: getPersonTemp(storage_prefix),
 	fun_list: getFunList(storage_prefix),
+	register_form_data: getRegisterFormData(storage_prefix),
 }
 
 export default state

src/utils/storage.js

@@ -77,3 +77,7 @@ export const getMenuList = (channel) => get(channel + '_menu_list')
 export const setFunList = (channel, data) => set(channel + '_fun_list', data)
 
 export const getFunList = (channel) => get(channel + '_fun_list')
+
+export const setRegisterFormData = (channel, data) => set(channel + '_register_form_data', data)
+
+export const getRegisterFormData = (channel) => get(channel + '_register_form_data')