test/pages/kj/info/index.js

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

  /**
   * 页面的初始数据
   */
  data: {
    info:null,
    showRuleFlag:false,
    kjId:null,
    isKj:false,//是否是被邀请进来砍价的 本人去除
    isFollow:true,//是否已经关注公众号
    showShareFlag:false,//是否显示公众号的二维码
    userInfo:null,
    helpList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取用户信息 后面的砍价接口和发起活动接口需要用到
    let that = this;
    productApi.user_post("uservice/user/getMyInfo",{}).then(r=>{
      this.setData({
        userInfo:r.data
      })
      let userid = r.data.id,service="activity.haggle/get_haggle_detail";
      productApi.user_post(service+'?id='+options.id+(options.originate_id?('&originate_id='+options.originate_id):''),{
      }).then(res=>{
        if(!res.data.user_record || !res.data.user_record.id){
          res.data.user_record = {
            bargined_money:0
          }
        }
        if(res.data.originate && res.data.originate.id && options.originate_id){
          res.data.user_record = res.data.originate;
        }
        this.setData({
          kjId:res.data.user_record.id
        })
        this.setData({
          info:res.data
        })
        // 判断是否是自己发起的活动
        if(!res.data.user_record.id || res.data.user_record.user_id==userid){
          this.setData({
            isKj:false
          })
          this.drawImg()
        }
        else {
          this.setData({
            isKj:true
          })
        }
        // 只有发起了的活动才需要倒计时
        if(res.data.user_record.id && res.data.user_record.over_time){
          // 获取砍价记录
          productApi.user_post("activity.haggle/help_list?limit=10&page=1&id="+res.data.user_record.id,{
            limit:10,
            page:1,
            id:res.data.user_record.id
          }).then(r=>{
            this.setData({
              helpList:r.data.data
            })
          })
          this.setTime();
          timer = setInterval(()=>{
            this.setTime()
          },1000)
          
          if(this.data.isKj){
            // 发起者状态是砍价完成，提示用户：我已经砍价完成了，你也快来试试吧，点击否停留当前页面，点击是，跳转砍价专区
            if(res.data.user_record.flag=='over'){
              wx.showModal({
                title:"提示",
                content:"我已经砍价完成了，你也快来试试吧，点击否停留当前页面",
                success:function(r){
                  if(r.confirm){
                    wx.redirectTo({
                      url: '/pages/list/kj/index'
                    })
                  }
                }
              })
            }
            // 如果状态是砍价失败，提示用户：{发起者昵称}发起的砍价活动已结束，你也快来试试吧，点击否返回商城首页，点击是，跳转砍价专区
            else if(res.data.user_record.flag=='fail' || res.data.user_record.flag=='expired'){
              wx.showModal({
                title:"提示",
                content:res.data.user_record.user_name+"发起的砍价活动已结束，你也快来试试吧",
                success:function(r){
                  if(r.confirm){
                    wx.redirectTo({
                      url: '/pages/list/kj/index'
                    })
                  }
                  else {
                    wx.switchTab({
                      url: '/pages/index/index',
                    })
                  }
                }
              })
            }
          }
          else if(res.data.user_record.flag=='fail' || res.data.user_record.flag=='expired'){
            wx.showModal({
              title:"提示",
              content:"您未砍价成功，是否原价购买？",
              success:function(r){
                if(r.confirm){
                  // 去买
                  that.gotoDetail({
                    currentTarget:{
                      dataset:{
                        type:"none"
                      }
                    }
                  })
                }
              }
            })
          }
        }
      })
    })
    
  },
  gotoProduct:function(){
    productApi._post('product/get_product_detail',{
      id:this.data.info.detail.goods_id
    }).then(res=>{
      util.gotoDetail(res.data);
    })
  },
  // 如果已经发起活动的话需要倒计时
  setTime(){
    let info = this.data.info;
    let overTime = new Date(info.user_record.over_time.replace(/-/g,'/')).getTime(),now = new Date().getTime();
    if(overTime<=now){
      info.isOver=true;
    }
    else {
      let t = (overTime - now)/1000;
      let h = Math.floor(t/(60*60));
      t = t - h * 60*60;
      let m = Math.floor(t/60),s=Math.floor(t-m*60);
      if(h<10) {
        h="0"+h;
      }
      if(m<10) {
        m="0"+m;
      }
      if(s<10) {
        s="0"+s;
      }
      info.h = h;
      info.m = m;
      info.s = s;
    }
    this.setData({
      info:info
    })
  },
  // 保存二维码到手机
  saveImg:function(){
    wx.downloadFile({
      url: 'https://resources.jszhwlpt.com/d3c2d106-b893-474f-bf5c-091bd04f247f.jpeg',
      success:function(res){
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath
        })
      }
    })
    
  },
  // 隐藏或显示活动规则
  showRule:function(){
    this.setData({
      showRuleFlag:!this.data.showRuleFlag
    })
  },
  // 分享
  share:function(){
    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');
    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.detail.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/BargainFriends?id='+that.data.info.detail.id+'&sharedUserId='+userid+'&channel=-1&originate_id='+that.data.kjId,
        width: 500,
        height: 500,
        padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
        correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
        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.detail.title+that.data.info.detail.sku_name, 25*ratio, 450*ratio,480 * ratio,ratio);
      // 售价
      ctx.setFillStyle("#D62828");
      ctx.setFontSize(40 * ratio); //字大小
      ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
      let price = "￥0";
      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 = '快来帮我砍一刀吧~'
      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.detail.kj_money/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(this.data.info && this.data.info.user_record && this.data.info.user_record.id){
      this.setTime();
      timer = setInterval(()=>{
        this.setTime()
      },1000)
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    clearInterval(timer);
    timer = null;
  },
  // 详情和下单的第一步
  gotoDetail:function(e){
    let info = this.data.info.detail || null,type=e?e.currentTarget.dataset.type:null;
    let that = this;
    if(!info) return;
    if(type=='fail'){
      wx.showModal({
        title:"提示",
        content:"您未砍价成功，是否原价购买",
        confirmColor:"#E14135",
        success:function(res){
          if(res.confirm){
            that.pushOrderData(null)
          }
        }
      })
    }
    else if(type=='none'){
      this.pushOrderData(null)
    }
    else {
      this.pushOrderData(this.data.info.user_record.id)
    }
  },
  // 真实的获取产品信息去下单
  pushOrderData:function(kjId){
    app.globalData.kjId = kjId;
    app.globalData.couponInfo = null;
    util.goKjOrder(this.data.info.detail).then(product=>{
      if(this.data.info.detail.type=='post'){
        app.globalData.postProduct = product;
        wx.navigateTo({
          url: '/pages/order/postOrder/index',
        })
      }
      else if(this.data.info.detail.type=='ticket' || this.data.info.detail.type=='scene'){
        app.globalData.product = product[0];
        wx.navigateTo({
          url: '/pages/order/scene/index',
        })
      }
    })
  },
  // 帮好友砍一刀
  kanjia:function(){
    // if(!this.data.isFollow){
    //   // 未关注需要先关注公众号
    //   this.setData({
    //     showShareFlag:true
    //   })
    //   return;
    // }
    let userInfo = this.data.userInfo,info = this.data.info;
    productApi.user_post("activity.haggle/help_bargain",{
      originate_id:info.user_record.id
    }).then(res=>{
      if(res.code==1){
        wx.showToast({
          title: '砍价成功',
          icon:'success'
        })
        this.onLoad({userid:info.user_record.user_id,id:info.detail.id,originate_id:info.user_record.id})
      }
    })
  },
  // 发起砍价
  startKj:function(){
    // if(!this.data.isFollow){
    //   // 未关注需要先关注公众号
    //   this.setData({
    //     showShareFlag:true
    //   })
    //   return;
    // }
    let info = this.data.info;
    let userInfo = this.data.userInfo;
    productApi.user_post('activity.haggle/bargain_launch',{
      act_id:info.detail.act_id,
      id:info.detail.id
    }).then(res=>{
      if(res.code==1){
        wx.showToast({
          title: '发起成功',
          icon:'success'
        })
        this.onLoad({id:info.detail.id})
      }
    })
  },
  // 喊好友砍一刀
  shareHelp:function(){

  },
  // 我也要参与
  join:function(){
    this.onLoad({id:this.data.info.detail.id});
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

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

  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    let kjId = this.data.kjId,info = this.data.info;
    let shareObj = {
      title: kjId?"就差你这一刀了，快来帮帮我~":(info.detail.title+info.detail.sku_name),        // 默认是小程序的名称(可以写slogan等)
      path: kjId?('/pages/kj/info/index?userid='+info.user_record.user_id+'&id='+info.detail.id+'&originate_id='+kjId):('/pages/kj/info/index?&id='+info.detail.id),        // 默认是当前页面，必须是以‘/’开头的完整路径
      imageUrl: info.detail.headimg,     //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
      success: function(res){
        // 转发成功之后的回调
        if(res.errMsg == 'shareAppMessage:ok'){
          wx.showToast({
            title: '转发成功，马上就要砍成了~',
          })
        }
      },
      fail: function(){
        // 转发失败之后的回调
        if(res.errMsg == 'shareAppMessage:fail cancel'){
          
        }else if(res.errMsg == 'shareAppMessage:fail'){
          // 转发失败，其中 detail message 为详细失败信息
        }
　　　　},
    };
    console.log(shareObj)
    return shareObj;
  }
})