ldb-safe-hh/pages/fill-in/checkboxPage.vue

// 查获位置/简要情况 多选页面
<template>
	<view class="checkbox-container">
		<title-status />
		<h-navbar :title="title" />
		<nav-button :menus="menuDatas" @itemClick="menuClick"></nav-button>
		<scroll-view scroll-y style="flex: auto;">
			<view style="padding: 30rpx;">
				<view>{{ subTitle }}</view>
				<u-checkbox-group v-model="checkboxValue" style="flex-direction: column;">
					<template v-for="(item, index) in checkboxList">
						<u-checkbox
							class="radio-item"
							:label="item.value"
							:name="item.key">
						</u-checkbox>
						<u-input
							v-if="item.hasOwnProperty('extra') && checkboxValue.includes(item.key)"
							v-model="item.extra"
							:customStyle="{margin: '20rpx 0 0 50rpx'}"
							placeholder="请输入其他项的内容"/>
					</template>
				</u-checkbox-group>
			</view>
		</scroll-view>
		<view style="height: 160rpx;" v-if="checkboxList && checkboxList.length > 0"></view>
	</view>
</template>

<script>
	import { getSafeThingsTypeList } from '@/network/module/fill-in.api.js'
	import TitleStatus from '@/components/title-status/title-status'
	import HNavbar from '@/components/h-navbar/h-navbar.vue'
	import NavButton from '@/components/nav-bottom/nav-button.vue'
	
	export default {
		components: {
			TitleStatus,
			HNavbar,
			NavButton
		},
		data() {
			return {
				title: null,
				subTitle: null,
				menuDatas: [
					{
						title: '确定',
						plain: false,
						disabled: false,
						bgColor: '#4983FB'
					}
				],
				checkboxValue: [],
				checkboxList: []
			}
		},
		onLoad(options) {
			if(options) {
				this.title = options.title || ''
				this.subTitle = decodeURIComponent(options.subTitle || '')
				if(options.checkboxList) {
					this.checkboxList = JSON.parse(decodeURIComponent(options.checkboxList))
					for(let i = 0; i < this.checkboxList.length; i++) {
						if(this.checkboxList[i].checked) {
							this.checkboxValue.push(this.checkboxList[i].key)
						}
					}
				}
			}
		},
		methods: {
			menuClick() {
				if(!this.checkboxValue || this.checkboxValue.length <= 0) {
					uni.$u.toast('未选中项!')
					return
				}
				const callBackList = this.checkboxList.map(item => {
					if(this.checkboxValue.includes(item.key)) {
						item.checked = true
					} else {
						item.checked = false
					}
					return item
				})
				const checkedCheckboxs = callBackList.filter(item => {
					return item.checked && item.hasOwnProperty('extra')
				})
				if(checkedCheckboxs && checkedCheckboxs.length > 0) {
					const success = checkedCheckboxs.every(item => {
						return item.extra && item.extra.trim().length > 0
					})
					if(!success) {
						uni.$u.toast('补充项不能为空!')
						return
					}
				}
				this.getOpenerEventChannel().emit('changeSuccess', callBackList)
				this.$navigate.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.checkbox-container {
		display: flex;
		flex-direction: column;
		.radio-item {
			margin-top: 40rpx;
		}
		/deep/ .u-checkbox {
			align-items: flex-start !important;
		}
		/deep/ .u-checkbox uni-text {
			line-height: 40rpx !important;
		}
	}
</style>