<template>
	<view class="setting">
		<custom-nav :title="pageTitle"></custom-nav>
		<tel-verify v-if="showVerify" :changeTel="true"></tel-verify>
		<custom-toast ref='toast'></custom-toast>
		
		<view class="content">
			<image @tap="tosignup" :src="userServerInfo.banner_3" mode="scaleToFill"></image>
			<view class="list">
				<navigator url="../help/help">
					<view class="item solid-bottom">帮助中心 <text class="cuIcon-right"></text></view>
				</navigator>
				<!-- <view class="item solid-bottom" @tap="toaddress">地址管理 <text class="cuIcon-right"></text></view> -->
				<view class="item solid-bottom" @tap="show" v-if="userServerInfo.type === 1">更换手机 <text class="cuIcon-right"></text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import telVerify from '../../components/tel-verify.vue'
	export default {
		components: {
			telVerify
		},
		data() {
			return {
				pageTitle: '设置'
			};
		},
		computed: {
			showVerify () {
				return this.$store.state.showVerify
			},
			userServerInfo () {
				return this.$store.state.userServerInfo
			}
		},
		methods: {
			tosignup () {
				if (this.$verified()) {
					if (this.userServerInfo.type === 1 && this.userServerInfo.status === 1) {  //只有普通用户才可以通过banner图进入报名页面
						if (this.userServerInfo.signuped) {
							this.$refs.toast.hover('您已经报名参赛')
						} else {
							uni.navigateTo({ url: '../signup/signup' })
						}
					}
				} else {
					this.$store.commit('SHOWVERIFY')
				}
			},
			toaddress () {
				if (this.$verified()) {  //政委不可以管理地址
					if (this.userServerInfo.type === 1 || this.userServerInfo.type === 2) {
						uni.navigateTo({
							url: '../address/address'
						})
					}
				} else {
					this.$store.commit('SHOWVERIFY')
				}
			},
			show () {
				this.$store.commit('SHOWVERIFY')
			}
		},
		created () {  //加载完成后开启监听全局 MESSAGE 事件
			uni.$on('MESSAGE', (m, d, p) => {  //m 要提示的文字信息  d 文字信息出现的时常  p 文字信息出现的位置
				this.$refs.toast.hover(m, d, p)
			})
		},
		beforeDestroy() {  //离开页面之前关闭手机验证弹框
			this.$store.commit('HIDEVERIFY')
		}
	}
</script>

<style lang="scss" scoped>
	.setting {
		@include page();
		.content {
			background: $custom-nav-borderbot-color;
			image {
				width: 100%;
				height: 302rpx;
				display: block;
			}
			.list {
				margin-top: 8rpx;
				.item {
					height: 98rpx;
					background: #FFFFFF;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 32rpx;
					padding: 0 50rpx;
					color: rgba(42, 42, 42, 1);
					.cuIcon-right {
						color: #2A2A2A;
						font-size: 38rpx;
					}
				}
			}
		}
	}
</style>
