feat(home)：首页

package.json

@@ -74,6 +74,7 @@
     "@dcloudio/uni-stat": "^2.0.2-3070320230222001",
     "@vue/shared": "^3.0.0",
     "core-js": "^3.8.3",
+    "dayjs": "^1.11.7",
     "flyio": "^0.6.2",
     "uni-read-pages": "^1.0.5",
     "uni-simple-router": "^2.0.8-beta.4",

src/main.js

@@ -7,6 +7,8 @@ import cache from '@/mixin/cache';
 import empty from '@/components/empty';
 App.mpType = 'app';
 
+import '@/static/iconfont.css'   // iconfont的引入
+
 Vue.use(router);
 Vue.use(uView);
 Vue.mixin(cache);

src/manifest.json

@@ -47,7 +47,7 @@
   },
   "quickapp": {},
   "mp-weixin": {
-    "appid": "wx962bee9cb47b1696",
+    "appid": "wxd1219daeac25f30a",
     "setting": {
       "urlCheck": false
     },

src/pages.json

@@ -33,6 +33,12 @@
           }
         }
       ]
+    },
+    {
+      "root": "business",
+      "pages": [
+        
+      ]
     }
   ],
   "tabBar": {

src/pages/home/index.vue

@@ -1,15 +1,221 @@
 <template>
-  <u-button @click="chooseCity">选择</u-button>
+  <view class="home">
+    <!-- 顶部导航 -->
+    <view class="home-header">
+      <view class="home-address">
+        <span>地址</span>
+        <i class="iconfont icon-sanjiaoxing1"></i>
+      </view>
+      <u-search placeholder="请输入搜索内容" :showAction="false" v-model="keyword"></u-search>
+    </view>
+    <!-- 轮播图 -->
+    <view class='home-swiper'>
+      <u-swiper :list="list" indicator @change="change" @click="click"></u-swiper>
+    </view>
+
+    <!-- 分类 -->
+    <view class="home-list">
+      <u-grid :border="false" col="5">
+        <u-grid-item v-for="(listItem, listIndex) in list1" :key="listIndex">
+          <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="25"></u-icon>
+          <text class="grid-text">{{ listItem.title }}</text>
+        </u-grid-item>
+      </u-grid>
+      <u-toast ref="uToast" />
+    </view>
+
+    <!-- 热门推荐 -->
+    <view class="home-hot">
+      <view class="hotRec">
+        <h3>热门推荐</h3>
+        <i class="iconfont icon-youjiantou"></i>
+      </view>
+      <div class="hotList">
+        <view class="hotItem">
+          <view class="hotImage">图片</view>
+          <view class="hotName">商家名称</view>
+          <view class="hotName">具体位置</view>
+        </view>
+        <view class="hotItem">
+          <view class="hotImage">图片</view>
+          <view class="hotName">商家名称</view>
+          <view class="hotName">具体位置</view>
+        </view>
+        <view class="hotItem">
+          <view class="hotImage">图片</view>
+          <view class="hotName">商家名称</view>
+          <view class="hotName">具体位置</view>
+        </view>
+        <view class="hotItem">
+          <view class="hotImage">图片</view>
+          <view class="hotName">商家名称</view>
+          <view class="hotName">具体位置</view>
+        </view>
+      </div>
+    </view>
+    <!-- 附近商家 -->
+
+    <view class="home-hot">
+      <view class="hotRec">
+        <h3>附近商家</h3>
+        <i class="iconfont icon-youjiantou"></i>
+      </view>
+      <div class="hotList">
+        <view class="hotItem">
+          <view class="hotImage">图片</view>
+          <view class="hotName">商家名称</view>
+          <view class="hotName">具体位置</view>
+        </view>
+        <view class="hotItem">
+          <view class="hotImage">图片</view>
+          <view class="hotName">商家名称</view>
+          <view class="hotName">具体位置</view>
+        </view>
+        <view class="hotItem">
+          <view class="hotImage">图片</view>
+          <view class="hotName">商家名称</view>
+          <view class="hotName">具体位置</view>
+        </view>
+        <view class="hotItem">
+          <view class="hotImage">图片</view>
+          <view class="hotName">商家名称</view>
+          <view class="hotName">具体位置</view>
+        </view>
+      </div>
+    </view>
+  </view>
 </template>
 
 <script>
+
 export default {
+  data() {
+    return {
+      keyword: "",
+      list: [
+        "https://cdn.uviewui.com/uview/swiper/swiper1.png",
+        "https://cdn.uviewui.com/uview/swiper/swiper2.png",
+        "https://cdn.uviewui.com/uview/swiper/swiper3.png",
+      ],
+      list1: [{
+        name: "photo",
+        title: "养车"
+      }, {
+        name: "lock",
+        title: "福利"
+      }, {
+        name: "star",
+        title: "分类"
+      }, {
+        name: "hourglass",
+        title: "自驾游"
+      }, {
+        name: "home",
+        title: "门店"
+      }
+      ],
+    };
+  },
   methods: {
-    chooseCity() {
-      this.$Router.push('/client/chooseCity/index');
+    change() {
     },
+    click(name) {
+      this.$refs.uToast.success(`点击了第${name}个`);
+    }
   },
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.home {
+  background-color: #efefef;
+}
+
+/* 头部搜索栏 */
+.home-header {
+  display: flex;
+  align-items: center;
+  height: 90rpx;
+  line-height: 90rpx;
+  padding: 0 20rpx;
+  background-color: #347caf;
+
+  .home-address {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 90rpx;
+    line-height: 90rpx;
+    font-size: 32rpx;
+    text-align: center;
+
+    .icon-sanjiaoxing1 {
+      font-size: 24rpx;
+      margin: 17rpx 10rpx 0 6rpx;
+    }
+  }
+}
+
+/* 轮播图 */
+.home-swiper {
+  padding: 20rpx;
+  margin-bottom: 10rpx;
+}
+
+/* 分类 */
+.home-list {
+  background-color: #fff;
+  margin: 0 20rpx;
+  padding: 10rpx;
+  border-radius: 10rpx;
+
+  .grid-text {
+    font-size: 14px;
+    color: #909399;
+    padding: 10rpx 0 20rpx 0rpx;
+    box-sizing: border-box;
+  }
+}
+
+/* 热门推荐 */
+.home-hot {
+  margin: 20rpx;
+
+  .hotRec {
+    margin: 25rpx 0;
+    display: flex;
+    justify-content: space-between;
+    h3{
+      font-weight: bold;
+    }
+  }
+
+  .hotList {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .hotItem:nth-last-child(2n + 1) {
+    margin-right: 0;
+  }
+
+  .hotItem {
+    height: 300rpx;
+    width: calc(50% - 10rpx);
+    margin: 0 20rpx 20rpx 0;
+    background-color: #fff;
+
+    .hotImage {
+      background-color: #e8e8e8;
+      height: 200rpx;
+      line-height: 200rpx;
+      text-align: center;
+    }
+
+    .hotName {
+      font-size: 24rpx;
+    }
+  }
+}</style>

src/pages/mine/index.vue

@@ -54,7 +54,7 @@ export default {
       show: true,
     };
   },
-  onLoad() {},
+  onLoad() { },
 };
 </script>
 
@@ -62,6 +62,7 @@ export default {
 page {
   background-color: #ededed;
 }
+
 .camera {
   width: 54px;
   height: 44px;
@@ -70,6 +71,7 @@ page {
     background-color: #ededed;
   }
 }
+
 .user-box {
   background-color: #fff;
 }

src/static/iconfont.css

@@ -0,0 +1,62 @@
+@font-face {
+  font-family: 'iconfont'; /* Project id 4012422 */
+  src: url('//at.alicdn.com/t/c/font_4012422_s4b14z184q.woff2?t=1681438512486') format('woff2'),
+    url('//at.alicdn.com/t/c/font_4012422_s4b14z184q.woff?t=1681438512486') format('woff'),
+    url('//at.alicdn.com/t/c/font_4012422_s4b14z184q.ttf?t=1681438512486') format('truetype');
+}
+
+.iconfont {
+  font-family: 'iconfont' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-sanjiaoxing1:before {
+  content: '\e609';
+}
+
+.icon-8:before {
+  content: '\e615';
+}
+
+.icon-car-repair:before {
+  content: '\e612';
+}
+
+.icon-xiazai:before {
+  content: '\e601';
+}
+
+.icon-xiaoxi:before {
+  content: '\e614';
+}
+
+.icon-home:before {
+  content: '\e65c';
+}
+
+.icon-sanjiaoxing:before {
+  content: '\e6bd';
+}
+
+.icon-zuojiantou:before {
+  content: '\e60c';
+}
+
+.icon-a-duizhengquedagou:before {
+  content: '\e685';
+}
+
+.icon-shequ:before {
+  content: '\e611';
+}
+
+.icon-dagou:before {
+  content: '\e60f';
+}
+
+.icon-youjiantou:before {
+  content: '\e60b';
+}