✨ 首页/订单详情

app.json

@@ -1,15 +1,38 @@
 {
   "pages": [
+    "pages/home/home",
     "pages/index/index",
-    "pages/logs/logs"
+    "pages/logs/logs",
+    "pages/member/member",
+    "pages/orderDetail/orderDetail"
   ],
+  "tabBar": {
+    "color": "#666666",
+    "selectedColor": "#333333",
+    "borderStyle": "white",
+    "backgroundColor": "#fff",
+    "list": [
+      {
+        "pagePath": "pages/home/home",
+        "iconPath": "images/nav/home-off.png",
+        "selectedIconPath": "images/nav/home-on.png",
+        "text": "首页"
+      },
+      {
+        "pagePath": "pages/member/member",
+        "iconPath": "images/nav/my-off.png",
+        "selectedIconPath": "images/nav/my-on.png",
+        "text": "个人中心"
+      }
+    ]
+  },
   "window": {
     "backgroundTextStyle": "light",
-    "navigationBarBackgroundColor": "#fff",
+    "navigationBarBackgroundColor": "#FFCAE0",
     "navigationBarTitleText": "Weixin",
     "navigationBarTextStyle": "black"
   },
   "style": "v2",
   "sitemapLocation": "sitemap.json",
   "lazyCodeLoading": "requiredComponents"
-}
+}

app.wxss

@@ -1,4 +1,10 @@
 /**app.wxss**/
+page {
+  background: #F9F9F9;
+  /* background: linear-gradient(180deg, #FFCAE0 0%, rgba(255, 202, 224, 0) 100%); */
+  /* background-repeat: no-repeat; */
+}
+
 .container {
   height: 100%;
   display: flex;
@@ -7,4 +13,118 @@
   justify-content: space-between;
   padding: 200rpx 0;
   box-sizing: border-box;
-} 
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-start {
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.flex-align-center {
+  display: flex;
+  align-items: center;
+}
+
+.flex-justify-center {
+  display: flex;
+  justify-content: center;
+}
+
+.flex-justify-space-around {
+  display: flex;
+  justify-content: space-around;
+}
+
+.flex-justify-space-between {
+  display: flex;
+  justify-content: space-between;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+  /* align-items: flex-start;
+  justify-content: flex-start; */
+}
+
+.flex1 {
+  flex: 1;
+}
+
+.radius {
+  border-radius: 8rpx;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.popup-radius .wux-popup__content {
+  border-top-left-radius: 40rpx;
+  border-top-right-radius: 40rpx;
+}
+
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ellipsis2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.ellipsis3 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+text {
+  font-size: 32rpx;
+  color: #333333;
+  /* color: #FFFFFF; */
+  font-family: PingFangSC-Regular;
+}
+
+.btm-text {
+  font-size: 28rpx;
+  color: #999999;
+  text-align: center;
+  margin: 42rpx 0;
+}
+
+.no-data {
+  text-align: center;
+  margin-top: 400rpx;
+  color: #666;
+}
+
+
+.no-more-data {
+  text-align: center;
+  margin-top: 28rpx;
+  color: #666;
+}
+
+rich-text .richImg{
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+  height: auto!important;
+  width: auto!important;
+}

pages/home/home.js

@@ -0,0 +1,81 @@
+// pages/home/home.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    current: 0
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+  /**
+   * 切换状态
+  */
+  onTabsChange(e) {
+    let current = e.currentTarget.dataset.id
+    if(current == this.data.current) {
+      return;
+    }
+    this.setData({
+      current,
+      // page: 1,
+    },() => {
+      // this.getPlanList()
+    })
+  },
+})

pages/home/home.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "首页",
+  "usingComponents": {}
+}

pages/home/home.wxml

@@ -0,0 +1,54 @@
+<view class="content">
+  <view class="top-text flex-column">
+    <text class="text-1" >今日预约订单数：18</text>
+    <text style="font-size: 28rpx;color: #999999;margin-top: 12rpx;">今日服务订单数：11</text>
+    <view class="flex-align-center" style="margin-top: 12rpx;">
+      <image src=""></image>
+      <text style="font-size: 24rpx;">南山华润置地XX楼808号（南山店）</text>
+    </view>
+  </view>
+  <view class="tabs-bgc">
+    <view class="tabs-wrap flex-align-center">
+      <view class="item flex-center {{current == 0 ? 'active' : ''}}" bindtap="onTabsChange" data-id="0">进行中</view>
+      <view class="item flex-center {{current == 1 ? 'active' : ''}}" bindtap="onTabsChange" data-id="1">待添加</view>
+      <view class="item flex-center {{current == 2 ? 'active' : ''}}" bindtap="onTabsChange" data-id="2">已结束</view>
+    </view>
+  </view>
+  <view class="change-time border-radius flex-center">
+    <view class="time flex-align-center" style="margin-right: 50rpx;">
+      <text>2019-08-07</text>
+      <view class="triangle"></view>
+    </view>
+    <view class="time flex-align-center" style="margin-right: 64rpx;">
+      <text>2019-08-07</text>
+      <view class="triangle"></view>
+    </view>
+    <view class="search flex-center">搜索</view>
+  </view>
+  <view class="tabs-content">
+    <navigator url="/pages/orderDetail/orderDetail" hover-class="none" wx:for="{{ 2 }}" wx:key="index">
+      <view class="item border-radius">
+        <view class="item-top flex-align-center">
+          <text class="flex1">水氧清洁水光提升综合管理</text>
+          <text style="font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #FF77B0;">已完成</text>
+        </view>
+        <view class="item-text flex-column">
+          <text>预约客户：查理兹·塞隆</text>
+          <text>会员信息：非会员</text>
+          <text>预约时间：2019-8-7  8：00~10：00</text>
+          <text>设备：面部综合仪（5号房间）</text>
+        </view>
+        <view class="flex-align-center price">
+          <text>预约费用：</text>
+          <text style="color: #FF77B0;">￥888.88</text>
+        </view>
+        <view class="item-btn flex-align-center flex-justify-space-between">
+          <view class="btn flex-center">订单详情</view>
+          <view class="btn flex-center">客户信息</view>
+          <view class="btn flex-center">记录反馈</view>
+        </view>
+      </view>
+    </navigator>
+    
+  </view>
+</view>

pages/home/home.wxss

@@ -0,0 +1,143 @@
+.content {
+  padding: 0 28rpx;
+}
+
+.border-radius {
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  margin: 20rpx 0;
+}
+
+.top-text {
+  padding: 18rpx 0 48rpx;
+  padding-left: 8rpx;
+}
+
+.top-text .text-1 {
+  font-size: 36rpx;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #FF77B0;
+}
+
+.top-text image {
+  width: 28rpx;
+  height: 28rpx;
+  background-color: #ccc;
+  margin-right: 8rpx;
+}
+
+.tabs-wrap {
+  height: 72rpx;
+  padding: 0 54rpx;
+  /* background: #fff; */
+  justify-content: space-between;
+}
+
+.tabs-wrap .item {
+  /* width: 33.33%; */
+  height: 100%;
+  font-size: 28rpx;
+  color: #999999;
+  position: relative;
+}
+
+.tabs-wrap .item.active {
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-size: 28rpx;
+  color: #333;
+  /* color: #85DBD8; */
+  border-bottom: 4rpx solid #FF77B0;
+}
+
+.change-time {
+  height: 116rpx;
+}
+
+.change-time .time {
+  height: 60rpx;
+  width: 202rpx;
+  border-radius: 8rpx;
+  box-sizing: border-box;
+  padding: 0 14rpx;
+  background-color: #F5F5F5;
+}
+
+.change-time .time text {
+  font-size: 24rpx;
+}
+
+.change-time .triangle {
+  font-size: 0;
+  line-height: 0;
+  border-style: solid;
+  border-width: 16rpx 10rpx 0rpx 10rpx;
+  border-color: #666666 transparent;
+  width: 20rpx;
+  height: 16rpx;
+  box-sizing: border-box;
+  border-radius: 4rpx;
+  margin-left: 14rpx;
+  /* border-top-left-radius: 6rpx; */
+  /* border-top-right-radius: 6rpx; */
+}
+
+.change-time .search {
+  width: 116rpx;
+  height: 60rpx;
+  box-sizing: border-box;
+  font-size: 28rpx;
+  border: 2rpx solid #333;
+  border-radius: 36rpx;
+  box-sizing: border-box;
+}
+
+.tabs-content .item {
+  padding: 0 28rpx;
+}
+
+.tabs-content .item-top {
+  height: 102rpx;
+}
+
+.tabs-content .item-top text {
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+}
+
+.tabs-content .item-text {
+  padding: 30rpx 26rpx;
+  background: #FFF7FA;
+  border-radius: 16rpx;
+}
+
+.tabs-content .item-text text {
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #666666;
+  line-height: 48rpx;
+}
+
+.tabs-content .price {
+  height: 84rpx;
+  justify-content: flex-end;
+  border-bottom: 2rpx solid #F9F9F9;
+}
+
+.tabs-content .price text {
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+}
+
+.tabs-content .item-btn {
+  height: 132rpx;
+}
+
+.tabs-content .item-btn .btn {
+  width: 192rpx;
+  height: 72rpx;
+  border-radius: 36rpx;
+  border: 2rpx solid #333333;
+  box-sizing: border-box;
+}

pages/member/member.js

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

pages/member/member.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "个人中心",
+  "usingComponents": {}
+}

pages/member/member.wxml

@@ -0,0 +1,2 @@
+<!--pages/member/member.wxml-->
+<text>pages/member/member.wxml</text>

pages/member/member.wxss

@@ -0,0 +1 @@
+/* pages/member/member.wxss */

pages/orderDetail/orderDetail.js

@@ -0,0 +1,78 @@
+// pages/orderDetail/orderDetail.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+  
+  /**
+   * 复制订单号
+   */
+  onCopyOrderNum(e) {
+    wx.setClipboardData({
+      data: e.currentTarget.dataset.num || '',
+      success(res) {
+        console.log(res)
+      }
+    })
+  },
+})

pages/orderDetail/orderDetail.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "订单详情",
+  "usingComponents": {}
+}

pages/orderDetail/orderDetail.wxml

@@ -0,0 +1,90 @@
+<view class="content">
+  <view class="item border-radius">
+    <view class="item-top flex-align-center">
+      <text class="flex1">水氧清洁水光提升综合管理</text>
+      <text style="font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #FF77B0;">已完成</text>
+    </view>
+    <view class="item-text flex-column">
+      <text>预约客户：查理兹·塞隆</text>
+      <text>会员信息：非会员</text>
+      <text>预约时间：2019-8-7  8：00~10：00</text>
+      <text>设备：面部综合仪（5号房间）</text>
+    </view>
+    <view class="flex-align-center price">
+      <text>预约费用：</text>
+      <text style="color: #FF77B0;">￥888.88</text>
+    </view>
+  </view>
+  <view class="item border-radius" style="padding-bottom: 30rpx;">
+    <view class="item-top flex-align-center">
+      <text class="flex1">订单信息</text>
+    </view>
+    <view class="item-text flex-column">
+      <text>订单编号：1578789575124</text>
+      <text>下单时间：2021-8-7 14：12：45</text>
+      <text>支付方式：在线支付</text>
+      <text>支付时间：2021-8-7 14：13：58</text>
+      <view class="copy flex-center" bindtap="onCopyOrderNum" data-num="1578789575124">复制</view>
+    </view>
+  </view>
+  <view class="item border-radius" style="padding-top: 30rpx;">
+    <view class="item-text">
+      <view class="flex-justify-space-between">
+        <text>预约费用：</text>
+        <text style="color: #333333;">￥888.88</text>
+      </view>
+      <view class="flex-justify-space-between">
+        <text>优惠券：</text>
+        <text style="color: #333333;">-￥888.88</text>
+      </view>
+      <view class="flex-justify-space-between">
+        <text>优惠券类型：</text>
+        <text style="color: #333333;">新人体验券</text>
+      </view>
+      <view class="flex-justify-space-between">
+        <text>会员时长抵扣：</text>
+        <text style="color: #333333;">-￥888.88</text>
+      </view>
+      <view class="flex-justify-space-between">
+        <text>会员类型：</text>
+        <text style="color: #333333;">40分钟级月卡会员</text>
+      </view>
+    </view>
+    <view class="flex-align-center price">
+      <text>合计：</text>
+      <text style="color: #FF77B0;">￥888.88</text>
+    </view>
+  </view>
+  <view class="list border-radius">
+    <view class="item-top flex-align-center">
+      <text class="flex1">反馈记录</text>
+      <view class="btn flex-center">新增反馈</view>
+    </view>
+    <view class="item flex-column" wx:for="{{4}}" wx:key="index">
+      
+      <view class="user-info flex-align-center">
+        <image></image>
+        <view class="info flex-column flex1">
+          <text style="font-size: 28rpx;margin-bottom: 6rpx;">查理兹·塞隆…</text>
+          <text style="font-size: 20rpx;color: #999;">下午  3:45</text>
+        </view>
+        <view class="more flex-align-center flex-justify-space-between">
+          <text></text>
+          <text></text>
+          <text></text>
+        </view>
+        <!-- <view class="more">···</view> -->
+      </view>
+      <text style="font-size: 28rpx;color: #666;">当前皮肤毛孔出现堵塞，抓哟集中在T区，主要问题在于自身油脂分泌过多。</text>
+      <view class="box">
+        <image></image>
+        <image></image>
+        <image></image>
+        <image></image>
+        <image></image>
+        <image></image>
+      </view>
+    </view>
+  </view>
+  <view class="no-more-data">已经到底啦~~</view>
+</view>

pages/orderDetail/orderDetail.wxss

@@ -0,0 +1,136 @@
+.content {
+  padding: 10rpx 28rpx;
+}
+
+.border-radius {
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  margin: 20rpx 0;
+}
+
+.item {
+  padding: 0 28rpx;
+  border-bottom: 2rpx solid #F2F2F2;
+  position: relative;
+}
+
+.item-top {
+  height: 102rpx;
+}
+
+.item-top text {
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+}
+
+.item-text {
+  padding: 30rpx 26rpx;
+  background: #FFF7FA;
+  border-radius: 16rpx;
+  position: relative;
+}
+
+.item-text text {
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #666666;
+  line-height: 48rpx;
+}
+
+.item-text .copy {
+  position: absolute;
+  right: 28rpx;
+  top: 30rpx;
+  width: 84rpx;
+  height: 52rpx;
+  font-size: 28rpx;
+  border-radius: 12rpx;
+  border: 2rpx solid #333333;
+}
+
+.price {
+  height: 84rpx;
+  justify-content: flex-end;
+  border-bottom: 2rpx solid #F9F9F9;
+}
+
+.price text {
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+}
+
+.item-btn {
+  height: 132rpx;
+}
+
+.item-btn .btn {
+  width: 192rpx;
+  height: 72rpx;
+  border-radius: 36rpx;
+  border: rpx solid #333333;
+  box-sizing: border-box;
+}
+
+.list .item {
+  padding-top: 30rpx;
+}
+
+.list .item-top {
+  padding: 0 28rpx;
+}
+
+.list .item-top .btn {
+  width: 154rpx;
+  height: 52rpx;
+  border-radius: 26rpx;
+  border: 2rpx solid #333333;
+  box-sizing: border-box;
+  font-size: 28rpx;
+}
+
+.list .user-info {
+  margin-bottom: 20rpx;
+}
+
+.list .user-info image {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+  background-color: red;
+  margin-right: 14rpx;
+}
+
+.list .more {
+  width: 48rpx;
+  height: 48rpx;
+  padding: 0 4rpx;
+  box-sizing: border-box;
+}
+
+.list .more text {
+  width: 8rpx;
+  height: 8rpx;
+  background: #333;
+  border-radius: 50%;
+}
+
+.list .box {
+  display: grid;
+  grid-gap: 20rpx 22rpx;
+  grid-template-columns: repeat(3, 1fr);
+  padding: 30rpx 0;
+}
+
+.list .box image {
+  width: 198rpx;
+  height: 198rpx;
+  border-radius: 16rpx;
+  background-color: red;
+}
+
+/* .list .user-info .more {
+  font-size: 36rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+}  */

project.config.json

@@ -4,30 +4,36 @@
     "ignore": []
   },
   "setting": {
-    "bundle": false,
-    "userConfirmedBundleSwitch": false,
-    "urlCheck": true,
-    "scopeDataCheck": false,
-    "coverView": true,
+    "urlCheck": false,
     "es6": true,
+    "enhance": true,
     "postcss": true,
-    "compileHotReLoad": false,
-    "lazyloadPlaceholderEnable": false,
     "preloadBackgroundData": false,
     "minified": true,
-    "autoAudits": false,
     "newFeature": false,
+    "coverView": true,
+    "nodeModules": false,
+    "autoAudits": false,
+    "showShadowRootInWxmlPanel": true,
+    "scopeDataCheck": false,
     "uglifyFileName": false,
+    "checkInvalidKey": true,
+    "checkSiteMap": true,
     "uploadWithSourceMap": true,
-    "useIsolateContext": true,
-    "nodeModules": false,
-    "enhance": true,
+    "compileHotReLoad": false,
+    "lazyloadPlaceholderEnable": false,
     "useMultiFrameRuntime": true,
     "useApiHook": true,
     "useApiHostProcess": true,
-    "showShadowRootInWxmlPanel": true,
-    "packNpmManually": false,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
     "enableEngineNative": false,
+    "useIsolateContext": true,
+    "userConfirmedBundleSwitch": false,
+    "packNpmManually": false,
     "packNpmRelationList": [],
     "minifyWXSS": true,
     "showES6CompileOption": false
@@ -35,7 +41,7 @@
   "compileType": "miniprogram",
   "libVersion": "2.21.0",
   "appid": "wx14a2493635b91838",
-  "projectname": "miniprogram-2",
+  "projectname": "beauty_apparatus_admin",
   "debugOptions": {
     "hidedInDevtools": []
   },

project.private.config.json

@@ -0,0 +1,23 @@
+{
+  "condition": {
+    "plugin": {
+      "list": []
+    },
+    "game": {
+      "list": []
+    },
+    "gamePlugin": {
+      "list": []
+    },
+    "miniprogram": {
+      "list": [
+        {
+          "name": "订单详情",
+          "pathName": "pages/orderDetail/orderDetail",
+          "query": "",
+          "scene": null
+        }
+      ]
+    }
+  }
+}