<template>
	<s-layout :title="$t('index.user.title')" tabbar="/pages/index/user" navbar="custom"
		:bgStyle="template.style?.background" :navbarStyle="template.style?.navbar" onShareAppMessage
		:showFloatButton="true">
		<s-block v-for="(item, index) in template.data" :key="index" :styles="item.style">
			<s-block-item :type="item.type" :data="item.data" :styles="item.style" />
		</s-block>
		<view class="index-icon-list">
			<view class="index-icon-btn">
				<view class="icon" @click="goCashBack()">
					<image src="/static/6.png" class="index-icon"></image>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		computed
	} from 'vue';
	import {
		onShow,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';

	// 隐藏原生tabBar
	uni.hideTabBar();

	const template = computed(() => sheep.$store('app').template.user);
	const isLogin = computed(() => sheep.$store('user').isLogin);

	const goCashBack = () => {
		sheep.$router.go('/pages/index/finance');
	};
	onShow(() => {
		sheep.$store('user').updateUserData();
	});

	onPullDownRefresh(() => {
		sheep.$store('user').updateUserData();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 800);
	});

	onPageScroll(() => {});
</script>

<style>
	.index-icon-list {
		position: fixed;
		bottom: 10vh;
		right: 10px;
		z-index: 9;
	}

	.index-icon-list .index-icon-btn {
		width: 45px;
		height: 45px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 3px 7px 0 rgba(157, 96, 130, .5);
		margin-bottom: 19px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.index-icon-list image {
		width: 36px;
		height: 36px;
	}
</style>