【金掌桂2022年开门红需求】开门红方案添加原生下载图片的方法

src/views/ebiz/goodStart/GoodStartScheme.vue

@@ -6,7 +6,11 @@
       </van-grid-item>
     </van-grid>
     <van-image-preview id="preview" v-model="isPrevShow" :images="images" :start-position="startPosition" @change="onPageChange" />
-    <van-button class="share-btn" v-show="isPrevShow" type="danger" block @click="shareImg">分享</van-button>
+    <!-- <van-button class="share-btn" v-show="isPrevShow" type="danger" block @click="shareImg">分享</van-button> -->
+    <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>
 </template>
 
@@ -112,6 +116,22 @@ export default {
           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('图片下载失败，请重新下载！')
+      }
     }
   }
 }
@@ -151,4 +171,14 @@ export default {
   left: 0;
   right: 0;
 }
+
+.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>

src/views/ebiz/goodStart/IssueList.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="good-start-scheme bg-white">
+    <div v-if="branchType == '0'">
+      <van-grid :column-num="3">
+        <van-grid-item v-for="(pic, i) in pics" :key="i">
+          <van-image height="200" :src="$assetsUrl + pic.picUrl" @click="prevImg(pic, i)" />
+        </van-grid-item>
+      </van-grid>
+      <van-image-preview id="preview" v-model="isPrevShow" :images="images" :start-position="startPosition" @change="onPageChange" />
+      <!-- <van-button class="share-btn" v-show="isPrevShow" type="danger" block @click="shareImg">分享</van-button> -->
+      <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-else-if="branchType == '1'" class="text-center height100vh">
+      <img class="mt40 w250" src="@/assets/images/pic_page-non.png" />
+      <div class="fs17 c-gray-dark mt40">暂无数据</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Grid, GridItem, Image, ImagePreview, Pagination } from 'vant'
+import { getSchemePics } from '@/api/ebiz/goodStart'
+import { getAgentInfo } from '@/api/ebiz/my/my.js'
+import Vue from 'vue'
+
+// 全局注册
+Vue.use(ImagePreview)
+export default {
+  components: {
+    [Grid.name]: Grid,
+    [GridItem.name]: GridItem,
+    [Image.name]: Image,
+    [Pagination.name]: Pagination
+  },
+  data() {
+    return {
+      isFromService: '',
+      isPrevShow: false,
+      currentPage: 0,
+      pics: [],
+      startPosition: 0,
+      branchType:''
+    }
+  },
+  computed: {
+    images() {
+      const picArr = []
+      for (let pic of this.pics) {
+        picArr.push(this.$assetsUrl + pic.picUrl)
+      }
+      return picArr
+    }
+  },
+  created() {
+    this.isFromService = this.$route.query.from === 'service'
+    this.getAgentInfoFunc()
+    this.getSchemePics()
+    this.interceptAppBtn()
+  },
+  methods: {
+    // 获取代理人信息，区分内外勤
+    async getAgentInfoFunc() {
+      const res = await getAgentInfo({})
+      if (res.result == 0) {
+        // res.branchType 以N打头的是内勤 其他是外勤，0: 外勤，1: 内勤
+        this.branchType = /^N{1}/.test(res.branchType) ? '1' : '0'
+      } else {
+        return this.$toast(res.resultMessage)
+      }
+    },
+    prevChange(index) {
+      this.startPosition = index
+    },
+    interceptAppBtn() {
+      setTimeout(() => {
+        // eslint-disable-next-line no-undef
+        EWebBridge.webCallAppInJs('webview_left_button', {
+          intercept: '1'
+        })
+      }, 100)
+      window.appCallBack = this.appCallBack
+    },
+    appCallBack(data) {
+      if (data.trigger == 'left_button_click') {
+        if (!this.isPrevShow) {
+          if (this.isFromService) {
+            this.$jump({
+              flag: 'service'
+            })
+          } else {
+            this.$jump({
+              flag: 'h5',
+              extra: {
+                title: '开门红专区',
+                forbidSwipeBack: 1,
+                url: location.origin + `/#/goodStart/prefecture`
+              },
+              routerInfo: {
+                path: `/goodStart/prefecture/prefecture`,
+                type: '1'
+              }
+            })
+          }
+        } else {
+          this.isPrevShow = false
+        }
+      }
+    },
+    onPageChange(page) {
+      this.currentPage = page
+    },
+    async getSchemePics() {
+      const param = { operateType: 'goodStart_scheme' }
+      const result = await getSchemePics(param)
+      if (result.result === '0') {
+        this.pics = result.content
+      } else {
+        this.$toast(result.resultMessage)
+      }
+    },
+    prevImg(pic, i) {
+      this.isPrevShow = true
+      this.startPosition = i
+    },
+    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('图片下载失败，请重新下载！')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.height100vh{
+  height: 100vh;
+}
+.good-start-scheme {
+  padding-bottom: 20px;
+}
+
+/deep/ .van-grid-item__content {
+  padding: 5px;
+}
+
+.share-btn {
+  position: fixed;
+  bottom: 0;
+  z-index: 10000;
+}
+
+/deep/ .van-image-preview__image {
+  bottom: auto;
+}
+
+/deep/ .van-pagination__item {
+  color: #ff0033;
+}
+
+/deep/ .van-pagination__item--active {
+  background-color: #ff0033;
+  color: #fff;
+}
+
+#pagination {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.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>

src/views/ebiz/goodStart/NewsPaper.vue

@@ -2,12 +2,12 @@
   <div class="good-start-scheme bg-white">
     <div v-if="isShow == '1'">
       <img class="pics" :src="pics" alt="" />
-      <div class="flex justify-content-s bottom-btn bottom20">
-        <van-button class="" square type="default" size="large" @click="shareImg" v-no-more-click="1000"> 分享 </van-button>
-        <van-button class="" square type="danger" size="large" @click="composeWxHeadConfig" v-no-more-click="1000"> 下载 </van-button>
+      <div class="flex justify-content-s bottom-btn bottom15 border-color">
+        <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-else-if="isShow == '0'" class="text-center">
+    <div v-else-if="isShow == '0'" class="text-center height100vh">
       <img class="mt40 w250" src="@/assets/images/pic_page-non.png" />
       <div class="fs17 c-gray-dark mt40">暂无数据</div>
     </div>
@@ -44,27 +44,23 @@ export default {
     },
     appCallBack(data) {
       if (data.trigger == 'left_button_click') {
-        if (!this.isPrevShow) {
-          if (this.isFromService) {
-            this.$jump({
-              flag: 'service'
-            })
-          } else {
-            this.$jump({
-              flag: 'h5',
-              extra: {
-                title: '开门红专区',
-                forbidSwipeBack: 1,
-                url: location.origin + `/#/goodStart/prefecture`
-              },
-              routerInfo: {
-                path: `/goodStart/prefecture/prefecture`,
-                type: '1'
-              }
-            })
-          }
+        if (this.isFromService) {
+          this.$jump({
+            flag: 'service'
+          })
         } else {
-          this.isPrevShow = false
+          this.$jump({
+            flag: 'h5',
+            extra: {
+              title: '开门红专区',
+              forbidSwipeBack: 1,
+              url: location.origin + `/#/goodStart/prefecture`
+            },
+            routerInfo: {
+              path: `/goodStart/prefecture/prefecture`,
+              type: '1'
+            }
+          })
         }
       }
     },
@@ -86,12 +82,31 @@ export default {
           img: this.pics
         }
       })
+    },
+    // 原生下载图片的方法
+    downLoadImagesFunc() {
+      if (this.pics) {
+        // eslint-disable-next-line no-undef
+        EWebBridge.webCallAppInJs('download', {
+          name: '开门红实时贺报.png',
+          url: this.pics
+        }).then(() => {
+          console.log('下载完成')
+        }).catch(() => {
+          this.$toast.fail('贺报下载失败，请重新下载！')
+        })
+      } else {
+        this.$toast.fail('贺报下载失败，请重新下载！')
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.height100vh{
+  height: 100vh;
+}
 .pics {
   position: fixed;
   top: 0;
@@ -106,10 +121,9 @@ export default {
   -o-background-size: cover;
   background-position: center 0;
 }
-.bottom20 {
+.border-color {
   border: 2px solid;
   border-image: radial-gradient(circle, rgba(255, 233, 124, 1), rgba(222, 144, 34, 1)) 2 2;
-  bottom: 20px;
 }
 /deep/ .van-button--danger {
   background: linear-gradient(to right, #f26e43, #ac0209) !important; /*设置按钮为渐变颜色*/

src/views/ebiz/goodStart/Prefecture.vue

@@ -3,7 +3,7 @@
     <div class="menu-container">
       <van-grid :column-num="2" :border="false">
         <van-grid-item v-for="(item, i) in menuList" :key="i" @click="onMenuClicked(item.targetUrl)">
-          <img :src="item.img" />
+          <img :src="item.h5Img" />
           <span class="menu-text">{{ item.title }}</span>
         </van-grid-item>
       </van-grid>
@@ -23,14 +23,7 @@ export default {
   },
   data() {
     return {
-      menuList: [
-        { name: '开门红业绩排名', icon: 'images/goodStart/performanceRank.png', route: '/goodStart/performanceReport' },
-        { name: '上头条', icon: 'images/goodStart/topOne.png', route: '/congratulation/congratulationTop' },
-        { name: '大单榜', icon: 'images/goodStart/bigOrder.png', route: '/congratulation/congratulationList' },
-        { name: '微信头像生成器', icon: 'images/goodStart/wechat.png', route: '/my/userWxHead2' },
-        { name: '开门红方案', icon: 'images/goodStart/goodStart.png', route: '/goodStart/goodStartScheme' },
-        { name: '百宝箱', icon: 'images/goodStart/treasure.png', route: '/goodStart/treasure' }
-      ]
+      menuList: []
     }
   },
   mounted() {
@@ -106,7 +99,7 @@ export default {
   border-radius: 12px;
   width: 335px;
   height: 390px;
-  margin-top: 185px;
+  margin-top: 160px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;