toktok-front/toktok-wx-applet/pages/beerDetail/beerDetail.js

// pages/beerDetail/beerDetail.js
var app = getApp();
const request = require("../../utils/request.js");
import uCharts from '../../utils/u-charts.js';
var uChartsInstance = {};
Page({

  /**
   * 页面的初始数据
   */
  data: {
    cWidth: 750,
    cHeight: 500,
    bannerIndex: 0,
    nosaleStatus: true,
    productId: null,
    beerData: {}
  },
  previewMedia(event) {
    let sources = this.data.beerData.imgUrls.map((item, index)=>{
      return {url: item}
    });
    let current = event.currentTarget.dataset.index;
    wx.previewMedia({
      sources: sources,
      current: current
    })
  },
  toCircles(event) {
    let name = event.currentTarget.dataset.name
    wx.navigateTo({
      url: '../beerCircles/beerCircles?productId=' + this.data.productId + '&name=' + name,
    })
  },
  wantDrinkFun() {
    let that = this;
    if(that.data.beerData.wantDrink) {
      wx.showToast({
        title: '已收到，我们尽快安排上架！',
        icon: 'none',
        duration: 2000
      }) 
      // that.setData({
      //   nosaleStatus: true
      // })
    }else{
      request.postData(
        'app/product/drink/want',
        {productId: that.data.beerData.productId},
        res => {
          wx.showToast({
            title: '已想喝+1',
            icon: 'none',
            duration: 2000
          }) 
          that.getProdDetailData();
        },
        res => {
          console.log(res)
        }
      )
    }
  },
  bindchange(event) {
    if(event.detail.source == 'touch'){
      this.setData({
        bannerIndex: event.detail.current
      })
    }else if(event.detail.source == 'autoplay'){
      this.setData({
        bannerIndex: event.detail.current
      }) 
    }
  },
  goStore() {
    wx.navigateTo({
      url: '../beerStore/beerStore',
    })
  },
  goOrder() {
    let url = this.data.beerData.jumpUrl;
    if(!url) {
      this.setData({
        nosaleStatus: false
      })
      return
    }
    let jumpType = request.getUrlKey(url, 'jumpType');
    if(jumpType == 'app') {
      let URL = decodeURIComponent(url)
      let jumpUrl = request.getUrlKey(URL, 'miniptogram')
      wx.navigateTo({
        url: JSON.parse(jumpUrl).path
      })
    }else if(jumpType == 'H5') {
      let jumpUrl = request.getUrlKey(url, 'url')
      wx.navigateTo({
        url: '../webView/webView?url='+jumpUrl
      })
    }else if(jumpType == 'miniptogram'){
      let appId = request.getUrlKey(url, 'appId');
      let path = request.getUrlKey(url, 'path')
      console.log(path)
      wx.navigateToMiniProgram({
        appId: appId,
        path: path,
        extraData: {},
        envVersion: 'release',
        success(res) {
          // 打开成功
        }
      })
    }
  },
  nosaleClose() {
    this.setData({
      nosaleStatus: true
    })
  },
  getProdDetailData() {
    let that = this;
    request.getData(
      'app/product/detail',
      {productId: that.data.productId},
      res => {
        that.setData({
          beerData: res.data.data
        })
      },
      res => {
        console.log(res)
      }
    )
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    that.setData({
      productId: options.productId
    })
    that.getProdDetailData();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    //这里的第一个 750 对应 css .charts 的 width
    const cWidth = 750 / 750 * wx.getSystemInfoSync().windowWidth;
    //这里的 500 对应 css .charts 的 height
    const cHeight = 500 / 750 * wx.getSystemInfoSync().windowWidth;
    this.setData({ cWidth, cHeight });
    this.getServerData();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

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

  },

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

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

  },

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

  },

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

  },
  getServerData() {
    //模拟从服务器获取数据时的延时
    setTimeout(() => {
      //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
      let res = {
        categories: ["原麦汁浓度","酒精度","级别","喜爱度","苦度值"],
        series: [
          {
            name: "当前",
            data: [20,40,60,80,100]
          },
          {
            name: "平均",
            data: [90,70,50,30,10]
          }
        ]
      };
      this.drawCharts('uxXiJSVkwzQtHtxxJadNKGaTRVZrgait', res);
    }, 500);
  },
  drawCharts(id,data){
    const ctx = wx.createCanvasContext(id, this);
    uChartsInstance[id] = new uCharts({
        type: "radar",
        context: ctx,
        width: this.data.cWidth,
        height: this.data.cHeight,
        categories: data.categories,
        series: data.series,
        animation: true,
        background: "#FFFFFF",
        color: ["#FFA100","#258AFB"],
        padding: [5,5,5,5],
        dataLabel: false,
        enableScroll: false,
        border: false,
        legend: {
          show: false,
          position: "right",
          lineHeight: 25
        },
        extra: {
          radar: {
            gridType: "radar",
            gridColor: "#EEEEEE",
            gridCount: 5,
            opacity: 0.2,
            max: 100,
            gridEval: 5,
            labelShow: true,
            border: true
          }
        }
      });
  },
  tap(e){
    uChartsInstance[e.target.id].touchLegend(e);
    uChartsInstance[e.target.id].showToolTip(e);
  }
})