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' :isItemSelected(item)  }"
					v-for="item in inpectionProjects" @click="clickProject(item)">{{ item.projectName }}
				</view>
			</view>

			<view class="title_">
				已选检测内容：
			</view>
			<view style="margin-bottom: 15px;" v-for="(item,index) in selectProject" :key="index">
				<view class="steps_">
					<view class="index_">{{index+1}}</view>
					<view style="font-size: 20px; font-weight: bold;">{{item.projectName}}</view>
				</view>
				<view class="xb_" v-if="index != selectProject.length - 1 ">↓ </view>
			</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()

		},
    onLoad(options) {
      if (options.selectProject) {
        this.selectProject = JSON.parse(options.selectProject)
      }
    },
		methods: {
			sureChoose() {
				if (this.selectProject.length == 0) {
					uni.showToast({
						title: '请选择项目！',
						icon: 'none'
					})
					return
				}
				this.selectProject.map(item => {
					item.projectId = item.id
					// item.id = undefined
				})
				uni.$emit('selectProject', this.selectProject);
				this.getback()
			},
      isItemSelected(item) {
        return this.selectProject.findIndex(project => project.id === item.id) > -1;
      },
			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.findIndex(project => project.id === data.id)
				if (idx > -1) {
					// 如果元素存在于数组中，则使用splice方法来删除它
					this.selectProject.splice(idx, 1);
				} else {
					this.selectProject.push(data)
				}

			}
		}
	}
</script>

<style scoped>
	.steps_ {
		display: flex;
		align-items: center;

	}

	.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: 18px;
		box-sizing: border-box;
		padding: 10px 15px;
		margin-right: 15px;
		margin-bottom: 15px;
		background: #0D2E8D;
		color: #fff;
	}

	.box_button {

		border-radius: 6px;
		border: 1px solid #999;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		box-sizing: border-box;
		padding: 10px 15px;
		margin-right: 15px;
		margin-bottom: 15px;
	}

	.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%;
	}

	.index_ {
		width: 35px;
		height: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-weight: bold;
		font-size: 18px;
		background: #0D2E8D;
		border-radius: 50%;
		margin-right: 10px;
	}

	.xb_ {
		width: 35px;
		height: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #0D2E8D;
		font-size: 22px;
		font-weight: bold;
	}
</style>