project/mobile-shop/pages/my/my.vue

<template>
	<view class="my">
		<!-- 用户名和头像 -->
		<view class="user_name">
			<van-image class="picture" round width="5rem" height="5rem" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
			<view class="name">
				<text>小郑</text>
			</view>
		</view>
		<!-- 分割线 -->
		<van-divider hairline customStyle="border:5px solid #eee;" />
		<!-- 导航菜单 -->
		<view class="nav">
			<view class="left">我的订单</view>
			<view class="right" @click="goOrder">查看全部</view>
		</view>
		<!-- 分割线 -->
		<van-divider hairline customStyle="border:2px solid #eee;" />
		<!-- 货物状态 -->
		<van-grid @click.native="goOrder" :border='false'>
		  <van-grid-item icon="balance-pay" :badge="myOrder.unPay" text="待支付" />
		  <van-grid-item icon="logistics" :badge="myOrder.payed" text="待发货" />
		  <van-grid-item icon="records-o" :badge="myOrder.consignment" text="代签收" />
		  <van-grid-item icon="sign" :badge="myOrder.success" text="已完成" />
		</van-grid>
		<!-- 分割线 -->
		<van-divider hairline customStyle="border:3px solid #eee;" />
		<!-- 商城信息 -->
		<van-grid class="user-details" column-num="3" :border="false" style="height: 5rem;">
		  <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 hairline customStyle="border:3px solid #eee;" />
		<!-- 其他操作 -->
		<van-cell-group>
				<van-cell title-style="cell-title" title="分销中心" icon="cart-o" is-link />
				<van-cell title-style="cell-title" title="领券中心" icon="coupon-o" is-link />
				<van-cell title-style="cell-title" title="我的优惠券" icon="label-o" is-link />
				<van-cell title-style="cell-title" title="收货地址" icon="location-o" @click="goAddress" is-link />
		</van-cell-group>
		<!-- 登出按钮 -->
		<view class="btn">
			<van-button type="danger" class="loginOut" @click="loginOut">退出登录</van-button>
		</view>
	</view>
</template>

<script>
import {orderCount} from '../../api/my.js';
	export default {
		data() {
			return {
				myOrder:{}
			}
		},
		onShow() {
			orderCount().then(res => {
				this.myOrder = res;
			})
		},
		methods: {
			goOrder() {
				uni.navigateTo({
					url:"/pages/list/list"
				})
			},
			goAddress() {
				uni.navigateTo({
					url:"/pages/address/address"
				})
			},
			loginOut() {
				uni.removeStorageSync('token');
				uni.redirectTo({
					url:"/pages/login/login"
				})
			}
		}
	}
</script>

<style lang="scss">
	.user_name {
		height: 400rpx;
		    display: flex;
		    align-items: center;
		    flex-direction: column;
				.picture {
					padding-top: 130rpx;
				}
				.name {
					padding-top: 25rpx;
				}
	}
	.nav {
		    height: 40rpx;
		    display: flex;
		    justify-content: space-between;
		    padding: 0 18rpx;
		    font-size: 34rpx;
				.left {
					font-size: 40rpx;
				}
				.right {
					color: #ccc;
				}
	}
	.btn {
		width: 100%;
		height: 300rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>