95 lines
2.8 KiB
Vue
95 lines
2.8 KiB
Vue
v
|
|
<template>
|
|
<view class="welcome-content border-box p-12">
|
|
<view class="wrap rounded-20">
|
|
<view class="flex flex-items-center flex-justify-between border-box pl-12 pr-12">
|
|
<SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
|
|
:frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
|
|
:displayWidth="spriteStyle.displayWidth" :fps="16" />
|
|
<view class="welcome-text font-size-14 font-500 font-family-misans-vf color-171717 line-height-24">
|
|
{{ welcomeContent }}
|
|
</view>
|
|
</view>
|
|
|
|
<ChatMoreTips :guideWords="guideWords" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, computed, getCurrentInstance, defineExpose } from "vue";
|
|
import { getCurrentConfig } from "@/constant/base";
|
|
import ChatMoreTips from "../ChatMoreTips/index.vue";
|
|
import SpriteAnimator from "@/components/Sprite/SpriteAnimator.vue";
|
|
|
|
const props = defineProps({
|
|
mainPageDataModel: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
initPageImages: {
|
|
backgroundImageUrl: "",
|
|
logoImageUrl: "",
|
|
welcomeImageUrl: "",
|
|
},
|
|
welcomeContent:
|
|
"查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!",
|
|
guideWords: [
|
|
"定温泉票",
|
|
"定酒店",
|
|
"优惠套餐",
|
|
"亲子玩法",
|
|
"了解交通",
|
|
"看看酒店",
|
|
"看看美食",
|
|
],
|
|
};
|
|
},
|
|
},
|
|
});
|
|
|
|
const initPageImages = computed(() => {
|
|
return props.mainPageDataModel?.initPageImages || {};
|
|
});
|
|
|
|
const config = getCurrentConfig();
|
|
|
|
const spriteStyle = computed(() => {
|
|
const images = initPageImages.value;
|
|
return {
|
|
ipLargeImage: images.ipLargeImage ?? config.ipLargeImage,
|
|
frameWidth: images.ipLargeImageWidth ?? config.ipLargeImageWidth,
|
|
frameHeight: images.ipLargeImageHeight ?? config.ipLargeImageHeight,
|
|
totalFrames: images.ipLargeTotalFrames ?? config.ipLargeTotalFrames,
|
|
columns: images.ipLargeColumns ?? config.ipLargeColumns,
|
|
displayWidth: 158,
|
|
};
|
|
});
|
|
|
|
const welcomeContent = computed(() => props.mainPageDataModel.welcomeContent);
|
|
const guideWords = computed(() => props.mainPageDataModel.guideWords);
|
|
|
|
// Welcome 可视状态与高度
|
|
const instance = getCurrentInstance();
|
|
|
|
// 测量欢迎区域高度
|
|
const measureWelcomeHeight = (callback) => {
|
|
uni
|
|
.createSelectorQuery()
|
|
.in(instance)
|
|
.select(".welcome-content")
|
|
.boundingClientRect((res) => {
|
|
if (res && res.height) {
|
|
callback(res);
|
|
}
|
|
})
|
|
.exec();
|
|
};
|
|
|
|
defineExpose({ measureWelcomeHeight });
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "./styles/index.scss";
|
|
</style>
|