106 lines
1.8 KiB
Vue
106 lines
1.8 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="addall guodu" :class="{ unclass: !show }" :style="{ zIndex: showbox ? 220 : -2 }">
|
|||
|
|
<view class="title">
|
|||
|
|
请领详情
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="mengban" v-if="show" @click="() => emit('back')"></view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import {
|
|||
|
|
ref,
|
|||
|
|
watch,
|
|||
|
|
onMounted
|
|||
|
|
} from 'vue'
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
show: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
font: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
plsbuy: {
|
|||
|
|
type: Object,
|
|||
|
|
// default: () => ({})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 暴露给模板的 emit
|
|||
|
|
const emit = defineEmits(['back'])
|
|||
|
|
|
|||
|
|
const showbox = ref(false)
|
|||
|
|
|
|||
|
|
// 监听 show，保留你原来的逻辑：show 为 true 时延迟 50ms 再把 showbox 设为 true，false 时立即关掉
|
|||
|
|
watch(
|
|||
|
|
() => props.show,
|
|||
|
|
(n) => {
|
|||
|
|
if (n) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
showbox.value = true;
|
|||
|
|
console.log('plsbuy =>', props.plsbuy)
|
|||
|
|
}, 50)
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
showbox.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
// mounted 中打印 plsbuy（你要的行为）
|
|||
|
|
onMounted(() => {
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
.addall {
|
|||
|
|
width: 55vw;
|
|||
|
|
height: 50vw;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
box-shadow: 0rpx 0rpx 1.3vw 0rpx rgba(163, 167, 182, 0.16);
|
|||
|
|
border-radius: 1.6vw;
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
margin: auto;
|
|||
|
|
padding: 1.5vw 2.2vw;
|
|||
|
|
z-index: 9120;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.unclass {
|
|||
|
|
opacity: 0 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.guodu {
|
|||
|
|
transition: .4s;
|
|||
|
|
-webkit-transform-style: preserve-3d;
|
|||
|
|
-webkit-overflow-scrolling: touch;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mengban {
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 100vh;
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 100;
|
|||
|
|
background: RGBA(239, 240, 244, 0.55);
|
|||
|
|
}
|
|||
|
|
.title{
|
|||
|
|
height: 6vh;
|
|||
|
|
width: 100%;
|
|||
|
|
// background-color: red;
|
|||
|
|
font-size: 38rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
border-bottom: 2rpx solid #E5E5E5;
|
|||
|
|
}
|
|||
|
|
</style>
|