任务详情

components/tm-button/tm-button.vue

@@ -0,0 +1,46 @@
+<template>
+	<view :class="['tm-button-container', true ? 'pramary' : '']">
+		<text class="btn-text">确定</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="less">
+	.tm-button-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 312.5rpx;
+		height: 62.5rpx;
+		background: #3377FF;
+		border-radius: 37.5rpx;
+		border: 1.25rpx solid #3377FF;
+		
+		.btn-text {
+			font-size: 22.5rpx;
+			letter-spacing: 2.5rpx;
+			color: #fff;
+		}
+	}
+	
+	.tm-button-container.pramary {
+		background-color: #FFFFFF;
+		 
+		 .btn-text {
+		 	color: #3377FF;
+		 }
+	}
+
+</style>

components/tm-tabbar/tm-tabbar.vue

@@ -118,8 +118,9 @@
 		left: 0;
 		bottom: 0;
 		display: flex;
+		width: 100%; 
 		height: 87.5rpx;
-		width: 100%;
+		border-top: 0.62rpx solid #DADEE6;
 		background-color: #fff;
 		
 		.tab-item {

components/uni-segmented-control/uni-segmented-control.vue

@@ -0,0 +1,124 @@
+<template>
+	<view :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]" :style="{ borderColor: styleType === 'text' ? '' : activeColor }"
+	 class="segmented-control">
+		<view v-for="(item, index) in values" :class="[ styleType === 'text'?'segmented-control__item--text': 'segmented-control__item--button' , index === currentIndex&&styleType === 'button'?'segmented-control__item--button--active': '' , index === 0&&styleType === 'button'?'segmented-control__item--button--first': '',index === values.length - 1&&styleType === 'button'?'segmented-control__item--button--last': '' ]"
+		 :key="index" :style="{
+        backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',borderColor: index === currentIndex&&styleType === 'text'||styleType === 'button'?activeColor:'transparent'
+      }"
+		 class="segmented-control__item" @click="_onClick(index)">
+			<text :style="{color:
+          index === currentIndex
+            ? styleType === 'text'
+              ? activeColor
+              : '#fff'
+            : styleType === 'text'
+              ? '#000'
+              : activeColor}"
+			 class="segmented-control__text">{{ item }}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'UniSegmentedControl',
+		props: {
+			current: {
+				type: Number,
+				default: 0
+			},
+			values: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			activeColor: {
+				type: String,
+				default: '#007aff'
+			},
+			styleType: {
+				type: String,
+				default: 'button'
+			}
+		},
+		data() {
+			return {
+				currentIndex: 0
+			}
+		},
+		watch: {
+			current(val) {
+				if (val !== this.currentIndex) {
+					this.currentIndex = val
+				}
+			}
+		},
+		created() {
+			this.currentIndex = this.current
+		},
+		methods: {
+			_onClick(index) {
+				if (this.currentIndex !== index) {
+					this.currentIndex = index
+					this.$emit('clickItem', {currentIndex:index})
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '@/uni.scss';
+
+	.segmented-control {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		box-sizing: border-box;
+		/* #endif */
+		flex-direction: row;
+		height: 36px;
+		overflow: hidden;
+	}
+
+	.segmented-control__item {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		box-sizing: border-box;
+		/* #endif */
+		position: relative;
+		flex: 1;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.segmented-control__item--button {
+		border-style: solid;
+		border-top-width: 1px;
+		border-bottom-width: 1px;
+		border-right-width: 1px;
+		border-left-width: 0;
+	}
+
+	.segmented-control__item--button--first {
+		border-left-width: 1px;
+		border-top-left-radius: 5px;
+		border-bottom-left-radius: 5px;
+	}
+
+	.segmented-control__item--button--last {
+		border-top-right-radius: 5px;
+		border-bottom-right-radius: 5px;
+	}
+
+	.segmented-control__item--text {
+		border-bottom-style: solid;
+		border-bottom-width: 3px;
+	}
+
+	.segmented-control__text {
+		font-size: 16px;
+		line-height: 20px;
+		text-align: center;
+	}
+</style>

pages.json

@@ -10,12 +10,20 @@
 				"navigationBarTitleText": "创建情境",
 				"enablePullDownRefresh": false
 			}
-		},{
+		}, 
+	 {
 			"path": "pages/mission/mission",
 			"style": {
-			  "navigationBarTitleText": "任务",
+				"navigationBarTitleText": "任务",
 				"enablePullDownRefresh": false
 			}
+	 }, 
+	 {
+			"path" : "pages/mission-details/mission-details",
+			"style": {
+				"navigationBarTitleText": "改善任务",
+				"enablePullDownRefresh": false
+			}	
 		}
   ],
 	"globalStyle": {

pages/mission-details/mission-details.vue

@@ -0,0 +1,156 @@
+<template>
+	<view class="mission-details-page">
+		<scroll-view class="scroll-y" scroll-y="true">
+			<list-item :isClose="true" />
+			<view class="mission-plan">
+				<view class="label">
+					<text>改善进度</text>
+				</view>
+				<view class="plan-box">
+					<template v-for="(item, i) in list">
+						<view class="row" :key="i">
+							<view class="col">
+								<image 
+								  class="plan-icon" 
+									:src="`/static/${i === list.length - 1 ? 'check-radio' : 'check-no'}.png`">
+								</image>
+								<view class="line" v-show="i != list.length -1"></view>
+							</view>
+						  <view class="col">
+								<view class="title">
+									<text>{{ item.title }}</text>
+								</view>
+								<view class="sub-box">
+									<view class="sub-title">
+										<text>{{ item.subTitle }}</text>
+									</view>	
+									<view class="sub-title">
+										<text>{{ item.date }}</text>
+									</view>
+								</view>
+						  </view>
+						</view>
+					</template>
+					<view class="btn-group">
+						<tm-button />
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	// 改善任务
+	import listItem from '../mission/components/mission-list/list-item.vue';
+	export default {
+		data() {
+			return {
+        list: [
+					{title: '查核人：王晓雪', subTitle: '发送改善通知，查核结果：主要缺失', date: '2020-11-22 15:30:22'},
+					{title: '单位负责人', subTitle: '发送改善通知，查核结果：主要缺失', date: '2020-11-22 15:30:22'}
+				]
+			}
+		},
+		methods: {
+			
+		},
+		components: {
+			listItem, 
+		}
+	}
+</script>
+
+<style lang="less">
+	.mission-details-page {
+		height: 100%;
+		padding-top: 15rpx;
+		background-color: #F5F6FA;
+		
+		.scroll-y {
+			height: 100%;
+			
+			.mission-plan {
+				
+				.label {
+					margin-top: 25rpx;
+					margin-bottom: 15rpx;
+					height: 20rpx;
+					line-height: 20rpx;
+					padding-left: 25rpx;
+					
+					text {
+						font-size: 20rpx;
+						color: #666F80;
+					}
+				}
+				
+				.plan-box {
+					padding: 25rpx;
+					background-color: #fff;
+					
+					.row {
+						display: flex;
+						
+						.col {
+							
+							.title {
+								display: flex;
+								align-items: center;
+								margin-bottom: 15rpx;
+								height: 25rpx;
+							
+							  >text {
+									font-size: 22.5rpx;
+									color: #292C33;
+								}
+							}
+							
+							.sub-box {
+								display: flex;
+								flex-direction: column;
+								
+								.sub-title {
+									display: flex;
+									align-items: center;
+									margin-bottom: 15rpx;
+									height: 20rpx;
+									
+									&:last-child {
+										margin-bottom: 34.37rpx;
+									}
+									
+									>text {
+										font-size: 20rpx;
+										color: #666E80;
+									}
+								}
+							}
+							
+							&:first-child {
+								display: flex;
+								flex-direction: column;
+								align-items: center;
+								margin-right: 15rpx;
+								width: 25rpx;
+								
+								.plan-icon {
+									margin-bottom: 17.5rpx;
+									width: 25rpx;
+									height: 25rpx;
+								}
+								
+								.line {
+									width: 5rpx;
+									height: 75rpx;
+									background-color: #E6EAF2;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+</style>

pages/mission/components/mission-list/list-item.vue

@@ -1,21 +1,21 @@
 <template>
-	<view class="mission-list-item">
-		<view v-if="true" class="time">
+	<view class="mission-list-item" @click="gooDetails">
+		<view v-if="!isClose" class="time">
 			<text class="com-text">2020-11-26 15:33:08</text>
 		</view>
 		<view class="card">
 	    <view class="top-box">
-				<view class="bg-box">
-					<text>改善中</text>
+				<view :class="['bg-box', isClose ? 'disabled-bg' : 'hight-bg']">
+					<text>{{isClose ? '改善结案' : '改善中'}}</text>
 				</view>
 	    	<text class="title">柜子上方50cm不能遮住喷水器</text>
 	    	<view class="row">
 	    		<view class="col">
-	    			<image class="com-icon" src="/static/creatingSituations/icon上移.png"></image>
+	    			<image class="com-icon" src="/static/search-icon.png"></image>
 	    			<text class="com-text">第3/9次查核计划</text>
 	    		</view>	
 	    		<view class="col">
-	    			<image class="com-icon" src="/static/creatingSituations/icon上移.png"></image>
+	    			<image class="com-icon" src="/static/location-icon.png"></image>
 	    			<text class="com-text">分诊处（门诊）</text>
 	    		</view>
 	    	</view>
@@ -29,11 +29,34 @@
 </template>
 
 <script>
+	export default {
+		props: {
+			isClose: { // 是否结案
+				type: Boolean,
+				default: false
+			}
+		},
+		computed: {
+			bgImage(){
+				console.log(`url(~@/static/${!this.isClose ? 'hight' : 'disabled'}-bg.png)`)
+				return `../../../../static/${!this.isClose ? 'hight' : 'disabled'}-bg.png`;
+			}
+		},
+		methods: {
+			// 跳转详情页面（改善任务）
+			gooDetails(){
+				console.log(9)
+				uni.navigateTo({
+				  url: '/pages/mission-details/mission-details'
+				});
+			}
+		}
+	}
 </script>
 
 <style lang="less">
 	.mission-list-item {
-		margin-top:15rpx;
+		margin-bottom: 25rpx;
 		overflow: hidden;
 		
 		.time {
@@ -99,8 +122,8 @@
 				right: 0;
 				width: 112.5rpx;
 				height: 35rpx;
-				background-image: url('~@/static/mission/active-bg.png');
 				background-size: 100% 100%;
+				padding-left: 12.5rpx;
 				text-align: center;
 				
 				>text {
@@ -109,6 +132,13 @@
 					color: #fff;
 				}
 			}
+			
+			.hight-bg {
+				background-image: url('~@/static/hight-bg.png');
+			}
+			.disabled-bg {
+				background-image: url('~@/static/disabled-bg.png');
+			}
 		}
 		
 		.com-text {

pages/mission/components/mission-list/mission-list.vue

@@ -1,6 +1,20 @@
 <template>
 	<view class="mission-list">
-		<list-item />
+		<scroll-view class="scroll-y" scroll-y="true">
+			<list-item />
+			<list-item />
+			<view class="completed-box">
+				<view class="btn-box">
+					<view class="btn" @click="toggleBtn">
+						<image class="icon" :src="`/static/${btnSetting.icon}.png`"></image>
+						<text class="text">
+						  {{ btnSetting.name }}
+						</text>
+					</view>
+				</view>
+				<list-item :isClose="true" v-if="showCloseList" />
+			</view>
+		</scroll-view>
 		<tm-tabbar :permission="1" />
 	</view>
 </template>
@@ -11,9 +25,26 @@
 	export default {
 		data(){
 			return {
-				tabBars: [
-					{}
-				]
+				// 是否展开历史任务
+				showCloseList: false,
+				btnSetting: {
+					icon: 'up-icon', // 图标名
+					name: '展示历史任务' // 按钮显示名字
+				},
+				closeList: [1, 2, 3]
+			}
+		},
+		watch: {
+			showCloseList(newVal, oldVal) {
+				if(newVal != oldVal){
+					this.btnSetting.icon = newVal ? 'up-icon' : 'down-ion';
+					this.btnSetting.name = newVal ? '收起历史任务' : '展示历史任务';
+				}
+			}
+		},
+		methods: {
+			toggleBtn() {
+				this.showCloseList = !this.showCloseList
 			}
 		},
 		components: {
@@ -25,5 +56,41 @@
 <style lang="less">
 	.mission-list {
 		height: 100%;
+		padding-top: 15rpx;
+		
+		.scroll-y {
+			height: calc(100% - 87.5rpx);
+			
+			.completed-box {
+				
+				.btn-box {
+					display: flex;
+					justify-content: center;
+					margin-bottom: 25rpx;
+					height: 50rpx;
+					
+					.btn {
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						width: 225rpx;
+						height: 50rpx;
+						border-radius: 37.5rpx;
+						border: 1.25rpx solid #98A1B3;
+						
+						.icon {
+							margin-right: 6.25rpx;
+							width: 21.25rpx;
+							height: 12.5rpx;
+						}
+						
+						.text {
+							font-size: 22.5rpx;
+							color: #98A1B3;
+						}
+					}
+				}
+			}
+		}
 	}
 </style>