feat: 启动页

This commit is contained in:
2025-12-17 16:22:19 +08:00
parent 97f2bfe14b
commit 761f273a5d
8 changed files with 1647 additions and 1413 deletions
@@ -0,0 +1,108 @@
<template>
<view class="splash" v-if="show">
<!-- 宽度 = 屏幕宽,高度自适应 -->
<image
class="splash__bg"
:src="sharePoster.posterUrl"
mode="widthFix"
@tap="goDetail"
/>
<view class="splash__count" @tap.stop="goHome"> {{ count }}s 后跳过 </view>
</view>
</template>
<script>
import { getSharePoster } from "@/api/common.js";
export default {
data() {
return {
show: true, // 控制整个假启动页销毁
count: 3,
timer: null,
sharePoster: {},
};
},
async onLoad() {
const hasShown = getApp().globalData.launchShown;
if (hasShown) {
uni.switchTab({ url: "/pages/home/home" });
return;
}
getApp().globalData.launchShown = true; // 置为已展示
await this.getPoster();
this.startCountdown();
},
onUnload() {
this.clearTimer();
},
methods: {
/* 拉取海报 */
async getPoster() {
const { bizcode, data } = await getSharePoster({ type: 0 });
if (bizcode === 100 && data.length) {
this.sharePoster = data[0];
} else {
uni.switchTab({ url: "/pages/home/home" });
}
},
/* 倒计时 */
startCountdown() {
this.timer = setInterval(() => {
this.count--;
if (this.count <= 0) this.goHome();
}, 1000);
},
clearTimer() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
/* 业务跳转 */
goHome() {
this.clearTimer();
uni.switchTab({ url: "/pages/home/home" });
},
goDetail() {
this.clearTimer();
if (this.sharePoster.id) {
uni.navigateTo({
url: `/pages/other_package/productInfo/productInfo?id=${this.sharePoster.id}&isSplash=true`,
});
} else {
uni.switchTab({ url: "/pages/home/home" });
}
},
},
};
</script>
<style scoped lang="scss">
.splash {
position: fixed;
inset: 0;
background: #000; // 防止图片透明区域露白
display: flex;
align-items: center; // 图片上下居中
justify-content: center;
&__bg {
width: 100%; // 宽度 = 屏幕宽
height: auto; // 高度自适应
display: block; // 去掉图片底部空隙
}
&__count {
position: absolute;
right: 40rpx;
top: 80rpx;
color: #fff;
font-size: 26rpx;
padding: 6rpx 16rpx;
background: rgba(0, 0, 0, 0.35);
border-radius: 20rpx;
}
}
</style>