feat: add my appointment relative pages

app.json

@@ -16,13 +16,15 @@
     "pages/addressAdd/addressAdd",
     "pages/set/set",
     "pages/openArea/openArea",
-    "pages/rechargeRecord/rechargeRecord"
+    "pages/rechargeRecord/rechargeRecord",
+    "pages/myAppointment/myAppointment"
   ],
   "usingComponents": {
     "van-icon": "@vant/weapp/icon/index",
     "van-overlay": "@vant/weapp/overlay/index",
     "van-dialog": "@vant/weapp/dialog/index",
-    "van-field": "@vant/weapp/field/index"
+    "van-field": "@vant/weapp/field/index",
+    "van-empty": "@vant/weapp/empty/index"
   },
   "window": {
     "backgroundTextStyle": "light",

pages/my/my.js

@@ -30,10 +30,12 @@ Page({
   },
 
   /**
-   * 生命周期函数--监听页面隐藏
+   * 我的预约
    */
-  onHide() {
-
+  handleMyAppointment() {
+    wx.navigateTo({
+      url: '/pages/myAppointment/myAppointment',
+    })
   },
 
   /**

pages/my/my.wxml

@@ -30,7 +30,7 @@
         </view>
         <view class="desc">我的档案</view>
       </view>
-      <view class="act-item yuyue" data-index="2">
+      <view class="act-item yuyue" data-index="2" bindtap="handleMyAppointment">
         <view class="icon">
           <image class="image-icon" src="./../../imaes/yuyue@2x.png"></image>
         </view>

pages/myAppointment/myAppointment.js

@@ -0,0 +1,78 @@
+// pages/myAppointment/myAppointment.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    navItemActive: '0',
+    dataList: [1,1,1,1,1,1,1,1,1]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+    wx.showLoading({
+      title: '加载中...',
+      mask: true
+    })
+    setTimeout(() => {
+      wx.hideLoading({
+        success: (res) => {},
+      })
+    }, 1500);
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 切换nav
+   */
+  handleChangeNav(e) {
+    var navItemActive = e.currentTarget.dataset.index
+    this.setData({
+      navItemActive: navItemActive
+    })
+  }
+})

pages/myAppointment/myAppointment.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "我的预约"
+}

pages/myAppointment/myAppointment.wxml

@@ -0,0 +1,40 @@
+<!--pages/myAppointment/myAppointment.wxml-->
+<view class="myappoint-content">
+  <view class="nav-header ittflex">
+    <view class="nav-item nav-all ittflex {{navItemActive == '0' ? 'nav-item-active' : ''}}" bindtap="handleChangeNav" data-index="0">全部</view>
+    <view class="nav-item nav-wait ittflex {{navItemActive == '1' ? 'nav-item-active' : ''}}" bindtap="handleChangeNav" data-index="1">待服务</view>
+    <view class="nav-item nav-done ittflex {{navItemActive == '2' ? 'nav-item-active' : ''}}" bindtap="handleChangeNav" data-index="2">已完成</view>
+  </view>
+  <block wx:if="{{dataList.length == 0}}">
+    <view class="nodate" >
+      <van-empty description="暂无数据" />
+    </view>
+  </block>
+  <block wx:else>
+    <view wx:for="{{dataList}}" wx:key="index" class="data-item">
+      <view class="top date ittflex-jcb">
+        <text class="top-date">2022-09-20 13:00-18:00</text>
+        <!-- <text class="status s-wait">待服务</text>
+        <text class="status s-done">已完成</text> -->
+        <text class="status s-cancel">已取消</text>
+      </view>
+      <view class="center info">
+        <view class="username info-item">
+          <text>预约账号：</text>
+          <text>范一岚</text>
+        </view>
+        <view class="username-w info-item">
+          <text>待检测账号：</text>
+          <text>范一岚</text>
+        </view>
+        <view class="order-time info-item">
+          <text>下单时间：</text>
+          <text>2022-09-09 22:57</text>
+        </view>
+      </view>
+      <view class="bototm actions">
+        <view class="cancel-button ittflex">取消</view>
+      </view>
+    </view>
+  </block>
+</view>

pages/myAppointment/myAppointment.wxss

@@ -0,0 +1,97 @@
+/* pages/myAppointment/myAppointment.wxss */
+.myappoint-content {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  background-color: #f7f7f7;
+}
+.nav-header {
+  width: 100%;
+  height: 88rpx;
+  background-color: #fff;
+}
+.nav-item {
+  width: 230rpx;
+  height: 100%;
+  font-size: 30rpx;
+  font-weight: 400;
+  color: #999999;
+}
+.nav-item-active {
+  font-weight: bold;
+  color: var(--maincolor);
+}
+.nodate {
+  width: 100%;
+  height: calc(100% - 88rpx);
+  margin-top: 250rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+.nodate-img {
+  width: 450rpx;
+  height: 400rpx;
+}
+.nodate-text {
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #999999;
+  margin-top: 20rpx;
+}
+.data-item {
+  width: 690rpx;
+  height: 352rpx;
+  margin: 20rpx auto 0;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+}
+.top {
+  width: 100%;
+  height: 82rpx;
+  border-bottom: 1rpx solid #e4e4e4;
+}
+.top-date {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333333;
+  margin-left: 20rpx;
+}
+.status {
+  font-size: 26rpx;
+  font-weight: 400;
+  margin-right: 20rpx;
+  color: var(--maincolor);
+}
+.s-cancel {
+  color: #999;
+}
+s-done {
+  color: #333;
+}
+.info-item {
+  margin-top: 20rpx;
+  margin-left: 20rpx;
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #333333;
+}
+.bototm {
+  width: 100%;
+  height: 60rpx;
+  margin-top: 20rpx;
+  display: flex;
+  justify-content: flex-end;
+}
+.cancel-button { 
+  width: 144rpx;
+  height: 60rpx;
+  margin-right: 20rpx;
+  background: #FFFFFF;
+  border-radius: 10rpx;
+  border: 1rpx solid #333333;
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #333333;
+}