分享商品图片功能

组件：share-page:
<template>
  <view class="share">
    <!-- 绘制二维码 -->
    <view class="tki-qrcode" v-show="!result">
      <!-- #ifndef MP-ALIPAY -->
      <canvas class="tki-qrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
      <!-- #endif -->
      <!-- #ifdef MP-ALIPAY -->
      <canvas :id="cid" :width="cpSize" :height="cpSize" class="tki-qrcode-canvas" />
      <!-- #endif -->
    </view>
    <!-- 展示生成详情图片 -->
    <u-popup :show="show3" :round="10" mode="center" @close="Cancel" @cancel="Cancel"  class="detail-popup">
      <view class="qrimg padding">
        <!-- <tki-qrcode cid="qrcode2" ref="qrcode2" :val="val" :size="size" :onval="onval" :loadMake="loadMake" :icon="icon" :usingComponents="true" @result="qrR" /> -->
        <r-canvas ref="rCanvas"></r-canvas>
        <view class="save-btn" @click="saveCode">保存图片<image src="/static/images/save-img.png"></image></view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import QRCode from "../tki-qrcode/qrcode.js"
let qrcode
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue" // 二维码生成器  
import { imgUrl } from '@/common/request'
import rCanvas from "@/components/r-canvas/r-canvas.vue"
export default {
  components: {
    tkiQrcode,
    rCanvas,
  },
  props: {
    show: { // 是否打开弹窗
      type: Boolean,
      default: false,
    },
    detail: { // 详情展示
      type: Object,
      default: {},
    }
  },
  watch: {
    show: {
      deep: true,
      immediate: true,
      handler(val) {
        console.log(val,'show走了几次')
      if(this.show && this.detail){
        this.makeCode()
      }
      }
    },
    detail: {
      deep: true,
      // immediate: true,
      handler(val) {
        console.log(val,'走了几次')
      }
    }
  },
  computed: {
    cpSize() {
      if (this.unit == "upx") {
        return uni.upx2px(this.size)
      } else {
        return this.size
      }
    }
  },
  data() {
    return {

      user_id: '',    //用户id
      bn: '',            //邀请码            

      id: '',//商品id
      icon: '/static/images/logo.png',
      src: '',// 二维码生成后的图片地址或base64
      val: 'http://192.168.0.78:8889',        //链接
      size: 400, // 二维码大小
      unit: 'upx', // 单位
      background: '#b4e9e2', // 背景色
      foreground: '#309286', // 前景色
      pdground: '#32dbc6', // 角标色
      iconsize: 40, // 二维码图标大小
      lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
      onval: false, // val值变化时自动重新生成二维码
      loadMake: true, // 组件加载完成后自动生成二维码
      src: '',// 二维码生成后的图片地址或base64
      show3: false,        //二维码先隐藏
      result: '',
      cid: 'qrcode2',
      imgUrl: imgUrl,
      makeImg: '', // 生成的分享图片地址
    }
  },
  onLoad() {
    let is_token = uni.getStorageSync('token');    //这里主要判断是否token存在，并获取存的后台信息【这里你也可以通过自己在后台保存的值判断是否存在】
    if (is_token != '') {
      // let userInfo = JSON.parse(uni.getStorageSync('member_info'));
      // this.user_id = userInfo.id;
      // this.bn = userInfo.bn

      // this.val = this.BASE_URL + 'wap/detail.html?k=1&bn=' + this.bn + '&user_id=' + this.user_id + '&id=' + this.id ;   //制作二维码传的链接       
      // console.log(userInfo, 'hahah', this.val);

    }

  },
  methods: {
    // 生成二维码
    makeCode() {
      let that = this
      if (!this.emptyVal(this.val)) {
        console.log('-=-9k')
        qrcode = new QRCode({
          context: that, // 上下文环境
          canvasId: that.cid, // canvas-id
          usingComponents: that.usingComponents, // 是否是自定义组件
          showLoading: that.showLoading, // 是否显示loading
          loadingText: that.loadingText, // loading文字
          text: that.val, // 生成内容
          size: that.cpSize, // 二维码大小
          // background: that.background, // 背景色
          // foreground: that.foreground, // 前景色
          // pdground: that.pdground, // 定位角点颜色
          correctLevel: that.lv, // 容错级别
          image: that.icon, // 二维码图标
          imageSize: that.iconSize,// 二维码图标大小
          cbResult: function (res) { // 生成二维码的回调
            setTimeout(() => {
              that.canvasToCodeImage()
            }, 500)
          },
        });
      } else {
        uni.showToast({
          title: '二维码内容不能为空',
          icon: 'none',
          duration: 2000
        });
      }
    },
    // 清除二维码信息
    clearCode() {
      this.canvasToCodeImage('')
      qrcode.clear()
    },
    // 保存生成图片到
    saveCode() {
      let that = this;
      // if (this.result != "") {
      //   uni.saveImageToPhotosAlbum({
      //     filePath: that.result,
      //     success: function () {
      //     }
      //   });
      // }
      this.$refs.rCanvas.saveImage(this.makeImg).catch(err => {
            this.error(err)
      })
      uni.showToast({
        title: '保存成功',
        icon: 'none'
      })
    },
    // 绘制商品信息图片
    canvasToGoodsImage() {
      this.$nextTick(async () => {
        uni.showLoading({
          title: '加载中',
          mask: true
        })
        let that = this
        await this.$refs.rCanvas.init({
          canvas_id: 'rCanvas',
          background_color: '#fff',
          canvas_width: 260,
          canvas_height: 400,
          scale: 1
        }).catch(err => {
          this.error(err)
        })

        await this.$refs.rCanvas.drawImage({
          // url: this.detail.simplePics && Array.isArray(JSON.parse(this.detail.simplePics)) && JSON.parse(this.detail.simplePics).length > 0 ? this.imgUrl + JSON.parse(this.detail.simplePics)[0].fPictureUrl : '/static/images/no-data.png',
          url: '/static/images/no-data.png',
          x: 0,
          y: 0,
          w: 260,
          h: 250,
          border_radius: 4
        }).catch(err => {
          this.error(err)
        })

        // await this.$refs.rCanvas.drawText({
        //   text: '活动',
        //   x: 26,
        //   y: 410,
        //   font_size: 12,
        //   font_color: 'rgba(255,255,255,1)'
        // }).catch(err => {
        //   this.error(err)
        // })

        await this.$refs.rCanvas.drawText({
          text: this.detail.goodsTitle,
          x: 0,
          y: 280,
          max_width: 180,
          font_size: 14,
          line_height: 20,
          line_clamp: 2,
          font_color: '#333333'
        }).catch(err => {
          this.error(err)
        })
        await this.$refs.rCanvas.drawSpecialText({
          general: {
            x: 200,
            y: 290,
            text_align: 'right',
            max_width: 220,
          },
          list: [
            {
              text: '￥',
              font_color: 'red',
              font_size: 14
            },
            {
              text: this.detail.preferentialPrice || this.detail.goodsPrice,
              font_color: 'red',
              font_size: 18,
            },
            // {
            //   text: '+',
            //   font_color: 'rgb(255, 101, 3)',
            //   font_size: 24,
            //   margin_top: 2,
            // },
            // {
            //   text: '9999',
            //   font_color: 'rgb(165, 26, 251)',
            //   font_size: 20
            // },
            // {
            //   text: '劵',
            //   font_color: 'rgb(165, 26, 251)',
            //   font_size: 15
            // },
          ]
        }).catch(err => {
          this.error(err)
        })

        await this.$refs.rCanvas.drawImage({
          url: this.result,
          x: 0,
          y: 330,
          w: 50,
          h: 50,
          border_radius: 4
        }).catch(err => {
          this.error(err)
        })

        await this.$refs.rCanvas.drawText({
          text: '① 保存图片到相册',
         x: 60,
          y: 348,
          font_size: 10,
          line_height: 20,
          line_clamp: 2,
          font_color: '#999999'
        }).catch(err => {
          console.log('err文字不显示')
          this.error(err)
        })
        await this.$refs.rCanvas.drawText({
          text: '② 打开App扫码可见',
         x: 60,
          y: 368,
          font_size: 10,
          line_height: 20,
          line_clamp: 2,
          font_color: '#999999'
        }).catch(err => {
          console.log('err文字不显示')
          this.error(err)
        })
        await this.$refs.rCanvas.drawImage({
          url: '/static/images/about.png',
          x: 220,
          y: 335,
          w: 40,
          h: 40,
          border_radius: 4
        }).catch(err => {
          this.error(err)
        })

        // 生成海报
        await this.$refs.rCanvas.draw((result) => {
          uni.hideLoading()
          this.makeImg = result.tempFilePath
          // // 保存图片
          // this.$refs.rCanvas.saveImage(result.tempFilePath).catch(err => {
          //   this.error(err)
          // })
          // uni.showModal({
          //   title: '提示',
          //   content: '是否下载当前生成的海报？',
          //   success: (res) => {
          //     if (res.confirm) {
          //     }
          //   }
          // })
        }).catch(err => {
          // this.error(err)
        })
        // console.log(this.result,'that.result=============')
      })
    },
    error(){},
    // 二维码画布转图片
    canvasToCodeImage(res) {
      let that = this
      uni.canvasToTempFilePath({
        width: 400,
        height: 500,
        destWidth: 400,
        destHeight: 500,
        canvasId: that.cid,
        quality: Number(1),
        fileType: 'jpg',
        success: function (res) {
          that.result = res.tempFilePath;
          that.canvasToGoodsImage()
            that.show3 = true;
          that.$nextTick(() =>{
          })
          that.show = false;
        },
        fail: function (res) {
        },
        complete: function () {
        },
      }, that);
      this.$emit('result', res)
    },
    // 判断传值是否为空
    emptyVal(v) {
      let tp = typeof v,
        rt = false;
      if (tp == "number" && String(v) == "") {
        rt = true
      } else if (tp == "undefined") {
        rt = true
      } else if (tp == "object") {
        if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
      } else if (tp == "string") {
        if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
      } else if (tp == "function") {
        rt = false
      }
      return rt
    },
    // 分享页面
    shareHandle(index) {
      if (index == 0) {
        uni.share({
          provider: 'weixin',
          scene: 'WXSceneSession',
          href: this.BASE_URL + 'wap/detail.html?bn=' + this.bn + '&id=' + this.id + '&user_id=' +
            this.user_id,
          type: 0,
          title: this.msg.title,
          imageUrl: this.msg.image,
          success: function (res) {
            console.log('success:' + JSON.stringify(res));
          },
          fail: function (err) {
            console.log('fail:' + JSON.stringify(err));
          }
        });
      } else if (index == 1) {
        uni.share({
          provider: 'weixin',
          scene: 'WXSenceTimeline',
          href: this.BASE_URL + 'wap/detail.html?bn=' + this.bn + '&id=' + this.id + '&user_id=' +
            this.user_id + '&user_id=' + this.user_id,
          type: 0,
          title: this.msg.title,
          imageUrl: this.msg.image,
          success: res => {
            console.log('success:' + JSON.stringify(res));
            this.is_share = !this.is_share;
          },
          fail: err => {
            console.log('fail:' + JSON.stringify(err));
          }
        });
      } else {
        // this.created()
        // this.makeCode()
        this.$emit('close')
      }
    },
    Cancel() { 
      this.$emit('close')
      this.show3 = false
      this.detail = {}
      this.makeImg = ''
      this.result = '' 
    }
  },
}
</script>

<style lang="scss" scoped>
.save-btn{
  display: flex;
  justify-content: center; 
  align-items: center;
  image{
    width: 32rpx;
    height: 32rpx;
    margin-left: 10rpx;
  }
}
</style>
页面引入：
<!-- 分享弹窗组件 -->
<SharePage :show="showShare" :detail="detail" @close="showShare = false"></SharePage>
  detail: {}, // 详情信息