h5-elab-open-ownerUnion/components/subComponents/dmPopScrollView.vue

<template>
	<view class="pop-view" v-if='visible'>
		<view class="pop-maskView" :style="{
		  'background-color': maskBgColor,
		  zIndex: zIndex - 1
		}">
		</view>

		<view v-if="isScannerOption" :class="['pop-contentView',containerVisible ? 'pop-contentView-show' : '']" :style="{zIndex: zIndex}">
			<text class="pop-title" v-if="isShowTitle">{{title}}</text>
			<image class="pop-close" src="../../static/icons/icon_close@2x.png" v-if="isShowClose" mode="" @click="handleCancel"></image>
			<slot></slot>
			<text class="pop-commit" :style="{'background-color':themeColor}" v-if="isShowConfirm" @click="handleConfirm">确定</text>
		</view>

		<view v-else :class="['pop-contentView',containerVisible ? 'pop-contentView-show' : '']" :style="{zIndex: zIndex}"
		 >
			<text class="pop-title" v-if="isShowTitle">{{title}}</text>
			<image class="pop-close" src="../../static/icons/icon_close@2x.png" v-if="isShowClose" mode="" @click="handleCancel"></image>
			<slot></slot>
			<text class="pop-commit" :style="{'background-color':themeColor}" v-if="isShowConfirm" @click="handleConfirm">确定</text>
		</view>


	</view>
</template>
<script>
	export default {
		props: {
			title: String,
			maskColor: {
				type: String,
				default: 'rgba(0, 0, 0, 0.3)'
			},
			zIndex: {
				type: Number,
				default: 999
			},
			maskTapHide: {
				type: Boolean,
				default: true
			},
			isShowTitle: {
				type: Boolean,
				default: true
			},
			isShowClose: {
				type: Boolean,
				default: true
			},
			isShowConfirm: {
				type: Boolean,
				default: true
			},
			isScannerOption: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				visible: false,
				containerVisible: false,
				maskBgColor: '',
				selectValue: [0],
				selIdx: 0,
				themeColor: ''
			}
		},
		mounted() {
			let app = getApp();
			this.globalData = app.globalData;
			this.themeColor = this.globalData.themeColor;
		},
		methods: {
			show() {
				this.visible = true
				setTimeout(() => {
					this.maskBgColor = this.maskColor
					this.containerVisible = true
				}, 20)
			},
			hide() {
				this.maskBgColor = ''
				this.containerVisible = false
				setTimeout(() => {
					this.visible = false
				}, 200)
				this.$emit('close')
			},
			handleCancel() {
				this.hide()
			},
			handleConfirm() {
				this.hide()
				this.$emit('confirm')
			},
			handleMaskTap() {
				if (this.maskTapHide) {
					this.hide()
				}
			},
			moveHandle() {},
		}
	}
</script>

<style scoped lang="scss">
	.pop-view {
		position: relative;

		.pop-maskView {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			transition-property: background-color;
			transition-duration: 0.3s;
		}

		.pop-contentView {
			position: fixed;
			right: 0;
			left: 0;
			bottom: 0;
			overflow-y: scroll;
			background-color: #fff;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			box-shadow: 0rpx 8rpx 12rpx 0rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			transform: translateY(100%);
			transition-property: transform;
			transition-duration: 0.3s;

			.pop-title {
				margin-top: 60rpx;
				font-size: 32rpx;
				font-family: Verdana, Verdana-Bold;
				font-weight: 700;
				text-align: center;
				color: #333333;
			}

			.pop-close {
				position: absolute;
				top: 64rpx;
				right: 30rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.pop-commit {
				margin-bottom: 54rpx;
				width: 260rpx;
				height: 84rpx;
				line-height: 84rpx;
				border-radius: 42rpx;
				font-size: 32rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: center;
				color: #ffffff;
			}
		}

		.pop-contentView-show {
			transform: translateY(0);
		}
	}
</style>