修改页面 - 服务详情页面

packages/homeServer/search/index.vue

@@ -97,6 +97,7 @@
             class="service-card"
             v-for="(service, index) in hotServiceList"
             :key="index"
+            @click="navigateToReservation(service)"
           >
             <image
               src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/ceshi.png"
@@ -117,12 +118,12 @@
               </view>
               <view class="service-info-right">
                 <view class="service-footer">
-                  <view
+                  <!-- <view
                     class="service-button"
                     @click="navigateToReservation(service)"
                   >
                     <text class="button-text" @click="goSubscribe">去预约</text>
-                  </view>
+                  </view> -->
                   <text class="service-count">{{ service.count }}</text>
                 </view>
               </view>
@@ -334,6 +335,14 @@ export default {
     goSubscribe() {
       NavgateTo("/packages/homeServer/searchInfo/index");
     },
+
+    navigateToReservation(item) {
+      uni.navigateTo({
+        url: `/packages/homeServer/serverInfo/index?service=${encodeURIComponent(
+          JSON.stringify(item)
+        )}`,
+      });
+    },
   },
 };
 </script>

packages/homeServer/serverInfo/index.css

@@ -10,6 +10,29 @@
     height: 307rpx;
 }
 
+.cirList {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    margin-top: 10rpx;
+    padding-bottom: 20rpx;
+}
+
+.cir {
+    width: 6rpx;
+    height: 6rpx;
+    border-radius: 50%;
+    background-color: #333;
+    margin-right: 6rpx;
+}
+
+.active {
+    width: 12rpx;
+    height: 6rpx;
+    border-radius: 100rpx;
+}
+
 .dotList {
     display: flex;
     align-items: center;
@@ -92,7 +115,7 @@
 }
 
 .serverListTit {
-    font-size: 63rpx;
+    font-size: 32rpx;
     color: #222222;
     font-weight: 600;
 }
@@ -119,6 +142,7 @@
 }
 
 .msg_tit {
+    display: flex;
     font-size: 30rpx;
     color: #222222;
     margin-bottom: 20rpx;
@@ -145,15 +169,7 @@
     justify-content: center;
     font-size: 30rpx;
     color: #FFFFFF;
-}
+    margin-left: 200rpx;
-
-.serverItem_right_btn .more {
-    width: 26rpx;
-    height: 26rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
 }
 
 .range {
@@ -186,4 +202,63 @@
     /* 添加左右间距 */
     min-width: 0;
     /* 防止 flex 子项溢出 */
+}
+
+.msg_meta {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12rpx;
+    font-size: 24rpx;
+    color: #666666;
+}
+
+.msg_meta .rating,
+.msg_meta .distance,
+.msg_meta .served {
+    display: flex;
+    align-items: center;
+    margin-right: 20rpx;
+}
+
+.infoImage {
+    width: 25rpx;
+    height: 25rpx;
+    margin-right: 5rpx;
+}
+
+.tabs {
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    height: 100rpx;
+    padding: 0 20rpx;
+    box-sizing: border-box;
+    display: flex;
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+.tabItem {
+    font-size: 25rpx;
+    color: #222222;
+    margin-right: 60rpx;
+    height: 42rpx;
+}
+
+.active2 {
+    font-size: 25rpx;
+    font-weight: 700;
+    position: relative;
+}
+
+.active2::after {
+    content: '';
+    background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_active.png) no-repeat;
+    background-size: 100% 100%;
+    width: 52rpx;
+    height: 22rpx;
+    position: absolute;
+    left: 50%;
+    bottom: -16rpx;
+    transform: translateX(-50%);
 }

packages/homeServer/serverInfo/index.vue

@@ -1,7 +1,25 @@
 <template>
-    <view class="container">
+  <view class="container">
-        <div class="banner">
+    <div class="banner">
-            <swiper>
+      <swiper @animationfinish="swipers" autoplay circular>
+        <swiper-item
+          v-for="(item, index) in bannerList"
+          :key="index"
+          @click="lookImage(item, index)"
+        >
+          <image :src="item.pic_src" mode="aspectFill" />
+        </swiper-item>
+      </swiper>
+
+      <view class="cirList">
+        <view
+          :class="['cir', currentIdx == index ? 'active' : '']"
+          v-for="(item, index) in bannerList"
+          :key="index"
+        >
+        </view>
+      </view>
+      <!-- <swiper>
                 <swiper-item>
                     <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_banner.png"></image>
                 </swiper-item>
@@ -10,114 +28,190 @@
                 <div class="dot active"></div>
                 <div class="dot"></div>
                 <div class="dot"></div>
-            </div>
+            </div> -->
+    </div>
+    <div class="line"></div>
+    <div class="serverTitBox">
+      <div class="serverTit">
+        <div class="serverTit_left">
+          <div class="tit">空调清洗</div>
+          <div class="msg">平台保障</div>
         </div>
-        <div class="line"></div>
+        <div class="serverTit_right">已预约100+</div>
-        <div class="serverTitBox">
+      </div>
-            <div class="serverTit">
+      <div class="serverCon">
-                <div class="serverTit_left">
+        专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所还您清新居所
-                    <div class="tit">空调清洗</div>
+      </div>
-                    <div class="msg">
+    </div>
-                        平台保障
+    <div class="line"></div>
-                    </div>
+    <!-- <div class="priceSelect">
-                </div>
+      <div class="tit">价格范围</div>
-                <div class="serverTit_right">已预约100+</div>
+
-            </div>
+      <div class="range">
-            <div class="serverCon">专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所还您清新居所</div>
+        <div class="minPrice">￥10</div>
+        <slider-range
+          style="flex: 1"
+          :value="rangeValue"
+          :min="rangeMin"
+          :max="rangeMax"
+          :step="5"
+          :bar-height="3"
+          :block-size="26"
+          background-color="#EEEEF6"
+          active-color="#FF6B00"
+          :format="format"
+          :decorationVisible="true"
+          @change="handleRangeChange"
+        ></slider-range>
+        <div class="maxPrice">￥39</div>
+      </div>
+    </div> -->
+
+    <div class="serverList">
+      <div class="serverListTit">找到8个匹配服务商</div>
+      <view class="tabs">
+        <view
+          v-for="(item, index) in categoryList"
+          :key="index"
+          :class="['tabItem', selectedTab === index ? 'active2' : '']"
+          @click="selectTab(index, item)"
+        >
+          {{ item.category_name }}
+        </view>
+      </view>
+
+      <div class="serverItem" @click="selectVendor">
+        <div class="serverItem_left">
+          <image src="http://localhost:8080/test.png"></image>
         </div>
-        <div class="line"></div>
+        <div class="serverItem_right">
-        <div class="priceSelect">
+          <div class="serverItem_right_msg">
-            <div class="tit">价格范围</div>
+            <div class="msg_tit">
-
+              <view>安心家政</view>
-            <div class="range">
+              <div class="serverItem_right_btn" @click="selectMaster">
-                <div class="minPrice">￥10</div>
+                选择服务
-                <slider-range style="flex: 1;" :value="rangeValue" :min="rangeMin" :max="rangeMax" :step="5" :bar-height="3"
+              </div>
-                    :block-size="26" background-color="#EEEEF6" active-color="#FF6B00" :format="format"
-                    :decorationVisible="true" @change="handleRangeChange"></slider-range>
-                <div class="maxPrice">￥39</div>
             </div>
-        </div>
+            <div class="msg_meta">
-
+              <span class="rating">
-        <div class="serverList">
+                <image
-            <div class="serverListTit">匹配的服务商(3)</div>
+                  class="infoImage"
-
+                  src="http://localhost:8080/serverInfo_xing.png"
-            <div class="serverItem" @click="selectVendor">
+                />
-                <div class="serverItem_left">
+                4.8
-                    <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/test.png"></image>
+              </span>
-                </div>
+              <span class="distance">
-                <div class="serverItem_right">
+                <image
-                    <div class="serverItem_right_msg">
+                  class="infoImage"
-                        <div class="msg_tit">安心家政</div>
+                  src="http://localhost:8080/serverInfo_weizhi.png"
-                        <div class="msg_price">价格范围： <span>￥80-￥150</span></div>
+                />3.3km</span
-                    </div>
+              >
-
+              <span class="served">
-                    <div class="serverItem_right_btn" @click="selectMaster">
+                <image
-                        选择师傅
+                  class="infoImage"
-                        <div class="more">
+                  src="http://localhost:8080/serverInfo_fuwu.png"
-                            <u-icon name="arrow-right" color="#fff" size="28"></u-icon>
+                />服务12226人</span
-                        </div>
+              >
-                    </div>
-                </div>
             </div>
+            <div class="msg_price">价格范围： <span>￥80-￥150</span></div>
+          </div>
         </div>
-
+      </div>
-    </view>
+    </div>
+  </view>
 </template>
 
 <script>
-import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
+import {
-import { apiArr } from '../../../api/reservation';
+  request,
-import SliderRange from '@/components/primewind-sliderrange/components/primewind-sliderrange/index.vue'
+  picUrl,
+  NavgateTo,
+  menuButtonInfo,
+} from "../../../utils/index";
+import { apiArr } from "../../../api/reservation";
+import SliderRange from "@/components/primewind-sliderrange/components/primewind-sliderrange/index.vue";
 
 export default {
-    components: {
+  components: {
-        // 注册组件
+    // 注册组件
-        SliderRange
+    SliderRange,
-    },
+  },
-    data() {
+  data() {
-        return {
+    return {
-            top: "",
+      bannerList: [
-            localHeight: "",
+        {
-            rangeMin: 5,
+          pic_src: "http://localhost:8080/test.png",
-            rangeMax: 200,
-            rangeValue: [10, 50]
-        }
-    },
-    methods: {
-        format(val) {
-            return val + '%'
         },
-        handleRangeChange(e) {
+        {
-            this.rangeValue = e
+          pic_src:
+            "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_banner.png",
         },
-        selectVendor(){
+        {
-            NavgateTo("../vendor/index")
+          pic_src: "http://localhost:8080/test.png",
-        },
-        selectMaster(){
-            NavgateTo("../chooseMaster/index")
         },
+      ],
+      currentIdx: 0,
+      top: "",
+      localHeight: "",
+      rangeMin: 5,
+      rangeMax: 200,
+      rangeValue: [10, 50],
+
+      selectedTab: 0,
+      categoryList: [
+        { category_name: "推荐" },
+        { category_name: "评分优先" },
+        { category_name: "距离最近" },
+        { category_name: "价格最低" },
+        { category_name: "服务最多" },
+        { category_name: "价格范围" },
+      ],
+    };
+  },
+  methods: {
+    swipers(e) {
+      this.currentIdx = e.detail.current;
     },
-    onReady() {
+    format(val) {
-
+      return val + "%";
     },
-
+    handleRangeChange(e) {
-    onLoad(options) {
+      this.rangeValue = e;
-        const meun = menuButtonInfo();
-        this.top = meun.top;
-        this.localHeight = meun.height;
     },
-    onShow() {
+    selectVendor() {
-
+      NavgateTo("../vendor/index");
     },
-
+    selectMaster() {
-    /**
+      NavgateTo("../chooseMaster/index");
-    * 页面上拉触底事件的处理函数
-    */
-    onReachBottom() {
-
     },
+    lookImage(item, index) {
+      // 提取所有图片URL
+      const urls = this.bannerList.map((item) => item.pic_src);
+      // 调用UniApp预览图片API
+      uni.previewImage({
+        current: index,
+        urls: urls,
+        loop: true,
+      });
+    },
+    selectTab(index, item) {
+      this.selectedTab = index;
+    },
+  },
+  onReady() {},
 
-}
+  onLoad(options) {
+    const meun = menuButtonInfo();
+    this.top = meun.top;
+    this.localHeight = meun.height;
+  },
+  onShow() {},
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {},
+};
 </script>
 
 <style>