change index

pages/components/RoomCard/index.js

@@ -0,0 +1,21 @@
+
+// const app = getApp()
+
+Component({
+  properties: {
+    room: {
+      type: Object,
+      value: {},
+    },
+  },
+  attached() {
+    console.log(this.properties.room)
+  },
+  methods: {
+    handleTap() {
+      wx.navigateTo({
+        url: `/pages/EstateDetail/index?id=${this.properties.room.buildingId}`
+      })
+    }
+  }
+})

pages/components/RoomCard/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

pages/components/RoomCard/index.less

@@ -0,0 +1,82 @@
+.room-card {
+  padding: 60rpx 0;
+  border-bottom: 2rpx solid rgba(234,234,234,1);
+
+  .head {
+    margin-bottom: 20rpx;
+
+    .title {
+      font-size: 36rpx;
+      line-height: 52rpx;
+      color: #333;
+    }
+
+    .subtitle {
+      float: right;
+    }
+  }
+
+  .body {
+    display: flex;
+
+    .thumb {
+      width: 73.5%;
+      height: 280rpx;
+      flex: none;
+      overflow: hidden;
+      position: relative;
+      border-radius: 8rpx;
+
+      image {
+        width: 100%;
+        height: 100%;
+        border-radius: 8rpx;
+      }
+    }
+
+    .content {
+      margin-left: 20rpx;
+      flex: auto;
+    }
+
+    .price {
+      font-size: 46rpx;
+      color: #FF2B00;
+    }
+
+    .persons {
+      font-weight: 500;
+      font-size: 28rpx;
+      color: #666;
+      line-height: 36rpx;
+    }
+
+    .tags {
+      margin-top: 8rpx;
+    }
+
+    .tag {
+      color: #9D876D;
+      font-size: 20rpx;
+      line-height: 32rpx;
+      text-align: center;
+      border: 1rpx solid rgba(187,156,121,1);
+      border-radius: 4rpx;
+      width: fit-content;
+      padding: 0 10rpx;
+
+      & + .tag {
+        margin-top: 10rpx;
+      }
+    }
+  }
+
+
+  .gray-text {
+    font-size: 24rpx;
+    color: #666;
+    line-height: 34rpx;
+  }
+
+
+}

pages/components/RoomCard/index.wxml

@@ -0,0 +1,27 @@
+<view class="room-card" wx:if="{{room}}" bindtap="handleTap">
+  <view class="head">
+    <view class="subtitle gray-text">{{room.buildingArea}}</view>
+    <view class="title">{{room.buildingName}}</view>
+    <view class="gray-text">{{room.address}} 距您{{room.distance}}km</view>
+  </view>
+  <view class="body">
+    <view class="thumb">
+      <image mode="scaleToFill" src="{{room.buildingImg[0].url}}"></image>
+    </view>
+    <view class="content">
+      <view class="price">{{room.custPrice}}</view>
+      <view class="gray-text">均价约(元/平)</view>
+      <view class="persons" style="margin-top: 14rpx;">{{room.visits.length}}人围观</view>
+      <view class="tags" wx:if="{{room.buildingTag && room.buildingTag.length}}">
+        <view
+          class="tag"
+          wx:for="{{[0, 1, 2]}}"
+          wx:for-index="inx"
+          wx:if="{{inx < room.buildingTag.length}}"
+          wx:key="inx">
+          {{room.buildingTag[inx].tagName}}
+        </view>
+      </view>
+    </view>
+  </view>
+</view>

pages/components/RoomCard/index.wxss

@@ -0,0 +1,66 @@
+.room-card {
+  padding: 60rpx 0;
+  border-bottom: 2rpx solid #eaeaea;
+}
+.room-card .head {
+  margin-bottom: 20rpx;
+}
+.room-card .head .title {
+  font-size: 36rpx;
+  line-height: 52rpx;
+  color: #333;
+}
+.room-card .head .subtitle {
+  float: right;
+}
+.room-card .body {
+  display: flex;
+}
+.room-card .body .thumb {
+  width: 73.5%;
+  height: 280rpx;
+  flex: none;
+  overflow: hidden;
+  position: relative;
+  border-radius: 8rpx;
+}
+.room-card .body .thumb image {
+  width: 100%;
+  height: 100%;
+  border-radius: 8rpx;
+}
+.room-card .body .content {
+  margin-left: 20rpx;
+  flex: auto;
+}
+.room-card .body .price {
+  font-size: 46rpx;
+  color: #FF2B00;
+}
+.room-card .body .persons {
+  font-weight: 500;
+  font-size: 28rpx;
+  color: #666;
+  line-height: 36rpx;
+}
+.room-card .body .tags {
+  margin-top: 8rpx;
+}
+.room-card .body .tag {
+  color: #9D876D;
+  font-size: 20rpx;
+  line-height: 32rpx;
+  text-align: center;
+  border: 1rpx solid #bb9c79;
+  border-radius: 4rpx;
+  width: fit-content;
+  padding: 0 10rpx;
+}
+.room-card .body .tag + .tag {
+  margin-top: 10rpx;
+}
+.room-card .gray-text {
+  font-size: 24rpx;
+  color: #666;
+  line-height: 34rpx;
+}

pages/components/SubIndex/index.js

@@ -81,9 +81,14 @@ create({
       }).then((buildings) => {
         const records = buildings.data.map(x => {
           const distance = parseInt(this.GetGreatCircleDistance(latitude, longitude, x.coordinate.split(',')[0], x.coordinate.split(',')[1] || longitude))
+          
+          const m = /\d+/.exec(x.price)
+          const p = m ? `${m[0]}起`: x.price
+          
           return {
             ...x,
-            distance: distance / 10
+            distance: distance / 10,
+            custPrice: p,
           }
         })
         this.setData({

pages/components/SubIndex/index.json

@@ -1,5 +1,6 @@
 {
   "component": true,
   "usingComponents": {
+    "roomcard": "/pages/components/RoomCard/index"
   }
 }

pages/components/SubIndex/index.wxml

@@ -110,29 +110,7 @@
   <text class="title">精选房源</text>
 
   <view class="roomList">
-    <view wx:for="{{EstateList}}" wx:for-item="item" wx:for-index="index" wx:key="key" data-id="{{item.buildingId}}" bindtap='ItemTap'>
-      <view class="img">
-        <image mode="aspectFill" data-id="{{item.buildingId}}" src="{{item.buildingImg[0].url}}" class="centerLabel cover"></image>
-        <view class="flex-h" data-id="{{item.buildingId}}" >
-          <view class="flex-item" data-id="{{item.buildingId}}" >
-            <text data-id="{{item.buildingId}}" wx:for="{{item.buildingTag}}" wx:for-item="tag" wx:for-index="index" wx:key="key">{{tag.tagName}}</text>
-          </view>
-          <image data-id="{{item.buildingId}}" mode="widthFix" src="/assets/images/dingwei.png"></image>
-          <text data-id="{{item.buildingId}}">{{item.buildingArea}}</text>
-        </view>
-      </view>
-      <text data-id="{{item.buildingId}}" class="icon">{{item.marketStatus || ''}}</text>
-      <view data-id="{{item.buildingId}}" class="info">
-        <view data-id="{{item.buildingId}}" class="flex-h">
-          <text class="flex-item" data-id="{{item.buildingId}}">{{item.buildingName}}</text>
-          <text data-id="{{item.buildingId}}">均价：<text>{{item.price}}</text></text>
-        </view>
-        <view data-id="{{item.buildingId}}" class="flex-h">
-          <text class="flex-item" data-id="{{item.buildingId}}">{{item.address}} 距您{{item.distance}}km</text>
-          <text data-id="{{item.buildingId}}">{{item.visits.length}}人围观</text>
-        </view>
-      </view>
-    </view>
+    <roomcard wx:for="{{EstateList}}" wx:for-item="item" wx:key="key" room="{{item}}"></roomcard>
   </view>
 
 </view>

pages/index/index.wxml

@@ -49,7 +49,6 @@
   <!-- 授权 -->
   <view class="layer" hidden="{{userInfo.hasReg == 1}}">
     <view class="auth">
-    {{userInfo.hasReg == 1}}
       <view class="centerLabel">
         <view class="logo">
           <image mode="widthFix" src="https://whole-estate.oss-cn-beijing.aliyuncs.com/x-logo.png"></image>

pages/map/testmap.wxml

@@ -11,7 +11,7 @@
         </cover-view>
       </cover-view>
       <cover-view class="navItem" >
-        <button class="centerLabel" open-type="share">
+        <button class="centerLabel noborder" open-type="share" style="line-height: 1">
           <cover-image class="navImg" mode="widthFix" src="/assets/images/share.png"></cover-image>
           <cover-view class="navText">分享</cover-view>
         </button>

pages/map/testmap.wxss

@@ -208,3 +208,7 @@
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
 }
+
+.noborder::after{
+  border: none;
+}