更新样式

src/views/member-center/index.module.less

@@ -170,7 +170,10 @@
     background: #ffffff;
     border-radius: 12px;
     border: 1px solid #e5e5e5;
-    margin-right: 10px;
+    margin-left: 10px;
+    &:first-child {
+      margin-left: 0;
+    }
     .title {
       font-size: 14px;
       font-weight: 500;
@@ -220,7 +223,7 @@
         position: absolute;
         top: 0;
         right: 0;
-        border-radius: 0 12px 0 12px;
+        border-radius: 0 10px 0 10px;
       }
     }
   }

src/views/shop-mall/components/TheHomeHeader/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref } from 'vue'
+import { defineComponent, nextTick, onMounted, ref } from 'vue'
 import styles from './index.module.less'
 
 import IconMall from '../../images/icon-mall.png'
@@ -10,12 +10,14 @@ import IconOrder from '../../images/icon-order.png'
 import { Badge, Popover } from 'vant'
 import { postMessage } from '@/helpers/native-message'
 import { cartCount } from '../../shop-mall'
+import { useRect } from '@vant/use'
 
 export default defineComponent({
   name: 'TheHomeHeader',
-  emits: ['cart', 'more', 'search'],
+  emits: ['cart', 'more', 'search', 'headerDom'],
   setup(props, { emit }) {
     const navBarHeight = ref(sessionStorage.getItem('navHeight'))
+    const homeHeaderDom = ref(null)
     const init = () => {
       // 设置是否显示导航栏 0 显示 1 不显示
       postMessage({ api: 'setBarStatus', content: { status: 0 } })
@@ -37,13 +39,20 @@ export default defineComponent({
       )
     }
 
+    onMounted(() => {
+      nextTick(() => {
+        const { height } = useRect(homeHeaderDom as any)
+        emit('headerDom', height)
+      })
+    })
+
     const popoverShow = ref(false)
     const actions = [
       { text: '我的订单', icon: IconOrder, url: '/goodsOrder' },
       { text: '我的地址', icon: IconLocation, url: '/' }
     ]
     return () => (
-      <div class={styles.theHomeHeader}>
+      <div class={styles.theHomeHeader} ref={homeHeaderDom}>
         <div
           style={{ height: navBarHeight.value + 'px', background: '#fff' }}
         ></div>

src/views/shop-mall/index.module.less

@@ -1,8 +1,8 @@
-.shopMall{
-  max-width: 750PX;
+.shopMall {
+  max-width: 750px;
   margin: 0 auto;
 }
-.hotContent{
+.hotContent {
   padding: 11px 14px 0 14px;
   background-color: #fff;
   border-radius: 0 0 18px 18px;
@@ -21,16 +21,16 @@
     margin-right: 5px;
   }
 }
-.iconBadge{
-  :global{
-    .van-badge{
+.iconBadge {
+  :global {
+    .van-badge {
       border: none;
     }
   }
 }
 .searchBox {
   :global {
-    .van-search{
+    .van-search {
       padding-bottom: 0;
     }
     .van-search .van-search__content {
@@ -39,7 +39,6 @@
   }
 }
 .swipe {
-  
   height: 35.2vmin;
   border-radius: 10px;
   overflow: hidden;
@@ -47,24 +46,24 @@
     height: 100%;
     width: 100%;
   }
-  :global{
-    .van-swipe__indicators{
+  :global {
+    .van-swipe__indicators {
       right: 10px;
       left: initial;
     }
-    .van-swipe__indicator{
-      transition: width .3s;
+    .van-swipe__indicator {
+      transition: width 0.3s;
     }
-    .van-swipe__indicator--active{
+    .van-swipe__indicator--active {
       width: 12px;
       border-radius: 4px;
     }
   }
 }
 
-.tabs{
-  :global{
-    .van-tab{
+.tabs {
+  :global {
+    .van-tab {
       height: 30px;
       padding: 0 14px;
       border-radius: 6px;
@@ -73,19 +72,23 @@
       background-color: #fff;
       margin-right: 10px;
     }
-    .van-tabs__wrap{
+    .van-tabs__wrap {
       height: initial !important;
       padding-top: 14px;
       padding-bottom: 14px;
+      background-color: #f6f8f9;
+    }
+    .van-sticky--fixed {
+      box-shadow: 10px 10px 10px var(--box-shadow-color);
     }
-    .van-tab--active{
-      background-color: #D9FFF8;
+    .van-tab--active {
+      background-color: #d9fff8;
       color: var(--van-primary);
     }
-    .van-tabs__nav{
+    .van-tabs__nav {
       padding: 0 4px 0 14px !important;
     }
-    .van-tabs__line{
+    .van-tabs__line {
       display: none;
     }
   }

src/views/shop-mall/index.tsx

@@ -99,30 +99,26 @@ export default defineComponent({
     },
     openWebView(url: string): void {
       try {
-        
-      
-      let origin = location.origin + location.pathname + '#'
-      if (!url) return
+        const origin = location.origin + location.pathname + '#'
+        if (!url) return
 
-      if (url.indexOf('http') < 0) {
-        url = origin + url
-      }
-      console.log('跳转url:', url)
-      if (!browser().isApp) {
-        location.href = url
-        return
-      }
-      postMessage({
-        api: 'openWebView',
-        content: {
-          url: url,
-          orientation: 1,
-          isHideTitle: false
+        if (url.indexOf('http') < 0) {
+          url = origin + url
         }
-      })
-    } catch (error) {
-        
-    }
+        console.log('跳转url:', url)
+        if (!browser().isApp) {
+          location.href = url
+          return
+        }
+        postMessage({
+          api: 'openWebView',
+          content: {
+            url: url,
+            orientation: 1,
+            isHideTitle: false
+          }
+        })
+      } catch (error) {}
     }
   },
   render() {
@@ -131,9 +127,13 @@ export default defineComponent({
         <TheHomeHeader
           onCart={() => this.openWebView('/cart')}
           onSearch={() => this.openWebView('/goodsList?input=focus')}
+          onHeaderDom={(height: number) => {
+            console.log(height, 'height')
+            this.height = height + 'px'
+          }}
           onMore={action => {
-            if(!action) return
-            if (action.text == '我的地址'){
+            if (!action) return
+            if (action.text == '我的地址') {
               postMessage({
                 api: 'setAddress',
                 content: {}