123 lines
2.1 KiB
Vue
123 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<uni-popup ref="popup" type="center" :mask-click="false">
|
||
|
|
<view class="confirm-popup">
|
||
|
|
<view class="confirm-title">{{ title }}</view>
|
||
|
|
<view class="confirm-content">{{ content }}</view>
|
||
|
|
<view class="confirm-footer">
|
||
|
|
<view class="confirm-btn cancel-btn" @click="handleCancel">{{ cancelText }}</view>
|
||
|
|
<view class="confirm-btn confirm-btn-active" @click="handleConfirm">{{ confirmText }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</uni-popup>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, watch } from 'vue';
|
||
|
|
|
||
|
|
const emits = defineEmits(['confirm', 'cancel', 'close'])
|
||
|
|
const props = defineProps({
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: '提示'
|
||
|
|
},
|
||
|
|
content: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
cancelText: {
|
||
|
|
type: String,
|
||
|
|
default: '取消'
|
||
|
|
},
|
||
|
|
confirmText: {
|
||
|
|
type: String,
|
||
|
|
default: '确定'
|
||
|
|
},
|
||
|
|
visible: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const popup = ref()
|
||
|
|
|
||
|
|
function handleConfirm() {
|
||
|
|
close()
|
||
|
|
setTimeout(() => {
|
||
|
|
emits('confirm')
|
||
|
|
}, 500)
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleCancel() {
|
||
|
|
emits('cancel')
|
||
|
|
close()
|
||
|
|
}
|
||
|
|
|
||
|
|
function close() {
|
||
|
|
popup.value && popup.value.close()
|
||
|
|
emits('close')
|
||
|
|
}
|
||
|
|
|
||
|
|
watch(() => props.visible, n => {
|
||
|
|
if (n) {
|
||
|
|
popup.value && popup.value.open()
|
||
|
|
} else {
|
||
|
|
popup.value && popup.value.close()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.confirm-popup {
|
||
|
|
width: 600rpx;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 16rpx;
|
||
|
|
padding: 40rpx 30rpx 30rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.confirm-title {
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333;
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 24rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.confirm-content {
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #666;
|
||
|
|
line-height: 1.6;
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 32rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.confirm-footer {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.confirm-btn {
|
||
|
|
flex: 1;
|
||
|
|
height: 72rpx;
|
||
|
|
line-height: 72rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 28rpx;
|
||
|
|
border-radius: 16rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cancel-btn {
|
||
|
|
color: #8b6f47;
|
||
|
|
border: 1px solid #d4c4a8;
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.confirm-btn-active {
|
||
|
|
color: white;
|
||
|
|
background: #b8956a;
|
||
|
|
border: none;
|
||
|
|
box-shadow: 0 4rpx 12rpx rgba(139, 101, 56, 0.3);
|
||
|
|
}
|
||
|
|
</style>
|