test/pages/info/sceneProductInfo/index.js

// pages/info/sceneProductInfo/index.js
let device = wx.getSystemInfoSync();
const ratio = device.windowWidth / 750;
import commonApi from "../../../utils/https/common"
import util from "../../../utils/util"
import QRCode from '../../../utils/weapp-qrcode.js'
let app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    info:null,
    bookingInfo:null,
    bookingInfoTitle:"",
    safeBottom:app.globalData.safeBottom,
    isLike:0,
    comment:[],
    commentTotal:0,
    isTest:true,
    retailId:"",
    shareImg:null,
    showShareFlag:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if(!options.id){
      util.back()
      return;
    }
    if(options.retailId){
      this.setData({
        retailId:options.retailId
      })
    }
    commonApi._post("pbservice/Other/getClientConfig",{
      unique_key:"wechatxcx"
    }).then(res=>{
      let data = JSON.parse(res.data);
      this.setData({
        isTest:data.isTest
      })
    })
    this.setData({
      id:options.id
    })
    commonApi._post("scene/detail",{
      id:options.id
    }).then(res=>{
      if(!res.data){
        wx.showToast({
          title: '产品已下架',
          icon:'none'
        })
        setTimeout(()=>{
          util.back();
        },1000)
        return;
      }
      res.data.display_tags = (res.data.display_tags?res.data.display_tags.split(","):[]).splice(0,2);
      // 如果是带有指定good_id的 那么取指定的
      if(options.gid){
        let pItem = res.data.product.find(item=>item.id==options.gid);
        if(pItem){
          res.data.product = [pItem];
        }
      }
      // 如果带有指定skuid的话 那么取指定的sku展示
      if(options.skuid){
        let pItem = null;
        for(let i = 0;i<res.data.product.length;i++){
          for(let j=0;j<res.data.product[i].sku.length;j++){
            if(res.data.product[i].sku[j].id==options.skuid){
              res.data.product[i].sku = [res.data.product[i].sku[j]];
              pItem = res.data.product[i];
              break;
            }
          }
        }
        if(pItem){
          res.data.product = [pItem];
        }
      }
      // res.data.listimg = res.data.listimg?res.data.listimg.split(","):[];
      res.data.product.map(product=>{
        product.sku.map(sku=>{
          sku.display_tags = (sku.display_tags?sku.display_tags.split(","):[]).splice(0,2);
        })
      })
      this.setData({
        info:res.data
      })
      this.BroswerRecord()
    })
    // 获取收藏的状态
    if(wx.getStorageSync("jstrip_token")){
      commonApi.user_post("scene/is_scene_collection",{
        scene_id:options.id
      }).then(res=>{
        this.setData({
          isLike:res.data
        })
      })
    }
    commonApi._post("ask/getQuestionList",{
      scene_id:options.id,
      page_no:1,
      page_num:3
    }).then(res=>{
      this.setData({
        ask:res.data.rows
      })
      console.log(res)
    })
    // 获取评价列表
    commonApi._post("scene/get_comment",{
      scene_id:options.id
    }).then(res=>{
      res.data.list.map(item=>{
        item.rate = Number(item.rate)
      })
      this.setData({
        comment:res.data.list.splice(0,3),
        commentTotal:res.data.total
      })
      console.log(res)
    })
  },
  BroswerRecord:function(){
    setTimeout(()=>{
      if(app.globalData.uuid){
        commonApi._post('browse/browse_record',{
          type:"scene",
          title:this.data.info.title,
          drive:"mini",
          source_id:this.data.info.id,
          url:"/pages/info/sceneProductInfo/index?id="+this.data.info.id,
          uuid:app.globalData.uuid
        }).then(res=>{
        })
      }
      else {
        this.BroswerRecord();
      }
    },500)
  },
  like:function(){
    let id = this.data.id,isLike = Number(this.data.isLike);
    console.log(isLike)
    commonApi.user_post(isLike!=1?"scene/scene_collection":"scene/scene_cancel_collection",{
      scene_id:id
    }).then(res=>{
      if(res.code==1){
        console.log(isLike)
        wx.showToast({
          title: '操作成功',
        })
        this.setData({
          isLike:isLike==1?0:1
        })
      }
    })
  },
  gotolocation:function(){
    let info = this.data.info;
    wx.openLocation({
      latitude: Number(info.lat),
      longitude: Number(info.lon)
    })
  },
  audioGuide:function(){
    wx.navigateToMiniProgram({
      appId: 'wx74f380bc721a0379',
      path:'/pages/listen/listen?title=君到苏州'
    })
  },
  showBookingInfo:function(e){
    this.setData({
      bookingInfo:e.currentTarget.dataset.item.sku_model,
      bookingInfoTitle:e.currentTarget.dataset.item.sku_name
    })
  },
  closeMask:function(){
    this.setData({
      bookingInfo:null
    })
  },
  order:function(e){
    app.globalData.couponInfo = null;
    app.globalData.retailId = this.data.retailId;
    // let sku = e.currentTarget.dataset.sku,product = e.currentTarget.dataset.product;
    app.globalData.product = e.currentTarget.dataset;
    wx.navigateTo({
      url: '/pages/order/scene/index',
    })
  },

    // 分享
    share:function(){
      if(!wx.getStorageSync("jstrip_token")){
        commonApi.user_post("user/getMyInfo",{}).then(res=>{
  
        })
        return;
      }
      if(!this.data.shareImg){
        wx.showToast({
          title: '图片生成中，稍后再试',
          icon:'none'
        })
        return;
      }
      this.setData({
        showShareFlag:!this.data.showShareFlag
      })
    },
    // 保存
    save(){
      let url = this.data.shareImg,that = this;
      wx.authorize({
        /* 这个就是保存相册的 */
        scope: 'scope.writePhotosAlbum',
        success() {
          wx.saveImageToPhotosAlbum({
            filePath:url,
            success(res) { 
              wx.showToast({
                title: '保存成功',
                icon:"success"
              })
              that.setData({
                showShareFlag:!this.data.showShareFlag
              })
            },
            fail(res){
              wx.showToast({
                title: '保存失败',
                icon:'none'
              })
            }
           })
        },
        complete(res) {
            console.log(res);
            /* 这里判断一下如果没有授权重新打开设置选项 */
            wx.getSetting({
                success(res) {
                    if (!res.authSetting['scope.writePhotosAlbum']) {
                        /* 打开设置的方法 */
                        // opensit();
                        wx.showToast({
                          title: '请打开权限后再试',
                          icon:'none'
                        })
                    }
                }
            });
        }
    });
      
    },
    // 绘制海报
    drawImg:function(){
      var that = this,userinfo = wx.getStorageSync('jstrip_userInfo');
      if(!userinfo){
        // 去登录
        return false;
      }
      const ctx = wx.createCanvasContext('imageCanvas');
      // const device = wx.getSystemInfoSync();
      // const ratio = device.screenWidth / 750;
      // 先获取到图片信息
      let promise2 = new Promise(function(resolve,reject){
        wx.getImageInfo({
          src:that.data.info.headimg,
          success:function(res){
            resolve(res);
          },
          fail:function(res){
            reject(res);
          }
        })
      })
      let promise3 = new Promise(function(resolve,reject){
        let userid = wx.getStorageSync('jstrip_userid')
        new QRCode('myQrcode',{
          text: 'https://m.cloud.sz-trip.com/ScenicDetail?id='+that.data.info.id+'&sharedUserId='+userid+'&channel=-1',
          width: 500,
          height: 500,
          padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
          correctLevel: QRCode.CorrectLevel.H, // 二维码可辨识度
          callback: (res) => {
            resolve(res);
          }
        })
      })
      //成功得到图片信息后，开始绘图
      Promise.all([promise2,promise3]).then(imgs=>{
        ctx.save();
        ctx.beginPath(); //开始绘制
        that.handleBorderRect(ctx,0,0,551 * ratio,407 * ratio,25 * ratio,'#ccc')
        ctx.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
        ctx.drawImage(imgs[0].path, 0, 0,551 * ratio,407 * ratio);
        ctx.restore();
        ctx.save();
        that.handleBorderRect2(ctx,0,407 * ratio,551 * ratio,236*ratio,25 * ratio,'#fff')
        ctx.restore();
        // 绘制二维码
        ctx.drawImage(imgs[1].path, 373 * ratio, 495 * ratio,137 * ratio, 137 * ratio);
        // 开始文字绘制
        ctx.setFillStyle("#000");
        ctx.setFontSize(30 * ratio); //字大小
        ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
        that.drawText(ctx,that.data.info.title, 25*ratio, 450*ratio,480 * ratio,ratio);
        // 售价
        ctx.setFillStyle("#D62828");
        ctx.setFontSize(40 * ratio); //字大小
        ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
        let price = "￥"+(that.data.info.price/100);
        let width = ctx.measureText(price).width;
        ctx.fillText(price, 25*ratio, 620*ratio);
        // 副标题
        ctx.setFillStyle("#999999");
        ctx.setFontSize(28 * ratio); //字大小
        ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
        let subtitle = that.data.info.display_tags[0];
        if(subtitle.length>10){
          subtitle = subtitle.substr(0,10)+'...'
        }
        ctx.fillText(subtitle, 25*ratio, 540*ratio);
        // ctx.draw();
        // 划线价
        // ctx.setFillStyle("#999999");
        // ctx.setFontSize(32 * ratio); //字大小
        // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
        // let market_price = "￥"+(Number(that.data.info.market_price)/100)
        // ctx.fillText(market_price, 40*ratio + width, 620*ratio);
        // let market_price_width = ctx.measureText(market_price).width;
        // 划线
        // ctx.beginPath()
        // ctx.setLineWidth(1)
        // ctx.moveTo(40*ratio + width, 608*ratio)
        // ctx.lineTo(45*ratio + width, 608*ratio)
        // ctx.stroke();
        // 长按识别二维码
        // ctx.setFillStyle("#666");
        // ctx.setFontSize(22 * ratio); //字大小
        // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
        // ctx.fillText("长按识别二维码", 404*ratio, 710*ratio);
        // 长按图片转发或保存
        // ctx.setFillStyle("#000");
        // ctx.setFontSize(24 * ratio); //字大小
        // ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
        // ctx.fillText("长按图片保存到本地",(592*ratio - ctx.measureText("长按图片保存到本地").width)/2, 740*ratio);
        ctx.draw(); 
        // 转为图片
        setTimeout(()=>{
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            canvasId: 'imageCanvas',
            success: function (res) {
              that.setData({
                shareImg:res.tempFilePath
              })
            },
            fail(err){
              console.log('agdgjgdajhg',err)
            }
          })
        },500)
        return false;
      }).catch(err=>{
        console.log("this err",err)
      })
    },
    // 圆角矩形
    handleBorderRect(ctx, x, y, w, h, r, color){
      ctx.beginPath();
      ctx.moveTo(x+w,y+h);
      ctx.lineTo(x,y+h)
      // 左上角
      ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI);
      ctx.moveTo(x + r, y);
      ctx.lineTo(x + w - r, y);
      ctx.lineTo(x + w, y + r);
      // 右上角
      ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI);
      ctx.lineTo(x + w, y + h );
      ctx.lineTo(x + w - r, y + h);
      ctx.fillStyle = color;
      ctx.fill();
      ctx.closePath();
    },
    handleBorderRect2(ctx, x, y, w, h, r, color){
      ctx.beginPath();
      ctx.moveTo(x,y);
      ctx.lineTo(x+w,y)
      // 右下角
      ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI);
      ctx.lineTo(x + r, y + h);
      ctx.lineTo(x, y + h - r);
      // 左下角
      ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI);
      ctx.lineTo(x, y);
      ctx.lineTo(x, y);
      ctx.fillStyle = color;
      ctx.fill();
      ctx.closePath();
    },
    // 绘制两行文字
    drawText: function(ctx, str, x, y, canvasWidth,ratio) {
      let row = [],temp="",chr=str.split("");
      for (var a = 0; a < chr.length; a++) {
        if (ctx.measureText(temp).width < canvasWidth) {
          temp += chr[a];
        }
        else {
          a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
          row.push(temp);
          temp = "";
        }
      }
      row.push(temp);
  
      //如果数组长度大于2 则截取前两个
      if (row.length > 2) {
        var rowCut = row.slice(0, 2);
        var rowPart = rowCut[1];
        var test = "";
        var empty = [];
        for (var a = 0; a < rowPart.length; a++) {
          if (ctx.measureText(test).width < canvasWidth - 30 * ratio) {
            test += rowPart[a];
          }
          else {
            break;
          }
        }
        empty.push(test);
        var group = empty[0] + "..."//这里只显示两行，超出的用...表示
        rowCut.splice(1, 1, group);
        row = rowCut;
      }
      for (var b = 0; b < row.length; b++) {
        ctx.fillText(row[b], x, y + b * 40 * ratio, canvasWidth);
      }
    },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // if(!wx.getStorageSync('jstrip_token')){
    //   return;
    // }
    // if(this.data.info && this.data.info.id){
    //   this.drawImg()
    // }
    // else {
    //   setTimeout(()=>{
    //     this.onShow()
    //   },200)
    // }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})