下拉菜单

<template>
    <view class="box f_c_s">
	<view class="f_r_sb_c p-20 box-title" :style="{'z-index':showDropDownPopup?'1000':'0'}">
	    <view class="f_allCenter" @click="change(false)">
						<text class="f-28 col-33">{{typetext?typetext:'全部消息类型'}}</text>
						<uni-icons
							:style="{'transform':showDropDownPopup?'rotate(180deg)':'rotate(0)','transition':'transform 300ms ease 0ms, transform 300ms ease 0ms'}"
							type="arrowdown" size="18">
						</uni-icons>
					</view>
				</view>
				<view class="popup" :style="{'z-index':showDropDownPopup?'999':'-1'}">
					<view class="popup-mask" @click="change(true)"
						:style="{'background-color':showDropDownPopup?'rgba(0,0,0,.5)':'rgba(0,0,0,0)'}">
					</view>
					<view class="popup-content"
						:style="{'transform':showDropDownPopup?'translateY(0)':'translateY(-100%)'}">
						<view class="popup-content-text ">
							<view v-for="(item,index) in typelist" :key="index" @click="change(false,index)"
								:class="[typetextindex==index?'col-theme':'','dis-inline-block w-50']">
								{{item}}
							</view>
						</view>
					</view>
				</view>
				<view class="box-middle"> </view>
				<view class="box-bottom"> <button type="primary">保存</button> </view>
			</view>
		</template>




                    <script>
			export default {
				data() {
					return {
						typelist: ["血压消息", "血糖消息", "尿酸消息", "医生血压建议", "医生血糖建议", "医生尿酸建议", "全部消息类型"],
						typetext: '',
						typetextindex: null,
						showDropDownPopup: false,
					};
				},
				onShow() {},
				methods: {
					change(lock, index) {
						if (index !== undefined) {
							this.typetextindex = index
						}
						console.log('index', this.typetextindex);
						this.typetext = this.typelist[index ? index : this.typetextindex]
						if (!this.showDropDownPopup && lock) {
							return;
						}
						this.showDropDownPopup = !this.showDropDownPopup
					},
				},
			}
		</script>
		<style scoped lang="scss">
			uni-page-body {
				height: 100%;
			}

			.popup {
				position: absolute;
				height: 100%;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				z-index: -1;
				transition: all 300ms ease 0ms, transform 300ms ease 0ms;

				&-mask {
					position: absolute;
					height: 100%;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;
					transition: background-color 300ms ease 0ms, transform 300ms ease 0ms;
					background-color: rgba(0, 0, 0, 0);
				}

				&-content {
					transition: transform 300ms ease 0ms, transform 300ms ease 0ms;
					transform: translateY(-100%);
					transform-origin: 50% 50%;
					margin-top: 80upx;
					background-color: #fff;
					border-bottom-right-radius: 20upx;
					border-bottom-left-radius: 20upx;
					padding: 30upx;

					&-text {
						view {
							font-size: 24upx;
							line-height: 80upx;
							flex: 1;
							text-align: center;
						}
					}
				}
			}

			.box {
				height: 100%;

				&-title {
					transition: all 300ms ease 0ms, transform 300ms ease 0ms;
					position: relative;
					background-color: #fff;
					height: 40upx;
					border-bottom: 1px solid #eee;
					color: #333;
					font-weight: 600;
				}

				&-middle {
					flex: 1;

					&-list {
						padding: 30upx;
						border-bottom: 1px solid #eee
					}
				}

				&-bottom {
					text-align: center;
					padding: 20upx 0;

					button {
						width: 90%;
					}
				}
			}
		</style>
		<style>
			page {
				background-color: #f5f5f5;
				height: 100%;
			}
	</style>