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>

		<popupAuditMsg ref="popupAuditMsgRef" count="15"></popupAuditMsg>

		<popupActivate ref="popupActivate"></popupActivate>

		<tabber select="home" />

	</view>
</template>

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

	export default {
		components: {
			tabber,
			popupAuditMsg,
			popupActivate,
		},
		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'
					},
					// {
					// 	title: '视频',
					// 	path: '/pages_order/sharing/video?id=1922875315630133249'
					// },
				],
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onLoad(option) {
			const {
				id,
				state,
				shareId
			} = option

			if (shareId) {
				uni.setStorageSync('shareId', shareId)
			}

			if (state) {
				uni.setStorageSync('state', state)
			}

			if (id) {
				uni.setStorageSync('id', id)
			}

			if (shareId && !uni.getStorageSync('token')) {

				uni.navigateTo({
					url: '/pages_order/auth/wxLogin'
				})

				return
			}

			if (uni.getStorageSync('token') && !this.userInfo?.id) {
				this.$store.commit('getUserInfo')
			}
		},
		onShow() {
			this.getMsg()
		},
		methods: {
			onClick(url) {
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages_order/auth/wxLogin'
					})

					return
				}
				if (!this.userInfo.isPay) {
					this.$refs.popupActivate.open()
					return
				}
				this.$utils.navigateTo(url)
			},
			getMsg(){
				this.$refs.popupAuditMsgRef.open()
			},
		},
	}
</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: 360rpx;
			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>