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

<template>
	<view class="pop-view">
		<view class="pop-maskView" :style="{
		  'background-color': maskBgColor,
		  zIndex: zIndex - 1
		}" @tap.stop="handleMaskTap"
		 @touchmove.stop.prevent="moveHandle" v-if='visible'>
		</view>
		<view class="buttons" :style="{zIndex: zIndex + 1}" v-if="type=='type1'">
			<view class="menu_btn" v-if='containerVisible && isshow1' @click="tapAction(1)">
				<text class="menu_btn_title">客户扫码到访</text>
				<image class="menu_btn_image" src="../../static/icons/icon_my_qrcode@2x.png" mode=""></image>
			</view>
			<view class="menu_btn" v-if='containerVisible && isshow2' @click="tapAction(2)">
				<text class="menu_btn_title">手动录入到访</text>
				<image class="menu_btn_image" src="../../static/icons/icon_edit_record@2x.png" mode=""></image>
			</view>
			<view class="menu_btn" v-if='containerVisible && isshow3' @click="tapAction(3)">
				<text class="menu_btn_title">隐号报备到访</text>
				<image class="menu_btn_image" src="../../static/icons/icon_saoyisao@2x.png" mode=""></image>
			</view>
			<view class="main_btn" :style="{'background-color':themeColor}" @click="tapAction(0)">
				<image class="main_btn_image" v-if='icon' :src="icon" mode=""></image>
				<text class="main_btn_title">{{title}}</text>
			</view>
		</view>
		<view class="buttons" :style="{zIndex: zIndex + 1}" v-if="type=='type2'">
			<view class="menu_btn" v-if='containerVisible && isshow1' @click="tapAction(1)">
				<text class="menu_btn_title">批量变更</text>
				<image class="menu_btn_image" src="../../static/icons/icon_genjin_piliangbiangeng@2x.png" mode=""></image>
			</view>
			<view class="menu_btn" v-if='containerVisible && isshow2' @click="tapAction(2)">
				<text class="menu_btn_title">批量回收</text>
				<image class="menu_btn_image" src="../../static/icons/icon_genjin_pilianghuishou@2x.png" mode=""></image>
			</view>
			<view class="main_btn mainBtn2" :style="{'background-color':themeColor}" @click="tapAction(0)">
				<text class="main_btn_title" >批量处理</text>
			</view>
		</view>
		
		<view class="buttons" :style="{zIndex: zIndex + 1}" v-if="type=='type3'">
			<view class="menu_btn" v-if='containerVisible && isshow1' @click="tapAction(1)">
				<text class="menu_btn_title">生成邀请图</text>
				<image class="menu_btn_image" src="../../static/icons/icon_my_qrcode@2x.png" mode=""></image>
			</view>
			<view class="menu_btn" v-if='containerVisible && isshow2' @click="tapAction(2)">
				<text class="menu_btn_title">分享二维码</text>
				<image class="menu_btn_image" src="../../static/icons/icon_edit_record@2x.png" mode=""></image>
			</view>
			<view class="main_btn" :style="{'background-color':themeColor}" @click="tapAction(0)">
				<text class="main_btn_title">{{title}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			title: String,
			maskColor: {
				type: String,
				default: 'rgba(0, 0, 0, 0.3)'
			},
			zIndex: {
				type: Number,
				default: 899
			},
			maskTapHide: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: '到访'
			},
			icon: {
				type: String,
				default: '../../static/icons/icon_visit_edit@2x.png',
			},
			isshow1:{
				type:Boolean,
				default:false
			},
			isshow2:{
				type:Boolean,
				default:false
			},
			isshow3:{
				type:Boolean,
				default:false
			},
			menus: {
				style: Array,
				default () {
					return [{
							title: '客户扫码到访',
							icon: '../../static/icons/icon_my_qrcode@2x.png',
							show:true
						},
						{
							title: '手动录入到访',
							icon: '../../static/icons/icon_edit_record@2x.png',
							show:true
						},
						{
							title: '隐号报备到访',
							icon: '../../static/icons/icon_saoyisao@2x.png',
							show:true
						}
					]
				}
			},
			type: {
				type: String,
				default: 'type1' 
			}

		},
		data() {
			return {
				visible: false,
				containerVisible: false,
				maskBgColor: 'rgba(0, 0, 0, 0.3)',
				selectValue: [0],
				selIdx: 0,
				themeColor: '',
			}
		},
		mounted() {
			let app = getApp();
			this.globalData = app.globalData;
			this.themeColor = this.globalData.themeColor;
		},
		methods: {
			tapAction(val) {
				// if (this.type == 'pop') {
					if (val == 0) {
						this.visible = !this.visible
					} else {
						this.visible = false
					}
					if (this.visible) {
						setTimeout(() => {
							this.maskBgColor = this.maskColor
							this.containerVisible = true
						}, 20)
					} else {
						this.maskBgColor = ''
						this.containerVisible = false
						setTimeout(() => {
							this.visible = false
						}, 200)
					}
					this.$emit('tapMenu', val)
				// }
			},

			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;
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: border-box;

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

		.buttons {
			position: fixed;
			right: 40rpx;
			bottom: 15%;
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			.menu_btn {
				margin-top: 20rpx;
				padding: 0 10rpx 0 40rpx;
				box-sizing: border-box;
				display: flex;
				height: 100rpx;
				border-radius: 50rpx;
				background: #ffffff;
				border: 4rpx solid rgba(255, 255, 255, 0.64);
				box-shadow: 0px 6px 20px 0px rgba(20, 85, 85, 0.05);
				align-items: center;

				.menu_btn_title {
					font-size: 28rpx;
					font-family: Verdana, Verdana-Regular;
					font-weight: 400;
					color: #333333;
				}

				.menu_btn_image {
					margin-left: 20rpx;
					width: 80rpx;
					height: 80rpx;
				}
			}

			.main_btn {
				margin-top: 30rpx;
				padding: 0 25rpx;
				box-sizing: border-box;
				display: flex;
				height: 100rpx;
				border: 4rpx solid rgba(255, 255, 255, 0.64);
				border-radius: 50rpx;
				align-items: center;
				.main_btn_image {
					width: 54rpx;
					height: 54rpx;
				}

				.main_btn_title {
					font-size: 32rpx;
					font-family: Verdana, Verdana-Regular;
					font-weight: 400;
					color: #ffffff;
				}
			}
				
			.mainBtn2{
				margin-top: 30rpx;
				padding: 0;
				box-sizing: border-box;
				display: flex;
				height: 100rpx;
				border: 4rpx solid rgba(255, 255, 255, 0.64);
				border-radius: 50rpx;
				align-items: center;
				width: 170rpx;
				.main_btn_title {
					width: 100%;
					font-size: 32rpx;
					font-family: Verdana, Verdana-Regular;
					font-weight: 400;
					text-align: center;
					color: #ffffff;
				}
			}
		}

	}
</style>