161 lines
3.2 KiB
Vue
161 lines
3.2 KiB
Vue
<template>
|
|
<view v-if="visible" class="room-location-dialog">
|
|
<view class="room-location-dialog__mask" @tap="onCancel" />
|
|
<view class="room-location-dialog__panel" @tap.stop>
|
|
<text class="room-location-dialog__title">{{ title }}</text>
|
|
<view class="room-location-dialog__input-wrap">
|
|
<input
|
|
v-model="roomName"
|
|
class="room-location-dialog__input"
|
|
type="text"
|
|
maxlength="20"
|
|
placeholder="请输入位置名称"
|
|
placeholder-class="room-location-dialog__placeholder"
|
|
:focus="visible"
|
|
/>
|
|
</view>
|
|
<view class="room-location-dialog__footer">
|
|
<view class="room-location-dialog__btn" @tap="onCancel">
|
|
<text class="room-location-dialog__btn-text">取消</text>
|
|
</view>
|
|
<view class="room-location-dialog__divider-v" />
|
|
<view class="room-location-dialog__btn" @tap="onConfirm">
|
|
<text class="room-location-dialog__btn-text room-location-dialog__btn-text--primary">
|
|
确定
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
visible: boolean
|
|
title?: string
|
|
}>(),
|
|
{
|
|
title: '设置房间位置',
|
|
},
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
'update:visible': [value: boolean]
|
|
confirm: [name: string]
|
|
}>()
|
|
|
|
const roomName = ref('')
|
|
|
|
watch(
|
|
() => props.visible,
|
|
(show) => {
|
|
if (show) roomName.value = ''
|
|
},
|
|
)
|
|
|
|
function onCancel() {
|
|
emit('update:visible', false)
|
|
}
|
|
|
|
function onConfirm() {
|
|
const name = roomName.value.trim()
|
|
if (!name) {
|
|
uni.showToast({ title: '请输入位置名称', icon: 'none' })
|
|
return
|
|
}
|
|
emit('confirm', name)
|
|
emit('update:visible', false)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.room-location-dialog {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.room-location-dialog__mask {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.55);
|
|
}
|
|
|
|
.room-location-dialog__panel {
|
|
position: relative;
|
|
width: 560rpx;
|
|
background: #fff;
|
|
border-radius: 24rpx;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
.room-location-dialog__title {
|
|
display: block;
|
|
padding: 48rpx 40rpx 32rpx;
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
color: $color-text;
|
|
text-align: center;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.room-location-dialog__input-wrap {
|
|
margin: 0 40rpx 40rpx;
|
|
padding: 0 28rpx;
|
|
height: 88rpx;
|
|
background: #f5f5f5;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.room-location-dialog__input {
|
|
flex: 1;
|
|
height: 88rpx;
|
|
font-size: 28rpx;
|
|
color: $color-text;
|
|
}
|
|
|
|
.room-location-dialog__placeholder {
|
|
color: #c0c4cc;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.room-location-dialog__footer {
|
|
display: flex;
|
|
align-items: stretch;
|
|
border-top: 1rpx solid #ebedf0;
|
|
}
|
|
|
|
.room-location-dialog__btn {
|
|
flex: 1;
|
|
height: 96rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.room-location-dialog__divider-v {
|
|
width: 1rpx;
|
|
background: #ebedf0;
|
|
}
|
|
|
|
.room-location-dialog__btn-text {
|
|
font-size: 32rpx;
|
|
color: $color-text;
|
|
line-height: 1;
|
|
}
|
|
|
|
.room-location-dialog__btn-text--primary {
|
|
color: #21c25e;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|