project/project1/pages/my/my.vue

<template>
	<view class="my">
		<view class="header">
			<van-image width="100" round height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
			<view class="name">
				小郑
			</view>
		</view>
		<!-- 分割线 -->
		<van-divider customStyle="border:7px solid #eee" />
		<!-- 我的订单 -->
		<view class="list">
			<view class="order">我的订单</view>
			<view class="all" @click="goList">查看全部</view>
		</view>
		<!-- 分割线 -->
		<van-divider customStyle="border:3px solid #eee" />
		<!-- 发货状态 -->
		<van-grid :border="false">
			<van-grid-item icon="cashier-o" text="待支付" :badge="myOrder.unPay" />
			<van-grid-item icon="logistics" text="待发货" :badge="myOrder.payed" />
			<van-grid-item icon="records-o" text="代签收" :badge="myOrder.consignment" />
			<van-grid-item icon="completed-o" text="待完成" :badge="myOrder.success" />
		</van-grid>
		<!-- 分割线 -->
		<van-divider customStyle="border:5px solid #eee" />
		<!-- 个人记录 -->
		<van-grid column-num="3" :border="false">
			<van-grid-item use-slot>
				2<br />我的收藏
			</van-grid-item>
			<van-grid-item use-slot>
				2<br />我的消息
			</van-grid-item>
			<van-grid-item use-slot>
				2<br />我的足迹
			</van-grid-item>
		</van-grid>
		<!-- 分割线 -->
		<van-divider customStyle="border:5px solid #eee" />
		<!-- 列表信息 -->
		<van-cell title="分销中心" is-link :border="false" icon="cart-o" />
		<van-cell title="领卷中心" is-link :border="false" icon="coupon-o" />
		<van-cell title="我的优惠券" is-link :border="false" icon="label-o" />
		<van-cell title="收货地址" is-link :border="false" icon="location-o" @click="goAdd" />
		<!-- 退出登陆 -->
		<div class="footer">
			<van-button type="danger" @click="loginOut">退出登陆</van-button>
		</div>
	</view>
</template>

<script>
	import {
		orderCount
	} from '@/api/order.js';
	export default {
		data() {
			return {
				myOrder: {}
			}
		},
		onShow() {
			this.init();
		},
		methods: {
			async init() {
				this.myOrder = await orderCount();
				console.log(this.myOrder, 'order')
			},
			goList() {
				uni.navigateTo({
					url: "/pages/list/list"
				})
			},
			goAdd() {
				uni.navigateTo({
					url:"/pages/address/address"
				})
			},
			loginOut() {
				uni.clearStorageSync();
				uni.redirectTo({
					url:"/pages/login/login"
				})
			}
		}
	}
</script>

<style lang="scss">
	.header {
		width: 100%;
		height: 190rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-self: center;
		padding: 100rpx 0;
	}

	.list {
		height: 50rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 15rpx;
		font-size: 38rpx;

		.all {
			font-size: 32rpx;
			color: #ccc;
		}
	}
	.footer {
		height: 240rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>