ebiz-h5/src/views/ebiz/goodStart/GoodStartScheme.vue

<template>
  <div class="good-start-scheme bg-white">
    <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>
</template>

<script>
import { Grid, GridItem, Image, ImagePreview, Pagination } from 'vant'
import { getSchemePics } from '@/api/ebiz/goodStart'
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
    }
  },
  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.getSchemePics()
    this.interceptAppBtn()
  },
  methods: {
    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]
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.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;
}
</style>