补充profile页面功能区功能

pages/main/profile.uvue

@@ -137,62 +137,98 @@
         </view>
 
         <view class="my-services service-card">
-          <scroll-view class="service-scroll" direction="horizontal" scroll-x="true" :scroll-y="false" :show-scrollbar="false" scroll-with-animation>
-            <view class="service-row">
-              <view class="service-item" @click="goToMessages">
-                <view class="service-icon-wrap">
-                  <text class="service-text-icon">聊</text>
-                  <text v-if="serviceCounts.unreadMessages > 0" class="service-badge">{{ serviceCounts.unreadMessages }}</text>
+          <view class="service-scroll-wrap">
+            <!-- #ifdef APP -->
+            <scroll-view
+              class="service-scroll"
+              direction="horizontal"
+              scroll-x="true"
+              :scroll-y="false"
+              :show-scrollbar="false"
+              scroll-with-animation
+              @scroll="onServiceScroll"
+            >
+            <!-- #endif -->
+            <!-- #ifdef H5 || MP -->
+            <scroll-view
+              class="service-scroll"
+              direction="horizontal"
+              scroll-x="true"
+              :scroll-y="false"
+              :show-scrollbar="false"
+              scroll-with-animation
+              @scroll="onServiceScroll"
+            >
+            <!-- #endif -->
+              <view class="service-row">
+                <view class="service-item" @click="goToMessages">
+                  <view class="service-icon-wrap">
+                    <text class="service-text-icon">聊</text>
+                    <text v-if="serviceCounts.unreadMessages > 0" class="service-badge">{{ serviceCounts.unreadMessages }}</text>
+                  </view>
+                  <text class="service-name">消息中心</text>
                 </view>
-                <text class="service-name">消息中心</text>
-              </view>
-              <view class="service-item" @click="goToCoupons">
-                <view class="service-icon-wrap">
-                  <image class="service-icon-img" src="/static/consumer/coupon.png" mode="aspectFit" />
-                  <text v-if="serviceCounts.coupons > 0" class="service-badge">{{ serviceCounts.coupons }}</text>
+                <view class="service-item" @click="goToCoupons">
+                  <view class="service-icon-wrap">
+                    <image class="service-icon-img" src="/static/consumer/coupon.png" mode="aspectFit" />
+                    <text v-if="serviceCounts.coupons > 0" class="service-badge">{{ serviceCounts.coupons }}</text>
+                  </view>
+                  <text class="service-name">优惠券</text>
                 </view>
-                <text class="service-name">优惠券</text>
-              </view>
-              <view class="service-item" @click="goToAddress">
-                <view class="service-icon-wrap">
-                  <text class="service-text-icon">址</text>
+                <view class="service-item" @click="goToFollowedShops">
+                  <view class="service-icon-wrap">
+                    <image class="service-icon-img" src="/static/consumer/store.png" mode="aspectFit" @error="shopIconError = true" v-if="!shopIconError" />
+                    <text v-if="shopIconError" class="service-text-icon">店</text>
+                  </view>
+                  <text class="service-name">店铺关注</text>
                 </view>
-                <text class="service-name">收货地址</text>
-              </view>
-              <view class="service-item" @click="goToFavorites">
-                <view class="service-icon-wrap">
-                  <image class="service-icon-img" src="/static/consumer/collection.png" mode="aspectFit" />
-                  <text v-if="serviceCounts.favorites > 0" class="service-badge">{{ serviceCounts.favorites }}</text>
+                <view class="service-item" @click="goToFavorites">
+                  <view class="service-icon-wrap">
+                    <image class="service-icon-img" src="/static/consumer/collection.png" mode="aspectFit" />
+                    <text v-if="serviceCounts.favorites > 0" class="service-badge">{{ serviceCounts.favorites }}</text>
+                  </view>
+                  <text class="service-name">商品收藏</text>
                 </view>
-                <text class="service-name">商品收藏</text>
-              </view>
-              <view class="service-item" @click="goToFootprint">
-                <view class="service-icon-wrap">
-                  <image class="service-icon-img" src="/static/consumer/footprint.png" mode="aspectFit" />
+                <view class="service-item" @click="goToFootprint">
+                  <view class="service-icon-wrap">
+                    <image class="service-icon-img" src="/static/consumer/footprint.png" mode="aspectFit" />
+                  </view>
+                  <text class="service-name">浏览足迹</text>
                 </view>
-                <text class="service-name">浏览足迹</text>
-              </view>
-              <view class="service-item" @click="goToRefund">
-                <view class="service-icon-wrap">
-                  <text class="service-text-icon">退</text>
+                <view class="service-item" @click="goToRefund">
+                  <view class="service-icon-wrap">
+                    <text class="service-text-icon">退</text>
+                  </view>
+                  <text class="service-name">退款售后</text>
                 </view>
-                <text class="service-name">退款售后</text>
-              </view>
-              <view class="service-item" @click="goToOrderReviews">
-                <view class="service-icon-wrap">
-                  <text class="service-text-icon">评</text>
+                <view class="service-item" @click="goToOrderReviews">
+                  <view class="service-icon-wrap">
+                    <text class="service-text-icon">评</text>
+                  </view>
+                  <text class="service-name">我的评价</text>
                 </view>
-                <text class="service-name">我的评价</text>
-              </view>
-              <view class="service-item" @click="goToFollowedShops">
-                <view class="service-icon-wrap">
-                  <image class="service-icon-img" src="/static/consumer/store.png" mode="aspectFit" />
+                <view class="service-item" @click="goToAddress">
+                  <view class="service-icon-wrap">
+                    <text class="service-text-icon">址</text>
+                  </view>
+                  <text class="service-name">收货地址</text>
                 </view>
-                <text class="service-name">关注店铺</text>
+                <view class="service-row-end-spacer"></view>
               </view>
-              <view class="service-row-end-spacer"></view>
+            <!-- #ifdef APP -->
+            </scroll-view>
+            <!-- #endif -->
+            <!-- #ifdef H5 || MP -->
+            </scroll-view>
+            <!-- #endif -->
+            <view class="service-right-fade"></view>
+          </view>
+
+          <view class="service-scroll-indicator">
+            <view class="service-scroll-track">
+              <view class="service-scroll-thumb" :style="getServiceThumbStyle()"></view>
             </view>
-          </scroll-view>
+          </view>
         </view>
 
         <GuessYouLike
@@ -342,6 +378,9 @@ export default {
       pageWindowHeight: 0,
       isLoggedIn: false,
       guessLoadMoreKey: 0,
+      serviceScrollLeft: 0,
+      serviceScrollMax: 160,
+      shopIconError: false,
       statusBarHeight: 0,
       isAndroidApp: false,
       capsuleTop: 0,
@@ -582,6 +621,28 @@ export default {
       return
     },
 
+    onServiceScroll(event: any) {
+      const detailObj = this.toRecommendScrollJson(event.detail)
+      if (detailObj == null) {
+        return
+      }
+      const scrollLeft = this.readRecommendScrollMetric(detailObj, 'scrollLeft')
+      this.serviceScrollLeft = scrollLeft
+    },
+
+    getServiceThumbStyle(): string {
+      const ratio = this.serviceScrollLeft / this.serviceScrollMax
+      const maxTranslate = 20
+      let translateX = ratio * maxTranslate
+      if (translateX < 0) {
+        translateX = 0
+      }
+      if (translateX > maxTranslate) {
+        translateX = maxTranslate
+      }
+      return 'transform: translateX(' + translateX + 'px);'
+    },
+
     handleGuessProductClick(productId: string) {
       if (productId == null || productId === '') {
         return
@@ -2316,13 +2377,63 @@ export default {
 
 .service-card {
   margin: 12px 14px 0 14px;
-  padding: 14px 0 14px;
+  padding: 14px 0 10px;
   border-radius: 18px;
   background-color: #ffffff;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
   overflow: hidden;
 }
 
+.service-scroll-wrap {
+  position: relative;
+  width: 100%;
+}
+
+.service-scroll {
+  width: 100%;
+  box-sizing: border-box;
+  white-space: nowrap;
+  position: relative;
+  z-index: 2;
+  height: 60px;
+}
+
+.service-right-fade {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 24px;
+  pointer-events: none;
+  z-index: 1;
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+}
+
+.service-scroll-indicator {
+  height: 10px;
+  margin-top: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.service-scroll-track {
+  width: 38px;
+  height: 4px;
+  border-radius: 4px;
+  background-color: #e5e5e5;
+  overflow: hidden;
+}
+
+.service-scroll-thumb {
+  width: 18px;
+  height: 4px;
+  border-radius: 4px;
+  background-color: #e4393c;
+  transition-property: transform;
+  transition-duration: 120ms;
+}
+
 .service-header {
   padding-left: 16px;
   padding-right: 16px;
@@ -2339,12 +2450,6 @@ export default {
   color: #222222;
 }
 
-.service-scroll {
-  width: 100%;
-  box-sizing: border-box;
-  white-space: nowrap;
-}
-
 .service-row {
   display: inline-flex;
   flex-direction: row;
@@ -2352,6 +2457,7 @@ export default {
   align-items: flex-start;
   padding-left: 12px;
   padding-right: 18px;
+  width: 640px;
 }
 
 .service-item {