feat: add appointment & relative page

app.json

@@ -5,10 +5,12 @@
     "pages/index/index",
     "pages/report/report",
     "pages/my/my",
-    "pages/buy/buy"
+    "pages/buy/buy",
+    "pages/appointment/appointment"
   ],
   "usingComponents": {
-    "van-icon": "@vant/weapp/icon/index"
+    "van-icon": "@vant/weapp/icon/index",
+    "van-overlay": "@vant/weapp/overlay/index"
   },
   "window": {
     "backgroundTextStyle": "light",

pages/appointment/appointment.js

@@ -0,0 +1,67 @@
+// pages/appointment/appointment.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    hasAddress: true,
+    calendarcolor: '#45A6B5'
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/appointment/appointment.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "van-calendar": "@vant/weapp/calendar/index"
+  },
+  "navigationBarTitleText": "预约时间"
+}

pages/appointment/appointment.wxml

@@ -0,0 +1,72 @@
+<!--pages/appointment/appointment.wxml-->
+<view class="appointment">
+  <view class="main-con">
+    <view class="account">
+      <view class="ac-title sub-title">账户信息</view>
+      <view class="ac-card ittflex-jcs">
+        <view class="ac-left ac-item ittflex-jcs">
+          <view class="ac-avat"></view>
+          <view class="ac-name">范一岚</view>
+        </view>
+        <view class="ac-right ac-item ittflex-jcs">
+          <text class="ac-count">100</text>
+          <text class="ac-unit">次</text>
+        </view>
+      </view>
+    </view>
+    <view class="address">
+      <view class="ad-title sub-title">上门检测地址</view>
+      <view wx:if="{{!hasAddress}}" class="no-address chose-address ittflex">选择上门服务地址</view>
+      <view wx:else class="address-card ittflex-jcs">
+        <view class="ad-left">
+          <view class="ad-top ittflex-jcs">
+            <text class="ad-name">范一岚</text>
+            <text class="ad-phone">18626576880</text>
+          </view>
+          <view class="ad-bottom address-detail">
+            内蒙古自治区兴安盟科尔沁右翼前旗友爱胡同459号
+          </view>
+        </view>
+        <view class="ad-right ittflex">
+          <view class="itt-btn chose-address-btn">更换地址</view>
+        </view>
+      </view>
+      <view class="ad-tips">注：预约成功后，检测地址不允许更改</view>
+    </view>
+    <view class="calendar-wy">
+      <view class="sub-title ca-title">预约上门服务时间</view>
+      <view class="calendar-card">
+      <view class="calendar-card-header">
+        <view class="curr-date">2022年9月</view>
+        <view class="cal-tips ittflex">
+          <view class="warn-icon"></view>
+          <text class="warn-text">代表繁忙时间</text>
+        </view>
+      </view>
+        <van-calendar title="日历" class="calendar"
+          poppable="{{ false }}" 
+          show-mark="{{false}}" 
+          show-title="{{false}}"
+          show-confirm="{{false}}"
+          first-day-of-week="{{ 1 }}"
+          show-subtitle="{{false}}"
+          color="{{calendarcolor}}"
+          max-date="1664496000000"
+          row-height="45"
+        />
+      </view>
+      <view class="time-list ittflex">
+        <view class="time-a time-item time-nurse time-active">
+          <text class="t-text">8:00-12:00</text>
+          <text class="time-nurse-text">剩余紧张</text>
+        </view>
+        <view class="time-b time-item">
+          <text class="t-text">13:00-18:00</text>
+        </view>
+        <view class="time-c time-item">
+          <text class="t-text">18:00-21:00</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>

pages/appointment/appointment.wxss

@@ -0,0 +1,214 @@
+/* pages/appointment/appointment.wxss */
+.appointment {
+  width: 100%;
+  height: 100%;
+  background: #F7F7F7;
+  overflow-y: auto;
+}
+.main-con {
+  width: 690rpx;
+  height: 100%;
+  margin: 0 auto;
+}
+.ac-title {
+  width: 100%;
+  height: 82rpx;
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #333333;
+  line-height: 82rpx;
+}
+.ac-card {
+  width: 690rpx;
+  height: 160rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+}
+.ac-item {
+  width: 50%;
+  height: 100%;
+}
+.ac-avat {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background-color: #f66;
+  margin: 0 14rpx 0 20rpx;
+}
+.ac-name {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #333333;
+}
+.ac-right {
+  justify-content: flex-end;
+  align-items: baseline;
+  line-height: 160rpx;
+}
+.ac-count {
+  font-size: 48rpx;
+  font-weight: 600;
+  color: #333333;
+}
+.ac-unit {
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #333333;
+  margin: 0 20rpx 0 10rpx;
+}
+.address {
+  width: 100%;
+  min-height: 100rpx;
+}
+.ad-title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #333333;
+  margin: 40rpx 0 20rpx 0;
+}
+.no-address {
+  width: 248rpx;
+  height: 60rpx;
+  background: var(--maincolor);
+  border-radius: 10rpx;
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #FFFFFF;
+}
+.address-card {
+  width: 100%;
+  height: 194rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+}
+.ad-left {
+  width: calc(70% - 20rpx);
+  height: 100%;
+  padding-left: 20rpx;
+}
+.ad-right {
+  width: 30%;
+  height: 100%;
+}
+.chose-address-btn {
+  width: 144rpx;
+  height: 60rpx;
+  border-radius: 10rpx;
+}
+.ad-top {
+  height: 92rpx;
+  width: 100%;
+}
+.ad-name {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #333333;
+  margin-right:20rpx;
+}
+.ad-phone {
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #999999;
+}
+.address-detail {
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #333333;
+  line-height: 36rpx;
+}
+.ad-tips {
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #9A1D16;
+  margin-top: 20rpx;
+}
+.ca-title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #333333;
+  margin: 40rpx 0 20rpx 0;
+}
+.calendar-card {
+  width: 690rpx;
+  min-height: 500rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  border-bottom: 1rpx solid #DDDDDD;
+}
+.calendar-card-header {
+  width: 100%;
+  height: 84rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.curr-date {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #333333;
+  margin-left: 20rpx;
+}
+.warn-icon {
+  width: 20rpx;
+  height: 20rpx;
+  background: #9A1D16;
+  border-radius: 50%;
+}
+.warn-text{
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #333333;
+  margin: 0 20rpx 0 10rpx;
+}
+.calendar {
+  --calendar-height: 500rpx;
+}
+view .van-calendar__selected-day {
+  width: 68rpx;
+  height: 68rpx;
+  border-radius: 50%;
+}
+view .van-calendar__month-title {
+  display: none;
+}
+view .van-calendar__days {
+  background-color: #fff;
+}
+.time-list {
+  width: 100%;
+  height: 148rpx;
+  justify-content: space-around;
+  background-color: #fff;
+}
+.time-item {
+  width: 190rpx;
+  height: 68rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #FFFFFF;
+  border-radius: 10rpx;
+  border: 1rpx solid #DDDDDD;
+}
+.t-text {
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #333333;
+}
+.time-nurse-text {
+  font-size: 22rpx;
+  font-weight: 400;
+  color: #9A1D16;
+}
+.time-nurse {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.time-active {
+  background-color: var(--maincolor);
+}
+.time-active .t-text{
+  color: #fff;
+}

pages/buy/buy.js

@@ -5,7 +5,8 @@ Page({
    * 页面的初始数据
    */
   data: {
-    payType: 1
+    payType: 1,
+    vanoverlayshow: false
   },
 
   /**
@@ -35,5 +36,27 @@ Page({
     this.setData({
       payType: type
     })
+  },
+  // 调用微信支付
+  handleWXPay () {
+    wx.showLoading({
+      title: '支付中...',
+      mask: true
+    })
+    setTimeout(() => {
+      wx.hideLoading({
+        success: () => {
+          this.setData({ vanoverlayshow: true })
+        }
+      })
+    }, 1000);
+  },
+  onClickHide() {
+    this.setData({ vanoverlayshow: false })
+  },
+  handleAppointment () {
+    wx.navigateTo({
+      url: '/pages/appointment/appointment',
+    })
   }
 })

pages/buy/buy.wxml

@@ -48,6 +48,17 @@
       <van-icon name="success" color="#fff" />
     </view>
   </view>
-  <view class="pay-btn default-btn ittflex">立即支付</view>
+  <view class="pay-btn default-btn ittflex" bindtap="handleWXPay">立即支付</view>
   <view class="s-tips">购买成功后，体验次数立即到账，不可退款</view>
+  <van-overlay show="{{ vanoverlayshow }}" bind:click="onClickHide">
+    <view class="wrapper ittflex">
+      <view class="model">
+        <view class="top-title">支付成功，立即去预约</view>
+        <view class="bottom-action ittflex">
+          <view class="btn cancel-btn ittflex">取消</view>
+          <view class="btn confirm-btn ittflex" bindtap="handleAppointment">去预约</view>
+        </view>
+      </view>
+    </view>
+  </van-overlay>
 </view>

pages/buy/buy.wxss

@@ -175,4 +175,37 @@
   color: #333333;
   text-align: center;
   margin-top: 20rpx;
-}
+}
+.wrapper {
+  height: 100%;
+}
+.model {
+  width: 540rpx;
+  height: 208rpx;
+  background: #FFFFFF;
+  border-radius: 24rpx;
+}
+.top-title {
+  font-size: 34rpx;
+  font-weight: 600;
+  color: #333333;
+  text-align: center;
+  height: 118rpx;
+  line-height: 118rpx;
+  border-bottom: 1rpx solid #DDDDDD;
+  box-sizing:border-box;
+}
+.btn {
+  width: 270rpx;
+  height: 90rpx;
+  box-sizing: border-box;
+  font-size: 34rpx;
+  color: #333333;
+}
+.cancel-btn {
+  font-weight: 400;
+}
+.confirm-btn {
+  border-left: 1rpx solid #DDDDDD;
+  font-weight: 600;
+}

pages/index/index.js

@@ -52,13 +52,18 @@ Page({
    * blanceCount: 0-购买 1-预约
    * **/
   handlePackage () {
-    var type = this.data.blanceCount
+    var type = this.data.blanceCount > 0 ? 1 : 0
     switch (type) {
       case 0:
         wx.navigateTo({
           url: '/pages/buy/buy',
         })
       break;
+      case 1:
+        wx.navigateTo({
+          url: '/pages/appointment/appointment',
+        })
+      break;
     }
   }
 })

project.private.config.json

@@ -4,5 +4,22 @@
   "setting": {
     "compileHotReLoad": true
   },
-  "libVersion": "2.26.0"
+  "libVersion": "2.26.0",
+  "condition": {
+    "miniprogram": {
+      "list": [
+        {
+          "name": "预约",
+          "pathName": "pages/appointment/appointment",
+          "query": "",
+          "launchMode": "default",
+          "scene": null,
+          "partialCompile": {
+            "enabled": true,
+            "pages": []
+          }
+        }
+      ]
+    }
+  }
 }