【微信小程序】车位在线销售平台（三）
文章目录
前言
在前一章节中已经介绍了关于首页开发的大致内容，在这一章节中我们将对个人中心进行开发。
一、背景色
首先，我们在单调的灰色背景上，新添一层橙红色的渐变背景
这里我们先为背景色设立一个范围：
这里我将高度设为：400rpx，宽度则为100%
.background{
display: flex;
width: 100%;
height: 400rpx;
}
接着我们导入背景色：
background: -webkit-linear-gradient(填上你想要的色调);
二、个人信息
在此基础上，我们添加头像、昵称和收件箱
为了方便，这里我将它们统一以横向排列
首先是头像：
头像采用van-image组件，并加入wx:if进行判断用户是否登录
<!-- 头像 未登录 -->
<van-image class="portrait"
wx:if="{{noLogin}}" //判断是否登录
round width="160rpx"
height="160rpx"
fit="cover"
src="{{head_portrait}}"
bind:click="login" />
<!-- 头像 已登录 -->
<van-image class="portrait"
wx:if="{{!noLogin}}"
round width="160rpx"
height="160rpx"
fit="cover"
src="{{head_portrait}}"/>
接着在右侧添加个人昵称：
这里我将登录判断做在了js文件中，在wxml文件中仅保留了一个绑定代码
wxml:
<!-- 个人昵称 -->
<text class="username">
{{username}}
</text>
wxss:
/* 用户名 */
.username{
margin-left: 30rpx;
margin-top:80rpx;
font-size: 38rpx;
font-weight: bold;
width: 360rpx;
color:white;
}
最后加入收件箱图标：
<!-- 信箱 -->
<van-icon name="envelop-o"
wx:if="{{!noLogin}}"
dot="true"
bindtap="jump_info"
custom-class="envelop"
color="white"
size="60rpx"/>
保存刷新运行，效果如下：
三、车位订单
车位订单栏中，分为五个状态：全部订单、待审核、待签约、待支付和已完成
形式众多商场小程序类似
首先为订单栏划分一块白色区域并水平居中：
wxml:
<!-- 覆盖的白色图层 -->
<view class="order_block">
</view>
wxss:
/* 订单板块 */
.order_block{
display: flex;
flex-direction: column;
width:700rpx;
height: 250rpx;
margin-left: 25rpx;
margin-top: -120rpx;
border-radius: 10rpx;
background-color: white;
}
接着使用宫格进行排列：
<!-- 覆盖的白色图层 -->
<view class="order_block">
<text class="title">车位订单</text>
<van-grid column-num="5" border="{{ false }}" icon-color="red" wx:if="{{!noLogin}}">
<van-grid-item icon="shopping-cart" text="全部订单" icon-color="red" link-type="navigateTo" url="../user/order/order"/>
<van-grid-item icon="clock" text="待审核" icon-color="red" link-type="navigateTo" url="../user/order/order"/>
<van-grid-item icon="balance-list" text="待签约" icon-color="red" link-type="navigateTo" url="../user/order/order"/>
<van-grid-item icon="todo-list" text="待支付" icon-color="red" link-type="navigateTo" url="../user/order/order"/>
<van-grid-item icon="checked" text="已完成" icon-color="red" link-type="navigateTo" url="../user/order/order"/>
</van-grid>
</view>
每一个跳转我都做在了van-grid-item中，同时在宫格外判断了用户是否登录，当用户未登录时，不展现宫格内容。保存刷新运行，效果如下：
四、常用功能
除了最主要的订单外，小程序内附带了一些常用功能：优惠券、卡包、收藏、摇号、新人邀请
这里我采用单元格进行竖直排列，和订单的形式相似：
<!-- 主体内容图层 -->
<view class="main_block">
<text class="title">常用功能</text>
<view class="main_block2">
<van-cell-group custom-class="cell_group" border="{{false}}" wx:if="{{!noLogin}}">
<van-cell title="我的优惠券" is-link title-style="font-size:28rpx" icon="coupon-o" link-type="navigateTo"url="../user/coupon/coupon"/>
<van-cell title="我的卡包" is-link title-style="font-size:28rpx" icon="paid" link-type="navigateTo"url="../user/card/card" />
<van-cell title="我的收藏" is-link title-style="font-size:28rpx" icon="star-o" link-type="navigateTo"url="../user/collection/collection" />
<van-cell title="我的摇号" is-link title-style="font-size:28rpx" icon="service-o" link-type="navigateTo"url="../user/yaohao/yaohao" />
<van-cell title="我的邀请" is-link title-style="font-size:28rpx" icon="share-o" link-type="navigateTo"url="../user/share/share" />
<van-cell border="{{false}}" title="个人信息" is-link title-style="font-size:28rpx" icon="setting-o" link-type="navigateTo"url="../user/setting/setting" />
</van-cell-group>
</view>
</view>
保存刷新运行，效果如下：
五、总结
个人中心这块涉及到的页面跳转和状态判断较多，这里就不做详细介绍了。