wxmini/pages/EstateDetail/index.wxml

<!--index.wxml-->
<view class="container flex-v">
  <view class="flex-item">
    <view class="content">
      <!-- 轮播图 -->
      <view class="banner">
        <view class="imgContent">
          <swiper autoplay="{{true}}" indicator-dots="{{true}}" indicator-color="#83837d" indicator-active-color="#e23838">
            <block wx:for="{{EstateDetail.buildingImg}}" wx:for-item="item" wx:for-index="index" wx:key="key">
              <swiper-item>
                <view class="swiper-item">
                  <image mode="aspectFill" src="{{item.url}}" class="centerLabel cover"></image>
                </view>
              </swiper-item>
            </block>
          </swiper>
        </view>
      </view>
      <view class="remark subContent">
        <view class="centerLabel">
          <view class="flex-h">
            <text class="name flex-item">{{EstateDetail.buildingName}}</text>
            <text class="price" wx:if="{{EstateDetail.name}}">别名:{{EstateDetail.name || ''}}</text>
          </view>
          <text>均价：{{EstateDetail.price}}</text>
        </view>
      </view>

      <!-- 围观 -->
      <view class="looker">
        <text>
          <text>{{EstateDetail.visits.length}}</text>人围观
        </text>
        <view class="list">
          <view class="item" wx:for="{{EstateDetail.visits}}" wx:for-index="index" wx:for-item="item" wx:key="key" wx:if="{{index <= 12}}">
            <image mode="aspectFill" src="{{item.avatar}}" data-index="index" class="centerLabel cover"></image>
            <view class="centerLabel" wx:if="{{index === 12}}" bindtap='toMore'>
              <text class="centerLabel">···</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 基本信息 -->
      <view class="mainInfo subContent">
        <text class="title">基本信息</text>
        <view class="list">
          <view class="flex-h">
            <text>开盘时间</text>
            <text class="flex-item">{{EstateDetail.openingDate}}</text>
          </view>
          <view class="flex-h">
            <text>项目地址</text>
            <text class="flex-item">{{EstateDetail.address}}</text>
          </view>
          <view class="flex-h">
            <text>物业类型</text>
            <text class="flex-item">{{EstateDetail.propertyType}}</text>
          </view>
          <view class="flex-h">
            <text>最新动态</text>
            <text class="flex-item">{{EstateDetail.dynamic}}</text>
          </view>
          <view class="flex-h">
            <text>楼盘优惠</text>
            <text class="flex-item"><text class="txtred">{{EstateDetail.discount || ''}}</text></text>
          </view>
        </view>
      </view>

      <!-- 户型 -->
      <view class="roomType subContent">
        <text class="title">户型（{{EstateDetail.buildingApartment.length}}）</text>
        <view class="list">
          <view class="item" wx:for="{{EstateDetail.buildingApartment}}" wx:for-item="item" wx:for-index="idx" wx:key="key">
            <view class="img">
              <image mode="aspectFit" src="{{item.imgUrl}}" class="centerLabel contain" data-type="buildingApartment" data-index="{{idx}}" bindtap="CheckMaxImg"></image>
            </view>
            <view class="info">
              <text>{{item.apartmentName}}</text>
              <!-- <text>{{item.remark}}</text> -->
            </view>
            <text>{{item.marketStatus}}</text>
          </view>
        </view>
      </view>

      <!-- 相册 -->
      <view class="roomType subContent" hidden="{{!EstateDetail.Photos.length}}">
        <text class="title">相册（{{EstateDetail.Photos.length}}）</text>
        <view class="list">
          <view class="item" wx:for="{{EstateDetail.Photos}}" wx:for-item="item" wx:for-index="idx" wx:key="key">
            <view class="img photos">
              <image mode="aspectFill" src="{{item.imgUrl}}" class="centerLabel cover" data-type="Photos" data-index="{{idx}}" bindtap="CheckMaxImg"></image>
            </view>
            <view class="info">
              <text>{{item.apartmentName}}（{{EstateDetail.Photos[idx].buildingImgList.length}}张）</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 周边配套 -->
      <view class="roomType subContent">
        <text class="title">周边配套</text>
        <view class="map">
          <view>
            <view class="mapBox">
              <view wx:if="EstateDetail">
                <!-- <map id="map" markers="{{EstateDetail.markers}}" longitude="{{EstateDetail.longitude}}" latitude="{{EstateDetail.latitude}}" scale="14" style="width: 100%; height: {{height}}px;"></map> -->
                <image mode="widthFix" src='{{EstateDetail.mapImg}}'></image>
              </view>
            </view>
            <view class="flex-h" bindtap='toMap'>
              <view class="flex-item">
                <text>{{EstateDetail.buildingName}}</text>
                <text>{{EstateDetail.address}}</text>
              </view>
              <text>前往</text>
              <image mode="widthFix" src="/assets/images/daohang.png"></image>
            </view>
          </view>
        </view>
        <view class="transInfo flex-h" bindtap='toMap'>
          <view class="flex-item" data-val='交通'>
            <text data-val='交通'>交通</text>
            <image data-val='交通' mode="widthFix" src="/assets/images/jiaotong.png"></image>
            <text data-val='交通'>约20处</text>
            <text data-val='交通'>接驳路线</text>
          </view>
          <view class="flex-item" data-val='教育'>
            <text data-val='教育'>教育</text>
            <image data-val='教育' mode="widthFix" src="/assets/images/jiaoyu.png"></image>
            <text data-val='教育'>约20所</text>
            <text data-val='教育'>教育机构</text>
          </view>
          <view class="flex-item" data-val='医疗'>
            <text data-val='医疗'>医疗</text>
            <image data-val='医疗' mode="widthFix" src="/assets/images/yiliao.png"></image>
            <text data-val='医疗'>约20所</text>
            <text data-val='医疗'>医疗机构</text>
          </view>
          <view class="flex-item" data-val='商业'>
            <text data-val='商业'>商业</text>
            <image data-val='商业' mode="widthFix" src="/assets/images/gouwu.png"></image>
            <text data-val='商业'>约20所</text>
            <text data-val='商业'>周边商业</text>
          </view>
        </view>
        <view style="padding: 0 40rpx;position:relative;overflow:hidden;">
          <rich-text nodes="{{EstateDetail.remark}}"></rich-text>
        </view>
      </view>

    </view>
  </view>

  <!-- 底部tab -->
  <view class="foot flex-h" style="padding-bottom: {{ScreenBottomHeight}}rpx">
    <view class="flex-item" style="background: #bb9c79;" bindtap="MakeAnAppointment">
      <image mode="widthFix" src="/assets/images/icon23.png" style="width: 34rpx;"></image>
      <text style="color: #fff;">预约看房</text>
    </view>
    <view class="flex-item">
      <image mode="widthFix" wx:if="{{!EstateDetail.IsCollect}}" src="/assets/images/icon25.png" style="width: 34rpx;"></image>
      <image mode="widthFix" wx:if="{{EstateDetail.IsCollect}}" src="/assets/images/icon26.png" style="width: 34rpx;"></image>
      <text bindtap="MakeCollect">{{EstateDetail.IsCollect ? '已收藏' : '收藏楼盘'}}</text>
    </view>
    <view class="flex-item" bindtap="OpenPhone">
      <image mode="widthFix" src="/assets/images/icon24.png" style="width: 34rpx;"></image>
      <text>电话咨询</text>
    </view>
  </view>

  <view class="maxSwiper" hidden="{{!ShowMaxSwiper}}">
    <swiper autoplay="{{false}}" indicator-dots="{{false}}" current="{{CurrentIndex}}">
      <block wx:for="{{CurrentImgList}}" wx:for-item="item" wx:for-index="index" wx:key="key">
        <swiper-item>
          <view class="swiper-item">
            <movable-area class="centerLabel contain" bindtap="CloseMaxSwiper">
              <movable-view scale="{{true}}" scale-min="1" scale-max="2" style='width:100%;height:100%' direction="all">
                <image mode="aspectFit" class="centerLabel contain" src="{{item.url}}"></image>
              </movable-view>
            </movable-area>
            <!-- <image mode="aspectFit" src="{{item.url}}" class="centerLabel contain" bindtap="CloseMaxSwiper"></image> -->
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>

</view>