[Programa WeChat Mini] Plataforma de venta de espacios de estacionamiento en línea (4)
Directorio de artículos
prefacio
En el capítulo anterior se ha introducido el desarrollo del centro personal, en este capítulo se introducirá el resto de información de plazas de aparcamiento.
1. Pantalla de espacio de estacionamiento 3D
La visualización del espacio de estacionamiento en 3D es la característica principal del applet.
A través de la perspectiva panorámica en 3D, los usuarios pueden comprender los detalles del espacio de estacionamiento de manera más intuitiva. Con la bendición de los espacios de estacionamiento en 3D, la realización real de la tecnología de espacio de estacionamiento en 3D
que realmente puede promover Las ventas de espacios de estacionamiento en línea pueden referirse a tres.js La introducción aquí solo muestro las representaciones del espacio de estacionamiento en 3D [la duración del GIF es de 30 segundos, porque el límite de tamaño solo puede usar 480p]
2. Pedido de plaza de aparcamiento - detalles del pedido
Aquí presentamos la interfaz de detalles del pedido para pedidos de espacio de estacionamiento.
Debido a que el estado del pedido es diferente, la interfaz de detalles del pedido también es diferente.
Aquí solo muestro la interfaz de pedido completa
. Primero agregue un color de fondo
wxml
<!-- 顶部背景色 -->
<view class="top-back bg-cyan">
<!-- 订单状态 -->
<text>已完成</text>
</view>
wxss
/* 顶部背景色 */
.top-back{
display: flex;
width: 750rpx;
height: 200rpx;
}
.top-back text{
margin-left:20rpx;
margin-top: 20rpx;
font-size: 32rpx;
color:#fff;
font-weight: 400;
}
A continuación, agregue una barra de información blanca en la parte superior
wxml
<!-- 白色信息栏 -->
<view class="top">
<view class="top-text1">
<text>李贝贝 15168689087</text>
</view>
<view class="top-text2">
<text>浙江省 杭州市 西湖区 龙井路1号</text>
</view>
</view>
wxss
/* 白色信息栏 */
.top{
position: fixed;
left: 25rpx;
top:100rpx;
border-radius: 10rpx;
width: 700rpx;
height: 200rpx;
background-color: #fff;
}
.top-text1{
display: flex;
width: 700rpx;
height: 70rpx;
}
.top-text1 text{
margin-left: 20rpx;
margin-top: 20rpx;
font-size: 34rpx;
}
.top-text2{
margin-top: 20rpx;
display: flex;
width: 650rpx;
height: 70rpx;
}
.top-text2 text{
margin-left: 20rpx;
font-size: 30rpx;
color: #7f7f7f;
}
Luego agregue la columna de información del espacio de estacionamiento
wxml
<!-- 车位信息栏 -->
<view class="mid">
<!-- 左侧图片 -->
<view class="left-img">
<image src="https://z3.ax1x.com/2021/09/15/4V9aHe.jpg" mode="aspectFill" style="width:200rpx;height:200rpx"/>
</view>
<!-- 右侧内容 -->
<view class="right-content">
<!-- 内容一 -->
<view class="info">
<text style="margin-left:10rpx;margin-top:20rpx;font-size:32rpx">翠微嘉园</text>
</view>
<view class="info">
<text style="margin-top:10rpx;font-size:28rpx">【高档小区】翠微嘉园A区...</text>
</view>
<view class="info">
<text style="font-size:28rpx;color:#7f7f7f">【标准】车位号：A-66</text>
</view>
</view>
</view>
wxss
/* 车位信息栏 */
.mid{
position: fixed;
left: 25rpx;
top:320rpx;
width: 700rpx;
height: 260rpx;
background-color: #fff;
border-radius: 10prx;
display: flex;
}
/* 左侧照片 */
.left-img{
margin: 20rpx;
width: 200rpx;
height: 200rpx;
}
/* 右侧内容 */
.right-content{
display: flex;
flex-direction: column;
width:450rpx ;
height: 260rpx;
}
/* 内容 */
.info{
display: flex;
width: 450rpx;
height: 80rpx;
background-color: #fff;
}
El resto del monto del pago y la información del pedido son similares y no se presentarán aquí.
Los diferentes estados del pedido tienen diferentes contenidos .
Debe considerarlo cuidadosamente .
3. Detalles de las plazas de aparcamiento
El diseño de la página de inicio se introdujo en el segundo capítulo , aquí presentamos el desarrollo de los detalles del espacio de estacionamiento.
El primero es la información del espacio
de estacionamiento.La información del espacio de estacionamiento consiste en la barra de notificaciones, el mapa del carrusel, la ubicación del espacio de estacionamiento, el precio del espacio de estacionamiento y la información básica del espacio de estacionamiento.
wxml
<!-- 通知栏 -->
<van-notice-bar
left-icon="volume-o"
scrollable
text="业主: wx179119291****已认购"
/>
<!-- 轮播图 -->
<view>
<swiper class="swiper" autoplay="true" indicator-dots="true">
<swiper-item wx:for="{
{image}}">
<image src="{
{item}}" style="width:750rpx" mode="aspectFill"></image>
</swiper-item>
</swiper>
</view>
<!-- 名称地点 -->
<view class="block1">
<!-- 顶部 -->
<view class="top">
<!-- 标题 -->
<view class="top-title">
<text>翠微嘉园</text>
</view>
<!-- 状态 -->
<view class="top-status">
<text>已开盘</text>
</view>
</view>
<!-- 标价 -->
<view class="top-money">
<text style="margin-left:20rpx;margin-top:10rpx;font-size:30rpx">车位售价:</text>
<text style="margin-left:10rpx;font-size:40rpx">10.0-13.0</text>
<text style="margin-left:8rpx;margin-top:10rpx;font-size:30rpx">万</text>
</view>
<!-- 卡片 -->
<view class="card shadow-warp radius">
<!-- 卡片内容1 -->
<view class="card-content1">
<!-- 数字 -->
<text style="font-size:46rpx;color:red;margin-top:26rpx">60</text>
<!-- 类型文字 -->
<text style="font-size:30rpx;color:#7F7F7F;margin-top:20rpx">已售车位</text>
</view>
<!-- 卡片内容2 -->
<view class="card-content2">
<!-- 数字 -->
<text style="font-size:46rpx;color:#1cbbb4;margin-top:26rpx">140</text>
<!-- 类型文字 -->
<text style="font-size:30rpx;color:#7F7F7F;margin-top:20rpx">未售车位</text>
</view>
<!-- 卡片内容3 -->
<view class="card-content3">
<!-- 数字 -->
<text style="font-size:46rpx;color:#0081ff;margin-top:26rpx">1:1</text>
<!-- 类型文字 -->
<text style="font-size:30rpx;color:#7F7F7F;margin-top:20rpx">车位配比</text>
</view>
</view>
<!-- 文字栏 -->
<view class="block2">
<!-- 内容 -->
<view class="block2-content">
<text style="color:#AAAAAA;width:170rpx;height:60rpx">开发商</text>
<text style="color:#555555;width:500rpx;height:60rpx">浙江省杭州市西湖区龙井路1号</text>
</view>
<view class="block2-content">
<text style="color:#AAAAAA;width:170rpx;height:60rpx">地址</text>
<text style="color:#555555;width:500rpx;height:60rpx">浙江省/杭州市/西湖区 龙井路</text>
</view>
<view class="block2-content">
<text style="color:#AAAAAA;width:170rpx;height:60rpx">总户数</text>
<text style="color:#555555;width:500rpx;height:60rpx">1080</text>
</view>
<view class="block2-content">
<text style="color:#AAAAAA;width:170rpx;height:60rpx">容积率</text>
<text style="color:#555555;width:500rpx;height:60rpx">2.8</text>
</view>
<view class="block2-content">
<text style="color:#AAAAAA;width:170rpx;height:60rpx">车位总数</text>
<text style="color:#555555;width:500rpx;height:60rpx">200</text>
</view>
<view class="block2-content">
<text style="color:#AAAAAA;width:170rpx;height:60rpx">周边价格</text>
<text style="color:#555555;width:500rpx;height:60rpx">11-12万</text>
</view>
<view class="block2-content">
<text style="color:#AAAAAA;width:170rpx;height:60rpx">产权年限</text>
<text style="color:#555555;width:500rpx;height:60rpx">30年</text>
</view>
</view>
</view>
<!-- 底部按钮 -->
<button class="btn bg-red" bindtap="jump_list">查看车位</button>
wxss
/* 轮播图 */
.swiper{
width: 750rpx;
height: 330rpx;
}
/* 名称地点 */
.block1{
display: flex;
flex-direction: column;
width: 750rpx;
height: 900rpx;
background-color: #fff;
}
/* 顶部 */
.top{
display: flex;
margin-top: 30rpx;
width: 750rpx;
height: 80rpx;
}
/* 顶部标题 */
.top-title{
width: 550rpx;
height: 80rpx;
}
.top-title text{
font-size: 36rpx;
font-weight: 500;
margin-left: 20rpx;
}
/* 顶部状态 */
.top-status{
margin-left: 40rpx;
border-radius: 10rpx;
width: 110rpx;
height: 50rpx;
background-color: red;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
font-size: 26rpx;
}
/* 标价 */
.top-money{
display: flex;
width: 750rpx;
height: 100rpx;
color: red;
}
/* 卡片 */
.card{
display: flex;
margin-left: 25rpx;
width: 700rpx;
height: 200rpx;
background-color: #fff;
}
/* 卡片内容1 */
.card-content1{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 25rpx;
width: 200rpx;
height: 150rpx;
border-right-color: #D7D7D7;
border-right-style:solid ;
border-right-width: 1rpx ;
}
/* 卡片内容2 */
.card-content2{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 25rpx;
width: 300rpx;
height: 150rpx;
border-right-color: #D7D7D7;
border-right-style:solid ;
border-right-width: 1rpx ;
}
/* 卡片内容3 */
.card-content3{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 25rpx;
width: 200rpx;
height: 150rpx;
}
/* 文字栏 */
.block2{
margin-left: 25rpx;
margin-top: 50rpx;
width: 700rpx;
height: 300rpx;
display: flex;
flex-direction: column;
}
/* 内容 */
.block2-content{
display: flex;
flex-direction: row;
width: 700rpx;
height: 60rpx;
}
.block2-content text{
font-size: 28rpx;
}
/* 按钮 */
.btn{
margin-top: 30rpx;
width: 450rpx;
height: 70rpx;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 34rpx;
font-weight: 300;
}
.btn::after{
border:none;
}
Además de la visualización de información básica, también hay una lista de espacios de estacionamiento, un plan de espacios de estacionamiento y una interfaz de compra de espacios
de estacionamiento en los detalles del espacio de estacionamiento. coordenadas para realizar el zoom móvil acercar y alejar la imagen. Aquí solo para visualización
