<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>