detection-business/pages/index/selectProject.vue

<template>
	<view  class="content">
		<view style="width: 100%; height: 44px;"></view>
			<view class="top-heder">
				<view class="t-left" @click="getback()">
					<uni-icons type="left" size="18"></uni-icons>
				</view>
				<view class="t-title">
					<text>选择检测项目</text>
				</view>
				<view class="t-you"></view>
			</view>
			<view class="cont_box">
				
				<view class="title_">
					可选检测项目：
				</view>
				<view class="box_">
					<view class="box_button " :class="{ 'box_button_x' :selectProject.indexOf(item)>-1  }"  v-for="item in inpectionProjects" @click="clickProject(item)">{{item.projectName}}</view>
				</view>
				
				<view class="title_">
					已选检测项目：
				</view>
				<u-steps  activeColor="#0D2E8D"  direction="column">
						<u-steps-item  :iconSize="iconSize"  v-for="item in selectProject" :title="item.projectName" >
						</u-steps-item>
			
				</u-steps>
		
				
				
			</view>
			
			
			
			<view class="dlanniu" @click="sureChoose()" >
				<text>确定选择</text>
			</view>

	</view>
</template>

<script>
	import request from '../../utils/request';
	export default {
		data() {
			return {
				iconSize:130,
				inpectionProjects:[],
				selectProject:[]
			}
		},
		onShow() {
			this.getProjects()
			
		},
		methods: {
			sureChoose(){
				if(this.selectProject.length == 0){
					uni.showToast({
						title:'请选择项目！',
						icon:'none'
					})
					return
				}
				uni.$emit('selectProject', this.selectProject);
				this.getback()
			},
			getback(){
				uni.navigateBack()
			},
			async getProjects(){
				let res = await request({
					url:'/inspection/dl-inspection-project/page',
					method: 'get',
					params:{
						pageNo:1,
						pageSize:100
					}
					
				})
				this.inpectionProjects = res.data.records
			},
			clickProject(data){
				let idx = this.selectProject.indexOf(data)
				if(idx>-1){
					// 如果元素存在于数组中，则使用splice方法来删除它
					  this.selectProject.splice(idx, 1);
				}else{
					this.selectProject.push(data)
				}
			
			}
		}
	}
</script>

<style scoped>
	.cont_box{
		box-sizing: border-box;
		padding: 10px;
	}
	.title_{
		font-weight: bold;
		margin-bottom: 5px;
	}
	.box_{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.box_button_x{
		border-radius: 6px;
		border: 1px solid #0D2E8D;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		box-sizing: border-box;
		padding: 5px 10px;
		margin-right: 5px;
		margin-bottom: 5px;
		background: #0D2E8D;
		color: #fff;
	}
	.box_button{
		border-radius: 6px;
		border: 1px solid #999;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		box-sizing: border-box;
		padding: 5px 10px;
		margin-right: 5px;
		margin-bottom: 5px;
	}
	.dlanniu{
		width: 80%;
		height: 45px;
		background: linear-gradient(180deg, #3F61C0 0%, #0D2E8D 100%);
		border-radius: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20px auto;
		color: white;
	}
	.t-you{
		height: 100%;
		width: 20%;
	}
	.content {
		box-sizing: border-box;
		width: 100%;
		height: calc(100vh);
		background: white;
	}
	.top-heder{
		width: 100%;
		height: 46px;
		background: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 5px 15px;
	}
	.t-title{
		font-size: 17px;
		font-weight: bold;
		color: #333333;
	}
	.t-left{
		width: 10%;
	}
</style>