【金掌桂2022年开门红需求】大单榜预览图片功能调整，分享功能，下载功能

src/api/ebiz/poster/poster.js

@@ -54,3 +54,11 @@ export function shareUrlWithQR(data) {
     data
   })
 }
+// 开门红大单榜海报接口
+export function queryBigPosters(data) {
+  return request({
+    url: getUrl('/sale/makePosters/queryBigPosters', 1),
+    method: 'post',
+    data
+  })
+}

src/views/ebiz/congratulation/CongratulationList.vue

@@ -2,13 +2,18 @@
   <div class="wrapper">
     <div v-if="posterList.length !== 0">
       <van-grid :column-num="3" :gutter="5">
-        <van-grid-item v-for="(item, index) in posterList" :key="index" @click="previewImg(index)">
-          <van-image class="fill" :src="item.narrowUrl" />
+        <van-grid-item v-for="(item, index) in posterList" :key="index" @click="previewImg(item, index)">
+          <van-image class="fill" :src="item.posterUrl" />
         </van-grid-item>
       </van-grid>
       <div class="pageWrapper">
         <van-pagination class="bottom-btn" v-model="pageNum" :page-count="totalPage" @change="pageChange" />
       </div>
+      <van-image-preview id="preview" v-model="isPrevShow" :images="images" :start-position="startPosition" @change="onPageChange" />
+      <div class="flex justify-content-s bottom-btn bottom15 border-color" v-show="isPrevShow">
+        <van-button square type="default" size="large" @click="shareImg" v-no-more-click="1000"> 分享 </van-button>
+        <van-button square type="danger" size="large" @click="downLoadImagesFunc" v-no-more-click="1000"> 下载 </van-button>
+      </div>
     </div>
     <div v-if="posterList.length === 0" class="text-center">
       <img class="mt40 w250" src="@/assets/images/pic_page-non.png" />
@@ -19,8 +24,11 @@
 
 <script>
 import { Sticky, Grid, GridItem, Pagination, ImagePreview, List, Image } from 'vant'
-import { getPosterList } from '@/api/ebiz/poster/poster'
-import config from '@/config'
+import { queryBigPosters } from '@/api/ebiz/poster/poster'
+// import config from '@/config'
+import Vue from 'vue'
+
+Vue.use(ImagePreview)
 export default {
   name: 'posterList',
   components: {
@@ -33,29 +41,41 @@ export default {
   },
   data() {
     return {
-      posterType: 'hb',
+      // posterType: 'hb',
       srcUrl: '@/images/u10199.png',
       pageNum: 1,
       pageSize: 9,
       posterList: [], // 贺报列表
       realImgUrls: [],
-      index: 0,
-      totalPage: 0
+      // index: 0,
+      totalPage: 0,
+      isPrevShow: false,
+      startPosition: 0,
+      currentPage: 0,      
+    }
+  },
+  computed: {
+    images() {
+      const picArr = []
+      for (let pic of this.posterList) {
+        picArr.push(pic.posterUrl)
+      }
+      return picArr
     }
   },
   created() {
     this.getPostList()
   },
   methods: {
-    onChange(index) {
-      this.index = index
+    onPageChange(index) {
+      this.currentPage = index
     },
     // 贺报列表查询
     async getPostList() {
       let param = {
-        posterInfoDTO: {
-          posterType: this.posterType
-        },
+        // posterInfoDTO: {
+        //   posterType: this.posterType
+        // },
         pageNum: this.pageNum,
         pageSize: this.pageSize
       }
@@ -64,30 +84,60 @@ export default {
         forbidClick: true,
         loadingType: 'spinner'
       })
-      let res = await getPosterList(param)
+      let res = await queryBigPosters(param)
       if (res.result == 0) {
         this.realImgUrls.splice(0)
-        this.totalPage = res.pageInfo.pages
-        this.posterList = res.pageInfo.list
+        this.totalPage = res.content.pages
+        this.posterList = res.content.list
         for (let item of this.posterList) {
-          let narrowUrl = (config.imgDomain + `/returnImageStream?a=b.jpg&imgPath=${item.posterNarrowUrl}`).replace(/\+/g, '%2B')
-          let url = (config.imgDomain + `/returnImageStream?a=b.jpg&imgPath=${item.posterUrl}`).replace(/\+/g, '%2B')
-          item.narrowUrl = narrowUrl
-          this.realImgUrls.push(url)
+          // let narrowUrl = (config.imgDomain + `/returnImageStream?a=b.jpg&imgPath=${item.posterNarrowUrl}`).replace(/\+/g, '%2B')
+          // let url =       (config.imgDomain + `/returnImageStream?a=b.jpg&imgPath=${item.posterUrl}`).replace(/\+/g, '%2B')
+          // item.narrowUrl = narrowUrl
+          this.realImgUrls.push(item.posterUrl)
         }
       } else {
         this.$toast(res.resultMessage)
       }
     },
-    previewImg(index) {
-      ImagePreview({
-        images: this.realImgUrls,
-        startPosition: index
-      })
+    previewImg(item, index) {
+      // this.isPrevShow = true
+      // ImagePreview({
+      //   images: this.realImgUrls,
+      //   startPosition: index
+      // })
+       this.isPrevShow = true
+      this.startPosition = index
     },
     pageChange(pageNum) {
       this.pageNum = pageNum
       this.getPostList()
+    },
+    shareImg() {
+      console.log(this.images[this.currentPage])
+      // eslint-disable-next-line no-undef
+      EWebBridge.webCallAppInJs('bridge', {
+        flag: 'share',
+        extra: {
+          shareType: '1',
+          img: this.images[this.currentPage]
+        }
+      })
+    },
+    // 原生下载图片的方法
+    downLoadImagesFunc() {
+      if (this.images[this.currentPage]) {
+        // eslint-disable-next-line no-undef
+        EWebBridge.webCallAppInJs('download', {
+          name: '开门红方案.png',
+          url: this.images[this.currentPage]
+        }).then(() => {
+          console.log('下载完成')
+        }).catch(() => {
+          this.$toast.fail('图片下载失败，请重新下载！')
+        })
+      } else {
+        this.$toast.fail('图片下载失败，请重新下载！')
+      }
     }
   }
 }
@@ -138,4 +188,13 @@ img {
   background-color: #ff4040;
   color: #fff;
 }
+.border-color {
+  z-index: 9999;
+  border: 2px solid;
+  border-image: radial-gradient(circle, rgba(255, 233, 124, 1), rgba(222, 144, 34, 1)) 2 2;
+}
+/deep/ .van-button--danger {
+  background: linear-gradient(to right, #f26e43, #ac0209) !important; /*设置按钮为渐变颜色*/
+  border: none !important;
+}
 </style>