lazy

public/meta.js

@@ -1 +1 @@
-window.www_version = 1123
+window.www_version = 1124

src/components/CommissionItem.vue

@@ -5,9 +5,7 @@
             <div class="num">{{ $t('distribution.commission') }}: +{{ detail.amount }}</div>
         </div>
         <div class="order">
-            <ion-thumbnail class="cover">
-                <img :src="detail.order.pic[0]" />
-            </ion-thumbnail>
+            <van-image :src="detail.order.pic[0]" class="cover" radius="2" fit="cover" lazy-load> </van-image>
             <div class="info">
                 <div class="name">
                     {{ getLocaleString(detail.order.name) }}
@@ -56,7 +54,7 @@ const props = defineProps({
         .avatar {
             width: 24px;
             height: 24px;
-            --border-radius: 2px;
+            border-radius: 2px;
         }
         .name {
             flex-grow: 1;

src/components/OrderItem.vue

@@ -12,7 +12,7 @@
         </div>
 
         <div class="order-content" @click="goDetail">
-            <van-image class="suk-img" width="80" height="80" fit="cover" :src="pic" />
+            <van-image class="suk-img" width="80" height="80" fit="cover" :src="pic" lazy-load />
 
             <div class="order-text">
                 <div class="van-ellipsis text1">{{ getLocaleString(productInfo.name) }}</div>

src/components/ProductItem.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="product-info" :class="{ product2: list }" @click="goDetail">
-        <van-image :width="width" :height="width" fit="cover" :src="getImg(info.pic)" />
+        <van-image :width="width" :height="width" fit="cover" :src="getImg(info.pic)" lazy-load />
         <div class="img_box" v-if="info.status === 'SOLD_OUT'" :style="{ width: width + 'px', height: width + 'px' }">
             <img src="@/assets/solded.png" alt="" />
         </div>

src/components/ProductItemSmall.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="product-info" :class="{ product2: list }" @click="goDetail">
-        <van-image width="calc(50vw - 24px)" height="calc(50vw - 24px)" fit="cover" :src="getImg(info.pic)" />
+        <van-image width="calc(50vw - 24px)" height="calc(50vw - 24px)" fit="cover" :src="getImg(info.pic)" lazy-load />
         <div class="img_box" v-if="info.status === 'SOLD_OUT'" :style="{ width: width + 'px', height: width + 'px' }">
             <img src="@/assets/solded.png" alt="" />
         </div>

src/main.js

@@ -17,7 +17,7 @@ import { useBackButton } from '@ionic/vue'
 import { SplashScreen } from '@capacitor/splash-screen'
 // import { Openinstall } from 'capacitor-openinstall'
 import { AppsFlyer, AFConstants } from 'appsflyer-capacitor-plugin'
-import { Locale as VantLocale } from 'vant'
+import { Locale as VantLocale, Lazyload } from 'vant'
 import vantEnUS from 'vant/es/locale/lang/en-US'
 import { useStorage } from '@vueuse/core'
 import { init as initEruda } from '@/utils/console'
@@ -75,6 +75,7 @@ app.mixin(common)
 const packageSynced = ref(false)
 app.provide('packageSynced', packageSynced)
 VantLocale.use('en-US', vantEnUS)
+app.use(Lazyload)
 
 // ionic components
 Object.keys(IonComponents).forEach(key => {