Merge branch 'master' of http://gogs.chelvc.com/Tim_Walker/chelvc-custom

src/App.vue

@@ -18,7 +18,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import 'uview-ui/index.scss';
 page {
   background-color: #efefef;

src/pages.json

@@ -105,6 +105,147 @@
           "style": {
             "navigationBarTitleText": "商家详情"
           }
+        },
+        {
+          "path": "hot/index",
+          "style": {
+            "navigationBarTitleText": "热门推荐"
+          }
+        },
+        {
+          "path": "nearby/index",
+          "style": {
+            "navigationBarTitleText": "附近商家"
+          }
+        },
+        {
+          "path": "service/index",
+          "style": {
+            "navigationBarTitleText": "服务详情"
+          }
+        },
+        {
+          "path": "classify/index",
+          "style": {
+            "navigationBarTitleText": "养车"
+          }
+        }
+      ]
+    },
+    {
+      "root": "pages/points",
+      "pages": [
+        {
+          "path": "myPoints/index",
+          "style": {
+            "navigationBarTitleText": "我的积分"
+          }
+        },
+        {
+          "path": "checkIn/index",
+          "style": {
+            "navigationBarTitleText": "每日签到"
+          }
+        },
+        {
+          "path": "detail/index",
+          "style": {
+            "navigationBarTitleText": "积分说明"
+          }
+        },
+        {
+          "path": "instructions/index",
+          "style": {
+            "navigationBarTitleText": "积分明细"
+          }
+        },
+        {
+          "path": "withdraw/index",
+          "style": {
+            "navigationBarTitleText": "积分提现"
+          }
+        },
+        {
+          "path": "activity/index",
+          "style": {
+            "navigationBarTitleText": "积分活动"
+          }
+        }
+      ]
+    },
+    {
+      "root": "pages/message",
+      "pages": [
+        {
+          "path": "evaluate/index",
+          "style": {
+            "navigationBarTitleText": "评价通知"
+          }
+        },
+        {
+          "path": "favorable/index",
+          "style": {
+            "navigationBarTitleText": "优惠福利"
+          }
+        },
+        {
+          "path": "order/index",
+          "style": {
+            "navigationBarTitleText": "订单通知"
+          }
+        },
+        {
+          "path": "payment/index",
+          "style": {
+            "navigationBarTitleText": "付款通知"
+          }
+        },
+        {
+          "path": "upvote/index",
+          "style": {
+            "navigationBarTitleText": "点赞回复"
+          }
+        }
+      ]
+    },
+    {
+      "root": "pages/pointMethod",
+      "pages": [
+        {
+          "path": "foren/index",
+          "style": {
+            "navigationBarTitleText": "发帖"
+          }
+        },
+        {
+          "path": "consume/index",
+          "style": {
+            "navigationBarTitleText": "消费"
+          }
+        },
+        {
+          "path": "comment/index",
+          "style": {
+            "navigationBarTitleText": "点评"
+          }
+        },
+        {
+          "path": "share/index",
+          "style": {
+            "navigationBarTitleText": "分享"
+          }
+        },
+        {
+          "path": "recover/index",
+          "style": {
+            "navigationBarTitleText": "回帖"
+          }
+        },
+        {
+          "path": "advertise/index",
+          "style": {
+            "navigationBarTitleText": "广告"
+          }
         }
       ]
     }

src/pages/business/classify/index.vue

@@ -1,15 +1,394 @@
 <template>
-  <view>
-    分类
+  <view class="recommend">
+    <view class="search-item">
+      <u-search :showAction="true" actionText="取消" />
+    </view>
+    <view class="list" @click="$Router.push('/pages/business/service/index')">
+      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+      <view>
+        <view class="item-text"
+          >【养车】标题标题标题标题标题标题标题标题……</view
+        >
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" :size="14" />
+            <text class="line">|</text>
+            <text class="points">4.93分</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="list-item">
+          <view>
+            <view class="price"
+              >券后价
+              <text class="price-item">￥</text>
+              <text class="price-count">19</text>
+            </view>
+            <view class="gate-rate">
+              <text>门市价</text>
+              <text class="gate-rate-item">￥30</text>
+            </view>
+          </view>
+          <view class="appoint">
+            <text class="appoint-item">预约</text>
+            <text class="Buy">购买</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="list" @click="$Router.push('/pages/business/service/index')">
+      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+      <view>
+        <view class="item-text"
+          >【养车】标题标题标题标题标题标题标题标题……</view
+        >
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" :size="14" />
+            <text class="line">|</text>
+            <text class="points">4.93分</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="list-item">
+          <view>
+            <view class="price"
+              >券后价
+              <text class="price-item">￥</text>
+              <text class="price-count">19</text>
+            </view>
+            <view class="gate-rate">
+              <text>门市价</text>
+              <text class="gate-rate-item">￥30</text>
+            </view>
+          </view>
+          <view class="appoint">
+            <text class="appoint-item">预约</text>
+            <text class="Buy">购买</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="list" @click="$Router.push('/pages/business/service/index')">
+      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+      <view>
+        <view class="item-text"
+          >【养车】标题标题标题标题标题标题标题标题……</view
+        >
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" :size="14" />
+            <text class="line">|</text>
+            <text class="points">4.93分</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="list-item">
+          <view>
+            <view class="price"
+              >券后价
+              <text class="price-item">￥</text>
+              <text class="price-count">19</text>
+            </view>
+            <view class="gate-rate">
+              <text>门市价</text>
+              <text class="gate-rate-item">￥30</text>
+            </view>
+          </view>
+          <view class="appoint">
+            <text class="appoint-item">预约</text>
+            <text class="Buy">购买</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="list" @click="$Router.push('/pages/business/service/index')">
+      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+      <view>
+        <view class="item-text"
+          >【养车】标题标题标题标题标题标题标题标题……</view
+        >
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" :size="14" />
+            <text class="line">|</text>
+            <text class="points">4.93分</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="list-item">
+          <view>
+            <view class="price"
+              >券后价
+              <text class="price-item">￥</text>
+              <text class="price-count">19</text>
+            </view>
+            <view class="gate-rate">
+              <text>门市价</text>
+              <text class="gate-rate-item">￥30</text>
+            </view>
+          </view>
+          <view class="appoint">
+            <text class="appoint-item">预约</text>
+            <text class="Buy">购买</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="list" @click="$Router.push('/pages/business/service/index')">
+      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+      <view>
+        <view class="item-text"
+          >【养车】标题标题标题标题标题标题标题标题……</view
+        >
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" :size="14" />
+            <text class="line">|</text>
+            <text class="points">4.93分</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="list-item">
+          <view>
+            <view class="price"
+              >券后价
+              <text class="price-item">￥</text>
+              <text class="price-count">19</text>
+            </view>
+            <view class="gate-rate">
+              <text>门市价</text>
+              <text class="gate-rate-item">￥30</text>
+            </view>
+          </view>
+          <view class="appoint">
+            <text class="appoint-item">预约</text>
+            <text class="Buy">购买</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="list" @click="$Router.push('/pages/business/service/index')">
+      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+      <view>
+        <view class="item-text"
+          >【养车】标题标题标题标题标题标题标题标题……</view
+        >
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" :size="14" />
+            <text class="line">|</text>
+            <text class="points">4.93分</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="list-item">
+          <view>
+            <view class="price"
+              >券后价
+              <text class="price-item">￥</text>
+              <text class="price-count">19</text>
+            </view>
+            <view class="gate-rate">
+              <text>门市价</text>
+              <text class="gate-rate-item">￥30</text>
+            </view>
+          </view>
+          <view class="appoint">
+            <text class="appoint-item">预约</text>
+            <text class="Buy">购买</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="list" @click="$Router.push('/pages/business/service/index')">
+      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+      <view>
+        <view class="item-text"
+          >【养车】标题标题标题标题标题标题标题标题……</view
+        >
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" :size="14" />
+            <text class="line">|</text>
+            <text class="points">4.93分</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="list-item">
+          <view>
+            <view class="price"
+              >券后价
+              <text class="price-item">￥</text>
+              <text class="price-count">19</text>
+            </view>
+            <view class="gate-rate">
+              <text>门市价</text>
+              <text class="gate-rate-item">￥30</text>
+            </view>
+          </view>
+          <view class="appoint">
+            <text class="appoint-item">预约</text>
+            <text class="Buy">购买</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="list" @click="$Router.push('/pages/business/service/index')">
+      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+      <view>
+        <view class="item-text"
+          >【养车】标题标题标题标题标题标题标题标题……</view
+        >
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" :size="14" />
+            <text class="line">|</text>
+            <text class="points">4.93分</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="list-item">
+          <view>
+            <view class="price"
+              >券后价
+              <text class="price-item">￥</text>
+              <text class="price-count">19</text>
+            </view>
+            <view class="gate-rate">
+              <text>门市价</text>
+              <text class="gate-rate-item">￥30</text>
+            </view>
+          </view>
+          <view class="appoint">
+            <text class="appoint-item">预约</text>
+            <text class="Buy">购买</text>
+          </view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
 <script>
-  export default {
-    
-  }
+export default {
+  data() {
+    return {
+      count: 5,
+      value: 4,
+    };
+  },
+  onLoad() {},
+  methods: {},
+};
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
+.recommend {
+  min-height: 100vh;
+  background-color: #efefef;
+  /* 搜索样式 */
+  .search-item {
+    padding: 0 20rpx;
+    height: 80rpx;
+    line-height: 80rpx;
+    background-color: #fff;
+    margin-bottom: 10rpx;
+  }
+  .list {
+    height: 250rpx;
+    background-color: #fff;
+    padding: 0 20rpx;
+    margin-bottom: 20rpx;
+    display: flex;
+
+    Image {
+      width: 180px;
+      height: calc(100% - 20rpx);
+      margin: 10rpx 20rpx 10rpx 0;
+    }
+
+    .item-text {
+      font-weight: bold;
+      margin: 10rpx 0 10rpx;
+      color: #333;
+    }
 
-</style>
+    .item-flex {
+      display: flex;
+      justify-content: space-between;
+      font-size: 28rpx;
+      margin: 0 20rpx 10rpx 0;
+      color: #0d0d0d66;
+
+      .star {
+        display: flex;
+
+        .line {
+          margin-left: 16rpx;
+          margin-top: 5rpx;
+          font-size: 22rpx;
+        }
+
+        .points {
+          color: #ff4b04;
+          font-size: 22rpx;
+          margin-top: 6rpx;
+          margin-left: 10rpx;
+        }
+      }
+    }
+    .list-item {
+      display: flex;
+      justify-content: space-between;
+      .price {
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #fa3534;
+        .price-item {
+          font-size: 24rpx;
+          margin-left: 10rpx;
+        }
+        .price-count {
+          font-size: 44rpx;
+        }
+      }
+      .gate-rate {
+        color: #c9c9c9;
+        font-size: 26rpx;
+        margin: 16rpx 0 0 40rpx;
+        .gate-rate-item {
+          text-decoration: line-through;
+        }
+      }
+      .appoint {
+        width: 80px;
+        height: 32px;
+        display: flex;
+        margin-top: 20px;
+        font-size: 14px;
+        .appoint-item {
+          width: 40px;
+          height: 32px;
+          line-height: 32px;
+          text-align: center;
+          display: inline-block;
+          box-sizing: border-box;
+          border-radius: 16px 0 0 16px;
+          border: 1px solid #ec5729;
+        }
+        .Buy {
+          width: 40px;
+          height: 32px;
+          color: #fff;
+          line-height: 32px;
+          text-align: center;
+          display: inline-block;
+          border-radius: 0 16px 16px 0;
+          background-color: #ec5729;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/business/detail/index.vue

@@ -1,29 +1,240 @@
 <template>
-  <view class="container">
-    <view class="head-wrap">
-      <u-swiper height="90" radius="0" :list="list6" :autoplay="false" class="swiper">
-      </u-swiper>
-      <view class="business">
-        <view class="avatar">
-          <u-avatar size="56"></u-avatar>
+  <view class="detail">
+    <!-- 轮播图 -->
+    <view class="carousel-map">
+      <u-swiper
+        :list="list3"
+        previousMargin="0"
+        nextMargin="100"
+        circular
+        :autoplay="false"
+        bgColor="#ffffff"
+      />
+      <view class="carousel-item">
+        <view class="mark">
+          <view class="mark-item">5.00分</view>
+          <u-rate
+            :count="count"
+            v-model="value"
+            active-color="#fff"
+            inactive-color="#fff"
+            :size="12"
+          />
         </view>
-        <view class="collect"> 收藏 </view>
-        <view class="name">商家名称</view>
-        <view class="introduce">商家介绍商家介绍</view>
+        <view class="good-item">近期有6266个购买者给了给好评</view>
       </view>
     </view>
-    <view class="content-info">
-      <u-cell title="位置" label="xxxxxxx" :border="false"></u-cell>
-      <u-cell title="电话" label="xxxxxxxxxxx" :border="false"></u-cell>
-      <u-cell title="营业时间" label="9:00-24:00" :border="false"></u-cell>
-      <u-cell title="简介" :border="false">
-        <view slot="label" class="u-line-1">
-          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+    <!-- 商家信息 -->
+    <view class="merchant-info">
+      <view class="info-title">
+        <view>养车工场店（襄阳五中店）</view>
+        <text class="info-mark">1.5w+单</text>
+      </view>
+      <view class="info-tag">商家信息</view>
+      <view class="info-item">
+        <view class="info-text">
+          <view>营业时间：9:00 ~ 24:00</view>
+          <view>电话号码：18285564342</view>
+          <view>贵州省贵阳市榕江县栽麻乡小利村三组</view>
+          <view class="distance">距离您1.84km</view>
         </view>
-      </u-cell>
+        <view class="info-icon">
+          <view class="info-map">
+            <u-icon name="map" size="25"></u-icon>
+            <view>导航</view>
+          </view>
+          <view class="info-map">
+            <u-icon name="phone" size="25"></u-icon>
+            <view>电话</view>
+          </view>
+        </view>
+      </view>
     </view>
-    <view>
-      <u-tabs :list="list"></u-tabs>
+
+    <!-- 分类 -->
+    <view class="sort">
+      <u-tabs
+        :list="list1"
+        @click="click"
+        lineWidth="30"
+        lineColor="#5992bb"
+        :activeStyle="{
+          color: '#5992bb',
+          fontWeight: 'bold',
+          transform: 'scale(1.05)',
+        }"
+        :inactiveStyle="{
+          color: '#000',
+          transform: 'scale(1)',
+        }"
+        itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;"
+      />
+      <view class="list" @click="$Router.push('/pages/business/service/index')">
+        <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+        <view>
+          <view class="item-text"
+            >【养车】标题标题标题标题标题标题标题标题……</view
+          >
+          <view class="item-flex">
+            <view class="star">
+              <u-rate :count="count" v-model="value" :size="14" />
+              <text class="line">|</text>
+              <text class="points">4.93分</text>
+            </view>
+            <view>989单</view>
+          </view>
+          <view class="list-item">
+            <view>
+              <view class="price"
+                >券后价
+                <text class="price-item">￥</text>
+                <text class="price-count">19</text>
+              </view>
+              <view class="gate-rate">
+                <text>门市价</text>
+                <text class="gate-rate-item">￥30</text>
+              </view>
+            </view>
+            <view class="appoint">
+              <text class="appoint-item">预约</text>
+              <text class="Buy">购买</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="list">
+        <Image src="https://cdn.uviewui.com/uview/album/8.jpg"></Image>
+        <view>
+          <view class="item-text"
+            >【养车】标题标题标题标题标题标题标题标题……</view
+          >
+          <view class="item-flex">
+            <view class="star">
+              <u-rate :count="count" v-model="value" :size="14" />
+              <text class="line">|</text>
+              <text class="points">4.93分</text>
+            </view>
+            <view>989单</view>
+          </view>
+          <view class="list-item">
+            <view>
+              <view class="price"
+                >券后价
+                <text class="price-item">￥</text>
+                <text class="price-count">19</text>
+              </view>
+              <view class="gate-rate">
+                <text>门市价</text>
+                <text class="gate-rate-item">￥30</text>
+              </view>
+            </view>
+            <view class="appoint">
+              <text class="appoint-item">预约</text>
+              <text class="Buy">购买</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="list">
+        <Image src="https://cdn.uviewui.com/uview/album/2.jpg"></Image>
+        <view>
+          <view class="item-text"
+            >【养车】标题标题标题标题标题标题标题标题……</view
+          >
+          <view class="item-flex">
+            <view class="star">
+              <u-rate :count="count" v-model="value" :size="14" />
+              <text class="line">|</text>
+              <text class="points">4.93分</text>
+            </view>
+            <view>989单</view>
+          </view>
+          <view class="list-item">
+            <view>
+              <view class="price"
+                >券后价
+                <text class="price-item">￥</text>
+                <text class="price-count">19</text>
+              </view>
+              <view class="gate-rate">
+                <text>门市价</text>
+                <text class="gate-rate-item">￥30</text>
+              </view>
+            </view>
+            <view class="appoint">
+              <text class="appoint-item">预约</text>
+              <text class="Buy">购买</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="list">
+        <Image src="https://cdn.uviewui.com/uview/album/4.jpg"></Image>
+        <view>
+          <view class="item-text"
+            >【养车】标题标题标题标题标题标题标题标题……</view
+          >
+          <view class="item-flex">
+            <view class="star">
+              <u-rate :count="count" v-model="value" :size="14" />
+              <text class="line">|</text>
+              <text class="points">4.93分</text>
+            </view>
+            <view>989单</view>
+          </view>
+          <view class="list-item">
+            <view>
+              <view class="price"
+                >券后价
+                <text class="price-item">￥</text>
+                <text class="price-count">19</text>
+              </view>
+              <view class="gate-rate">
+                <text>门市价</text>
+                <text class="gate-rate-item">￥30</text>
+              </view>
+            </view>
+            <view class="appoint">
+              <text class="appoint-item">预约</text>
+              <text class="Buy">购买</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="list">
+        <Image src="https://cdn.uviewui.com/uview/album/6.jpg"></Image>
+        <view>
+          <view class="item-text"
+            >【养车】标题标题标题标题标题标题标题标题……</view
+          >
+          <view class="item-flex">
+            <view class="star">
+              <u-rate :count="count" v-model="value" :size="14" />
+              <text class="line">|</text>
+              <text class="points">4.93分</text>
+            </view>
+            <view>989单</view>
+          </view>
+          <view class="list-item">
+            <view>
+              <view class="price"
+                >券后价
+                <text class="price-item">￥</text>
+                <text class="price-count">19</text>
+              </view>
+              <view class="gate-rate">
+                <text>门市价</text>
+                <text class="gate-rate-item">￥30</text>
+              </view>
+            </view>
+            <view class="appoint">
+              <text class="appoint-item">预约</text>
+              <text class="Buy">购买</text>
+            </view>
+          </view>
+        </view>
+      </view>
     </view>
   </view>
 </template>
@@ -32,88 +243,225 @@
 export default {
   data() {
     return {
-      id: null, // 商家id
-      currentNum: 0,
-      list6: [
-        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+      count: 5,
+      value: 3,
+      list3: [
         'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
         'https://cdn.uviewui.com/uview/swiper/swiper1.png',
       ],
-      list: [
-        {
-          name: '全部',
-        },
-        {
-          name: '保养',
-        },
-        {
-          name: '养成',
-        },
-        {
-          name: '维修',
-        },
-        {
-          name: '其他',
-        },
+      list1: [
+        { name: '全部' },
+        { name: '养车' },
+        { name: '维修' },
+        { name: '改装' },
+        { name: '补胎' },
+        { name: '补胎' },
+        { name: '其他' },
       ],
     };
   },
-  onLoad(option) {
-    if (option.id) this.id = option.id;
-    this.getBusinessInfo(this.id);
-    this.getBusinessComment(this.id);
-  },
   methods: {
-    // 获取商家详情信息
-    getBusinessInfo(id) {},
-    // 获取商家评论信息
-    getBusinessComment(id) {},
+    click(item) {
+      console.log('item', item);
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.container {
-  position: relative;
-  .business {
-    width: 100%;
-    height: 180rpx;
-    background-color: #ffffff;
-    position: relative;
+.detail {
+  min-height: 100vh;
+  background-color: #efefef;
+}
+
+// 轮播图
+.carousel-map {
+  background-color: #fff;
+  padding: 0 20rpx;
+
+  .carousel-item {
+    height: 90rpx;
     display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: center;
-    .avatar {
-      position: absolute;
-      top: 0;
-      left: 50%;
-      transform: translate(-50%, -50%);
+    background-color: #fff7e0;
+    border-radius: 0 0 10rpx 10rpx;
+
+    .mark {
+      background-color: #ff4b04;
+      color: #fff;
+      padding: 20rpx;
+      border-radius: 0 0 0 10rpx;
+      box-sizing: border-box;
+
+      .mark-item {
+        text-align: center;
+      }
     }
-    .collect {
-      position: absolute;
-      right: 40rpx;
-      top: -60rpx;
-      color: #ffffff;
-      padding: 0 10rpx;
-      border: 2rpx solid #ffffff;
-      border-radius: 10rpx;
+
+    .good-item {
+      font-size: 24rpx;
+      color: #a39c85;
+      line-height: 90rpx;
+      margin-left: 40rpx;
     }
-    .name {
-      font-size: 40rpx;
-      font-weight: bold;
-      padding: 20rpx 0 10rpx 0;
+  }
+}
+
+// 商家信息
+.merchant-info {
+  padding: 20rpx;
+  background-color: #fff;
+  margin-bottom: 20rpx;
+
+  .info-title {
+    display: flex;
+    justify-content: center;
+    font-size: 40rpx;
+    font-weight: bold;
+
+    .info-mark {
+      font-size: 12px;
+      font-weight: normal;
+      color: #999;
+      margin: 20rpx 0 20rpx 30rpx;
+    }
+  }
+
+  .info-tag {
+    width: 160rpx;
+    padding: 10rpx;
+    text-align: center;
+    border: 1px solid #5992bb;
+    color: #5992bb;
+    margin-bottom: 10rpx;
+  }
+
+  .info-item {
+    display: flex;
+    justify-content: space-between;
+
+    .info-text {
+      font-size: 30rpx;
+      line-height: 58rpx;
+      color: #212020;
+      font-weight: 600;
+
+      .distance {
+        font-size: 26rpx;
+        color: #555252;
+        font-weight: normal;
+      }
     }
-    .introduce {
-      font-size: 32rpx;
-      padding: 10rpx 0 20rpx 0;
+
+    .info-icon {
+      display: flex;
+    }
+
+    .info-map {
+      padding: 10rpx;
+      font-size: 28rpx;
+      margin-top: 120rpx;
     }
   }
-  .content-info {
-    background-color: #ffffff;
-    margin-top: 20rpx;
-    ::v-deep .u-cell__body{
-      padding: 4rpx 20rpx;
+}
+
+// 分类
+.sort {
+  background-color: #fff;
+
+  .list {
+    height: 250rpx;
+    background-color: #fff;
+    padding: 0 20rpx;
+    margin-bottom: 20rpx;
+    display: flex;
+
+    Image {
+      width: 180px;
+      height: calc(100% - 20rpx);
+      margin: 10rpx 20rpx 10rpx 0;
+    }
+
+    .item-text {
+      font-weight: bold;
+      margin: 10rpx 0 10rpx;
+      color: #333;
+    }
+
+    .item-flex {
+      display: flex;
+      justify-content: space-between;
+      font-size: 28rpx;
+      margin: 0 20rpx 10rpx 0;
+      color: #0d0d0d66;
+
+      .star {
+        display: flex;
+
+        .line {
+          margin-left: 16rpx;
+          margin-top: 5rpx;
+          font-size: 22rpx;
+        }
+
+        .points {
+          color: #ff4b04;
+          font-size: 22rpx;
+          margin-top: 6rpx;
+          margin-left: 10rpx;
+        }
+      }
+    }
+    .list-item {
+      display: flex;
+      justify-content: space-between;
+      .price {
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #fa3534;
+        .price-item {
+          font-size: 24rpx;
+          margin-left: 10rpx;
+        }
+        .price-count {
+          font-size: 44rpx;
+        }
+      }
+      .gate-rate {
+        color: #c9c9c9;
+        font-size: 26rpx;
+        margin: 16rpx 0 0 40rpx;
+        .gate-rate-item {
+          text-decoration: line-through;
+        }
+      }
+      .appoint {
+        width: 80px;
+        height: 32px;
+        display: flex;
+        margin-top: 20px;
+        font-size: 14px;
+        .appoint-item {
+          width: 40px;
+          height: 32px;
+          line-height: 32px;
+          text-align: center;
+          display: inline-block;
+          box-sizing: border-box;
+          border-radius: 16px 0 0 16px;
+          border: 1px solid #ec5729;
+        }
+        .Buy {
+          width: 40px;
+          height: 32px;
+          color: #fff;
+          line-height: 32px;
+          text-align: center;
+          display: inline-block;
+          border-radius: 0 16px 16px 0;
+          background-color: #ec5729;
+        }
+      }
     }
   }
 }

src/pages/business/hot/index copy.vue

@@ -0,0 +1,90 @@
+<template>
+  <view class="recommend" v-for="item in indexList" :key="item.id">
+    <view class="hot">
+      <Image :src="item.img"/>
+      <view>
+        <view class="item-text">{{ item.title }}</view>
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="item.count" v-model="item.value" />
+            <text class="line">|</text>
+          </view>
+          <view>{{item.number}}单</view>
+        </view>
+        <view class="address-flex">
+          <view>{{ item.address }}</view>
+          <view>{{item.distance}}km</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+			indexList: [
+				{
+					id: '1',
+					title: '途虎养车洗车机(贵州省贵阳市云岩区)',
+					count: 5,
+					value: 4,
+					number: 679,
+					address: '宝安中心区美容洗车',
+					distance: 2.7,
+					img: 'https://cdn.uviewui.com/uview/album/1.jpg'
+				},
+			],
+    };
+  },
+  onLoad() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.recommend {
+  min-height: 100vh;
+  margin: 0 20rpx;
+  background-color: #efefef;
+  .hot {
+    height: 220rpx;
+    background-color: #fff;
+    margin-bottom: 20rpx;
+    display: flex;
+    Image {
+      width: 120px;
+      height: calc(100% - 20rpx);
+      margin: 10rpx 20rpx 10rpx 0;
+    }
+    .item-text {
+      font-weight: bold;
+			margin: 10rpx 0 10rpx;
+			color: #333;
+    }
+    .item-flex {
+      display: flex;
+			justify-content: space-between;
+			font-size: 14px;
+			margin: 0 20rpx 30rpx 0;
+			color: #0d0d0d66;
+			.star{
+				display: flex;
+				.line{
+					margin-left: 18rpx;
+					margin-top: 5rpx;
+					font-size: 24rpx;
+				}
+			}
+    }
+    .address-flex {
+      display: flex;
+			justify-content: space-between;
+			font-size: 12px;
+			color: #999;
+			margin-right: 20rpx;
+    }
+  }
+}
+</style>

src/pages/business/hot/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <view class="recommend">
+    <view class="search-item">
+      <u-search :showAction="true" actionText="取消" />
+    </view>
+    <view class="hot">
+      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+      <view>
+        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" />
+            <text class="line">|</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="address-flex">
+          <view>宝安中心区美容洗车</view>
+          <view>2.7km</view>
+        </view>
+      </view>
+    </view>
+		<view class="hot">
+      <Image src="https://cdn.uviewui.com/uview/album/2.jpg"></Image>
+      <view>
+        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" />
+            <text class="line">|</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="address-flex">
+          <view>宝安中心区美容洗车</view>
+          <view>2.7km</view>
+        </view>
+      </view>
+    </view>
+		<view class="hot">
+      <Image src="https://cdn.uviewui.com/uview/album/3.jpg"></Image>
+      <view>
+        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" />
+            <text class="line">|</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="address-flex">
+          <view>宝安中心区美容洗车</view>
+          <view>2.7km</view>
+        </view>
+      </view>
+    </view>
+		<view class="hot">
+      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+      <view>
+        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" />
+            <text class="line">|</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="address-flex">
+          <view>宝安中心区美容洗车</view>
+          <view>2.7km</view>
+        </view>
+      </view>
+    </view>
+		<view class="hot">
+      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+      <view>
+        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" />
+            <text class="line">|</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="address-flex">
+          <view>宝安中心区美容洗车</view>
+          <view>2.7km</view>
+        </view>
+      </view>
+    </view>
+		<view class="hot">
+      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+      <view>
+        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" />
+            <text class="line">|</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="address-flex">
+          <view>宝安中心区美容洗车</view>
+          <view>2.7km</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      count: 5, 
+      value: 4,
+    };
+  },
+  onLoad() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.recommend {
+  min-height: 100vh;
+  background-color: #efefef;
+  /* 搜索样式 */
+.search-item {
+  padding: 0 20rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  background-color: #fff;
+  margin-bottom: 10rpx;
+}
+
+// 列表样式
+  .hot {
+    height: 220rpx;
+    background-color: #fff;
+		padding: 0 20rpx;
+    margin-bottom: 20rpx;
+    display: flex;
+    Image {
+      width: 120px;
+      height: calc(100% - 20rpx);
+      margin: 10rpx 20rpx 10rpx 0;
+    }
+    .item-text {
+      font-weight: bold;
+			margin: 10rpx 0 10rpx;
+			color: #333;
+    }
+    .item-flex {
+      display: flex;
+			justify-content: space-between;
+			font-size: 14px;
+			margin: 0 20rpx 30rpx 0;
+			color: #0d0d0d66;
+			.star{
+				display: flex;
+				.line{
+					margin-left: 18rpx;
+					margin-top: 5rpx;
+					font-size: 24rpx;
+				}
+			}
+    }
+    .address-flex {
+      display: flex;
+			justify-content: space-between;
+			font-size: 12px;
+			color: #999;
+			margin-right: 20rpx;
+    }
+  }
+}
+</style>

src/pages/business/nearby/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <view class="recommend">
+    <view class="search-item">
+      <u-search :showAction="true" actionText="取消" />
+    </view>
+    <view class="hot">
+      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+      <view>
+        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" />
+            <text class="line">|</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="address-flex">
+          <view>宝安中心区美容洗车</view>
+          <view>2.7km</view>
+        </view>
+      </view>
+    </view>
+		<view class="hot">
+      <Image src="https://cdn.uviewui.com/uview/album/2.jpg"></Image>
+      <view>
+        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" />
+            <text class="line">|</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="address-flex">
+          <view>宝安中心区美容洗车</view>
+          <view>2.7km</view>
+        </view>
+      </view>
+    </view>
+		<view class="hot">
+      <Image src="https://cdn.uviewui.com/uview/album/3.jpg"></Image>
+      <view>
+        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" />
+            <text class="line">|</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="address-flex">
+          <view>宝安中心区美容洗车</view>
+          <view>2.7km</view>
+        </view>
+      </view>
+    </view>
+		<view class="hot">
+      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+      <view>
+        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" />
+            <text class="line">|</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="address-flex">
+          <view>宝安中心区美容洗车</view>
+          <view>2.7km</view>
+        </view>
+      </view>
+    </view>
+		<view class="hot">
+      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+      <view>
+        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" />
+            <text class="line">|</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="address-flex">
+          <view>宝安中心区美容洗车</view>
+          <view>2.7km</view>
+        </view>
+      </view>
+    </view>
+		<view class="hot">
+      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+      <view>
+        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" />
+            <text class="line">|</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="address-flex">
+          <view>宝安中心区美容洗车</view>
+          <view>2.7km</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      count: 5, 
+      value: 4,
+    };
+  },
+  onLoad() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.recommend {
+  min-height: 100vh;
+  background-color: #efefef;
+  /* 搜索样式 */
+.search-item {
+  padding: 0 20rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  background-color: #fff;
+  margin-bottom: 10rpx;
+}
+
+// 列表样式
+  .hot {
+    height: 220rpx;
+    background-color: #fff;
+		padding: 0 20rpx;
+    margin-bottom: 20rpx;
+    display: flex;
+    Image {
+      width: 120px;
+      height: calc(100% - 20rpx);
+      margin: 10rpx 20rpx 10rpx 0;
+    }
+    .item-text {
+      font-weight: bold;
+			margin: 10rpx 0 10rpx;
+			color: #333;
+    }
+    .item-flex {
+      display: flex;
+			justify-content: space-between;
+			font-size: 14px;
+			margin: 0 20rpx 30rpx 0;
+			color: #0d0d0d66;
+			.star{
+				display: flex;
+				.line{
+					margin-left: 18rpx;
+					margin-top: 5rpx;
+					font-size: 24rpx;
+				}
+			}
+    }
+    .address-flex {
+      display: flex;
+			justify-content: space-between;
+			font-size: 12px;
+			color: #999;
+			margin-right: 20rpx;
+    }
+  }
+}
+</style>

src/pages/business/service/index.vue

@@ -0,0 +1,324 @@
+<template>
+  <view class="service">
+    <view class="service-top">
+      <view class="item-flex">
+        <view class="title"
+          >【养车】标题标题标标题标题标题标题标题标题标题标题……</view
+        >
+        <u-icon name="share-square" size="24" />
+      </view>
+      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+    </view>
+    <view class="service-center">
+      <view class="price">
+        <view>
+          <view class="price-item">
+            <text class="price-text">￥</text>199
+          </view>
+          <view>门市价 ￥489</view>
+        </view>
+        <view>
+          <view class="favorable">优惠推荐</view>
+          <view>还剩 49 天 02 时</view>
+        </view>
+      </view>
+      <!-- 优惠券 -->
+      <view class="coupon">
+        <view class="coupon-flex">
+          <view class="coupon-item"> <tex class="text">￥</tex>5 </view>
+          <view class="keep">
+            <view>养车/用车品类新用户专享</view>
+            <view>养车用车服务通用</view>
+          </view>
+        </view>
+        <view>
+          <view>有效期仅剩</view>
+          <view>23：59：53</view>
+        </view>
+      </view>
+      <view class="coupon">
+        <view class="coupon-flex">
+          <view class="coupon-item"> <tex class="text">￥</tex>5 </view>
+          <view class="keep">
+            <view>养车/用车品类新用户专享</view>
+            <view>养车用车服务通用</view>
+          </view>
+        </view>
+        <view>
+          <view class="claimable">可领取</view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 服务详情 -->
+    <view class="detail">
+      <text class="detail-text">服务详情</text>
+    </view>
+
+    <!-- 评价内容 -->
+    <view class="Evaluate-content">
+      <view class="album__avatar">
+        <view class="album-img">
+          <image
+            src="https://cdn.uviewui.com/uview/album/1.jpg"
+            mode=""
+            style="width: 40px; height: 40px"
+          />
+          <view>
+            <view class="album-text">王***青</view>
+            <u-rate :value="3.7" readonly :size="14" />
+          </view>
+        </view>
+        <view>2023.06.18</view>
+      </view>
+      <view class="album__content">
+        <u--text
+          margin="0 0 8px 0"
+          text="全面的组件和便捷的工具会让您信手拈来面的组件和便捷的工具会让您信手拈来面的组件和便捷的工具会让您信手拈来，如鱼得水"
+        />
+        <u-album :urls="urls2"></u-album>
+      </view>
+      <view class="album__avatar">
+        <view class="album-img">
+          <image
+            src="https://cdn.uviewui.com/uview/album/1.jpg"
+            mode=""
+            style="width: 40px; height: 40px"
+          />
+          <view>
+            <view class="album-text">王***青</view>
+            <u-rate :value="3.7" readonly :size="14" />
+          </view>
+        </view>
+        <view>2023.06.18</view>
+      </view>
+      <view class="album__content">
+        <u--text
+          margin="0 0 8px 0"
+          text="全面的组件和便捷的工具会让您信手拈来面的组件和便捷的工具会让您信手拈来面的组件和便捷的工具会让您信手拈来，如鱼得水"
+        />
+        <u-album :urls="urls2"></u-album>
+      </view>
+      <view class="album__avatar">
+        <view class="album-img">
+          <image
+            src="https://cdn.uviewui.com/uview/album/1.jpg"
+            mode=""
+            style="width: 40px; height: 40px"
+          />
+          <view>
+            <view class="album-text">王***青</view>
+            <u-rate :value="3.7" readonly :size="14" />
+          </view>
+        </view>
+        <view>2023.06.18</view>
+      </view>
+      <view class="album__content">
+        <u--text
+          margin="0 0 8px 0"
+          text="全面的组件和便捷的工具会让您信手拈来面的组件和便捷的工具会让您信手拈来面的组件和便捷的工具会让您信手拈来，如鱼得水"
+        />
+        <u-album :urls="urls2"></u-album>
+      </view>
+    </view>
+
+    <!-- 底部 -->
+    <view class="service-footer">
+      <view class="service-item">
+        <view class="service-text">
+          <u-icon name="file-text" size="24" />
+          <text>店铺</text>
+        </view>
+        <view class="service-text">
+          <u-icon name="chat" size="24" class="chat" />
+          <text>立即咨询</text>
+        </view>
+        <view class="service-text">
+          <u-icon name="heart-fill" size="24" />
+          <text>收藏</text>
+        </view>
+      </view>
+      <view class="buyNow">立即购买</view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      albumWidth: 0,
+      urls2: [
+        'https://cdn.uviewui.com/uview/album/1.jpg',
+        'https://cdn.uviewui.com/uview/album/2.jpg',
+        'https://cdn.uviewui.com/uview/album/3.jpg',
+        'https://cdn.uviewui.com/uview/album/4.jpg',
+        'https://cdn.uviewui.com/uview/album/5.jpg',
+        'https://cdn.uviewui.com/uview/album/6.jpg',
+        'https://cdn.uviewui.com/uview/album/7.jpg',
+        'https://cdn.uviewui.com/uview/album/8.jpg',
+        'https://cdn.uviewui.com/uview/album/9.jpg',
+        'https://cdn.uviewui.com/uview/album/10.jpg',
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.service {
+  min-height: 100vh;
+}
+
+.service-top {
+  margin: 20rpx;
+
+  .item-flex {
+    display: flex;
+
+    .title {
+      font-size: 18px;
+      font-weight: bold;
+      margin: 20rpx;
+    }
+  }
+
+  Image {
+    width: 100%;
+    height: 200px;
+  }
+}
+
+.service-center {
+  margin: 20rpx;
+
+  .price {
+    height: 120rpx;
+    padding: 15rpx 30rpx;
+    display: flex;
+    margin: 20rpx 0;
+    color: #fff;
+    font-size: 24rpx;
+    font-weight: normal;
+    box-sizing: border-box;
+    border-radius: 20rpx 20rpx 0 0;
+    background-color: #6c9fc3;
+    justify-content: space-between;
+
+    .price-item {
+      font-size: 44rpx;
+      margin-bottom: 6rpx;
+
+      .price-text {
+        font-size: 24rpx;
+      }
+    }
+
+    .favorable {
+      font-size: 22px;
+      margin-bottom: 6rpx;
+    }
+  }
+}
+
+// 优惠券
+.coupon {
+  height: 140rpx;
+  display: flex;
+  font-size: 32rpx;
+  color: #f2110d;
+  line-height: 1.5;
+  border-radius: 10rpx;
+  margin: 30rpx 0 20rpx 0;
+  padding: 20rpx 10rpx;
+  box-sizing: border-box;
+  background-color: #faeaea;
+  border: 2rpx solid #eb8b8b;
+  justify-content: space-between;
+
+  .coupon-flex {
+    display: flex;
+    .coupon-item {
+      font-size: 36px;
+      margin-right: 20rpx;
+      .text {
+        font-size: 36rpx;
+      }
+    }
+  }
+  .claimable {
+    width: 160rpx;
+    height: 70rpx;
+    color: #fff;
+    text-align: center;
+    line-height: 70rpx;
+    margin-top: 15rpx;
+    border-radius: 70rpx;
+    background-color: #eda180;
+  }
+}
+// 服务详情
+.detail {
+  margin: 20rpx;
+  .detail-text {
+    font-size: 16px;
+    font-weight: bold;
+  }
+}
+
+// 评价内容
+.Evaluate-content {
+  margin: 20rpx;
+  .album__avatar {
+    margin: 40rpx 0;
+    display: flex;
+    font-size: 28rpx;
+    color: rgb(127, 129, 130);
+    margin-bottom: 20rpx;
+    justify-content: space-between;
+    .album-img {
+      display: flex;
+      .album-text {
+        color: #333;
+        margin-bottom: 12rpx;
+      }
+    }
+  }
+}
+// 底部
+.service-footer {
+  height: 60px;
+  padding: 10rpx;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  background-color: #fff;
+  border-top: 1px solid #eb8b8b;
+  box-sizing: border-box;
+  .service-item {
+    display: flex;
+    margin-top: 10rpx;
+    margin-left: 20rpx;
+    font-size: 14px;
+    .service-text {
+      margin-right: 30rpx;
+      .chat {
+        margin-left: 70rpx;
+      }
+    }
+  }
+  .buyNow {
+    width: 200px;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    border-radius: 40px;
+    margin-top: 12rpx;
+    margin-right: 16rpx;
+    background-color: #f0d318;
+  }
+}
+</style>

src/pages/client/checkIn/index.vue

@@ -1,15 +1,9 @@
 <template>
-  <div>
-    积分签到
-  </div>
+  <view> 积分签到 </view>
 </template>
 
 <script>
-  export default {
-    
-  }
+export default {};
 </script>
 
-<style lang="sass" scoped>
-
-</style>
+<style lang="scss" scoped></style>

src/pages/client/score/index.vue

@@ -2,7 +2,7 @@
   <view class="myPoints">
     <!-- 积分和积分签到 -->
     <view class="signIn">
-      <view>{{ totalScore }}</view>
+      <view>20000</view>
       <view
         class="signIn-item"
         @tap="$Router.push('/pages/points/checkIn/index')"
@@ -19,7 +19,7 @@
           :key="listIndex"
           @tap="$Router.push(listItem.url)"
         >
-          <u-icon :name="listItem.name" :size="50" color="#347caf" />
+          <u-icon :name="listItem.name" :size="40" color="#347caf" />
           <text class="integral-text">{{ listItem.title }}</text>
         </u-grid-item>
       </u-grid>
@@ -49,54 +49,14 @@
 
     <!-- 获取积分方式 -->
     <view class="method">
-      <u-cell-group :border="false">
+      <u-cell-group :border="false" v-for="(item, index) in list2" :key="index">
         <u-cell
           size="mini"
           :border="false"
-          icon="red-packet"
-          title="发帖"
+          :icon="item.icon"
+          :title="item.title"
           isLink
-          url=""
-        />
-        <u-cell
-          size="mini"
-          :border="false"
-          icon="red-packet"
-          title="消费"
-          isLink
-          url=""
-        />
-        <u-cell
-          size="mini"
-          :border="false"
-          icon="red-packet"
-          title="点评"
-          isLink
-          url=""
-        />
-        <u-cell
-          size="mini"
-          :border="false"
-          icon="red-packet"
-          title="分享"
-          isLink
-          url=""
-        />
-        <u-cell
-          size="mini"
-          :border="false"
-          icon="red-packet"
-          title="回帖"
-          isLink
-          url=""
-        />
-        <u-cell
-          size="mini"
-          :border="false"
-          icon="red-packet"
-          title="广告"
-          isLink
-          url=""
+          :url="item.url"
         />
       </u-cell-group>
     </view>
@@ -110,10 +70,58 @@ export default {
     return {
       totalScore:0,
       list1: [
-        { name: 'photo', title: '积分说明' },
-        { name: 'lock', title: '积分明细' },
-        { name: 'star', title: '积分提现' },
-        { name: 'hourglass', title: '积分活动' },
+        {
+          name: 'photo',
+          title: '积分说明',
+          url: '/pages/points/instructions/index',
+        },
+        {
+          name: 'lock',
+          title: '积分明细',
+          url: '/pages/points/detail/index',
+        },
+        {
+          name: 'star',
+          title: '积分提现',
+          url: '/pages/points/withdraw/index',
+        },
+        {
+          name: 'hourglass',
+          title: '积分活动',
+          url: '/pages/points/activity/index',
+        },
+      ],
+      list2: [
+        {
+          icon: 'red-packet',
+          title: '发帖',
+          url: '/pages/pointMethod/foren/index',
+        },
+        {
+          icon: 'red-packet',
+          title: '消费',
+          url: '/pages/pointMethod/consume/index',
+        },
+        {
+          icon: 'red-packet',
+          title: '点评',
+          url: '/pages/pointMethod/comment/index',
+        },
+        {
+          icon: 'red-packet',
+          title: '分享',
+          url: '/pages/pointMethod/share/index',
+        },
+        {
+          icon: 'red-packet',
+          title: '回帖',
+          url: '/pages/pointMethod/recover/index',
+        },
+        {
+          icon: 'red-packet',
+          title: '广告',
+          url: '/pages/pointMethod/advertise/index',
+        },
       ],
     };
   },
@@ -128,6 +136,10 @@ export default {
 <style lang="scss" scoped>
 .myPoints {
   /* 签到获取积分 */
+  height: 100vh;
+  margin-bottom: 50rpx;
+  background-color: #efefef;
+
   .signIn {
     height: 300rpx;
     font-size: 35px;
@@ -159,12 +171,15 @@ export default {
     padding: 10px;
     height: 220rpx;
     background-color: #fff;
+
     .invite-item {
       display: flex;
       justify-content: space-between;
+
       .invite-text {
         display: flex;
       }
+
       .gotoInvite {
         width: 60px;
         height: 30px;
@@ -174,10 +189,12 @@ export default {
         text-align: center;
         background-color: #347caf;
       }
+
       .friends {
         margin-top: 5px;
       }
     }
+
     .inviteFriends {
       width: 500rpx;
       height: 90rpx;
@@ -188,9 +205,11 @@ export default {
       box-sizing: border-box;
       background-color: #e6f5fd;
       justify-content: space-between;
+
       .flex-invite {
         display: flex;
       }
+
       .scan-text {
         margin-top: 2px;
         color: #626c79;

src/pages/client/search/index.vue

@@ -1,37 +1,114 @@
 <template>
   <view class="search">
-    <view class="searchItem">
+    <view class="search-item">
       <u-search :showAction="true" actionText="取消" />
     </view>
     <!-- 搜索历史 -->
     <view class="history">
-      <view class="historyTop">
-        <h3>搜索历史</h3>
-        <view class="historyRight">
-          <i class="iconfont icon-sanjiaoxing1"></i>
+      <view class="history-top">
+        <hotCom>搜索历史</hotCom>
+        <view class="history-right">
+          <u-icon name="trash" />
           <text>删除记录</text>
         </view>
       </view>
       <view class="label">
-        <u-tag text="标签" class="labelItem" plain shape="circle"></u-tag>
-        <u-tag text="标签" plain shape="circle"></u-tag>
-        <u-tag text="标签" plain shape="circle"></u-tag>
-        <u-tag text="标签" plain shape="circle"></u-tag>
-        <u-tag text="标签" plain shape="circle"></u-tag>
+        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
+        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
+        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
+        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
+        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
+        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
+        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
+        <u-tag text="养车" plain closable :show="close2" @close="close2 = false" />
       </view>
     </view>
 
     <!-- 热门搜索 -->
     <view class="history">
-      <view class="historyTop">
-        <h3>热门搜索</h3>
+      <view class="history-top">
+        <text class="hotCom">热门搜索</text>
       </view>
       <view class="label">
-        <u-tag text="标签" type="warning" shape="circle"></u-tag>
-        <u-tag text="标签" type="warning" shape="circle"></u-tag>
-        <u-tag text="标签" type="warning" shape="circle"></u-tag>
-        <u-tag text="标签" type="warning" shape="circle"></u-tag>
-        <u-tag text="标签" type="warning" shape="circle"></u-tag>
+        <u-tag text="标签" class="label-item" />
+        <u-tag text="标签" class="label-item" />
+        <u-tag text="标签" class="label-item" />
+        <u-tag text="标签" class="label-item" />
+        <u-tag text="标签" class="label-item" />
+        <u-tag text="标签" class="label-item" />
+        <u-tag text="标签" class="label-item" />
+      </view>
+    </view>
+
+    <u-divider text="猜你喜欢"></u-divider>
+
+    <!-- 列表 -->
+    <view class="hot">
+      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+      <view>
+        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" />
+            <text class="line">|</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="address-flex">
+          <view>宝安中心区美容洗车</view>
+          <view>2.7km</view>
+        </view>
+      </view>
+    </view>
+    <view class="hot">
+      <Image src="https://cdn.uviewui.com/uview/album/2.jpg"></Image>
+      <view>
+        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" />
+            <text class="line">|</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="address-flex">
+          <view>宝安中心区美容洗车</view>
+          <view>2.7km</view>
+        </view>
+      </view>
+    </view>
+    <view class="hot">
+      <Image src="https://cdn.uviewui.com/uview/album/3.jpg"></Image>
+      <view>
+        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" />
+            <text class="line">|</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="address-flex">
+          <view>宝安中心区美容洗车</view>
+          <view>2.7km</view>
+        </view>
+      </view>
+    </view>
+    <view class="hot">
+      <Image src="https://cdn.uviewui.com/uview/album/4.jpg"></Image>
+      <view>
+        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
+        <view class="item-flex">
+          <view class="star">
+            <u-rate :count="count" v-model="value" />
+            <text class="line">|</text>
+          </view>
+          <view>989单</view>
+        </view>
+        <view class="address-flex">
+          <view>宝安中心区美容洗车</view>
+          <view>2.7km</view>
+        </view>
       </view>
     </view>
   </view>
@@ -39,54 +116,110 @@
 
 <script>
 export default {
-
+  data() {
+    return {
+      count: 5, 
+      value: 4,
+      close2: true,
+      radios: [{
+        checked: true
+      }
+      ],
+      checkboxs: [{
+        checked: true
+      }
+      ]
+    }
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 .search {
-  height: 1400rpx;
-  background-color: #efefef;
+  min-height: 100vh;
+  background-color: #fff;
+}
 
-  .searchItem {
-    padding: 0 20rpx;
-    height: 90rpx;
-    line-height: 90rpx;
-    background-color: #fff;
-    margin-bottom: 60rpx;
+/* 搜索样式 */
+.search-item {
+  padding: 0 20rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  background-color: #fff;
+  margin-bottom: 10rpx;
+}
+
+/* 搜索历史样式 */
+.history {
+  padding: 30rpx;
+  margin-bottom: 10rpx;
+
+  .history-top {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10rpx;
+
+    .history-right {
+      margin-top: 15rpx;
+      display: flex;
+      font-size: 12px
+    }
+
+    hotCom {
+      font-size: 15px;
+      font-weight: bold;
+      color: #404045;
+    }
   }
+}
 
-  /* 搜索历史 */
-  .history {
-    padding: 20rpx;
-    margin-bottom: 50rpx;
+.label {
+  display: flex;
+  flex-wrap: wrap;
 
-    .historyTop {
+  .label-item {
+    margin-right: 10rpx;
+  }
+}
+
+// 列表
+.hot {
+    height: 220rpx;
+    background-color: #fff;
+		padding: 0 20rpx;
+    margin-bottom: 20rpx;
+    display: flex;
+    Image {
+      width: 120px;
+      height: calc(100% - 20rpx);
+      margin: 10rpx 20rpx 10rpx 0;
+    }
+    .item-text {
+      font-weight: bold;
+			margin: 10rpx 0 10rpx;
+			color: #333;
+    }
+    .item-flex {
       display: flex;
-      justify-content: space-between;
-      margin-bottom: 20rpx;
-      .historyRight {
-        margin-top: 10rpx;
-        display: flex;
-        font-size:24rpx;
-        .icon-sanjiaoxing1{
-          margin: 5rpx 5rpx 0 0;
-          font-size: 26rpx; 
-        }
-      }
-      h3 {
-        font-size: 34rpx;
-        font-weight: bold;
-        color:#404045;
-      }
+			justify-content: space-between;
+			font-size: 14px;
+			margin: 0 20rpx 30rpx 0;
+			color: #0d0d0d66;
+			.star{
+				display: flex;
+				.line{
+					margin-left: 18rpx;
+					margin-top: 5rpx;
+					font-size: 24rpx;
+				}
+			}
     }
-    .label{
+    .address-flex {
       display: flex;
-      width: 120rpx;
-      .labelItem{
-        margin-right: 20rpx;
-      }
+			justify-content: space-between;
+			font-size: 12px;
+			color: #999;
+			margin-right: 20rpx;
     }
   }
-}
 </style>

src/pages/message/evaluate/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <view>评价通知</view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/pages/message/favorable/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <view>优惠福利</view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/pages/message/order/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <view>订单通知</view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/pages/message/payment/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <view>付款通知</view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/pages/message/upvote/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <view>点赞回复</view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/pages/pointMethod/advertise/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <view> 广告</view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/pages/pointMethod/comment/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <view> 点评</view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/pages/pointMethod/consume/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <view> 消费</view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/pages/pointMethod/foren/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <view> 发帖</view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/pages/pointMethod/recover/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <view> 回帖</view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/pages/pointMethod/share/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <view> 分享</view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/pages/points/activity/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <view> 积分活动 </view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/pages/points/detail/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <view> 积分明细 </view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/pages/points/instructions/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <view> 积分说明 </view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/pages/points/withdraw/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <view> 积分提现 </view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="sass" scoped></style>

src/pages/tabbar/home/index.vue

@@ -26,7 +26,7 @@
       </view>
       <view
         class="search-item"
-        @click="Router.push('/pages/client/search/index')"
+        @click="$Router.push('/pages/client/search/index')"
       >
         <u-search
           placeholder="请输入搜索内容"
@@ -39,10 +39,14 @@
     <view class="home-swiper">
       <u-swiper :list="swiperList" indicator @change="change" @click="click" />
     </view>
-    <!-- 分类 -->
+    <!-- 商品分类 -->
     <view class="home-list">
       <u-grid :border="false" col="5">
-        <u-grid-item v-for="(listItem, listIndex) in list1" :key="listIndex">
+        <u-grid-item
+          v-for="(listItem, listIndex) in list1"
+          :key="listIndex"
+          @tap="$Router.push(listItem.url)"
+        >
           <u-icon
             :customStyle="{ paddingTop: 20 + 'rpx' }"
             :name="listItem.name"
@@ -131,6 +135,47 @@ export default {
         'https://cdn.uviewui.com/uview/swiper/swiper3.png',
       ],
       list1: [
+        {
+          name: 'photo',
+          title: '养车',
+          url: '/pages/business/classify/index',
+        },
+        {
+          name: 'lock',
+          title: '福利',
+        },
+        {
+          name: 'star',
+          title: '分类',
+        },
+        {
+          name: 'hourglass',
+          title: '自驾游',
+        },
+        {
+          name: 'home',
+          title: '门店',
+        },
+        {
+          name: 'photo',
+          title: '养车',
+        },
+        {
+          name: 'lock',
+          title: '福利',
+        },
+        {
+          name: 'star',
+          title: '分类',
+        },
+        {
+          name: 'hourglass',
+          title: '自驾游',
+        },
+        {
+          name: 'home',
+          title: '门店',
+        },
         {
           name: 'photo',
           title: '养车',
@@ -241,6 +286,7 @@ export default {
 
 <style lang="scss" scoped>
 .home {
+  background-color: #f0efef;
   .nav-bar {
     ::v-deep .u-navbar__content {
       background-color: #ffffff;
@@ -277,15 +323,15 @@ export default {
   margin-bottom: 10rpx;
 }
 
-/* 分类 */
+/* 商品分类 */
 .home-list {
-  background-color: #fff;
-  margin: 0 20rpx;
-  padding: 10rpx;
+  background-color: #ffffff;
+  height: 360rpx;
+  margin: 0 20rpx 20rpx 20rpx;
   border-radius: 10rpx;
 
   .grid-text {
-    font-size: 14px;
+    font-size: 12px;
     color: #909399;
     padding: 10rpx 0 20rpx 0rpx;
     box-sizing: border-box;

src/pages/tabbar/message/index.vue

@@ -8,7 +8,12 @@
     </u-navbar>
     <view :style="{ marginTop: totalHeight + 'px' }">
       <!-- 系统通知 -->
-      <view class="orderList" v-for="item in orderList" :key="item.id">
+      <view
+        class="orderList"
+        v-for="item in orderList"
+        :key="item.id"
+        @tap="$Router.push(item.url)"
+      >
         <image :src="item.img" style="width: 40px; height: 40px" />
         <view class="orderItem">
           <view class="order1">{{ item.name }}</view>
@@ -18,7 +23,10 @@
       </view>
       <!-- 消息通知 -->
       <view class="message">
-        <image src="/static/images/home-select.png" style="width: 40px; height: 40px" />
+        <image
+          src="/static/images/home-select.png"
+          style="width: 40px; height: 40px"
+        />
         <view class="business">
           <view class="businessItem">商家</view>
           <view class="messages">您好，请问有什么需要帮助的吗？</view>
@@ -36,37 +44,50 @@
 export default {
   data() {
     return {
-      list: [{ name: '系统通知' }, { name: '消息通知' }],
+      list: [
+        { name: '系统通知' },
+        {
+          name: '消息通知',
+          badge: {
+            value: 5,
+          },
+        },
+      ],
       orderList: [
         {
           id: '1',
           img: '/static/images/home-select.png',
           name: '订单通知',
           text: '您的订单成功付款，感谢您的支持。',
+          url: '/pages/message/order/index',
         },
         {
           id: '2',
           img: '/static/images/home-select.png',
           name: '付款通知',
           text: '您的订单成功付款，感谢您的支持。',
+          url: '/pages/message/payment/index',
         },
         {
           id: '3',
           img: '/static/images/home-select.png',
           name: '评价通知',
           text: '您的订单成功付款，感谢您的支持。',
+          url: '/pages/message/evaluate/index',
         },
         {
           id: '4',
           img: '/static/images/home-select.png',
           name: '点赞回复',
           text: '您的订单成功付款，感谢您的支持。',
+          url: '/pages/message/upvote/index',
         },
         {
           id: '5',
           img: '/static/images/home-select.png',
           name: '优惠福利',
           text: '您的订单成功付款，感谢您的支持。',
+          url: '/pages/message/favorable/index',
         },
       ],
       type: 'warning',
@@ -88,6 +109,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.messages {
+  min-height: 100vh;
+  background-color: #fff;
+}
 .orderList {
   display: flex;
   padding: 30rpx;