mp_exhibitor_miniprog/components/common/u-select/index.vue

<template>
  <view>
    <view v-if="children === false">
      <checkbox-group @change="handleItemChange" :id="uId">
        <label class="custom-checkbox" v-for="(item, index) in dataList" :key="index">
          <checkbox :value="item.label" v-if="special">
            {{item.label}}
          </checkbox>
					<checkbox :value="item.value" v-else>
					  {{item.label}}
					</checkbox>
        </label>
      </checkbox-group>
    </view>
    <view v-else>
      <checkbox-group class="child_collapse" @change="handleItemChange" :id="uId">
      <van-collapse :value="activeName" @change="onChange"  :name="item.label" v-for="(item, index) in dataList" :key="index">
        <van-collapse-item :title="item.label" :name="item.label">
          <label class="custom-checkbox" v-for="(children_item, index) in item.children" :key="index">
            <checkbox :value="children_item.value">
              {{children_item.label}}
            </checkbox>
          </label>
        </van-collapse-item>
      </van-collapse>
      </checkbox-group>
    </view>
  </view>
<!--	<view class="u-select-container">
		<view class="u-select-box">
			<view class="lable-icon-box" @click="changeStatus()">
				<view class="lable" :class="{'active': selectedList.length>0}">
					{{title}}
				</view>
				<i class="iconfont icon-Down"></i>
			</view>
			<view class="dropdown-box" :style="{ height: height + 'px' }" v-if="children === false">
				<checkbox-group @change="handleItemChange" :id="uId" v-if="title === '展馆号'">
					<label class="custom-checkbox" v-for="(item, index) in dataList" :key="index">
						<checkbox :class="{ 'open': selectedList.includes(String(item.label)) }" :value="item.label">
							{{item.label}}
						</checkbox>
					</label>
				</checkbox-group>
				<checkbox-group @change="handleItemChange" :id="uId" v-else>
					<label class="custom-checkbox" v-for="(item, index) in dataList" :key="index">
						<checkbox :class="{ 'open': selectedList.includes(String(item.value)) }" :value="item.value">
							{{item.label}}
						</checkbox>
					</label>
				</checkbox-group>
			</view>
			<view class="dropdown-box" :style="{ height: height + 'px' }" v-else>
				<checkbox-group @change="handleItemChange" :id="uId">
					<view class="dropdown-item" v-for="(item, index) in dataList" :key="index">
						<template>
							<view class="child-lable-icon-box" @click="changeChildStatus(index)">
								<view class="child-lable">
									{{item.label}}
								</view>
								<i class="iconfont icon-DownSmall"></i>
							</view>
							<view class="child-box" :style="{ height: item.height + 'px' }">
								<view class="inner-box" :id="'child' + index">
									<label class="child-custom-checkbox" v-for="(childItem, index) in item.children" :key="index">
										<checkbox :class="{ 'open': selectedList.includes(String(childItem.value)) }"
											:value="childItem.value">
											{{childItem.label}}
										</checkbox>
									</label>
								</view>
							</view>
						</template>
					</view>
				</checkbox-group>
			</view>
		</view>
	</view>-->
</template>

<script>
import vanCollapse from '@/wxcomponents/vant/collapse/index'
import vanCollapseItem from '@/wxcomponents/vant/collapse-item/index'
	export default {
		components: {
    vanCollapse,
    vanCollapseItem
    },
		props: {
			special: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: '展馆号'
			},
			data: {
				type: Array,
				default: []
			},
			children: {
				type: Boolean,
				default: false
			},
			uId: {
				type: String,
				default: 'dropdown'
			},
			value: {
				type: [String, Number],
				default: []
			}
		},
		watch: {
			data(value) {
				this.dataList = value
				this.initChildHeight()
			},
			value(value) {
				this.selectedList = value
			},
			selectedList(val) {
				this.$emit('input', val)
			}
		},
		data() {
			return {
        activeName: '',
				dataList: [],
				selectedList: [],
				height: 0,
			}
		},
		created() {},
		mounted() {
			this.selectedList = this.value
		},
		methods: {
      onChange(event) {
        this.activeName = event
      },
			initChildHeight() {
				if (this.children) {
					for (let i = 0; i < this.dataList.length; i++) {
						this.$set(this.dataList[i], 'height', 0)
					}
				}
			},
			handleItemChange(e) {
				this.selectedList = e.detail.value
				this.$emit('input', this.selectedList)
				this.$emit('change-event', this.selectedList);
			},
			getOutHeight() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this)
					let id = "#" + this.uId
					query.select(id).boundingClientRect(data => {
						if (data) {
							this.height = data.height
						}
					}).exec()
				})
			},
			changeStatus() {
				if (this.height === 0) {
					this.getOutHeight()
				} else {
					this.height = 0
				}
			},
			changeChildStatus(index) {
				let id = '#child' + index
				if (this.dataList[index].height === 0) {
					const query = uni.createSelectorQuery().in(this)
					query.select(id).boundingClientRect(data => {
						if (data) {
							this.$set(this.dataList[index], 'height', data.height)
							this.getOutHeight()
						}
					}).exec()
				} else {
					this.$set(this.dataList[index], 'height', 0)
					this.getOutHeight()
				}
			}
		}
	}
</script>

<style lang="scss">
	.u-select-container {
		.u-select-box {
			background-color: #FFFFFF;
			border-radius: 13rpx;
			border: 3rpx solid #B3B3B3;
			overflow: hidden;

			.lable-icon-box {
				display: flex;
				justify-content: space-between;
				grid-gap: 20rpx;
				align-items: center;
				padding: 18rpx 25rpx;

				.lable {
					font-size: 20rpx;
					color: #B3B3B3;

					&.active {
						color: #E57519;
					}
				}

				.iconfont {
					font-size: 24rpx;
					color: #333333;
				}
			}

			.dropdown-box {
				// transition: height .2s ease;

				.dropdown-item {
					border-bottom: 1px solid #e3e9f1;
					overflow: hidden;

					&:nth-last-child(1) {
						border-bottom: unset;
					}

					// .child-box {
					// 	transition: height .2s ease;
					// }

					.child-lable-icon-box {
						display: flex;
						grid-gap: 20rpx;
						align-items: center;
						padding: 18rpx 25rpx;

						.child-lable {
							font-size: 20rpx;
							color: #333333;
						}

						.iconfont {
							color: #333333;
						}
					}

					.child-custom-checkbox {
						checkbox {
							padding: 20rpx 25rpx;
							font-size: 24rpx;
							display: flex;
							align-items: center;
						}
					}
				}

			}
		}
	}
  checkbox-group {
    display: flex;
    flex-direction: column;

    .custom-checkbox {
      checkbox {
        padding: 20rpx 25rpx;
        border-bottom: 1px solid #e3e9f1;
        font-size: $fontSize1;
        display: flex;
        align-items: center;
      }

      &:nth-last-child(1) {
        checkbox {
          border-bottom: unset;
        }
      }
    }
  }
</style>