test/pages/info/postProductInfo/index.js

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

  /**
   * 页面的初始数据
   */
  data: {
    autoPlay:true,
    fixed:false,
    type:1,
    top:0,
    isLike:0,
    commentTotal:0,
    comment:[],
    info:null,
    skuFlag:null,
    producNum:1,
    skuIndex:0,
    aniSkuIndex:-1,
    retailId:"",
    cartTop:0,
    cartImgInfo:null,
    cartCount:0,
    shareImg:null,
    showShareFlag:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let rect = wx.getMenuButtonBoundingClientRect(),that = this;
    let height = (rect.top - device.statusBarHeight) * 2 + rect.height + device.statusBarHeight;
    this.setData({
      top:height,
      id:options.id
    })
    // 获取购物车按钮的位置
    wx.createSelectorQuery().select('#cart').boundingClientRect(function(res){
      that.setData({
        cartTop:res.top
      })
    }).exec()

    if(options.retailId){
      this.setData({
        retailId:options.retailId
      })
    }
    commonApi._post("product/get_product_detail",{
      id:options.id
    }).then(res=>{
      res.data.display_tags = (res.data.display_tags?res.data.display_tags.split(","):[]).splice(0,2);
      if(options.skuid){
        let sku = res.data.sku.find(item=>item.id==options.skuid);
        res.data.sku = [sku];
      }
      this.setData({
        info:res.data
      })
      
      this.BroswerRecord()
    })
    // 获取评价列表
    commonApi._post("product/product_comment_list",{
      product_id:options.id
    }).then(res=>{
      res.data.list.map(item=>{
        item.rate = Number(item.rate)
      })
      this.setData({
        comment:res.data.list,
        commentTotal:res.data.total
      })
    })
  },
  BroswerRecord:function(){
    setTimeout(()=>{
      if(app.globalData.uuid){
        commonApi._post('browse/browse_record',{
          type:"goods",
          title:this.data.info.title,
          drive:"mini",
          source_id:this.data.info.id,
          url:"/pages/info/postProductInfo/index?id="+this.data.info.id,
          uuid:app.globalData.uuid
        }).then(res=>{
        })
      }
      else {
        this.BroswerRecord();
      }
    },500)
  },
  like:function(){
    let id = this.data.id,isLike = this.data.isLike;
    commonApi.user_post("product/"+(isLike==1?"product_cancel_collection":"product_collection"),{
      product_id:id
    }).then(res=>{
      if(res.code==1){
        this.setData({
          isLike:isLike==1?0:1
        })
      }
    })
  },
  changeMenu:function(e){
    let index = e.currentTarget.dataset.index,that = this;
    const query=wx.createSelectorQuery();  //创建节点查询器
    query.select("#box"+index).boundingClientRect()  //选择toViewid获取位置信息
    query.selectViewport().scrollOffset()  //获取页面查询位置的
    query.exec(function(res) {
      let scrollTop = res[0].top + res[1].scrollTop - 110 * ratio - that.data.top;
      wx.pageScrollTo({
        scrollTop: scrollTop + 4,
        duration: 0
      })
      that.setData({
        type:index
      })
    })
  },
  onPageScroll:function(e){
    let that = this,height = this.data.top;
    let topHeight = height;
    wx.createSelectorQuery().select('#menus').boundingClientRect(function(rect){
      if(rect.top<=topHeight){
        // 此时应该把menus固定在顶部
        that.setData({
          fixed:true
        })
      }
      else{
        that.setData({
          fixed:false
        })
      }
      // 滚动时判断滚动到哪个部分了
      const query=wx.createSelectorQuery();  //创建节点查询器
      query.select("#box1").boundingClientRect()  //选择toViewid获取位置信息
      query.select("#box2").boundingClientRect()  //选择toViewid获取位置信息
      query.select("#box3").boundingClientRect()  //选择toViewid获取位置信息
      let minHeight = that.data.fixed?(110 * ratio + height): topHeight;
      query.exec(function(res) {
        if(res[2].top<minHeight){
          that.setData({
            type:3
          })
        }
        else if(res[1].top<minHeight){
          that.setData({
            type:2
          })
        }
        else {
          that.setData({
            type:1
          })
        }
      })
    }).exec()
    
  },
  showCart:function(){
    if(this.data.info.sku.length==0){
      wx.showToast({
        title: '该产品未设置规格，不能加购',
        icon:'none'
      })
      return;
    }
    this.setData({
      skuFlag:"cart"
    })
    let that = this
    wx.createSelectorQuery().select('#skuImg').boundingClientRect(function(res){
      console.log(res)
      that.setData({
        cartImgInfo:'top:'+res.top+'px;left:'+res.left+'px;'
      })
    }).exec()
    
  },
  hideSku:function(){
    this.setData({
      skuFlag:null,
      cartImgInfo:null
    })
  },
  minus:function(){
    if(this.data.producNum==1) return;
    this.setData({
      producNum:this.data.producNum-1
    })
  },
  add:function(){
    this.setData({
      producNum:this.data.producNum+1
    })
  },
  selectSku:function(e){
    let index = e.currentTarget.dataset.index;
    this.setData({
      skuIndex:index
    })
  },
  showOrder:function(){
    if(this.data.info.sku.length==0){
      wx.showToast({
        title: '该产品未设置规格，不能购买',
        icon:'none'
      })
      return;
    }
    this.setData({
      skuFlag:'order'
    })
  },
  order:function(){
    if(this.data.skuFlag=='order'){
      app.globalData.couponInfo = null;
      // 购买
      let product = [{
        product:this.data.info,
        sku:this.data.info.sku[this.data.skuIndex],
        productNum:this.data.producNum
      }];
      app.globalData.postProduct = product;
      app.globalData.retailId = this.data.retailId;
      wx.navigateTo({
        url: '/pages/order/postOrder/index',
      })
    }
    else {
      commonApi.user_post("cart/add_sku",{
        sku_id:this.data.info.sku[this.data.skuIndex].id,
        num:this.data.producNum
      }).then(res=>{
        if(res.code==1){
          commonApi.user_post('cart/get_list',{}).then(res=>{
            this.setData({
              cartCount:res.data.length
            })
          })
          // 加动效
          this.setData({
            skuFlag:null,
            aniSkuIndex:this.data.skuIndex,
            cartImgInfo:null
          })
          setTimeout(()=>{
            this.setData({
              aniSkuIndex:-1
            })
            wx.showModal({
              title:"提示",
              content:"去购物车结算？",
              success:function(res){
                if(res.confirm){
                  wx.navigateTo({
                    url: '/pages/user/cartlist/list',
                  })
                }
              }
            })
          },650)
        }
      })
    }
  },
  // 分享
  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/MailMerchandiseDetail?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.subtitle;
      if(that.data.info.subtitle.length>10){
        subtitle = that.data.info.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 = "￥"+(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 + market_price_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){
      commonApi.user_post("product/is_product_collection",{
        product_id:this.data.info.id
      }).then(res=>{
        this.setData({
          isLike:res.data
        })
        this.drawImg()
      })
      commonApi.user_post('cart/get_list',{}).then(res=>{
        this.setData({
          cartCount:res.data.length
        })
      })
    }
    else {
      setTimeout(()=>{
        this.onShow()
      },200)
    }
  },
  playVideo(){
    // 播放视频需要把autoplay暂停
    this.setData({
      autoPlay:false
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  }
})