113 lines
2.1 KiB
Vue
113 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
modelValue: boolean
|
|
title: string
|
|
content: string
|
|
cancelText: string
|
|
confirmText: string
|
|
}>(),
|
|
{
|
|
modelValue: false,
|
|
title: '',
|
|
content: '',
|
|
cancelText: '',
|
|
confirmText: '',
|
|
}
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: boolean): void
|
|
(e: 'confirm'): void
|
|
(e: 'cancel'): void
|
|
}>()
|
|
|
|
const show = computed({
|
|
get: () => props.modelValue,
|
|
set: (value: boolean) => emit('update:modelValue', value),
|
|
})
|
|
|
|
function handleCancel() {
|
|
emit('cancel')
|
|
}
|
|
|
|
function handleConfirm() {
|
|
emit('confirm')
|
|
}
|
|
|
|
function handleClose() {
|
|
emit('cancel')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<wd-popup v-model="show" position="center" round="true" custom-style="border-radius: 20rpx;" @close="handleClose">
|
|
<view class="go-cart-popup">
|
|
<view class="go-cart-popup__title">{{ title }}</view>
|
|
<view class="go-cart-popup__content">{{ content }}</view>
|
|
<view class="go-cart-popup__actions">
|
|
<button class="go-cart-popup__btn go-cart-popup__btn--ghost" @click="handleCancel">
|
|
{{ cancelText }}
|
|
</button>
|
|
<button class="go-cart-popup__btn go-cart-popup__btn--primary" @click="handleConfirm">
|
|
{{ confirmText }}
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</wd-popup>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.go-cart-popup {
|
|
width: 620rpx;
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 36rpx 30rpx 30rpx;
|
|
}
|
|
|
|
.go-cart-popup__title {
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
color: #111;
|
|
text-align: center;
|
|
}
|
|
|
|
.go-cart-popup__content {
|
|
margin-top: 22rpx;
|
|
font-size: 28rpx;
|
|
line-height: 1.5;
|
|
color: #444;
|
|
text-align: center;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.go-cart-popup__actions {
|
|
margin-top: 34rpx;
|
|
display: flex;
|
|
gap: 18rpx;
|
|
}
|
|
|
|
.go-cart-popup__btn {
|
|
flex: 1;
|
|
height: 84rpx;
|
|
line-height: 84rpx;
|
|
border-radius: 14rpx;
|
|
font-size: 28rpx;
|
|
padding: 0;
|
|
}
|
|
|
|
.go-cart-popup__btn--ghost {
|
|
border: 1rpx solid #d7d7d7;
|
|
background: #fff;
|
|
color: #555;
|
|
}
|
|
|
|
.go-cart-popup__btn--primary {
|
|
border: 1rpx solid #14181b;
|
|
background: #14181b;
|
|
color: #fff;
|
|
}
|
|
</style>
|