<template>
	<view class="page">
		<view class="header">
			<view class="userinfo">
				<view class="avator" @click="personziliao">
					<image src="../../static/userpic.png" mode="widthFix" />
				</view>
				<view class="infoBox">
					<view class="identity">
						<view class="name">我是用户昵称</view>
						<text class="vip">
							<image src="../../static/huiyuan.png" mode="widthFix" />
							VIP5
						</text>
					</view>
					<!-- <view class="userType">身份认证 >></view> -->
					<view class="userActive">
						<image src="../../static/active.png" mode="widthFix" />已认证
					</view>
				</view>
				<view class="setup" @click="set">
					<image src="../../static/setup.png" mode="widthFix" />
				</view>
			</view>
			<view class="orderBox">
				<view class="orderItem" @click="fahuo">
					<image src="../../static/order_a.png" mode="widthFix"></image>
					<view>待付款</view>
				</view>
				<view class="orderItem">
					<image src="../../static/order_b.png" mode="widthFix"></image>
					<view>待发货</view>
				</view>
				<view class="orderItem">
					<image src="../../static/order_c.png" mode="widthFix"></image>
					<view>配送中</view>
				</view>
				<view class="orderItem">
					<image src="../../static/order_d.png" mode="widthFix"></image>
					<view>待评价</view>
				</view>
				<view class="orderItem">
					<image src="../../static/order_e.png" mode="widthFix"></image>
					<view>全部订单</view>
				</view>
			</view>
		</view>
		<view class="contanier">
			<view class="citem" @click="jump" data-id="1">
				<view class="left">
					<image src="../../static/icon_a.png" mode="widthFix" />
					我的钱包
				</view>
				<view class="right">
					<image src="../../static/right.png" mode="widthFix" />
				</view>
			</view>
			<view class="citem" @click="jump" data-id="2">
				<view class="left">
					<image src="../../static/icon_b.png" mode="widthFix" />
					会员中心
				</view>
				<view class="right">
					<image src="../../static/right.png" mode="widthFix" />
				</view>
			</view>
			<view class="citem" @click="jump" data-id="3">
				<view class="left">
					<image src="../../static/icon_c.png" mode="widthFix" />
					我的积分
				</view>
				<view class="right">
					<image src="../../static/right.png" mode="widthFix" />
				</view>
			</view>
			<view class="citem" @click="jump" data-id="4">
				<view class="left">
					<image src="../../static/icon_e.png" mode="widthFix" />
					我的优惠卷
				</view>
				<view class="right">
					<image src="../../static/right.png" mode="widthFix" />
				</view>
			</view>
			<view class="citem" @click="jump" data-id="5">
				<view class="left">
					<image src="../../static/icon_f.png" mode="widthFix" />
					我的发布
				</view>
				<view class="right">
					<image src="../../static/right.png" mode="widthFix" />
				</view>
			</view>
			<view class="citem" @click="jump" data-id="6">
				<view class="left">
					<image src="../../static/icon_g.png" mode="widthFix" />
					销售管理
				</view>
				<view class="right">
					<image src="../../static/right.png" mode="widthFix" />
				</view>
			</view>
		</view>

		<!-- 底部导航 -->
		<view class="teacherfooter">
			<view class="teacherfootitem" @click="selnav" :data-id="1">
				<view class="teacherfootitemtop shou">
					<image :src="footersel==1?'../../static/tieziactive.png':'../../static/tiezi.png'"></image>
				</view>
				<view class="teacherfootname " :class="footersel==1?'activename':''">首页</view>
			</view>
			<view class="teacherfootitem" @click="selnav" :data-id="2">
				<view class="teacherfootitemtop shou">
					<image :src="footersel==2?'../../static/nearshopactive.png':'../../static/nearshop.png'"></image>
				</view>
				<view class="teacherfootname" :class="footersel==2?'activename':''">附近店铺</view>
			</view>
			<view class="teacherfootitem" @click="selnav" :data-id="3">
				<view class="teacherfootitemtop shou">
					<image :src="footersel==3?'../../static/luntanctive.png':'../../static/luntan.png'"></image>
				</view>
				<view class="teacherfootname" :class="footersel==3?'activename':''">中面论坛</view>
			</view>
			<view class="teacherfootitem" @click="selnav" :data-id="4">
				<view class="teacherfootitemtop shou">
					<image :src="footersel==4?'../../static/useractive.png':'../../static/user.png'"></image>
				</view>
				<view class="teacherfootname" :class="footersel==4?'activename':''">个人中心</view>
			</view>
		</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				footersel: 4
			}
		},
		methods: {
			// 设置
			set() {
				uni.navigateTo({
					url: '/pages/usercenter/setUp'
				})
			},
			// 列表跳转
			jump(e) {
				let id = e.currentTarget.dataset.id;
				if (id == 1) {
					uni.navigateTo({
						url: '/pages/usercenter/wallet'
					})
				} else if (id == 2) {
					uni.navigateTo({
						url: '/pages/usercenter/usercenter'
					})
				} else if (id == 3) {
					uni.navigateTo({
						url: '/pages/usercenter/myIntegral'
					})
				} else if (id == 4) {
					uni.navigateTo({
						url: '/pages/usercenter/myCoupon'
					})
				} else if (id == 5) {
					uni.navigateTo({
						url: '/pages/usercenter/myPublish'
					})
				} else if (id == 6) {
					uni.navigateTo({
						url: '/pages/usercenter/sales'
					})
				}
			},

			// 代发货
			fahuo() {
				uni.navigateTo({
					url: '/pages/usercenter/myOrder'
				})
			},
			// 底部导航跳转
			selnav(e){
				console.log(e)
				
				let id=e.currentTarget.dataset.id;
				console.log(id)
				if(id==1){
					uni.navigateTo({
						url:'../homepage/homepage'
					})
				}else if(id==2){
					uni.navigateTo({
						url:"../nearshop/nearshop"
					})
				}else if(id==3){
					uni.navigateTo({
						url:"../luntan/luntan"
					})
				}else if(id==4){
					uni.navigateTo({
						url:"../usercenter/my"
					})
				}
			},
					




		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.header {
		background: #fff;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.userinfo {
		padding: 32rpx 0;
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position: relative;
	}

	.avator {
		width: 128rpx;
		height: 128rpx;
		border-radius: 64rpx;
	}

	.avator image {
		width: 100%;
	}

	.infoBox {
		max-width: 466rpx;
		margin-left: 28rpx;

	}

	.identity {
		display: flex;
		align-items: center;
		margin-top: 16rpx;
	}

	.name {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(19, 20, 21, 1);
	}

	.vip {
		background: linear-gradient(90deg, rgba(244, 210, 151, 1) 0%, rgba(252, 191, 117, 1) 100%);
		border-radius: 20rpx;
		font-size: 22rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(120, 71, 0, 1);
		padding: 4rpx 12rpx;
		margin-left: 16rpx;
	}

	.vip image {
		width: 24rpx;
		margin-right: 6rpx;
	}

	.userType {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(61, 69, 76, 1);
		line-height: 40px;
	}

	.userActive {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(194, 148, 69, 1);
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.userActive image {
		width: 32rpx;
		margin-right: 8rpx;
	}

	.setup {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 32rpx;
		top: 52rpx;
	}

	.setup image {
		width: 100%;
	}

	.orderBox {
		padding: 24rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.orderItem {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		min-width: 84rpx;
	}

	.orderItem image {
		width: 56rpx;
	}

	.orderItem view {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(6, 18, 32, 1);
		margin-top: 4rpx;
	}

	.contanier {
		margin-top: 16rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.citem {
		height: 108rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #EDEDED;
	}

	.citem:last-child {
		border-bottom: none;
	}

	.left {
		width: calc(100% -50rpx);
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(8, 18, 31, 1);
	}

	.left image {
		width: 36rpx;
		margin-right: 16rpx;
	}

	.right {
		width: 32rpx;
	}

	.right image {
		width: 100%;
	}
</style>