1

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

@@ -0,0 +1,251 @@
+<template>
+	<div>
+		<common @asynCallBack="asynCallBack" :projectCheck="false"></common>
+		<top-header :pageTitle="pageTitle"></top-header>
+
+		<div class="mui-content margin60">
+			<div class="mui-content-padded">
+				<h5>该号码尚未注册，正在为您注册新的身份：</h5>
+			</div>
+			<div class="mui-content-padded vongi-editme vongi-qingjiadt">
+				<form class="mui-input-group">
+					<div class="mui-input-row">
+						<label>选择行业</label>
+						<button class="mui-btn mui-btn-block" type='button' style="width:50%">
+							机构、居家养老
+						</button>
+					</div>
+					<div class="mui-input-row">
+						<label>养老类型</label>
+						<button class="mui-btn mui-btn-block" type='button' style="width:50%">
+							{{subForm.sceneName}}
+						</button>
+					</div>
+					<div v-if="subForm.sceneId==3" class="mui-input-row">
+						<label>养老机构</label>
+						<button @click="goToSelectCompany" class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:50%">
+							{{subForm.companyName}}
+						</button>
+					</div>
+					<div v-if="subForm.sceneId==4" class="mui-input-row">
+						<label>所在小区</label>
+						<button @click="goToSelectResidence" class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:50%">
+							{{subForm.companyName}}
+						</button>
+					</div>
+					<div v-if="subForm.sceneId==4 && subForm.companyId!==''" class="mui-input-row">
+						<label>服务机构</label>
+						<button @click="goToSelectServeCompany" class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:50%">
+							{{subForm.serviceCompanyName}}
+						</button>
+					</div>
+				</form>
+			</div>
+			<!-- 状态 -->
+			<div v-show="roleSeleceShow" 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 v-for="(item,index) in roleList" :class="'mui-table-view-cell mui-media '+(subForm.personRoleId==item.id?'mui-selected':'')">
+						<a @click="selectRole(item)">
+							<div class="mui-media-object mui-pull-left">
+								<img :src="item.pic">
+							</div>
+							<div class="mui-media-body">
+								<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 v-show="roleSeleceShow" class="vongi-btn vongi-login-btn">
+				<button class="mui-btn mui-btn-primary" @click="nextStep">
+					下一步
+				</button>
+			</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: 'RegisterPensionStep1',
+		components: {
+			Common,
+			Loading,
+			TopHeader
+		},
+		data() {
+			return {
+				pageTitle: '注册',
+
+				subForm: {
+					sceneId: '',
+					sceneName: '',
+					personRoleId: '',
+					roleName: '',
+					name: '',
+					telephone: '',
+					personId: '',
+					companyId: '',
+					companyName: '请选择',
+					companyStructureId: '',
+					serviceCompanyId: '',
+					serviceCompanyName: '请选择',
+					//最终选择的数据
+					selectCompanyStructureList: [],
+					address: '',
+					idCard: '',
+					faceImageUrl: '',
+					popularizePersonId: ''
+				},
+
+				isLoading: false,
+
+				roleList: [],
+
+				//默认从里面读取第一条
+				companyList: [],
+			}
+		},
+		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;
+					if (response.length > 0) {
+						//选择默认角色
+						this.selectRole(response[0]);
+					}
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//到选择单位页面
+			goToSelectCompany() {
+				this.$router.push({
+					name: 'RegisterPensionStep2'
+				})
+			},
+			//选择角色
+			selectRole(item) {
+				this.subForm.personRoleId = item.id;
+				this.subForm.roleName = item.name;
+				this.set_register_form_data(this.subForm);
+				/* this.$router.push({
+					name: 'RegisterPensionStep3'
+				}) */
+			},
+			//下一步
+			nextStep() {
+				this.$router.push({
+					name: 'RegisterPensionStep3'
+				})
+			},
+			//选择小区
+			goToSelectResidence() {
+				this.$router.push({
+					name: 'RegisterPensionStep2_4'
+				})
+			},
+			//选择服务机构
+			goToSelectServeCompany() {
+				this.$router.push({
+					name: 'RegisterPensionStep3_4'
+				})
+			},
+
+			//获取服务机构公司列表,并设置默认第一条
+			getCompanyList() {
+				this.isLoading = true;
+				API_Person.getServiceCompanyIdList().then(response => {
+					this.isLoading = false;
+					this.companyList = response.list;
+					//设置默认第一条
+					if (this.companyList.length > 0) {
+						this.subForm.serviceCompanyId = this.companyList[0].id;
+						this.subForm.serviceCompanyName = this.companyList[0].name;
+						this.set_register_form_data(this.subForm);
+					}
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+
+			asynCallBack() {
+
+			},
+			...mapMutations({
+				set_register_form_data: types.SET_REGISTER_FORM_DATA,
+			})
+		},
+		mounted() {
+			//获取用户角色列表
+			this.getRoleList();
+			//获取服务机构公司列表
+			this.getCompanyList()
+		},
+		destroyed() {
+
+		},
+		computed: {
+			roleSeleceShow: {
+				// getter
+				get: function() {
+					if (this.subForm.sceneId == 4) {
+						if (this.subForm.serviceCompanyId !== '' && this.subForm.companyId !== '') {
+							return true;
+						} else {
+							return false;
+						}
+					} else {
+						if (this.subForm.companyId !== '') {
+							return true;
+						} else {
+							return false;
+						}
+					}
+				},
+				// setter
+				set: function(newValue) {
+					console.log(newValue)
+				}
+			},
+			...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/projects/home/views/Register/Pension/Step2.vue

@@ -0,0 +1,192 @@
+<template>
+	<div>
+		<common @asynCallBack="asynCallBack" :projectCheck="false"></common>
+		<top-header :pageTitle="pageTitle"></top-header>
+
+
+		<div class="mui-content">
+			<div class="mui-content-padded vongi-xzdw-search">
+				<input @focusin="searchIn" @keyup="doSearchCompany" v-model="searchForm.name" type="search" placeholder="请输入机构名称">
+				<span class="mui-icon mui-icon-search"></span>
+			</div>
+			<!--搜索结果的状态-->
+			<!-- <div class="mui-content-padded flew-items flew-sp">
+				<div class="vongi-xzdw-search mui-col-xs-10">
+					<input type="search" placeholder="请输入姓名">
+					<span class="mui-icon mui-icon-search"></span>
+				</div>
+				<a class="color4fc5f7">取消</a>
+			</div> -->
+			<ul class="mui-table-view vongi-xzyljg">
+				<li v-for="(item,index) in searchCompanyList" class="mui-table-view-cell mui-media">
+					<a @click="clickSearchCompany(item)" v-text="item.name">
+				
+					</a>
+				</li>
+			</ul>
+		</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: 'RegisterPensionStep2',
+		components: {
+			Common,
+			Loading,
+			TopHeader
+		},
+		data() {
+			return {
+				pageTitle: '选择养老机构',
+
+				subForm: {
+					sceneId: '',
+					sceneName: '',
+					personRoleId: '',
+					roleName: '',
+					name: '',
+					telephone: '',
+					personId: '',
+					companyId: '',
+					companyName: '请选择',
+					companyStructureId: '',
+					serviceCompanyId: '',
+					serviceCompanyName: '请选择',
+					//最终选择的数据
+					selectCompanyStructureList: [],
+					address: '',
+					idCard: '',
+					faceImageUrl: '',
+					popularizePersonId: ''
+				},
+
+				isLoading: false,
+
+				showType: 'search',
+				searchForm: {
+					sceneId: '',
+					name: '',
+					totalPage: 1,
+					pageIndex: 1,
+					pageSize: 20,
+				},
+				searchCompanyList: [],
+				inputIng: false,
+			}
+		},
+		created() {
+			this.subForm = this.register_form_data;
+			this.searchForm.sceneId = this.subForm.sceneId;
+		},
+		methods: {
+			//搜索出来的公司选择
+			clickSearchCompany(item) {
+				this.subForm.companyId = item.id;
+				this.subForm.companyName = item.name;
+				this.set_register_form_data(this.subForm);
+				this.$router.push({
+					name: 'RegisterPensionStep1'
+				})
+			},
+			//进入搜索
+			searchIn() {
+				this.inputIng = false;
+				this.showType = 'search';
+			},
+			//搜索
+			doSearchCompany() {
+				if (this.inputIng) {
+					return false
+				}
+				this.inputIng = true;
+				var _this = this;
+				setTimeout(function() {
+					if (_this.searchForm.name) {
+						_this.searchForm.pageIndex = 1;
+						_this.getSearchCompanyList();
+					} else {
+						_this.inputIng = false;
+					}
+				}, 500);
+			},
+			//根据公司名称搜索
+			getSearchCompanyList() {
+				this.isLoading = true;
+				API_Person.getCompanyListBySeach(this.searchForm).then(response => {
+					this.isLoading = false;
+					if (response) {
+						if (this.searchForm.pageIndex == 1) {
+							this.searchCompanyList = response.data;
+							this.searchForm.pageIndex = response.pageNumber;
+							this.searchForm.totalPage = response.totalPage;
+						} else {
+							this.searchCompanyList = [
+								...this.searchCompanyList,
+								...response.data
+							];
+						}
+					}
+					this.searchForm.pageIndex++;
+					this.inputIng = false;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//下拉事件
+			handleScrool() {
+				if (isReachBottom()) {
+					console.log('到达底部')
+					if (this.listForm.pageIndex <= this.listForm.totalPage && this.isLoading == false) {
+						this.getSearchCompanyList();
+					} else {
+						return;
+					}
+				}
+			},
+			asynCallBack() {
+
+			},
+			...mapMutations({
+				set_register_form_data: types.SET_REGISTER_FORM_DATA,
+			})
+		},
+		mounted() {
+			//监控下拉加载事件
+			var _this = this;
+			window.addEventListener('scroll', _this.handleScrool);
+		},
+		destroyed() {
+			//销毁监听事件
+			var _this = this;
+			window.removeEventListener('scroll', _this.handleScrool);
+		},
+		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 scoped src="$project/assets/css/sczpfyy.css"></style>
+<style src="$project/assets/css/iconfont.css"></style>
+<style>
+</style>

src/projects/home/views/Register/Pension/Step2_4.vue

@@ -0,0 +1,323 @@
+<template>
+	<div>
+		<common @asynCallBack="asynCallBack" :projectCheck="false"></common>
+		<top-header :pageTitle="pageTitle"></top-header>
+
+		<div class="mui-content vongi-xzdw">
+			<div class="mui-content-padded vongi-xzdw-search">
+				<input @focusin="searchIn" @focusout="searchOut" @keyup="doSearchCompany" v-model="searchForm.name" type="search"
+				 placeholder="请输入小区名称">
+				<span class="mui-icon mui-icon-search"></span>
+			</div>
+			<div v-show="showType=='select'">
+				<div class="mui-content-padded fyy-date mui-clearfix">
+					<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 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 @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 :style="item.id==0?'color:#3385FF':''" @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>
+		<!--搜索结果的状态-->
+		<div v-show="showType=='search'" class="mui-content vongi-xzdw" style="padding-top: 0;">
+			<ul class="mui-table-view vongi-xzyljg">
+				<li v-for="(item,index) in searchCompanyList" class="mui-table-view-cell mui-media">
+					<a @click="clickSearchCompany(item)" v-text="item.name">
+				
+					</a>
+				</li>
+			</ul>
+		</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 isReachBottom from '$project/utils/isReachBottom'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	import * as types from '$project/store/mutation-types'
+	export default {
+		name: 'RegisterPensionStep2_4',
+		components: {
+			Common,
+			Loading,
+			TopHeader
+		},
+		data() {
+			return {
+				pageTitle: '选择小区',
+
+				subForm: {
+					sceneId: '',
+					sceneName: '',
+					personRoleId: '',
+					roleName: '',
+					name: '',
+					telephone: '',
+					personId: '',
+					companyId: '',
+					companyName: '请选择',
+					companyStructureId: '',
+					serviceCompanyId: '',
+					serviceCompanyName: '请选择',
+					//companyStructureName: '请选择',
+					//最终选择的数据
+					selectCompanyStructureList: [],
+					address: '',
+					idCard: '',
+					faceImageUrl: '',
+					popularizePersonId: ''
+				},
+
+				isLoading: false,
+
+				firstAreaList: [],
+				secondAreaList: [],
+				firstAreaName: '',
+				secondAreaName: '',
+				//当前选择的层次
+				nowLevel: 1,
+
+				companyForm: {
+					sceneId: '',
+					regionId: '',
+				},
+				firstCompanyList: [],
+				secondCompanyList: [],
+
+				showType: 'select',
+				searchForm: {
+					sceneId: '',
+					name: '',
+					totalPage: 1,
+					pageIndex: 1,
+					pageSize: 20,
+				},
+				searchCompanyList: [],
+				inputIng: false,
+			}
+		},
+		created() {
+			this.subForm = this.register_form_data;
+			this.companyForm.sceneId = this.subForm.sceneId;
+			this.searchForm.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;
+					this.secondCompanyList.push({
+						id: 0,
+						name: '我的小区未入驻'
+					});
+				}).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: 'RegisterPensionStep1',
+				})
+			},
+			//搜索出来的公司选择
+			clickSearchCompany(item) {
+				this.subForm.companyId = item.id;
+				this.subForm.companyName = item.name;
+				this.set_register_form_data(this.subForm);
+				this.$router.push({
+					name: 'RegisterPensionStep1'
+				})
+			},
+			//进入搜索
+			searchIn() {
+				this.inputIng = false;
+				this.showType = 'search';
+			},
+			//离开搜索
+			searchOut() {
+				if (!this.searchForm.name) {
+					this.showType = 'select';
+				}
+			},
+			//搜索
+			doSearchCompany() {
+				if (this.inputIng) {
+					return false
+				}
+				this.inputIng = true;
+				var _this = this;
+				setTimeout(function() {
+					if (_this.searchForm.name) {
+						_this.searchForm.pageIndex = 1;
+						_this.getSearchCompanyList();
+					}
+				}, 500);
+			},
+			//根据公司名称搜索
+			getSearchCompanyList() {
+				this.isLoading = true;
+				API_Person.getCompanyListBySeach(this.searchForm).then(response => {
+					this.isLoading = false;
+					if (response) {
+						if (this.searchForm.pageIndex == 1) {
+							this.searchCompanyList = response.data;
+							this.searchForm.pageIndex = response.pageNumber;
+							this.searchForm.totalPage = response.totalPage;
+						} else {
+							this.searchCompanyList = [
+								...this.searchCompanyList,
+								...response.data
+							];
+						}
+					}
+					this.searchForm.pageIndex++;
+					this.inputIng = false;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//下拉事件
+			handleScrool() {
+				if (isReachBottom()) {
+					console.log('到达底部')
+					if (this.listForm.pageIndex <= this.listForm.totalPage && this.isLoading == false) {
+						this.getSearchCompanyList();
+					} else {
+						return;
+					}
+				}
+			},
+			asynCallBack() {
+
+			},
+			...mapMutations({
+				set_register_form_data: types.SET_REGISTER_FORM_DATA,
+			})
+		},
+		mounted() {
+			this.getFirstAreaList();
+			//监控下拉加载事件
+			var _this = this;
+			window.addEventListener('scroll', _this.handleScrool);
+		},
+		destroyed() {
+			//销毁监听事件
+			var _this = this;
+			window.removeEventListener('scroll', _this.handleScrool);
+		},
+		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>
+<style scoped src="$project/assets/css/sczpfyy.css"></style>
+<style src="$project/assets/css/iconfont.css"></style>
+<style>
+</style>

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

@@ -0,0 +1,249 @@
+<template>
+	<div>
+		<common @asynCallBack="asynCallBack" :projectCheck="false"></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 v-text="subForm.sceneName"></span>
+					</div>
+					<div class="mui-input-row">
+						<label>您的身份</label>
+						<span v-text="subForm.roleName"></span>
+					</div>
+				</form>
+			</div>
+			<!-- <div v-if="subForm.sceneId=='3' || subForm.companyId" class="mui-content-padded vongi-qingjiadt vongi-editme">
+				<form class="mui-input-group">
+					<div class="mui-input-row">
+						<label v-text="companyLabel"></label>
+						<span v-text="subForm.companyName"></span>
+					</div>
+					<div v-for="(item,index) in structureNameList" class="mui-input-row">
+						<label v-text="item"></label>
+						<button @click="selectStructure(index)" class="mui-btn mui-btn-block mui-navigate-right mui-ellipsis" type='button'
+						 style="width:65%">
+							{{subForm.selectCompanyStructureList[index]?subForm.selectCompanyStructureList[index].name:'请选择'}}
+						</button>
+					</div>
+				</form>
+			</div> -->
+			<div class="mui-content-padded vongi-qingjiadt vongi-editme">
+				<form class="mui-input-group">
+					<div class="mui-input-row">
+						<label v-text="companyLabel"></label>
+						<span v-text="subForm.companyName"></span>
+					</div>
+					<!--居家养老状态-->
+					<div class="mui-input-row">
+						<label>家庭住址</label>
+						<textarea v-model="subForm.address" rows="5" placeholder="请输入家庭住址"></textarea>
+					</div>
+				</form>
+			</div>
+
+			<div class="vongi-btn vongi-login-btn">
+				<button class="mui-btn mui-btn-primary" @click="nextStep">
+					下一步
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import Vue from 'vue'
+	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: 'RegisterPensionStep3',
+		components: {
+			Common,
+			Loading,
+			TopHeader
+		},
+		data() {
+			return {
+				pageTitle: '注册',
+
+				subForm: {
+					sceneId: '',
+					sceneName: '',
+					personRoleId: '',
+					roleName: '',
+					name: '',
+					telephone: '',
+					personId: '',
+					companyId: '',
+					companyName: '请选择',
+					companyStructureId: '',
+					serviceCompanyId: '',
+					serviceCompanyName: '请选择',
+					//最终选择的数据
+					selectCompanyStructureList: [],
+					address: '',
+					idCard: '',
+					faceImageUrl: '',
+					popularizePersonId: ''
+				},
+
+				isLoading: false,
+
+				structureList: [],
+				structureNameList: [],
+			}
+		},
+		created() {
+			this.subForm = this.register_form_data;
+		},
+		methods: {
+			//获取公司部门列表
+			getStructureList() {
+				this.isLoading = true;
+				API_Person.getCompanyStructureList(this.subForm.companyId).then(response => {
+					this.isLoading = false;
+
+					Vue.set(this.structureList, 0, response.structureInfoList)
+					this.structureNameList = response.structureNameList;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//选择部门
+			selectStructure(index) {
+				if (this.structureList[index]) {
+					var structureList = [];
+					for (var i = 0; i < this.structureList[index].length; i++) {
+						structureList.push({
+							value: this.structureList[index][i]['id'],
+							text: this.structureList[index][i]['structureName'],
+						})
+					}
+					var _this = this;
+					var picker = new mui.PopPicker();
+					picker.setData(structureList);
+					picker.show(function(selectItems) {
+						_this.getStructureListNext(index);
+						//设置保存数据
+						Vue.set(_this.subForm.selectCompanyStructureList, index, {
+							id: selectItems[0].value,
+							name: selectItems[0].text
+						})
+					})
+				} else {
+					mui.toast('请选择' + this.structureNameList[index - 1]);
+				}
+			},
+			//获取下一层机构数据
+			getStructureListNext(index) {
+				//如果有下一层数据就去读取
+				if (this.structureNameList[index + 1]) {
+					this.isLoading = true;
+					API_Person.getCompanyStructureByName(this.subForm.companyId, this.structureNameList[index + 1]).then(response => {
+						this.isLoading = false;
+
+						Vue.set(this.structureList, index + 1, response)
+					}).catch(error => {
+						this.isLoading = false;
+						mui.toast(error);
+					})
+				}
+			},
+			//检测表单
+			checkForm() {
+				/* if (this.subForm.companyId !== 0) {
+					//设置最后一个id
+					let lastIndex = this.subForm.selectCompanyStructureList.length;
+					let lastItem = this.subForm.selectCompanyStructureList[lastIndex - 1];
+					//只有当选择的数据长度等于返回的总长度才赋值通过
+					if (lastIndex == this.structureNameList.length) {
+						this.subForm.companyStructureId = lastItem ? lastItem.id : '';
+					}
+					if (!this.subForm.companyStructureId && this.structureNameList.length > 0) {
+						mui.toast('请选择' + this.structureNameList[lastIndex]);
+						return false;
+					} else {
+						return true;
+					}
+				} else {
+					if (!this.subForm.address) {
+						mui.toast('请输入您的家庭住址');
+						return false;
+					} else {
+						return true;
+					}
+				} */
+				return true;
+			},
+			//下一步
+			nextStep() {
+				if (this.checkForm()) {
+					this.set_register_form_data(this.subForm);
+					this.$router.push({
+						name: 'RegisterPensionStep4'
+					})
+				}
+			},
+
+
+			asynCallBack() {
+
+			},
+			...mapMutations({
+				set_register_form_data: types.SET_REGISTER_FORM_DATA,
+			})
+		},
+		mounted() {
+			if (this.subForm.sceneId == '3' || this.subForm.companyId) {
+				//获取公司部门列表
+				this.getStructureList();
+			}
+		},
+		destroyed() {
+
+		},
+		computed: {
+			companyLabel: {
+				// getter
+				get: function() {
+					if (this.subForm.sceneId == '3') {
+						return '养老机构';
+					} else if (this.subForm.sceneId == '4') {
+						return '所在小区';
+					} else {
+						return '';
+					}
+				},
+				// setter
+				set: function(newValue) {
+					console.log(newValue)
+				}
+			},
+			...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/Pension/Step3_4.vue

@@ -0,0 +1,121 @@
+<template>
+	<div>
+		<common @asynCallBack="asynCallBack" :projectCheck="false"></common>
+		<top-header :pageTitle="pageTitle"></top-header>
+
+		<div class="mui-content vongi-xzdw">
+			<ul class="mui-table-view vongi-xzyljg">
+				<li v-for="(item,index) in companyList" class="mui-table-view-cell mui-media">
+					<a @click="clickCompany(item)" v-text="item.name">
+
+					</a>
+				</li>
+			</ul>
+		</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 isReachBottom from '$project/utils/isReachBottom'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	import * as types from '$project/store/mutation-types'
+	export default {
+		name: 'RegisterPensionStep3_4',
+		components: {
+			Common,
+			Loading,
+			TopHeader
+		},
+		data() {
+			return {
+				pageTitle: '选择服务机构',
+
+				subForm: {
+					sceneId: '',
+					sceneName: '',
+					personRoleId: '',
+					roleName: '',
+					name: '',
+					telephone: '',
+					personId: '',
+					companyId: '',
+					companyName: '请选择',
+					companyStructureId: '',
+					serviceCompanyId: '',
+					serviceCompanyName: '请选择',
+					//companyStructureName: '请选择',
+					//最终选择的数据
+					selectCompanyStructureList: [],
+					address: '',
+					idCard: '',
+					faceImageUrl: '',
+					popularizePersonId: ''
+				},
+
+				isLoading: false,
+
+				companyList: []
+			}
+		},
+		created() {
+			this.subForm = this.register_form_data;
+		},
+		methods: {
+			//获取公司列表
+			getCompanyList() {
+				this.isLoading = true;
+				API_Person.getServiceCompanyIdList().then(response => {
+					this.isLoading = false;
+					this.companyList = response.list;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//公司选择
+			clickCompany(item) {
+				this.subForm.serviceCompanyId = item.id;
+				this.subForm.serviceCompanyName = item.name;
+				this.set_register_form_data(this.subForm);
+				this.$router.push({
+					name: 'RegisterPensionStep1'
+				})
+			},
+
+			asynCallBack() {
+
+			},
+			...mapMutations({
+				set_register_form_data: types.SET_REGISTER_FORM_DATA,
+			})
+		},
+		mounted() {
+			this.getCompanyList();
+		},
+		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 scoped src="$project/assets/css/sczpfyy.css"></style>
+<style src="$project/assets/css/iconfont.css"></style>
+<style>
+</style>

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

@@ -0,0 +1,337 @@
+<template>
+	<div>
+		<common @asynCallBack="asynCallBack" :projectCheck="false"></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 v-text="subForm.sceneName"></span>
+					</div>
+					<div class="mui-input-row">
+						<label>您的身份</label>
+						<span v-text="subForm.roleName"></span>
+					</div>
+					<div v-if="subForm.companyId!==0" class="mui-input-row">
+						<label v-text="companyLabel"></label>
+						<span v-text="subForm.companyName"></span>
+					</div>
+					<div v-else class="mui-input-row">
+						<label>家庭地址</label>
+						<span v-text="subForm.address"></span>
+					</div>
+					<!-- <div v-if="subForm.companyId!==0" class="mui-input-row">
+						<label>房号</label>
+						<span v-text="companyStructureName"></span>
+					</div> -->
+				</form>
+			</div>
+			<div class="mui-content-padded vongi-qingjiadt vongi-editme marginbo">
+				<form class="mui-input-group">
+					<div class="mui-input-row">
+						<label>姓名<i class="colorfe616c">*</i></label>
+						<input v-model="subForm.name" type="text" class="mui-input-clear" placeholder="请输入姓名">
+					</div>
+					<div class="mui-input-row">
+						<label>手机号码</label>
+						<input v-model="subForm.telephone" type="text" class="mui-input-clear" placeholder="请输入手机号码">
+					</div>
+					<div class="mui-input-row">
+						<label>身份证号</label>
+						<input v-model="subForm.idCard" type="text" class="mui-input-clear" placeholder="请输入身份证号" style="text-transform: uppercase;">
+					</div>
+					<div class="mui-input-row">
+						<label style="width:50%" @click="alertTips">照片<i class="colorfe616c">*</i><i class="iconfont icon-tishi color4fc5f7"></i></label>
+						<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="mui-content-padded vongi-qingjiadt vongi-editme marginbo">
+				<form class="mui-input-group">
+					<div class="mui-input-row">
+						<label>推广者id</label>
+						<input v-model="subForm.popularizePersonId" type="text" class="mui-input-clear" placeholder="请输入推广者id">
+					</div>
+				</form>
+			</div>
+			<div class="vongi-xieyii mui-radio">
+				<input name="radio1" v-model="agreement" type="radio" value="1">
+				我已阅读并同意<router-link :to="{name:'RegisterAgreement'}" class="color4fc5f7">《用户使用协议》</router-link>
+			</div>
+			<div class="vongi-btn vongi-login-btn">
+				<button class="mui-btn mui-btn-primary" @click="submit">
+					提 交
+				</button>
+			</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: 'RegisterPensionStep4',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+			Cropper
+		},
+		data() {
+			return {
+				pageTitle: '注册',
+
+				subForm: {
+					sceneId: '',
+					sceneName: '',
+					personRoleId: '',
+					roleName: '',
+					name: '',
+					telephone: '',
+					personId: '',
+					companyId: '',
+					companyName: '请选择',
+					companyStructureId: '',
+					serviceCompanyId: '',
+					serviceCompanyName: '请选择',
+					//最终选择的数据
+					selectCompanyStructureList: [],
+					address: '',
+					idCard: '',
+					faceImageUrl: '',
+					popularizePersonId: ''
+				},
+
+				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]
+				},
+				
+				agreement: 0,
+			}
+		},
+		created() {
+			this.subForm = this.register_form_data;
+
+			if (this.person_data) {
+				this.subForm.name = this.subForm.name ? this.subForm.name : this.person_data.name;
+				this.subForm.telephone = this.subForm.telephone ? this.subForm.telephone : this.person_data.phone;
+				this.subForm.idCard = this.subForm.idCard ? this.subForm.idCard : this.person_data.idCard;
+				this.subForm.faceImageUrl = this.subForm.faceImageUrl ? this.subForm.faceImageUrl : this.person_data.faceImageUrl;
+			}
+
+			if (this.invitation_code) {
+				this.subForm.popularizePersonId = this.invitation_code;
+			}
+		},
+		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 if (!this.agreement) {
+					mui.toast('请同意协议');
+					return false;
+				}  else {
+					return true;
+				}
+			},
+			//提交
+			submit() {
+				if (this.checkFrom()) {
+					this.isLoading = true;
+					//传递openid
+					this.subForm.openId = this.openId;
+					API_Person.register(this.subForm).then(response => {
+						this.isLoading = false;
+
+						if (this.person_data) {
+							//mui.toast('提交成功,等待审核中');
+							mui.alert('提交成功,等待审核中', ' ', function() {
+								//跳转到项目主页上去
+								window.location.href = '../pension/#/master';
+							});
+						} else {
+							//mui.toast('提交成功,等待审核中');
+							var _this = this;
+							mui.alert('提交成功,等待审核中', ' ', function() {
+								_this.$router.push({
+									name: 'UserLogin',
+									project: 'business'
+								})
+							});
+						}
+
+
+					}).catch(error => {
+						this.isLoading = false;
+						mui.toast(error);
+					})
+				}
+			},
+			//弹出提示
+			alertTips() {
+				mui.alert('照片将用于人脸识别设备，请上传清晰的免冠登记照或肩部以上近照。', ' ', function() {
+
+				});
+			},
+			asynCallBack() {
+
+			},
+			...mapMutations({
+				set_register_form_data: types.SET_REGISTER_FORM_DATA,
+			})
+		},
+		mounted() {
+			//获取微信配置
+			WxJsApi.getWxConfig();
+		},
+		destroyed() {
+
+		},
+		computed: {
+			companyStructureName: {
+				// getter
+				get: function() {
+					let nameArr = [];
+					this.subForm.selectCompanyStructureList.forEach(function(item) {
+						nameArr.push(item.name);
+					})
+					return nameArr.join('-');
+				},
+				// setter
+				set: function(newValue) {
+					console.log(newValue)
+				}
+			},
+			companyLabel: {
+				// getter
+				get: function() {
+					if (this.subForm.sceneId == '3') {
+						return '养老机构';
+					} else if (this.subForm.sceneId == '4') {
+						return '所在小区';
+					} else {
+						return '';
+					}
+				},
+				// setter
+				set: function(newValue) {
+					console.log(newValue)
+				}
+			},
+
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+				register_form_data: 'register_form_data',
+				invitation_code: 'invitation_code'
+			})
+		}
+	}
+</script>
+
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
+<style src="$project/assets/css/iconfont.css"></style>
+<style>
+</style>