家庭成员管理

src/components/TopHeader.vue

@@ -6,7 +6,7 @@
 		</template>
 		<a v-if="leftShow" class="mui-icon mui-icon-left-nav mui-pull-left" :routeName="routeName" @click="goBack"></a>
 		<a v-if="rightLink.show" @click="doRightLink" class="fyy-bar mui-pull-right">
-			<span :class="'mui-icon iconfont '+rightLink.icon" :style="rightLink.style">
+			<span :class="'mui-icon '+(rightLink.icon.indexOf('mui-')>-1?'':'iconfont')+' '+rightLink.icon" :style="rightLink.style">
 				<span class="header-right-wz">
 					{{rightLink.title}}<i></i>
 				</span>

src/projects/business/apis/Master/family.js

@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+import Qs from 'qs';
+
+//获取成员列表
+export function getPersonList(params) {
+	return request({
+		url: '/mobile/personFamilyApi/pageList',
+		data: Qs.stringify(params),
+		method: 'post',
+	})
+}
+
+//增加成员
+export function addPerson(params) {
+	return request.post('/mobile/personFamilyApi/add', params, {
+		headers: {
+			"Content-Type": "application/json"
+		}
+	});
+}
+
+//获取成员详情
+export function getPersonInfo(id) {
+	return request({
+		url: '/mobile/personFamilyApi/detail',
+		params: {
+			id: id
+		},
+		method: 'get',
+	})
+}
+
+//删除成员
+export function delPerson(id) {
+	return request({
+		url: '/mobile/personFamilyApi/delete',
+		data: Qs.stringify({
+			id: id
+		}),
+		method: 'post',
+	})
+}

src/projects/business/router/master.js

@@ -1192,9 +1192,10 @@ const routesMaster = [
 						name: 'MasterFamilyAdd',
 						component: () => import('@/views/Master/Family/Add.vue'),
 						meta: {
-							requireAuth: false,
+							requireAuth: true,
 							role: [],
 							title: '家庭成员添加',
+							form: true
 						}
 					},
 				],

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

@@ -1,20 +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>
-			<a class="mui-pull-right colorfe616c" href=""><span class="mui-icon mui-icon-trash"></span></a>
-		</header>
+	<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>富润·沙市花园</span>
+						<span v-text="subForm.companyName"></span>
 					</div>
 					<div class="mui-input-row">
 						<label>房号</label>
-						<span>1-1-2201</span>
+						<span v-text="subForm.structureName"></span>
 					</div>
 				</form>
 			</div>
@@ -22,32 +20,267 @@
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label style="width:40%">家庭成员姓名<i class="colorfe616c">*</i></label>
-						<span style="width:60%">姓名</span>
+						<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>
-						<span>15500001111</span>
+						<input type="number" v-model="subForm.phone" class="mui-input-clear" placeholder="请输入手机号码">
 					</div>
 					<div class="mui-input-row">
 						<label>身份证号</label>
-						<input type="text" class="mui-input-clear" placeholder="请输入身份证号">
+						<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"></i></label>
-						<button class="mui-btn mui-btn-block mui-navigate-right" type='button' style="width:50%">
-							<img src="~$project/assets/img/audit1.png" /> 
+						<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="submit" class="mui-btn mui-btn-primary ">保  存</button></div>
+			<div class="bindfyy-btn"><button type="button" @click="submit" class="mui-btn mui-btn-primary ">保 存</button></div>
 		</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: 'MasterFamilyAdd',
+		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: '',
+				},
+
+				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>

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

@@ -1,44 +1,137 @@
 <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-qqhm">
 			<ul class="mui-table-view">
-				<li class="mui-table-view-cell">
-					<a class="mui-navigate-right" href="#">
-						<div class="mui-col-xs-8  mui-pull-left flew-items">
-							<div class="mui-media-object mui-pull-left "><img src="~$project/assets/img/03.jpg" width="50" /></div>
-							<div class="mui-media-body">
-								<h3>赵双龙</h3>
-								<p class='mui-ellipsis'>18600001111</p>
-							</div>
-						</div>
-						<span class=" mui-badge vongi-badge-primary">家属</span>	
-					</a>
-				</li>
-				<li class="mui-table-view-cell">
-					<a class="mui-navigate-right" href="#">
+				<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="~$project/assets/img/03.jpg" width="50" /></div>
+							<div class="mui-media-object mui-pull-left "><img :src="item.faceImageUrl" width="50" /></div>
 							<div class="mui-media-body">
-								<h3>赵双龙</h3>
-								<p class='mui-ellipsis'>18600001111</p>
+								<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>	
-					</a>
+						<!-- <span class=" mui-badge vongi-badge-primary">家属</span> -->
+					</router-link>
 				</li>
 			</ul>
 		</div>
 		<div class="fyy-footer">
-			<div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-primary ">添加家庭成员账号</button></div>
+			<div class="bindfyy-btn"><button type="button" @click="goToAdd" class="mui-btn mui-btn-primary ">添加家庭成员账号</button></div>
 		</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: 'MasterFamily',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+			NullList
+		},
+		data() {
+			return {
+				pageTitle: '家庭成员管理',
+
+				isLoading: false,
+
+				listForm: {
+					pageIndex: 1,
+					pageSize: 20,
+					totalPage: 1,
+					type: this.$route.query.type
+				},
+				recordList: [],
+			}
+		},
+		created() {
+			if (this.$route.query.title) {
+				this.pageTitle = this.$route.query.title;
+			}
+		},
+		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>