租客管理

src/projects/business/router/master.js

@@ -1200,6 +1200,38 @@ const routesMaster = [
 					},
 				],
 			},
+			
+			//租客管理
+			{
+				path: 'tenant',
+				component: () => import('../views/Layout.vue'),
+				children: [
+					//租客管理
+					{
+						path: '',
+						name: 'MasterTenant',
+						component: () => import('@/views/Master/Tenant/Home.vue'),
+						meta: {
+							requireAuth: true,
+							role: [],
+							title: '租客管理',
+							mode: true
+						}
+					},
+					//租客管理添加
+					{
+						path: 'add',
+						name: 'MasterTenantAdd',
+						component: () => import('@/views/Master/Tenant/Add.vue'),
+						meta: {
+							requireAuth: true,
+							role: [],
+							title: '租客管理添加',
+							form: true
+						}
+					},
+				],
+			},
 
 		],
 	},

src/projects/business/views/Master/Family/Add.vue

@@ -95,6 +95,7 @@
 					name: '',
 					phone: '',
 					structureName: '',
+					type: 0
 				},
 
 				imgBase64: '',

src/projects/business/views/Master/Family/Home.vue

@@ -59,16 +59,12 @@
 					pageIndex: 1,
 					pageSize: 20,
 					totalPage: 1,
-					type: this.$route.query.type
+					type: 0
 				},
 				recordList: [],
 			}
 		},
-		created() {
-			if (this.$route.query.title) {
-				this.pageTitle = this.$route.query.title;
-			}
-		},
+		created() {},
 		methods: {
 			//获取列表
 			getList() {

src/projects/business/views/Master/Tenant/Add.vue

@@ -0,0 +1,290 @@
+<template>
+	<div>
+		<common @asynCallBack="asynCallBack"></common>
+		<top-header :pageTitle="pageTitle" :rightLink="rightLink" :doRightLink="doRightLink"></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.companyName"></span>
+					</div>
+					<div class="mui-input-row">
+						<label>房号</label>
+						<span v-text="subForm.structureName"></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 style="width:40%">租客姓名<i class="colorfe616c">*</i></label>
+						<input type="text" style="width: 60%;" v-model="subForm.name" class="mui-input-clear" placeholder="请输入租客姓名">
+					</div>
+					<div class="mui-input-row">
+						<label>手机号码<i class="colorfe616c">*</i></label>
+						<input type="number" v-model="subForm.phone" class="mui-input-clear" placeholder="请输入手机号码">
+					</div>
+					<div class="mui-input-row">
+						<label>身份证号</label>
+						<input type="text" v-model="subForm.idCard" class="mui-input-clear" placeholder="请输入身份证号">
+					</div>
+					<div class="mui-input-row">
+						<label style="width:50%">人脸识别照片<i class="colorfe616c">*</i><i class="iconfont icon-tishi color4fc5f7" @click="valert"></i></label>
+						<button @click="chooseImage('faceImageUrl') " class="mui-btn mui-btn-block mui-navigate-right" type='button'
+						 style="width:50%">
+							<img v-if="subForm.faceImageUrl" :src="subForm.faceImageUrl" />
+							<a v-else>请选择</a>
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="fyy-footer">
+			<div class="bindfyy-btn"><button type="button" @click="submit" class="mui-btn mui-btn-primary ">保 存</button></div>
+		</div>
+
+		<loading :visible="isLoading"></loading>
+	</div>
+</template>
+
+<script>
+	import * as API_Family from '@/apis/Master/family'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import isReachBottom from '$project/utils/isReachBottom'
+	import TopHeader from '$project/components/TopHeader.vue'
+	import NullList from '$project/components/NullList.vue'
+	import {
+		checkPhone,
+		checkIdCard
+	} from '$project/utils'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	import Cropper from '$project/components/Cropper.vue'
+	import * as WxJsApi from '$project/utils/wxJsApi'
+	export default {
+		name: 'MasterTenantAdd',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+			NullList
+		},
+		data() {
+			return {
+				pageTitle: '添加租客账号',
+
+				isLoading: false,
+
+				rightLink: {
+					show: true,
+					icon: 'mui-icon-trash',
+					style: 'color:#FF6666',
+					title: ''
+				},
+
+				subForm: {
+					companyName: '',
+					faceImageUrl: '',
+					id: this.$route.query.id,
+					idCard: '',
+					name: '',
+					phone: '',
+					structureName: '',
+					type: 1
+				},
+
+				imgBase64: '',
+
+				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() {
+			if (this.person_popedom.companyName) {
+				this.subForm.companyName = this.person_popedom.companyName;
+			}
+			if (this.person_popedom.structureName) {
+				this.subForm.structureName = this.person_popedom.structureName;
+			}
+		},
+		methods: {
+			//获取详情
+			getDetail() {
+				this.isLoading = true;
+				API_Family.getPersonInfo(this.subForm.id).then(response => {
+					this.isLoading = false;
+
+					this.subForm = response;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//检测
+			checkForm() {
+				let phoneResult = checkPhone(this.subForm.phone);
+				let idCardResult = checkIdCard(this.subForm.idCard);
+				if (!this.subForm.name) {
+					mui.toast('请输入姓名');
+					return false;
+				} else if (typeof phoneResult == 'string') {
+					mui.toast(phoneResult);
+					return false;
+				} else if (this.subForm.idCard && typeof idCardResult == 'string') {
+					mui.toast(idCardResult);
+					return false;
+				} else if (!this.subForm.faceImageUrl) {
+					mui.toast('请上传人脸识别照片');
+					return false;
+				} else {
+					return true;
+				}
+			},
+			//提交
+			submit() {
+				if (this.checkForm()) {
+					this.isLoading = true;
+					API_Family.addPerson(this.subForm).then(response => {
+						this.isLoading = false;
+						mui.toast(this.actionTitle + '成功');
+
+						this.$router.go(-1);
+					}).catch(error => {
+						this.isLoading = false;
+						mui.toast(error);
+					})
+				}
+			},
+			//微信选择图片
+			chooseImage(field) {
+				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(field);
+					//this.uploadpic(field);
+				}).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(field) {
+				this.isLoading = true;
+				WxJsApi.uploadPic(this.imgBase64).then(response => {
+					this.isLoading = false;
+
+					this.subForm[field] = response;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//弹窗
+			valert() {
+				mui.alert("照片将用于人脸识别设备，请上传清晰的免冠登记照或肩部以上近照。", '   ', ['知道了'])
+			},
+			del() {
+				this.isLoading = true;
+				API_Family.delPerson(this.subForm.id).then(response => {
+					this.isLoading = false;
+
+					mui.toast('删除成功');
+					this.$router.go(-1);
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//右上角点击事件
+			doRightLink() {
+				var _this = this;
+				var btnArray = ['否', '是'];
+				mui.confirm('确认删除此家庭成员？删除后系统将清除该家庭成员的帐号信息，该名家庭成员将无法以此身份登录本系统。', '确认删除', btnArray, function(e) {
+					if (e.index == 1) {
+						_this.del();
+					}
+				})
+			},
+			asynCallBack() {
+
+			},
+		},
+		mounted() {
+			if (this.subForm.id) {
+				//获取详情
+				this.getDetail();
+			}
+		},
+		destroyed() {
+
+		},
+		computed: {
+			actionTitle: {
+				// getter
+				get: function() {
+					return this.subForm.id ? '修改' : '添加';
+				},
+				// setter
+				set: function(newValue) {
+					console.log(newValue)
+				}
+			},
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+			})
+		}
+	}
+</script>
+
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
+<style src="$project/assets/css/iconfont.css"></style>
+<style>
+</style>

src/projects/business/views/Master/Tenant/Home.vue

@@ -0,0 +1,136 @@
+<template>
+	<div>
+		<common @asynCallBack="asynCallBack"></common>
+		<top-header :pageTitle="pageTitle"></top-header>
+
+		<div class="mui-content vongi-qqhm">
+			<ul class="mui-table-view">
+				<li v-for="(item,index) in recordList" class="mui-table-view-cell">
+					<router-link class="mui-navigate-right" :to="{name:'MasterFamilyAdd',query:{id:item.id}}">
+						<div class="mui-col-xs-8  mui-pull-left flew-items">
+							<div class="mui-media-object mui-pull-left "><img :src="item.faceImageUrl" width="50" /></div>
+							<div class="mui-media-body">
+								<h3 v-text="item.name"></h3>
+								<p class='mui-ellipsis' v-text="item.phone"></p>
+							</div>
+						</div>
+						<!-- <span class=" mui-badge vongi-badge-primary">家属</span> -->
+					</router-link>
+				</li>
+			</ul>
+		</div>
+		<div class="fyy-footer">
+			<div class="bindfyy-btn"><button type="button" @click="goToAdd" class="mui-btn mui-btn-primary ">添加租客账号</button></div>
+		</div>
+
+		<NullList :remark="'暂无租客'" v-if="!recordList.length"></NullList>
+
+		<loading :visible="isLoading"></loading>
+	</div>
+</template>
+
+<script>
+	import * as API_Family from '@/apis/Master/family'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import isReachBottom from '$project/utils/isReachBottom'
+	import TopHeader from '$project/components/TopHeader.vue'
+	import NullList from '$project/components/NullList.vue'
+
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	export default {
+		name: 'MasterTenant',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+			NullList
+		},
+		data() {
+			return {
+				pageTitle: '租客管理',
+
+				isLoading: false,
+
+				listForm: {
+					pageIndex: 1,
+					pageSize: 20,
+					totalPage: 1,
+					type: 1
+				},
+				recordList: [],
+			}
+		},
+		created() {},
+		methods: {
+			//获取列表
+			getList() {
+				this.isLoading = true;
+				API_Family.getPersonList(this.listForm).then(response => {
+					if (response) {
+						if (this.listForm.pageIndex == 1) {
+							this.recordList = response.data;
+							this.listForm.pageIndex = response.pageNumber;
+							this.listForm.totalPage = response.totalPage;
+						} else {
+							this.recordList = [
+								...this.recordList,
+								...response.data
+							];
+						}
+					}
+					this.listForm.pageIndex++;
+					this.isLoading = 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.getList();
+					} else {
+						return;
+					}
+				}
+			},
+			//添加
+			goToAdd() {
+				this.$router.push({
+					name: 'MasterFamilyAdd'
+				})
+			},
+			asynCallBack() {
+
+			},
+		},
+		mounted() {
+			this.getList();
+			//监控下拉加载事件
+			var _this = this;
+			window.addEventListener('scroll', _this.handleScrool);
+		},
+		destroyed() {
+			//销毁监听事件
+			var _this = this;
+			window.removeEventListener('scroll', _this.handleScrool);
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+			})
+		}
+	}
+</script>
+
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
+<style src="$project/assets/css/iconfont.css"></style>
+<style>
+</style>