wineList-MiniApp/miniprogram/pages/detail/detail.ts

// pages/detail/detail.ts
Page({

  /**
   * 页面的初始数据
   */
  data: {
    title:'',
    measure_flag:false,
    person_number:1,
    measure_show_types:[
      {
        name:'小数'
      },
      {
        name:'分数'
      }
    ],
    measure_show_types_index:0,
    measure_units:[
      {
        name:'shot'
      },
      {
        name:'oz'
      },
      {
        name:'ml'
      },
      {
        name:'cl'
      }
    ],
    measure_units_index:0,
    material_data:[
      {
        name:'金酒',
        unit:'shot',
        per_percent:0.5
      },
      {
        name:'绿查特酒',
        unit:'shot',
        per_percent:0.5
      },
      {
        name:'路萨朵樱桃酒',
        unit:'shot',
        per_percent:0.5
      },
      {
        name:'青柠汁',
        unit:'shot',
        per_percent:0.5
      }
    ],
    steps:[
      {
        desc:'奖所有原料和冰块一起加入到摇酒壶中摇匀'
      },
      {
        desc:'可选的酒渍樱桃装饰'
      }
    ],
    deep_info:`这款酒起源于一个世纪以前的底特律，但是它的名字典故已经不可考据。
    虽然把它翻译成“临别一语”或者“关键一语”会更符合情景，但我比较喜欢“遗言”这个带有古老、复杂、神秘感觉的名字。
    The Last Word是一款在现代复活的典型古典鸡尾酒。虽然在最开始推出时也火了几十年，但后来销声匿迹。直到1951年Ted Saucier 编著的《Bottoms Up》中最后一次出现。
    2005年，Murray Stenson 在书中发现这款古老的鸡尾酒，并把它加入他工作的酒吧Zigzag Café的菜单中。很快，这款酒就成了该酒吧的招牌。
    此外，The Last Word的重新出现吸引了很多鸡尾酒媒体的关注，这是推动这款酒在全球范围内流行的关键因素。很多人都认为，The Last Word的重新出现是一个重大发现，因为虽然这个配方很老，但它仍然具有现代风格：有着明亮的绿色，但完全来自于使用的绿查特酒，而不是人造色素。由四种味道强烈的原料产生的味道是独特而少见的。
    综合来看，The Last Word是一款草药风味非常突出的鸡尾酒，其中绿查特酒扮演了很重要的角色。酒厂也很感谢Murray Stenson，因为The Last Word的出现吸引了更多人探索一些失传的鸡尾酒配方，也有人试图用绿茶特酒创作带有古典风格的现代鸡尾酒。不过，这款酒的味道仍然十分强烈，酒精度也不低，不一定适合所有人。
    还有一件有趣的事：虽然有点拗口，The Last Word和Last Call（拉单前最后一轮酒）有点像双关语，或者说它的名字本身就适合作为最后一杯酒。虽然这种幽默感值得欣赏，但并不需要每次都喝The Last Word来作为最后一杯酒。`,
    top:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(e) {
    console.log(e.tag);
    wx.setNavigationBarTitle({
      title: e.tag || '详情'
    })
    this.setData({
      title:e.name
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },
  measureShowTypesChange(e:any) {
    // console.log(e.detail.value);
    this.setData({
      measure_show_types_index:Number(e.detail.value)
    })
  },
  openMeasureFunc(){
    const _this = this
    var query = wx.createSelectorQuery();
      query.select("#detail-container").boundingClientRect((rect)=> {

        if(!this.data.measure_flag) {
          _this.setData({
            top:Math.abs(rect.top)
          })
        }
        // console.log(rect)//width等
        this.setData({
          measure_flag:!this.data.measure_flag
        })
        
        wx.pageScrollTo({
          scrollTop: _this.data.top,
          // scrollTop:230,
          duration: 100
        })
    }).exec();
    
  },
  measureUnitsChange(e:any) {
    this.setData({
      measure_units_index:Number(e.detail.value)
    })
  },
  closeFunc() {
    // this.setData({
    //   measure_flag:!this.data.measure_flag
    // })
    this.openMeasureFunc()
  },
  personNumberFunc(params:any) {
    const type = params.currentTarget.dataset.type
    // console.log(type);
    
    if(type == 1) { // 减
      if(this.data.person_number>1) {
        this.setData({
          person_number:--this.data.person_number
        })
      }
    }
    else{ // 加
      this.setData({
        person_number:++this.data.person_number
      })
    }
  }
})