<template>
|
|
<up-popup :show="show" mode="center" @close="close" @open="open" :zIndex="999999" :round="10"
|
|
:safeAreaInsetBottom="false" :customStyle="{padding:'40rpx 20rpx',width:'80%'}">
|
|
<view>
|
|
<view>
|
|
<view class="content">
|
|
<slot></slot>
|
|
</view>
|
|
<view class="btn">
|
|
<view class="cancle" @click="handleCancel">
|
|
取消
|
|
</view>
|
|
<view class="ok" @click="handleConfirm">
|
|
确定
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</up-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, defineEmits } from "vue";
|
|
|
|
const show = ref(false);
|
|
const emits = defineEmits(['confirm', 'cancel']);
|
|
|
|
const close = () => {
|
|
show.value = false;
|
|
};
|
|
|
|
const open = () => {
|
|
show.value = true;
|
|
};
|
|
|
|
const handleConfirm = () => {
|
|
emits('confirm');
|
|
close();
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
emits('cancel');
|
|
close();
|
|
};
|
|
|
|
defineExpose({
|
|
close,
|
|
open
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
padding: 20rpx 0rpx;
|
|
}
|
|
|
|
.btn {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.cancle,
|
|
.ok {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 48%;
|
|
height: 80rpx;
|
|
background: #FFBF60;
|
|
border-radius: 40rpx;
|
|
color: white;
|
|
}
|
|
|
|
.cancle {
|
|
background: #FFF4E6;
|
|
color: #FFC269;
|
|
}
|
|
</style>
|