微信公众号开发

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

本文主要是介绍【微信小程序】车位在线销售平台(三),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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

文章目录

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


前言

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


一、背景色

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

保存刷新运行,效果如下:
在这里插入图片描述


五、总结

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

这篇关于【微信小程序】车位在线销售平台(三)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!