init
This commit is contained in:
4
miniprogram/pages/detail/detail.json
Normal file
4
miniprogram/pages/detail/detail.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "我喜欢的鸡尾酒"
|
||||
}
|
||||
116
miniprogram/pages/detail/detail.scss
Normal file
116
miniprogram/pages/detail/detail.scss
Normal file
@@ -0,0 +1,116 @@
|
||||
/* pages/detail/detail.wxss */
|
||||
.container{
|
||||
.c-part{
|
||||
padding:0 10px;
|
||||
}
|
||||
.detail-name{
|
||||
font-family: 'iconfont';
|
||||
text-transform: capitalize;
|
||||
font-size: 35px;
|
||||
}
|
||||
.material-part{
|
||||
.mp-list{
|
||||
margin-top: 10px;
|
||||
.mpl-card{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid rgb(231, 231, 231);
|
||||
.m-name{
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
:last-child{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.step-part{
|
||||
.step-box{
|
||||
.step-card{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 10px 20px;
|
||||
.step-index{
|
||||
font-size: 25px;
|
||||
font-weight: 900;
|
||||
margin-right: 20px;
|
||||
font-family: "iconfont";
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.step-desc{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.deep-part{
|
||||
.deep-box{
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
.fixed-part{
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
.fixed-part-wrap{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.fp-item{
|
||||
image{
|
||||
width: 23px;
|
||||
padding: 10px;
|
||||
// background: red;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.measure-part{
|
||||
.mp-box{
|
||||
.mpb-item{
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
padding-bottom: 20px;
|
||||
align-items: center;
|
||||
.mpb-left{
|
||||
|
||||
}
|
||||
.mpb-right{
|
||||
.mpb-operation-box{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 10px;
|
||||
.subtraction{
|
||||
}
|
||||
.add{
|
||||
}
|
||||
.disabled-add{
|
||||
color: #e4e4e4;
|
||||
}
|
||||
.ob-btn{
|
||||
font-size: 25px;
|
||||
font-weight: 900;
|
||||
line-height: 10px;
|
||||
padding:10px;
|
||||
}
|
||||
.person-numer{
|
||||
input{
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.close-btn{
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
right: 20px;
|
||||
}
|
||||
193
miniprogram/pages/detail/detail.ts
Normal file
193
miniprogram/pages/detail/detail.ts
Normal file
@@ -0,0 +1,193 @@
|
||||
// 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
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
113
miniprogram/pages/detail/detail.wxml
Normal file
113
miniprogram/pages/detail/detail.wxml
Normal file
@@ -0,0 +1,113 @@
|
||||
<view class="container" id="detail-container" style="padding: 10px;">
|
||||
<view class="detail-name c-part" style="text-align: center;">
|
||||
{{title}}
|
||||
</view>
|
||||
<view class="material-part c-part">
|
||||
<view class="part-title">
|
||||
<view class="pt-text std-small-text" style="font-weight: 900;margin-right: 10px;">材料</view>
|
||||
<view class="pt-line"></view>
|
||||
</view>
|
||||
<view class="mp-list">
|
||||
<view class="mpl-card" wx:for="{{material_data}}" wx:key="name" wx:for-item="item">
|
||||
<view class="m-name std-text">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="m-unit small-text">
|
||||
{{item.unit}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="step-part c-part">
|
||||
<view class="part-title">
|
||||
<view class="pt-text std-small-text" style="font-weight: 900;margin-right: 10px;">步骤</view>
|
||||
<view class="pt-line"></view>
|
||||
</view>
|
||||
<view class="step-box">
|
||||
<view class="step-detail step-card" wx:for="{{steps}}" wx:for-item="item" wx:key="desc" wx:for-index="index">
|
||||
<view class="step-index">
|
||||
{{index+1}}
|
||||
</view>
|
||||
<view class="step-desc std-small-text">
|
||||
{{item.desc}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view hidden="{{measure_flag}}" class="deep-part c-part" style="margin-bottom: 80px;">
|
||||
<view class="part-title">
|
||||
<view class="pt-text std-small-text" style="font-weight: 900;margin-right: 10px;">深入</view>
|
||||
<view class="pt-line"></view>
|
||||
</view>
|
||||
<view class="deep-box std-small-text">
|
||||
<rich-text nodes="{{deep_info}}"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
<view hidden="{{measure_flag}}" class="fixed-part c-part">
|
||||
<view class="fixed-part-wrap">
|
||||
<view class="fp-left fp-item">
|
||||
<image bindtap="openMeasureFunc" style="background: rgb(253, 253, 31);" src="../../assets/ruler.png" mode="widthFix" />
|
||||
</view>
|
||||
<view class="fp-right fp-item">
|
||||
<image style="background: rgb(84, 84, 201);margin-right: 10px;" src="../../assets/share.png" mode="widthFix" />
|
||||
<image style="background: rgb(219, 78, 78);" src="../../assets/star.png" mode="widthFix" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view hidden="{{!measure_flag}}" class="close-btn" bindtap="closeFunc">
|
||||
<icon color="black" class="icon-box-img" type="cancel" size="30"></icon>
|
||||
</view>
|
||||
<view hidden="{{!measure_flag}}" class="measure-part c-part">
|
||||
<view class="part-title">
|
||||
<view class="pt-text std-small-text" style="font-weight: 900;margin-right: 10px;">度量实用工具</view>
|
||||
<view class="pt-line"></view>
|
||||
</view>
|
||||
<view class="mp-box">
|
||||
<view class="mpb-item" style="padding-top: 20px;">
|
||||
<view class="mpb-left std-small-text">
|
||||
表示方式
|
||||
</view>
|
||||
<view class="mpb-right std-small-text">
|
||||
<picker bindchange="measureShowTypesChange" range-key="name" value="{{measure_show_types_index}}" range="{{measure_show_types}}">
|
||||
<view class="picker">
|
||||
{{measure_show_types[measure_show_types_index].name}}
|
||||
<view class="picker-icon">
|
||||
<image src="../../assets/more.png" mode="widthFix"/>
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mpb-item">
|
||||
<view class="mpb-left std-small-text">
|
||||
测量单位
|
||||
</view>
|
||||
<view class="mpb-right std-small-text">
|
||||
<picker bindchange="measureUnitsChange" range-key="name" value="{{measure_units_index}}" range="{{measure_units}}">
|
||||
<view class="picker">
|
||||
{{measure_units[measure_units_index].name}}
|
||||
<view class="picker-icon">
|
||||
<image src="../../assets/more.png" mode="widthFix"/>
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mpb-item">
|
||||
<view class="mpb-left std-small-text">
|
||||
份数
|
||||
</view>
|
||||
<view class="mpb-right std-small-text">
|
||||
<view class="mpb-operation-box">
|
||||
<view wx-if="{{person_number>1}}" bindtap="personNumberFunc" data-type='1' class="subtraction ob-btn">-</view>
|
||||
<view wx-if="{{person_number == 1}}" class="subtraction ob-btn disabled-add">-</view>
|
||||
<view class="person-numer">
|
||||
<input value="{{person_number}}" type="numer"/>
|
||||
</view>
|
||||
<view class="add ob-btn" bindtap="personNumberFunc" data-type='2'>+</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user