合并冲突

App.vue

@@ -47,9 +47,34 @@
 		line-height: 18.75rpx;
 	}
 	
+	body,
+	uni-app,
+	uni-page {
+		background-color: #F5F6FA;
+	}
+	
 	view,
 	label,
 	scroll-view {
 		box-sizing: border-box;
 	}
+	
+	// 底部固定的按钮
+	.fixed-buttom-btn {
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-top: 12.5rpx;
+		width: 100%;
+		height: 75rpx;
+		background-color: #3377FF;
+		
+		.btn-text {
+			font-size: 22.5rpx;
+			color: #fff;
+		}
+	}
 </style>

README.md

@@ -7,6 +7,7 @@
 1. 步骤条：tm-steps，详细传参说明在组件内部。
 2. 树形控件：tm-trees。
 3. 底部tabBar：tm-tabbar。
+4. 单选列表组合：tm-radio-group。
 
 ### 公共组件的注册方式 
 ---

components/com-button/com-button.vue

@@ -0,0 +1,102 @@
+<template>
+	<view 
+	  :class="{'com-button': true, 'default': defaultClass }" 
+		:style="{width: btnWidth, height: btnHeight, borderRadius: btnRadius,background:background}"
+		 @click="btnClick">
+		<text class="btn-text" :style="{fontSize: fSize}">{{ btnText }}</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:{
+			width: { // 按钮宽度(直接写设计稿量取大小即可
+				type: Number,
+				default: () => {
+					return  160 
+				}
+			},
+			height: { // 按钮宽度(直接写设计稿量取大小即可
+				type: Number,
+				default: () => {
+					return  64 
+				}
+			},
+			btnText: {
+				type: String,
+				default: () => {
+					return  '完成' 
+				}
+			},
+			fontSize: {
+				type: Number,
+				default: () => {
+					return  28 
+				}
+			},
+			type: {
+				type: String,
+				default: () => {
+					return 'pramary' 
+				}
+			},
+			background: {
+				type: String,
+				default: () => {
+					return 'linear-gradient(90deg, #3377FF 0%, #4D97FF 100%)' 
+				}
+			}
+		},
+		computed: {
+			btnWidth() {
+				return this.width * 750 / 1200 + 'rpx';
+			},
+			btnHeight() {
+				return this.height * 750 / 1200 + 'rpx';
+			},
+			btnRadius() {
+				return this.height / 2 * 750 / 1200 + 'rpx';
+			},	
+			fSize() {
+				return this.fontSize * 750 / 1200 + 'rpx';
+			},
+			defaultClass() {
+				return this.type === 'default' ? true : false
+			},
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			btnClick() {
+				this.$emit('btnClick')
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.com-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 62.5rpx;
+		height: 31.25rpx;
+		background: linear-gradient(90deg, #3377FF 0%, #4D97FF 100%);
+		border-radius: 37.5rpx;
+		overflow: hidden;
+		color: #FFFFFF;
+		
+		.btn-text {
+			font-size: 10.93rpx;
+		}
+	}
+	
+	.default {
+		background: #E6EAF2;
+		color: #7A8599;
+	}
+
+</style>

components/tm-button/tm-button.vue

@@ -0,0 +1,56 @@
+<template>
+	<view
+    :class="['tm-button-container', type === 'pramary' ? 'pramary' : '']"
+     @click="btnClick" >
+		<text class="btn-text">{{ btnText }}</text>
+	</view>
+</template>
+
+<script>
+	export default {
+    props: {
+      //按钮类型 default：蓝色背景按钮；pramary：线条按钮
+      type: {
+        type: String,
+        default: 'default'
+      },
+      btnText: {
+        type: String,
+        default: '确定'
+      }
+    },
+		methods: {
+			btnClick() {
+				this.$emit('btnClick')
+			}
+		}
+	}
+</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-radio-group/tm-radio-group.vue

@@ -0,0 +1,107 @@
+<template>
+	<view class="tm-radio-group">
+		<view v-if="true" class="label-view">
+			<text>改善工具</text>
+		</view>
+		<view class="radio-group">
+			<template v-for="(item, i) in list">
+				<view class="radio-item" :key="i" @click="toggleSelect(item, i)">
+					<text class="text">{{ item[setting.name] }}</text>
+					<image class="icon" 
+					  :src="`/static/${item[setting.value] === defaultValue ? 'check-radio' : 'check-no'}.png`"></image>
+				</view>
+			</template>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * 单选列表组合
+	 * 芦荟
+	 * 2021.2.2
+	 * props：看下面，有注释说明
+	 */
+	export default {
+		props: {
+			// 渲染的数据
+			list: {
+				type: Array,
+				default: []
+			},	
+			// 选中的数据 
+			defaultValue: {
+				type: Number | String,
+				default: ''
+			},
+			// 单选组配置
+			setting: {
+				type: Object, 
+				default: {
+					value: 'value', // 设置当前选中的值（默认取value）
+					name: 'name' // 当前显示的文字（默认取name）
+				}
+			}
+		},
+		methods: {
+			/**
+			 * 选中变化调用
+			 * @param {Object} selectData 当前选中的对象
+			 * @param {Object} index 当前选中下标
+			 * 
+			 * 返回的参数
+			 * selectData[this.setting.value]: 当前选中的值
+			 * selectData： 当前选中的整条数据
+			 * index：      当前选中的下标
+			 */
+			toggleSelect(selectData, index){
+				this.$emit(
+				  'change', 
+				  selectData ? selectData[this.setting.value] : '', 
+					selectData, 
+					index
+				);
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+	.tm-radio-group {
+		
+		.label-view {
+			height: 47.5rpx;
+			line-height: 45rpx;
+			padding-left: 25rpx;
+			
+			>text {
+				font-size: 22.5rpx;
+				color: #666F80;
+			}
+		}
+		
+		.radio-group {
+			padding-left: 25rpx;
+			background-color: #fff;
+			
+			.radio-item {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				height: 87.5rpx;
+				border-bottom: 0.62rpx solid #DADEE6;
+				padding-right: 25rpx;
+				
+				.text {
+					font-size: 22.5rpx;
+					color: #292C33;
+				}
+				
+				.icon {
+					width: 25rpx;
+					height: 25rpx;
+				}
+			}
+		}
+	}
+</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>

package-lock.json

@@ -4,10 +4,25 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "crypto-js": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.0.0.tgz",
+      "integrity": "sha512-bzHZN8Pn+gS7DQA6n+iUmBfl0hO5DJq++QP3U6uTucDtk/0iGpXd/Gg7CGR0p8tJhofJyaKoWBuJI4eAO00BBg=="
+    },
     "moment": {
       "version": "2.29.1",
       "resolved": "https://registry.npm.taobao.org/moment/download/moment-2.29.1.tgz",
       "integrity": "sha1-sr52n6MZQL6e7qZGnAdeNQBvo9M="
+    },
+    "qs": {
+      "version": "6.9.6",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
+      "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ=="
+    },
+    "vuex": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
     }
   }
 }

package.json

@@ -4,6 +4,7 @@
   "description": "",
   "main": "main.js",
   "dependencies": {
+    "crypto-js": "^4.0.0",
     "moment": "^2.29.1",
     "qs": "^6.9.6",
     "vuex": "^3.6.0"

pages.json

@@ -1,30 +1,52 @@
 {
-	"pages": [{
-		"path": "pages/index/index",
-		"style": {
-			"navigationBarTitleText": "追踪方法学"
-		}
-	}, {
-		"path" : "pages/creatingSituations/creatingSituations",
-		"style" : {
+	"pages": [
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": "追踪方法学"
+			}
+		},
+		{
+			"path": "pages/login/login"
+		},
+		{
+			"path": "pages/creatingSituations/creatingSituations",
+			"style": {
 				"navigationBarTitleText": "创建情境",
 				"enablePullDownRefresh": false
 			}
-		},{
+		},
+		{
 			"path": "pages/mission/mission",
 			"style": {
-			  "navigationBarTitleText": "任务",
+				"navigationBarTitleText": "任务",
 				"enablePullDownRefresh": false
 			}
-		},{
+		},
+		{
 			"path": "pages/configure/configure",
 			"style": {
-			  "navigationBarTitleText": "配置",
+				"navigationBarTitleText": "配置",
+				"enablePullDownRefresh": false
+			}
+		},
+		{
+			"path": "pages/mission-details/mission-details",
+			"style": {
+				"navigationBarTitleText": "改善任务",
+				"enablePullDownRefresh": false
+			}
+		},
+		{
+			"path": "pages/mission-action/mission-action",
+			"style": {
+				"navigationBarTitleText": "改善任务",
 				"enablePullDownRefresh": false
 			}
 		}
-  ],
+	],
 	"globalStyle": {
+		"navigationStyle": "custom",
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "追踪方法学",
 		"navigationBarBackgroundColor": "#F8F8F8",
@@ -34,4 +56,4 @@
 		},
 		"rpxCalcMaxDeviceWidth": 9999
 	}
-}
+}

pages/login/login.vue

@@ -0,0 +1,131 @@
+<template>
+	<view class="login-model">
+		<view class="com-model">
+			<view class="top-box">
+				<image class="pic" src="/static/images/底纹.png"></image>
+				<text class="title-top">你好，</text>
+				<text class="title-buttom">欢迎使用追踪方法学系统</text>
+			</view>
+			<view class="main-content">
+				<input class="uni-input-box"
+				  placeholder="请输入账号"
+					placeholder-style="color: #A1A7B3"
+					v-model="username" />
+				<input class="uni-input-box"
+				  placeholder="请输入密码"
+					placeholder-style="color: #A1A7B3"
+					password
+					v-model="password" />
+				<com-button class="login-button"  
+					:width="998" :height="120" :fontSize="48" :background="isLogin?'#A3B1CC':''" btnText="登录" @btnClick="login" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import encryption from "../../utils/crypto.js";
+	export default {
+		data() {
+			return {
+				username: '', // 用户名
+				password: '', // 密码
+				rolList: [
+					{permission: 1, name: '管理员', pagePath: 'pages/creatingSituations/creatingSituations'}, // targetIndexs：targetList种对应的下标
+					{permission: 2, name: '查核组长',pagePath: 'pages/creatingSituations/creatingSituations'},
+					{permission: 3, name: '查核组员', pagePath: 'pages/creatingSituations/creatingSituations'},
+					{permission: 4, name: '单位负责人', pagePath: 'pages/creatingSituations/creatingSituations'},
+					{permission: 5, name: '改善者', pagePath: 'pages/mission/mission'}
+				]
+			}
+		},
+		methods: {
+			login() {
+				if(this.isLogin) return
+				this.$store.dispatch({
+					type: 'login/commActions',
+					payload: {
+						key: 'login',
+						data: {
+							username: encryption(this.username),
+							password: encryption(this.password)
+						}
+					}
+				}).then((data) => {
+					if (data) {
+						uni.setStorageSync('hiId', data.hiId);
+						uni.setStorageSync('permissions', data.permissions);
+			      uni.setStorageSync('token', data.token);
+					  uni.setStorageSync('nowPermission', data.nowPermission);
+						this.rolToTarget(data.nowPermission)
+					}
+				});
+			},
+			//角色和对应的跳转页面
+			rolToTarget(nowPermission) {
+				if(nowPermission != 0){
+					let current = this.rolList.find(item => item.permission == nowPermission);
+					if(current){
+						// 页面跳转
+						uni.navigateTo({
+							 url: `/${current.pagePath}`
+						});
+					}
+				}
+			}
+		},
+		computed:{
+			//判断是否输入了用户名和密码
+			isLogin(){
+				return !this.username || !this.password;
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+ .pic{
+	 height: 281.25rpx;
+	 width: 430rpx;
+	 float: right;
+ }
+ .title-top{
+	 height: 45rpx;
+	 font-size: 45rpx;
+	 font-weight: bold;
+	 margin-top: 250rpx;
+	 margin-left: 62.5rpx;
+	 font-family: SourceHanSansCN-Bold, SourceHanSansCN;
+	 color: #2E2F33;
+	 float: left;
+ }
+ .title-buttom{
+	 height: 45rpx;
+	 font-size: 45rpx;
+	 font-family: SourceHanSansCN-Bold, SourceHanSansCN;
+	 font-weight: bold;
+	 color: #2E2F33;
+	 float: left;
+	 margin-left: 62.5rpx;
+	 margin-top: 40rpx;
+ }
+ .main-content{
+	 margin-top: 37.5rpx;
+	 float: left;
+ }
+ .uni-input-box{
+	 width: 625rpx;
+	 float: left;
+	 margin-left: 62.5rpx;
+	 margin-top: 62.5rpx;
+	 font-size: 30rpx;
+	 padding-bottom: 25rpx;
+	 border-bottom:1.25rpx solid #E6EAF2 ;
+ }
+ .login-button{
+	  float: left;
+	  margin-left: 62.5rpx;
+	  margin-top: 62.5rpx;
+	  background-color: #A3B1CC;
+ }
+</style>

pages/login/model.js

@@ -0,0 +1,14 @@
+import { commServer } from './server.js';
+
+export default {
+  namespaced: true,
+  state: {
+  },
+  mutations: {},
+  actions: {
+		commActions({ commit, state }, { payload }) {
+			// payload = {key,data} // data是请求数据，key是请求接口id
+      return commServer(payload);
+		},
+  }
+}

pages/login/server.js

@@ -0,0 +1,13 @@
+import { creatRequest } from '../../utils/request.js';
+
+const requestList = {
+  //登录
+  login: {
+    method: 'POST',
+    url: 'imed/pfm/login/in'
+  },
+};
+export const commServer = ({ key, data }) => {
+  let obj = requestList[key];
+  return creatRequest(obj, data);
+}

pages/mission-action/components/assign-mission/assign-mission.vue

@@ -0,0 +1,55 @@
+<template>
+	<view class="assign-mission">
+		<scroll-view class="scroll-y" scroll-y="true">
+			<tm-radio-group 
+			  :list="list"
+				:defaultValue='defaultValue'
+				@change="changeSelect"
+				:setting="{
+				  value: 'value',
+				  name: 'label'
+			  }"
+		/>
+		</scroll-view>
+		<view class="fixed-buttom-btn">
+			<text class="btn-text">确定</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	// 指派改善任务
+	export default {
+		data() {
+			return {
+				defaultValue: 1,
+				list: [
+					{value: 1, label: 'PDCA1'},
+					{value: 2, label: 'PDCA2'},
+					{value: 3, label: 'PDCA3'},
+					{value: 4, label: 'PDCA4'}
+				]
+			}
+		},
+		created() {
+			uni.setNavigationBarTitle({
+				title: '指派改善任务'
+			});
+		},
+		methods: {
+			changeSelect(selectVal, selectData, i) {
+				this.defaultValue = selectVal;
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+	.assign-mission {
+		height: 100%;
+		
+		.scroll-y {
+			height: calc(100% - 87.5rpx);
+		}
+	}
+</style>

pages/mission-action/mission-action.vue

@@ -0,0 +1,28 @@
+<template>
+	<view class="mission-action-page">
+		<assign-mission />
+	</view>
+</template>
+
+<script>
+	import assignMission from './components/assign-mission/assign-mission.vue'
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		},
+		components: {
+			assignMission
+		}
+	}
+</script>
+
+<style lang="less">
+	.mission-action-page {
+		height: 100%;
+	}
+</style>

pages/mission-details/mission-details.vue

@@ -0,0 +1,167 @@
+<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>
+						<view class="btn-group" v-if="i === list.length-1">
+							<tm-button type="pramary" btnText="重新发送" />
+							<tm-button btnText="指派改善任务" @btnClick="clickRightBtn" />
+						</view>
+					</template>
+				</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: {
+			// 点击右侧按钮
+			clickRightBtn() {
+				uni.navigateTo({
+					url: '/pages/mission-action/mission-action'
+				})
+			}
+		},
+		components: {
+			listItem, 
+		}
+	}
+</script>
+
+<style lang="less">
+	.mission-details-page {
+		height: 100%;
+		padding-top: 15rpx;
+		
+		.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;
+								}
+							}
+						}
+					}
+					
+					.btn-group {
+						display: flex;
+						justify-content: space-between;
+						padding: 0 25rpx;
+					}
+				}
+			}
+		}
+	}
+
+</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,33 @@
 </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(){
+				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 +121,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 +131,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>

pages/mission/mission.vue

@@ -27,7 +27,6 @@
 <style lang="less">
  .mission-page {
 	 height: 100%;
-	 background-color: #F5F6FA;
 	 overflow: hidden;
  }
 </style>

pages/model.js

@@ -1,4 +1,6 @@
+import login from './login/model.js';
 import configure from './configure/model.js';
 export default module = {
-	configure
+  login,
+  configure,
 }

utils/crypto.js

@@ -0,0 +1,16 @@
+//传参加密
+// import CryptoJS from 'crypto-js';
+var CryptoJS = require("crypto-js");
+
+function encryption(params) {
+  let key = CryptoJS.enc.Utf8.parse('&qsh9li1KxZa9la@')
+  let iv = CryptoJS.enc.Utf8.parse('&qsh9li1KxZa9la@')
+  let srcs = CryptoJS.enc.Utf8.parse(params)
+  let result = CryptoJS.AES.encrypt(srcs, key, {
+    iv,
+    mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7
+  }).toString()
+  return result
+};
+
+export default encryption;

yarn.lock

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+crypto-js@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npm.taobao.org/crypto-js/download/crypto-js-4.0.0.tgz#2904ab2677a9d042856a2ea2ef80de92e4a36dcc"
+  integrity sha1-KQSrJnep0EKFai6i74DekuSjbcw=
+
 moment@^2.29.1:
   version "2.29.1"
   resolved "https://registry.npm.taobao.org/moment/download/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"