<template>
	<view class="userList">
		<view class="col-3d f-28 l-h-38 f-w-500 px-20 mb-20">功能中心</view>
		<u-cell-group :border="false">
			<u-cell
				v-for="(item, index) in userList"
				:key="index" :titleStyle="titleStyle"
				:rightIconStyle="rightIconStyle"
				:title="item.title"
				:border="false"
				:isLink="true"
				@click="goRouter(item.routerPath)"
			>
				<image class="userList_icon" slot="icon" :src="item.icon" mode="widthFix"></image>
			</u-cell>
		</u-cell-group>
	</view>
</template>

<script>
	import Message from '@/static/myImg/message.png'
	import Comment from '@/static/myImg/comment.png'
	import Data from '@/static/myImg/data.png'
	import Safe from '@/static/myImg/safe.png'
	export default {
		data(){
			return {
				userList: [
					{ title: '消息设置', icon: Message, routerPath: '/pages_my/msgSetting/msgSetting' },
					{ title: '场地评论', icon: Comment, routerPath: '/pages/arenaComment/arenaComment' },
					{ title: '资料设置', icon: Data, routerPath: '/pages_my/dataSetting/dataSetting' },
					{ title: '账号与安全', icon: Safe, routerPath: '/pages_my/userInfo/userInfo' }
				],
				titleStyle: {
					fontSize: '28rpx',
					color: '#3d3d3d',
					marginLeft: '20rpx'
				},
				rightIconStyle: {
					color: '#333',
					fontSize: '24rpx'
				}
			}
		},
		methods: {
			goRouter(path){
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userList{
		padding: 20rpx 0;
		margin: 20rpx 30rpx 0;
		background-color: #fff;
		border-radius: 12rpx;
	}
	.userList_icon{
		width: 48rpx;
		height: 48rpx;
	}
</style>