fission-star-applet-250304/pages/index/index.vue

<template>
	<view class="page">

		<image src="../../static/image/home/bg.png" class="bg" mode="scaleToFill"></image>

		<view class="content">
			<navbar title="首页" bgColor="transparent" color="#FFFFFF" />
			
			<view class="btns">
				<button 
					v-for="item in list"
					:key="item.title"
					class="btn"
					plain
					@click="onClick(item.path)"
				>
					{{ item.title }}
				</button>
			</view>
		</view>
		
		<tabber select="home"/>

	</view>
</template>

<script>	
	import { mapState } from 'vuex'
	import tabber from '@/components/base/tabbar.vue'

	export default {
		components : {
			tabber,
		},
		data() {
			return {
				list: [
					{
						title: '个人分享',
						path: '/pages_order/record/personalSharing'
					},
					{
						title: '视频分享',
						path: '/pages_order/record/videoSharing'
					},
					{
						title: '群分享',
						path: '/pages_order/record/groupSharing'
					},
					{
						title: '文章分享',
						path: '/pages_order/record/articleSharing'
					},
				],
				bgUrl: null,
			}
		},
    computed: {
			...mapState(['userInfo']),
		},
		onShow() {
			this.fetchBg()
		},
		onLoad() {
			if (uni.getStorageSync('token') && !this.userInfo?.id) {
				this.$store.commit('getUserInfo')
			}
		},
		methods: {
      async fetchBg() {
        try {
					// todo: check
          this.bgUrl = (await this.$fetch('getBanner'))?.[0]?.image
        } catch (err) {
          
        }
      },
			onClick(url) {
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages_order/auth/wxLogin'
					})

					return
				}
				this.$utils.navigateTo(url)
			}
		},
	}
</script>

<style scoped lang="scss">

	.page{
		& /deep/ .uv-icon__icon{
			font-size: 30rpx !important;
		}

		position: relative;
		height: 100vh;
    overflow: hidden;

		.btns {
			display: grid;
			grid-column-gap: 34rpx;
			grid-row-gap: 34rpx;
			grid-template-columns: repeat(2, 1fr);
			position: absolute;
			bottom: 466rpx;
			width: 100%;
			padding: 0 58rpx;
			box-sizing: border-box;
		}

		.btn {
			color: $uni-text-color-highlight;
			border-color: #04D6A3;
			width: 100%;
			padding: 55rpx 0;
		}
	}

	.bg {
		width: 100vw;
		height: 100vh;
	}

	.content {
		position: absolute;
		width: 100vw;
		height: 100vh;
		top: 0;
	}
	
</style>