ClassContent/历届学生/苏琪/项目练习/newApp/appFont/pages/my/my.vue

<template>
	<view class="my">
		<view class="logined" v-if="isLogin">
			<view class="myTitle">
				<image src="../../static/defaulticon.png" mode="aspectFit"></image>
				<view class="userMsg">
					<h3>Mr.Right</h3>
					<p>这家伙真懒，签名都不设置</p>
				</view>
			</view>
			<view class="nav">
				<ul>
					<li><image src="../../static/collection.png" mode="aspectFit"></image><p>收藏</p></li>
					<li><image src="../../static/read.png" mode="aspectFit"></image><p>阅读</p></li>
					<li><image src="../../static/message.png" mode="aspectFit"></image><p>消息</p></li>
				</ul>
			</view>
			<view class="other">
				<view class="vip">
					<view class="otherTitle"> <image src="../../static/vip.png" mode="aspectFit"></image> vip会员</view>
					<p>立即开通 > </p>
				</view>
				<ul>
					<li>
						<view class="icon"><image src="../../static/like.png" mode="aspectFit"></image>想读</view>
						<p>0</p>
					</li>
					<li>
						<view class="icon"><image src="../../static/upload.png" mode="aspectFit"></image> 上传</view>
						<p>0</p>
					</li>
					<li>
						<view class="icon"><image src="../../static/buy.png" mode="aspectFit"></image> 已购买</view>
						<p>0</p>
					</li>
					<li>
						<view class="icon"><image src="../../static/histroy.png" mode="aspectFit"></image>浏览记录</view>
						<p>0</p>
					</li>
					<li>
						<view class="icon"><image src="../../static/help.png" mode="aspectFit"></image>帮助中心</view>
						<p>0</p>
					</li>
				</ul>
			</view>
			<button type="primary">退出</button>
		</view>
		<view class="unlogin" v-else="">
			<view class="myTitle">
				<image src="../../static/defaulticon.png" mode="aspectFit"></image>
				<view class="userMsg">
					<h3>您还未登录</h3>
					<view class="toLogin" @click="toLogin()">登录</view>
				</view>
			</view>
			<view class="nav">
				<ul>
					<li><image src="../../static/collection.png" mode="aspectFit"></image><p>收藏</p></li>
					<li><image src="../../static/read.png" mode="aspectFit"></image><p>阅读</p></li>
					<li><image src="../../static/message.png" mode="aspectFit"></image><p>消息</p></li>
				</ul>
			</view>
			<view class="other">
				<view class="vip">
					<view class="otherTitle"> <image src="../../static/vip.png" mode="aspectFit"></image> vip会员</view>
					<p>立即开通 > </p>
				</view>
				<ul>
					<li>
						<view class="icon"><image src="../../static/like.png" mode="aspectFit"></image>想读</view>
						<p>0</p>
					</li>
					<li>
						<view class="icon"><image src="../../static/upload.png" mode="aspectFit"></image> 上传</view>
						<p>0</p>
					</li>
					<li>
						<view class="icon"><image src="../../static/buy.png" mode="aspectFit"></image> 已购买</view>
						<p>0</p>
					</li>
					<li>
						<view class="icon"><image src="../../static/histroy.png" mode="aspectFit"></image>浏览记录</view>
						<p>0</p>
					</li>
					<li>
						<view class="icon"><image src="../../static/help.png" mode="aspectFit"></image>帮助中心</view>
						<p>0</p>
					</li>
				</ul>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters, mapMutations, mapActions } from 'vuex'
	export default {
		data() {
			return {
				isLogin: false
			}
		},
		created() {
			
		},
		onShow() {
			// this.$utils.AuthenticateLogin()
		},
		methods: {
			toLogin(){
				uni.navigateTo({
					url: './login'
				});
			}
		},
		computed: {
		}
	}
</script>

<style lang="less">
	.my{
		.myTitle{
			height: 200upx;
			display: flex;
			align-items: center;
			flex-flow: row;
			padding: 0upx 40upx;
			.toLogin{
				text-align: center;
				border-radius: 50upx; 
				width: 180upx;
				height: 50upx;
				color: #ffffff;
				background-color: #efa716;
			}
			image{
				width: 120upx;
			}
			.userMsg{
				margin-left: 40upx;
				h3{
					font-size: 36upx;
					color: #3c3c3c;
					font-weight: bold;
				}
				p{
					font-size: 28upx;
					color: #999999;
				}
			}
		}
		.nav{
			height: 100upx;
			padding: 20upx 0;
			border-top: 1upx solid #f3f3f3;
			border-bottom: 1upx solid #f3f3f3;
			ul{
				height: 100%;
				display: flex;
				flex-flow: row;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-around;
				li{
					height: 100%;
					display: inline-flex;
					justify-content: center;
					align-items: center;
					flex-flow: column;
					color: #999999;
					image{
						width: 72upx;
					}
				}
			}
		}
		.other{
			display: flex;
			flex-flow: column;
			color: #999999;
			.vip{
				height: 100upx;
				display: flex;
				flex-flow: row;
				align-items: center;
				justify-content: space-between;
				padding: 0 20upx;
				border-top: 8upx solid #f3f3f3;
				border-bottom: 10upx solid #f3f3f3;
				.otherTitle{
					height: 100%;
					display: inline-flex;
					justify-content: center;
					align-items: center;
				}
			}
			image{
				width: 32upx;
				height: 32upx;
				margin-right: 20upx;
			}
			ul{
				
				li{
					height: 100upx;
					border-bottom: 1upx solid #f3f3f3;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 20upx;
					.icon{
						display: flex;
						justify-content: center;
						flex-flow: row;
						align-items: center;
					}
				}
			}
		}
		uni-button{
			width: 600upx;
			height: 80upx;
			border-radius: 40upx;
			line-height: 80upx;
			margin-top: 20upx;
		}
	}
</style>