<template>
	<view class="content">
		<my-baseNar />
		<view class="myInfoInit">
			<view class="myInfoImg">
				<image class="init_image" :src="userInfo.avatar" mode=""></image>
			</view>
			<view class="myInfoInitInfo" @click="goEditMyinfo">
				<view class="myInfoInitInfoTop">
					<view class="myInfoInitInfoTop-name">
						{{userInfo.nickname}}
					</view>
					<view class="myInfoInitInfoTop-back">
						<u-icon name="arrow-right"></u-icon><span>编辑</span>
					</view>
				</view>
				<view class="myInfoInitInfoBottom">
					{{userInfo.phone_sec}}
				</view>
			</view>
		</view>
		<view class="myTab">
			<u-cell-group :border="false">
				<u-cell :border="false" title="全部订单" :clickable="false" @click="goMyOrderlist('-1')" value="查看全部">
					<u-icon name="arrow-right" slot="right-icon" size="18"></u-icon></u-cell>
			</u-cell-group>
			<view class="orderTypeList">
				<view class="orderType" @click="goMyOrderlist('0')">
					<view class="orderTypeIcon">
						<image class="init_image" src="http://amy.yyinhong.cn/uploads/wximg/pc_dfk.png" mode="">
						</image>
					</view>
					<view class="orderTypeName">
						待付款
					</view>
				</view>
				<view class="orderType" @click="goMyOrderlist('1')">
					<view class="orderTypeIcon">
						<image class="init_image" src="http://amy.yyinhong.cn/uploads/wximg/pc_ddh.png" mode="">
						</image>
					</view>
					<view class="orderTypeName">
						待到货
					</view>
				</view>
				<view class="orderType" @click="goMyOrderlist('2')">
					<view class="orderTypeIcon">
						<image class="init_image" src="http://amy.yyinhong.cn/uploads/wximg/pc_dlq.png" mode="">
						</image>
					</view>
					<view class="orderTypeName">
						待领取
					</view>
				</view>
				<view class="orderType" @click="goMyOrderlist('3')">
					<view class="orderTypeIcon">
						<image class="init_image" src="http://amy.yyinhong.cn/uploads/wximg/pc_dpj.png" mode="">
						</image>
					</view>
					<view class="orderTypeName">
						待评价
					</view>
				</view>
			</view>
		</view>
		<view class="myTab">
			<u-cell-group :border="false">
				<u-cell :icon="item.iconName" v-for="(item,index) in myCellList" :border="false" :key="index"
					:title="item.text" @click="tabChange(item.pagePath)" :isLink="true"></u-cell>
			</u-cell-group>
		</view>
		<view @click="userLoginout" class="loginOutBtn">
			退出登录
		</view>
		<u-toast ref="uToast"></u-toast>
		<my-tabbar :currentTab='3' />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				myCellList: [{
						"pagePath": "/pageSub-pc/pages/myBalance/myBalance",
						"iconName": "http://amy.yyinhong.cn/uploads/wximg/pc_wdye.png",
						"text": "我的积分",
						"name": "myBalance"
					},
					{
						"pagePath": "/pageSub-index/pages/inviteFriends/inviteFriends",
						"iconName": "http://amy.yyinhong.cn/uploads/wximg/pc_yqhy.png",
						"text": "邀请好友",
						"name": "inviteFriends"
					},
					{
						"pagePath": "/pageSub-pc/pages/myFriend/myFriend",
						"iconName": "http://amy.yyinhong.cn/uploads/wximg/pc_wdhy.png",
						"text": "我的好友",
						"name": "myFriend"
					},
					{
						"pagePath": "/pageSub-pc/pages/myCollection/myCollection",
						"iconName": "http://amy.yyinhong.cn/uploads/wximg/pc_sc.png",
						"text": "我的收藏",
						"name": "myCollection"
					},
					// {
					// 	"pagePath": "/pageSub-pc/pages/mybankList/mybankList",
					// 	"iconName": "http://amy.yyinhong.cn/uploads/wximg/bankicon.png",
					// 	"text": "我的银行卡",
					// 	"name": "mybankList"
					// },
					{
						"pagePath": "/pageSub-pc/pages/platformService/platformService",
						"iconName": "http://amy.yyinhong.cn/uploads/wximg/pc_kf.png",
						"text": "平台客服",
						"name": "platformService"
					}
				]
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			//获取用户信息
			getUserInfo() {
				this.$request('/user-info', 'GET', {}).then(res => {
					console.log('请求成功');
					this.userInfo = res.data;
					uni.setStorageSync('userInfo', res.data)
				}).catch(err => {
				})
			},
			tabChange(res) {
				uni.navigateTo({
					url: res
				})
			},
			userLoginout() {
				this.$request('/logout', 'GET', {}).then(res => {
					uni.clearStorageSync();
					this.$refs.uToast.show({
						type: 'success',
						message: "退出登录成功",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png',
						complete() {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					})
				}).catch(err => {
					uni.showToast({

						icon: 'error',

						title: '' + err.message

					})
				})
			},
			goMyOrderlist(e) {
				uni.navigateTo({
					url: '/pageSub-pc/pages/myOrderlist/myOrderlist?status=' + e
				})
			},
			//编辑个人信息
			goEditMyinfo() {
				uni.navigateTo({
					url: '/pageSub-pc/pages/editMyinfo/editMyinfo'
				})
			}
		}
	}
</script>
<style lang="scss">
	.content {
		width: 100vw;
		min-height: 100vh;
		overflow-y: scroll;
		background: linear-gradient(to bottom, #f3d4d7, #f8f8f8, #f8f8f8);
	}

	.myTab {
		width: calc(100% - 80rpx);
		min-height: 104rpx;
		margin: 0 40rpx;
		margin-top: 30rpx;
		border-radius: 24rpx;
		background-color: #ffffff;
		padding: 15rpx 0;
	}

	.myInfoInit {
		margin: 30rpx;
		width: calc(100% - 60rpx);
		padding: 30rpx 0;
		display: flex;
		flex-direction: row;
		align-items: center;

		.myInfoImg {
			height: 120rpx;
			width: 120rpx;
			background-color: #ffffff;
			border-radius: 120rpx;
			overflow: hidden;
		}

		.myInfoInitInfo {
			flex: 1;
			margin-left: 20rpx;
			height: 120rpx;

			.myInfoInitInfoTop {
				height: 60rpx;
				line-height: 60rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				.myInfoInitInfoTop-name {
					width: 70%;
					font-size: 40rpx;
					color: #333333;
					font-weight: 600;
				}

				.myInfoInitInfoTop-back {
					width: 30%;
					font-size: 24rpx;
					color: #333333;
					font-weight: 600;
					display: flex;
					flex-direction: row-reverse;
					align-items: center;
				}
			}

			.myInfoInitInfoBottom {
				height: 60rpx;
				line-height: 60rpx;
				width: 100%;
				font-size: 30rpx;
				color: #333333;
			}
		}
	}

	.loginOutBtn {
		width: calc(100% - 100rpx);
		height: 90rpx;
		margin: 100rpx 50rpx;
		margin-bottom: 300rpx !important;
		color: #ffffff;
		text-align: center;
		letter-spacing: 5rpx;
		line-height: 90rpx;
		font-size: 30rpx;
		background-color: #FF4D4F;
		border-radius: 90rpx;
	}

	.orderTypeList {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.orderType {
		width: calc(100% / 4);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.orderTypeIcon {
		width: 72rpx;
		height: 72rpx;
		margin: 8rpx;
		// background-color: #f3d4d7;
	}

	.orderTypeName {
		width: 100%;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		font-size: 24rpx;
		color: #444444;
	}
</style>