疫情上报列表及详情

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

@@ -173,3 +173,20 @@ export function getDetail(id, popedom) {
 		method: 'get',
 	})
 }
+
+//获取疫情上报记录
+export function getReportList() {
+	return request({
+		url: '/mobile/epidemicReportApi/pageList',
+		data: Qs.stringify({}),
+		method: 'post',
+	})
+}
+
+//获取疫情上报记录详情
+export function getReportInfo(id) {
+	return request({
+		url: '/mobile/epidemicReportApi/detail/' + id,
+		method: 'get',
+	})
+}

src/projects/business/views/Master/Health/ReportInfo.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 margin60">
 			<div class="mui-content-padded vongi-qingjiadt">
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label>上报人</label>
-						<span>1111</span>
+						<span v-text="detail.name"></span>
 					</div>
 					<div class="mui-input-row">
 						<label>联系方式</label>
-						<span>15500001111</span>
+						<span v-text="detail.phone"></span>
 					</div>
 				</form>
 			</div>
@@ -21,47 +20,105 @@
 				<form class="mui-input-group vongi-wybx">
 					<div class="mui-input-row padd10">
 						<label>上报内容</label>
-						<span class="vongi-span vongi-meform-pho">我是XXX公司的XXX，发现XXX在XX地体温测量数据超过37.3℃，XXXX年XX月XX日出现咳嗽发烧等疑似症状。</span>
+						<span class="vongi-span vongi-meform-pho" v-text="detail.content"></span>
 						<span class="vongi-span vongi-wordcard vongi-meform-pho">
 							<div class="fyy-upphoto flew">
-								<div class="mui-col-xs-3">
-									<img src="~$project/assets/img/zhaop.jpg" />
-								</div>
-								<div class="mui-col-xs-3">
-									<img src="~$project/assets/img/zhaop.jpg" />
-								</div>
-								<div class="mui-col-xs-3">
-									<img src="~$project/assets/img/zhaop.jpg" />
-								</div>
-								<div class="mui-col-xs-3">
-									<img src="~$project/assets/img/zhaop.jpg" />
+								<div v-for="(item,index) in detail.img.split(',')" class="mui-col-xs-3">
+									<img :src="item" />
 								</div>
 							</div>
 						</span>
 					</div>
-					
+
 				</form>
 			</div>
 			<div class="mui-content-padded vongi-qingjiadt">
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label>上报时间</label>
-						<span>2020-10-10 10:00:00</span>
+						<span v-text="detail.createTime"></span>
 					</div>
 					<div class="mui-input-row">
 						<label>上报状态</label>
-						<span class="color55f868">提交成功</span>
+						<span class="color55f868" v-text="detail.statusN"></span>
 					</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="fyy-footer">
+			<div class="bindfyy-btn" @click="goBack"><button type="submit" class="mui-btn mui-btn-primary ">返 回</button></div>
 		</div>
-</div>
+
+		<loading :visible="isLoading"></loading>
+	</div>
 </template>
 
 <script>
+	import * as API_Health from '@/apis/Master/health'
+	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: 'MasterHealthReportInfo',
+		components: {
+			Common,
+			Loading,
+			TopHeader
+		},
+		data() {
+			return {
+				pageTitle: '疫情上报详情',
+
+				isLoading: false,
+
+				id: '',
+				detail: {
+					img: ''
+				},
+			}
+		},
+		created() {
+			this.id = this.$route.query.id ? this.$route.query.id : '';
+		},
+		methods: {
+			//获取详情
+			getDetail(id) {
+				this.id = id || this.id;
+				this.isLoading = true;
+				API_Health.getReportInfo(this.id).then(response => {
+
+					this.detail = response;
+
+					this.isLoading = false;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//返回
+			goBack() {
+				this.$router.go(-1);
+			},
+			asynCallBack() {
+
+			},
+		},
+		mounted() {
+			//获取详情
+			this.getDetail();
+		},
+		destroyed() {},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+			})
+		},
+	}
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>

src/projects/business/views/Master/Health/ReportList.vue

@@ -1,38 +1,130 @@
 <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">
 			<ul class="mui-table-view vongi-yqsb-list">
-				<li class="mui-table-view-cell">
-					<a href="" >
+				<li v-for="(item,index) in recordList" class="mui-table-view-cell">
+					<router-link :to="{name:'MasterHealthReportInfo',query:{id:item.id}}">
 						<div class="mui-media-body">
-							荆州市新型冠状病毒感染的通告状病毒感染的通告荆州市新型冠状病毒感染的通告状病毒感染的通告荆州市新型冠状病毒感染的通告状病毒感染的通告荆州市新型冠状病毒感染的通告状病毒感染的通告荆州市新型冠状病毒感染的通告状病毒感染的通告								
+							{{item.content}}
 						</div>
 						<span class="vongi-wordcard">
 							<div class="fyy-upphoto flew">
-								<div class="mui-col-xs-3">
-									<img src="~$project/assets/img/zhaop.jpg" />
-								</div>
-                                <div class="mui-col-xs-3">
-									<img src="~$project/assets/img/zhaop.jpg" />
+								<div v-for="(iten,inden) in item.img.split(',')" class="mui-col-xs-3">
+									<img :src="iten" />
 								</div>
 							</div>
 						</span>
-						<p class="flew-sp"><span class="color55f868">提交成功</span><span>10-21 19:00</span></p>
-					</a>
+						<p class="flew-sp"><span class="color55f868" v-text="item.statusN"></span><span v-text="item.createTime"></span></p>
+					</router-link>
 				</li>
-			</ul>			
+			</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" @click="goToForm"><button type="submit" class="mui-btn mui-btn-primary ">疫情上报</button></div>
 		</div>
-</div>
+
+		<loading :visible="isLoading"></loading>
+	</div>
 </template>
 
 <script>
+	import * as API_Health from '@/apis/Master/health'
+	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 {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	export default {
+		name: 'MasterHealthReportList',
+		components: {
+			Common,
+			Loading,
+			TopHeader
+		},
+		data() {
+			return {
+				pageTitle: '疫情上报记录',
+
+				isLoading: false,
+
+				listForm: {
+					pageIndex: 1,
+					pageSize: 20,
+					totalPage: 1,
+				},
+				recordList: [],
+			}
+		},
+		created() {},
+		methods: {
+			//获取列表
+			getList() {
+				this.isLoading = true;
+				API_Health.getReportList(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;
+					}
+				}
+			},
+			//填写页面
+			goToForm() {
+				this.$router.push({
+					name: 'MasterHealthReport'
+				})
+			},
+			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>