<template>
	<view>
		<ul>
			<li v-for="item in moduleLists" :key="item.no">
				<navigator :url="item.path" hover-class="other-navigator-hover">
					<view class="imgContainer"><img :src="`/sfp/static/images/${item.background}`" alt="" srcset=""></view>
					<text :style="{color:item.color}">{{item.name}}</text>
				</navigator>
			</li>
		</ul>
		<view style="text-align: center;">更多工具正在开发中，敬请期待。。。</view>
	</view>
</template>

<script>
	import api from "../../api/api"; 
	export default {
		data() {
			return {
				moduleLists:[
					{no:'1',name:'增额终身寿和年金险复利、单利计算',path:'/pages/index/index',background:'irrNavBg.jpg',color:'#EA8A49'},
					{no:'2',name:'购房能力测算',path:'/pages/housePurchase/housePurchase',background:'propertyBg.jpg',color:'#6F5AD4'},
					// {no:'3',name:'子女教育金测算',path:'',background:'childrenBgNavBg.jpg',color:'#CE8C1B'}
				]
			}
		},
		methods: {
			checkToken(){
				api.checkToken().then(res=>{
					if(res['success']){}else{
						api.obtainToken().then(res=>{
							if(res.success){
								uni.setStorageSync('uni-token',res.data['token']);
							}
						})
					}
				})
			}
		},
		mounted(){
			this.checkToken();
		}
	}
</script>

<style lang="scss">
	ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding:20rpx;
		li{
			width:0;
			flex: 0 0 49%;
			position: relative;
			margin-bottom: 20rpx;
			.imgContainer{
				img{
					max-width: 100%;
					height: auto;
				}
			}
			text{
				position: absolute;
				left: 10px;
				top: 10px;
				width: 60%;
				font-size: 15px;
				font-weight: bold;
			}
		}
	}
</style>
