Web_TracerMethodology/pages/creatingSituations/components/checkMapAdd.vue

<template>
	<view class="modal">
		<scroll-view scroll-y="true" class="modal-body">
			<view class="body-content">
				<text class="top-title">选择要新增的单位</text>
				<view class="list">
					<view class="item">
						<view class="item-title">门诊</view>
						<view class="chidren">
							<view class="child" 
								:class="{active: checkedIds.includes(0)}"
								@click="changeChecked(0)">
								<text>挂号处</text>
								<image v-if="checkedIds.includes(0)" 
									src="../../../static/bottom-img.png"></image>
							</view>
							<view class="child">
								<text>分诊处</text>
							</view>
							<view class="child">
								<text>挂号处</text>
							</view>
							<view class="child">
								<text>分诊处</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<tm-simple-btn-group :options="botmBtnGroup"
				v-on:callback="btnClick" ></tm-simple-btn-group>
		</scroll-view>
	</view>
</template>

<script>
	import {arrFilter} from "../../../utils/arrFilter.js";
	export default {
		data() {
			return {
				checkedIds: []
			}
		},
		computed: {
			botmBtnGroup: function() {
				return [
					{id: 'cancle', label: '取消'},
					{id: 'ok', label: `已选${this.checkedIds.length}项，确定新增`}
				];
			}
		},
		methods: {
			changeChecked: function(id) {
				this.checkedIds = arrFilter(id, this.checkedIds);
			},
			btnClick: function(id) {
				if(id === 'ok') {
					
				} else {
					this.$store.commit({
						type: 'creatingSituations/comChangeState',
						key: 'showCheckMapAdd',
						data: false
					});
				}
			}
		}
	}
</script>

<style lang="less">
	.modal {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		background-color: rgba(18, 20, 26, 0.5);
		
		.modal-body {
			margin-top: 10%;
			border-radius: 25rpx 25rpx 0 0;
			padding: 35rpx 40rpx 75rpx;
			width: 100%;
			height: 90%;
			font-size: 22.5rpx;
			line-height: 33.75rpx;
			color: #292C33;
			background-color: #fff;
			.top-title {
				font-size: 30rpx;
				line-height: 45rpx;
			}
			.list {
				margin-top: 25rpx;
				.item {
					.item-title {
						margin-bottom: 3.75rpx;
						font-size: 25rpx;
						line-height: 37.5rpx;
						font-weight: bold;
					}
					.chidren {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: space-between;
						.child {
							position: relative;
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							margin: 10rpx 0;
							border-radius: 5rpx;
							width: 200rpx;
							height: 50rpx;
							font-weight: 500;
							background-color: #EBEDF2;
							image {
								position: absolute;
								right: 0;
								bottom: 0;
								width: 25rpx;
								height: 25rpx;
							}
							&.active {
								color: #3377FF;
								background-color: #E6EEFF;
							}
						}
					}
				}
			}
		}
	}
</style>