updated

package-lock.json

@@ -19,6 +19,7 @@
         "vant": "^2.13.0",
         "vue": "^2.6.11",
         "vue-router": "^3.2.0",
+        "vue-scroller": "^2.2.4",
         "vuex": "^3.4.0",
         "vuex-persistedstate": "^4.1.0",
         "weixin-js-sdk": "^1.6.0"
@@ -9893,7 +9894,7 @@
     },
     "node_modules/jweixin-module": {
       "version": "1.6.0",
-      "resolved": "https://registry.npmmirror.com/jweixin-module/-/jweixin-module-1.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/jweixin-module/-/jweixin-module-1.6.0.tgz",
       "integrity": "sha512-dGk9cf+ipipHmtzYmKZs5B2toX+p4hLyllGLF6xuC8t+B05oYxd8fYoaRz0T30U2n3RUv8a4iwvjhA+OcYz52w=="
     },
     "node_modules/killable": {
@@ -15971,6 +15972,14 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
       "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
     },
+    "node_modules/vue-scroller": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/vue-scroller/-/vue-scroller-2.2.4.tgz",
+      "integrity": "sha512-UcQp4OJri7uYLdYSLWQ5rKEpnehlGkAf2X40LQllzscQuGFNl98pQAQO5yk9B3QGF0kI8sOOnyk1CerWX6zNmQ==",
+      "dependencies": {
+        "vue": "^2.2.6"
+      }
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -24952,7 +24961,7 @@
     },
     "jweixin-module": {
       "version": "1.6.0",
-      "resolved": "https://registry.npmmirror.com/jweixin-module/-/jweixin-module-1.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/jweixin-module/-/jweixin-module-1.6.0.tgz",
       "integrity": "sha512-dGk9cf+ipipHmtzYmKZs5B2toX+p4hLyllGLF6xuC8t+B05oYxd8fYoaRz0T30U2n3RUv8a4iwvjhA+OcYz52w=="
     },
     "killable": {
@@ -29922,6 +29931,14 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
       "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
     },
+    "vue-scroller": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/vue-scroller/-/vue-scroller-2.2.4.tgz",
+      "integrity": "sha512-UcQp4OJri7uYLdYSLWQ5rKEpnehlGkAf2X40LQllzscQuGFNl98pQAQO5yk9B3QGF0kI8sOOnyk1CerWX6zNmQ==",
+      "requires": {
+        "vue": "^2.2.6"
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

package.json

@@ -20,6 +20,7 @@
     "vant": "^2.13.0",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
+    "vue-scroller": "^2.2.4",
     "vuex": "^3.4.0",
     "vuex-persistedstate": "^4.1.0",
     "weixin-js-sdk": "^1.6.0"

src/components/bottom-detector.vue

@@ -0,0 +1,53 @@
+<template>
+    <div style="text-align: center;font-size: 3.4vw;color: #999;">
+      <div v-if="loadingMore">加载中</div>
+      <div v-if="noMore">没有更多了</div>
+    </div>
+  </template>
+<script>
+export default {
+  props: {
+    loadingMore: {
+      type: Boolean,
+      required: true
+    },
+    distance: {
+      type: Number,
+      default: 50
+    },
+    noMore: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    window.addEventListener('scroll', this.listenBottomOut)
+    this.element = document.documentElement
+  },
+  destroyed () {
+    window.removeEventListener('scroll', this.listenBottomOut, false)
+  },
+  data () {
+    return {
+      element: null,
+      isLock: false
+    }
+  },
+  methods: {
+    listenBottomOut () {
+      this.isLock = true
+      setTimeout(() => {
+        if (this.noMore || !this.loadingMore) return
+        if (!this.isLock) return
+        const scrollTop = this.element.scrollTop || document.body.scrollTop
+        const clientHeight = this.element.clientHeight
+        const scrollHeight = this.element.scrollHeight
+        if (scrollTop + clientHeight >= scrollHeight - this.distance) {
+          this.$emit('arriveBottom')
+          this.isLock = false
+        }
+      }, 3000)
+    }
+  }
+}
+</script>

src/components/poster.vue

@@ -2,91 +2,73 @@
   <div class="poster">
     <van-overlay :show="show" @click="show = false, showPoster = false" class="overlay">
       <div class="wrapper">
-        <div id="poster">
-          <div class="poster-img">
-            <div class="title">
-              <div class="title-image">
-                <van-image src="" width="100%" height="100%"></van-image>
-                <div class="text">
-                  <div class="name">{{ dataInfo.name }}</div>
-                  <van-image src=""></van-image>
-                </div>
-              </div>
+        <img :src="link" style="width: 76vw;
+        height: 124vw;
+        margin-top: 10vw;" alt="">
+      </div>
+    </van-overlay>
+    <van-share-sheet class="sheet" v-model="showPoster" :options="options" @select="onSelect" :overlay="false" />
+    <div id="poster" ref="poster">
+      <div class="poster-img">
+        <div class="title">
+          <div class="title-image">
+            <van-image src="" width="100%" height="100%"></van-image>
+            <div class="text">
+              <div class="name">{{ dataInfo.name }}</div>
+              <van-image src=""></van-image>
             </div>
-            <div class="card">
-              <div
-                class="card-mine"
-                :style="{
-                  backgroundImage: `url(${imgUrl})`,
-                  backgroundSize: '100% 100%',
-                }"
-              >
-                <div class="logo">
-                  <van-image
-                    src="https://static.caimei365.com/app/img/icon/logo-fanbai.png"
-                    mode=""
-                    class="titleImgUrl"
-                    cross
-                  ></van-image>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-mine" :style="{
+            backgroundImage: `url(${imgUrl})`,
+            backgroundSize: '100% 100%',
+          }">
+            <div class="logo">
+              <van-image src="https://static.caimei365.com/app/img/icon/logo-fanbai.png" mode="" class="titleImgUrl"
+                cross></van-image>
+            </div>
+            <div class="card-contain">
+              <div style="display: flex">
+                <div class="card-head">
+                  <van-image :src="userInfo.image && userInfo.image.length > 12
+                      ? userInfo.image
+                      : 'https://static.caimei365.com/app/img/icon/default-head-new.png'
+                    " mode="" class="head"></van-image>
                 </div>
-                <div class="card-contain">
-                  <div style="display: flex">
-                    <div class="card-head">
-                      <van-image
-                        :src="
-                          userInfo.image && userInfo.image.length > 12
-                            ? userInfo.image
-                            : 'https://static.caimei365.com/app/img/icon/default-head-new.png'
-                        "
-                        mode=""
-                        class="head"
-                      ></van-image>
-                    </div>
-                    <div class="card-info">
-                      <div class="card-info-head">
-                        <div class="card-name">
-                          {{ userInfo.linkMan }}
-                        </div>
-                        <div class="card-info-tab">客户经理</div>
-                      </div>
-                      <div class="card-info-iphone">
-                        {{
-                          userInfo.mobile
-                            ? userInfo.mobile.replace(/(?=(\d{4})+$)/g, "-")
-                            : ""
-                        }}
-                      </div>
+                <div class="card-info">
+                  <div class="card-info-head">
+                    <div class="card-name">
+                      {{ userInfo.linkMan }}
                     </div>
+                    <div class="card-info-tab">客户经理</div>
                   </div>
-                  <div class="card-qrcode">
-                    <div class="qrcode-message">
-                      <van-image
-                        :src="userInfo.qrCode || ''"
-                        class="qrcode"
-                        mode=""
-                      ></van-image>
-                    </div>
-                    <div class="tips">长按或扫二维码—-联系我-—</div>
+                  <div class="card-info-iphone">
+                    {{
+                      userInfo.mobile
+                      ? userInfo.mobile.replace(/(?=(\d{4})+$)/g, "-")
+                      : ""
+                    }}
                   </div>
                 </div>
               </div>
+              <div class="card-qrcode">
+                <div class="qrcode-message">
+                  <van-image :src="userInfo.qrCode || ''" class="qrcode" mode=""></van-image>
+                </div>
+                <div class="tips">长按或扫二维码—-联系我-—</div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </van-overlay>
-    <van-share-sheet
-      class="sheet"
-      v-model="showPoster"
-      :options="options"
-      @select="onSelect"
-      :overlay="false"
-    />
+    </div>
   </div>
 </template>
 
 <script>
 import html2Canvas from 'html2canvas'
+import { Toast } from 'vant'
 
 export default {
   props: {
@@ -111,25 +93,39 @@ export default {
           icon: 'https://static.caimei365.com/app/mini-distribution/saveImage.png',
           id: 1
         }
-      ]
+      ],
+      link: ''
     }
   },
   watch: {
     showPoster (val) {
       if (!val) {
-        this.show = false
         this.showPoster = false
       } else {
         this.getPosterImageUrl()
       }
+    },
+    userInfo: {
+      handler (val) {
+        if (val) {
+          console.log(val)
+        }
+      },
+      deep: true
     }
   },
   methods: {
-    onSelect () {},
+    onSelect () {
+      Toast.success('请长按图片分享好友或保存到本地')
+      this.showPoster = false
+    },
     getPosterImageUrl () {
-      const html = document.getElementById('poster')
-      html2Canvas(html, { width: html.offsetWidth, height: html.offsetHeight, useCORS: true, allowTaint: true }).then(canvas => {
+      const html = this.$refs.poster
+      console.log('html: ' + html)
+      html2Canvas(html, { width: html.clientWidth, height: html.clientHeight, useCORS: true, allowTaint: true }).then(canvas => {
         console.log(canvas)
+        this.link = canvas.toDataURL('image/jpg')
+        // console.log('link: ' + this.link)
       })
     }
   }
@@ -142,6 +138,7 @@ export default {
     z-index: 100;
   }
 }
+
 .wrapper {
   display: flex;
   justify-content: center;
@@ -149,16 +146,21 @@ export default {
 }
 
 #poster {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
   margin-top: 10vw;
   width: 76vw;
   height: 124vw;
   background: url("https://static.caimei365.com/app/img/icon/bgImage.png") 100%;
   padding: 2vw;
   box-sizing: border-box;
+
   .poster-img {
     overflow: hidden;
     border-radius: 1.2vw;
     height: 100%;
+
     .title {
       width: 100%;
       height: 72%;
@@ -166,28 +168,34 @@ export default {
       box-sizing: border-box;
       border-radius: 1.1vw;
       padding: 2.7vw;
+
       .title-image {
         width: 100%;
         height: 64vw;
       }
+
       .text {
         display: flex;
         margin-top: 2vw;
         justify-content: space-between;
+
         .name {
           width: 40vw;
           color: #333;
           font-size: 3vw;
           line-height: 5vw;
         }
+
         ::v-deep .van-image {
           width: 15vw;
           height: 15vw;
         }
       }
     }
+
     .card {
       margin-top: 2vw;
+
       .card-mine {
         width: 100%;
         height: 28%;
@@ -196,32 +204,39 @@ export default {
         opacity: 1;
         box-sizing: border-box;
         padding: 2vw 3vw;
+
         .titleImgUrl {
           width: 22vw;
           height: 6vw;
         }
+
         .card-contain {
           display: flex;
           align-items: center;
           justify-content: space-between;
+
           .head {
             width: 12vw;
             height: 12vw;
             border-radius: 50%;
             object-fit: contain;
           }
+
           .card-info {
             margin-left: 2.2vw;
           }
+
           .card-info-head {
             display: flex;
             align-items: center;
             margin-bottom: 1.7vw;
+
             .card-name {
               color: #ffffff;
               font-size: 3.2vw;
               font-weight: bold;
             }
+
             .card-info-tab {
               width: 15vw;
               background-color: #ffbb00;
@@ -233,20 +248,24 @@ export default {
               border-radius: 1.2vw;
             }
           }
+
           .card-info-iphone {
             color: #ffffff;
             font-size: 3.2vw;
           }
+
           .card-qrcode {
             display: flex;
             flex-direction: column;
             align-items: center;
+
             .qrcode {
               width: 12vw;
               height: 12vw;
               object-fit: contain;
               margin-bottom: 1vw;
             }
+
             .tips {
               font-size: 3vw;
               color: #fff;

src/main.js

@@ -7,7 +7,9 @@ import './permission' // 路由跳转
 import '@/components/index' // 自动导入公共组件
 import Toast from '@/plugin/toast'
 import '@/plugin/jsSdk'
+import VueScroller from 'vue-scroller'
 
+Vue.use(VueScroller)
 Vue.config.productionTip = false
 Vue.use(Toast)
 

src/plugin/jsSdk.js

@@ -7,7 +7,7 @@ const dev = process.env.EVN
 
 Vue.prototype.$wxReady = async (callback, apiList = []) => {
   try {
-    const url = 'https://sell-b.caimei365.com'
+    const url = 'https://sell-b.caimei365.com/#/shopping-mall'
     // console.log('当前页面地址：', url)
     const res = await shareSDK({ url: url, appId })
     console.log(res)
@@ -21,6 +21,7 @@ Vue.prototype.$wxReady = async (callback, apiList = []) => {
     })
     wx.ready(callback(wx))
     wx.error(function (error) {
+      console.log(error)
       throw error
     })
   } catch (error) {

src/views/ins-intention-report/index.vue

@@ -36,6 +36,11 @@
         </template>
       </order-report-card>
     </div>
+    <bottom-detector
+      :loadingMore="hasNextPage"
+      :noMore="!hasNextPage"
+      @arriveBottom="getMoreInfo"
+    />
     <div class="to-report">
       <van-button color="#FF5B00" @click="$router.push('/ins-intention-add')"
         >去报备</van-button
@@ -72,9 +77,14 @@ export default {
     this.getInsIntentionReportList(this.active)
   },
   methods: {
+    getMoreInfo () {
+      this.formData.pageNo += 1
+      this.getInsIntentionReportList(this.active)
+    },
     handlerSelect ($event) {
       this.active = $event
       this.dataList = []
+      this.formData.pageNo = 1
       this.getInsIntentionReportList($event)
     },
     onSearch ($event) {
@@ -95,7 +105,7 @@ export default {
       }
       const { results: data, hasNextPage } = await insIntentionReportList(form)
       this.hasNextPage = hasNextPage
-      this.dataList = data
+      this.dataList = [...data, ...this.dataList]
     }
   }
 }

src/views/shopping-mall/detail.vue

@@ -25,7 +25,7 @@ import GoodsSku from './components/goods-sku'
 import GoodsDetail from './components/goods-detail'
 import { productDetail } from '@/api/institutionApi/product'
 import { getUserInfo } from '@/api/userApi/login'
-import { getBase64Image } from '@/config/index'
+
 export default {
   components: { GoodsClassification, GoodsImage, GoodsShare, GoodsSku, GoodsDetail },
   data () {
@@ -82,9 +82,6 @@ export default {
       const data = await getUserInfo({ userId: this.suid ? this.suid : this.$store.getters.userId })
       this.userInfo = data
       // this.dataInfo.productImage = await getImage2Blob(this.dataInfo.productImage)
-      this.userInfo.image = await getBase64Image(this.userInfo.image)
-      this.userInfo.qrCode = await getBase64Image(this.userInfo.qrCode)
-      console.log(this.userInfo)
     }
   }
 }

src/views/shopping-mall/index.vue

@@ -1,6 +1,13 @@
 <template>
-  <div class="shop-mall">
-    <store-card v-for="i in dataList" :storeInfo="i" :key="i.id" @handlerClick="handlerClick"/>
+  <div>
+    <div class="shop-mall">
+      <store-card v-for="i in dataList" :storeInfo="i" :key="i.id" @handlerClick="handlerClick"/>
+    </div>
+    <bottom-detector
+      :loadingMore="hasNextPage"
+      :noMore="!hasNextPage"
+      @arriveBottom="getMoreInfo"
+    />
   </div>
 </template>
 
@@ -25,12 +32,16 @@ export default {
     this.initAppMessageShareData()
   },
   methods: {
+    getMoreInfo () {
+      this.pageNum += 1
+      this.productList()
+    },
     handlerClick ($event) {
       this.$router.push(`/goods-detail?productId=${$event.productId}&typeId=0`)
     },
     async productList () {
       const { results: data, hasNextPage } = await productList(this.formData)
-      this.dataList = data
+      this.dataList = [...data, ...this.dataList]
       this.hasNextPage = hasNextPage
     },
     // 分享当前页面