联系人

src/projects/pension/views/Master/Relatives/PhoneInfo.vue

@@ -1,49 +1,121 @@
 <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 class="mui-content vongi-tell">
-				<div class="vongi-center">
-					<div class="mui-media-object"><img src="~$project/assets/img/03.jpg" width="50" /></div>
-					<h1>赵刚</h1>
-                    <button type="button" class="mui-btn  mui-btn-danger mui-btn-outlined">紧急联系人</button>
-				</div>
-				<div class='flew-sp mui-h1'>
-					15500001111<span class="iconfont icon-ziyuan1 color55f868"></span>
-				</div>
+	<div>
+		<common @asynCallBack="asynCallBack"></common>
+		<top-header :pageTitle="pageTitle"></top-header>
+
+		<div class="mui-content vongi-tell">
+			<div class="vongi-center">
+				<div class="mui-media-object"><img src="~$project/assets/img/default_face.png" width="50" /></div>
+				<h1 v-text="detail.name"></h1>
+				<button v-if="detail.urgentStatus" type="button" class="mui-btn  mui-btn-danger mui-btn-outlined">紧急联系人</button>
 			</div>
-			<div class="fyy-footer">
-				<ul class="mui-table-view mui-grid-view mui-grid-9">
-					<li class="mui-table-view-cell mui-media mui-col-xs-6">
-						<a href="#">
-							<span class="mui-icon iconfont icon-xinbaniconshangchuan-"></span>
-							<div class="mui-media-body">编辑联系人</div>
-						</a>
-					</li>
-					<li class="mui-table-view-cell mui-media mui-col-xs-6">
-						<a href="#">
-							<span class="mui-icon iconfont icon-guanbi"></span>
-							<div class="mui-media-body">删除联系人</div>
-						</a>
-					</li>
-				</ul>
+			<div class='flew-sp mui-h1'>
+				{{detail.phone}}<a :href="'tel:'+detail.phone" class="iconfont icon-ziyuan1 color55f868"></a>
 			</div>
-</div>
+		</div>
+		<div class="fyy-footer">
+			<ul class="mui-table-view mui-grid-view mui-grid-9">
+				<li class="mui-table-view-cell mui-media mui-col-xs-6">
+					<router-link :to="{name:'MasterRelativesPhoneSave',query:{'bookId':detail.id}}">
+						<span class="mui-icon iconfont icon-xinbaniconshangchuan-"></span>
+						<div class="mui-media-body">编辑联系人</div>
+					</router-link>
+				</li>
+				<li class="mui-table-view-cell mui-media mui-col-xs-6">
+					<a @click="del">
+						<span class="mui-icon iconfont icon-guanbi"></span>
+						<div class="mui-media-body">删除联系人</div>
+					</a>
+				</li>
+			</ul>
+		</div>
+
+		<loading :visible="isLoading"></loading>
+	</div>
 </template>
 
 <script>
-export default {
-        name: 'Login',
-        components: {},
-        mounted() {
-            document.body.style.backgroundColor = '#fff';
-        },
-        destroyed() {
-            document.body.style.backgroundColor = '';
-            }
-    }
+	import * as API_Relatives from '@/apis/Master/relatives'
+	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'
+	export default {
+		name: 'MasterRelativesPhoneInfo',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+		},
+		data() {
+			return {
+				pageTitle: '联系人',
+
+				isLoading: false,
+
+				bookId: this.$route.query.bookId,
+				detail: {}
+			}
+		},
+		created() {
+
+		},
+		methods: {
+			//获取详情
+			getInfo() {
+				this.isLoading = true;
+				API_Relatives.getPhoneNumberInfo(this.bookId).then(response => {
+					this.isLoading = false;
+
+					this.detail = response.person;
+
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//删除
+			del() {
+				var _this = this;
+				var btnArray = ['取消', '确定'];
+				mui.confirm('确定删除此联系人吗？', '删除联系人', btnArray, function(e) {
+					if (e.index == 1) {
+						_this.isLoading = true;
+						API_Relatives.delPhoneNumber(_this.bookId).then(response => {
+							_this.isLoading = false;
+
+							mui.toast('处理成功');
+							_this.$router.go(-1);
+
+						}).catch(error => {
+							_this.isLoading = false;
+							mui.toast(error);
+						})
+					}
+				});
+			},
+			asynCallBack() {},
+		},
+		mounted() {
+			//获取详情
+			this.getInfo();
+			document.body.style.backgroundColor = '#fff';
+		},
+		destroyed() {
+			document.body.style.backgroundColor = '';
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+			})
+		}
+	}
 </script>
 
 <style scoped src="$project/assets/css/pension.css"></style>

src/projects/pension/views/Master/Relatives/PhoneList.vue

@@ -1,31 +1,123 @@
 <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">
 			<ul class="mui-table-view">
-				<li class="mui-table-view-cell">
-					<a class="mui-navigate-right" href="#">
-						<h1>赵双龙</h1>
-                        <button type="button" class="mui-btn  mui-btn-danger mui-btn-outlined">紧急联系人</button>
-					</a>
-				</li>
-				<li class="mui-table-view-cell">
-					<a class="mui-navigate-right" href="#">
-						<h1>赵双龙</h1>
-					</a>
+				<li v-for="(item,index) in recordList" class="mui-table-view-cell">
+					<router-link :to="{name:'MasterRelativesPhoneInfo',query:{bookId:item.id}}" class="mui-navigate-right">
+						<h1 v-text="item.name"></h1>
+						<button v-show="item.urgentStatus" type="button" class="mui-btn  mui-btn-danger mui-btn-outlined">紧急联系人</button>
+					</router-link>
 				</li>
 			</ul>
 		</div>
-		<div class="fyy-footer">
+		<div class="fyy-footer" @click="goToUpdate">
 			<div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-pink ">添加联系人</button></div>
 		</div>
-</div>
+
+		<loading :visible="isLoading"></loading>
+	</div>
 </template>
 
 <script>
+	import * as API_Relatives from '@/apis/Master/relatives'
+	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: 'MasterRelativesPhoneList',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+			NullList
+		},
+		data() {
+			return {
+				pageTitle: '联系人',
+
+				isLoading: false,
+
+				listForm: {
+					pageIndex: 1,
+					pageSize: 20,
+					totalPage: 1,
+				},
+				recordList: [],
+			}
+		},
+		created() {},
+		methods: {
+			//获取列表
+			getList() {
+				this.isLoading = true;
+				API_Relatives.getPhoneNumberList(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;
+					}
+				}
+			},
+			//跳转增加
+			goToUpdate() {
+				this.$router.push({
+					name: 'MasterRelativesPhoneSave'
+				})
+			},
+			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/pension.css"></style>

src/projects/pension/views/Master/Relatives/PhoneSave.vue

@@ -1,41 +1,168 @@
 <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 class="mui-content">			
+	<div>
+		<common @asynCallBack="asynCallBack"></common>
+		<top-header :pageTitle="pageTitle"></top-header>
+
+		<div class="mui-content">
 			<div class="mui-content-padded vongi-qingjiadt vongi-editme">
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label>姓名<i class="colorfe616c">*</i></label>
-						<!--<input type="text" class="mui-input-clear" placeholder="请填写联系人姓名">-->
-						<span>赵刚</span>
+						<input type="text" v-model="subForm.name" class="mui-input-clear" placeholder="请填写联系人姓名">
 					</div>
 					<div class="mui-input-row">
 						<label>手机号码<i class="colorfe616c">*</i></label>
-						<!--<input type="text" class="mui-input-clear" placeholder="请填写联系人手机号码">-->
-						<span>15500001111</span>
+						<input type="text" v-model="subForm.phone" class="mui-input-clear" placeholder="请填写联系人手机号码">
 					</div>
-                    <div class="mui-input-row">
+					<div class="mui-input-row">
 						<label style="width:50%">设为紧急联系人</label>
-						<div id="autoLogin" class="mui-switch mui-active">
+						<div @click="subForm.urgentStatus=!subForm.urgentStatus" :class="'mui-switch '+(subForm.urgentStatus?'mui-active':'')">
 							<div class="mui-switch-handle"></div>
-						</div>	
+						</div>
 					</div>
 				</form>
 			</div>
 			<div class="vongi-btn vongi-login-btn">
-				<button class="mui-btn mui-btn-pink">保  存</button>
+				<button class="mui-btn mui-btn-pink" @click="save">保 存</button>
 				<button class="mui-btn mui-btn-danger mui-btn-outlined">删除联系人</button>
-			</div>			
+			</div>
 		</div>
-</div>
+
+		<loading :visible="isLoading"></loading>
+	</div>
 </template>
 
 <script>
+	import * as API_Relatives from '@/apis/Master/relatives'
+	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 {
+		checkPhone,
+	} from '$project/utils'
+	export default {
+		name: 'MasterRelativesPhoneSave',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+		},
+		data() {
+			return {
+
+				isLoading: false,
+
+				subForm: {
+					bookId: this.$route.query.bookId,
+					name: '',
+					phone: '',
+					urgentStatus: false
+				},
+
+				//detail: {}
+			}
+		},
+		created() {
+
+		},
+		methods: {
+			//获取详情
+			getInfo() {
+				this.isLoading = true;
+				API_Relatives.getPhoneNumberInfo(this.subForm.bookId).then(response => {
+					this.isLoading = false;
+
+					this.subForm.name = response.person.name;
+					this.subForm.phone = response.person.phone;
+					this.subForm.urgentStatus = response.person.urgentStatus;
+
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//检测表单
+			checkForm() {
+				let phoneResult = checkPhone(this.subForm.phone);
+				if (!this.subForm.name) {
+					mui.toast('请输入姓名');
+					return false;
+				} else if (typeof phoneResult == 'string') {
+					mui.toast(phoneResult);
+					return false;
+				} else {
+					return true;
+				}
+			},
+			//保存
+			save() {
+				if (this.checkForm()) {
+					this.isLoading = true;
+					API_Relatives.updatePhoneNumber(this.subForm).then(response => {
+						this.isLoading = false;
+
+						mui.toast('保存成功');
+						this.$router.go(-1);
+
+					}).catch(error => {
+						this.isLoading = false;
+						mui.toast(error);
+					})
+				}
+			},
+			asynCallBack() {},
+		},
+		mounted() {
+			if (this.actionType == 'edit') {
+				//获取详情
+				this.getInfo();
+			}
+		},
+		destroyed() {},
+		computed: {
+			pageTitle: {
+				// getter
+				get: function() {
+					if (this.subForm.bookId) {
+						return '编辑联系人';
+					} else {
+						return '新增联系人';
+					}
+				},
+				// setter
+				set: function(newValue) {
+					console.log(newValue)
+				}
+			},
+			actionType: {
+				// getter
+				get: function() {
+					if (this.subForm.bookId) {
+						return 'edit';
+					} else {
+						return 'add';
+					}
+				},
+				// 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/pension.css"></style>
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>
 <style src="$project/assets/css/iconfont.css"></style>