新增：列表图片为空时候的占位图，列表图片添加懒加载

src/components/common/Image.vue

@@ -0,0 +1,39 @@
+<template>
+  <van-image class="j-image" :src="src" lazy-load>
+    <template v-slot:loading>
+      <van-loading type="spinner" size="20" />
+    </template>
+    <template v-slot:error>
+      <img src="@/assets/image/img-404.jpg" />
+    </template>
+  </van-image>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator'
+import { Image as VanImage, Loading } from 'vant'
+
+// @ is an alias to /src
+@Component({
+  components: {
+    [VanImage.name]: VanImage,
+    [Loading.name]: Loading
+  }
+})
+export default class Empty extends Vue {
+  @Prop({ default: '' }) src: string | any;
+}
+</script>
+
+<style lang="scss">
+.j-image {
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/main.ts

@@ -4,14 +4,14 @@ import router from './router'
 import store from './store'
 import '@/utils/'
 import { Component } from 'vue-property-decorator'
-import { Toast } from 'vant'
+import { Toast, Lazyload } from 'vant'
 import VueBus from './vue_bus'
 
 Component.registerHooks(['beforeRouteEnter', 'beforeRouteLeave', 'beforeRouteUpdate'])
 Toast.setDefaultOptions({ getContainer: '#app' })
 
 Vue.config.productionTip = false
-Vue.use(Toast).use(VueBus)
+Vue.use(Toast).use(Lazyload).use(VueBus)
 
 new Vue({
   router,

src/views/buy/Buy.vue

@@ -201,7 +201,7 @@ export default class BuyReport extends Vue {
       text: '邮箱格式输入错误'
     },
     phone: {
-      // 新曾19*号段
+      // 新增19*号段
       reg: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57]|19[0-9])[0-9]{8}$/,
       text: '手机号格式输入错误'
     },

src/views/main/Home.vue

@@ -14,7 +14,7 @@
         <ul class="list">
           <li class="item" v-for="item in listState.list" :key="item.id" @click="goDetail(item)">
             <div class="item-img">
-              <img :src="item.img" alt="">
+              <j-image :src="item.img" />
             </div>
             <div class="item-cont">
               <p class="ellipsis-2 title">{{item.title}}</p>
@@ -41,12 +41,14 @@ import { Component, Vue } from 'vue-property-decorator'
 import { mapState, mapMutations, mapActions } from 'vuex'
 import { PullRefresh, List, Toast } from 'vant'
 import Empty from '@/components/common/Empty.vue'
+import JImage from '@/components/common/Image.vue'
 @Component({
   name: 'home',
   components: {
     [PullRefresh.name]: PullRefresh,
     [List.name]: List,
-    Empty
+    Empty,
+    JImage
   },
   methods: {
     ...mapState('home', {
@@ -192,13 +194,8 @@ export default class Home extends Vue {
         .item-img{
           width: 80px;
           height: 80px;
-          border-radius: 4px;
           margin-right: 16px;
           overflow: hidden;
-          img{
-            width: 100%;
-            height: 100%;
-          }
         }
         .item-cont{
           flex: 1;