历史记录

1

app.json

@@ -1,11 +1,12 @@
 {
   "pages": [
+    "pages/history/index",
+    "pages/my/index",
     "pages/news/index",
     "pages/news/detail",
     "pages/reserve/index",
     "pages/home/index",
-    "pages/login/index",
-    "pages/my/index"
+    "pages/login/index"
   ],
   "usingComponents": {
     "van-button": "/miniprogram_npm/vant-weapp/button/index",

commpents/history/index.js

@@ -0,0 +1,25 @@
+// commpents/newsList/index.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    list: { type: Array }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    detail: function (e) {
+      this.triggerEvent('detail', { id: e.currentTarget.dataset.id })
+    }
+  }
+})

commpents/history/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

commpents/history/index.wxml

@@ -0,0 +1,12 @@
+<view class="main">
+  <view class="list" wx:key="item" wx:for="{{list}}" bindtap="detail" data-id="{{item.id}}">
+    <view class="top">
+      <text>{{item.create_time}}</text>
+      <text>{{item.type}}</text>
+      <text>{{item.status=='0'?'待使用':item.status=='1'?'待评价':item.status=='2'?'已完成':item.status=='3'?'失效':'未识别'}}</text>
+    </view>
+    <view class="down">
+      <text wx:key="tag" wx:for="{{item.children}}" wx:for-item="tag">{{tag.title}},</text>
+    </view>
+  </view>
+</view>

commpents/history/index.wxss

@@ -0,0 +1,47 @@
+.main {
+  padding: 8px;
+}
+
+.main .list {
+  float: left;
+  width: 95%;
+  background-color: #ffffff;
+  margin: 0 0 10px 0;
+  border-radius: 8px;
+  padding: 8px;
+}
+
+.main .list .top {
+  float: left;
+  width: 100%;
+  padding: 0 0 5px 0;
+  margin: 0 0 5px 0;
+  border-bottom: 1px solid #ccc;
+}
+
+.main .list .top text {
+  float: left;
+  width: 33%;
+  font-size: 12px;
+  color: #000;
+}
+
+
+.main .list .top text:nth-child(2) {
+  text-align: center;
+}
+
+.main .list .top text:nth-child(3) {
+  text-align: right;
+}
+
+.main .list .down {
+  float: left;
+  width: 100%;
+}
+
+.main .list .down text {
+  font-size: 12px;
+  color: #000;
+  margin: 0 5px 0 0;
+}

pages/history/index.js

@@ -0,0 +1,103 @@
+// pages/home/index.js
+const app = getApp()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    height: app.globalData.height * 2 + 25,
+    windowHeight: app.globalData.windowHeight,
+    navbarData: {
+      name: '历史记录'
+    },
+    list: [
+      {
+        create_time: '2021-01-01',
+        type: '早餐',
+        status: '0',
+        children: [
+          { title: '香辣肉絲' }, { title: '香辣肉絲' }, { title: '香辣肉絲' }, { title: '香辣肉絲' }, { title: '香辣肉絲' },
+          { title: '香辣肉絲' }, { title: '香辣肉絲' },
+        ]
+      },
+      {
+        create_time: '2021-01-01',
+        type: '早餐',
+        status: '0',
+        children: [
+          { title: '香辣肉絲' }, { title: '香辣肉絲' }, { title: '香辣肉絲' }, { title: '香辣肉絲' }, { title: '香辣肉絲' },
+        ]
+      },
+      {
+        create_time: '2021-01-01',
+        type: '早餐',
+        status: '0',
+        children: [
+          { title: '香辣肉絲' }, { title: '香辣肉絲' }, { title: '香辣肉絲' }, { title: '香辣肉絲' }, { title: '香辣肉絲' },
+        ]
+      },
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    console.log(options.id);
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    // if (typeof this.getTabBar === 'function' &&
+    //   this.getTabBar()) {
+    //   this.getTabBar().setData({
+    //     selected: 3
+    //   })
+    // }
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/history/index.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "nav-bar": "/commpents/navbar/index",
+    "history-list": "/commpents/history/index"
+  }
+}

pages/history/index.wxml

@@ -0,0 +1,6 @@
+<nav-bar navbar-data='{{navbarData}}'></nav-bar>
+<view class="main" style="padding-top:{{height}}px;height:{{windowHeight-height}}px">
+  <view class="one" style="height:{{windowHeight-height}}px;">
+    <history-list list="{{list}}" bind:detail="detail"></history-list>
+  </view>
+</view>

pages/history/index.wxss

@@ -0,0 +1,8 @@
+.main {}
+
+.main .one {
+  float: left;
+  width: 100%;
+  overflow-y: auto;
+  background-color: #f1f1f1;
+}

pages/my/index.js

@@ -7,11 +7,29 @@ Page({
    */
   data: {
     height: app.globalData.height * 2 + 25,
+    windowHeight: app.globalData.windowHeight,
     navbarData: {
       name: '我的'
+    },
+    userInfo: {
+      url: '/image/home/image1.jpg',
+      name: '顾红伟'
+    }
+  },
+  // 跳转页面
+  routeBtn: function (e) {
+    let type = e.currentTarget.dataset.type
+    if (type == '1') {
+      wx.redirectTo({
+        url: '/pages/history/index'
+      })
+    } else if (type == '2') {
+      app.globalData.userInfo = null
+      wx.redirectTo({
+        url: '/pages/login/index'
+      })
     }
   },
-
   /**
    * 生命周期函数--监听页面加载
    */

pages/my/index.wxml

@@ -1,4 +1,17 @@
 <nav-bar navbar-data='{{navbarData}}'></nav-bar>
-<view class="main" style="padding-top:{{height}}px">
-  内容
+<view class="main" style="padding-top:{{height}}px;height:{{windowHeight-height}}px">
+  <view class="one">
+    <view class="left">
+      <image src="{{userInfo.url}}"></image>
+    </view>
+    <view class="right">
+      <view class="name">
+        {{userInfo.name}}
+      </view>
+    </view>
+  </view>
+  <view class="two">
+    <van-cell title="历史记录" is-link bind:click="routeBtn" data-type="1" />
+    <van-cell title="退出登录" is-link bind:click="routeBtn" data-type="2" />
+  </view>
 </view>

pages/my/index.wxss

@@ -1 +1,41 @@
-/* pages/my/index.wxss */
+.main {
+  float: left;
+  width: 100%;
+}
+
+.main .one {
+  float: left;
+  width: 95%;
+  padding: 8px;
+  border-bottom: 1px solid #f1f1f1;
+}
+
+.main .one .left {
+  float: left;
+  width: 25%;
+  text-align: center;
+}
+
+.main .one .left image {
+  width: 66px;
+  height: 66px;
+  border-radius: 90px;
+}
+
+.main .one .right {
+  float: left;
+  width: 75%;
+}
+
+.main .one .right .name {
+  float: left;
+  width: 100%;
+  font-size: 16px;
+  font-weight: bold;
+  margin: 0 0 5px 0;
+}
+
+.main .two {
+  float: left;
+  width: 100%;
+}