hlm_pl_mall_h5/pages/HeaderMore.vue

<template>
  <view class="more-box-wrapper">
    <view class="div more-box">
        <view class="div more-item" @click="goNavigate('/pages/home/index/Index',false,1)"><text class="i iconfont">&#xe6b2;</text>首页</view>
        <view class="div more-item" @click="goNavigate('/pages/member/inform/InformForm',{goods_id:goods_id})" v-if="routerName === 'pages/home/goodsdetail/Goodsdetail'"><text class="i iconfont">&#xe6a3;</text>违规举报</view>
        <view class="div more-item" @click="goNavigate('/pages/home/search/Search')" v-if="routerName !== 'pages/home/goodsdetail/Goodsdetail'"><text class="i iconfont">&#xe61f;</text>搜索</view>
        <view class="div more-item" @click="goNavigate('/pages/member/cart/Cart')" v-if="routerName !== 'pages/home/goodsdetail/Goodsdetail'"><text class="i iconfont">&#xe6ae;</text>购物车</view>
        <view class="div more-item" v-if="config && config.instant_message_open == '1' && config.instant_message_gateway_url" @click="goNavigate('/pages/member/chat/ChatList')"><text class="i iconfont">&#xe67c;</text>聊天消息<view v-if="showDot && showDot.chat" class="div dot"></view></view>
        <view class="div more-item" @click="goNavigate('/pages/member/index/Index',false,1)"><text class="i iconfont">&#xe6b4;</text>我的商城</view>
        <view class="div more-item" @click.stop="onShare"><text class="i iconfont">&#xe625;</text>分享</view>
        <text class="i arrow"></text>
    
        <uni-popup background-color="#fff" ref="shareVisible" type="bottom">
            <view class="div common-header-wrap">
                <uni-nav-bar title="分享至" class="common-header" left-icon="back" @clickLeft="hidePopup('shareVisible')">
                </uni-nav-bar>
            </view>
            <view class="div common-popup-content">
                <view class="div share-list">
                    <!--  #ifdef  APP-PLUS -->
                    <view class="div share-item weixin" @click.stop="goWeixin(1)">微信好友</view>
                    <view class="div share-item pengyou" @click.stop="goWeixin(2)">微信朋友圈</view>
                    <!--  #endif -->
                    <view class="div share-item copy" @click.stop="showLink">复制</view>
                    <view class="div share-item goods" v-if="goods_id" @click.stop="goodsPoster">海报</view>
				</view>	
            </view>
        </uni-popup>
    
        <uni-popup background-color="#fff" ref="copyVisible">
          <view class="copy-wrapper">
            <view class="div title">您的浏览器不支持直接复制，请手动复制</view>
            <input type="text" :value="copyLink" onfocus="this.select()" >
          </view>
        </uni-popup>
    
        <uni-popup background-color="#fff" ref="popupVisible">
          <image mode="widthFix" class="img" :src="posterUrl" :style="getBannerStyle" @click="hidePopup('popupVisible')">
        </uni-popup>
    </view>
  </view>
    
</template>

<script>
import { urlencode,loadScript } from '@/util/common'
import { goodsPoster } from '../api/member'
import { getWechatShare } from '../api/common'
import { isWechat } from '../util/wechat'
import { mapState, mapMutations, mapActions } from 'vuex'
import { env } from '@/static/config'
export default {
  name: 'HeaderMore',
  data () {
    return {
      routerName:'',
      currentUrl:'',
      posterUrl: '',
    }
  },
  components: {
  },
  mounted: function () {
    var pages = getCurrentPages()
      var page = pages[pages.length - 1]
      this.routerName=page ? page.route : ''
      this.currentUrl=env.H5_HOST + page.route+(page.options?('?'+urlencode(page.options)):'')
  },
  props: {
    goods_id: {},
    share_info: {},
    showDot: {}
  },
  computed: {
    ...mapState({
      user: state => state.member.info,
      config: state => state.config.config
    }),
    shareInfo:function(){
      var shareInfo
      if(!this.share_info){
        if(this.config){
          shareInfo = { title: this.config.site_name, link: this.currentUrl, imgUrl: this.config.site_mobile_logo, desc: this.config.site_name }
        }else{
          shareInfo = {}
        }
        
      }else{
        shareInfo = this.share_info
      }
      // #ifdef H5
      if(this.config && isWechat() && this.config.wechat_appid && shareInfo.title){
        this.setWechat(shareInfo)
      }
      // #endif
      return shareInfo
    },
    getBannerStyle: function () {
      const res = uni.getSystemInfoSync()
      var width = res.windowWidth
      var height = res.windowHeight
      let itemWidth = width - 20
      let itemHeight = height - 20
      return "width:"+itemWidth +"px"
    },
    copyLink () {
      var link = ''
      if (this.shareInfo && this.shareInfo.link) {
        link = this.shareInfo.link
      } else {
        link = this.currentUrl
      }
      if (this.user) {
        if (link.indexOf('?') != -1) {
          link += '&'
        } else {
          link += '?'
        }
        link += 'inviter_id=' + this.user.member_id
      }

      return link
    },
    getWrapperStyle: function () {
      const res = uni.getSystemInfoSync()
      var width = res.windowWidth
      var height = res.windowHeight
      return "width:"+width +"px;height:"+height +"px"
    }
  },
  methods:{
    goNavigate(path,query=false,type=0){
      var url=path+(query?('?'+urlencode(query)):'')
      if(type){
        uni.redirectTo({url:url})
      }else{
        uni.navigateTo({url:url})
      }
      
    },

    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goWeixin (type) {

        // #ifdef APP-PLUS
        uni.share({
          provider: 'weixin',
          scene: (type==2)?'WXSenceTimeline':'WXSceneSession',
          type: 0,
          href: this.copyLink,
          title: this.shareInfo.title,
          summary: this.shareInfo.desc,
          imageUrl: this.shareInfo.imgUrl,
          success: function(res) {

          },
          fail: function(err) {
            uni.showToast({
              icon: 'loading',
              title: '分享失败'
            })
          }
        })
        // #endif  
    },
    goodsPoster () {
      goodsPoster(this.goods_id).then(res => {
        this.posterUrl = res.result.goods_poster
        this.showPopup('popupVisible')
        // #ifdef  H5
        uni.setClipboardData({
            data: this.posterUrl,
            success: function () {
                uni.showToast({icon:'none',title: '图片路径已复制'})
            }
        });
        // #endif  
        // #ifndef  H5
        uni.downloadFile({
            url: this.posterUrl,
            success: (res) => {
              uni.saveImageToPhotosAlbum({
                          filePath: res.tempFilePath,
                          success: function () {
                              uni.showToast({icon:'none',title: '图片保存成功'})
                          }
                      });
            }
        })
        // #endif
      }).catch(error => {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    showLink () {
      // #ifdef H5
      if (window.clipboardData) {
        window.clipboardData.clearData()
        window.clipboardData.setData('Text', this.copyLink)
        uni.showToast({icon:'none',title: '复制成功！'})
      } else {
        this.showPopup('copyVisible')
      }
      // #endif
              // #ifndef H5
              var _this=this
              uni.setClipboardData({
                  data: this.copyLink,
                  success: function () {
                      uni.showToast({
                        icon: 'none',
                        title: '复制成功！'
                      })
                  },
                  fail:function () {
                    _this.showPopup('popup_copy')
                  }
              })
              // #endif
    },
    onShare () {
      this.showPopup('shareVisible')
    },
    setWechat (share_info) {
      var _this = this
      getWechatShare(encodeURIComponent(this.currentUrl)).then(res => {
        loadScript('weixin', 'https://res.wx.qq.com/open/js/jweixin-1.3.2.js', function () {
          wx.config({
            debug: false,
            appId: res.result.signPackage.appId,
            timestamp: res.result.signPackage.timestamp,
            nonceStr: res.result.signPackage.nonceStr,
            signature: res.result.signPackage.signature,
            jsApiList: [
              // 所有要调用的 API 都要加到这个列表中
              'onMenuShareTimeline',
              'onMenuShareAppMessage',
              'onMenuShareQQ',
              'onMenuShareWeibo',
              'onMenuShareQZone'
            ]
          })
          wx.ready(function () {
            wx.onMenuShareAppMessage({
              title: share_info.title,
              link: _this.copyLink,
              imgUrl: share_info.imgUrl,
              desc: share_info.desc // 分享描述
            })

            wx.onMenuShareTimeline({
              title: share_info.title,
              link: _this.copyLink,
              imgUrl: share_info.imgUrl,
              desc: share_info.desc
            })
            wx.onMenuShareQQ({
              title: share_info.title, // 分享标题
              desc: share_info.desc, // 分享描述
              link: _this.copyLink, // 分享链接
              imgUrl: share_info.imgUrl // 分享图标

            })
            wx.onMenuShareWeibo({
              title: share_info.title, // 分享标题
              desc: share_info.desc, // 分享描述
              link: _this.copyLink, // 分享链接
              imgUrl: share_info.imgUrl // 分享图标

            })
            wx.onMenuShareQZone({
              title: share_info.title, // 分享标题
              desc: share_info.desc, // 分享描述
              link: _this.copyLink, // 分享链接
              imgUrl: share_info.imgUrl // 分享图标

            })
          })
          wx.error(function (res) {
          })
        })
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .more-box-wrapper{position:relative}
    .more-box{background:#000;position:absolute;width:5.6rem;z-index:11;right:0.3rem;top:0;border-radius:0.2rem;}
    .more-item{border-bottom: 1px solid hsla(0,0%,100%,.2);height: 2rem;line-height: 2rem;list-style: none outside none;color:#fff;font-size:$subFontSize;position:relative}
    .more-item .i{margin:0 0.4rem;}
    .more-item .dot{position:absolute;width:.5rem;height:.5rem;background:red;border-radius:50%;top:.5rem;left:1rem;}
    .arrow {
        position:absolute;
        display: block;
        right:0.2rem;
        top:-0.7rem;
        width: 0;
        height: 0;
        margin-right: 0.45rem;
        font-size: 0;
        line-height: 0;
        border-width: 0.4rem;
        border-color: transparent transparent rgb(0,0,0) transparent;
        border-style: dashed dashed solid dashed;
    }
    .common-popup-wrapper{height:10rem;overflow: visible}
    .more-box .share-list{display:flex}
    .more-box .share-list .share-item{height: 3rem;margin:1rem 0.8rem;width:2.5rem;padding-left:0;background: none;text-align:center;color: #333;font-size:$fontSize;}
    .more-box .share-list .share-item:before{font-family: "iconfont";content:'';display:block;border-radius:50%;width:2rem;height:2rem;line-height:2rem;text-align:center;font-size:1.2rem;color:#fff;background: red;margin:0 auto;margin-bottom:.25rem}
    .more-box .share-list .share-item.weixin:before{content:"\e647";background:#C71585;}
    .more-box .share-list .share-item.pengyou:before{content:"\e645";background:#ffaa00;}
    .more-box .share-list .share-item.copy:before{content:"\e64b";background:#228B22;}
    .more-box .share-list .share-item.goods:before{content:"\e6dd";background:#f44336;}
    .more-box .weixin-share-wrapper{position: absolute;bottom:0;left:0;text-align: right}
    .more-box .weixin-share{height:10rem;}
    .copy-wrapper{padding:1rem;}
    .copy-wrapper input{height:1.5rem;line-height:1.5rem;padding:0 .2rem;width:12rem;border:1px solid #e1e1e1}
    .copy-wrapper .title{font-size:$fontSize;text-align: center;margin-bottom:.5rem;}
</style>