Web_TracerMethodology/pages/creatingSituations/components/checkMapDetail.vue

<template>
	<view class="check-map-detail">
		<view class="item">
			<view class="icon-wrap" @click="openChildren(0)">
				<image :src="`../../static/list-${openItems.includes(0)
					?'close':'open'}.png`"></image>
			</view>
			<view class="content">
				<view class="content-title" @click="openChildren(0)">疼痛之评估及再评估</view>
				<view class="children" v-if="openItems.includes(0)">
					<view class="child">
						<text>PRN order时间间隔与时机</text>
						<view class="check-icon-wrap" @click="changeChecked(1)">
							<image :src="`../../static/check-${checkedIds.includes(1)
								?'checkbox':'no'}.png`"></image>
						</view>
					</view>
					<view class="child">
						<text>过敏反应表现</text>
						<view class="check-icon-wrap">
							<image src="../../../static/check-no.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="icon-wrap" @click="openChildren(1)">
				<image :src="`../../static/list-${openItems.includes(1)
					?'close':'open'}.png`"></image>
			</view>
			<view class="content">
				<view class="content-title" @click="openChildren(1)">疼痛之评估及再评估</view>
				<view class="children" v-if="openItems.includes(1)">
					<view class="child">
						<text>PRN order时间间隔与时机</text>
						<view class="check-icon-wrap">
							<image src="../../../static/check-no.png"></image>
						</view>
					</view>
					<view class="child">
						<text>过敏反应表现</text>
						<view class="check-icon-wrap">
							<image src="../../../static/check-no.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tm-simple-btn-group :options="botmBtnGroup"
			v-on:callback="btnClick" ></tm-simple-btn-group>
	</view>
</template>

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

<style lang="less">
	.check-map-detail {
		padding-bottom: 75rpx;
		width: 100%;
		height: 100%;
		.item {
			display: flex;
			flex-direction: row;
			border-top: 1px solid #DADEE6;
			padding-left: 25rpx;
			width: 100%;
			background-color: #fff;
			.icon-wrap {
				padding-top: 28.12rpx;
				padding-right: 23.75rpx;
				width: 45rpx;
				height: inherit;
				image {
					width: 100%;
					height: 12.5rpx;
				}
			}
			.content {
				width: 100%;
				color: #292C33;
				line-height: 87.5rpx;
				.content-title {
					height: 87.5rpx;
					font-size: 22.5rpx;
					font-weight: 500;
				}
				.children {
					width: 100%;
					.child {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						border-top: 1px solid #DADEE6;
						height: 87.5rpx;
						.check-icon-wrap {
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							width: 75rpx;
							height: 100%;
							image {
								width: 25rpx;
								height: 25rpx;
							}
						}
					}
				}
			}
		}
	}
</style>