美团订单UI还原

app.json

@@ -22,7 +22,10 @@
     "pages/historyOrder/historyOrder",
     "pages/phoneEdit/phoneEdit",
     "subpackage/user/pages/dossier/dossier",
-    "subpackage/user/pages/name/name"
+    "subpackage/user/pages/name/name",
+    "subpackage/user/pages/service-list/index",
+    "subpackage/user/pages/code-results/index",
+    "subpackage/goods/pages/order-create/index"
   ],
   "tabBar": {
     "color": "#666666",
@@ -46,8 +49,9 @@
   },
   "window": {
     "backgroundTextStyle": "light",
+    "backgroundColor": "#F9F9F9",
     "navigationBarBackgroundColor": "#FFCAE0",
-    "navigationBarTitleText": "Weixin",
+    "navigationBarTitleText": "玖哩玖哩",
     "navigationBarTextStyle": "black"
   },
   "style": "v2",

app.wxss

@@ -1,8 +1,10 @@
-/**app.wxss**/
 page {
   background: #F9F9F9;
-  /* background: linear-gradient(180deg, #FFCAE0 0%, rgba(255, 202, 224, 0) 100%); */
-  /* background-repeat: no-repeat; */
+  line-height: 1.4;
+  font-weight: 400;
+}
+view {
+  box-sizing: border-box;
 }
 
 .container {
@@ -12,7 +14,6 @@ page {
   align-items: center;
   justify-content: space-between;
   padding: 200rpx 0;
-  box-sizing: border-box;
 }
 
 .flex {
@@ -128,3 +129,93 @@ rich-text .richImg{
   height: auto!important;
   width: auto!important;
 }
+
+/*卡片样式*/
+.joli-card {
+  border-radius: 24rpx;
+  background: #fff;
+  padding: 30rpx 28rpx 0;
+  margin-bottom: 20rpx;
+  display: flex;
+  flex-direction: column;
+}
+.joli-card-head {
+  display: flex;
+  align-items: center;
+  font-size: 32rpx;
+  font-weight: 500;
+  margin-bottom: 30rpx;
+}
+.joli-card-head-title {
+  color: #333;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.joli-card-head-status {
+  color: #FF77B0;
+}
+.joli-card-order {
+  display: flex;
+  padding: 30rpx 28rpx;
+  margin-bottom: 30rpx;
+  border-radius: 16rpx;
+  background: #FFF7FA;
+  position: relative;
+  z-index: 1;
+}
+.joli-card-order-img {
+  width: 152rpx;
+  height: 152rpx;
+  border-radius: 16rpx;
+  overflow: hidden;
+  display: block;
+  margin-right: 12rpx;
+  background: #f5f5f5;
+}
+.joli-card-order-right {
+  flex: 1;
+}
+.joli-card-order-row {
+  display: flex;
+  justify-content: space-between;
+}
+.joli-card-order-label,
+.joli-card-order-msg{
+  line-height: 48rpx;
+  font-size: 28rpx;
+  color: #333;
+}
+.joli-card-order-msg {
+  color: #666;
+}
+.joli-card-money {
+  text-align: right;
+  font-size: 32rpx;
+  color: #333;
+  margin-bottom: 30rpx;
+}
+.joli-card-money text {
+  color: #FF77B0;
+}
+
+/*底部固定块*/
+.footer-fixed {
+  width: 100%;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: 50;
+  background: #fff;
+  padding: 20rpx 36rpx;
+}
+.footer-fixed-btn {
+  line-height: 96rpx;
+  border-radius: 48rpx;
+  background: #FF77B0;
+  font-size: 36rpx;
+  text-align: center;
+  color: #fff;
+  margin-bottom: env(safe-area-inset-bottom);
+}

project.private.config.json

@@ -13,84 +13,24 @@
     "miniprogram": {
       "list": [
         {
-          "name": "订单详情",
-          "pathName": "pages/orderDetail/orderDetail",
+          "name": "订单生成结果",
+          "pathName": "subpackage/goods/pages/order-create/index",
           "query": "",
           "scene": null
         },
         {
-          "name": "发布记录反馈",
-          "pathName": "pages/feedback/feedback",
-          "query": "orderId=221",
-          "scene": null
-        },
-        {
-          "name": "客户信息",
-          "pathName": "pages/clientInfo/clientInfo",
-          "query": "",
-          "scene": null
-        },
-        {
-          "name": "编辑客户信息",
-          "pathName": "pages/clientInfoEdit/clientInfoEdit",
-          "query": "",
-          "scene": null
-        },
-        {
-          "name": "编辑标签",
-          "pathName": "pages/tagsEdit/tagsEdit",
-          "query": "",
-          "scene": null
-        },
-        {
-          "name": "添加标签",
-          "pathName": "pages/tagsAdd/tagsAdd",
-          "query": "",
-          "scene": null
-        },
-        {
-          "name": "自定义标签",
-          "pathName": "pages/tagsCustom/tagsCustom",
-          "query": "",
-          "scene": null
-        },
-        {
-          "name": "记录表",
-          "pathName": "pages/recordSheet/recordSheet",
-          "query": "check_id=6",
-          "scene": null
-        },
-        {
-          "name": "pages/member/member",
-          "pathName": "pages/member/member",
-          "query": "",
-          "scene": null
-        },
-        {
-          "name": "pages/role/role",
-          "pathName": "pages/role/role",
-          "query": "",
-          "scene": null
-        },
-        {
-          "name": "门店检查记录表",
-          "pathName": "pages/recordList/recordList",
-          "query": "",
-          "scene": null
-        },
-        {
-          "name": "pages/test/test",
-          "pathName": "pages/test/test",
+          "name": "我的服务记录",
+          "pathName": "subpackage/user/pages/service-list/index",
           "query": "",
           "scene": null
         },
         {
-          "name": "登录",
-          "pathName": "pages/login/login",
+          "name": "扫码结果",
+          "pathName": "subpackage/user/pages/code-results/index",
           "query": "",
           "scene": null
         }
       ]
     }
   }
-}
+}

subpackage/goods/pages/order-create/index.js

@@ -0,0 +1,3 @@
+Page({
+  data: {},
+});

subpackage/goods/pages/order-create/index.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "订单生成结果",
+  "usingComponents": {
+  }
+}

subpackage/goods/pages/order-create/index.wxml

@@ -0,0 +1,41 @@
+<view class="body">
+    <view class="head">
+        <image class="head-img" src="/images/phone_04.png" mode="aspectFit"/>
+        <view class="head-title">预约成功</view>
+        <view class="head-label">请指引客户使用微信扫下面二维码同步订单信</view>
+        <view class="code">
+            <image src="" mode="aspectFit"/>
+            <view class="code-id">使用卷码：3020 5281 0321</view>
+        </view>
+    </view>
+    <view class="joli-card">
+        <view class="joli-card-head">
+            <view class="joli-card-head-title">水氧清洁水光提升</view>
+            <view class="joli-card-head-status">待用户确认</view>
+        </view>
+        <view class="joli-card-order">
+            <image class="joli-card-order-img" src="" />
+            <view class="joli-card-order-right">
+                <view class="joli-card-order-label">预约店铺：西丽店</view>
+                <view class="joli-card-order-label">预约时间：2021/8/7 8:00~9</view>
+                <view class="joli-card-order-label">设备：无针水光</view>
+            </view>
+        </view>
+        <view class="joli-card-money">实付：<text>￥888.88</text></view>
+    </view>
+    <view class="joli-card">
+        <view class="joli-card-order">
+            <view class="joli-card-order-right">
+                <view class="joli-card-order-row">
+                    <view class="joli-card-order-label">预约费用：</view>
+                    <view class="joli-card-order-msg">￥888.88</view>
+                </view>
+                <view class="joli-card-order-row">
+                    <view class="joli-card-order-label">优惠券：</view>
+                    <view class="joli-card-order-msg">-￥888.88</view>
+                </view>
+            </view>
+        </view>
+        <view class="joli-card-money">合计：<text>￥888.88</text></view>
+    </view>
+</view>

subpackage/goods/pages/order-create/index.wxss

@@ -0,0 +1,48 @@
+.body {
+    padding: 96rpx 28rpx 0;
+}
+.body::after {
+    content: "";
+    display: block;
+    height: env(safe-area-inset-bottom);
+}
+
+.head {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.head-img {
+    width: 240rpx;
+    height: 240rpx;
+    display: block;
+    margin-bottom: 48rpx;
+}
+.head-title {
+    font-size: 36rpx;
+    color: #333;
+    margin-bottom: 24rpx;
+}
+.head-label {
+    font-size: 28rpx;
+    color: #333;
+    margin-bottom: 20rpx;
+}
+
+.code {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 40rpx;
+}
+.code image {
+    width: 360rpx;
+    height: 360rpx;
+    display: block;
+    margin-bottom: 16rpx;
+    background: #fff;
+}
+.code-id {
+    font-size: 28rpx;
+    color: #333;
+}

subpackage/user/pages/code-results/index.js

@@ -0,0 +1,8 @@
+Page({
+  data: {},
+  copyCode() {
+    wx.setClipboardData({
+      data: "data",
+    })
+  }
+});

subpackage/user/pages/code-results/index.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "扫码结果",
+  "usingComponents": {
+  }
+}

subpackage/user/pages/code-results/index.wxml

@@ -0,0 +1,52 @@
+<view class="body">
+    <view class="head">
+        <view class="head-title">当前时间可预约使用！</view>
+        <view class="head-msg">卷码时效：正常</view>
+        <view class="head-msg">项目设备：可预约</view>
+    </view>
+    <view class="joli-card">
+        <view class="joli-card-head">
+            <view class="joli-card-head-title">水氧清洁项目代金劵</view>
+        </view>
+        <view class="joli-card-order">
+            <image class="joli-card-order-img" src="" />
+            <view class="joli-card-order-right">
+                <view class="joli-card-order-label">预约店铺：西丽店</view>
+                <view class="joli-card-order-label">预约时间：2021/8/7 8:00~9</view>
+                <view class="joli-card-order-label">抵扣金额：¥98.00</view>
+            </view>
+        </view>
+    </view>
+    <view class="joli-card">
+        <view class="joli-card-head">
+            <view class="joli-card-head-title">券码信息</view>
+        </view>
+        <view class="joli-card-order">
+            <view class="joli-card-order-right">
+                <view class="joli-card-order-msg">到期时间：2022-2-30到期</view>
+                <view class="joli-card-order-msg">券码编号：1837 3646 3874</view>
+            </view>
+        </view>
+    </view>
+    <view class="joli-card order-card">
+        <view class="joli-card-head">
+            <view class="joli-card-head-title">订单信息</view>
+        </view>
+        <view class="joli-card-order">
+            <view class="copy-code" bind:tap="copyCode">复制</view>
+            <view class="joli-card-order-right">
+                <view class="joli-card-order-msg">订单编号：1578789575124</view>
+                <view class="joli-card-order-msg">手机号码：131****8890</view>
+                <view class="joli-card-order-msg">付款时间：2021-8-7 14：12：45</view>
+                <view class="joli-card-order-msg">下单时间：2021-8-7 14：12：45</view>
+                <view class="joli-card-order-msg">数      量：1</view>
+                <view class="joli-card-order-msg">总      价：¥95.00</view>
+                <view class="joli-card-order-msg">实际金额：¥95.00</view>
+                <view class="joli-card-order-msg">支付时间：2021-8-7 14：13：58</view>
+            </view>
+        </view>
+    </view>
+    <view class="footer-fixed">
+        <view class="footer-fixed-btn">立即激活使用</view>
+    </view>
+</view>

subpackage/user/pages/code-results/index.wxss

@@ -0,0 +1,36 @@
+.body {
+    padding: 20rpx 28rpx 136rpx;
+}
+.body::after {
+    content: "";
+    display: block;
+    height: env(safe-area-inset-bottom);
+}
+
+.head {
+    padding: 0 8rpx;
+    margin-bottom: 20rpx;
+}
+.head-title {
+    font-size: 36rpx;
+    color: #333;
+    margin-bottom: 12rpx;
+}
+.head-msg {
+    font-size: 28rpx;
+    color: #333;
+    margin-bottom: 12rpx;
+}
+
+.order-card .copy-code {
+    padding: 0 14rpx;
+    border: 2rpx solid #333;
+    border-radius: 12rpx;
+    line-height: 52rpx;
+    font-size: 28rpx;
+    color: #333;
+    position: absolute;
+    top: 30rpx;
+    right: 28rpx;
+    z-index: 5;
+}

subpackage/user/pages/service-list/index.js

@@ -0,0 +1,25 @@
+Page({
+  data: {
+    tab: [
+      {
+        text: "全部"
+      },
+      {
+        text: "待进行"
+      },
+      {
+        text: "待评价"
+      }
+    ],
+    tabCurrent: 0
+  },
+  changeTab (e) {
+    const {index} = e.currentTarget.dataset
+    const {tabCurrent} = this.data
+    if (index !== tabCurrent) {
+      this.setData({
+        tabCurrent: index
+      })
+    }
+  }
+});

subpackage/user/pages/service-list/index.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "我的服务记录",
+  "usingComponents": {
+  }
+}

subpackage/user/pages/service-list/index.wxml

@@ -0,0 +1,28 @@
+<view class="body">
+    <view class="tab">
+        <view class="tab-item {{tabCurrent === index ? 'active': ''}}"
+            wx:for="{{tab}}"
+            wx:key="name"
+            data-index="{{index}}"
+            bind:tap="changeTab">
+            <text>{{item.text}}</text>
+        </view>
+    </view>
+    <view class="list">
+        <view class="joli-card">
+            <view class="joli-card-head">
+                <view class="joli-card-head-title">水氧清洁水光提升</view>
+                <view class="joli-card-head-status">待用户确认</view>
+            </view>
+            <view class="joli-card-order">
+                <image class="joli-card-order-img" src="" />
+                <view class="joli-card-order-right">
+                    <view class="joli-card-order-label">预约店铺：西丽店</view>
+                    <view class="joli-card-order-label">预约时间：2021/8/7 8:00~9</view>
+                    <view class="joli-card-order-label">设备：无针水光</view>
+                </view>
+            </view>
+            <view class="joli-card-money">实付：<text>￥888.88</text></view>
+        </view>
+    </view>
+</view>

subpackage/user/pages/service-list/index.wxss

@@ -0,0 +1,42 @@
+.body {
+    padding-top: 90rpx;
+}
+.body::after {
+    content: "";
+    display: block;
+    height: env(safe-area-inset-bottom);
+}
+
+.tab {
+    width: 100%;
+    height: 90rpx;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    display: flex;
+    background: #fff;
+}
+.tab-item {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+}
+.tab-item text {
+    font-size: 32rpx;
+    color: #999999;
+    padding-bottom: 8rpx;
+    border-bottom: 2rpx solid transparent;
+    font-weight: 500;
+}
+.tab-item.active text {
+    color: #333333;
+    border-bottom-color: #FF77B0;
+}
+
+.list {
+    padding: 20rpx 28rpx 0;
+}
+