72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
<template>
|
|
<!-- 仅在有配置时显示悬浮球 -->
|
|
<view v-if="floatConfig && floatConfig.image" class="float-ball" @click="openPopup">
|
|
<image class="float-ball__img" :src="floatConfig.image" mode="aspectFill"></image>
|
|
</view>
|
|
|
|
<!-- 弹窗：居中展示图片，可关闭 -->
|
|
<up-popup v-model:show="showPopup" bgColor="transparent" mode="center" :closeable="true" :overlay="true" :safeAreaInsetBottom="false">
|
|
<view class="popup-content">
|
|
<image v-if="floatConfig && floatConfig.popupImage" class="popup-image" :src="floatConfig.popupImage" mode="widthFix" :show-menu-by-longpress="true"></image>
|
|
</view>
|
|
</up-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { getFloatConfig, getConfigData } from '@/common/server/config';
|
|
|
|
const floatConfig = ref(null);
|
|
const showPopup = ref(false);
|
|
|
|
const loadConfig = async () => {
|
|
// 确保配置已预加载
|
|
await getConfigData();
|
|
floatConfig.value = await getFloatConfig();
|
|
};
|
|
|
|
const openPopup = () => {
|
|
showPopup.value = true;
|
|
};
|
|
|
|
onMounted(async () => {
|
|
await loadConfig();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.float-ball {
|
|
position: fixed;
|
|
right: 24rpx;
|
|
bottom: 180rpx;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
z-index: 10080;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.15);
|
|
background: rgba(255,255,255,0.9);
|
|
}
|
|
|
|
.float-ball__img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.popup-content {
|
|
max-width: 640rpx;
|
|
max-height: 80vh;
|
|
padding: 0;
|
|
}
|
|
|
|
.popup-image {
|
|
width: 640rpx;
|
|
border-radius: 16rpx;
|
|
display: block;
|
|
}
|
|
</style>
|
|
|