120 lines
3.0 KiB
Vue
120 lines
3.0 KiB
Vue
|
<!-- 页面描述 -->
|
||
|
|
<template>
|
||
|
|
<uni-popup ref="jyPopup" :type="type">
|
||
|
|
<view class="jy-popup-content f1 bfff pr" v-if="type == 'center'">
|
||
|
|
<slot name="title">
|
||
|
|
<view class="title fw600">
|
||
|
|
<text>{{ title }}</text>
|
||
|
|
</view>
|
||
|
|
</slot>
|
||
|
|
<uni-icons @click="close" class="close-btn c999" type="closeempty" size="20"></uni-icons>
|
||
|
|
<view class="p25">
|
||
|
|
<slot />
|
||
|
|
<button v-if="showSave" class="save-btn" @click="savePost">保存</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="jy-popup-bottom f1 bfff pr" v-if="type == 'bottom'"
|
||
|
|
:style="{ 'padding-bottom': `${bottomSafeAreaHeight(true) + 20}px` }">
|
||
|
|
<!-- 头部标题 + 关闭 空格-->
|
||
|
|
<slot name="title">
|
||
|
|
<view class="title fw600">
|
||
|
|
<text>{{ title }}</text>
|
||
|
|
</view>
|
||
|
|
</slot>
|
||
|
|
<uni-icons @click="close" class="close c999" type="closeempty" size="20"></uni-icons>
|
||
|
|
<view :style="{ 'height': `${screenHeight(true) * 0.7}px` }">
|
||
|
|
<slot />
|
||
|
|
</view>
|
||
|
|
<button v-if="showSave" class="save-btn" @click="emit('savePost')">{{ saveTitle }}</button>
|
||
|
|
</view>
|
||
|
|
</uni-popup>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import { ref, defineEmits, defineExpose } from 'vue'
|
||
|
|
|
||
|
|
import { bottomSafeAreaHeight, screenHeight } from '@/components/public/Mixins.js'
|
||
|
|
const jyPopup = ref(null)
|
||
|
|
const emit = defineEmits(['savePost'])
|
||
|
|
defineProps({
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
showSave: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
saveTitle: {
|
||
|
|
type: String,
|
||
|
|
default: '保存'
|
||
|
|
},
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
default: 'content'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const close = () => {
|
||
|
|
jyPopup.value.close()
|
||
|
|
}
|
||
|
|
const open = () => {
|
||
|
|
jyPopup.value.open()
|
||
|
|
}
|
||
|
|
defineExpose({
|
||
|
|
close, open
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.jy-popup-content {
|
||
|
|
width: 100%;
|
||
|
|
border-radius: 30rpx;
|
||
|
|
|
||
|
|
.close-btn {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 52rpx;
|
||
|
|
line-height: 52rpx;
|
||
|
|
width: 52rpx;
|
||
|
|
background: #D8D8D8;
|
||
|
|
font-size: 30rpx;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
transform: translate(50%, -50%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.save-btn {
|
||
|
|
background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
margin: 0 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 80rpx;
|
||
|
|
// 底部边框显示
|
||
|
|
color: #3D3D3D;
|
||
|
|
font-size: 32rpx;
|
||
|
|
border-bottom: 1px solid #E5E5E5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.jy-popup-bottom {
|
||
|
|
width: 100%;
|
||
|
|
border-radius: 30rpx 30rpx 0 0;
|
||
|
|
|
||
|
|
.close {
|
||
|
|
position: absolute;
|
||
|
|
right: 20rpx;
|
||
|
|
top: 20rpx;
|
||
|
|
display: inline-block;
|
||
|
|
width: 50rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|