【微信小程序】车位在线销售平台(三)
2022/2/21 17:26:17
本文主要是介绍【微信小程序】车位在线销售平台(三),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
【微信小程序】车位在线销售平台(三)
文章目录
- 【微信小程序】车位在线销售平台(三)
- 前言
- 一、背景色
- 二、个人信息
- 三、车位订单
- 四、常用功能
- 五、总结
前言
在前一章节中已经介绍了关于首页开发的大致内容,在这一章节中我们将对个人中心进行开发。
一、背景色
首先,我们在单调的灰色背景上,新添一层橙红色的渐变背景
这里我们先为背景色设立一个范围:
这里我将高度设为: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>
保存刷新运行,效果如下:
五、总结
个人中心这块涉及到的页面跳转和状态判断较多,这里就不做详细介绍了。
这篇关于【微信小程序】车位在线销售平台(三)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践
- 2023-12-25小程序优化:第三方SDK过大解决方案
- 2023-11-26微信小程序文件预览和下载-文件系统
- 2023-11-2652天学习微信小程序计划No.2:注册小程序账号&安装开发者工具
- 2023-11-1952天学习微信小程序计划No.1:小程序简介