feat(business): 预约弹出框的实现和商家服务页面的优化

src/components/service/index.vue

@@ -0,0 +1,211 @@
+<template>
+  <view>
+    <view class="sort">
+      <u-tabs :list="list1" @click="click" lineWidth="30" lineColor="#5992bb" :activeStyle="{
+        color: '#5992bb',
+        fontWeight: 'bold',
+      }" :inactiveStyle="{
+  color: '#000',
+}" itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;" />
+      <view class="list">
+        <Image src="https://cdn.uviewui.com/uview/album/1.jpg" @tap="$Router.push('/pages/business/service/index')" />
+        <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" @click="show = true">预约</text>
+              <text class="Buy" @tap="$Router.push('/pages/business/buy/index')">购买</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 预约弹出框的实现 -->
+      <u-popup :show="show" mode="center" @close="close" @open="open" :round="20">
+        <view class="popupContent">
+          <text class="popupItem">预约服务</text>
+          <view class="server">
+            <view class="popup-title">时间</view>
+            <!-- <view @click="showDate = true">请选择时间</view> -->
+            <u--input placeholder="请选择时间" border="bottom" clearable />
+            <!-- 点击时间的弹框 -->
+            <!-- <u-datetime-picker :showDate="showDate" v-model="value1" mode="datetime" /> -->
+            <view class="popup-title">联系方式</view>
+            <u--input placeholder="请输入联系方式" border="bottom" clearable />
+          </view>
+        </view>
+      </u-popup>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      show: false,
+      showDate: false,
+      value1: Number(new Date()),
+    };
+  },
+  methods: {
+    click(item) {
+      console.log('item', item);
+    },
+    open() {
+      // console.log('open');
+    },
+    close() {
+      this.show = false;
+      // console.log('close');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/*商家服务分类的是实现 */
+.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;
+        }
+      }
+    }
+  }
+}
+
+/* 弹框的样式 */
+.popupContent {
+  width: 600rpx;
+  height: 400rpx;
+  padding: 40rpx;
+  box-sizing: border-box;
+
+  .popupItem {
+    font-size: 34rpx;
+    font-weight: bold;
+  }
+
+  .server {
+    margin: 30rpx 0 0 30rpx;
+  }
+}
+</style>

src/pages.json

@@ -82,6 +82,12 @@
             "navigationBarTitleText": "商家详情"
           }
         },
+        {
+          "path": "buy/index",
+          "style": {
+            "navigationBarTitleText": "商家详情"
+          }
+        },
         {
           "path": "hot/index",
           "style": {

src/pages/business/classify/index.vue

@@ -3,282 +3,29 @@
     <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>
+
+    <service />
+    <service />
+    <service />
+    <service />
+    <service />
+    <service />
   </view>
 </template>
 
 <script>
+import service from '@/components/service'
 export default {
+  components: {
+    service,
+  },
   data() {
     return {
       count: 5,
       value: 4,
     };
   },
-  onLoad() {},
+  onLoad() { },
   methods: {},
 };
 </script>
@@ -287,6 +34,7 @@ export default {
 .recommend {
   min-height: 100vh;
   background-color: #efefef;
+
   /* 搜索样式 */
   .search-item {
     padding: 0 20rpx;
@@ -295,100 +43,5 @@ export default {
     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;
-    }
-
-    .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

@@ -2,24 +2,11 @@
   <view class="detail">
     <!-- 轮播图 -->
     <view class="carousel-map">
-      <u-swiper
-        :list="list3"
-        previousMargin="0"
-        nextMargin="100"
-        circular
-        :autoplay="false"
-        bgColor="#ffffff"
-      />
+      <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"
-          />
+          <u-rate :count="count" v-model="value" active-color="#fff" inactive-color="#fff" :size="12" />
         </view>
         <view class="good-item">近期有6266个购买者给了给好评</view>
       </view>
@@ -52,195 +39,20 @@
       </view>
     </view>
 
-    <!-- 分类 -->
-    <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>
+    <service />
+    <service />
+    <service />
+    <service />
   </view>
 </template>
 
 <script>
+import service from '@/components/service'
+
 export default {
+  components: {
+    service,
+  },
   data() {
     return {
       count: 5,
@@ -364,105 +176,4 @@ export default {
     }
   }
 }
-
-// 分类
-.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;
-        }
-      }
-    }
-  }
-}
 </style>

src/pages/my/collect/index.vue

@@ -3,117 +3,24 @@
     <view class="text">以下是您收藏的商品服务</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>
+    <service />
+    <service />
+    <service />
+    <service />
   </view>
 </template>
 
 <script>
+import service from '@/components/service'
 export default {
+  components: {
+    service,
+  },
   data() {
     return {
-      count: 5,
-      value: 4,
     };
   },
-  onLoad() {},
+  onLoad() { },
   methods: {},
 };
 </script>
@@ -128,101 +35,5 @@ export default {
     padding: 40rpx;
     color: #999;
   }
-
-  .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;
-        }
-      }
-    }
-  }
 }
 </style>