【桂冠捐赠证书】桂冠捐赠证书，本月和时间选择器条件查询

src/api/ebiz/laurelClub/laurelClub.js

@@ -221,5 +221,11 @@ export function editFavorDataUrl(data) {
   })
 }
 
-
+//桂冠捐赠证书查询
-
+export function posterGenerateQuery(data) {
+  return request({
+    url: getUrl('/agent/laure/posterGenerateQuery', 1),
+    method: 'post',
+    data
+  })
+}

src/router/ebiz/laurelClub.js

@@ -4,6 +4,7 @@ const LaurelData = () => import('@/views/ebiz/laurelClub/LaurelData')
 const MembershipList = () => import('@/views/ebiz/laurelClub/MembershipList')
 const StarProcess = () => import('@/views/ebiz/laurelClub/StarProcess')
 const ExclusivePosters = () => import('@/views/ebiz/laurelClub/ExclusivePosters')
+const LaurelDonation = () => import('@/views/ebiz/laurelClub/LaurelDonation')
 
 
 export default [
@@ -51,6 +52,15 @@ export default [
       title: '桂冠专属海报',
       index: 5
     }
+  },
+  {
+    path: '/laurelClub/LaurelDonation',
+    name: 'LaurelDonation',
+    component: LaurelDonation,
+    meta: {
+      title: '桂冠专属海报',
+      index: 5
+    }
   }
 ]
 

src/views/ebiz/common/risk-rules.js

@@ -186,6 +186,7 @@ export default {
         res => {
           if (res.result == 0) {
             flag.manageComCode = res.manageComCode.substring(2, 4)
+            flag.jobNo = res.jobNo
              // branchType N1、1代表个险渠道 和 N5、5 代表中介渠道，N代表内勤
             if (res.branchType == 'N1' || res.branchType == '1') {
               flag.branchTypeVal = 'G'

src/views/ebiz/laurelClub/LaurelDonation.vue

@@ -0,0 +1,281 @@
+<template>
+  <div class='exclusivePosters-container bg' id='bg'>
+    <!-- 顶部选择时间模块   -->
+    <div class='pt10 pb10' style='background-color: #f5f5f5'>
+      <div class='m-filterDate'>
+        <div class='number'>
+          <span :class="[currentIndex? 'checked' : 'unChecked']" @click='selectThisMonth(currentIndex)'>本月</span>
+        </div>
+        <div class='filterTime'>
+          <FieldDatePicter
+            label=''
+            name=''
+            :isDefault='true'
+            :value.sync='datePickerObj.filterDate'
+            type='year-month'
+            :flag='true'
+            defaultStyle='style03'
+            placeholder='时间筛选'
+            @confirm="onDateConfirm($event, '2')"
+            :maxDate='datePickerObj.maxDate'
+            :minDate='datePickerObj.minDate'
+          ></FieldDatePicter>
+        </div>
+      </div>
+    </div>
+    <div class='canvas-div' ref='element'>
+      <div style='position: relative;overflow-x: hidden;'>
+        <img :src="path" class="poster_main-image"/>
+        <div class='bottom_btn'>
+          <van-button class='share-posters' type='default' @click='shareFunc()' v-no-more-click="1000">分享</van-button>
+          <van-button class='download-posters' type='default' @click='downLoadImagesFunc()' v-no-more-click="1000">下载</van-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
+import { posterGenerateQuery } from '@/api/ebiz/laurelClub/laurelClub'
+import riskRules from '@/views/ebiz/common/risk-rules'
+import config from '@/config'
+
+export default {
+  name: 'exclusivePosters',
+  components: { FieldDatePicter },
+  data() {
+    return {
+      agentCode:'',// 工号
+      path:'', //图片路径
+      currentIndex: true, // 当前是否选中本月的tab按钮
+      // 选择时间模块使用到的数据对象
+      datePickerObj: {
+        filterDate: '', // 当前的时间（年月）
+        maxDate: new Date(), // 可以选择的最大时间
+        minDate: new Date('2022-06') // 可以选择的最小时间
+      }
+    }
+  },
+  async mounted() {
+    // let date = new Date()
+    // let month = date.getMonth() + 1
+    // if (month <= 9) {
+    //     month = '0' + month
+    // }
+    //获取代理人管理机构 52贵州 45广西
+    let dataReturn = await riskRules.getAgentInfoFunc(this)
+    this.agentCode = dataReturn.jobNo
+    //默认展示当月数据
+    this.datePickerObj.filterDate = this.getCurrentDateFunc()
+    // this.canvasHeight = this.$refs.element.offsetHeight
+    // 调用获取当前海报数据的方法
+    this.queryPosterDataFunc()
+  },
+  methods: {
+    /**
+     * @Description: 获取（返回）当前的时间（年-月）的方法
+     * @author:zhangqi
+     * @Date:2021-08-25
+     */
+    getCurrentDateFunc() {
+      let date = new Date()
+      let year = date.getFullYear()
+      let month = (date.getMonth() + 1) <= 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+      return year + '-' + month
+    },
+
+    /**
+     * @Description: 左上角切换选择月份的方法
+     * @params: bool--当前是否是选中状态
+     * @author:zhangqi
+     * @Date:2021-08-25
+     */
+    selectThisMonth(bool) {
+      if (!bool) {
+        // 选中左上方'本月'的tab按钮
+        this.currentIndex = true
+        // // 将当前的时间（年-月）赋值给变量
+        this.datePickerObj.filterDate = this.getCurrentDateFunc()
+        // 调用获取当前海报数据的方法
+        this.queryPosterDataFunc()
+      }
+    },
+
+    /**
+     * @Description: 右上角切换选择月份的方法
+     * @author:zhangqi
+     * @Date:2021-08-25
+     */
+    onDateConfirm(data) {
+      // 如果当前选择的时间是当前本月的时间，则选中左侧‘本月’tab按钮，否则取消选中
+      if (data === this.getCurrentDateFunc()) {
+        this.currentIndex = true
+      } else {
+        this.currentIndex = false
+      }
+      // 调用获取当前海报数据的方法
+      this.queryPosterDataFunc()
+    },
+
+    /**
+     * @Description: 获取当前海报数据的方法
+     * @author:zhangqi
+     * @Date:2021-08-25
+     */
+    queryPosterDataFunc() {
+      // let dateArr = this.datePickerObj.filterDate.split('-')
+      // let params = { 'monthStr': dateArr[0] + dateArr[1] }
+      let params = { agentCode:this.agentCode,donationDateStart: this.datePickerObj.filterDate }
+      posterGenerateQuery(params).then(res => {
+        if (res.result == 0) {
+          this.path = res.content
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    /**
+     * @Description: 原生分享微信好友和微信朋友圈的方法
+     * @author:zhangqi
+     * @Date:2021-08-26
+     */
+    shareFunc() {
+      // eslint-disable-next-line no-undef
+      EWebBridge.webCallAppInJs('bridge', {
+        flag: 'share',
+        extra: {
+          shareType: '1',
+          img: this.path
+        }
+      })
+    },
+
+    /**
+     * @Description: 原生下载图片的方法
+     * @author:zhangqi
+     * @Date:2021-08-26
+     */
+    downLoadImagesFunc() {
+      if (this.path) {
+        // eslint-disable-next-line no-undef
+        EWebBridge.webCallAppInJs('download', {
+          name: '桂冠专属海报.png',
+          url: this.path
+        }).then(() => {
+          console.log('下载完成')
+        }).catch(() => {
+          this.$toast.fail('海报下载失败，请重新下载！')
+        })
+      } else {
+        this.$toast.fail('海报下载失败，请重新下载！')
+      }
+
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.bg {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+//顶部-时间选择
+.m-filterDate {
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  // height: 7vh;
+  .number {
+    flex-shrink: 0;
+    margin: 0 7px;
+    font-size: 12px;
+
+    .unChecked {
+      background-color: #fff;
+      color: #333333;
+      border: 1px solid #DD1818;
+      border-radius: 6px;
+      width: 54px;
+      height: 24px;
+      line-height: 24px;
+      display: inline-block;
+      text-align: center;
+    }
+
+    .checked {
+      background-color: #DD1818;
+      color: #fff;
+      border: 1px solid #DD1818;
+      border-radius: 6px;
+      width: 54px;
+      height: 24px;
+      line-height: 24px;
+      display: inline-block;
+      text-align: center;
+    }
+  }
+
+  .filterTime {
+    width: 70px;
+    margin-right: 5px;
+    /deep/span{
+      color: #DD1818;
+    }
+  }
+}
+
+.canvas-div {
+  flex: 1;
+
+  .poster_main-image {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bottom_btn {
+    display: flex;
+    justify-content: space-evenly;
+    width: 100%;
+    // margin-top: 15px;
+    position: absolute;
+    bottom: 24px;
+    left: 2px;
+    z-index: 100;
+
+    .share-posters {
+      width: 50%;
+      height: 50px;
+      font-size: 17px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      letter-spacing: 1px;
+      color: #FFFFFF;
+      border-radius: 0px;
+      // border: 1px solid #FFE97C;
+      background: linear-gradient(135deg, #DD1818 0%, #910A0A 100%);
+    }
+
+    .download-posters {
+      width: 50%;
+      height: 50px;
+      font-size: 17px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      letter-spacing: 1px;
+      color: #FFFFFF;
+      border-radius: 0px;
+      // border: 1px solid #FFE97C;
+      background: linear-gradient(135deg, #DD1818 0%, #910A0A 100%);
+    }
+  }
+}
+
+
+</style>