feat(store): scroll-driven search bar style; shop brand layout; image bg

- Store index: wrap main content in ScrollView; toggle .search--solid when
  scrollTop > 15 (detail.scrollTop); white bg + shadow + search block border
- SpPage children height for search-scroll; SpPoweredBy in-page with showpoweredBy false
- CompShopBrand: flex-shrink 0 on logo/button, min-width 0 on title area, 2-line clamp name
- SpImage container: restore transparent placeholder background

Made-with: Cursor

src/components/sp-image/index.scss

@@ -5,7 +5,7 @@
 .sp-image-container {
   position: relative;
   overflow: hidden; /* 防止圆角溢出 */
-  background-color: #fff;
+  background-color: transparent;
   height: 100%;
   display: flex;
   align-items: center;

src/subpages/store/comps/comp-shopbrand.scss

@@ -9,23 +9,36 @@
   padding-bottom: 20px;
   .shop-brand-hd {
     display: flex;
+    align-items: flex-start;
     padding: 16px;
-    height: 80px;
+    min-height: 80px;
   }
   .store-logo {
     position: relative;
     top: -60px;
+    flex-shrink: 0;
     background: #ffffff;
     border-radius: 16px;
     overflow: hidden;
   }
   .store-info {
     flex: 1;
+    min-width: 0;
     margin-left: 16px;
     .store-name {
+      min-width: 0;
       font-size: 32px;
       font-weight: 600;
       color: #222222;
+      height: 64px;
+      line-height: 32px;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      word-break: break-all;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: normal;
     }
   }
   .store-score-desc {
@@ -43,6 +56,7 @@
   }
 
   .btn-attention {
+    flex-shrink: 0;
     padding: 0 10px;
     height: 44px;
     line-height: 44px;

src/subpages/store/index.js

@@ -9,11 +9,11 @@ import Taro, {
   useDidShow,
   getCurrentInstance
 } from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
+import { View, Text, ScrollView } from '@tarojs/components'
 import { useSelector, useDispatch } from 'react-redux'
 import { SG_ROUTER_PARAMS } from '@/consts'
 import S from '@/spx'
-import { SpFloatMenuItem, SpPage, SpSearch, SpRecommend, SpSkuSelect, SpLogin } from '@/components'
+import { SpFloatMenuItem, SpPage, SpSearch, SpRecommend, SpSkuSelect, SpLogin, SpPoweredBy } from '@/components'
 import api from '@/api'
 import doc from '@/doc'
 import * as shopDoc from '@/doc/shop'
@@ -53,7 +53,9 @@ const initState = {
   selectType: 'picker',
   statusBarHeight: '',
   open: false,
-  hideClose: true
+  hideClose: true,
+  /** 页面滚动超过 20px 时搜索条白底 */
+  searchSolidBg: false
 }
 
 function StoreIndex() {
@@ -77,7 +79,7 @@ function StoreIndex() {
     selectType,
     statusBarHeight,
     open,
-    hideClose
+    searchSolidBg
   } = state
 
   const dispatch = useDispatch()
@@ -345,23 +347,9 @@ function StoreIndex() {
       loading={loading}
       scrollToTopBtn
       ref={pageRef}
+      showpoweredBy={false}
       // navigateMantle
       pageConfig={pageData?.base}
-      // renderTitle={
-      //   fixedTop && (
-      //     <>
-      //     <SpSearch
-      //       isFixTop={searchComp.config.fixTop}
-      //       onClick={() => {
-      //         Taro.navigateTo({
-      //           url: `/subpages/store/item-list?dtid=${distributorId}`
-      //         })
-      //       }}
-      //     />
-      //     </>
-
-      //   )
-      // }
       renderFloat={
         <View>
           <SpFloatMenuItem
@@ -382,8 +370,23 @@ function StoreIndex() {
       }
       renderFooter={<CompTab popFrame={popFrame} />}
     >
+      <ScrollView
+        scrollY
+        className='search-scroll'
+        style={{ height: `100%` }}
+        onScroll={(e) => {
+          const st = e?.detail?.scrollTop ?? 0
+          setState((draft) => {
+            draft.searchSolidBg = st > 15
+          })
+        }}
+      >
       {searchComp && (
-        <View className='search'>
+        <View
+          className={classNames('search', {
+            'search--solid': searchSolidBg
+          })}
+        >
           <SpSearch
             // isFixTop={searchComp?.config?.fixTop}
             info={searchComp}
@@ -438,7 +441,9 @@ function StoreIndex() {
       ) : (
         <Categorys addPurchases={addPurchases} dtid={distributorId} />
       )}
-
+      <View className='sp-page__powered-by w-full'>
+        <SpPoweredBy />
+      </View>
       {/* Sku选择器 */}
       <MSpSkuSelect
         open={skuPanelOpen}
@@ -469,6 +474,7 @@ function StoreIndex() {
       />
 
       <SpLogin ref={loginRef} />
+      </ScrollView>
     </SpPage>
   )
 }

src/subpages/store/index.scss

@@ -2,25 +2,24 @@
  * Copyright © ShopeX （http://www.shopex.cn）. All rights reserved.
  * See LICENSE file for license details.
  */
+
 .sp-page.ipx .sp-page__footer {
   height: 160px !important;
 }
-// .at-float-layout .layout-body {
-//   font-size: 28px;
-//   padding:0;
-//   height: 556px;
-// }
-.sale-price {
-}
+
+
+
 .sale-price {
   .sp-price__symbol {
     color: var(--color-primary);
     font-size: 28px;
   }
+
   .sp-price__int {
     color: var(--color-primary);
     font-size: 42px;
   }
+
   .sp-price__decimal {
     color: var(--color-primary);
     font-size: 28px;
@@ -28,40 +27,71 @@
 }
 
 .page-store-index {
+  .sp-page__body-children {
+    height: 100%;
+
+    .search-scroll {
+      height: 100%;
+    }
+  }
+
   .search {
     width: 100%;
     position: fixed;
     left: 0;
     right: 0;
     z-index: 2;
-    background: transparent;
+    height: 120px;
+    transition: background-color 0.2s ease;
+    background: transparent !important;
+
+    &--solid {
+      background: #fff !important;
+      box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1) !important;
+
+      .sp-search {
+        padding: 0 15px;
+
+        &-block {
+          border: 1PX solid #000;
+          box-sizing: border-box;
+        }
+      }
+    }
   }
 
   .sp-search {
     width: 100%;
     padding: 0 15px;
   }
+
   .header-block {
     padding-top: 150px;
     // background: transparent;
     // box-shadow: inset 0px -242px 700px 0px rgba(255, 255, 255, 0.4);
   }
+
   .header-block-pad {
     padding-top: 80px;
   }
+
   .icon-huiyuanzhongxin {
     font-size: 38px;
   }
+
   .icon-gouwuche {
     font-size: 38px;
   }
+
   .title-container {
     justify-content: flex-start !important;
+
     .sp-search {
       width: 75%;
       background: transparent;
     }
   }
+
   .switchs {
     position: sticky;
     z-index: 99;
@@ -72,55 +102,67 @@
     color: #222222;
     line-height: 50px;
     padding: 20px 24px;
+
     .switching {
       font-weight: 500;
       // font-size: 28px;
       color: #444444;
     }
+
     .switchings {
       border-bottom: 8px solid var(--color-primary);
     }
+
     .switched {
       margin-left: 60px;
     }
   }
+
   .cart-layout {
     .sp-price__symbol {
       color: #e50113;
       font-size: 28px;
     }
+
     .sp-price__int {
       color: #e50113;
       font-size: 42px;
     }
+
     .sp-price__decimal {
       color: #e50113;
       font-size: 28px;
     }
   }
+
   .sp-page__footer {
     .sp-price__symbol {
       color: #e50113;
       font-weight: 600;
     }
+
     .sp-price__int {
       color: #e50113;
       font-weight: 600;
     }
+
     .sp-price__decimal {
       color: #e50113;
       font-weight: 600;
     }
   }
+
   .comp-shop-brand-cart {
     .sp-price__symbol {
       color: #e50113;
       font-weight: 600;
     }
+
     .sp-price__int {
       color: #e50113;
       font-weight: 600;
     }
+
     .sp-price__decimal {
       color: #e50113;
       font-weight: 600;