lipin/pages/my/index.vue

<template>
	<view>
		<view class="header">
			<view class="info">
				<view class="avatar">
					<image :src="userInfo.avatar"></image>
				</view>
				<view class="text">
					<view class="name">{{userInfo.nickname}}<text>{{userInfo.levelname}}</text></view>
					<view>{{userInfo.mobile}}</view>
				</view>
			</view>
		</view>
		<view class="money">
			<view class="balance">
				账户余额(元)
				<view>{{userInfo.money}}</view>
			</view>
			<view>
				<navigator class="recharge" hover-class="none" url="/pages/users/recharge/index">充值</navigator>
				<navigator class="detail" hover-class="none" url="/pages/users/record/index?type=recharge">明细</navigator>
			</view>
		</view>
		<view class="order-wrapper">
			<view class="order-hd flex">
				<view class="left">我的订单</view>
				<navigator class="right flex" hover-class="none" url="/pages/users/order/index" open-type="navigate">
					查看全部
					<text class="iconfont icon-xiangyou"></text>
				</navigator>
			</view>
			<view class="order-bd">
				<block v-for="(item,index) in orderMenu" :key="index">
					<navigator class="order-item" hover-class="none" :url="item.url">
						<view class="pic">
							<image :src="item.img" mode=""></image>
							<text class="order-status-num" v-if="item.num > 0">{{ item.num }}</text>
						</view>
						<view class="txt">{{item.title}}</view>
					</navigator>
				</block>
			</view>
		</view>
		<view class="menu">
			<view class="title">我的服务</view>
			<view class="list">
				<navigator class="item" url="/pages/users/spread/index" hover-class="none">
					<text class="iconfont icon-iconfontzhizuobiaozhun49"></text>
					<text>邀请好友</text>
				</navigator>
				<navigator class="item" url="/pages/users/record/index?type=consumption" hover-class="none">
					<text class="iconfont icon-xiaofeimingxi"></text>
					<text>消费明细</text>
				</navigator>
				<navigator class="item" url="/pages/users/commission/index" hover-class="none">
					<text class="iconfont icon-yongjinmingxi"></text>
					<text>佣金明细</text>
				</navigator>
			</view>
		</view>		
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	import {		
		getUserInfo,
		getOrder
	} from '@/api/api.js';
	export default {
		data() {
			return {
				userInfo: {},
				orderMenu: [
					{
						title: '未支付',
						img: '../../static/images/order1.png',						
						url: '/pages/users/order/index?status=0'
					},
					{
						title: '打单中',
						img: '../../static/images/order2.png',						
						url: '/pages/users/order/index?status=1'
					},
					{
						title: '已出单',
						img: '../../static/images/order3.png',						
						url: '/pages/users/order/index?status=2'
					},
					{
						title: '异常',
						img: '../../static/images/order4.png',						
						url: '/pages/users/order/index?status=9'
					},
					{
						title: '取消',
						img: '../../static/images/order5.png',						
						url: '/pages/users/order/index?status=-1'
					}
				],
			}
		},
		computed: mapGetters(['isLogin']),
		onLoad() {
		    if (this.isLogin) {
		    	this.getUserInfo();
				this.getOrderData();
		    }else{
				toLogin();
			}
		},
		methods: {
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data;
				});
			},
			//获取订单统计数据
			getOrderData: function() {
				let that = this;
				getOrder().then(res => {
					that.orderMenu.forEach((item, index) => {
						switch (item.title) {
							case '未支付':
								item.num = res.data.unpaid
								break
							case '打单中':
								item.num = res.data.inorder
								break
							case '已出单':
								item.num = res.data.sendOrder
								break
							case '异常':
								item.num = res.data.abnormalOrder
								break
							case '取消':
								item.num = res.data.cancelOrder
								break
						}
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.header{
		height:360rpx;
		background: linear-gradient(90deg,#ff5c00 0,#FF464E);
		.info{
			display: flex;
			padding-top: 80rpx;
			padding-left: 25rpx;
			.avatar{
				width: 125rpx;
				height: 125rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				border: 1px solid hsla(0,0%,100%,.5);
				image{
					width:110rpx;
					height:110rpx;
					border-radius: 50%;
				}
			}
			.text{
				color:#fff;
				padding-left: 20rpx;
				padding-top: 10rpx;
				.name{
					font-size: 36rpx;
					font-weight: bolder;
					margin-bottom: 10rpx;
					text{
						color: #fff;
						opacity: 0.8;
						font-size: 24rpx;
						border: 1px solid hsla(0,0%,100%,.6);
						border-radius: 30rpx;
						padding: 2rpx 15rpx;
						margin-left: 15rpx;
					}
				}
			}
		}
	}
	.money{
		width:700rpx;
		margin-left: 25rpx;
		margin-top: -100rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		justify-content:space-between;
		.balance{
			font-size: 30rpx;
			view{
				font-size: 50rpx;
				font-weight: 600;
				color: #ff5c00;
				margin-top: 20rpx;
			}
		}
		.recharge{
			background: #ff5c00;
			color:#fff;
			font-size: 28rpx;
			text-align: center;
			border-radius: 30rpx;
			width:150rpx;
			height:60rpx;
			line-height: 60rpx;
			margin-bottom: 20rpx;
		}
		.detail{
			width:150rpx;
			height:60rpx;
			line-height: 60rpx;
			border: 1rpx solid #ebedf0;
			border-radius: 30rpx;
			font-size: 28rpx;
			text-align: center;
		}
	}
	.order-wrapper {
		width:700rpx;
		margin-left: 25rpx;
		background: #fff;
		border-radius: 15rpx;
		.order-hd {
			justify-content: space-between;
			padding: 25rpx 20rpx;
			margin-top: 25rpx;
			font-size: 30rpx;
			color: #282828;

			.right {
				align-items: center;
				color: #666666;
				font-size: 26rpx;

				.icon-xiangyou {
					margin-left: 5rpx;
					margin-top: 6rpx;
					font-size: 26rpx;
				}
			}
		}

		.order-bd {
			display: flex;
			.order-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 20%;
				height: 160rpx;

				.pic {
					position: relative;
					text-align: center;

					image {
						width: 70rpx;
						height: 70rpx;
					}
				}

				.txt {
					font-size: 26rpx;
					color: #454545;
				}
			}
		}
	}
	.menu{
		width:700rpx;
		margin: 25rpx;
		padding: 25rpx 20rpx;
		border-radius: 15rpx;
		background: #fff;
		.title{
			font-size: 30rpx;
		}
		.list{
			width:660rpx;
			overflow: hidden;
			.item{
				width:25%;
				float:left;
				text-align: center;
				margin-top: 30rpx;
				image{
					width:70rpx;
					height:70rpx;
				}
				text{
					display: block;
					color:#636363;
				}
				.iconfont{
					font-size: 70rpx;
				}
			}
		}
	}
	.order-status-num {		
		min-width:12rpx;
		background-color: #fff;
		color: #ee5a52;
		border-radius: 15px;
		position: absolute;
		right:-12rpx;
		top: -10rpx;
		font-size: 20rpx;
		padding: 0 8rpx;
		border: 1px solid #ee5a52;
	}
</style>