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,
    showAllowance: false,
    allowance_data:null,
	//购物车数量
	producNum: 1,
	skuIndex: 0,
	aniSkuIndex: -1,
	cartCount: 0,
	cartImgInfo: null,
	cartTop: 0,
	top: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if (!options.id) {
      util.back()
      return;
    }
    if (options.retailId) {
      this.setData({
        retailId: options.retailId
      })
    }
    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
      })
      console.log(this.data.info);
      util.pagePoint({ event: 'scene_view', param: { type: res.data.type, id: res.data.id } }, 1)
      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
      })
      let arr = this.data.comment
      arr.map((item)=>{
        if (item.img_list) {
          let arr  = item.img_list.split(',')
          item.img_list = arr
          
        }else{
          item.img_list=[]
        }
      })
      this.setData({
        comment:arr
      })
    })
  },
  changeAllowance: function () {
    this.setData({
      showAllowance: !this.data.showAllowance
    })
  },
  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) {
        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
    })
    util.pagePoint({
      event: "scene_notice",
      param: {
        type: this.data.info.type,
        id: this.data.info.id
      }
    }, 1)
  },
  closeMask: function () {
    this.setData({
      bookingInfo: null
    })
  },
  // order: function(e){
	 //  console.log(e)
	 //  	if (e.currentTarget.dataset.disable == 1) return;
	 //  	util.pagePoint({
	 //  	  event: 'scene_order',
	 //  	  param: {
	 //  	    type: this.data.info.type,
	 //  	    id: this.data.info.id
	 //  	  }
	 //  	}, 1)
	 //  	wx.setStorageSync('login_from', 'scene_order_login')
	 //  	wx.setStorageSync('order_from', 'scene_order_submit')
	 //  	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',
	 //  	})
  // },
  selectSku: function (e) {
  	  console.log(e)
    let index = e.currentTarget.dataset.index;
    this.setData({
      skuIndex: index
    })
  },
  order: function (e) {
	console.log(e,e.currentTarget.dataset.product.sku[this.data.skuIndex])
	// console.log(this.data.info,this.data.skuFlag)
	app.globalData.postProduct = []
	app.globalData.list = []
	if (this.data.skuFlag == 'order'){
		if (e.currentTarget.dataset.disable == 1) return;
		util.pagePoint({
		  event: 'scene_order',
		  param: {
		    type: this.data.info.type,
		    id: this.data.info.id
		  }
		}, 1)
		wx.setStorageSync('login_from', 'scene_order_login')
		wx.setStorageSync('order_from', 'scene_order_submit')
		app.globalData.couponInfo = null;
		app.globalData.retailId = this.data.retailId;
		// let sku = e.currentTarget.dataset.sku,product = e.currentTarget.dataset.product;
		let sku = {sku:e.currentTarget.dataset.product.sku[this.data.skuIndex]},product = {product: e.currentTarget.dataset.product}
		app.globalData.product = {...sku,...product}
		// app.globalData.product = e.currentTarget.dataset;
		wx.navigateTo({
		  url: '/pages/order/scene/index',
		})
	}else {
      commonApi.user_post("cart/add_sku", {
        sku_id: this.data.info.product[0].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
            })
          })
          // 加动效
		  console.log(this.data.skuIndex)
          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)
        }
      })
    }
  },
  pagePoint: function (e) {
    util.pagePoint({
      event: e.currentTarget.dataset.event,
      param: {
        type: this.data.info.type,
        id: this.data.info.id
      }
    }, 1)
  },
  // 分享
  share: function () {
    if (!wx.getStorageSync("jstrip_token")) {
      wx.setStorageSync('login_from', 'scene_share_login')
      commonApi.user_post("user/getMyInfo", {}).then(res => {
      }).catch(err => {
      })
      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: !that.data.showShareFlag
            })
            util.pagePoint({ event: 'scene_share_save', param: { type: that.data.info.type, id: that.data.info.id } }, 1)
          },
          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.sub_title
      if (subtitle && subtitle.length > 10) {
        subtitle = subtitle.substr(0, 10) + '...'
      }
      if (subtitle) {
        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);
    }
  },
  //加入购物车
  showCart: function () {
	  console.log(this.data)
    if (this.data.info.product[0].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
    })
  },
  //立即预定
  showOrder: function () {
    if (this.data.info.product[0].sku.length == 0) {
      wx.showToast({
        title: '该产品未设置规格，不能购买',
        icon: 'none'
      })
      return;
    }
    this.setData({
      skuFlag: 'order'
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    if (app.globalData.configJson) {
      this.setData({
        isTest: app.globalData.configJson.isTest
      })
    }
    else {
      setTimeout(() => {
        this.onReady()
      }, 300)
    }
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
	  commonApi.user_post('cart/get_list', {}).then(res => {
			  console.log(res,res.data)
		this.setData({
		  cartCount: res.data.length
		})
	  })
    if (!wx.getStorageSync('jstrip_token')) {
      return;
    }
    if (this.data.info && this.data.info.id) {
      this.drawImg()
      // 获取补贴
      if (this.data.product.length == 1) {
        commonApi.user_post("product/getProductAllowancePrice", {
          product_code: this.data.product[0].product.product_code
        }).then(resTwo => {
          console.log(resTwo)
          if (resTwo && resTwo.code == 1) {
            this.setData({
              allowance_data: resTwo.data
            })
            let spread_price = Number(this.data.allowance_data.discount_limit_price - this.data.allowance_data.user_used_price)
            let sInfo = this.data.product[0].sku
            console.log(9999, this.data.allowance_data.discount_rate / 100 * sInfo.price)
            console.log(9999, spread_price)
            if (spread_price > 0) {
              if (spread_price < this.data.allowance_data.discount_rate / 100 * sInfo.price) {
                this.setData({
                  allowance_price: spread_price
                })
              } else {
                this.setData({
                  allowance_price: this.data.allowance_data.discount_rate / 100 * sInfo.price
                })
              }
              this.changePrice()
            } else {
              this.setData({
                allowance_price: 0
              })
            }
          }
        })
      }
    }
    else {
      setTimeout(() => {
        this.onShow()
      }, 200)
    }

  },

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

  },

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

  },

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

  },

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

  },

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