lachang-wxapp/pages/activity/pages/groupShopping/groupGoodsDetail/groupGoodsDetail.js

const app = getApp()
const api = require('../../../../../request/api');
const http = require('../../../../../request/http');
const utils = require('../../../../../utils/util.js');
const storeKeys = require('../../../../../utils/storageKeys.js');
Page({
  data: {
    isLogOn: false, //是否已登录
    userInfo: {},
    goodsId: "", //商品id
    activity_id: "",//活动id
    isLoading: true, //是否处于加载
    isShare: false, //是否来源分享
    statusBarHeight: app.globalData.statusBarHeight,
    isIphoneX: app.globalData.isIphoneX,
    details: {}, //商品线详情数据
    groupbuy: {},//拼团数据
    richHtml: "", //富文本内容
    defaultSpecIndex: 0, //默认选中的规格
    selectSpec: {}, //选中的规格
    selectSku: {}, //选中的规格对应信息
    currentSwiper: 0, //轮播索引
    isRemoved: false, //是否已下架
    isOverdue: false, //是否不存在、过期
    couponNumber: 1,
    isShowNavMenu: false, //是否显示导航栏菜单
    isShowNavTab: false, //是否显示导航tab栏
    currentNavTab: 0, //导航栏tab切换索引
    richTextTop: 0, //商品详情区域到顶部的距离
    swiperData: [{}, {}, {}],
    showSharePopup: false, //是否显示分享菜单Popup
    showParameterPopup: false, //是否显示参数说明Popup
    showBuyPopup: false, //是否显示购买选择Popup
    showCouponPopup: false, //是否显示领优惠券Popup
    couponList: [], //可用优惠券列表
    buyNumber: 1, //购买数量
    cartTotal: 0, //购物车总数
    canvasPosterUrl: "", //海报地址
    showPoster: false, //是否现在绘制vf好的海报
    isOnLoad: true,
    appraiseList: [], //评价列表
    appraiseTotal: 0, //评价总数
    addressId: "", //用户地址id
    expressPrice: 0, //运费
    isActivity:false,  //是否存在活动
    timer: null , //活动倒计时定时器
    actTimes: 0,  //活动到期时间 
    countDownDay: '0',
    countDownHour: '0',
    countDownMinute: '0',
    countDownSecond: '0',
    groupList: [],//拼团列表
    allgroupList:[],//全部拼团列表
    showGroupList:false,//是否显示全部拼团
    isClose:false,//活动结束
    isjoin:false,//是否参与拼团
    joinid:"",
    isfission:false,//是否裂变拼团
  },
  goIndex: function (e){
    wx.switchTab({
      url: '/pages/tabBar/index/index'
    })
  },
  onShowGroupList: function () {
    this.setData({
        showGroupList: true,
    })
  },
  onCloseGroupList: function (e) {
    this.setData({
        showGroupList: false,
    })
  },
  onLoad: function (options) {
    console.log("页面  JS")
    console.log(options)
    if (options) {
      //商品id
      let activity_id = options.activity_id || options.publicId || "5";
      this.setData({
        activity_id
      })
      this.setData({
        isShare: options.share ? true : false,
        isfission:options.isfission == 1 ? true : false,
      })
      //分享人id 107295
      let shareId = options.shareId || "";
      console.log("分享人id"+shareId)
      shareId && utils.setStorageSync(storeKeys.SHAREID, shareId);
    }

    // if (!utils.getStorageSync(storeKeys.TOKEN)) {
    //   wx.navigateTo({
    //     url: "/pages/tabBar/login/login"
    //   })
    //   return;
    // }
    this.promotion();
    // this.getFreight()
    this.getGoodsDetails(true)
    this.changeCountRecord();
  },
  // 数据统计埋点
  changeCountRecord(){
    // 裂变活动不统计
    let visit_type = 1
    if(this.data.isfission){
      visit_type = 10
    }
    app.countRecord()
    app.countRecordActivity(visit_type, this.data.activity_id)
  },
  onShow: function (options) {
    console.log("onshow触发")
    if (!this.data.isOnLoad) {
      this.getGoodsDetails();
    }
    this.getAppraiseList();
    this.data.isOnLoad = false;
    if (!utils.getStorageSync(storeKeys.TOKEN)) {
      this.setData({
        isLogOn: false
      })
    } else {
      let userInfo = utils.getStorageSync(storeKeys.USERINFO) || {};
      this.setData({
        isLogOn: true,
        userInfo
      })

    }
  },
  onUnload() {
    this.clearTime();
  },
  onHide() {
    this.clearTime();
  },
  //获取评价列表
  getAppraiseList() {
    console.log("商品id")
      console.log(this.data.goodsId)
    http.request({
      url: api.URL + '/api/Comment/listRows?goodsId=' + this.data.goodsId + '&limit=2',
      method: 'GET',
      noToast: true,
      token: utils.getStorageSync(storeKeys.TOKEN),
      success: (res) => {
        let data = res.data.data;
        this.setData({
          appraiseList: data.list || [],
          appraiseTotal: data.total
        })
      },
      error: (res) => {},
    })
  },
  
  //获取运费
  getFreight() {
    let goodsId = this.data.goodsId;
    let goodsSkuId = this.data.selectSku.goods_sku_id || 0;
    let goodsNum = this.data.buyNumber || 1;
    http.request({
      url: api.URL + '/api/goods/calc_delivery_amount&goodsId=' + goodsId + '&goodsSkuId=' + goodsSkuId + '&goodsNum=' + goodsNum,
      method: 'GET',
      noToast: true,
      token: utils.getStorageSync(storeKeys.TOKEN),
      success: (res) => {
        console.log(res)
        let expressPrice = res.data.data.expressPrice
        this.setData({
          expressPrice
        })
      },
      error: (res) => {},
    })
  },

  // 获取商品详情
  getGoodsDetails(state) {
    //用户地址id
    let addressId = this.data.addressId || "";
    if (state || addressId) {
      wx.showLoading({
        title: "加载中"
      });
    }
    let staffUserId = utils.getStorageSync(storeKeys.SHAREID) || utils.getStorageSync(storeKeys.APPLESID) || "";
    let apiurl = this.data.isfission?'/api/groupbuylb.Activity/detail?activity_id=':'/api/groupbuy.Activity/detail?activity_id=';
    http.request({
      url: api.URL + apiurl + this.data.activity_id,
      method: 'GET',
      noToast: true,
      token: utils.getStorageSync(storeKeys.TOKEN),
      success: (res) => {
        console.log(res)
        if (state || addressId) {
          wx.hideLoading();
        }
        this.data.addressId = "";
        let details = res.data.data.data.goods;
        console.log(details);
        // 10普通商品  20赠品  30套餐
        if(details.goods_type == 20){
          details.full_send_act = null;
          details.is_send_act = 0
          details.mj_send_act = null
        }
        if(details.full_send_act){ // 满就送
          // 当所有的赠品库存都是0：true
          if(details.full_send_act.empty_gifts){
            details.full_send_act = null;
          }
        }
          

        // status => 商品状态(10上架 20下架)
        let isRemoved = details.status == 20 ? true : false;
        //处理富文本
        let content = details.content;
        content = content.replace(/<p><br\/><\/p>/g, "");
        let richHtml = content.replace(/<p><img/gi, '<p style="padding: 0px !important; line-height: 0px !important;"><img');
        richHtml = richHtml.replace(/<p>/gi, '<p style="padding: 0px 0 0 0; line-height: 24px">');
        richHtml = richHtml.replace(/<img/gi, '<img style="width:100%!important; height: auto !important;display: flex !important"');
        // 默认选中商品规格
        let specList = details.specList[0] || [];
        let newIndex = -1;
        let buyNumber = this.data.buyNumber || 1;
        //计算库存是否不足
        if (specList && specList.valueList) {
          for (let i = 0; i < specList.valueList.length; i++) {
            let item = specList.valueList[i];
            for (let x = 0; x < details.skuList.length; x++) {
              if (parseInt(item.spec_value_id) == parseInt(details.skuList[x].goods_sku_id)) {
                if (details.skuList[x].stock_num < 1 || !details.skuList[x].stock_num) {
                  item.lack = true;
                } else {
                  if (newIndex == -1) {
                    if (details.skuList[x].stock_num < buyNumber) {
                      buyNumber = details.skuList[x].stock_num
                    }
                    newIndex = i;
                  }
                }
              }
            }
          }
        }
        //单规格
        if (details.spec_type == 10) {
          buyNumber = 1
        }
        this.data.defaultSpecIndex = newIndex;
        let selectSpec = specList.valueList && specList.valueList[this.data.defaultSpecIndex] || {};

        let groupbuy = res.data.data.data.groupbuy;
        let isActivity =false;
        if(groupbuy){
          this.clearTime();
          this.data.actTimes = groupbuy.fmt_end_time;
          // this.data.groupbuy = groupbuy;
          let isjoin = false;
          if(groupbuy.help){
            isjoin = true;
            this.data.joinid = groupbuy.help.join_id;
          }

          let groupList = groupbuy.to_pt_list.length>2?groupbuy.to_pt_list.slice(0,2):groupbuy.to_pt_list;
          let allgroupList = groupbuy.to_pt_list;
          allgroupList.forEach(element => {
              if(element.nick_name.length>4){
                element.t_nick_name = element.nick_name.substr(0,4)+"..."
              }else{
                element.t_nick_name = element.nick_name
              }
          });
          

          this.setData({
            groupbuy,
            isjoin,
            groupList,
            allgroupList
          })
          this.changeTimeText();
          this.newCountdown()
          isActivity = true;
        }

        this.setData({
          isLoading: false,
          details,
          richHtml,
          selectSpec,
          buyNumber,
          isActivity,
          isRemoved,
          goodsId:details.goods_id
        })
        setTimeout(() => {
          this.data.richTextTop <= 0 && this.getRichTextTop();
          this.getFreight();
          this.getAppraiseList();
          state && this.getCanvasImageInfo();
        }, 100)
        
        
      },
      error: (res) => {
        if (res.data.status == 500) {
          this.setData({
            isClose: true
          })
        }
      },
    })
  },
  //活动倒计时
  newCountdown(){
    if(!this.data.actTimes){
      this.setData({
        isActivity:false
      })
      return;
    }
    this.data.timer = setInterval(()=> {
      let actTimes = this.data.actTimes;
      if (actTimes > 0) {
        this.changeTimeText();
      } else {
        this.setData({
          isClose: true
        })
        this.clearTime();
        this.getGoodsDetails();
      }
      actTimes--;
      this.data.actTimes = actTimes;
    }, 1000);
  },
  //倒计时时间文字变化
  changeTimeText(){
    let actTimes = this.data.actTimes;
    if(!actTimes){
      return;
    }
    this.setData({
      countDownDay: utils.newDateForma(actTimes, "day"),
      countDownHour: utils.newDateForma(actTimes, "hours"),
      countDownMinute: utils.newDateForma(actTimes, "minutes"),
      countDownSecond: utils.newDateForma(actTimes, "seconds"),
    });
  },
  //清除倒计时
  clearTime() {
    clearTimeout(this.data.timer);
    this.data.timer = null;
  },
  //生成分享图
  getCanvasImageInfo() {
    let canvasImage = this.data.details.goods_image_text + "?x-oss-process=image/resize,w_400/format,png";
    let canvasBack = `${api.URL}/uploads/image/image_share_goods.png`;
    //背景图
    let promise1 = new Promise(function (resolve) {
      wx.getImageInfo({
        src: canvasBack,
        success: function (res) {
          resolve(res)
        },
        fail: function (res) {
          wx.hideLoading();
        }
      })
    })
    //商品图
    let promise2 = new Promise(function (resolve) {
      wx.getImageInfo({
        src: canvasImage,
        success: function (res) {
          resolve(res)
        },
        fail: function (res) {
          wx.hideLoading();
        }
      })
    })
    Promise.all([promise1, promise2]).then((values) => {
      this.canvasImgMin(values[0], values[1]);
    }).catch((error) => {})
  },
  //执行绘制海报
  canvasImgMin(canvasBack, canvasImage) {
    let canvasWidth = wx.getSystemInfoSync().windowWidth;
    let Rpx = (canvasWidth / 660).toFixed(2);
    let ctx = wx.createCanvasContext('posterCanvas');
    ctx.clearRect(Rpx * 0, 0, 330, 264);
    ctx.setFillStyle('#FFFFFF');
    ctx.fillRect(Rpx * 0, 0, 330, 264);

    //绘制封面
    let canvasW = 174;
    let canvasH = 174;
    let cData = utils.getSXYWH(canvasW, canvasH, canvasImage.width, canvasImage.height);
    ctx.drawImage(canvasImage.path, cData.sX, cData.sY, cData.sW, cData.sH, 16, 74, canvasW, canvasH);
    //绘制背景
    ctx.drawImage(canvasBack.path, 0, 0, 330, 264);
    //¥
    ctx.setFillStyle('#F2F2F2');
    ctx.font = `normal 400 ${(14).toFixed(0)}px PingFang-SC-Medium`
    let priceTag = "¥";
    let price = this.data.groupbuy.group_price || "0.00";
    let priceB = 1;
    if (price.length == 5) {
      priceB = 2;
    }
    if (price.length == 6) {
      priceB = 3;
    }
    if (price.length == 7) {
      priceB = 4;
    }
    if (price.length >= 8) {
      priceB = 5;
    }
    ctx.fillText(priceTag, 232 - (priceB * 7), 182);
    //价格
    ctx.font = `normal bold ${(26).toFixed(0)}px PingFang-SC-Medium`
    ctx.fillText(price, 242 - (priceB * 7), 182);

    ctx.draw(true);
    setTimeout(() => {
      this.getCanvasUrl()
    }, 800)
  },
  //获取画布图片地址
  getCanvasUrl() {
    let _this = this;
    wx.canvasToTempFilePath({
      fileType: 'jpg',
      canvasId: 'posterCanvas',
      success: (res) => {
        if (res.tempFilePath) {
          console.log(res)
          wx.hideLoading();
          _this.setData({
            canvasPosterUrl: res.tempFilePath
          })
          // wx.showShareImageMenu({
          //   path: res.tempFilePath
          // })
        }
      },
      fail(res) {}
    }, this);
  },
  //监听页面滚动
  onPageScroll(e) {
    if (e.scrollTop < (this.data.richTextTop - this.data.statusBarHeight - 30) && this.data.isShowNavTab) {
      this.setData({
        isShowNavTab: false,
        currentNavTab: 0
      })
    } else if (e.scrollTop >= (this.data.richTextTop - this.data.statusBarHeight - 30) && !this.data.isShowNavTab) {
      this.setData({
        isShowNavTab: true,
        currentNavTab: 1
      })
    }
  },
  //获取详情区域到头部的距离
  getRichTextTop() {
    wx.createSelectorQuery().select('#richTextContainer').boundingClientRect((rect) => {
      if (rect) {
        this.data.richTextTop = rect.top || 0;
      }
    }).exec()
  },
  //监听轮播图滚动
  swiperChange(e) {
    this.setData({
      currentSwiper: e.detail.current
    })
  },
  
  //显示导航栏菜单
  showNavMenu() {
    this.setData({
      isShowNavMenu: true
    })
  },
  //隐藏导航栏菜单
  hideNavMenu() {
    this.setData({
      isShowNavMenu: false
    })
  },
  //导航栏切换tab
  changeNavTab(e) {
    let {
      index
    } = e.currentTarget.dataset;
    let scrollTop = index == 0 ? 0 : (this.data.richTextTop - this.data.statusBarHeight - 30);
    wx.pageScrollTo({
      scrollTop: scrollTop,
      duration: 300
    })
    this.setData({
      currentNavTab: index
    })
  },

  //前往海报绘制
  goToPoster() {
    if (!utils.getStorageSync(storeKeys.TOKEN)) {
      wx.navigateTo({
        url: "/pages/tabBar/login/login"
      })
      return;
    }
    let {
      goods_image_text,
      goods_name,
      spec_type,
      goods_price_min,
      shopping_discount_amount
    } = this.data.details;
    let goods_price = goods_price_min;
    let newPrice = "";
    if(shopping_discount_amount && shopping_discount_amount>0){
      newPrice = (parseFloat(((parseFloat(goods_price)*100) - (parseFloat(shopping_discount_amount)*100)) /100).toFixed(2)).toString();
    }
    let goodData = {
      goods_image: goods_image_text,
      goods_name,
      goods_price,
      newPrice,
      goodsId: this.data.goodsId
    }
    let url = "/pages/cart/pages/goodsPoster/goodsPoster?goodData=" + JSON.stringify(goodData);
    this.hideSharePopup();
    app.navigateToUrl(url)
  },
  //底部显示分享菜单
  showSharePopup() {
    if (this.data.isOverdue) {
      utils.toast("商品过期或不存在")
      return;
    }
    this.setData({
      showSharePopup: true
    })
  },
  //底部隐藏分享菜单
  hideSharePopup() {
    this.setData({
      showSharePopup: false
    })
  },
  //底部显示参数说明
  showParameterPopup() {
    this.setData({
      showParameterPopup: true
    })
  },
  //底部隐藏参数说明
  hideParameterPopup() {
    this.setData({
      showParameterPopup: false
    })
  },
  
  
  // 回到首页
  goHome() {
    wx.switchTab({
      url: '/pages/tabBar/index/index'
    })
  },
  
  //查看轮播图片
  swiperPreview(e) {
    let src = e.currentTarget.dataset.src;
    let list = [];
    this.data.details.goods_images.forEach((item) => {
      list.push(item.preview_url);
    })
    this.previewImage(src, list);
  },
  // 图片预览
  previewImage(current, urls) {
    wx.previewImage({
      current: current,
      urls: urls
    })
  },
  pageBack() {
    let pages = getCurrentPages();
    if(pages.length<=1){
        this.goHome();
    } else{
        wx.navigateBack();
    }
  },
  navigateTo(e) {
    app.navigateTo(e);
  },
  navigateToToken(e) {
    if (!utils.getStorageSync(storeKeys.TOKEN)) {
      wx.navigateTo({
        url: "/pages/tabBar/login/login"
      })
      return;
    }
    app.navigateTo(e);
  },
  onShareAppMessage: function (e) {
    if (this.data.isOverdue) {
      return {
        title: app.globalData.shareTitle,
        imageUrl: app.globalData.shareImage,
        path: app.globalData.sharePath,
      }
    }
    let {
      goods_image_text,
      goods_name
    } = this.data.details;
    let path = "pages/activity/pages/groupShopping/groupGoodsDetail/groupGoodsDetail?activity_id=" + this.data.activity_id + "&share=xcx";
    let userId = this.data.userInfo.user_id || '';
    this.hideSharePopup();
    if (userId) {
      path = "pages/activity/pages/groupShopping/groupGoodsDetail/groupGoodsDetail?activity_id=" + this.data.activity_id + "&shareId=" + userId + "&share=xcx";
    }
    if(this.data.isfission){
        path = path+'&isfission=1'
    }
    console.log(this.data.canvasPosterUrl)
    return {
      title: goods_name,
      imageUrl: this.data.canvasPosterUrl || goods_image_text,
      path: path
    }
  },
  onShareTimeline: function () {
    if (this.data.isOverdue) {
      return {
        title: app.globalData.shareTitle,
        imageUrl: app.globalData.shareImage,
        path: app.globalData.sharePath,
      }
    }
    let {
      goods_image_text,
      goods_name
    } = this.data.details;
    let path = "pages/activity/pages/groupShopping/groupGoodsDetail/groupGoodsDetail?activity_id=" + this.data.activity_id + "&share=xcx";
    let userId = this.data.userInfo.user_id || '';
    if (userId) {
      path = "pages/activity/pages/groupShopping/groupGoodsDetail/groupGoodsDetail?activity_id=" + this.data.activity_id + "&shareId=" + userId + "&share=xcx";
    }
    if(this.data.isfission){
        path = path+'&isfission=1'
    }
    this.hideSharePopup();
    return {
      title: goods_name,
      imageUrl: goods_image_text,
      path: path
    }
  },
  // 普通用户切换绑定关系
  promotion() {
    let sharerId = utils.getStorageSync(storeKeys.SHAREID) || utils.getStorageSync(storeKeys.APPLESID) || "";
    console.log("sharerId", sharerId)
    if (!sharerId) {
      return;
    }
    let data = {
      sharerId: sharerId,
      isScanCode: "1"
    }
    http.request({
      url: api.URL + '/api/promotion/ch_upper',
      data: data,
      method: 'POST',
      token: utils.getStorageSync(storeKeys.TOKEN),
      noLogin: true,
      noToast: true,
      success: function (res) {
        console.log("success")
        console.log(res)
      },
      error: function (res) {
        console.log("error")
        console.log(res)
      }
    })
  },
  //商品详情
  goToDetail: utils.throttle(function (e) {
    let goodsId = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: "/pages/cart/pages/goodsDetail/goodsDetail?goods_id=" + goodsId
    })
  }),
  //去参团
  joinGroup:utils.throttle(function (e){

    if (!utils.getStorageSync(storeKeys.TOKEN)) {
        wx.navigateTo({
          url: "/pages/tabBar/login/login"
        })
        return;
    }

    let {
      id
    } = e.currentTarget.dataset;
    console.log(id);
    
    let path = this.data.isfission ? "/pages/activity/pages/groupShopping/groupFission/groupFission?shareId=": "/pages/activity/pages/groupShopping/groupShopping/groupShopping?shareId=";
    path = path + id
    wx.navigateTo({
      url: path
    })

  }),
  //前往原商详
  goDetail() {
    let goodsId = this.data.goodsId;
    wx.navigateTo({
      url: "/pages/cart/pages/goodsDetail/goodsDetail?goods_id=" + goodsId
    })
  },
  //发起拼团
  goGroupBuy:utils.throttle(function (e){

    if (!utils.getStorageSync(storeKeys.TOKEN)) {
      wx.navigateTo({
        url: "/pages/tabBar/login/login"
      })
      return;
    }
    // let index = e.currentTarget? e.currentTarget.dataset.index : e;
    let {
      index
    } = e.currentTarget.dataset;
    if(index == 0){//查看
      let joinid = this.data.joinid || '';
      
      let path = this.data.isfission ? "/pages/activity/pages/groupShopping/groupFission/groupFission?shareId=": "/pages/activity/pages/groupShopping/groupShopping/groupShopping?shareId=";
      path = path + joinid

      wx.navigateTo({
          url: path
      })
    }else{//发起
  
      let staffUserId = this.data.shareId || utils.getStorageSync(storeKeys.APPLESID) || 0;
      console.log("分享人id" + staffUserId)
      // console.log(isfission)
      let mode = this.data.isfission ?"groupbuylb":"groupbuy"
      console.log(mode)
      let data = {
        mode: mode,
        goodsId: this.data.goodsId, //商品ID
        addressId: this.data.addressId || 0,
        goodsSkuId: this.data.details.goods_sku_id || 0, //商品规格ID
        delivery:10,
        activityId: parseInt(this.data.activity_id), //分享人id,
        goodsNum: 1,
      };
      let url = "/pages/activity/pages/groupShopping/groupConfirmOrder/confirmOrder?data=" + JSON.stringify(data);
      console.log(JSON.stringify(data));
      let template_id = 'QfKtAZax5fw8oEgPbcky_bk2QD4Q4pwj60igE57jHnk';//拼团模板id
      // isfission 存在则是裂变拼团
      if(this.data.isfission){
        template_id = 'M4Nw40B4Hpn4C8NkCiBDajEqz1St_CRRjGlkxDOVP1g';//拼团裂变模板id
      }
      wx.requestSubscribeMessage({
        tmplIds: [template_id],
        success (res) { 
          let status = res[template_id];
          // console.log(status)
          if(status==='accept'){//允许
            console.log('允许推送')
            app.noticePush({template_id});
          }
          if(status==='reject'){//拒绝
            console.log('拒绝推送')
            app.cancelPush({template_id});
          }
        },
        complete (res){
          app.navigateToUrl(url);
        }
      })
     
    }
  }),
})