init

miniprogram/api/index.ts

@@ -0,0 +1,11 @@
+const net = require("./request")
+const request={
+  getWineList:function(data:any) {
+    return net.request({
+      api:'/api/v1/wine',
+      method:"GET",
+      data
+    })
+  },
+}
+module.exports = request

miniprogram/api/request.ts

@@ -0,0 +1,59 @@
+// var baseUrl = "https://dfhd.guwengkj.com";
+var baseUrl = "http://192.168.1.40:8083";
+// const APPID = "wx3d38ce1103a82225";
+// const SECRET = '3c41ca428b4d0f43cfaef6f567a1cc06';
+const service = {
+  request:(options:any) => {
+    let {api,data={},method="POST",header='',callback} = options
+    var url=baseUrl+api
+    if(api.includes("http")){// 特殊接口
+      url=api
+    }
+    //获取token 缓存
+    var token= wx.getStorageSync('token')
+    if(token)token="Bearer "+token
+    if(!header){
+      header={
+        // 'content-type': 'application/x-www-form-urlencoded'
+        'content-type': 'application/json'
+      }
+    }
+    header["Authorization"]=token || 'Basic ZGV2OmRldjEyMw== '
+    return new Promise((resolve,reject)=>{
+      wx.request({
+        url: url,
+        data,
+        method,
+        header,
+        success (res:any) {
+          // console.log(res.data)
+          resolve(res.data)
+        },
+        fail(error:any){
+          wx.showToast({
+            title: error.errMsg,
+            icon: 'error',
+            duration: 2000
+          })
+          reject(error)
+        },
+        complete(res:any){
+          // console.log(res);
+          if(res.data.code == 401) { // token过期
+            wx.showToast({
+              title: res.data.message,
+              icon: 'error',
+              duration: 2000
+            })
+            wx.setStorageSync('token', '');//清空token
+            // wx.navigateTo({ // 跳转登录页
+            //   url: '/pages/login/login',
+            // })
+          }
+        }
+      })
+    })
+  }
+}
+// export default service;
+module.exports = service

miniprogram/app.json

@@ -0,0 +1,18 @@
+{
+  "pages": [
+    "pages/home/home",
+    "pages/index/index",
+    "pages/logs/logs",
+    "pages/star/star",
+    "pages/search/search",
+    "pages/detail/detail"
+  ],
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTitleText": "Weixin",
+    "navigationBarTextStyle": "black"
+  },
+  "style": "v2",
+  "sitemapLocation": "sitemap.json"
+}

miniprogram/app.scss

@@ -0,0 +1,61 @@
+/**app.wxss**/
+@font-face {
+  font-family: "iconfont"; /* Project id 4030386 */
+  src: url('https://gwjxb.oss-cn-chengdu.aliyuncs.com/TangoBT.ttf') format('truetype');
+}
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  // padding: 200rpx 0;
+  box-sizing: border-box;
+  .c-part{
+    margin-bottom: 20px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+} 
+.gray-samll-text{
+  color: gray;
+  font-size: 10px;
+}
+.small-text{
+  font-size: 10px;
+}
+.std-small-text{
+  font-size: 12px;
+}
+.std-text{
+  font-size: 14px;
+}
+.picker{
+  display: flex;
+  // align-items: center;
+  .picker-icon>image{
+    width: 15px;
+  }
+}
+
+.text-ellipsis-1{ /*超出部分省略号 单行*/
+  overflow:hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 1;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  /* min-height: 38rpx; */
+}
+.part-title{
+  display: flex;
+  align-items: center;
+  .pt-text{
+    white-space: nowrap;
+  }
+  .pt-line{
+    width: 100%;
+    border-top: 1px solid black;
+    height: 1px;
+  }
+}
+

miniprogram/app.ts

@@ -0,0 +1,25 @@
+// app.ts
+App<IAppOption>({
+  globalData: {},
+  onLaunch() {
+    // 展示本地存储能力
+    const logs = wx.getStorageSync('logs') || []
+    logs.unshift(Date.now())
+    wx.setStorageSync('logs', logs)
+
+    // 登录
+    wx.login({
+      success: res => {
+        console.log(res.code)
+        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+      },
+    })
+    wx.loadFontFace({
+      family: 'iconfont',
+      source: 'url("https://gwjxb.oss-cn-chengdu.aliyuncs.com/TangoBT.ttf")',
+      success: (res) => {
+        console.log(res);
+      }
+    })
+  },
+})

miniprogram/pages/detail/detail.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "我喜欢的鸡尾酒"
+}

miniprogram/pages/detail/detail.scss

@@ -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;
+}

miniprogram/pages/detail/detail.ts

@@ -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
+      })
+    }
+  }
+})

miniprogram/pages/detail/detail.wxml

@@ -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>

miniprogram/pages/home/home.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "我喜欢的鸡尾酒"
+}

miniprogram/pages/home/home.scss

@@ -0,0 +1,82 @@
+/* pages/home/home.wxss */
+.operation-part{
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  .btn{
+    border: 1px solid red;
+    padding: 10px;
+    border-radius: 5px;
+    margin: 0 5px;
+    color: red;
+    font-size: 12px;
+  }
+  .star-btn{
+    border: 1px solid rgb(192, 21, 21);
+    color: rgb(192, 21, 21);
+  }
+  .question-btn{
+    padding:0 10px;
+    display:flex;
+    align-items: center;
+    border: 1px solid rgb(21, 144, 192);
+    color: rgb(21, 144, 192);
+    image{
+      width: 20px;
+    }
+  }
+}
+.introduce-part {
+  text-align: center;
+  .title{
+    font-family: 'iconfont';
+    text-transform: capitalize;
+    font-size: 35px;
+  }
+  .desc{
+    font-size: 12px;
+    margin-top: 10px;
+  }
+}
+.list-part{
+  .lp-card{
+    display: flex;
+    padding: 10px;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .lpc-name-box{
+      width:70%;
+      .lpc-name{
+        width: 100%;
+        font-family: 'iconfont';
+        text-transform: capitalize;
+        font-size: 20px;
+      }
+    }
+    .lpc-tag{
+      white-space: nowrap;
+      width:30%;
+      text-align: right;
+    }
+  }
+}
+.desc-part{
+  font-size: 12px;
+}
+.search-part{
+  width: 100%;
+  position: fixed;
+  bottom: 20px;
+  text-align: right;
+  padding-right: 20px;
+  box-sizing: border-box;
+  .search-btn{
+    width: 20px;
+    height: 20px;
+    background-color: rgb(243, 243, 243);
+    padding: 10px;
+    border-radius: 50%;
+    box-shadow: 1px 1px #a9a9a9;
+  }
+}

miniprogram/pages/home/home.ts

@@ -0,0 +1,119 @@
+// pages/home/home.ts
+const api = require("../../api/index")
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    introduce:`在家制作鸡尾酒是一种生活方式`,
+    list:[
+      {
+        name:'the last word',
+        desc:'橙汁',
+        tag:'遗言',
+        id:1
+      },
+      {
+        name:'june bug',
+        tag:'六月虫',
+        desc:'青柠汁',
+        id:2
+      }
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad() {
+    this.getList()
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+    console.log(1111);
+    
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+  // 我喜欢的鸡尾酒
+  toStarFunc() {
+    wx.navigateTo({
+      url: '../star/star',
+    })
+  },
+  // 搜索配方
+  toSearchFunc() {
+    wx.navigateTo({
+      url: '../search/search',
+    })
+  },
+  toDetailFunc(data:any) {
+    console.log(data);
+    const item = data.currentTarget.dataset.item
+    wx.navigateTo({
+      url: '../detail/detail?name='+item.name+'&tag='+item.tag,
+    })
+  },
+  async getList() {//获取列表
+    const res = await api.getWineList({
+      current:1,
+      size:10
+    })
+    console.log(res);
+    if(res.code === 200) {
+      // if(res.data.materials.length>0) {
+        for(let item1 of res.data) {
+          item1.materials_str = ''
+          if(item1.materials.length>0) {
+            item1.materials.forEach((item:any,i:number) => {
+              item1.materials_str += item.name+','
+            });
+          }
+          console.log(item1.materials_str)
+        }
+      // }
+    }
+  },
+})

miniprogram/pages/home/home.wxml

@@ -0,0 +1,28 @@
+<view class="container" style="padding: 10px;">
+  <view class="introduce-part c-part">   
+    <view class="title">Make My Drink</view>
+    <view class="desc">
+        {{introduce}}
+    </view>
+  </view>
+  <view class="operation-part c-part">
+    <view class="star-btn btn" bindtap="toStarFunc" style="width: 50%;"> 我喜欢的鸡尾酒</view>
+    <view class="question-btn btn">
+      <image src="../../assets/question.png" mode="widthFix"/>
+    </view>
+  </view>
+  <view class="list-part c-part">
+    <view class="lp-card"  wx:for="{{list}}" bindtap="toDetailFunc" data-item="{{item}}" wx:for-item="item" wx:key="id">
+      <view class="lpc-name-box">
+        <view class="lpc-name text-ellipsis-1" style="margin-bottom: 5px;"> {{item.name}}</view>
+        <view class="small-text text-ellipsis-1"> {{item.desc}}</view>
+      </view>
+      <view class="lpc-tag std-small-text text-ellipsis-1">
+        {{item.tag}}
+      </view>
+    </view>
+  </view>
+  <view class="search-part">
+    <image bindtap="toSearchFunc" class="search-btn" src="../../assets/search.png" mode="widthFix"/>
+  </view>
+</view>

miniprogram/pages/index/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

miniprogram/pages/index/index.scss

@@ -0,0 +1,19 @@
+/**index.wxss**/
+.userinfo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #aaa;
+}
+
+.userinfo-avatar {
+  overflow: hidden;
+  width: 128rpx;
+  height: 128rpx;
+  margin: 20rpx;
+  border-radius: 50%;
+}
+
+.usermotto {
+  margin-top: 200px;
+}

miniprogram/pages/index/index.ts

@@ -0,0 +1,53 @@
+// index.ts
+// 获取应用实例
+const app = getApp<IAppOption>()
+
+Page({
+  data: {
+    motto: 'Hello World',
+    userInfo: {},
+    hasUserInfo: false,
+    canIUse: wx.canIUse('button.open-type.getUserInfo'),
+    canIUseGetUserProfile: false,
+    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
+  },
+  // 事件处理函数
+  bindViewTap() {
+    wx.navigateTo({
+      url: '../logs/logs',
+    })
+  },
+  onLoad() {
+    // @ts-ignore
+    if (wx.getUserProfile) {
+      this.setData({
+        canIUseGetUserProfile: true
+      })
+      this.getUserProfile()
+    }
+  },
+  getUserProfile() {
+    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
+    wx.getUserProfile({
+      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
+      success: (res) => {
+        console.log(res)
+        this.setData({
+          userInfo: res.userInfo,
+          hasUserInfo: true
+        })
+      },
+      complete:(res) => {
+        console.log(res);
+      }
+    })
+  },
+  getUserInfo(e: any) {
+    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
+    console.log(e)
+    this.setData({
+      userInfo: e.detail.userInfo,
+      hasUserInfo: true
+    })
+  }
+})

miniprogram/pages/index/index.wxml

@@ -0,0 +1,23 @@
+<!--index.wxml-->
+<view class="container">
+  <view class="userinfo">
+    <block wx:if="{{canIUseOpenData}}">
+      <view class="userinfo-avatar" bindtap="bindViewTap">
+        <open-data type="userAvatarUrl"></open-data>
+      </view>
+      <open-data type="userNickName"></open-data>
+    </block>
+    <block wx:elif="{{!hasUserInfo}}">
+      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
+      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
+      <view wx:else> 请使用1.4.4及以上版本基础库 </view>
+    </block>
+    <block wx:else>
+      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
+      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
+    </block>
+  </view>
+  <view class="usermotto">
+    <text class="user-motto">{{motto}}</text>
+  </view>
+</view>

miniprogram/pages/logs/logs.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "查看启动日志",
+  "usingComponents": {}
+}

miniprogram/pages/logs/logs.ts

@@ -0,0 +1,19 @@
+// logs.ts
+// const util = require('../../utils/util.js')
+import { formatTime } from '../../utils/util'
+
+Page({
+  data: {
+    logs: [],
+  },
+  onLoad() {
+    this.setData({
+      logs: (wx.getStorageSync('logs') || []).map((log: string) => {
+        return {
+          date: formatTime(new Date(log)),
+          timeStamp: log
+        }
+      }),
+    })
+  },
+})

miniprogram/pages/logs/logs.wxml

@@ -0,0 +1,6 @@
+<!--logs.wxml-->
+<view class="container log-list">
+  <block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log">
+    <text class="log-item">{{index + 1}}. {{log.date}}</text>
+  </block>
+</view>

miniprogram/pages/logs/logs.wxss

@@ -0,0 +1,8 @@
+.log-list {
+  display: flex;
+  flex-direction: column;
+  padding: 40rpx;
+}
+.log-item {
+  margin: 10rpx;
+}

miniprogram/pages/search/search.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "搜索配方"
+}

miniprogram/pages/search/search.scss

@@ -0,0 +1,93 @@
+.operation-part{
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  .btn{
+    border: 1px solid red;
+    padding: 10px;
+    border-radius: 5px;
+    margin: 0 5px;
+    color: red;
+    font-size: 12px;
+  }
+  .star-btn{
+    border: 1px solid rgb(192, 21, 21);
+    color: rgb(192, 21, 21);
+  }
+  .question-btn{
+    padding:0 10px;
+    display:flex;
+    align-items: center;
+    border: 1px solid rgb(21, 144, 192);
+    color: rgb(21, 144, 192);
+    image{
+      width: 20px;
+    }
+  }
+}
+.introduce-part {
+  text-align: center;
+  .title{
+    font-family: 'iconfont';
+    text-transform: capitalize;
+    font-size: 35px;
+  }
+  .desc{
+    font-size: 12px;
+    margin-top: 10px;
+  }
+}
+.list-part{
+  width: 95% !important;
+  margin-top: 50px;
+  .lp-card{
+    display: flex;
+    padding: 10px;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .lpc-name-box{
+      width:70%;
+      .lpc-name{
+        width: 100%;
+        font-family: 'iconfont';
+        text-transform: capitalize;
+        font-size: 20px;
+      }
+    }
+    .lpc-tag{
+      white-space: nowrap;
+      width:30%;
+      text-align: right;
+    }
+  }
+}
+.desc-part{
+  font-size: 12px;
+}
+.search-part{
+  width: 100%;
+  position: fixed;
+  top: 10px;
+  text-align: right;
+  box-sizing: border-box;
+  left: 0;
+  .search-box{
+    background-color: rgb(243, 243, 243);
+    width: 80%;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-radius: 5px;
+    .search-icon{
+      width: 15px;
+    }
+    .search-input{
+      font-size: 12px;
+      width: 100%;
+      text-align: left;
+      padding-left: 10px;
+    }
+  }
+}

miniprogram/pages/search/search.ts

@@ -0,0 +1,79 @@
+// pages/search/search.ts
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    list:[
+      {
+        name:'the last word',
+        desc:'橙汁',
+        tag:'遗言',
+        id:1
+      },
+      {
+        name:'june bug',
+        tag:'六月虫',
+        desc:'青柠汁',
+        id:2
+      }
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

miniprogram/pages/search/search.wxml

@@ -0,0 +1,22 @@
+<view class="container" style="padding: 10px;">
+  <view class="search-part  c-part">
+    <view class="search-box">
+      <image class="search-icon" src="../../assets/search.png" mode="widthFix"/>
+      <input class="search-input" type="text"   placeholder="搜索鸡尾酒" />
+    </view>
+  </view>
+  <view class="list-part c-part" wx:if="{{list.length>0}}">
+    <view class="lp-card"  wx:for="{{list}}" wx:for-item="item" wx:key="id">
+      <view class="lpc-name-box">
+        <view class="lpc-name text-ellipsis-1" style="margin-bottom: 5px;"> {{item.name}}</view>
+        <view class="small-text text-ellipsis-1"> {{item.desc}}</view>
+      </view>
+      <view class="lpc-tag std-small-text text-ellipsis-1">
+        {{item.tag}}
+      </view>
+    </view>
+  </view>
+  <view wx:else="{{list.length<1}}">
+    暂无数据
+  </view>
+</view>

miniprogram/pages/star/star.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "我的收藏"
+}

miniprogram/pages/star/star.scss

@@ -0,0 +1,82 @@
+/* pages/home/home.wxss */
+.operation-part{
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  .btn{
+    border: 1px solid red;
+    padding: 10px;
+    border-radius: 5px;
+    margin: 0 5px;
+    color: red;
+    font-size: 12px;
+  }
+  .star-btn{
+    border: 1px solid rgb(192, 21, 21);
+    color: rgb(192, 21, 21);
+  }
+  .question-btn{
+    padding:0 10px;
+    display:flex;
+    align-items: center;
+    border: 1px solid rgb(21, 144, 192);
+    color: rgb(21, 144, 192);
+    image{
+      width: 20px;
+    }
+  }
+}
+.introduce-part {
+  text-align: center;
+  .title{
+    font-family: 'iconfont';
+    text-transform: capitalize;
+    font-size: 35px;
+  }
+  .desc{
+    font-size: 12px;
+    margin-top: 10px;
+  }
+}
+.list-part{
+  .lp-card{
+    display: flex;
+    padding: 10px;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    .lpc-name-box{
+      width:70%;
+      .lpc-name{
+        width: 100%;
+        font-family: 'iconfont';
+        text-transform: capitalize;
+        font-size: 20px;
+      }
+    }
+    .lpc-tag{
+      white-space: nowrap;
+      width:30%;
+      text-align: right;
+    }
+  }
+}
+.desc-part{
+  font-size: 12px;
+}
+.search-part{
+  width: 100%;
+  position: fixed;
+  bottom: 20px;
+  text-align: right;
+  padding-right: 20px;
+  box-sizing: border-box;
+  .search-btn{
+    width: 20px;
+    height: 20px;
+    background-color: rgb(243, 243, 243);
+    padding: 10px;
+    border-radius: 50%;
+    box-shadow: 1px 1px #a9a9a9;
+  }
+}

miniprogram/pages/star/star.ts

@@ -0,0 +1,79 @@
+// pages/star/star.ts
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    list:[
+      {
+        name:'the last word',
+        desc:'橙汁',
+        tag:'遗言',
+        id:1
+      },
+      {
+        name:'june bug',
+        tag:'六月虫',
+        desc:'青柠汁',
+        id:2
+      }
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

miniprogram/pages/star/star.wxml

@@ -0,0 +1,13 @@
+<view class="container" style="padding: 10px;">
+  <view class="list-part c-part">
+    <view class="lp-card"  wx:for="{{list}}" wx:for-item="item" wx:key="id">
+      <view class="lpc-name-box">
+        <view class="lpc-name text-ellipsis-1" style="margin-bottom: 5px;"> {{item.name}}</view>
+        <view class="small-text text-ellipsis-1"> {{item.desc}}</view>
+      </view>
+      <view class="lpc-tag std-small-text text-ellipsis-1">
+        {{item.tag}}
+      </view>
+    </view>
+  </view>
+</view>

miniprogram/sitemap.json

@@ -0,0 +1,7 @@
+{
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+  "action": "allow",
+  "page": "*"
+  }]
+}

miniprogram/utils/util.ts

@@ -0,0 +1,19 @@
+export const formatTime = (date: Date) => {
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  const hour = date.getHours()
+  const minute = date.getMinutes()
+  const second = date.getSeconds()
+
+  return (
+    [year, month, day].map(formatNumber).join('/') +
+    ' ' +
+    [hour, minute, second].map(formatNumber).join(':')
+  )
+}
+
+const formatNumber = (n: number) => {
+  const s = n.toString()
+  return s[1] ? s : '0' + s
+}