[Miniprograma WeChat] Plataforma de venta de espacios de estacionamiento en línea (3)

[Miniprograma WeChat] Plataforma de venta de espacios de estacionamiento en línea (3)

---

prefacio

En el capítulo anterior se ha introducido el contenido general sobre el desarrollo de la página de inicio, en este capítulo desarrollaremos el centro personal.

---

1. Color de fondo

Primero, agregamos una capa de fondo degradado naranja-rojo sobre el fondo gris monótono.Aquí
primero configuramos un rango para el color de fondo:
aquí configuro la altura a: 400rpx y el ancho al 100%

.background{
    
    
    display: flex;
    width: 100%;
    height: 400rpx;
}

Luego importamos el color de fondo:

background: -webkit-linear-gradient(填上你想要的色调);

2. Información personal

Sobre esta base, agregamos avatares, apodos y bandejas de entrada.
Para mayor comodidad, aquí los ordenaré horizontalmente. El
primero es el avatar: el
avatar adopta el componente van-image , y se agrega wx:if para determinar si el usuario ha iniciado sesión. dentro o no.

    <!-- 头像 未登录 -->
    <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}}"/>

Luego agregue un apodo personal a la derecha:
aquí hago el juicio de inicio de sesión en el archivo js , ​​y solo se reserva un código de enlace en el archivo 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;
}

Finalmente agregue el icono de la bandeja de entrada:

    <!-- 信箱 -->
    <van-icon name="envelop-o" 
        wx:if="{
    
    {!noLogin}}"
        dot="true"
        bindtap="jump_info"
        custom-class="envelop"
        color="white"
        size="60rpx"/>

Guarde y actualice la ejecución, el efecto es el siguiente:

3. Orden de estacionamiento

La columna de pedido de espacio de estacionamiento se divide en cinco estados: todos los pedidos, pendiente de revisión, contrato pendiente, pago pendiente y completado.
Los formularios son similares a muchos subprogramas de centros comerciales.
Primero, divida un área blanca para la columna de pedido y céntrela horizontalmente. :

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;
}

Luego usa la cuadrícula para organizar:

<!-- 覆盖的白色图层 -->
<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>

Hice todos los saltos en el van-grid-item y, al mismo tiempo, juzgué si el usuario había iniciado sesión en el palacio. Cuando el usuario no ha iniciado sesión, el contenido de la cuadrícula no se muestra. Guarde y actualice la ejecución, el efecto es el siguiente:

4. Funciones comunes

Además de los pedidos más importantes, el applet viene con algunas funciones comunes: cupones, paquetes de tarjetas, colecciones, lotería, invitaciones para recién llegados
. Aquí uso celdas para disposición vertical, similar a la forma de pedidos:

<!-- 主体内容图层 -->
<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>

Guarde y actualice la ejecución, el efecto es el siguiente:

V. Resumen

Hay muchos saltos de página y juicios de estado involucrados en el centro personal, por lo que no los presentaré en detalle aquí.