代码合并

api/VolunteerList.js

@@ -0,0 +1,8 @@
+import request from '../utils/request'
+
+export function userSortShotService() {
+  return request({
+    url: `/core/users/orders/web/hotService`,
+    method: 'get',
+  })
+}

pages/common/orderList/userItem.vue

@@ -31,6 +31,8 @@
           <view v-for="item in btns" :key="item.name">
             <view class="btn-m" v-if="item.show ? item.show(data) : true" :type="item.type" text="取消"
               @click="item.onClick(data)">
+              <image v-if="item.name === '查看'" src="/static/img/组 14145@1x.png" class="btn-icon"></image>
+              <image v-if="item.name === '沟通'" src="/static/img/容器 165@1x.png" class="btn-icon"></image>
               {{ item.name }}
             </view>
           </view>
@@ -171,7 +173,11 @@ const handlClick = (item) => {
       line-height: 42rpx;
       letter-spacing: normal;
       color: rgba(0, 0, 0, 0.8);
-      top: 20rpx;
+      margin-bottom: 10rpx;
+    }
+    
+    .item-title-box {
+      margin-top: 60rpx;
     }
 
     // 服务类别/下单日期
@@ -184,7 +190,7 @@ const handlClick = (item) => {
       line-height: 34rpx;
       letter-spacing: normal;
       color: rgba(0, 0, 0, 0.5);
-      top: 50rpx;
+      margin-bottom: 10rpx;
     }
 
     // 服务描述
@@ -203,6 +209,7 @@ const handlClick = (item) => {
       text-overflow: ellipsis;
       white-space: nowrap;
       // max-width: 100%;
+      margin-bottom: 10rpx;
     }
 
     .item-status-box {
@@ -240,21 +247,30 @@ const handlClick = (item) => {
       display: flex;
       justify-content: flex-end;
       align-items: center;
-      width: 140rpx;
-      height: 60rpx;
-      border-radius: 36rpx;
-      background: #D94342;
-      padding: 0 10rpx;
+      gap: 20rpx;
+
       .btn-m {
-        width: 72rpx;
-        height: 30rpx;
+        width: 140rpx;
+        height: 60rpx;
         font-family: PingFang SC;
         font-size: 24rpx;
         font-weight: 500;
-        line-height: 30rpx;
+        line-height: 60rpx;
         text-align: center;
         letter-spacing: normal;
         color: #FFFFFF;
+        background: #D94342;
+        border-radius: 36rpx;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        
+        .btn-icon {
+          width: 24rpx;
+          height: 24rpx;
+          margin-right: 8rpx;
+        }
       }
     }
   }

pages/common/rankingList/index.vue

@@ -1,117 +1,177 @@
 <template>
-    <view clang="ranking-main">
-        <view class="serve-title ranking-title">本月热门服务</view>
-        <view class="ranking-list">
-            <view v-for="item in datas" :key="item.id" class="ranking-item">
-                <img :src="item.img" alt="" srcset="" style="width: 160rpx;height: 160rpx;margin-right: 32rpx;">
-                <view class="ranking-item-info">
-                    <view class="ranking-item-name">{{ item.name }}</view>
-                    <view class="ranking-item-tag flex-center">{{ item.tag }}</view>
-                    <view class="ranking-item-dese">{{ item.dese }}</view>
-                </view>
-
-                <view class="ranking-item-start-box flex-center">
-                    <img src="/static/serverImg/home/start.png" alt="" style="width: 32rpx;height: 32rpx;">
-                    <view class="ranking-item-count">{{ item.count }}</view>
+  <view class="ranking-main">
+    <view>
+      <view class="ranking-title">
+        <image src="@/static/img/容器@1x (1).png" mode="widthFix" class="ranking-title-img"></image>
+        <view class="ranking-title-text">本月热门服务</view>
+      </view>
+
+      <view class="ranking-list">
+        <view v-for="(item, index) in gitList" :key="index" class="ranking-list-item">
+          <image :src="item.businessIcon" mode="widthFix" class="ranking-list-item-img"></image>
+          <view class="ranking-list-item-content">
+            <view class="ranking-list-item-header">
+              <view class="ranking-list-item-title">{{ item.businessName }}</view>
+              <view class="ranking-list-item-rating">
+                <image src="@/static/img/容器@1x (3).png" mode="widthFix" class="star-icon"></image>
+                <text class="score-text">{{ item.score }}星</text>
+              </view>
+            </view>
+            <view class="ranking-list-item-bottom">
+              <view class="ranking-list-item-tag">
+                <view class="ranking-list-item-tag-text">
+                  {{ item.businessTierName }}
                 </view>
-
+              </view>
+              <view class="ranking-list-item-count">本月已服务：{{ item.totalCount }}</view>
             </view>
+          </view>
         </view>
+      </view>
     </view>
+  </view>
 </template>
 
 <script setup>
+import { userSortShotService } from '@/api/VolunteerList.js'
+import { onMounted, ref } from 'vue';
+
+const userType = uni.getStorageSync('userType'); //读取本地存储
+const gitList = ref([])
+
+const gitData = async () => {
+  if (userType === 2) {
+    const res = await userSortShotService()
+    console.log(res, '>>>>>>>>>>>res')
+    gitList.value = res.data
+  }
+}
 
-const datas = [
-    {
-        id: 1,
-        img: '/static/serverImg/home/ranking2.png',
-        name: '一对一解答',
-        tag: '孩子陪伴',
-        text: '个性化解答,有效提升',
-        dese: '本月已服务360',
-        count: '4.9'
-    },
-    {
-        id: 2,
-        img: '/static/serverImg/home/ranking.png',
-        name: '专业深度保洁',
-        tag: '家庭保洁',
-        text: '专业设备,深度除螨,全面消毒',
-        dese: '本月已服务289',
-        count: '4.8'
-    },
-   
-]
-
+onMounted(() => {
+  gitData()
+})
 </script>
 
 <style scoped lang="scss">
+.ranking-main {
+  padding: 30rpx;
+}
+
 .ranking-title {
-    margin-bottom: 18rpx ;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 30rpx;
+
+  .ranking-title-img {
+    width: 36rpx;
+    height: 36rpx;
+    margin-right: 10rpx;
+  }
+
+  .ranking-title-text {
+    font-family: PingFang SC;
+    font-size: 34rpx;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.8);
+  }
 }
 
 .ranking-list {
+  .ranking-list-item {
+    display: flex;
+    padding: 30rpx 0;
+    border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
+
+    .ranking-list-item-img {
+      width: 84rpx;
+      height: 84rpx;
+      border-radius: 50%;
+      margin-right: 20rpx;
+      flex-shrink: 0;
+      top: 33rpx;
+    }
+
+    .ranking-list-item-content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
 
-    .ranking-item {
+      .ranking-list-item-header {
         display: flex;
-        align-items: flex-start;
         justify-content: space-between;
-        padding: 12px ;
-        margin-bottom: 32rpx;
-
-        border-radius: 8px;
-        background: rgba(255, 255, 255, 1);
-
-        border: 1px solid rgba(243, 244, 246, 1);
-
-        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(0, 0, 0, 0), 0px 1px 2px rgba(0, 0, 0, 0.05);
-
-        .ranking-item-info {
-            flex: 1;
-
-            .ranking-item-name {
-                font-size: 32rpx;
-                font-weight: 400;
-                line-height: 48rpx;
-                color: rgba(51, 51, 51, 1);
-                margin-bottom: 16rpx;
-            }
-
-            .ranking-item-tag {
-                width: 128.03rpx;
-                height: 46rpx;
-                opacity: 1;
-                border-radius: 19998rpx;
-                background:  rgba(251, 229, 225, 1);;
-                margin-bottom: 16rpx;
-                font-size: 24rpx;
-                font-weight: 400;
-                line-height: 32rpx;
-                color: rgba(221, 94, 69, 1);
-
-
-            }
-
-            .ranking-item-dese {
-                font-size: 24rpx;
-                font-weight: 400;
-                line-height: 32rpx;
-                color: rgba(153, 153, 153, 1);
-            }
+        align-items: center;
+        margin-bottom: -3rpx;
+
+        .ranking-list-item-title {
+          width: 374rpx;
+          height: 42rpx;
+          font-family: PingFang SC;
+          font-size: 32rpx;
+          font-weight: normal;
+          line-height: 42rpx;
+          letter-spacing: normal;
+          color: rgba(0, 0, 0, 0.8);
+        }
+
+        .ranking-list-item-rating {
+          display: flex;
+          align-items: center;
+
+          .star-icon {
+            width: 84rpx;
+            height: 84rpx;
+            margin-right: 8rpx;
+          }
+
+          .score-text {
+            color: #FF7043;
+            font-size: 28rpx;
+            font-weight: 500;
+          }
         }
+      }
 
-        .ranking-item-start-box {
-            display: flex;
+      .ranking-list-item-bottom {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .ranking-list-item-tag {
+          /* 自动布局子元素 */
+          // width: 252rpx;
+          height: 34rpx;
+          /* 自动布局 */
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          // padding: 8rpx 12rpx;
+          z-index: 0;
+          border-radius: 10rpx;
+          box-sizing: border-box;
+          border: 1rpx solid rgba(237, 93, 49, 0.8);
+          .ranking-list-item-tag-text{
+            /* 自动布局子元素 */
+              // width: 228rpx;
+              height: 22rpx;
+              z-index: 0;
+              font-family: PingFang SC;
+                font-size: 26rpx;
+                font-weight: normal;
+                line-height: 22rpx;
+                letter-spacing: 0.02em;
+                color: #ED5D31;
+          }
+        }
 
-            .ranking-item-count {
-                font-size: 28rpx;
-                font-weight: 400;
-                line-height: 40rpx;
-                color: rgba(51, 51, 51, 1);
-                margin-left: 9rpx;
-            }
+        .ranking-list-item-count {
+          font-size: 24rpx;
+          color: rgba(0, 0, 0, 0.5);
+          text-align: right;
         }
+      }
     }
+  }
 }
 </style>

pages/index.vue

@@ -14,27 +14,29 @@
       </view>
     </view>
 
+    <view class="home-Wrapper">
       <view class="home-grid">
         <Client />
       </view>
 
-    <view class="home-swiper" v-if="userType == 1">
-      <view v-if="ValueZone.length > 0">
-        <up-swiper :list="ValueZone" :indicator="false" indicatorMode="line" circular></up-swiper>
+      <view class="home-swiper" v-if="userType == 1">
+        <view v-if="ValueZone.length > 0">
+          <up-swiper :list="ValueZone" :indicator="false" indicatorMode="line" circular></up-swiper>
+        </view>
       </view>
-    </view>
 
 
 
-    <view class="home-ranking" :class="{ 'no-margin': userType === 2 }">
-      <ServIces :leftList="leftList" :rightList="rightList" :ValueZoneSwiper="ValueZoneSwiper" v-if="userType == 1">
-      </ServIces>
-      <RankingList v-if="userType === 2" />
-    </view>
+      <view class="home-ranking" :class="{ 'no-margin': userType === 2 }">
+        <ServIces :leftList="leftList" :rightList="rightList" :ValueZoneSwiper="ValueZoneSwiper" v-if="userType == 1">
+        </ServIces>
+        <RankingList v-if="userType === 2" />
+      </view>
 
-    <up-loadmore style="margin-top: 40rpx" :status="loadmoreInfo.status" :loadmoreText="loadmoreInfo.loadingText"
-      :loadingText="loadmoreInfo.loadmoreText" :nomoreText="loadmoreInfo.nomoreText" @loadmore="handleLoadmore"
-      v-if="userType == 1" />
+      <up-loadmore style="margin-top: 40rpx" :status="loadmoreInfo.status" :loadmoreText="loadmoreInfo.loadingText"
+        :loadingText="loadmoreInfo.loadmoreText" :nomoreText="loadmoreInfo.nomoreText" @loadmore="handleLoadmore"
+        v-if="userType == 1" />
+    </view>
 
     <custom-tab-bar page="home" class="customTabBar" />
 
@@ -366,6 +368,16 @@ onUnload(() => { })
   }
 }
 
+// 轮播图下的圆角样式
+.home-Wrapper{
+  position: absolute;
+  top: 542rpx;
+  width: 100%;
+  border-radius: 20rpx 20rpx 0rpx 0rpx;
+  overflow: hidden;
+  background: #FFF9F3;
+}
+
 /* 底部安全区域 */
 .safe-area-bottom {
   height: 150rpx;

pages/login.vue

@@ -1,50 +1,33 @@
 <template>
   <view class="normal-login-container">
-    <image
-      src="/static/login13785@1x.png"
-      mode="widthFix"
-      class="wave-img"
-    ></image>
-
-    <view
-      class="logo-content"
-      :style="`margin-top: ${globalData.navBarHeight}px`"
-    >
+    <image src="/static/login13785@1x.png" mode="widthFix" class="wave-img"></image>
+
+    <view class="logo-content" :style="`margin-top: ${globalData.navBarHeight}px`">
       <image :src="imagePath" mode="aspectFit" class="logo-image"></image>
       <text class="title">金邻助家</text>
     </view>
 
-    <image
-      src="/static/13779@1x.png"
-      mode="widthFix"
-      class="house-illustration"
-    ></image>
+
 
     <view class="slogan-content">
       <text class="slogan-text">着力打造全国居家服务行业标准</text>
       <text class="slogan-text">和建立综合信用评价体系</text>
     </view>
 
+    <image src="/static/13779@1x.png" mode="widthFix" class="house-illustration"></image>
+
     <view class="actions-container">
-      <up-button @click="handleLogin" :customStyle="WeChat"
-        >微信授权登录</up-button
-      >
+      <up-button @click="handleLogin" :customStyle="WeChat">微信授权登录</up-button>
       <view class="xieyi text-center">
         <up-checkbox-group v-model="checkboxValue">
-          <up-checkbox
-            label="我已认真阅读、理解并同意"
-            name="agree"
-            usedAlone
-            @change="onCheckboxChange"
-            class="text-grey1"
-          >
+          <up-checkbox label="我已认真阅读、理解并同意" name="agree" usedAlone @change="onCheckboxChange" class="text-grey1">
           </up-checkbox>
         </up-checkbox-group>
-        
+
         <!-- 备用方案：使用原生checkbox -->
         <!-- <checkbox :checked="checkboxValue.value" @change="onNativeChange" style="transform:scale(0.7)" />
         <text class="text-grey1">我已认真阅读、理解并同意</text> -->
-        
+
         <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
         <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
       </view>
@@ -95,7 +78,7 @@ onLoad((options) => {
       console.log('从二维码获取参数:', loginForm.referrerType, loginForm.referrerId)
     }
   }
-  
+
   // 如果有直接传入的参数也可以获取
   if (options.referrerType) {
     loginForm.referrerType = options.referrerType
@@ -179,12 +162,12 @@ const handleLogin = async () => {
           title: '系统暂未开放',
         })
       }
-      
+
       loginForm.code = res.code
-      
+
       // 打印当前登录信息
       console.log('登录信息:', loginForm)
-      
+
       // 获取用户信息
       uni.getUserInfo({
         success: (res) => {
@@ -214,7 +197,7 @@ const pwdLogin = async () => {
 // 登录成功后，处理函数
 const loginSuccess = () => {
   store.dispatch('GetInfo').then((res) => {
-		console.log("TCL: loginSuccess -> res", res)
+    console.log("TCL: loginSuccess -> res", res)
     console.log(store.state.user.userOrWorker, '>>>>99')
     // if (store.state.user.userOrWorker == 0) {
     //   uni.reLaunch({
@@ -281,6 +264,7 @@ const onCheckboxChange = (value) => {
   background: linear-gradient(156deg, #f5c954 -4%, #f66c44 110%);
   position: relative;
   overflow-x: hidden;
+
   .wave-img {
     position: absolute;
     top: 0;
@@ -288,6 +272,7 @@ const onCheckboxChange = (value) => {
     width: 100vw;
     height: 100vh;
   }
+
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -299,28 +284,30 @@ const onCheckboxChange = (value) => {
   align-items: center;
   position: relative;
   z-index: 1;
+
   .logo-image {
-    width: 90px;
-    height: 78px;
+    width: 232rpx;
+    height: 201rpx;
     margin-top: 47rpx;
     margin-bottom: -10rpx;
     margin-right: 300rpx;
     margin-left: 300rpx;
   }
+
   .title {
-    width: 184rpx;
-    height: 60rpx;
-    font-family: Poppins;
-    font-size: 46rpx;
-    font-weight: 400;
-    line-height: 60rpx;
+    width: 360rpx;
+    height: 128rpx;
+  font-family: Poppins;
+    font-size: 90rpx;
+    font-weight: 600;
+    line-height: 127.81rpx;
     letter-spacing: normal;
-    color: #ffffff;
+    color: #FFFFFF;
     z-index: 1;
     margin-top: 0;
-    margin-bottom: 77rpx;
-    margin-right: 300rpx;
-    margin-left: 300rpx;
+    margin-bottom: 82rpx;
+    margin-right: 195rpx;
+    margin-left: 195rpx;
   }
 }
 
@@ -328,17 +315,18 @@ const onCheckboxChange = (value) => {
   width: 720rpx;
   height: 334rpx;
   margin-top: 0;
-  margin-bottom: 50rpx;
+  margin-bottom: 78rpx;
   margin-right: 136rpx;
   margin-left: 136rpx;
 }
 
 .slogan-content {
   margin-top: 0;
-  margin-bottom: 380rpx;
+  margin-bottom: 235rpx;
   margin-right: 300rpx;
   margin-left: 300rpx;
   z-index: 1;
+
   .slogan-text {
     display: flex;
     flex-direction: column;