封装单选列表组

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/tm-button/tm-button.vue

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

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>

pages.json

@@ -29,9 +29,17 @@
 				"navigationBarTitleText": "改善任务",
 				"enablePullDownRefresh": false
 			}
+		},
+		{
+			"path" : "pages/mission-action/mission-action",
+			"style": {
+				 "navigationBarTitleText": "改善任务",
+				 "enablePullDownRefresh": false
+			}
 		}
-	],
+  ],
 	"globalStyle": {
+		"navigationStyle": "custom",
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "追踪方法学",
 		"navigationBarBackgroundColor": "#F8F8F8",

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

@@ -30,10 +30,11 @@
 								</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 class="btn-group">
-						<tm-button />
-					</view>
 				</view>
 			</view>
 		</scroll-view>
@@ -53,7 +54,12 @@
 			}
 		},
 		methods: {
-			
+			// 点击右侧按钮
+			clickRightBtn() {
+				uni.navigateTo({
+					url: '/pages/mission-action/mission-action'
+				})
+			}
 		},
 		components: {
 			listItem, 
@@ -65,7 +71,6 @@
 	.mission-details-page {
 		height: 100%;
 		padding-top: 15rpx;
-		background-color: #F5F6FA;
 		
 		.scroll-y {
 			height: 100%;
@@ -148,6 +153,12 @@
 							}
 						}
 					}
+					
+					.btn-group {
+						display: flex;
+						justify-content: space-between;
+						padding: 0 25rpx;
+					}
 				}
 			}
 		}

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

@@ -45,7 +45,6 @@
 		methods: {
 			// 跳转详情页面（改善任务）
 			gooDetails(){
-				console.log(9)
 				uni.navigateTo({
 				  url: '/pages/mission-details/mission-details'
 				});

pages/mission/mission.vue

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