130 lines
3.7 KiB
Vue
130 lines
3.7 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">
|
|
<!-- <view class="ip" :style="getStyle"></view> -->
|
|
<SpriteAnimator
|
|
class="welcome-animator"
|
|
:src="spriteStyle.welcomeImageUrl"
|
|
: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 {
|
|
welcomeImageUrl: 'https://oss.nianxx.cn/mp/static/version_101/zn/zn_large.png',
|
|
frameWidth: 395,
|
|
frameHeight: 335,
|
|
totalFrames: 71,
|
|
columns: 1,
|
|
displayWidth: 158,
|
|
};
|
|
});
|
|
|
|
// "ipLargeImage":"https://oss.nianxx.cn/mp/static/version_101/dh/dh_large.png",
|
|
// "ipLargeImageWidth": 395,
|
|
// "ipLargeImageHeight": 335,
|
|
// "ipLargeTotalFrames": 71,
|
|
// "ipLargeColumns": 1,
|
|
|
|
// "ipSmallImage":"https://oss.nianxx.cn/mp/static/version_101/dh/dh_small.png",
|
|
// "ipSmallImageWidth": 395,
|
|
// "ipSmallImageHeight": 335,
|
|
// "ipSmallTotalFrames": 71,
|
|
// "ipSmallColumns": 1
|
|
|
|
const getStyle = computed(() => {
|
|
const images = initPageImages.value;
|
|
const style = {
|
|
"--ipLargeImageStep": images.ipLargeImageStep ?? config.ipLargeImageStep,
|
|
"--ipLargeImageHeight": images.ipLargeImageHeight ?? config.ipLargeImageHeight,
|
|
"--ipLargeTime": images.ipLargeTime ?? config.ipLargeTime,
|
|
backgroundImage: `url(${images.ipLargeImage || config.ipLargeImage})`,
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundSize: "158px auto",
|
|
backgroundPosition: "0 0",
|
|
};
|
|
console.log("welcome image style:", style);
|
|
return style;
|
|
});
|
|
|
|
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>
|