新增营销系统、分销系统、会员功能、门店、提现功能
This commit is contained in:
184
components/Popup.vue
Normal file
184
components/Popup.vue
Normal file
@ -0,0 +1,184 @@
|
||||
<!--
|
||||
* @FileDescription: Popup
|
||||
* @Author: kahu
|
||||
* @Date: 2023/2/22
|
||||
* @LastEditors: kahu
|
||||
* @LastEditTime: 2023/2/22
|
||||
* @ProductName:WebStorm
|
||||
-->
|
||||
<script
|
||||
setup
|
||||
>
|
||||
import { nextTick, ref, toRefs } from "vue";
|
||||
import { onLoad, onUnload } from "@dcloudio/uni-app";
|
||||
import UniPopup from "@/components/UPopup/uni-popup/uni-popup.vue";
|
||||
|
||||
/** some javascript code in here */
|
||||
const emit = defineEmits(['open', 'close'])
|
||||
/**
|
||||
* @property {String} title 标题
|
||||
* @property {String} mode 模式
|
||||
* @value top 顶部弹出
|
||||
* @value center 中间弹出
|
||||
* @value bottom 底部弹出
|
||||
* @value left 左侧弹出
|
||||
* @value right 右侧弹出
|
||||
* @value message 消息提示
|
||||
* @value dialog 对话框
|
||||
* @value share 底部分享示例
|
||||
* @property {Boolean} showCloseable 是否展示关闭按钮
|
||||
* @property {Boolean} isMaskClick 是否点击masker关闭弹窗
|
||||
* @event {Function} show 打开弹窗
|
||||
* @event {Function} close 关闭回调
|
||||
*/
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: () => 'bottom'
|
||||
},
|
||||
showCloseable: {
|
||||
type: Boolean,
|
||||
default: () => true
|
||||
},
|
||||
isMaskClick: {
|
||||
type: Boolean,
|
||||
default: () => true
|
||||
},
|
||||
})
|
||||
|
||||
const {title, mode, showCloseable, isMaskClick} = toRefs(props)
|
||||
|
||||
const popup = ref()
|
||||
const isShow = ref(false)
|
||||
/**
|
||||
* 打开
|
||||
*/
|
||||
const show = () => {
|
||||
nextTick(() => {
|
||||
isShow.value = true
|
||||
popup.value.open()
|
||||
emit('open')
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭回调
|
||||
*/
|
||||
const close = () => {
|
||||
isShow.value = false
|
||||
popup.value.close()
|
||||
}
|
||||
|
||||
const handlePopupChange = (e) => {
|
||||
if (!e.show) emit('close')
|
||||
}
|
||||
|
||||
let iphoneSafeHeight = 0 // ios安全区高度
|
||||
const bottomHeight = ref(5)
|
||||
|
||||
// function changeKeyboard(res: any) {
|
||||
// bottomHeight.value = res.height > 0 ? res.height : res.height // 有安全区时需要减去该高度,不然还是会被挡住
|
||||
// }
|
||||
|
||||
onLoad(() => {
|
||||
// #ifdef MP-WEIXIN
|
||||
//获取屏幕信息
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
iphoneSafeHeight = res.screenHeight - (res?.safeArea?.bottom || 0)
|
||||
}
|
||||
})
|
||||
// uni.onKeyboardHeightChange(changeKeyboard)
|
||||
// #endif
|
||||
})
|
||||
onUnload(() => {
|
||||
// #ifdef MP-WEIXIN
|
||||
// uni.offKeyboardHeightChange(changeKeyboard)
|
||||
// #endif
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
show,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- some html code in here-->
|
||||
<page-meta :page-style="`overflow:${isShow?'hidden':'visible'}`"></page-meta>
|
||||
|
||||
<view>
|
||||
<UniPopup
|
||||
ref="popup"
|
||||
:is-mask-click="isMaskClick"
|
||||
:type="mode"
|
||||
background-color="#fff"
|
||||
@change="handlePopupChange"
|
||||
>
|
||||
<view
|
||||
class="popup_inner"
|
||||
>
|
||||
<view
|
||||
v-if="props.title||props.showCloseable"
|
||||
class="head flex flex-lr__center">
|
||||
<slot name="leftOption">
|
||||
<view></view>
|
||||
</slot>
|
||||
<slot name="title">
|
||||
<view>{{ props.title }}</view>
|
||||
</slot>
|
||||
<slot name="rightOption">
|
||||
<view
|
||||
>
|
||||
<u-icon
|
||||
color="#000"
|
||||
name="close"
|
||||
size="16"
|
||||
v-if="props.showCloseable"
|
||||
@click="close"
|
||||
/>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</UniPopup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style
|
||||
lang="scss"
|
||||
scoped
|
||||
>
|
||||
.popup_inner {
|
||||
padding: 20rpx 20rpx env(safe-area-inset-bottom) 20rpx;
|
||||
box-sizing: border-box;
|
||||
.head {
|
||||
padding: 20rpx 0;
|
||||
font-weight: bolder;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
|
||||
.option_list_box {
|
||||
.option_item {
|
||||
margin: 15rpx 0;
|
||||
|
||||
.icon {
|
||||
margin-right: 30rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
</style>
|
Reference in New Issue
Block a user