ufutx_love_mp/src/components/wxShareCom.wpy

<style lang="less" scoped>
._pic{
  width: 100%;
  border-radius: 12rpx;
}
._icon_close{
  z-index: 99999;
}
._save_btn{
  width: 600rpx;
  height: 80rpx;
  background: linear-gradient(90deg, #9DC0F8 0%, #508AFC 100%);
  border-radius: 40rpx;
}


.wxsharec-mask {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1110;
  background: rgba(0,0,0,.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.wxsharec-mask.show {
  opacity: 1;
  pointer-events: auto;
}
.wxsharec-dialog {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(.85);
  width: 680rpx;
  max-width: 100%;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  transition: transform .3s;
}
.wxsharec-mask.show .wxsharec-dialog {
  transform: translate(-50%,-50%) scale(1);
}

</style>
<template>
  <view class="{{modalName=='Modal'? 'show':''}} wxsharec-mask">
    <view class="wxsharec-dialog" style="padding: 50rpx 30rpx;">
      <image class="~_icon_close" src="~@/images/icon/close_icon.png" mode="aspectFit" @tap="cancelFn"></image>
      <view class="~_c ~font_32 ~color333 ~bold">分享至</view>
      <view class="~f-fcc ~ui-mt-40">
        <button class="~_wx_box ~color999 ~btn" open-type="share" @tap="cancelFn">
          <image class="~_icon_wx" src="~@/images/icon/wx_icon.png" mode="aspectFit"></image>
          <view class="~color666 ~font_24 ~ui-mt-10">微信好友</view>
        </button>
        <view class="~_wx_box ~color999 ~_wx_pyq" @tap="changeShare">
          <image class="~_icon_wx" src="~@/images/icon/pyq_icon.png" mode="aspectFit"></image>
          <view class="~color666 ~font_24 ~ui-mt-10">朋友圈</view>
        </view>
      </view>
    </view>
  </view>
  <view class="{{modalName=='showPic'? 'show':''}} wxsharec-mask">
    <view class="wxsharec-dialog" style="padding: 0; background: none;border-radius: 0;">
      <image class="~_icon_close_pic _icon_close" src="~@/images/icon/close_icon_v3.png" mode="aspectFit" @tap="cancelFn"></image>
      <image class="_pic" src="{{sharePic}}" mode="widthFix" @tap="cancelFn"></image>
      <view class="_save_btn ~spacing2 ~font_30 ~f-fcc ~ui-mt-24 ~white" @tap="saveImgFn()">保存至相册，分享给好友或朋友圈</view>
    </view>
  </view>
  <view class="{{modalName=='showSet'? 'show':''}} wxsharec-mask">
    <view class="wxsharec-dialog" style="padding-top: 58rpx;">
      <view class="~_t ~font_32 ~color333 ~text-center ~bold">提示</view>
      <view class="~_c ~font_32 ~color333 ~text-center ~ui-mt-30">
        需要你授权才能保存到相册哦
      </view>
      <view class="~f-fcc ~marginT12">
        <view class="~cancel ~ui-mt-40 ~f-fcc ~color999 ~font_28" @tap="cancelFn">取消</view>
        <button class="~btn ~confirm ~ui-mt-40 ~f-fcc ~white ~font_28" open-type="openSetting" @opensetting="openSetSaveImg($wx)">
          打开设置
        </button>
      </view>
    </view>
  </view>
</template>
<script>
import wepy from '@wepy/core'

wepy.component({
  props: {
    modalName: {
      type: String,
      default: '',
      twoWay: true
    },
    sharePic: {
      type: String,
      default: '',
      twoWay: true
    }
  },
  data: {
  },
  watch: {
  },
  mixins: [],
  methods: {
    changeShare() {
      this.modalName = 'showPic'
    },
    cancelFn() {
      this.modalName = ''
      this.$emit('modalFn', this.modalName)
    },
    openSetSaveImg(e) { // 打开设置，且保存到相册
      let vm = this
      if (e.detail.authSetting['scope.writePhotosAlbum']) {
        vm.modalName = ''
        wx.saveImageToPhotosAlbum({
          filePath: vm.sharePic,
          success: () => {
            wx.showModal({
              title: '保存成功',
              content: '赶紧分享给你的朋友吧！',
              showCancel: false
            })
            vm.$emit('modalFn', vm.modalName)
          },
          fail: () => {
            console.log('取消了')
          }
        })
      }
    },
    saveImgFn() {
      let vm = this
      wx.saveImageToPhotosAlbum({
        filePath: vm.sharePic,
        success: () => {
          vm.modalName = ''
          vm.$emit('modalFn', vm.modalName)
          wx.showModal({
            title: '已保存在相册了！',
            content: '赶紧分享给你的朋友吧！',
            showCancel: false
          })
        },
        fail: () => {
          wx.getSetting({
            success(res) {
              if (!res.authSetting['scope.writePhotosAlbum']) {
                vm.modalName = 'showSet'
                vm.$emit('modalFn', vm.modalName)
              }
            }
          })
        }
      })
    }
  },
  attached() {
  },
  created() {
  }
})
</script>