【微信小程序】车位在线销售平台（三）

文章目录

【微信小程序】车位在线销售平台（三）
前言
一、背景色
二、个人信息
三、车位订单
四、常用功能
五、总结

前言

在前一章节中已经介绍了关于首页开发的大致内容，在这一章节中我们将对个人中心进行开发。

一、背景色

首先，我们在单调的灰色背景上，新添一层橙红色的渐变背景
这里我们先为背景色设立一个范围：
这里我将高度设为：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>

保存刷新运行，效果如下：

五、总结

个人中心这块涉及到的页面跳转和状态判断较多，这里就不做详细介绍了。