[WeChat Mini Program] Plateforme de vente de places de stationnement en ligne (4)
Annuaire d'articles
avant-propos
Le développement du centre personnel a été présenté dans le chapitre précédent, dans ce chapitre, nous présenterons le reste de l'information sur les places de stationnement.
1. Affichage de l'espace de stationnement 3D
L'affichage de l'espace de stationnement 3D est la principale caractéristique de l'applet.Grâce
à la perspective panoramique 3D, les utilisateurs peuvent comprendre les détails de l'espace de stationnement de manière plus intuitive.Avec la bénédiction des espaces de stationnement 3D, la véritable réalisation de la technologie d' espace de stationnement 3D
qui peut vraiment promouvoir les ventes d'espaces de stationnement en ligne peuvent se référer à three.js L'introduction ici, je ne montre que les rendus de l'espace de stationnement 3D [la durée du GIF est de 30 secondes, car la limite de taille ne peut utiliser que 480p]
2. Commande de place de parking - détails de la commande
Ici, nous introduisons l'interface des détails de la commande pour les commandes d'espace de stationnement.
Parce que le statut de la commande est différent, l'interface des détails de la commande est également différente.
Ici, je ne montre que l' interface de la commande terminée
. Ajoutez d'abord une couleur d'arrière-plan
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;
}
Ensuite, ajoutez une barre d'informations blanche en haut
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;
}
Ajoutez ensuite la colonne d'informations sur l'espace de stationnement
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;
}
Le reste du montant du paiement et les informations de commande sont similaires et ne seront pas présentés ici.
Différents statuts de commande ont des contenus différents . Vous
devez examiner attentivement .
3. Détails des places de stationnement
La mise en page de la page d'accueil a été introduite dans le deuxième chapitre , ici nous introduisons le développement des détails de l'espace de stationnement
Le premier concerne les informations sur les places de stationnement.
Les informations sur les places de stationnement se composent de la barre de notification, de la carte du carrousel, de l'emplacement de la place de stationnement, du prix de la place de stationnement et des informations de base sur la place de stationnement.
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;
}
En plus de l'affichage des informations de base, il existe également une liste d'espaces de stationnement , un plan d'espace de stationnement et une interface d' achat d'espace
de stationnement dans les détails de l'espace de stationnement. Le plan d'étage de l'espace de stationnement utilise le composant de défilement et appelle les fonctions de la série bindTouch pour lire l'écran Coordonnées pour réaliser le zoom avant et arrière du mobile.Ici
pour l'affichage uniquement
