znyc.second_hand.vue/components/share/share.js

// components/share/share.js
let http = require('../../utils/request')

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    share_detail: {
      type: Object,
      value: {
      }
    },
    share_type: {
      type: String,
      value: 'apply'
    },
    is_show_share_mask: {
      type: Boolean,
      value: false
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    imageServerUrl: getApp().globalData.imageServerUrl,
    shareList: [{
      imageUrl: getApp().globalData.imageServerUrl + 'publish/we_chat.png',
      name: '微信好友',
      type: 'wx_chat'
    }, {
      imageUrl: getApp().globalData.imageServerUrl + 'publish/we_chat_ring.png',
      name: '微信群',
      type: 'wx_chat_friends'
    }, {
      imageUrl: getApp().globalData.imageServerUrl + 'publish/pic.png',
      name: '分享海报',
      type: 'created_pic'
    },],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 显示转发窗口
    show_share_mask_fn() {
      this.setData({
        is_show_share_mask: true,
      })
    },
    // 隐藏转发窗口
    hide_share_mask_fn() {
      this.triggerEvent('hide_share_mask_fn', false)
      this.setData({
        is_show_share_mask: false
      })
    },
    share_fn(e) {
      let type = e.currentTarget.dataset.type;
      if (type == "created_pic") {
        this.create_image()
      }
    },
    // 生成图片
    create_image() {
      wx.showLoading({
        title: '正在生成图片',
      })
      let {
        share_detail
      } = this.data;
      console.log(share_detail.id)
      http.xhr({
        url: 'api/v1/auth/weixin/qrcode/'+share_detail.id
      }).then(res => {
        console.log(res)
        var base64 = JSON.parse(res.data).buffer;
        base64 = 'data:image/jpeg;base64,' + base64
        this.triggerEvent('hide_share_mask_fn', false)
        // 处理二维码
        var imgPath = wx.env.USER_DATA_PATH + '/fx' + new Date().getTime() + '.png';
        var imageData = base64.replace(/^data:image\/\w+;base64,/, "");
        var fs = wx.getFileSystemManager();
        fs.writeFileSync(imgPath, imageData, "base64");
        console.log(imgPath)
        // 详情长度
        var islog=share_detail.introduction.length>12?2:1
        let paintPallette = {
          width: `${375}px`,
          height: `${553}px`,
          background: '#fff',
          borderRadius: '8px',
          views: [
            {
              type: 'image',
              // url: this.data.imageServerUrl + 'publish/qr_code.jpg',
              url:'/images/publish/yces.png',
              css: {
                top: `${0}px`,
                left: `${68}px`,
                width: '240px',
                height: '58px',
              }
            },
          {
            type: 'image',
            // url: this.data.imageServerUrl + 'publish/qr_code.jpg',
            url:share_detail.equipmentPictures[0].pictureLink,
            mode:"aspectFill",
            css: {
              top: `${58}px`,
              left: `${0}px`,
              width: '375px',
              height: '300px',
            }
          },
           {
            type: 'text',
            text: `${share_detail.title}`,
            // text: `${'大师傅大师傅士大夫士大夫士大夫胜多负少放沙发沙发沙发双方都是士大夫石帆胜丰士大夫是反三得房贷首付士大夫大师傅是'}`,

            css: {
              top: `${374}px`,
              left: '20px',
              fontWeight:'bold',
              width: `258px`,
              lineHeight: '28px',
              color: '#333',
              fontSize: '19px',
              maxLines: 1,
            },
          }, {
            type: 'text',
            text: `${share_detail.introduction}`,
            // text: `${'大师傅大师傅士大夫士大夫士大夫胜多负少放沙发沙发沙发双方都是士大夫石帆胜丰士大夫是反三得房贷首付士大夫大师傅是'}`,
            css: {
              top: `${410}px`,
              left: '20px',
              width: `200px`,
              lineHeight: '24px',
              color: '#353535',
              fontSize: '15px',
              maxLines: 2,
            },
          }, 
          {
            type: 'text',
            text: `${share_detail.automobileLocation} | ${share_detail.appearanceDate}年`,
            css: {
              top: `${islog==1?445:465}px`,
              left: '20px',
              width: `240px`,
              color: '#6d6d6d',
              fontSize: '14px',
              maxLines: 2,
            },
          }, 
          {
            type: 'text',
            text: '售价 ：',
            css: {
              top: `${islog==1?470:490}px`,
              left: '20px',
              width: `240px`,
              lineHeight: '28px',
              color: '#6d6d6d',
              fontSize: '20px',
              maxLines: 2,
            },
          },
          {
            type: 'text',
            text: `${share_detail.sellingPrice}万`,
            css: {
              top: `${islog==1?470:490}px`,
              left: '90px',
              width: `200px`,
              fontWeight:'bold',
              lineHeight: '28px',
              color: '#bd0008',
              fontSize: '20px',
              maxLines: 2,
            },
          },
          {
            type: 'text',
            text: `云车二手 · 直买直卖平台`,
            css: {
              bottom: `${12}px`,
              left: '0',
              width: `375px`,
              color: '#3476fe',
              fontSize: '18px',
              maxLines: 1,
              textAlign:'center'
            },
          },
          {
            type: 'text',
            text: `长按识别二维码`,
            css: {
              top: `480px`,
              left: `${268}px`,
              width: `240px`,
              color: '#6d6d6d',
              fontSize: '14px',
              maxLines: 2,
            },
          }, 
          {
            type: 'image',
            // url: this.data.imageServerUrl + 'publish/qr_code.jpg',
            url: `${imgPath}`,
            css: {
              top: `${382}px`,
              left: `${270}px`,
              width: '91px',
              height: '93px',
            }
          }]
        };
        this.setData({
          paintPallette
        })
      })
        .catch(err => {
          console.log(err)
        })

    },
    image_mask_fn() {
      this.setData({
        imagePath: '',
        paintPallette: ''
      })
    },
    onImgOK(e) {
      let imagePath = e.detail.path;
      this.setData({
        imagePath: imagePath
      })
    },
    image_load() {
      this.setData({
        is_show_share_mask: false
      })
      wx.hideLoading()
    },
    save_image() {
      let url = this.data.imagePath;
      wx.getSetting({
        success: (res) => {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            wx.authorize({
              scope: 'scope.writePhotosAlbum',
              success: () => {
                // 同意授权
                this.save_img_fn(url);
              },
              fail: (res) => {
                wx.showModal({
                  content: '暂无权限保存本地,点击确认前往设置页面开启权限',
                  success: (res) => {
                    if (res.confirm) {
                      wx.openSetting({
                        withSubscriptions: true,
                      })
                    }
                  }
                })
              }
            })
          } else {
            // 已经授权了
            this.save_img_fn(url);
          }
        },
        fail: (res) => {
          wx.showToast({
            title: '您还未授权，请授权',
            icon: 'none'
          })
        }
      })
    },
    save_img_fn(url) {
      wx.getImageInfo({
        src: url,
        success: (res) => {
          let path = res.path;
          wx.saveImageToPhotosAlbum({
            filePath: path,
            success: (res) => {
              wx.showToast({
                title: '保存成功',
                icon: 'none'
              })
            },
            fail: (res) => {
              wx.showToast({
                title: '保存失败',
                icon: 'none'
              })
            }
          })
        },
        fail: (res) => { }
      })
    },
  }
})