【微信小程序】车位在线销售平台（四）
前言
在前一章节中已经介绍了关于个人中心的开发介绍，在这一章节中我们将对剩余的有关车位信息的内容进行介绍。
一、3D车位展示
3D车位展示是小程序的主要特色
通过3D全景的视角，用户可以更直观的了解车位的详情
有了3D车位的加持，才能够真正推动线上车位销售的真正实现
3D车位技术可以参考three.js的介绍
这里我只展现3D车位的效果图
[GIF时长30s，因为大小限制只能采用480p]
二、车位订单——订单详情
这里我们介绍一下车位订单的订单详情界面
由于订单的状态不同，订单详情界面也不一样
这里我仅展示已完成的订单界面
首先添加一块背景色
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;
}
接着，在上方添加一块白色信息栏
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;
}
接着加入车位信息栏
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;
}
剩下的支付金额和订单信息与之相似，这里不再做介绍
不同的订单状态所具有的内容不同
大家需要仔细斟酌
三、车位详情
在第二章中已经介绍了关于首页的布局，这里我们介绍一下车位详情的开发
首先是车位信息
车位信息由通知栏、轮播图、车位地点、车位售价和车位基本信息组成
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;
}
除了基本信息的展示，车位详情中还有车位列表、车位平面图和车位购买界面
其中车位平面图采用scroll-view组件并调用bindTouch系列函数进行屏幕坐标的读取，来实现图片的移动放大和缩小
这里我仅作展示
