<template>
	<view>
		<view class="head">
			<image src="@/static/img/common/pangdingLogo.png">
				
			</image>
			<text>尊敬的胖丁用户</text>
			
		</view>
		
		<view class="middle">
			<view class="middle1">
				<view class="middle1-list">
					<view>
						0
					</view>
					<view>
						收藏
					</view>
				</view>
				
				<view class="middle1-list" @click="goCoupon()">
					<view>
						0
					</view>
					<view>
						券中心
					</view>
				</view>
				
				<view class="middle1-list">
					<view>
						0
					</view>
					<view>
						钱包
					</view>
				</view>
				
				<view class="middle1-list">
					<view>
						0
					</view>
					<view>
						积分
					</view>
				</view>
			</view>
			
			<view class="middle2">
				<view class="middle2-top" @click="goOrderlist()">
					<view>
						我的订单
					</view>
					<view style="font-size: 24rpx;color: #999999;">
						全部订单
						<u-icon name='arrow-right'></u-icon>
						
					</view>
				</view>
				
				<view class="middle2-bottom">
					<view class="middle2-list" @click="goOrderlist(0)">
						<view>
							<image src="@/static/img/my/center/pay.png"></image>
						</view>
						<view>
							待付款
						</view>
					</view>
					
					<view class="middle2-list" @click="goOrderlist(2)">
						<view>
							<image src="@/static/img/my/center/play.png"></image>
						</view>
						<view>
							待使用
						</view>
					</view>
					<view class="middle2-list" @click="goOrderlist(5)">
						<view>
							<image src="@/static/img/my/center/evaluate.png"></image>
						</view>
						<view>
							评价
						</view>
					</view>
					<view class="middle2-list" @click="goAfterSaleList()">
						<view>
							<image src="@/static/img/my/center/refund.png"></image>
						</view>
						<view>
							退款/售后
						</view>
					</view>
				</view>
			</view>
			
			<view class="middle3">
				<view class="middle3-top">
					其他工具
				</view>
				
				<view class="middle3-bottom">
					<view class="middle3-list" @click="goCommoninfo()">
						<view>
							<image src="@/static/img/my/center/info.png"></image>
						</view>
						<view>
							常用信息
						</view>
					</view>
					<view class="middle3-list" @click="goMyServe()">
						<view>
							<image src="@/static/img/my/center/customer.png"></image>
						</view>
						<view>
							我的客服
						</view>
					</view>
					<view class="middle3-list" @click="goCodeResult()" >
						<view>
							<image src="@/static/img/my/center/code.png"></image>
						</view>
						<view>
							通行码
						</view>
					</view>
					<view class="middle3-list" @click="goMyPhoto()">
						<view>
							<image src="@/static/img/my/center/album.png"></image>
						</view>
						<view>
							我的影集
						</view>
					</view>
					<view class="middle3-list" @click="goshopping()">
						<view>
							<image src="@/static/img/my/center/shopping.png"></image>
						</view>
						<view>
							购物车
						</view>
					</view>
					<view class="middle3-list" @click="goTravelList()">
						<view>
							<image src="@/static/img/my/center/schedule.png"></image>
						</view>
						<view>
							行程单
						</view>
					</view>
					<view class="middle3-list" @click="goTravelNotes()">
						<view>
							<image src="@/static/img/my/center/mark.png"></image>
						</view>
						<view>
							我的行记
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
				
    }
  },
  methods: {
    //---跳转到订单列表
    goOrderlist(orderStatus){
      uni.navigateTo({
        url:'/pages/my/order/orderList/orderList?orderStatus='+orderStatus
      })
    },
    //---跳转购物车
    goshopping(){
		  uni.navigateTo({
		    url:'/pages/my/shopCart/shopCart'
		  })
    },
    //---跳转常用信息
    goCommoninfo(){
		  uni.navigateTo({
		    url:'/pages/my/commonInfo/commonInfo'
		  })
    },
    //---跳转通行码
    goCodeResult(){
		  uni.navigateTo({
		    url:'/pages/my/passCode/codeResult/codeResult'
		  })
    },
    //---跳转我的影集
    goMyPhoto(){
		  uni.navigateTo({
		    url:'/pages/album/purchasedPhotoAlbum/purchasedPhotoAlbum'
		  })
    },
    //---跳转我的客服
    goMyServe(){
		  uni.navigateTo({
		    url:'/pages/my/customerService/enterpriseWechat/enterpriseWechat'
		  })
    },
    //---跳转券中心
    goCoupon(){
		  uni.navigateTo({
		    url:'/pages/my/couponCenter/myCouponList/myCouponList'
		  })
    },
    //---跳转行程单
    goTravelList(){
		  uni.navigateTo({
		    url:'/pages/my/travelList/travelList/travelList'
		  })
    },
    //---跳转我的行记
    goTravelNotes(){
		  uni.navigateTo({
		    url:'/pages/my/travelNotes/myTravelogue/myTravelogue'
		  })
    },
    //---跳转售后列表
    goAfterSaleList(){
		  uni.navigateTo({
		    url:'/pages/my/order/afterSale/afterSaleList/afterSaleList'
		  })
    },
		
  }
}
</script>

<style lang="scss" scoped>
.head{
	padding: 0 24rpx;
	display: flex;
	align-items: center;
	color: #ffffff;
	height: 300rpx;
	background: linear-gradient(76deg, #1877FF 0%, #3C99F9 100%);
	image{
		width: 144rpx;
		height: 144rpx;
		margin-right:20rpx;
	}
}
.middle{
	position: relative;
	top: -60rpx;
	padding: 0 24rpx;
}
.middle1{
	display: flex;
	background: #FFFFFF;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
	border-radius:12rpx;
	padding:40rpx;
	justify-content: space-between;
}
.middle1-list{
	text-align: center;
	view:first-child{
		font-size: 40rpx;
		font-weight: bold;
	}
	view:nth-child(2){
		margin-top: 10rpx;
	}
}
.middle2,.middle3{
	background: #ffffff;
	margin-top: 20rpx;
	border-radius: 12rpx;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
}
.middle2-top,.middle3-top{
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #ececec;
	padding: 0 24rpx;
	font-weight: bold;
}
.middle2-bottom{
	display: flex;
	justify-content: space-between;
	padding: 24rpx 0;
}
.middle2-list{
	text-align: center;
	width: 25%;
	image{
		width: 64rpx;
		height: 64rpx;
	}
}
.middle3-bottom{
	display: flex;
	padding: 24rpx 0;
	flex-wrap: wrap;
}
.middle3-list{
	text-align: center;
	width: 25%;
	margin: 20rpx 0;
	image{
		width:80rpx;
		height:80rpx;
	}
}
</style>