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

文章目录

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

前言

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

一、背景色

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

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

五、总结

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