98 lines
2.2 KiB
Vue
98 lines
2.2 KiB
Vue
<template>
|
|
<view>
|
|
<uni-popup ref="confirmRef" type="bottom" @maskClick="handleClose">
|
|
<JMainCard pd="0" wrapPd="30rpx">
|
|
<view class="content bgF2 bdR10">{{ confirmText }}</view>
|
|
<view class="confirm" hover-class="u-cell-hover" hover-stay-time="150" @tap="handleConfirm">确认</view>
|
|
</JMainCard>
|
|
<JButton pd="0 30rpx 30rpx 30rpx" pdTop="0" bgColor="#fff" color="#000" @HandleTouch="handleClose()"
|
|
>取消</JButton
|
|
>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import JMainCard from "@/components/newComponents/JMainCard/JMainCard"
|
|
import JButton from "@/components/newComponents/JButton/JButton"
|
|
/*
|
|
用于二次确认弹窗
|
|
参数1 确认按钮回调函数
|
|
参数2 取消按钮回调函数
|
|
参数3 弹框内部提示文字
|
|
*/
|
|
import { ref } from "vue"
|
|
import useBackPress from "@/hooks/useBackPress.js"
|
|
|
|
const confirmRef = ref()
|
|
|
|
let confirmText = ref("")
|
|
let confirmPop = () => {}
|
|
let cancelPop = () => {}
|
|
|
|
// 处理开启弹窗 与 关闭弹窗 的 阻断返回
|
|
const popupopened = () => {
|
|
// #ifdef H5 || APP-PLUS
|
|
active()
|
|
// #endif
|
|
}
|
|
|
|
const popupclosed = () => {
|
|
// #ifdef H5 || APP-PLUS
|
|
inactive()
|
|
// #endif
|
|
}
|
|
|
|
const closeEd = () => {
|
|
confirmRef.value.close()
|
|
}
|
|
|
|
// #ifdef H5 || APP-PLUS
|
|
const { active, inactive } = useBackPress(closeEd) // onBackPress 阻断返回
|
|
// #endif
|
|
// 确认按钮
|
|
const handleConfirm = () => {
|
|
popupclosed()
|
|
confirmPop()
|
|
confirmRef.value.close()
|
|
}
|
|
|
|
// 取消按钮
|
|
const handleClose = () => {
|
|
popupclosed()
|
|
cancelPop()
|
|
confirmRef.value.close()
|
|
}
|
|
|
|
// 开启弹窗，供父组件调用传递函数
|
|
const comfirmOpen = (confirm = () => {}, tipText = "您确认要改变状态吗?", cancel = () => {}) => {
|
|
popupopened()
|
|
confirmPop = confirm
|
|
cancelPop = cancel
|
|
confirmText.value = tipText
|
|
confirmRef.value.open()
|
|
}
|
|
|
|
defineExpose({ comfirmOpen })
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
margin: 30rpx 30rpx 10rpx;
|
|
padding: 20rpx;
|
|
font-size: 27rpx;
|
|
color: #666;
|
|
}
|
|
.confirm {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 110rpx;
|
|
font-size: 33rpx;
|
|
color: #ff4343;
|
|
}
|
|
.u-cell-hover {
|
|
background-color: rgba($color: #999, $alpha: 0.1);
|
|
}
|
|
</style>
|