feat: 完成【首页】、【地区选择】、【筛选】

.eslintrc.js

@@ -28,4 +28,4 @@ module.exports = {
   },
   // extends: 'eslint:recommended',
   rules: {},
-}
+}

app.js

@@ -18,8 +18,30 @@ App({
         }
       })
     })
+
+    // 获取topbar相关信息
+    const that = this;
+    // 顶部状态栏的信息
+    const systemInfo = wx.getSystemInfoSync();
+    // 胶囊按钮位置信息
+    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
+    // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
+    that.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
+    that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
+    that.globalData.menuBottom = menuButtonInfo.top - systemInfo.statusBarHeight;
+    that.globalData.menuHeight = menuButtonInfo.height;
+    that.globalData.menuWidth = menuButtonInfo.width;
+    that.globalData.statusBarHeight = systemInfo.statusBarHeight;
   },
   globalData: {
-    userInfo: null
+    userInfo: null,
+
+    // 自定义topbar相关信息
+    navBarHeight: 0, // 导航栏高度
+    statusBarHeight: 0, // 状态栏的高度
+    menuRight: 0, // 胶囊距右方间距（保持左、右间距一致）
+    menuBottom: 0, // 胶囊距底部间距（保持底部间距一致）
+    menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
+    menuWidth: 0, // 胶囊宽度（自定义内容可与胶囊宽度保证一致）
   }
-})
+})

app.json

@@ -1,7 +1,7 @@
 {
   "pages": [
-    "pages/index/index",
-    "pages/explore/index",
+    "pages/home/index",
+    "pages/home/chooseLocation/index",
     "pages/my/index"
   ],
   "window": {
@@ -17,19 +17,19 @@
     "backgroundColor": "#000000",
     "list": [
       {
-        "pagePath": "pages/index/index",
+        "pagePath": "pages/home/index",
         "text": "首页"
       },
-      {
-        "pagePath": "pages/explore/index",
-        "text": "发现"
-      },
       {
         "pagePath": "pages/my/index",
         "text": "我的"
       }
     ]
   },
-  "style": "v2",
-  "sitemapLocation": "sitemap.json"
+  "sitemapLocation": "sitemap.json",
+  "permission": {
+    "scope.userLocation": {
+      "desc": "您的位置信息仅用于当前小程序中获取定位"
+    }
+  }
 }

components/info-card/index.js

@@ -0,0 +1,25 @@
+// components/info-card/index.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    data: {
+      "type": Object,
+      "value": {}
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

components/info-card/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-image": "tdesign-miniprogram/image/image",
+    "stars-mark": "/components/stars-mark/index"
+  }
+}

components/info-card/index.less

@@ -0,0 +1,38 @@
+/* components/info-card/index.wxss */
+.card {
+  height: 120px;
+  width: 343px;
+  margin: 16px auto;
+  border-radius: 9px;
+  overflow: hidden;
+  background: #ffffff;
+  box-shadow: 0 6px 30px 5px #0000000d, 0 16px 24px 2px #0000000a, 0 8px 10px -5px #00000014;
+
+  .info {
+    height: 100%;
+    width: auto;
+    background-color: #fff;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: space-around;
+    padding-left: 16px;
+
+    .name {
+      color: #000000e6;
+      font-size: 14px;
+      font-weight: 400;
+      font-family: "PingFang SC";
+      text-align: left;
+      line-height: 22px;
+    }
+
+    .price {
+      color: #000000e6;
+      font-size: 14px;
+      font-weight: 600;
+      font-family: "PingFang SC";
+      text-align: left;
+      line-height: 22px;
+    }
+  }
+}

components/info-card/index.wxml

@@ -0,0 +1,10 @@
+<!--components/info-card/index.wxml-->
+<view class="card">
+  <t-image src="{{data.imgUrl}}" mode="aspectFill" width="120px" height="100%" class="imag" />
+  <view class="info">
+    <text class="name">{{data.name}}</text>
+    <stars-mark score="{{data.score}}"/>
+    <text class="price" wx:if="{{!data.free}}">￥{{data.floorPrice}} -￥{{data.ceilingPrice}}</text>
+    <text class="price" wx:if="{{data.free}}">{{data.free}}</text>
+  </view>
+</view>

components/stars-mark/index.js

@@ -0,0 +1,25 @@
+// components/stars-mark/index.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    score: {
+      "type": Number,
+      "value": ""
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

components/stars-mark/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "tdesign-miniprogram/icon/icon"
+  }
+}

components/stars-mark/index.less

@@ -0,0 +1,45 @@
+/* components/stars-mark/index.wxss */
+.score {
+  height: 20px;
+  width: 143.6px;
+  font-size: 12px;
+  font-weight: 600;
+  font-family: "PingFang SC";
+  line-height: 20px;
+  display: inline-flex;
+  position: relative;
+
+  .stars-container {
+    display: inline-flex;
+    width: 100.6px;
+    position: relative;
+
+    .stars-background {
+      color: #dcdcdc;
+      display: inline-flex;
+      padding-top: 2px;
+
+      view {
+        padding-right: 5.15px;
+      }
+    }
+
+    .stars {
+      color: #e37318;
+      display: inline-flex;
+      padding-top: 2px;
+      position: absolute;
+      overflow: hidden;
+
+      view {
+        padding-right: 5.15px;
+      }
+    }
+  }
+
+  text {
+    color: #e37318;
+    position: absolute;
+    right: 0;
+  }
+}

components/stars-mark/index.wxml

@@ -0,0 +1,20 @@
+<!--components/stars-mark/index.wxml-->
+<view class="score">
+  <view class="stars-container">
+    <view class="stars-background">
+      <t-icon name="star-filled" size="16px" />
+      <t-icon name="star-filled" size="16px" />
+      <t-icon name="star-filled" size="16px" />
+      <t-icon name="star-filled" size="16px" />
+      <t-icon name="star-filled" size="16px" />
+    </view>
+    <view class="stars" style="width: {{score*16 + (score-0.5)*5.15}}px">
+      <t-icon name="star-filled" size="16px" />
+      <t-icon name="star-filled" size="16px" />
+      <t-icon name="star-filled" size="16px" />
+      <t-icon name="star-filled" size="16px" />
+      <t-icon name="star-filled" size="16px" />
+    </view>
+  </view>
+  <text>{{score}}分</text>
+</view>

config/cities.js

@@ -0,0 +1,93 @@
+/** 配置城市名的数据 */
+export const cities = {
+  hotCities: ['北京', '上海', '广州', '深圳', '成都'],
+  sortedCities: [{
+      index: 'A',
+      children: ['澳门', '阿克苏', '阿吉', '鞍山']
+    },
+    {
+      index: 'B',
+      children: ['北京', '包头', '宝鸡', '滨州', '宝山', '巴中']
+    },
+    {
+      index: 'C',
+      children: ['重庆', '成都', '长沙', '常州', '长春', '沧州']
+    },
+    {
+      index: 'D',
+      children: ['大连', '东莞', '德阳', '丹东', '大庆', '大同']
+    },
+    {
+      index: 'E',
+      children: ['鄂尔多斯', '恩施', '鄂州']
+    },
+    {
+      index: 'F',
+      children: ['福州', '佛山', '抚顺', '阜阳', '防城港', '阜新']
+    },
+    {
+      index: 'G',
+      children: ['广州', '贵阳', '赣州', '桂林', '广元', '贵港']
+    },
+    {
+      index: 'H',
+      children: ['上海', '深圳', '杭州', '哈尔滨', '合肥', '海口']
+    },
+    {
+      index: 'J',
+      children: ['金华', '济南', '嘉兴', '江门', '吉林']
+    },
+    {
+      index: 'K',
+      children: ['昆明', '克拉玛依', '开封', '喀什', '凯里', '克孜勒苏']
+    },
+    {
+      index: 'L',
+      children: ['兰州', '拉萨', '洛阳', '丽江', '廊坊', '连云港']
+    },
+    {
+      index: 'M',
+      children: ['梅州', '绵阳', '马鞍山', '茂名', '牡丹江', '眉山']
+    },
+    {
+      index: 'N',
+      children: ['南京', '南昌', '南宁', '宁波', '南通', '南充']
+    },
+    {
+      index: 'P',
+      children: ['莆田', '平顶山', '盘锦', '攀枝花', '萍乡']
+    },
+    {
+      index: 'Q',
+      children: ['青岛', '秦皇岛', '泉州', '曲靖', '齐齐哈尔', '七台河']
+    },
+    {
+      index: 'R',
+      children: ['日喀则', '日照']
+    },
+    {
+      index: 'S',
+      children: ['上海', '深圳', '沈阳', '苏州', '石家庄', '三亚']
+    },
+    {
+      index: 'T',
+      children: ['天津', '太原', '唐山', '台州', '泰安', '铁岭']
+    },
+    {
+      index: 'W',
+      children: ['武汉', '无锡', '潍坊', '威海', '乌鲁木齐', '梧州']
+    },
+    {
+      index: 'X',
+      children: ['西安', '厦门', '徐州', '西宁', '湘潭', '许昌']
+    },
+    {
+      index: 'Y',
+      children: ['杭州', '武汉', '郑州', '石家庄', '西安']
+    },
+    {
+      index: 'Z',
+      children: ['张家口', '中山', '珠海', '肇庆', '舟山', '漳州']
+    }
+  ]
+}

config/index.js

@@ -0,0 +1,8 @@
+/** 小程序基本配置 */
+// 是否使用mock数据代替api返回
+export const config = {
+  useMock: true
+}
+
+// 使用腾讯定位服务的key
+export const locationKey = '';

custom-tab-bar/index.js

@@ -4,13 +4,10 @@ Component({
     value: 'index',
     list: [{
       icon: 'home',
-      value: 'index',
+      value: 'home',
       label: '首页',
-    },{
-      icon: 'control-platform',
-      value: 'explore',
-      label: '发现',
-    }, {
+    },
+    {
       icon: 'user',
       value: 'my',
       label: '我的'
@@ -24,7 +21,7 @@ Component({
       if (curPage) {
         const nameRe = /pages\/(\w+)\/index/.exec(curPage.route);
 
-        if (nameRe[1]) {
+        if (nameRe) {
           this.setData({
             value: nameRe[1]
           })