bug修改

components/LdmCity/index.vue

@@ -174,6 +174,7 @@ export default {
         max-width: 400px;
         max-height: 240px;
         position: absolute;
+        z-index: 99;
         padding-top: 4px;
         border-radius: 4px;
         box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
@@ -288,6 +289,7 @@ export default {
     .option-group {
       position: relative;
       width: 100%;
+      z-index: 9;
 
       .options {
         position: absolute;

components/LdmEmpty/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="ldm-empty flex justify-center items-center">
+    <img :src="imageSrc" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'simple-empty',
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    ...mapGetters(['static']),
+    imageSrc() {
+      return this.static + '/' + this.name
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.ldm-empty {
+  width: 100%;
+  padding: 16px 0;
+  img {
+    display: block;
+  }
+}
+</style>

components/LdmLogin/index.vue

@@ -89,7 +89,7 @@ export default {
         // 发送验证码
         const res = await this.$http.api.sendVerifyCode({
           mobile: this.formData.mobile,
-          authuserId: this.authuserId,
+          authUserId: this.authUserId,
           type: 1,
         })
         this.$toast('验证码已发送')

components/SimpleMapNav/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="simple-map-nav">
+    <van-popup v-model="show" :closeable="true" :position="position">
+      <div class="title">地图导航</div>
+      <div class="popup-content">
+        <van-button
+          class="btn"
+          :size="size"
+          :color="color"
+          :round="round"
+          @click="$emit('click', 'gaode')"
+          >高德地图</van-button
+        >
+        <van-button
+          class="btn"
+          :size="size"
+          :color="color"
+          :round="round"
+          @click="$emit('click', 'baidu')"
+          >百度地图</van-button
+        >
+        <van-button
+          class="btn"
+          :size="size"
+          :color="color"
+          :round="round"
+          @click="$emit('click', 'tx')"
+          >腾讯地图</van-button
+        >
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  props: {
+    color: {
+      type: String,
+      default: '#bc1724',
+    },
+  },
+  computed: {
+    ...mapGetters(['isPc']),
+    position() {
+      return this.isPc ? 'center' : 'bottom'
+    },
+    round() {
+      return !this.isPc
+    },
+    size() {
+      return this.isPc ? 'normal' : 'small'
+    },
+  },
+  data() {
+    return {
+      show: false,
+    }
+  },
+  methods: {
+    close() {
+      this.show = false
+    },
+    open() {
+      this.show = true
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+@media screen and (min-width: 768px) {
+  .simple-map-nav {
+    .title {
+      font-size: 18px;
+      color: #666;
+      text-align: center;
+      padding: 24px 0;
+    }
+    .popup-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 360px;
+      padding: 0 24px 24px;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .simple-map-nav {
+    .title {
+      font-size: 3.6vw;
+      color: #666;
+      text-align: center;
+      padding: 2.4vw 0;
+    }
+    .popup-content {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      padding: 2.4vw;
+
+      ::v-deep {
+        .van-button {
+          width: 100%;
+          margin: 1.2vw 0;
+        }
+      }
+    }
+  }
+}
+</style>

components/SimplePagination/index.vue

@@ -49,7 +49,7 @@ export default {
     display: flex;
     justify-content: center;
 
-    &.theme-black{
+    &.theme-black {
       .van-pagination {
         ::v-deep {
           .van-pagination__item {
@@ -122,8 +122,8 @@ export default {
 }
 
 @media screen and (max-width: 768px) {
-  .van-pagination {
-    .theme-red {
+  .simple-pagination {
+    &.theme-red {
       ::v-deep {
         .van-pagination__prev,
         .van-pagination__next {
@@ -140,7 +140,7 @@ export default {
       }
     }
 
-    .theme-black {
+    &.theme-black {
       ::v-deep {
         .van-pagination__prev,
         .van-pagination__next {

components/SimpleSearch/index.vue

@@ -66,6 +66,10 @@ export default {
       padding-left: 44px;
       box-sizing: border-box;
       color: #fff;
+
+      &::placeholder {
+        color: #ddd;
+      }
     }
   }
 }

components/SimpleSwiper/index.vue

@@ -1,23 +1,21 @@
 <template>
-  <div class="simple-swiper">
-    <swiper ref="mySwiper" :options="swiperOptions">
-      <swiper-slide v-for="(item, index) in imageList" :key="index">
-        <div class="slide"><img class="image" :src="item" /></div>
-      </swiper-slide>
-    </swiper>
-  </div>
+  <swiper class="swiper simple-swiper" :options="swiperOption">
+    <swiper-slide v-for="(item, index) in imageList" :key="index">
+      <img :src="item" class="slide" />
+    </swiper-slide>
+    <div class="swiper-pagination" slot="pagination"></div>
+  </swiper>
 </template>
 
 <script>
-import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
+
 export default {
+  name: 'simple-swiper',
   components: {
     Swiper,
     SwiperSlide,
   },
-  directives: {
-    swiper: directive,
-  },
   props: {
     imageList: {
       type: Array,
@@ -26,32 +24,26 @@ export default {
   },
   data() {
     return {
-      swiperOptions: {
+      swiperOption: {
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true,
+        },
         autoplay: true,
       },
     }
   },
-  computed: {
-    swiper() {
-      return this.$refs.mySwiper.$swiper
-    },
-  },
-  mounted() {
-    console.log('Current Swiper instance object', this.swiper)
-  },
 }
 </script>
 
 <style scoped lang="scss">
 .simple-swiper {
-  width: 100%;
   height: 100%;
-  overflow: hidden;
 
-  .image {
-    display: block;
-    width: 100%;
-    height: 100%;
+  ::v-deep {
+    .swiper-pagination-bullet-active {
+      background: #535353 !important;
+    }
   }
 }
 </style>

layouts/app-ldm.vue

@@ -63,6 +63,9 @@ export default {
         })
         this.$store.commit('supplier/SET_SUPPLIER_INFO', res.data)
         this.$store.commit('user/SET_APPID', res.data.appId)
+        if (res.data.appId) {
+          this.checkAccountType(res.data.appId)
+        }
       } catch (error) {
         console.log(error)
       } finally {
@@ -70,6 +73,17 @@ export default {
       }
     },
 
+    // 校验公众号类型
+    async checkAccountType(appId) {
+      try {
+        // 1订阅号，2服务号
+        const res = this.$http.api.checkAccountType({ appId })
+        this.$store.commit('user/SET_ACCOUNT_TYPE', res.data)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
     // 退出登录
     logout() {
       this.$store.dispatch('user/logout')

layouts/app.vue

@@ -41,7 +41,14 @@ import { isWeChat } from '~/utils/validator'
 import { toAuthorization } from '~/utils'
 export default {
   computed: {
-    ...mapGetters(['userInfo', 'type', 'accessToken', 'authUserId', 'appId']),
+    ...mapGetters([
+      'userInfo',
+      'type',
+      'accessToken',
+      'authUserId',
+      'appId',
+      'accountType',
+    ]),
   },
   head() {
     return {
@@ -89,6 +96,9 @@ export default {
         })
         this.$store.commit('supplier/SET_SUPPLIER_INFO', res.data)
         this.$store.commit('user/SET_APPID', res.data.appId)
+        if (res.data.appId) {
+          this.checkAccountType(res.data.appId)
+        }
       } catch (error) {
         console.log(error)
       } finally {
@@ -96,9 +106,20 @@ export default {
       }
     },
 
+    // 校验公众号类型
+    async checkAccountType(appId) {
+      try {
+        // 1订阅号，2服务号
+        const res = await this.$http.api.checkAccountType({ appId })
+        this.$store.commit('user/SET_ACCOUNT_TYPE', res.data)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
     onLogin() {
       // 在微信浏览器中使用微信授权登录
-      if (isWeChat() && this.appId) {
+      if (isWeChat() && this.appId && this.accountType === 2) {
         const payload = { authUserId: this.authUserId, type: this.type }
         return toAuthorization(this.appId, payload)
       }

nuxt.config.js

@@ -32,7 +32,7 @@ export default {
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
-  css: ['vant/lib/index.css'],
+  css: ['vant/lib/index.css', 'swiper/css/swiper.css'],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: ['@/plugins/vant', '@/plugins/axios', '@/plugins/vue-filters'],

package.json

@@ -31,12 +31,13 @@
   },
   "devDependencies": {
     "@nuxtjs/tailwindcss": "^4.2.1",
+    "cross-env": "^7.0.3",
     "eslint-config-prettier": "^8.3.0",
-    "postcss": "^8.4.4",
+    "node-sass": "^6.0.1",
+    "postcss": "^8.4.12",
+    "postcss-custom-properties": "^12.1.7",
     "prettier": "^2.5.1",
-    "cross-env": "^7.0.3",
     "sass": "^1.49.9",
-    "node-sass": "^6.0.1",
     "sass-loader": "^10.2.1"
   }
 }

pages/_template/app/approve/club/detail.vue

@@ -17,10 +17,11 @@
           <div class="logo"><img :src="clubInfo.logo" /></div>
         </div>
         <div class="section flex justify-between items-center mt-6">
-          <div class="navigation">导航</div>
-          <div class="distance" v-text="'距你' + clubInfo.distance + 'km'">
-            9999km
-          </div>
+          <div class="navigation" @click="onMapNav">导航</div>
+          <div
+            class="distance"
+            v-text="'距你' + clubInfo.distance + 'km'"
+          ></div>
         </div>
       </div>
       <div class="divider"></div>
@@ -46,6 +47,8 @@
         description="暂无已认证设备"
       ></SimpleEmpty>
     </div>
+
+    <SimpleMapNav ref="mapNav" @click="navigation"></SimpleMapNav>
   </div>
 </template>
 
@@ -99,7 +102,9 @@ export default {
     // 获取机构详细信息
     async fetchDetail() {
       try {
-        const res = await this.$http.api.getAuthClubDetail({ authId: this.authId })
+        const res = await this.$http.api.getAuthClubDetail({
+          authId: this.authId,
+        })
         this.clubInfo = { ...this.clubInfo, ...res.data } // 合并
       } catch (error) {
         console.log(error)
@@ -111,8 +116,21 @@ export default {
         this.clubInfo.logo = drawLogo(this.clubInfo.authParty)
       }
     },
+    // 地图导航
+    onMapNav() {
+      this.$refs.mapNav.open()
+    },
     // 导航
-    navigation() {},
+    navigation(type) {
+      const point = this.clubInfo.lngAndLat.split(',')
+      const lng = point[0]
+      const lat = point[1]
+      mapNavigate(
+        { lat, lng, title: this.clubInfo.authParty, address: this.address },
+        type
+      )
+      this.$refs.mapNav.close()
+    },
   },
 }
 </script>
@@ -145,6 +163,13 @@ export default {
     .swiper {
       width: 580px;
       height: 580px;
+      background: #f7f7f7;
+      ::v-deep {
+        img {
+          width: 580px;
+          height: 580px;
+        }
+      }
     }
   }
 
@@ -301,6 +326,13 @@ export default {
   .page-top {
     .swiper {
       height: 100vw;
+
+      background: #f7f7f7;
+      ::v-deep {
+        img {
+          height: 100vw;
+        }
+      }
     }
   }
 

pages/_template/app/approve/club/index.vue

@@ -1,81 +1,88 @@
 <template>
   <div class="page">
-    <div class="page-top flex flex-col justify-center items-center">
-      <img class="logo" :src="supplierInfo.logo" />
-      <div class="mt-2 name">
-        <span v-text="supplierInfo.shopName"></span>
-        <span>官方授权机构</span>
+    <van-list
+      v-model="isLoadingMore"
+      :finished="finished"
+      :immediate-check="false"
+      :finished-text="total ? '没有更多了' : ''"
+      @load="onLoadMore"
+    >
+      <div class="page-top flex flex-col justify-center items-center">
+        <img class="logo" :src="supplierInfo.logo" />
+        <div class="mt-2 name">
+          <span v-text="supplierInfo.shopName"></span>
+          <span>官方授权机构</span>
+        </div>
       </div>
-    </div>
-    <div class="page-content">
-      <!-- 搜索区域 -->
-      <div class="search">
-        <simple-search v-model="listQuery.clubName" @search="onSearch" />
-      </div>
-      <!-- 地区选择 -->
-      <div class="city">
-        <SimpleCity
-          @change="onCityChange"
-          :options="cityList"
-          labelName="name"
-          valueName="id"
-        ></SimpleCity>
-      </div>
-      <!-- 标题 -->
-      <div class="title flex justify-between px-4 pt-8 pb-8 md:px-0">
-        <div>距您最近...</div>
-        <div>共<span v-text="total"></span>家机构</div>
-      </div>
-      <!-- 列表 -->
-      <div class="list">
-        <template v-for="item in list">
-          <div
-            class="section flex justify-between mb-4"
-            :key="item.authId"
-            @click="toDetail(item)"
-          >
-            <img class="cover" :src="item.logo || drawLogo(item.clubName)" />
-            <div class="info">
-              <div class="name" v-text="item.clubName"></div>
-              <div class="mobile">{{ item.mobile || '未知' }}</div>
-              <div class="address">
-                {{ formatAddress(item.area, item.address) }}
+      <div class="page-content">
+        <!-- 搜索区域 -->
+        <div class="search">
+          <simple-search
+            v-model="listQuery.clubName"
+            @search="onSearch"
+            placeholder="搜索机构"
+          />
+        </div>
+        <!-- 地区选择 -->
+        <div class="city">
+          <SimpleCity
+            @change="onCityChange"
+            :options="cityList"
+            labelName="name"
+            valueName="id"
+          ></SimpleCity>
+        </div>
+        <!-- 标题 -->
+        <div class="title flex justify-between px-4 pt-8 pb-8 md:px-0">
+          <div>距您最近...</div>
+          <div>共<span v-text="total"></span>家机构</div>
+        </div>
+        <!-- 列表 -->
+        <div class="list">
+          <template v-for="item in list">
+            <div
+              class="section flex justify-between mb-4"
+              :key="item.authId"
+              @click="toDetail(item)"
+            >
+              <img class="cover" :src="item.logo || drawLogo(item.clubName)" />
+              <div class="info">
+                <div class="name" v-text="item.clubName"></div>
+                <div class="mobile">{{ item.mobile || '未知' }}</div>
+                <div class="address">
+                  {{ formatAddress(item.area, item.address) }}
+                </div>
+                <div
+                  class="distance"
+                  v-text="item.distance + 'km'"
+                  v-if="item.distance && item.distance !== 99999"
+                ></div>
               </div>
-              <div
-                class="distance"
-                v-text="item.distance + 'km'"
-                v-if="item.distance && item.distance !== 99999"
-              ></div>
             </div>
-          </div>
-        </template>
-        <div class="empty" v-for="i in emptyList" :key="i"></div>
+          </template>
+          <div class="empty" v-for="i in emptyList" :key="i"></div>
+        </div>
+        <!-- 列表为空 -->
+        <SimpleEmpty
+          v-if="!total && !isRequest"
+          name="icon-empty-approve.png"
+          description="敬请期待~"
+        ></SimpleEmpty>
       </div>
-      <!-- 列表为空 -->
-      <SimpleEmpty
-        v-if="!total && !isRequest"
-        name="icon-empty-approve.png"
-        description="敬请期待~"
-      ></SimpleEmpty>
-      <!-- 页码 -->
-      <SimplePagination
-        v-if="total > listQuery.pageSize"
-        :total="total"
-        :pageItems="listQuery.pageSize"
-        @change="onPagiantionChange"
-      ></SimplePagination>
-    </div>
+    </van-list>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import { loactionSelf } from '@/utils/map-utils'
-import { drawLogo } from '@/utils'
+import { drawLogo, debounce } from '@/utils'
 export default {
   layout: 'app',
   data() {
     return {
+      isLoadingMore: true,
+      finished: false,
       isRequest: true,
       list: [],
       listQuery: {
@@ -138,19 +145,21 @@ export default {
       // 获取机构列表
       this.fetchList()
     },
-    // 获取机构列表
-    async fetchList() {
+    fetchList: debounce(async function () {
       try {
+        this.isLoadingMore = true
         const res = await this.$http.api.getAuthClubList(this.listQuery)
         this.total = res.data.total
-        this.list = res.data.list
+        this.list = [...this.list, ...res.data.list]
+        this.finished = !res.data.hasNextPage
       } catch (error) {
         console.log(error)
       } finally {
         this.$toast.clear()
         this.isRequest = false
+        this.isLoadingMore = false
       }
-    },
+    }, 400),
     // 获取地址列表
     fetchCityList() {
       this.$http.api.fetchAllCityList().then((res) => {
@@ -173,11 +182,13 @@ export default {
         }
       })
       this.listQuery.pageNum = 1
+      this.list = []
       this.fetchList()
     },
     // 搜索
     onSearch() {
       this.listQuery.pageNum = 1
+      this.list = []
       this.fetchList()
     },
     // 页码变化
@@ -196,6 +207,11 @@ export default {
       }
       return resutl || '未知'
     },
+    // 加载更多
+    onLoadMore() {
+      this.listQuery.pageNum += 1
+      this.fetchList()
+    },
   },
   beforeDestroy() {
     this.$toast.clear()
@@ -290,6 +306,7 @@ export default {
           position: relative;
           margin-left: 12px;
           .name {
+            width: 228px;
             font-size: 16px;
             color: #101010;
             font-weight: bold;

pages/_template/app/approve/device/index.vue

@@ -1,58 +1,66 @@
 <template>
   <div class="page">
-    <div class="page-top flex flex-col justify-center items-center">
-      <img class="logo" :src="supplierInfo.logo" />
-      <div class="mt-2 name">
-        <span v-text="supplierInfo.shopName"></span>
-        <span>官方认证设备</span>
-      </div>
-    </div>
-    <div class="page-content">
-      <!-- 搜索区域 -->
-      <div class="search">
-        <SimpleSearch v-model="listQuery.productName" @search="onSearch" />
-      </div>
-      <!-- 标题 -->
-      <div class="title px-4 pt-12 pb-6">
-        共<span v-text="total"></span>种设备
-      </div>
-      <!-- 列表 -->
-      <div class="list">
-        <div
-          class="section flex items-center mb-4"
-          v-for="item in list"
-          :key="item.productTypeId"
-          @click="toDetail(item)"
-        >
-          <img class="cover" :src="item.image" />
-          <div class="name" v-text="item.name"></div>
+    <van-list
+      v-model="isLoadingMore"
+      :finished="finished"
+      :immediate-check="false"
+      :finished-text="total ? '没有更多了' : ''"
+      @load="onLoadMore"
+    >
+      <div class="page-top flex flex-col justify-center items-center">
+        <img class="logo" :src="supplierInfo.logo" />
+        <div class="mt-2 name">
+          <span v-text="supplierInfo.shopName"></span>
+          <span>官方授权设备</span>
         </div>
-        <div class="empty" v-for="i in emptyList" :key="'empty-' + i"></div>
       </div>
+      <div class="page-content">
+        <!-- 搜索区域 -->
+        <div class="search">
+          <SimpleSearch
+            v-model="listQuery.productName"
+            @search="onSearch"
+            placeholder="搜索设备"
+          />
+        </div>
+        <!-- 标题 -->
+        <div class="title px-4 pt-12 pb-6">
+          共<span v-text="total"></span>种设备
+        </div>
+        <!-- 列表 -->
+        <div class="list">
+          <div
+            class="section flex items-center mb-4"
+            v-for="item in list"
+            :key="item.productTypeId"
+            @click="toDetail(item)"
+          >
+            <img class="cover" :src="item.image" />
+            <div class="name" v-text="item.name"></div>
+          </div>
+          <div class="empty" v-for="i in emptyList" :key="'empty-' + i"></div>
+        </div>
 
-      <!-- 列表为空 -->
-      <SimpleEmpty
-        v-if="!total && !isRequest"
-        name="icon-empty-device.png"
-        description="敬请期待~"
-      ></SimpleEmpty>
-      <!-- 页码 -->
-      <SimplePagination
-        v-if="total > listQuery.pageSize"
-        :total="total"
-        :pageItems="listQuery.pageSize"
-        @change="onPagiantionChange"
-      ></SimplePagination>
-    </div>
+        <!-- 列表为空 -->
+        <SimpleEmpty
+          v-if="!total && !isRequest"
+          name="icon-empty-device.png"
+          description="敬请期待~"
+        ></SimpleEmpty>
+      </div>
+    </van-list>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import { debounce } from '@/utils'
 export default {
   layout: 'app',
   data() {
     return {
+      isLoadingMore: true,
+      finished: false,
       isRequest: true,
       listQuery: {
         authUserId: '',
@@ -75,25 +83,32 @@ export default {
   },
   methods: {
     // 获取设备分类
-    async fetchList() {
+    fetchList: debounce(async function () {
       try {
+        this.isLoadingMore = true
         this.listQuery.authUserId = this.authUserId
         const res = await this.$http.api.getAuthProductCateList(this.listQuery)
-        this.list = res.data.list
+        this.list = [...this.list, ...res.data.list]
+        this.finished = !res.data.hasNextPage
         this.total = res.data.total
       } catch (error) {
         console.log(error)
       } finally {
         this.isRequest = false
+        this.isLoadingMore = false
       }
-    },
+    }, 400),
+
     // 设备详情
     toDetail(item) {
-      this.$router.push(`/${this.authUserId}/app/approve/device/list?id=${item.productTypeId}`)
+      this.$router.push(
+        `/${this.authUserId}/app/approve/device/list?id=${item.productTypeId}`
+      )
     },
     // 搜索
     onSearch() {
       this.listQuery.pageNum = 1
+      this.list = []
       this.fetchList()
     },
     // 页码变化
@@ -101,6 +116,11 @@ export default {
       this.listQuery.pageNum = index
       this.fetchList()
     },
+    // 加载更多
+    onLoadMore() {
+      this.listQuery.pageNum += 1
+      this.fetchList()
+    },
   },
 }
 </script>

pages/_template/app/approve/device/list.vue

@@ -1,64 +1,72 @@
 <template>
   <div class="page">
-    <div class="page-top flex flex-col justify-center items-center">
-      <img class="logo" src="https://picsum.photos/200/200" />
-      <span class="name mt-2">上海品辉医疗科技有限公司</span>
-    </div>
-    <div class="page-content">
-      <!-- 搜索区域 -->
-      <div class="search">
-        <SimpleSearch v-model="listQuery.snCode" @search="onSearch" />
+    <van-list
+      v-model="isLoadingMore"
+      :finished="finished"
+      :immediate-check="false"
+      :finished-text="total ? '没有更多了' : ''"
+      @load="onLoadMore"
+    >
+      <div class="page-top flex flex-col justify-center items-center">
+        <img class="logo" src="https://picsum.photos/200/200" />
+        <span class="name mt-2">上海品辉医疗科技有限公司官方授权设备</span>
       </div>
-      <!-- 标题 -->
-      <div class="title px-4 pt-12 pb-6 md:px-0">
-        共<span v-text="total"></span>台设备
-      </div>
-      <!-- 列表 -->
-      <div class="list">
-        <div
-          class="section flex justify-between mb-4"
-          v-for="item in list"
-          :key="item.productId"
-          @click="toDetail(item)"
-        >
-          <img class="cover" :src="item.productImage" />
-          <div class="info">
-            <div class="name" v-text="item.productName"></div>
-            <div class="code">SN码：{{ item.snCode }}</div>
-            <div class="club-name">
-              所属机构：<span @click.stop="toClubDetail(item)">{{
-                item.clubName
-              }}</span>
+      <div class="page-content">
+        <!-- 搜索区域 -->
+        <div class="search">
+          <SimpleSearch
+            v-model="listQuery.snCode"
+            @search="onSearch"
+            placeholder="搜索设备SN码后四位"
+          />
+        </div>
+        <!-- 标题 -->
+        <div class="title px-4 pt-12 pb-6 md:px-0">
+          共<span v-text="total"></span>台设备
+        </div>
+        <!-- 列表 -->
+        <div class="list">
+          <div
+            class="section flex justify-between mb-4"
+            v-for="item in list"
+            :key="item.productId"
+            @click="toDetail(item)"
+          >
+            <img class="cover" :src="item.productImage" />
+            <div class="info">
+              <div class="name" v-text="item.productName"></div>
+              <div class="code">SN码：{{ item.snCode }}</div>
+              <div class="club-name">
+                所属机构：<span @click.stop="toClubDetail(item)">{{
+                  item.clubName
+                }}</span>
+              </div>
             </div>
           </div>
+
+          <div class="empty" v-for="i in emptyList" :key="'empty-' + i"></div>
         </div>
 
-        <div class="empty" v-for="i in emptyList" :key="'empty-' + i"></div>
+        <!-- 列表为空 -->
+        <SimpleEmpty
+          v-if="!total && !isRequest"
+          name="icon-empty-device.png"
+          description="敬请期待~"
+        ></SimpleEmpty>
       </div>
-
-      <!-- 列表为空 -->
-      <SimpleEmpty
-        v-if="!total && !isRequest"
-        name="icon-empty-device.png"
-        description="敬请期待~"
-      ></SimpleEmpty>
-      <!-- 页码 -->
-      <SimplePagination
-        v-if="total > listQuery.pageSize"
-        :total="total"
-        :pageItems="listQuery.pageSize"
-        @change="onPagiantionChange"
-      ></SimplePagination>
-    </div>
+    </van-list>
   </div>
 </template>
 
 <script>
+import { debounce } from '@/utils'
 export default {
   layout: 'app',
   data() {
     return {
-      isRequest: false,
+      isLoadingMore: true,
+      finished: false,
+      isRequest: true,
       listQuery: {
         productTypeId: '',
         snCode: '',
@@ -85,17 +93,20 @@ export default {
       this.listQuery.productTypeId = this.$route.query.id
       this.fetchList()
     },
-    async fetchList() {
+    fetchList: debounce(async function () {
       try {
+        this.isLoadingMore = true
         const res = await this.$http.api.getAuthProductList(this.listQuery)
-        this.list = res.data.list
+        this.list = [...this.list, ...res.data.list]
+        this.finished = !res.data.hasNextPage
         this.total = res.data.total
       } catch (error) {
         console.log(error)
       } finally {
         this.isRequest = false
+        this.isLoadingMore = false
       }
-    },
+    }, 400),
     // 搜索
     onSearch() {
       this.listQuery.pageNum = 1
@@ -114,9 +125,14 @@ export default {
     toClubDetail(item) {
       localStorage.setItem('clubInfo', JSON.stringify({ authId: item.authId }))
       const authUserId = this.$store.getters.authUserId
-      const url = `/${authUserId}/app/approve/club/detail`
+      const url = `/${authUserId}/app/approve/club/detail?id=${item.authId}`
       this.$router.push(url)
     },
+    // 加载更多
+    onLoadMore() {
+      this.listQuery.pageNum += 1
+      this.fetchList()
+    },
   },
 }
 </script>

pages/_template/app/approve/personnel/operate/detail.vue

@@ -111,6 +111,14 @@ export default {
     .swiper {
       width: 580px;
       height: 580px;
+
+      background: #f7f7f7;
+      ::v-deep {
+        img {
+          width: 580px;
+          height: 580px;
+        }
+      }
     }
   }
   .page-content {
@@ -214,8 +222,14 @@ export default {
   }
   .page-top {
     .swiper {
-      width: 100vw;
       height: 100vw;
+
+      background: #f7f7f7;
+      ::v-deep {
+        img {
+          height: 100vw;
+        }
+      }
     }
   }
   .page-content {

pages/_template/app/approve/personnel/operate/index.vue

@@ -1,64 +1,72 @@
 <template>
   <div class="page">
-    <div class="page-top flex flex-col justify-center items-center">
-      <img class="logo" src="https://picsum.photos/200/200" />
-      <div class="mt-2 name">
-        <span v-text="supplierInfo.shopName"></span>
-        <span>官方认证医师</span>
-      </div>
-    </div>
-    <div class="page-content">
-      <!-- 搜索区域 -->
-      <div class="search">
-        <SimpleSearch v-model="listQuery.doctorName" @search="onSearch" />
-      </div>
-      <!-- 标题 -->
-      <div class="title px-4 pt-12 pb-6">
-        共<span v-text="total"></span>位医师
+    <van-list
+      v-model="isLoadingMore"
+      :finished="finished"
+      :immediate-check="false"
+      :finished-text="total ? '没有更多了' : ''"
+      @load="onLoadMore"
+    >
+      <div class="page-top flex flex-col justify-center items-center">
+        <img class="logo" src="https://picsum.photos/200/200" />
+        <div class="mt-2 name">
+          <span v-text="supplierInfo.shopName"></span>
+          <span>官方医师认证</span>
+        </div>
       </div>
-      <!-- 列表 -->
-      <div class="list">
-        <div
-          class="section flex justify-between mb-4"
-          v-for="item in list"
-          :key="item.doctorId"
-          @click="toDetail(item)"
-        >
-          <img class="cover" :src="item.doctorImage" />
-          <div class="info">
-            <div class="name" v-text="item.doctorName"></div>
-            <div class="tag">{{ item.tagList.join(' | ') }}</div>
-            <div class="code">资格证编号：{{ item.certificateNo }}</div>
-            <div class="club-name">所在机构：{{ item.clubName }}</div>
+      <div class="page-content">
+        <!-- 搜索区域 -->
+        <div class="search">
+          <SimpleSearch
+            v-model="listQuery.doctorName"
+            @search="onSearch"
+            placeholder="搜索医师"
+          />
+        </div>
+        <!-- 标题 -->
+        <div class="title px-4 pt-12 pb-6">
+          共<span v-text="total"></span>位医师
+        </div>
+        <!-- 列表 -->
+        <div class="list">
+          <div
+            class="section flex justify-between mb-4"
+            v-for="item in list"
+            :key="item.doctorId"
+            @click="toDetail(item)"
+          >
+            <img class="cover" :src="item.doctorImage" />
+            <div class="info">
+              <div class="name" v-text="item.doctorName"></div>
+              <div class="tag">{{ item.tagList.join(' | ') }}</div>
+              <div class="code">资格证编号：{{ item.certificateNo }}</div>
+              <div class="club-name">所在机构：{{ item.clubName }}</div>
+            </div>
           </div>
+          <div class="empty" v-for="i in emptyList" :key="'empty' + i"></div>
         </div>
-        <div class="empty" v-for="i in emptyList" :key="'empty' + i"></div>
-      </div>
 
-      <!-- 列表为空 -->
-      <SimpleEmpty
-        v-if="!total && !isRequest"
-        name="icon-empty-device.png"
-        description="敬请期待~"
-      ></SimpleEmpty>
-      <!-- 页码 -->
-      <SimplePagination
-        v-if="total > listQuery.pageSize"
-        :total="total"
-        :pageItems="listQuery.pageSize"
-        @change="onPagiantionChange"
-      ></SimplePagination>
-    </div>
+        <!-- 列表为空 -->
+        <SimpleEmpty
+          v-if="!total && !isRequest"
+          name="icon-empty-device.png"
+          description="敬请期待~"
+        ></SimpleEmpty>
+      </div>
+    </van-list>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import { debounce } from '@/utils'
 export default {
   layout: 'app',
   data() {
     return {
-      isRequest: false,
+      isLoadingMore: true,
+      finished: false,
+      isRequest: true,
       listQuery: {
         authUserId: '',
         doctorType: 1,
@@ -83,20 +91,25 @@ export default {
     this.fetchList()
   },
   methods: {
-    async fetchList() {
+    fetchList: debounce(async function () {
       try {
+        this.isLoadingMore = true
         this.listQuery.authUserId = this.authUserId
         const res = await this.$http.api.fetchDoctorList(this.listQuery)
-        this.list = res.data.list
+        this.list = [...this.list, ...res.data.list]
+        this.finished = !res.data.hasNextPage
         this.total = res.data.total
       } catch (error) {
         console.log(error)
       } finally {
         this.isRequest = false
+        this.isLoadingMore = false
       }
-    },
+    }, 400),
+
     // 搜索
     onSearch() {
+      this.list = []
       this.listQuery.pageNum = 1
       this.fetchList()
     },
@@ -116,6 +129,11 @@ export default {
       const url = `/${this.authUserId}/app/approve/personnel/operate/detail?id=${item.doctorId}`
       this.$router.push(url)
     },
+    // 加载更多
+    onLoadMore() {
+      this.listQuery.pageNum += 1
+      this.fetchList()
+    },
   },
 }
 </script>

pages/_template/app/database/article.vue

@@ -1,61 +1,68 @@
 <template>
   <div class="page">
-    <div class="page-top flex flex-col justify-center items-center">
-      <img class="logo" :src="supplierInfo.logo" />
-      <span class="name mt-2" v-text="supplierInfo.shopName + '资料库'"></span>
-    </div>
-    <div class="page-content">
-      <!-- 搜索区域 -->
-      <div class="search">
-        <simple-search v-model="listQuery.articleTitle" @search="onSearch" />
+    <van-list
+      v-model="isLoadingMore"
+      :finished="finished"
+      :immediate-check="false"
+      :finished-text="total ? '没有更多了' : ''"
+      @load="onLoadMore"
+    >
+      <div class="page-top flex flex-col justify-center items-center">
+        <img class="logo" :src="supplierInfo.logo" />
+        <span
+          class="name mt-2"
+          v-text="supplierInfo.shopName + '资料库'"
+        ></span>
       </div>
-      <div class="divider"></div>
-      <!-- tabbar -->
-      <simple-tabs
-        :tabs="tabs"
-        :current="current"
-        @change="onTabChange"
-        @search="onSearch"
-      ></simple-tabs>
-      <div class="list">
-        <div
-          class="section flex justify-between items-center"
-          v-for="item in list"
-          :key="item.articleId"
-          @click="toDetail(item)"
-        >
-          <div class="info">
-            <div class="name" v-text="item.articleTitle"></div>
-            <div class="date">{{ item.createTime | dateFormat }}</div>
+      <div class="page-content">
+        <!-- 搜索区域 -->
+        <div class="search">
+          <simple-search v-model="listQuery.articleTitle" @search="onSearch" />
+        </div>
+        <div class="divider"></div>
+        <!-- tabbar -->
+        <simple-tabs
+          :tabs="tabs"
+          :current="current"
+          @change="onTabChange"
+          @search="onSearch"
+        ></simple-tabs>
+        <div class="list">
+          <div
+            class="section flex justify-between items-center"
+            v-for="item in list"
+            :key="item.articleId"
+            @click="toDetail(item)"
+          >
+            <div class="info">
+              <div class="name" v-text="item.articleTitle"></div>
+              <div class="date">{{ item.createTime | dateFormat }}</div>
+            </div>
+            <img class="cover" :src="item.articleImage" />
           </div>
-          <img class="cover" :src="item.articleImage" />
         </div>
-      </div>
 
-      <!-- 列表为空 -->
-      <SimpleEmpty
-        v-if="!total && !isRequest"
-        description="敬请期待~"
-      ></SimpleEmpty>
-      <!-- 页码 -->
-      <SimplePagination
-        v-if="total > listQuery.pageSize"
-        :total="total"
-        :pageItems="listQuery.pageSize"
-        @change="onPagiantionChange"
-      ></SimplePagination>
-    </div>
+        <!-- 列表为空 -->
+        <SimpleEmpty
+          v-if="!total && !isRequest"
+          description="敬请期待~"
+        ></SimpleEmpty>
+      </div>
+    </van-list>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import { tabs } from '@/configs/tabs'
+import { debounce } from '~/utils'
 
 export default {
   layout: 'app',
   data() {
     return {
+      isLoadingMore: true,
+      finished: false,
       isRequest: true,
       tabs: tabs(),
       current: 0,
@@ -76,18 +83,22 @@ export default {
     this.fetchList()
   },
   methods: {
-    async fetchList() {
+    fetchList: debounce(async function () {
       try {
+        this.isLoadingMore = true
         this.listQuery.authUserId = this.userInfo.authUserId
         const res = await this.$http.api.getArticleList(this.listQuery)
-        this.list = res.data.list
+        this.list = [...this.list, ...res.data.list]
+        this.finished = !res.data.hasNextPage
         this.total = res.data.total
       } catch (error) {
         console.log(error)
       } finally {
         this.isRequest = false
+        this.isLoadingMore = false
       }
-    },
+    }, 400),
+
     // 详情
     toDetail(item) {
       localStorage.setItem('articleInfo', JSON.stringify(item))
@@ -110,6 +121,11 @@ export default {
       this.listQuery.pageNum = index
       this.fetchList()
     },
+    // 加载更多
+    onLoadMore() {
+      this.listQuery.pageNum += 1
+      this.fetchList()
+    },
   },
 }
 </script>

pages/_template/app/database/file.vue

@@ -1,49 +1,53 @@
 <template>
   <div class="page">
-    <div class="page-top flex flex-col justify-center items-center">
-      <img class="logo" :src="supplierInfo.logo" />
-      <span class="name mt-2" v-text="supplierInfo.shopName + '资料库'"></span>
-    </div>
-    <div class="page-content">
-      <!-- 搜索区域 -->
-      <div class="search">
-        <simple-search v-model="listQuery.fileTitle" @search="onSearch" />
+    <van-list
+      v-model="isLoadingMore"
+      :finished="finished"
+      :immediate-check="false"
+      :finished-text="total ? '没有更多了' : ''"
+      @load="onLoadMore"
+    >
+      <div class="page-top flex flex-col justify-center items-center">
+        <img class="logo" :src="supplierInfo.logo" />
+        <span
+          class="name mt-2"
+          v-text="supplierInfo.shopName + '资料库'"
+        ></span>
       </div>
-      <div class="divider"></div>
-      <!-- tabbar -->
-      <simple-tabs
-        :tabs="tabs"
-        :current="current"
-        @change="onTabChange"
-        @search="onSearch"
-      ></simple-tabs>
-      <div class="list">
-        <div
-          class="section md:flex md:justify-between md:items-center"
-          v-for="item in list"
-          :key="item.fileId"
-          @click="previewFile(item)"
-        >
-          <div class="info">
-            <div class="name" v-text="item.fileName"></div>
-            <div class="date">{{ item.createTime | dateFormat }}</div>
-            <div class="download" @click.stop="downloadLink(item)">下载</div>
+      <div class="page-content">
+        <!-- 搜索区域 -->
+        <div class="search">
+          <simple-search v-model="listQuery.fileTitle" @search="onSearch" />
+        </div>
+        <div class="divider"></div>
+        <!-- tabbar -->
+        <simple-tabs
+          :tabs="tabs"
+          :current="current"
+          @change="onTabChange"
+          @search="onSearch"
+        ></simple-tabs>
+        <div class="list">
+          <div
+            class="section md:flex md:justify-between md:items-center"
+            v-for="item in list"
+            :key="item.fileId"
+            @click="previewFile(item)"
+          >
+            <div class="info">
+              <div class="name" v-text="item.fileName"></div>
+              <div class="date">{{ item.createTime | dateFormat }}</div>
+              <div class="download" @click.stop="downloadLink(item)">下载</div>
+            </div>
           </div>
         </div>
+        <!-- 列表为空 -->
+        <SimpleEmpty
+          v-if="!total && !isRequest"
+          description="敬请期待~"
+        ></SimpleEmpty>
       </div>
-      <!-- 列表为空 -->
-      <SimpleEmpty
-        v-if="!total && !isRequest"
-        description="敬请期待~"
-      ></SimpleEmpty>
-      <!-- 页码 -->
-      <SimplePagination
-        v-if="total > listQuery.pageSize"
-        :total="total"
-        :pageItems="listQuery.pageSize"
-        @change="onPagiantionChange"
-      ></SimplePagination>
-    </div>
+    </van-list>
   </div>
 </template>
 
@@ -51,11 +55,14 @@
 import { mapGetters } from 'vuex'
 import { tabs } from '@/configs/tabs'
 import downloadLink from '@/utils/download-link'
+import { debounce } from '~/utils'
 
 export default {
   layout: 'app',
   data() {
     return {
+      isLoadingMore: true,
+      finished: false,
       isRequest: true,
       tabs: tabs(),
       current: 3,
@@ -87,18 +94,21 @@ export default {
       window.open(item.filePreviewUrl)
     },
     // 获取列表
-    async fetchList() {
+    fetchList: debounce(async function () {
       try {
+        this.isLoadingMore = true
         this.listQuery.authUserId = this.userInfo.authUserId
         const res = await this.$http.api.getFileList(this.listQuery)
-        this.list = res.data.list
+        this.list = [...this.list, ...res.data.list]
+        this.finished = !res.data.hasNextPage
         this.total = res.data.total
       } catch (error) {
         console.log(error)
       } finally {
         this.isRequest = false
+        this.isLoadingMore = false
       }
-    },
+    }, 400),
     // tab切换
     onTabChange(item) {
       console.log(item)
@@ -115,6 +125,11 @@ export default {
       this.listQuery.pageNum = index
       this.fetchList()
     },
+    // 加载更多
+    onLoadMore() {
+      this.listQuery.pageNum += 1
+      this.fetchList()
+    },
   },
 }
 </script>

pages/_template/app/database/image.vue

@@ -1,56 +1,60 @@
 <template>
   <div class="page">
-    <div class="page-top flex flex-col justify-center items-center">
-      <img class="logo" :src="supplierInfo.logo" />
-      <span class="name mt-2" v-text="supplierInfo.shopName + '资料库'"></span>
-    </div>
-    <div class="page-content">
-      <!-- 搜索区域 -->
-      <div class="search">
-        <simple-search v-model="listQuery.imageTitle" @search="onSearch" />
+    <van-list
+      v-model="isLoadingMore"
+      :finished="finished"
+      :immediate-check="false"
+      :finished-text="total ? '没有更多了' : ''"
+      @load="onLoadMore"
+    >
+      <div class="page-top flex flex-col justify-center items-center">
+        <img class="logo" :src="supplierInfo.logo" />
+        <span
+          class="name mt-2"
+          v-text="supplierInfo.shopName + '资料库'"
+        ></span>
       </div>
-      <div class="divider"></div>
-      <!-- tabbar -->
-      <simple-tabs
-        :tabs="tabs"
-        :current="current"
-        @change="onTabChange"
-        @search="onSearch"
-      ></simple-tabs>
-      <div class="list">
-        <div class="section" v-for="item in list" :key="item.imageId">
-          <div class="info">
-            <div class="name" v-text="item.imageTitle"></div>
-            <div class="date">{{ item.createTime | dateFormat }}</div>
-            <div class="download" @click="downloadLink(item.imageZipUrl)">
-              保存所有图片
+      <div class="page-content">
+        <!-- 搜索区域 -->
+        <div class="search">
+          <simple-search v-model="listQuery.imageTitle" @search="onSearch" />
+        </div>
+        <div class="divider"></div>
+        <!-- tabbar -->
+        <simple-tabs
+          :tabs="tabs"
+          :current="current"
+          @change="onTabChange"
+          @search="onSearch"
+        ></simple-tabs>
+        <div class="list">
+          <div class="section" v-for="item in list" :key="item.imageId">
+            <div class="info">
+              <div class="name" v-text="item.imageTitle"></div>
+              <div class="date">{{ item.createTime | dateFormat }}</div>
+              <div class="download" @click="downloadLink(item.imageZipUrl)">
+                保存所有图片
+              </div>
             </div>
-          </div>
-          <div class="images grid grid-cols-4 md:grid-cols-8 gap-3 md:gap-4">
-            <div
-              class="item"
-              v-for="(image, index) in item.imageList"
-              :key="index"
-              @click="onImagePreview(item.imageList, index)"
-            >
-              <img class="object-cover" :src="image" />
+            <div class="images grid grid-cols-4 md:grid-cols-8 gap-3 md:gap-4">
+              <div
+                class="item"
+                v-for="(image, index) in item.imageList"
+                :key="index"
+                @click="onImagePreview(item.imageList, index)"
+              >
+                <img class="object-cover" :src="image" />
+              </div>
             </div>
           </div>
         </div>
+        <!-- 列表为空 -->
+        <SimpleEmpty
+          v-if="!total && !isRequest"
+          description="敬请期待~"
+        ></SimpleEmpty>
       </div>
-      <!-- 列表为空 -->
-      <SimpleEmpty
-        v-if="!total && !isRequest"
-        description="敬请期待~"
-      ></SimpleEmpty>
-      <!-- 页码 -->
-      <SimplePagination
-        v-if="total > listQuery.pageSize"
-        :total="total"
-        :pageItems="listQuery.pageSize"
-        @change="onPagiantionChange"
-      ></SimplePagination>
-    </div>
+    </van-list>
   </div>
 </template>
 
@@ -59,11 +63,14 @@ import { mapGetters } from 'vuex'
 import { tabs } from '@/configs/tabs'
 import downloadLink from '@/utils/download-link'
 import { ImagePreview } from 'vant'
+import { debounce } from '~/utils'
 
 export default {
   layout: 'app',
   data() {
     return {
+      isLoadingMore: true,
+      finished: false,
       isRequest: true,
       tabs: tabs(),
       current: 1,
@@ -87,18 +94,22 @@ export default {
     // 下载方法
     downloadLink,
     // 获取列表
-    async fetchList() {
+    fetchList: debounce(async function () {
       try {
+        this.isLoadingMore = true
         this.listQuery.authUserId = this.userInfo.authUserId
         const res = await this.$http.api.getImageList(this.listQuery)
-        this.list = res.data.list
+        this.list = [...this.list, ...res.data.list]
+        this.finished = !res.data.hasNextPage
         this.total = res.data.total
       } catch (error) {
         console.log(error)
       } finally {
         this.isRequest = false
+        this.isLoadingMore = false
       }
-    },
+    }, 400),
+
     // 图片预览
     onImagePreview(imageList, index) {
       ImagePreview({
@@ -126,6 +137,11 @@ export default {
       this.listQuery.pageNum = index
       this.fetchList()
     },
+    // 加载更多
+    onLoadMore() {
+      this.listQuery.pageNum += 1
+      this.fetchList()
+    },
   },
 }
 </script>

pages/_template/app/database/package.vue

@@ -1,48 +1,52 @@
 <template>
   <div class="page">
-    <div class="page-top flex flex-col justify-center items-center">
-      <img class="logo" :src="supplierInfo.logo" />
-      <span class="name mt-2" v-text="supplierInfo.shopName + '资料库'"></span>
-    </div>
-    <div class="page-content">
-      <!-- 搜索区域 -->
-      <div class="search">
-        <simple-search v-model="listQuery.fileTitle" @search="onSearch" />
+    <van-list
+      v-model="isLoadingMore"
+      :finished="finished"
+      :immediate-check="false"
+      :finished-text="total ? '没有更多了' : ''"
+      @load="onLoadMore"
+    >
+      <div class="page-top flex flex-col justify-center items-center">
+        <img class="logo" :src="supplierInfo.logo" />
+        <span
+          class="name mt-2"
+          v-text="supplierInfo.shopName + '资料库'"
+        ></span>
       </div>
-      <div class="divider"></div>
-      <!-- tabbar -->
-      <simple-tabs
-        :tabs="tabs"
-        :current="current"
-        @change="onTabChange"
-        @search="onSearch"
-      ></simple-tabs>
-      <div class="list">
-        <div
-          class="section flex justify-between items-center"
-          v-for="item in list"
-          :key="item.fileId"
-        >
-          <div class="info">
-            <div class="name" v-text="item.fileName"></div>
-            <div class="download" @click="downloadLink(item)">点击下载</div>
+      <div class="page-content">
+        <!-- 搜索区域 -->
+        <div class="search">
+          <simple-search v-model="listQuery.fileTitle" @search="onSearch" />
+        </div>
+        <div class="divider"></div>
+        <!-- tabbar -->
+        <simple-tabs
+          :tabs="tabs"
+          :current="current"
+          @change="onTabChange"
+          @search="onSearch"
+        ></simple-tabs>
+        <div class="list">
+          <div
+            class="section flex justify-between items-center"
+            v-for="item in list"
+            :key="item.fileId"
+          >
+            <div class="info">
+              <div class="name" v-text="item.fileName"></div>
+              <div class="download" @click="downloadLink(item)">点击下载</div>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 列表为空 -->
-      <SimpleEmpty
-        v-if="!total && !isRequest"
-        description="敬请期待~"
-      ></SimpleEmpty>
-      <!-- 页码 -->
-      <SimplePagination
-        v-if="total > listQuery.pageSize"
-        :total="total"
-        :pageItems="listQuery.pageSize"
-        @change="onPagiantionChange"
-      ></SimplePagination>
-    </div>
+        <!-- 列表为空 -->
+        <SimpleEmpty
+          v-if="!total && !isRequest"
+          description="敬请期待~"
+        ></SimpleEmpty>
+      </div>
+    </van-list>
   </div>
 </template>
 
@@ -50,11 +54,14 @@
 import { mapGetters } from 'vuex'
 import { tabs } from '@/configs/tabs'
 import downloadLink from '@/utils/download-link'
+import { debounce } from '~/utils'
 
 export default {
   layout: 'app',
   data() {
     return {
+      isLoadingMore: true,
+      finished: false,
       isRequest: true,
       tabs: tabs(),
       current: 4,
@@ -82,18 +89,22 @@ export default {
       downloadLink(url)
     },
     // 获取列表
-    async fetchList() {
+    fetchList: debounce(async function () {
       try {
+        this.isLoadingMore = true
         this.listQuery.authUserId = this.userInfo.authUserId
         const res = await this.$http.api.getFileList(this.listQuery)
-        this.list = res.data.list
+        this.list = [...this.list, ...res.data.list]
+        this.finished = !res.data.hasNextPage
         this.total = res.data.total
       } catch (error) {
         console.log(error)
       } finally {
         this.isRequest = false
+        this.isLoadingMore = false
       }
-    },
+    }, 400),
+
     // tab切换
     onTabChange(item) {
       console.log(item)
@@ -110,6 +121,11 @@ export default {
       this.listQuery.pageNum = index
       this.fetchList()
     },
+    // 加载更多
+    onLoadMore() {
+      this.listQuery.pageNum += 1
+      this.fetchList()
+    },
   },
 }
 </script>

pages/_template/app/database/video.vue

@@ -1,50 +1,54 @@
 <template>
   <div class="page">
-    <div class="page-top flex flex-col justify-center items-center">
-      <img class="logo" :src="supplierInfo.logo" />
-      <span class="name mt-2" v-text="supplierInfo.shopName + '资料库'"></span>
-    </div>
-    <div class="page-content">
-      <!-- 搜索区域 -->
-      <div class="search">
-        <simple-search v-model="listQuery.videoTitle" @search="onSearch" />
+    <van-list
+      v-model="isLoadingMore"
+      :finished="finished"
+      :immediate-check="false"
+      :finished-text="total ? '没有更多了' : ''"
+      @load="onLoadMore"
+    >
+      <div class="page-top flex flex-col justify-center items-center">
+        <img class="logo" :src="supplierInfo.logo" />
+        <span
+          class="name mt-2"
+          v-text="supplierInfo.shopName + '资料库'"
+        ></span>
       </div>
-      <div class="divider"></div>
-      <!-- tabbar -->
-      <simple-tabs
-        :tabs="tabs"
-        :current="current"
-        @change="onTabChange"
-        @search="onSearch"
-      ></simple-tabs>
-      <div class="list">
-        <div
-          class="section md:flex md:justify-between md:items-center"
-          v-for="item in list"
-          :key="item.videoId"
-        >
-          <div class="info">
-            <div class="name" v-text="item.videoTitle"></div>
-            <div class="date">{{ item.createTime | dateFormat }}</div>
-            <div class="download" @click="downloadLink(item)">保存视频</div>
+      <div class="page-content">
+        <!-- 搜索区域 -->
+        <div class="search">
+          <simple-search v-model="listQuery.videoTitle" @search="onSearch" />
+        </div>
+        <div class="divider"></div>
+        <!-- tabbar -->
+        <simple-tabs
+          :tabs="tabs"
+          :current="current"
+          @change="onTabChange"
+          @search="onSearch"
+        ></simple-tabs>
+        <div class="list">
+          <div
+            class="section md:flex md:justify-between md:items-center"
+            v-for="item in list"
+            :key="item.videoId"
+          >
+            <div class="info">
+              <div class="name" v-text="item.videoTitle"></div>
+              <div class="date">{{ item.createTime | dateFormat }}</div>
+              <div class="download" @click="downloadLink(item)">保存视频</div>
+            </div>
+            <video class="cover" :src="item.videoPreviewUrl"></video>
           </div>
-          <video class="cover" :src="item.videoPreviewUrl"></video>
         </div>
-      </div>
 
-      <!-- 列表为空 -->
-      <SimpleEmpty
-        v-if="!total && !isRequest"
-        description="敬请期待~"
-      ></SimpleEmpty>
-      <!-- 页码 -->
-      <SimplePagination
-        v-if="total > listQuery.pageSize"
-        :total="total"
-        :pageItems="listQuery.pageSize"
-        @change="onPagiantionChange"
-      ></SimplePagination>
-    </div>
+        <!-- 列表为空 -->
+        <SimpleEmpty
+          v-if="!total && !isRequest"
+          description="敬请期待~"
+        ></SimpleEmpty>
+      </div>
+    </van-list>
   </div>
 </template>
 
@@ -52,11 +56,14 @@
 import { mapGetters } from 'vuex'
 import { tabs } from '@/configs/tabs'
 import downloadLink from '@/utils/download-link'
+import { debounce } from '~/utils'
 
 export default {
   layout: 'app',
   data() {
     return {
+      isLoadingMore: true,
+      finished: false,
       isRequest: true,
       tabs: tabs(),
       current: 2,
@@ -83,18 +90,22 @@ export default {
       downloadLink(url)
     },
     // 获取列表
-    async fetchList() {
+    fetchList: debounce(async function () {
       try {
+        this.isLoadingMore = true
         this.listQuery.authUserId = this.userInfo.authUserId
         const res = await this.$http.api.getVideoList(this.listQuery)
-        this.list = res.data.list
+        this.list = [...this.list, ...res.data.list]
+        this.finished = !res.data.hasNextPage
         this.total = res.data.total
       } catch (error) {
         console.log(error)
       } finally {
         this.isRequest = false
+        this.isLoadingMore = false
       }
-    },
+    }, 400),
+
     // tab切换
     onTabChange(item) {
       console.log(item)
@@ -111,6 +122,11 @@ export default {
       this.listQuery.pageNum = index
       this.fetchList()
     },
+    // 加载更多
+    onLoadMore() {
+      this.listQuery.pageNum += 1
+      this.fetchList()
+    },
   },
 }
 </script>

pages/_template/app/index.vue

@@ -71,7 +71,13 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['supplierInfo', 'authUserId', 'appId', 'type']),
+    ...mapGetters([
+      'supplierInfo',
+      'authUserId',
+      'appId',
+      'type',
+      'accountType',
+    ]),
   },
   created() {},
   methods: {
@@ -79,7 +85,7 @@ export default {
       const hasLogin = this.$store.getters.accessToken
       if (item.id > 0 && !hasLogin) {
         // 在微信浏览器中使用微信授权登录
-        if (isWeChat() && this.appId) {
+        if (isWeChat() && this.appId && this.accountType === 2) {
           const payload = { authUserId: this.authUserId, type: this.type }
           return toAuthorization(this.appId, payload)
         }

pages/_template/ldm/approve/club/detail.vue

@@ -16,7 +16,7 @@
       <div class="club-info">
         <div class="address" v-text="address"></div>
         <div class="mobile">{{ clubInfo.mobile | formatEmpty }}</div>
-        <div class="navigation">导航过去</div>
+        <div class="navigation" @click="onMapNav">导航过去</div>
       </div>
       <!-- 列表标题 -->
       <div class="title">明星操作师</div>
@@ -36,6 +36,7 @@
         </div>
       </div>
     </div>
+    <SimpleMapNav ref="mapNav" color="black" @click="navigation"></SimpleMapNav>
   </div>
 </template>
 
@@ -101,8 +102,21 @@ export default {
         this.clubInfo.logo = drawLogo(this.clubInfo.authParty)
       }
     },
+    // 地图导航
+    onMapNav() {
+      this.$refs.mapNav.open()
+    },
     // 导航
-    navigation() {},
+    navigation(type) {
+      const point = this.clubInfo.lngAndLat.split(',')
+      const lng = point[0]
+      const lat = point[1]
+      mapNavigate(
+        { lat, lng, title: this.clubInfo.authParty, address: this.address },
+        type
+      )
+      this.$refs.mapNav.close()
+    },
   },
 }
 </script>
@@ -122,6 +136,14 @@ export default {
     .swiper {
       width: 452px;
       height: 452px;
+      background: #f7f7f7;
+
+      ::v-deep {
+        img {
+          width: 452px;
+          height: 452px;
+        }
+      }
     }
 
     .club-info {
@@ -160,11 +182,13 @@ export default {
       position: relative;
       font-size: 19px;
       color: #000000;
+      border-top: 1px solid rgba(0, 0, 0, 0.169);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.169);
+      padding-top: 36px;
+      padding-bottom: 36px;
       .address,
       .mobile {
         position: relative;
-        padding: 36px 0;
-        border-top: 1px solid rgba(0, 0, 0, 0.169);
         padding-left: 26px;
 
         &::after {
@@ -174,14 +198,14 @@ export default {
           height: 20px;
           position: absolute;
           left: 0;
-          top: 40px;
+          top: 0;
           background-size: auto 20px;
           background-repeat: no-repeat;
         }
       }
 
       .mobile {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.169);
+        margin-top: 34px;
         &::after {
           background-image: url(https://static.caimei365.com/www/authentic/h5/ldm-icon-contact.png);
         }
@@ -231,6 +255,7 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.169);
     .section {
       width: 100%;
       margin-bottom: 32px;
@@ -285,12 +310,21 @@ export default {
 
     .swiper {
       height: 100vw;
+
+      background: #f7f7f7;
+
+      ::v-deep {
+        img {
+          height: 100vw;
+        }
+      }
     }
 
     .club-info {
       width: 100%;
       position: absolute;
       bottom: 0;
+      z-index: 9;
       text-align: center;
       .logo {
         display: block;

pages/_template/ldm/approve/club/index.vue

@@ -1,77 +1,75 @@
 <template>
   <div class="page">
-    <div class="page-top"></div>
-    <div class="page-content">
-      <!-- 搜索区域 -->
-      <div class="search flex justify-center">
-        <input
-          type="text"
-          placeholder="搜索店铺"
-          v-model="listQuery.clubName"
-          @keyup.enter="onSearch"
-        />
-      </div>
-      <!-- 地区筛选 -->
-      <div class="city">
-        <LdmCity
-          @change="onCityChange"
-          :options="cityList"
-          labelName="name"
-          valueName="id"
-        ></LdmCity>
-      </div>
-      <!-- 标题 -->
-      <div class="title">距你最近...</div>
-      <!-- 机构列表 -->
-      <div class="list">
-        <div
-          class="section flex items-center"
-          v-for="item in list"
-          :key="item.authId"
-          @click="toDetail(item)"
-        >
-          <img class="cover" :src="item.logo || drawLogo(item.clubName)" />
-          <div class="info">
-            <div class="name" v-text="item.clubName"></div>
-            <div class="line"></div>
-            <div class="mobile">{{ item.mobile || '未知' }}</div>
-            <div class="address">
-              {{ formatAddress(item.area, item.address) }}
+    <van-list
+      v-model="isLoadingMore"
+      :finished="finished"
+      :immediate-check="false"
+      :finished-text="total ? '没有更多了' : ''"
+      @load="onLoadMore"
+    >
+      <div class="page-top"></div>
+      <div class="page-content">
+        <!-- 搜索区域 -->
+        <div class="search flex justify-center">
+          <input
+            type="text"
+            placeholder="搜索店铺"
+            v-model="listQuery.clubName"
+            @keyup.enter="onSearch"
+          />
+        </div>
+        <!-- 地区筛选 -->
+        <div class="city">
+          <LdmCity
+            @change="onCityChange"
+            :options="cityList"
+            labelName="name"
+            valueName="id"
+          ></LdmCity>
+        </div>
+        <!-- 标题 -->
+        <div class="title">距你最近...</div>
+        <!-- 机构列表 -->
+        <div class="list">
+          <div
+            class="section flex items-center"
+            v-for="item in list"
+            :key="item.authId"
+            @click="toDetail(item)"
+          >
+            <img class="cover" :src="item.logo || drawLogo(item.clubName)" />
+            <div class="info">
+              <div class="name" v-text="item.clubName"></div>
+              <div class="line"></div>
+              <div class="mobile">{{ item.mobile || '未知' }}</div>
+              <div class="address">
+                {{ formatAddress(item.area, item.address) }}
+              </div>
+              <div
+                class="distance"
+                v-text="item.distance + 'km'"
+                v-if="item.distance && item.distance !== 99999"
+              ></div>
             </div>
-            <div
-              class="distance"
-              v-text="item.distance + 'km'"
-              v-if="item.distance && item.distance !== 99999"
-            ></div>
           </div>
         </div>
+        <!-- 列表为空 -->
+        <LdmEmpty v-if="!total && !isRequest" name="ldm-empty.png"></LdmEmpty>
       </div>
-
-      <!-- 列表为空 -->
-      <SimpleEmpty
-        v-if="!total && !isRequest"
-        description="敬请期待~"
-      ></SimpleEmpty>
-      <!-- 页码 -->
-      <SimplePagination
-        themeType="black"
-        v-if="total > listQuery.pageSize"
-        :total="total"
-        :pageItems="listQuery.pageSize"
-        @change="onPagiantionChange"
-      ></SimplePagination>
-    </div>
+    </van-list>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import { loactionSelf } from '@/utils/map-utils'
-import { drawLogo } from '@/utils'
+import { debounce, drawLogo } from '@/utils'
 export default {
   layout: 'app-ldm',
   data() {
     return {
+      isLoadingMore: true,
+      finished: false,
       isRequest: true,
       list: [],
       listQuery: {
@@ -137,18 +135,22 @@ export default {
       this.fetchList()
     },
     // 获取机构列表
-    async fetchList() {
+    fetchList: debounce(async function () {
       try {
+        this.isLoadingMore = true
         const res = await this.$http.api.getAuthClubList(this.listQuery)
         this.total = res.data.total
-        this.list = res.data.list
+        this.list = [...this.list, ...res.data.list]
+        this.finished = !res.data.hasNextPage
       } catch (error) {
         console.log(error)
       } finally {
         this.$toast.clear()
         this.isRequest = false
+        this.isLoadingMore = false
       }
-    },
+    }, 400),
+
     // 获取地址列表
     fetchCityList() {
       this.$http.api.fetchAllCityList().then((res) => {
@@ -171,18 +173,17 @@ export default {
         }
       })
       this.listQuery.pageNum = 1
+      this.list = []
       this.fetchList()
     },
     // 搜索
     onSearch() {
       this.listQuery.pageNum = 1
+      this.list = []
       this.fetchList()
     },
     // 页码变化
-    onPagiantionChange(index) {
-      this.listQuery.pageNum = index
-      this.fetchList()
-    },
+    onPagiantionChange(index) {},
     // 格式化地址
     formatAddress(a1, a2) {
       let resutl = ''
@@ -194,6 +195,12 @@ export default {
       }
       return resutl || '未知'
     },
+    // 加载更多
+    onLoadMore() {
+      if (this.isRequest) return
+      this.listQuery.pageNum += 1
+      this.fetchList()
+    },
   },
   beforeDestroy() {
     this.$toast.clear()
@@ -211,11 +218,10 @@ export default {
   }
   .page-content {
     width: 836px;
-    padding-bottom: 80px;
     margin: 0 auto;
     overflow: hidden;
 
-    .city{
+    .city {
       position: relative;
       z-index: 99;
     }
@@ -418,10 +424,6 @@ export default {
         box-sizing: border-box;
         margin-top: 5.7vw;
 
-        &:last-child {
-          margin-bottom: 5.7vw;
-        }
-
         .cover {
           width: 21.5vw;
           height: 21.5vw;

pages/_template/ldm/approve/index.vue

@@ -20,15 +20,19 @@
         </div>
       </div>
       <div class="entry">
-        <nuxt-link class="section" :to="`/${authUserId}/ldm/approve/club`"
-          >查询授权商家</nuxt-link
+        <div
+          class="section"
+          @click="toDetail(`/${authUserId}/ldm/approve/club`)"
         >
-        <nuxt-link
+          查询授权商家
+        </div>
+        <div
           v-if="false"
           class="section"
-          :to="`/${authUserId}/ldm/approve/personnel/training`"
-          >查询官方培训师</nuxt-link
+          @click="toDetail(`/${authUserId}/ldm/approve/personnel/training`)"
         >
+          > 查询官方培训师
+        </div>
       </div>
     </div>
     <div class="page-footer flex flex-col justify-center">
@@ -45,6 +49,11 @@ export default {
   computed: {
     ...mapGetters(['authUserId']),
   },
+  methods: {
+    toDetail(path) {
+      this.$router.push(path)
+    },
+  },
 }
 </script>
 

pages/_template/ldm/approve/personnel/operate/detail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <div class="page-title">专业美容培训师</div>
+    <div class="page-title">明星操作师</div>
     <div class="page-top">
       <div class="swiper">
         <SimpleSwiper :imageList="doctorInfo.bannerList"></SimpleSwiper>
@@ -79,19 +79,38 @@ export default {
     top: 60px;
     font-size: 26px;
     color: #221815;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 24px;
+      height: 28px;
+      background: url(https://static.caimei365.com/www/authentic/h5/ldm-icon-badge-black.png)
+        no-repeat center;
+      background-size: 24px;
+      vertical-align: -7px;
+      margin-right: 8px;
+    }
   }
   .page-top {
     .swiper {
       width: 452px;
       height: 452px;
-      background-color: pink;
+      background: #f7f7f7;
+
+      ::v-deep {
+        img {
+          width: 452px;
+          height: 452px;
+        }
+      }
     }
   }
 
   .page-content {
     width: 503px;
     .doctor-info {
-      padding-bottom: 35px;
+      padding-bottom: 30px;
       .name {
         font-size: 35px;
         font-weight: bold;
@@ -118,7 +137,9 @@ export default {
 
     .param-list {
       .param {
-        padding: 32px 0;
+        padding: 24px 0;
+        min-height: 160px;
+        box-sizing: border-box;
         border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 
         &:first-child {
@@ -133,9 +154,9 @@ export default {
         .content {
           font-size: 16px;
           color: #9c9c9c;
-          margin-top: 12px;
+          margin-top: 6px;
           text-align: justify;
-          line-height: 1.7;
+          line-height: 1.6;
         }
       }
     }
@@ -149,9 +170,13 @@ export default {
 
   .page-top {
     .swiper {
-      width: 100vw;
       height: 100vw;
-      background-color: pink;
+      background: #f7f7f7;
+      ::v-deep {
+        img {
+          height: 100vw;
+        }
+      }
     }
   }
 

pages/_template/ldm/approve/personnel/training/detail.vue

@@ -31,6 +31,7 @@ export default {
   data() {
     return {
       doctorInfo: {
+        tagList: [],
         paramList: [],
       },
     }
@@ -85,14 +86,21 @@ export default {
     .swiper {
       width: 452px;
       height: 452px;
-      background-color: pink;
+      background: #f7f7f7;
+
+      ::v-deep {
+        img {
+          width: 452px;
+          height: 452px;
+        }
+      }
     }
   }
 
   .page-content {
     width: 503px;
     .doctor-info {
-      padding-bottom: 35px;
+      padding-bottom: 30px;
       .name {
         font-size: 35px;
         font-weight: bold;
@@ -128,7 +136,9 @@ export default {
 
     .param-list {
       .param {
-        padding: 32px 0;
+        padding: 24px 0;
+        min-height: 160px;
+        box-sizing: border-box;
         border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 
         &:first-child {
@@ -145,7 +155,7 @@ export default {
           color: #9c9c9c;
           margin-top: 12px;
           text-align: justify;
-          line-height: 1.7;
+          line-height: 1.6;
         }
       }
     }
@@ -155,9 +165,13 @@ export default {
 @media screen and (max-width: 768px) {
   .page-top {
     .swiper {
-      width: 100vw;
       height: 100vw;
-      background-color: pink;
+      background: #f7f7f7;
+      ::v-deep {
+        img {
+          height: 100vw;
+        }
+      }
     }
   }
 

pages/_template/ldm/approve/personnel/training/index.vue

@@ -1,36 +1,33 @@
 <template>
   <div class="page">
-    <div class="page-top"></div>
-    <div class="page-content">
-      <div class="title">专业美容培训师</div>
-      <div class="list">
-        <div
-          class="section flex items-center"
-          v-for="item in list"
-          :key="item.doctorId"
-        >
-          <img class="cover" :src="item.doctorImage" />
-          <div class="info">
-            <div class="name">{{ item.doctorName }}<i /></div>
-            <div class="tag">{{ item.tagList.join(' | ') }}</div>
-            <div class="more" @click="toDetail(item)">点击查看</div>
+    <van-list
+      v-model="isLoadingMore"
+      :finished="finished"
+      :immediate-check="false"
+      :finished-text="total ? '没有更多了' : ''"
+      @load="onLoadMore"
+    >
+      <div class="page-top"></div>
+      <div class="page-content">
+        <div class="title">专业美容培训师</div>
+        <div class="list">
+          <div
+            class="section flex items-center"
+            v-for="item in list"
+            :key="item.doctorId"
+          >
+            <img class="cover" :src="item.doctorImage" />
+            <div class="info">
+              <div class="name">{{ item.doctorName }}<i /></div>
+              <div class="tag">{{ item.tagList.join(' | ') }}</div>
+              <div class="more" @click="toDetail(item)">点击查看</div>
+            </div>
           </div>
         </div>
+        <!-- 列表为空 -->
+        <LdmEmpty v-if="!total && !isRequest" name="ldm-empty.png"></LdmEmpty>
       </div>
-      <!-- 列表为空 -->
-      <SimpleEmpty
-        v-if="!total && !isRequest"
-        description="敬请期待~"
-      ></SimpleEmpty>
-      <!-- 页码 -->
-      <SimplePagination
-        themeType="black"
-        v-if="total > listQuery.pageSize"
-        :total="total"
-        :pageItems="listQuery.pageSize"
-        @change="onPagiantionChange"
-      ></SimplePagination>
-    </div>
+    </van-list>
   </div>
 </template>
 
@@ -40,7 +37,9 @@ export default {
   layout: 'app-ldm',
   data() {
     return {
-      isRequest: false,
+      isLoadingMore: true,
+      finished: false,
+      isRequest: true,
       listQuery: {
         authUserId: '',
         doctorType: 2,
@@ -59,21 +58,31 @@ export default {
     this.fetchList()
   },
   methods: {
-    async fetchList() {
+    fetchList: debounce(async function () {
       try {
+        this.isLoadingMore = true
         this.listQuery.authUserId = this.authUserId
         const res = await this.$http.api.fetchDoctorList(this.listQuery)
-        this.list = res.data.list
+        this.list = [...this.list, ...res.data.list]
         this.total = res.data.total
+        this.finished = !res.data.hasNextPage
       } catch (error) {
         console.log(error)
       } finally {
         this.isRequest = false
+        this.isLoadingMore = false
       }
-    },
+    }, 400),
+
     // 搜索
     onSearch() {
       this.listQuery.pageNum = 1
+      this.list = []
+      this.fetchList()
+    },
+    // 加载更多
+    onLoadMore() {
+      this.listQuery.pageNum += 1
       this.fetchList()
     },
     // 页码变化

pages/_template/ldm/database/package.vue

@@ -1,54 +1,57 @@
 <template>
   <div class="page">
-    <div class="page-top flex flex-col justify-center items-center">
-      <img
-        class="logo"
-        src="https://static.caimei365.com/www/authentic/pc/ldm-logo-rect.png"
-      />
-      <div class="name mt-2">
-        Bring you into a new era<br />
-        of high-tech non-invasive beauty care
+    <van-list
+      v-model="isLoadingMore"
+      :finished="finished"
+      :immediate-check="false"
+      :finished-text="total ? '没有更多了' : ''"
+      @load="onLoadMore"
+    >
+      <div class="page-top flex flex-col justify-center items-center">
+        <img
+          class="logo"
+          src="https://static.caimei365.com/www/authentic/pc/ldm-logo-rect.png"
+        />
+        <div class="name mt-2">
+          Bring you into a new era<br />
+          of high-tech non-invasive beauty care
+        </div>
       </div>
-    </div>
-    <div class="page-content">
-      <div class="list">
-        <div
-          class="section flex justify-between items-center"
-          v-for="item in list"
-          :key="item.fileId"
-        >
-          <div class="info">
-            <div class="name" v-text="item.fileName"></div>
-            <div class="download" @click="downloadLink(item)">点击下载</div>
+      <div class="page-content">
+        <div class="list">
+          <div
+            class="section flex justify-between items-center"
+            v-for="item in list"
+            :key="item.fileId"
+          >
+            <div class="info">
+              <div class="name" v-text="item.fileName"></div>
+              <div class="download" @click="downloadLink(item)">点击下载</div>
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 列表为空 -->
-      <SimpleEmpty
-        v-if="!total && !isRequest"
-        description="敬请期待~"
-      ></SimpleEmpty>
-      <!-- 页码 -->
-      <SimplePagination
-        themeType="black"
-        v-if="total > listQuery.pageSize"
-        :total="total"
-        :pageItems="listQuery.pageSize"
-        @change="onPagiantionChange"
-      ></SimplePagination>
-    </div>
+        <!-- 列表为空 -->
+        <SimpleEmpty
+          v-if="!total && !isRequest"
+          description="敬请期待~"
+        ></SimpleEmpty>
+      </div>
+    </van-list>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import downloadLink from '@/utils/download-link'
+import { debounce } from '~/utils'
 
 export default {
   layout: 'app-ldm',
   data() {
     return {
+      isLoadingMore: false,
+      finished: false,
       isRequest: true,
       listQuery: {
         fileType: 2,
@@ -74,23 +77,32 @@ export default {
       downloadLink(url)
     },
     // 获取列表
-    async fetchList() {
+    fetchList: debounce(async function () {
       try {
+        this.isLoadingMore = true
         this.listQuery.authUserId = this.userInfo.authUserId
         const res = await this.$http.api.getFileList(this.listQuery)
-        this.list = res.data.list
+        this.list = [...this.list, ...res.data.list]
+        this.finished = !res.data.hasNextPage
         this.total = res.data.total
       } catch (error) {
         console.log(error)
       } finally {
         this.isRequest = false
+        this.isLoadingMore = false
       }
-    },
+    }, 400),
+
     // 页码变化
     onPagiantionChange(index) {
       this.listQuery.pageNum = index
       this.fetchList()
     },
+    // 加载更多
+    onLoadMore() {
+      this.listQuery.pageNum += 1
+      this.fetchList()
+    },
   },
 }
 </script>

pages/_template/ldm/index.vue

@@ -60,8 +60,9 @@ export default {
       const hasLogin = this.$store.getters.accessToken
       if (item.id > 0 && !hasLogin) {
         const appId = this.$store.getters.appId
+        const accountType = this.$store.getters.accountType
         // 在微信浏览器中使用微信授权登录
-        if (isWeChat() && appId) {
+        if (isWeChat() && appId && accountType === 2) {
           const payload = { authUserId: this.authUserId, type: this.type }
           return toAuthorization(appId, payload)
         }
@@ -161,7 +162,6 @@ export default {
       align-items: center;
       margin-top: 10.9vw;
       .section {
-        display: block;
         width: 80vw;
         height: 48vw;
         background: #f8f8f8;