109 lines
2.4 KiB
Vue
109 lines
2.4 KiB
Vue
<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>
|