feat：预约服务页面提交

otherPages/bookService/index.rpx.scss

@@ -0,0 +1,420 @@
+.page {
+    background-color: rgba(247, 247, 247, 1.000000);
+    position: relative;
+    width: 750rpx;
+    height: 1490rpx;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+.box_2 {
+    background-color: rgba(255, 255, 255, 1.000000);
+    display: flex;
+    flex-direction: column;
+    padding: 24rpx 32rpx 0 32rpx;
+}
+
+.box_3 {
+    width: 686rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+}
+
+.text-group_2 {
+    display: flex;
+    flex-direction: column;
+}
+
+.text_3 {
+    overflow-wrap: break-word;
+    color: rgba(51, 51, 51, 1);
+    font-size: 28rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 44rpx;
+    margin-right: 84rpx;
+}
+
+.text_4 {
+    overflow-wrap: break-word;
+    color: rgba(153, 153, 153, 1);
+    font-size: 28rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 44rpx;
+    margin-top: 16rpx;
+}
+
+.thumbnail_2 {
+    width: 32rpx;
+    height: 32rpx;
+    margin: 66rpx 0 6rpx 0;
+}
+
+.box_4 {
+    background-color: rgba(238, 238, 238, 1.000000);
+    width: 686rpx;
+    height: 2rpx;
+    margin-top: 24rpx;
+    display: flex;
+    flex-direction: column;
+}
+
+.box_5 {
+    width: 686rpx;
+    margin-top: 24rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+}
+
+.text-group_3 {
+    display: flex;
+    flex-direction: column;
+}
+
+.text_5 {
+    overflow-wrap: break-word;
+    color: rgba(51, 51, 51, 1);
+    font-size: 28rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 44rpx;
+    margin-right: 84rpx;
+}
+
+.text_6 {
+    overflow-wrap: break-word;
+    color: rgba(153, 153, 153, 1);
+    font-size: 28rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 44rpx;
+    margin-top: 16rpx;
+}
+
+.thumbnail_3 {
+    width: 32rpx;
+    height: 32rpx;
+    margin: 66rpx 0 6rpx 0;
+}
+
+.box_6 {
+    background-color: rgba(238, 238, 238, 1.000000);
+    width: 686rpx;
+    height: 2rpx;
+    margin-top: 24rpx;
+    display: flex;
+    flex-direction: column;
+}
+
+.box_7 {
+    background-color: rgba(255, 255, 255, 1.000000);
+    margin-top: 24rpx;
+    display: flex;
+    flex-direction: column;
+    padding: 24rpx 32rpx 24rpx 32rpx;
+}
+
+.box_8 {
+    width: 544rpx;
+    margin-right: 142rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+}
+
+.thumbnail_4 {
+    width: 24rpx;
+    height: 24rpx;
+    margin: 8rpx 0 8rpx 0;
+}
+
+.text_7 {
+    overflow-wrap: break-word;
+    color: rgba(255, 175, 54, 1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 40rpx;
+}
+
+.text_8 {
+    overflow-wrap: break-word;
+    color: rgba(51, 51, 51, 1);
+    font-size: 28rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 44rpx;
+    margin: 24rpx 574rpx 0 0;
+}
+
+.box_9 {
+    width: 686rpx;
+    margin-top: 16rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+}
+
+.text_9 {
+    overflow-wrap: break-word;
+    color: rgba(153, 153, 153, 1);
+    font-size: 28rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 44rpx;
+}
+
+.thumbnail_5 {
+    width: 32rpx;
+    height: 32rpx;
+    margin: 6rpx 0 6rpx 0;
+}
+
+.box_10 {
+    background-color: rgba(238, 238, 238, 1.000000);
+    width: 686rpx;
+    height: 2rpx;
+    margin-top: 24rpx;
+    display: flex;
+    flex-direction: column;
+}
+
+.box_11 {
+    width: 686rpx;
+    margin-top: 24rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+}
+
+.text-group_4 {
+    display: flex;
+    flex-direction: column;
+}
+
+.text_10 {
+    overflow-wrap: break-word;
+    color: rgba(51, 51, 51, 1);
+    font-size: 28rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 44rpx;
+    margin-right: 84rpx;
+}
+
+.text_11 {
+    overflow-wrap: break-word;
+    color: rgba(153, 153, 153, 1);
+    font-size: 28rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 44rpx;
+    margin-top: 16rpx;
+}
+
+.thumbnail_6 {
+    width: 32rpx;
+    height: 32rpx;
+    margin: 66rpx 0 6rpx 0;
+}
+
+.box_12 {
+    background-color: rgba(238, 238, 238, 1.000000);
+    width: 686rpx;
+    height: 2rpx;
+    margin-top: 24rpx;
+    display: flex;
+    flex-direction: column;
+}
+
+.box_13 {
+    width: 686rpx;
+    margin-top: 24rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+}
+
+.text-group_5 {
+    display: flex;
+    flex-direction: column;
+}
+
+.text_12 {
+    overflow-wrap: break-word;
+    color: rgba(51, 51, 51, 1);
+    font-size: 28rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 44rpx;
+    margin-right: 84rpx;
+}
+
+.text_13 {
+    overflow-wrap: break-word;
+    color: rgba(153, 153, 153, 1);
+    font-size: 28rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 44rpx;
+    margin-top: 16rpx;
+}
+
+.thumbnail_7 {
+    width: 32rpx;
+    height: 32rpx;
+    margin: 66rpx 0 6rpx 0;
+}
+
+.box_14 {
+    background-color: rgba(238, 238, 238, 1.000000);
+    width: 686rpx;
+    height: 2rpx;
+    align-self: center;
+    display: flex;
+    flex-direction: column;
+}
+
+.box_15 {
+    background-color: rgba(255, 255, 255, 1.000000);
+    margin-top: 24rpx;
+    display: flex;
+    flex-direction: column;
+    padding: 24rpx 32rpx 32rpx 32rpx;
+}
+
+.text_14 {
+    overflow-wrap: break-word;
+    color: rgba(51, 51, 51, 1);
+    font-size: 28rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 44rpx;
+    margin-right: 574rpx;
+}
+
+.text-wrapper_2 {
+    background-color: rgba(250, 250, 250, 1.000000);
+    border-radius: 16rpx;
+    margin-top: 16rpx;
+    display: flex;
+    flex-direction: column;
+    padding: 24rpx 186rpx 212rpx 24rpx;
+}
+
+.text_15 {
+    overflow-wrap: break-word;
+    color: rgba(153, 153, 153, 1);
+    font-size: 28rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 44rpx;
+}
+
+.box_16 {
+    box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.030000);
+    background-color: rgba(255, 255, 255, 1.000000);
+    margin-top: 24rpx;
+    display: flex;
+    flex-direction: column;
+    padding: 24rpx 32rpx 24rpx 32rpx;
+    position: fixed;
+    bottom: 24rpx;
+
+}
+
+.text_16 {
+    overflow-wrap: break-word;
+    color: rgba(51, 51, 51, 1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 40rpx;
+    margin: 0 294rpx 0 32rpx;
+}
+
+.box_17 {
+    background-color: rgba(255, 246, 206, 1.000000);
+    border-radius: 60rpx;
+    width: 686rpx;
+    margin-top: 16rpx;
+    padding-left: 32rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.text_17 {
+    overflow-wrap: break-word;
+    color: rgba(51, 51, 51, 1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: center;
+    white-space: nowrap;
+    line-height: 40rpx;
+    margin-top: 36rpx;
+}
+
+.text_18 {
+    overflow-wrap: break-word;
+    color: rgba(17, 17, 17, 1);
+    font-size: 36rpx;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 52rpx;
+    margin: 28rpx 0 0 8rpx;
+}
+
+.text-wrapper_3 {
+    background-color: rgba(255, 224, 92, 1.000000);
+    border-radius: NaNrpx;
+    margin-left: 242rpx;
+    display: flex;
+    flex-direction: column;
+    padding: 30rpx 78rpx 30rpx 78rpx;
+}
+
+.text_19 {
+    overflow-wrap: break-word;
+    color: rgba(17, 17, 17, 1);
+    font-size: 32rpx;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    text-align: center;
+    white-space: nowrap;
+    line-height: 48rpx;
+}

otherPages/bookService/index.vue

@@ -0,0 +1,89 @@
+<template>
+    <view class="content">
+        <view class="page">
+            <view class="box_2">
+                <view class="box_3">
+                    <view class="text-group_2">
+                        <text lines="1" class="text_3">服务对象</text>
+                        <text lines="1" class="text_4">请选择服务对象</text>
+                    </view>
+                    <u-icon name="arrow-right" size="16"></u-icon>
+                </view>
+                <view class="box_4"></view>
+                <view class="box_5">
+                    <view class="text-group_3">
+                        <text lines="1" class="text_5">服务类别</text>
+                        <text lines="1" class="text_6">请选择服务类别</text>
+                    </view>
+                    <u-icon name="arrow-right" size="16"></u-icon>
+                </view>
+                <view class="box_6"></view>
+            </view>
+            <view class="box_7">
+                <view class="box_8">
+                    <u-icon name="warning-fill" color="#FFAF36" size="16"></u-icon>
+                    <text lines="1" class="text_7">需提前一天起预约，取消订单需服务前一天取消</text>
+                </view>
+                <text lines="1" class="text_8">服务日期</text>
+                <view class="box_9">
+                    <text lines="1" class="text_9">请选择服务日期</text>
+                    <u-icon name="arrow-right" size="16"></u-icon>
+                </view>
+                <view class="box_10"></view>
+                <view class="box_11">
+                    <view class="text-group_4">
+                        <text lines="1" class="text_10">服务时段</text>
+                        <text lines="1" class="text_11">请选择服务时段</text>
+                    </view>
+                    <u-icon name="arrow-right" size="16"></u-icon>
+                </view>
+                <view class="box_12"></view>
+                <view class="box_13">
+                    <view class="text-group_5">
+                        <text lines="1" class="text_12">服务人员</text>
+                        <text lines="1" class="text_13">请选择服务人员</text>
+                    </view>
+                    <u-icon name="arrow-right" size="16"></u-icon>
+                </view>
+            </view>
+            <view class="box_14"></view>
+            <view class="box_15">
+                <text lines="1" class="text_14">服务定制</text>
+                <view class="text-wrapper_2">
+                    <textarea class="input" name="remark" placeholder="如有其它特殊需求，请在此输入您的惠" auto-focus="true" />
+                </view>
+            </view>
+            <view class="box_16">
+                <text lines="1" class="text_16">提交订单之前需支付预约服务费用</text>
+                <view class="box_17">
+                    <text lines="1" class="text_17">待支付</text>
+                    <text lines="1" class="text_18">¥12.00</text>
+                    <view class="text-wrapper_3">
+                        <text lines="1" class="text_19">提交</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+
+export default {
+
+    data() {
+        return {
+
+        }
+    },
+    onLoad() {
+
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style scoped lang="scss">@import '/common/css/common.css';
+@import './index.rpx.scss';</style>

otherPages/order/index.rpx.scss

@@ -1,392 +1,404 @@
 .tabBarLineHeight {
-    height: 138rpx;
+  height: 138rpx;
 }
 
 .tabBarView {
-    position: fixed;
-    bottom: 0;
+  position: fixed;
+  bottom: 0;
 }
 
 .showDataLoading {
-    margin-top: 40rpx;
+  margin-top: 40rpx;
 }
 
+
 .h-content-wrap {
-    padding-top: 70rpx;
-    background: linear-gradient(to bottom, #fef1b9, #fff);
-    height: 180rpx;
+  padding-top: 70rpx;
+  background: linear-gradient(to bottom, #fef1b9, #fff);
+  height: 180rpx;
 }
 
 .serial-number {
-    padding: 48rpx;
-    width: 600rpx;
-    text-align: center;
-    font-size: 28rpx;
-    font-family: PingFangSC-Semibold, PingFang SC;
-    line-height: 60rpx;
-    background: white;
-    border-radius: 15rpx;
-
-    .number {
-        line-height: 70rpx;
-        font-size: 35rpx;
-        color: #578D31;
-        font-weight: bold;
-    }
-
-    .text {
-        font-size: 26rpx;
-        color: #FFC000;
-        line-height: 80rpx;
-    }
-
-    .text1 {
-        line-height: 80rpx;
-        font-size: 26rpx;
-        color: red;
-    }
+  padding: 48rpx;
+  width: 600rpx;
+  text-align: center;
+  font-size: 28rpx;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  line-height: 60rpx;
+  background: white;
+  border-radius: 15rpx;
+
+  .number {
+    line-height: 70rpx;
+    font-size: 35rpx;
+    color: #578D31;
+    font-weight: bold;
+  }
+
+  .text {
+    font-size: 26rpx;
+    color: #FFC000;
+    line-height: 80rpx;
+  }
+
+  .text1 {
+    line-height: 80rpx;
+    font-size: 26rpx;
+    color: red;
+  }
 
 }
 
 /* 菜单 */
 .tab-bar {
+  display: flex;
+  height: 80rpx;
+  margin-left: 24rpx;
+  background: #fff;
+  width: 340rpx;
+  border-radius: 40rpx;
+
+  .tab-item {
+    // flex: 1;
+    width: 50%;
     display: flex;
-    height: 80rpx;
-    margin-left: 24rpx;
-    background: #fff;
-    width: 340rpx;
-    border-radius: 40rpx;
-
-    .tab-item {
-        // flex: 1;
-        width: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 28rpx;
-        color: #333;
+    align-items: center;
+    justify-content: center;
+    font-size: 28rpx;
+    color: #333;
 
-        border-radius: 50rpx;
-    }
+    border-radius: 50rpx;
+  }
 
-    .tab-item.active {
-        color: #333333;
-        // background: linear-gradient(to right, #ff6c7b, #ff9db8);
-        background: #FFE05C;
-        border-radius: 50rpx;
-    }
+  .tab-item.active {
+    color: #333333;
+    // background: linear-gradient(to right, #ff6c7b, #ff9db8);
+    background: #FFE05C;
+    border-radius: 50rpx;
+  }
 }
 
 /* 服务订单的菜单 */
 .service-order-tab-bar {
-    display: flex;
-    justify-content: space-around;
-    height: 100rpx;
-    margin-top: 24rpx;
+  display: flex;
+  justify-content: space-around;
+  height: 100rpx;
+  margin-top: 24rpx;
 
-    .service-order-tab-item {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 28rpx;
-        color: #333;
-        line-height: 52rpx;
-    }
+  .service-order-tab-item {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28rpx;
+    color: #333;
+    line-height: 52rpx;
+  }
 
-    .service-order-tab-item.active {
-        color: #ff0000;
-    }
+  .service-order-tab-item.active {
+    color: #ff0000;
+  }
 
-    .underline {
-        border-bottom: 4rpx solid #ff0000;
-    }
+  .underline {
+    border-bottom: 4rpx solid #ff0000;
+  }
 }
 
 /* 服务订单内容*/
 .service-order {
-    /* 门店列表 */
+  margin-top: 24rpx;
+  /* 门店列表 */
+
+
+
+  .store-wrap {
+    background: #fff;
+    // border-radius: 24rpx;
+    margin-top: 14rpx;
+    padding-left: 24rpx;
+    padding-right: 24rpx;
+    padding-bottom: 24rpx;
+
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+    // border: 2rpx dashed rgb(103, 100, 100) ;
 
     .grayscale {
-        filter: grayscale(100%);
+      filter: grayscale(100%);
     }
 
-    .store-wrap {
-        background: #fff;
-        border-radius: 24rpx;
-        // margin-top: 14rpx;
-        padding-left: 24rpx;
+    .order-state {
+      display: flex;
+      font-size: 24rpx;
+      align-items: center;
+
+      .order-num {
+
+        // width: 70%;
+        // display: flex;
+        // align-items: center;
+        // height: 40rpx;
+        .h-order-num {
+          margin-right: 6rpx;
+          font-size: 28rpx;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #666666;
+
+          image {
+            width: 32rpx;
+            height: 32rpx;
+            transform: translateY(8rpx);
+          }
+        }
+
+        .h-order-text {
+          margin-right: 6rpx;
+          font-size: 28rpx;
+          font-size: large;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #666666;
+        }
+      }
+
+      .order-state-name {
+        width: 30%;
+        text-align: right;
         padding-right: 24rpx;
-        padding-bottom: 24rpx;
 
-        .order-state {
-            display: flex;
-            font-size: 24rpx;
-            align-items: center;
-
-            .order-num {
-
-                // width: 70%;
-                // display: flex;
-                // align-items: center;
-                // height: 40rpx;
-                .h-order-num {
-                    margin-right: 6rpx;
-                    font-size: 28rpx;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    color: #666666;
-
-                    image {
-                        width: 32rpx;
-                        height: 32rpx;
-                        transform: translateY(8rpx);
-                    }
-                }
-
-                .h-order-text {
-                    margin-right: 6rpx;
-                    font-size: 28rpx;
-                    font-size: large;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    color: #666666;
-                }
-            }
+        .h-text1 {
+          color: #666666;
+        }
 
-            .order-state-name {
-                width: 30%;
-                text-align: right;
-                padding-right: 24rpx;
+        .h-text2 {
+          color: #93D21A;
+        }
 
-                .h-text1 {
-                    color: #666666;
-                }
+        .h-text3 {
+          color: #FFAF36;
+        }
+      }
+    }
 
-                .h-text2 {
-                    color: #93D21A;
-                }
+    .store-list {
+      margin-top: 24rpx;
+      margin-bottom: 12rpx;
+      display: flex;
+      justify-content: space-between;
 
-                .h-text3 {
-                    color: #FFAF36;
-                }
-            }
+      .store-content {
+        display: flex;
+        justify-content: space-between;
+
+        .store-img {
+          width: 152rpx;
+
+          image {
+            height: 152rpx;
+            border-radius: 6rpx;
+          }
         }
 
-        .store-list {
-            margin-top: 24rpx;
-            margin-bottom: 12rpx;
+        .content {
+          width: 100%;
+          padding-left: 16rpx;
+          padding-top: 4rpx;
+          padding-right: 24rpx;
+
+          .title {
+            height: 44rpx;
+            font-size: 28rpx;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: bold;
+            color: #111111;
+            line-height: 44rpx;
+            margin-left: 8rpx;
+
+          }
+
+          .price {
+            height: 44rpx;
+            font-size: 28rpx;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: bold;
+            color: #ED569F;
+            line-height: 44rpx;
+            margin-left: 8rpx;
+
+          }
+
+          .desc {
             display: flex;
-            justify-content: space-between;
-
-            .store-content {
-                display: flex;
-                justify-content: space-between;
-
-                .store-img {
-                    width: 152rpx;
-
-                    image {
-                        height: 152rpx;
-                        border-radius: 6rpx;
-                    }
-                }
-
-                .content {
-                    width: 100%;
-                    padding-left: 16rpx;
-                    padding-top: 4rpx;
-                    padding-right: 24rpx;
-
-                    .title {
-                        height: 44rpx;
-                        font-size: 28rpx;
-                        font-family: PingFangSC-Medium, PingFang SC;
-                        font-weight: bold;
-                        color: #111111;
-                        line-height: 44rpx;
-                        margin-left: 8rpx;
-
-                    }
-
-                    .price {
-                        height: 44rpx;
-                        font-size: 28rpx;
-                        font-family: PingFangSC-Medium, PingFang SC;
-                        font-weight: bold;
-                        color: #ED569F;
-                        line-height: 44rpx;
-                        margin-left: 8rpx;
-
-                    }
-
-                    .desc {
-                        display: flex;
-                        // padding: 6rpx;
-
-                        .time {
-                            font-size: 24rpx;
-                            font-family: PingFangSC-Regular, PingFang SC;
-                            font-weight: 400;
-                            color: #ED569F;
-                            background: rgba(237, 86, 159, 0.1);
-                            padding: 6rpx 16rpx;
-                            border-radius: 0rpx 0rpx 12rpx 12rpx;
-                        }
-
-                        .service-type {
-                            font-size: 24rpx;
-                            font-family: PingFangSC-Regular, PingFang SC;
-                            color: black;
-                            background: #FFE05C;
-                            padding: 6rpx 16rpx;
-                            margin-left: 16rpx;
-                            border-radius: 0rpx 0rpx 12rpx 12rpx;
-                        }
-
-                        .service-mode {
-                            font-size: 24rpx;
-                            font-family: PingFangSC-Regular, PingFang SC;
-                            color: #93D21A;
-                            background: rgba(147, 210, 26, 0.1);
-                            padding: 6rpx 16rpx;
-                            margin-left: 16rpx;
-                            border-radius: 0rpx 0rpx 12rpx 12rpx;
-                        }
-                    }
-                }
+            // padding: 6rpx;
+
+            .time {
+              font-size: 24rpx;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #ED569F;
+              background: rgba(237, 86, 159, 0.1);
+              padding: 6rpx 16rpx;
+              border-radius: 0rpx 0rpx 12rpx 12rpx;
             }
-        }
 
-        .detail {
-            font-size: 24rpx;
-            padding-top: 12rpx;
-            padding-bottom: 12rpx;
-            background-image: url('/static/order/ud4.png');
-            background-size: cover;
-
-            .d-item-row {
-                display: flex;
-                height: 44rpx;
-                align-items: center;
-
-                .item-icon {
-                    display: flex;
-                    align-items: center;
-                    padding-right: 8rpx;
-
-                    image {
-                        height: 36rpx;
-                        width: 36rpx;
-                    }
-                }
-
-                .item-text {
-                    color: #666666;
-
-                    .item-v {
-                        font-family: PingFangSC-Medium, PingFang SC;
-                        font-weight: 500;
-                        color: #333333;
-                    }
-                }
+            .service-type {
+              font-size: 24rpx;
+              font-family: PingFangSC-Regular, PingFang SC;
+              color: black;
+              background: #fff9de;
+              padding: 6rpx 16rpx;
+              margin-left: 16rpx;
+              border-radius: 0rpx 0rpx 12rpx 12rpx;
             }
-        }
 
-        .detail11 {
-            font-size: 24rpx;
-            padding-top: 12rpx;
-            padding-bottom: 12rpx;
-
-            .d-item-row {
-                display: flex;
-                height: 44rpx;
-                align-items: center;
-
-                .item-icon {
-                    display: flex;
-                    align-items: center;
-                    padding-right: 8rpx;
-
-                    image {
-                        height: 36rpx;
-                        width: 36rpx;
-                    }
-                }
-
-                .item-text {
-                    color: #666666;
-
-                    .item-v {
-                        font-family: PingFangSC-Medium, PingFang SC;
-                        font-weight: 500;
-                        color: #333333;
-                    }
-                }
+            .service-mode {
+              font-size: 24rpx;
+              font-family: PingFangSC-Regular, PingFang SC;
+              color: #9ed733;
+              background: #e9f6d1;
+              padding: 6rpx 16rpx;
+              margin-left: 16rpx;
+              border-radius: 0rpx 0rpx 12rpx 12rpx;
             }
+          }
         }
+      }
+    }
 
-        .flexLR {
-            border: 4rpx dotted #eeeeee;
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-            overflow: hidden;
+    .detail {
+      font-size: 24rpx;
+      padding-top: 12rpx;
+      padding-bottom: 12rpx;
+      background-image: url('/static/order/ud4.png');
+      background-size: cover;
+
+      .d-item-row {
+        display: flex;
+        height: 44rpx;
+        align-items: center;
+
+        .item-icon {
+          display: flex;
+          align-items: center;
+          padding-right: 8rpx;
+
+          image {
+            height: 36rpx;
+            width: 36rpx;
+          }
         }
 
-        .nav-bar {
-            display: flex;
-            text-align: right;
-            justify-content: flex-end;
-
-            .btn {
-                height: 60rpx;
-                line-height: 60rpx;
-                background: #FFE05C;
-                margin-top: 20rpx;
-                text-align: center;
-                color: #fff;
-                margin-right: 16rpx;
-                border-radius: 30rpx;
-                color: #333;
-                padding-right: 24rpx;
-                padding-left: 24rpx;
-                font-size: 26rpx;
-
-                .text1 {
-                    padding-left: 2rpx;
-                    font-size: 24rpx;
-                    color: #666;
-                }
-            }
+        .item-text {
+          color: #666666;
 
-            .look-num-btn {
-                height: 60rpx;
-                line-height: 60rpx;
-                background: #999;
-                margin-top: 20rpx;
-                width: 160rpx;
-                text-align: center;
-                color: #fff;
-                margin-right: 16rpx;
-                border-radius: 8rpx;
-            }
+          .item-v {
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #333333;
+          }
+        }
+      }
+    }
+
+    .detail11 {
+      font-size: 24rpx;
+      padding-top: 12rpx;
+      padding-bottom: 12rpx;
+
+      .d-item-row {
+        display: flex;
+        height: 44rpx;
+        align-items: center;
+
+        .item-icon {
+          display: flex;
+          align-items: center;
+          padding-right: 8rpx;
+
+          image {
+            height: 36rpx;
+            width: 36rpx;
+          }
+        }
+
+        .item-text {
+          color: #666666;
+
+          .item-v {
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #333333;
+          }
         }
+      }
+    }
+
+    .flexLR {
+      border: 4rpx dotted #eeeeee;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      overflow: hidden;
     }
+
+    .nav-bar {
+      display: flex;
+      text-align: right;
+      justify-content: flex-end;
+
+      .btn {
+        height: 60rpx;
+        line-height: 60rpx;
+        background: #FFE05C;
+        margin-top: 20rpx;
+        text-align: center;
+        color: #fff;
+        margin-right: 16rpx;
+        border-radius: 30rpx;
+        color: #333;
+        padding-right: 24rpx;
+        padding-left: 24rpx;
+        font-size: 26rpx;
+        display: flex;
+
+        .text1 {
+          padding-left: 2rpx;
+          font-size: 24rpx;
+          color: #666;
+        }
+      }
+
+      .look-num-btn {
+        height: 60rpx;
+        line-height: 60rpx;
+        background: #999;
+        margin-top: 20rpx;
+        width: 160rpx;
+        text-align: center;
+        color: #fff;
+        margin-right: 16rpx;
+        border-radius: 8rpx;
+      }
+    }
+
+    .fontColor {
+      color: red;
+    }
+  }
 }
 
 /* 产品订单 */
 .product-order {
-    margin-top: 24rpx;
+  margin-top: 24rpx;
 
-    .developing {
-        text-align: center;
-        color: #666;
-    }
+  .developing {
+    text-align: center;
+    color: #666;
+  }
 }
 
 .planNumber {
-    font-size: 35rpx;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-    color: #93BC23;
+  font-size: 35rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #93BC23;
 
 }

otherPages/order/index.vue

@@ -39,154 +39,153 @@
 			</view>
 
 			<view class="service-order" v-show="currentTab === 'tab1'">
-				<!-- 当前订单-->
-				<view class="service-order" v-show="currentTab === 'tab1'">
-					<!-- 门店列表 -->
-					<view class="store-wrap">
-						<view :class="{ 'grayscale': item.forstStatus === '1' }">
-							<view @click="orderDetail(item)" class="">
-								<view class="store-list">
-									<view class="store-content">
-										<view class="content">
-											<view class="desc flex-row justify-start ">
-												<view class="time">
-													<!-- {{ this.dateFormat(item.createTime) }} -->
+				<!-- 门店列表 -->
+				<view class="store-wrap">
+					<view :class="{ 'grayscale': item.forstStatus === '1' }">
+						<view @click="orderDetail(item)" class="">
+							<view class="store-list">
+								<view class="store-content">
+									<view class="content">
+										<view class="desc flex-row justify-start ">
+											<!-- <view class="time">
 													11111111111
-												</view>
-												<view class="service-type">
-													<!-- {{ item.serviceModeDesc }} -->
-													到店
-												</view>
-												<view class="service-mode">
-													<!-- <text>{{ item.serviceAttrDesc }}</text> -->
-													预约
-												</view>
+												</view> -->
+											<view class="service-type">
+												<!-- {{ item.serviceModeDesc }} -->
+												到店
+											</view>
+											<view class="service-mode">
+												<!-- <text>{{ item.serviceAttrDesc }}</text> -->
+												预约
 											</view>
-
 										</view>
-									</view>
-									<view class=" planNumber flex-col justify-center">
-										<text> {{ item.planNumber || '未排号' }}</text>
+
 									</view>
 								</view>
-								<view class="order-state">
-									<view class="order-num">
-										<view class="h-order-num">
-											<image src="../../static/index/u217.png" mode=""></image>订单编号：{{ item.orderNo }}
-										</view>
-										<view class="h-order-text">
-											服务项目
-										</view>
+								<view class=" planNumber flex-col justify-center">
+									<text> {{ item.planNumber || '未排号' }}</text>
+								</view>
+							</view>
+							<view class="order-state">
+								<view class="order-num">
+									<view class="h-order-num">
+										<image src="../../static/index/u217.png" mode=""></image>订单编号：{{ item.orderNo }}
 									</view>
-									<view class="order-state-name">
-										<text class="h-text1">{{ item.forstStatus === '1' ? '已冻结' : item.orderStatusDesc
-										}}</text>
+									<view class="h-order-text">
+										服务项目
 									</view>
+								</view>
+								<view class="order-state-name">
+									<text class="h-text1">{{ item.forstStatus === '1' ? '已冻结' : item.orderStatusDesc
+									}}</text>
+								</view>
 
+							</view>
+							<view class="flex-col detail11 ">
+								<view class="d-item-row ">
+									<view class="item-icon">
+										<image src="../../static/order/ud1.png" mode=""></image>
+									</view>
+									<view class="item-text">
+										服务对象：<text class="item-v">{{ item.serviceObjectName }}</text>
+									</view>
 								</view>
-								<view class="flex-col detail11 ">
-									<view class="d-item-row ">
-										<view class="item-icon">
-											<image src="../../static/order/ud1.png" mode=""></image>
-										</view>
-										<view class="item-text">
-											服务对象：<text class="item-v">{{ item.serviceObjectName }}</text>
-										</view>
+								<view class="d-item-row ">
+									<view class="item-icon">
+										<image src="../../static/order/ud2.png" mode=""></image>
 									</view>
-									<view class="d-item-row ">
-										<view class="item-icon">
-											<image src="../../static/order/ud2.png" mode=""></image>
-										</view>
-										<view class="item-text">
-											服务门店：<text class="item-v">{{ item.storeName }}</text>
-										</view>
+									<view class="item-text">
+										服务门店：<text class="item-v">{{ item.storeName }}</text>
 									</view>
-									<view class="d-item-row ">
-										<view class="item-icon">
-											<image src="../../static/order/ud3.png" mode=""></image>
-										</view>
-										<view class="item-text">
-											排号时段：<text class="item-v">{{ item.createTime }}</text>
-										</view>
+								</view>
+								<view class="d-item-row ">
+									<view class="item-icon">
+
+									</view>
+									<view class="item-text">
+										排号时段：<text class="item-v">{{ item.createTime }}</text>
 									</view>
 								</view>
-								<view class="detail flex-row justify-between">
-									<view class="flexLR">
-										<view>
-											<view class="d-item-row ">
-												<view class="item-icon">
-													<image src="../../static/order/ud3.png" mode=""></image>
-												</view>
-												<view class="item-text">
-													服务日期：<text v-if="item.servicePersonName" class="item-v">{{
-														item.servicePersonName }}</text>
-													<text v-else class="item-v">2023-8-16</text>
-												</view>
+							</view>
+							<view class="detail flex-row justify-between">
+								<view class="flexLR">
+									<view>
+										<view class="d-item-row ">
+											<view class="item-icon">
+												<image src="../../static/order/ud3.png" mode=""></image>
+											</view>
+											<view class="item-text">
+												服务日期：<text v-if="item.servicePersonName" class="item-v">{{
+													item.servicePersonName }}</text>
+												<text v-else class="item-v">2023-8-16</text>
 											</view>
-											<view class="d-item-row ">
-												<view class="item-icon">
-													<image src="../../static/order/ud3.png" mode=""></image>
-												</view>
-												<view class="item-text">
-													服务时段：<text v-if="item.servicePersonName" class="item-v">{{
-														item.servicePersonName }}</text>
-													<text v-else class="item-v">15:30 -- 16:30</text>
-												</view>
+										</view>
+										<view class="d-item-row ">
+											<view class="item-icon">
+												<image src="../../static/order/ud3.png" mode=""></image>
 											</view>
-											<view class="d-item-row ">
-												<view class="item-icon">
-													<image src="../../static/order/ud3.png" mode=""></image>
-												</view>
-												<view class="item-text">
-													服务技师：<text v-if="item.servicePersonName" class="item-v">{{
-														item.servicePersonName }}</text>
-													<text v-else class="item-v">签到成功自动分配</text>
-												</view>
+											<view class="item-text">
+												服务时段：<text v-if="item.servicePersonName" class="item-v">{{
+													item.servicePersonName }}</text>
+												<text v-else class="item-v">15:30 -- 16:30</text>
 											</view>
 										</view>
-										<view class=" planNumber flex-col justify-center">
-											<text> {{ item.planNumber || '未排号' }}</text>
+										<view class="d-item-row ">
+											<view class="item-icon">
+												<image src="../../static/order/ud3.png" mode=""></image>
+											</view>
+											<view class="item-text">
+												服务技师：<text v-if="item.servicePersonName" class="item-v">{{
+													item.servicePersonName }}</text>
+												<text v-else class="item-v">签到成功自动分配</text>
+											</view>
 										</view>
 									</view>
-								</view>
-								<view class="price">
-									<text v-if="item.totalAmount"> 订单总金额：￥{{ item.totalAmount }}</text>
-									<text v-else>订单总金额：￥0</text>
+									<view class=" planNumber flex-col justify-center">
+										<text> {{ item.planNumber || '未排号' }}</text>
+									</view>
 								</view>
 							</view>
-							<view class="nav-bar">
-								<view class="btn" @click="gotoPayOrder(item)" >
-									<text>扫码</text>
-								</view>
-								<view class="btn" @click="gotoPayOrder(item)" v-if="item.orderStatus == 1">
-									<text>去付款</text>
-								</view>
-								<view class="btn" v-else-if="item.orderStatus == 2">
-									<text>已取消</text>
-								</view>
-								<view @click="orderSign(item)" v-else-if="item.orderStatus == 4" class="btn">
-									立即排队
-									<!-- <text class="text1">点击开始排号</text> -->
-								</view>
-								<view @click="getOrderSign(item)" class="btn" v-else-if="item.orderStatus == 5">
-									<text>点击查看排号</text>
-								</view>
-								<view class="btn" v-else-if="item.orderStatus == 6">
-									<text>服务中</text>
-								</view>
-								<view class="btn" v-else-if="item.orderStatus == 7">
-									<text>排号过期</text>
-								</view>
-								<view @click="gotoEvaluate(item)" class="btn" v-else-if="item.orderStatus == 8">
-									<text>待评价</text>
-								</view>
-								<view @click="gotoPayOrder(item)" class="btn" v-else-if="item.orderStatus == 9">
-									<text>去支付预约费用</text>
-								</view>
+							<view class="price">
+								订单总金额：<text class="fontColor" v-if="item.totalAmount"> ￥{{ item.totalAmount }}</text>
+								<text class="fontColor" v-else>￥0</text>
+							</view>
+						</view>
+						<view class="nav-bar">
+							<view class="btn" @click="gotoPayOrder(item)">
+								<u-icon name="scan" size="18" />
+								<text>扫码</text>
+							</view>
+							<view class="btn" @click="gotoPayOrder(item)" v-if="item.orderStatus == 1">
+								<text>去付款</text>
+							</view>
+							<view class="btn" v-else-if="item.orderStatus == 2">
+								<text>已取消</text>
+							</view>
+							<view @click="orderSign(item)" v-else-if="item.orderStatus == 4" class="btn">
+								立即排队
+								<!-- <text class="text1">点击开始排号</text> -->
+							</view>
+							<view @click="getOrderSign(item)" class="btn" v-else-if="item.orderStatus == 5">
+								<text>点击查看排号</text>
+							</view>
+							<view class="btn" v-else-if="item.orderStatus == 6">
+								<text>服务中</text>
+							</view>
+							<view class="btn" v-else-if="item.orderStatus == 7">
+								<text>排号过期</text>
+							</view>
+							<view @click="gotoEvaluate(item)" class="btn" v-else-if="item.orderStatus == 8">
+								<text>待评价</text>
+							</view>
+							<view @click="gotoPayOrder(item)" class="btn" v-else-if="item.orderStatus == 9">
+								<text>去支付预约费用</text>
 							</view>
 						</view>
 					</view>
 				</view>
+				
+
 			</view>
 			<view class="product-order" v-show="currentTab === 'tab2'">
 				<!-- Tab 2 内容 -->

otherPages/orderDetail/index.rpx.scss

@@ -0,0 +1,807 @@
+.page {
+    background-color: rgba(247,247,247,1.000000);
+    position: relative;
+    width: 750rpx;
+    height: 1650rpx;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  .box_1 {
+    background-color: rgba(255,224,92,1.000000);
+    display: flex;
+    flex-direction: column;
+    padding: 30rpx 20rpx 14rpx 32rpx;
+  }
+  .box_2 {
+    width: 686rpx;
+    margin-right: 12rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+  }
+  .text-wrapper_1 {
+    width: 52rpx;
+    height: 40rpx;
+    overflow-wrap: break-word;
+    font-size: 0rpx;
+    letter-spacing: -1rpx;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 40rpx;
+  }
+  .text_1 {
+    overflow-wrap: break-word;
+    color: rgba(255,255,255,1.000000);
+    font-size: 28rpx;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 40rpx;
+  }
+  .text_2 {
+    overflow-wrap: break-word;
+    color: rgba(255,255,255,1.000000);
+    font-size: 28rpx;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 40rpx;
+  }
+  .image_1 {
+    width: 134rpx;
+    height: 22rpx;
+    margin: 4rpx 0 14rpx 0;
+  }
+  .box_3 {
+    width: 698rpx;
+    margin-top: 32rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+  }
+  .image-text_1 {
+    width: 192rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+    margin: 6rpx 0 6rpx 0;
+  }
+  .thumbnail_1 {
+    width: 40rpx;
+    height: 40rpx;
+    margin: 4rpx 0 4rpx 0;
+  }
+  .text-group_1 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 32rpx;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 48rpx;
+  }
+  .image_2 {
+    width: 180rpx;
+    height: 60rpx;
+  }
+  .box_4 {
+    background-color: rgba(255,255,255,1.000000);
+    display: flex;
+    flex-direction: column;
+    padding: 24rpx 110rpx 24rpx 108rpx;
+  }
+  .group_1 {
+    width: 146rpx;
+    align-self: center;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+  }
+  .thumbnail_2 {
+    width: 40rpx;
+    height: 40rpx;
+    margin: 2rpx 0 2rpx 0;
+  }
+  .text_3 {
+    overflow-wrap: break-word;
+    color: rgba(147,210,26,1);
+    font-size: 32rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 44rpx;
+  }
+  .text_4 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 28rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: center;
+    white-space: nowrap;
+    line-height: 44rpx;
+    margin-top: 16rpx;
+  }
+  .box_5 {
+    background-color: rgba(255,255,255,1.000000);
+    margin-top: 24rpx;
+    display: flex;
+    flex-direction: column;
+    padding: 0 32rpx 0 32rpx;
+  }
+  .text-wrapper_2 {
+    background-color: rgba(255,224,92,0.200000);
+    border-radius: NaNrpx;
+    margin-right: 578rpx;
+    display: flex;
+    flex-direction: column;
+    padding: 10rpx 30rpx 10rpx 30rpx;
+  }
+  .text_5 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 36rpx;
+  }
+  .box_6 {
+    flex-direction: row;
+    display: flex;
+    margin: 24rpx 266rpx 0 0;
+  }
+  .thumbnail_3 {
+    width: 28rpx;
+    height: 28rpx;
+    margin: 8rpx 0 8rpx 0;
+  }
+  .text_6 {
+    overflow-wrap: break-word;
+    color: rgba(102,102,102,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 44rpx;
+    margin-left: 8rpx;
+  }
+  .text_7 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 44rpx;
+  }
+  .text_8 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 28rpx;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    text-align: center;
+    white-space: nowrap;
+    line-height: 40rpx;
+    margin: 24rpx 546rpx 0 0;
+  }
+  .box_7 {
+    flex-direction: row;
+    display: flex;
+    margin: 24rpx 62rpx 0 0;
+  }
+  .box_8 {
+    display: flex;
+    flex-direction: column;
+  }
+  .image-text_2 {
+    width: 156rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+  }
+  .thumbnail_4 {
+    width: 28rpx;
+    height: 28rpx;
+    margin: 4rpx 0 4rpx 0;
+  }
+  .text-group_2 {
+    overflow-wrap: break-word;
+    color: rgba(102,102,102,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 36rpx;
+  }
+  .image-text_3 {
+    width: 156rpx;
+    margin-top: 16rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+  }
+  .thumbnail_5 {
+    width: 28rpx;
+    height: 28rpx;
+    margin: 4rpx 0 4rpx 0;
+  }
+  .text-group_3 {
+    overflow-wrap: break-word;
+    color: rgba(102,102,102,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 36rpx;
+  }
+  .image-text_4 {
+    width: 156rpx;
+    margin-top: 16rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+  }
+  .thumbnail_6 {
+    width: 28rpx;
+    height: 28rpx;
+    margin: 4rpx 0 4rpx 0;
+  }
+  .text-group_4 {
+    overflow-wrap: break-word;
+    color: rgba(102,102,102,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 36rpx;
+  }
+  .text-wrapper_3 {
+    display: flex;
+    flex-direction: column;
+  }
+  .text_9 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 36rpx;
+    margin-right: 180rpx;
+  }
+  .text_10 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 36rpx;
+    margin: 16rpx 36rpx 0 0;
+  }
+  .text_11 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 36rpx;
+    margin-top: 16rpx;
+  }
+  .text-group_5 {
+    display: flex;
+    flex-direction: column;
+    margin: 14rpx 0 30rpx 164rpx;
+  }
+  .text_12 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 40rpx;
+    font-family: PingFangSC-Semibold;
+    font-weight: 600;
+    text-align: center;
+    white-space: nowrap;
+    line-height: 68rpx;
+  }
+  .text_13 {
+    overflow-wrap: break-word;
+    color: rgba(153,153,153,1);
+    font-size: 20rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: center;
+    white-space: nowrap;
+    line-height: 28rpx;
+    align-self: center;
+  }
+  .box_9 {
+    background-color: rgba(255,224,92,1.000000);
+    border-radius: 32rpx;
+    display: flex;
+    flex-direction: row;
+    margin: 32rpx 232rpx 0 254rpx;
+    padding: 14rpx 58rpx 14rpx 58rpx;
+  }
+  .image-text_5 {
+    width: 84rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+  }
+  .thumbnail_7 {
+    width: 24rpx;
+    height: 24rpx;
+    margin: 6rpx 0 6rpx 0;
+  }
+  .text-group_6 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: center;
+    white-space: nowrap;
+    line-height: 36rpx;
+  }
+  .box_10 {
+    background-color: rgba(238,238,238,1.000000);
+    width: 686rpx;
+    height: 2rpx;
+    margin-top: 32rpx;
+    display: flex;
+    flex-direction: column;
+  }
+  .text-wrapper_4 {
+    width: 622rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+    margin: 32rpx 0 0 64rpx;
+  }
+  .text_14 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 28rpx;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 44rpx;
+  }
+  .text_15 {
+    overflow-wrap: break-word;
+    color: rgba(147,210,26,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: right;
+    white-space: nowrap;
+    line-height: 44rpx;
+  }
+  .box_11 {
+    flex-direction: row;
+    display: flex;
+    margin: 24rpx 238rpx 0 0;
+  }
+  .group_2 {
+    background-color: rgba(255,255,255,1.000000);
+    border-radius: 8rpx;
+    width: 32rpx;
+    height: 32rpx;
+    border: 1px solid rgba(221,221,221,1);
+    display: flex;
+    flex-direction: column;
+    margin: 28rpx 0 28rpx 0;
+  }
+  .group_3 {
+    margin-left: 32rpx;
+    display: flex;
+    flex-direction: column;
+  }
+  .image-text_6 {
+    width: 156rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+  }
+  .thumbnail_8 {
+    width: 28rpx;
+    height: 28rpx;
+    margin: 4rpx 0 4rpx 0;
+  }
+  .text-group_7 {
+    overflow-wrap: break-word;
+    color: rgba(102,102,102,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 36rpx;
+  }
+  .box_12 {
+    width: 156rpx;
+    margin-top: 16rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+  }
+  .thumbnail_9 {
+    width: 28rpx;
+    height: 28rpx;
+    margin: 4rpx 0 4rpx 0;
+  }
+  .text_16 {
+    overflow-wrap: break-word;
+    color: rgba(102,102,102,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 36rpx;
+  }
+  .text-wrapper_5 {
+    display: flex;
+    flex-direction: column;
+  }
+  .text_17 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 36rpx;
+    margin-right: 180rpx;
+  }
+  .text_18 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 36rpx;
+    margin-top: 16rpx;
+  }
+  .box_13 {
+    flex-direction: row;
+    display: flex;
+    margin: 24rpx 0 0 64rpx;
+  }
+  .text_19 {
+    overflow-wrap: break-word;
+    color: rgba(102,102,102,1);
+    font-size: 20rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 36rpx;
+    margin-top: 4rpx;
+  }
+  .text_20 {
+    overflow-wrap: break-word;
+    color: rgba(237,86,159,1);
+    font-size: 28rpx;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 44rpx;
+  }
+  .image-text_7 {
+    width: 84rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+    margin: 8rpx 0 0 326rpx;
+  }
+  .thumbnail_10 {
+    width: 28rpx;
+    height: 28rpx;
+    margin: 4rpx 0 4rpx 0;
+  }
+  .text-group_8 {
+    overflow-wrap: break-word;
+    color: rgba(102,102,102,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 36rpx;
+  }
+  .box_14 {
+    background-color: rgba(238,238,238,1.000000);
+    width: 686rpx;
+    height: 2rpx;
+    margin-top: 32rpx;
+    display: flex;
+    flex-direction: column;
+  }
+  .text-wrapper_6 {
+    width: 622rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+    margin: 32rpx 0 0 64rpx;
+  }
+  .text_21 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 28rpx;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 44rpx;
+  }
+  .text_22 {
+    overflow-wrap: break-word;
+    color: rgba(147,210,26,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: right;
+    white-space: nowrap;
+    line-height: 44rpx;
+  }
+  .box_15 {
+    flex-direction: row;
+    display: flex;
+    margin: 24rpx 238rpx 0 0;
+  }
+  .block_1 {
+    background-color: rgba(255,255,255,1.000000);
+    border-radius: 8rpx;
+    width: 32rpx;
+    height: 32rpx;
+    border: 1px solid rgba(221,221,221,1);
+    display: flex;
+    flex-direction: column;
+    margin: 28rpx 0 28rpx 0;
+  }
+  .block_2 {
+    margin-left: 32rpx;
+    display: flex;
+    flex-direction: column;
+  }
+  .image-text_8 {
+    width: 156rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+  }
+  .thumbnail_11 {
+    width: 28rpx;
+    height: 28rpx;
+    margin: 4rpx 0 4rpx 0;
+  }
+  .text-group_9 {
+    overflow-wrap: break-word;
+    color: rgba(102,102,102,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 36rpx;
+  }
+  .box_16 {
+    width: 156rpx;
+    margin-top: 16rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+  }
+  .thumbnail_12 {
+    width: 28rpx;
+    height: 28rpx;
+    margin: 4rpx 0 4rpx 0;
+  }
+  .text_23 {
+    overflow-wrap: break-word;
+    color: rgba(102,102,102,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 36rpx;
+  }
+  .text-wrapper_7 {
+    display: flex;
+    flex-direction: column;
+  }
+  .text_24 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 36rpx;
+    margin-right: 180rpx;
+  }
+  .text_25 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 36rpx;
+    margin-top: 16rpx;
+  }
+  .box_17 {
+    flex-direction: row;
+    display: flex;
+    margin: 24rpx 0 0 64rpx;
+  }
+  .text_26 {
+    overflow-wrap: break-word;
+    color: rgba(102,102,102,1);
+    font-size: 20rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 36rpx;
+    margin-top: 4rpx;
+  }
+  .text_27 {
+    overflow-wrap: break-word;
+    color: rgba(237,86,159,1);
+    font-size: 28rpx;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 44rpx;
+  }
+  .image-text_9 {
+    width: 84rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+    margin: 8rpx 0 0 326rpx;
+  }
+  .thumbnail_13 {
+    width: 28rpx;
+    height: 28rpx;
+    margin: 4rpx 0 4rpx 0;
+  }
+  .text-group_10 {
+    overflow-wrap: break-word;
+    color: rgba(102,102,102,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 36rpx;
+  }
+  .box_18 {
+    background-color: rgba(238,238,238,1.000000);
+    width: 686rpx;
+    height: 2rpx;
+    margin-top: 32rpx;
+    display: flex;
+    flex-direction: column;
+  }
+  .box_19 {
+    // box-shadow: 0px -2px 4px 0px rgba(0,0,0,0.030000);
+    background-color: rgba(255,255,255,1.000000);
+    margin-top: 24rpx;
+    display: flex;
+    flex-direction: column;
+    padding: 24rpx 32rpx 24rpx 32rpx;
+  }
+  .text_28 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 40rpx;
+    margin: 0 454rpx 0 32rpx;
+  }
+  .section_1 {
+    background-color: rgba(255,246,206,1.000000);
+    border-radius: 60rpx;
+    width: 686rpx;
+    margin-top: 16rpx;
+    padding-left: 32rpx;
+    flex-direction: row;
+    display: flex;
+    justify-content: flex-end;
+  }
+  .text_29 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: center;
+    white-space: nowrap;
+    line-height: 40rpx;
+    margin-top: 36rpx;
+  }
+  .text_30 {
+    overflow-wrap: break-word;
+    color: rgba(17,17,17,1);
+    font-size: 36rpx;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 52rpx;
+    margin: 28rpx 0 0 8rpx;
+  }
+  .text_31 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: center;
+    white-space: nowrap;
+    line-height: 40rpx;
+    margin: 36rpx 0 0 8rpx;
+  }
+  .text_32 {
+    overflow-wrap: break-word;
+    color: rgba(51,51,51,1);
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: center;
+    white-space: nowrap;
+    line-height: 40rpx;
+    margin: 34rpx 0 0 28rpx;
+  }
+  .text-wrapper_8 {
+    background-color: rgba(255,224,92,1.000000);
+    border-radius: NaNrpx;
+    margin-left: 24rpx;
+    display: flex;
+    flex-direction: column;
+    padding: 30rpx 78rpx 30rpx 78rpx;
+  }
+  .text_33 {
+    overflow-wrap: break-word;
+    color: rgba(17,17,17,1);
+    font-size: 32rpx;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    text-align: center;
+    white-space: nowrap;
+    line-height: 48rpx;
+  }

otherPages/orderDetail/index.vue

@@ -0,0 +1,162 @@
+<template>
+    <view class="content">
+        <view class="page">
+            <view class="box_4">
+                <view class="group_1">
+                    <u-icon name="cut" color="#93D21A" size="18"></u-icon>
+                    <text lines="1" class="text_3">服务中</text>
+                </view>
+                <text lines="1" class="text_4">过程中您可以与发型师分享生活经历和趣事</text>
+            </view>
+            <view class="box_5">
+                <view class="text-wrapper_2">
+                    <text lines="1" class="text_5">到店</text>
+                </view>
+                <view class="box_6">
+                    <image
+                        src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngbe12c633bc42bdfe4bec24b4a5cbba0cf2303827d9158295c117a6bd81b460f0"
+                        class="thumbnail_3"></image>
+                    <text lines="1" class="text_6">订单编号：</text>
+                    <text lines="1" class="text_7">0202304261651056047</text>
+                </view>
+                <text lines="1" class="text_8">吉祥理胎发</text>
+                <view class="box_7">
+                    <view class="box_8">
+                        <view class="image-text_2">
+                            <image src="../../static/order/ud1.png" mode="" style="height: 36rpx;width: 36rpx;"></image>
+                            <text lines="1" class="text-group_2">服务对象：</text>
+                        </view>
+                        <view class="image-text_3">
+                            <image src="../../static/order/ud2.png" mode="" style="height: 36rpx;width: 36rpx;"></image>
+                            <text lines="1" class="text-group_3">服务门店：</text>
+                        </view>
+                        <view class="image-text_4">
+                            <u-icon name="clock" size="16"></u-icon>
+                            <text lines="1" class="text-group_4">下单时间：</text>
+                        </view>
+                    </view>
+                    <view class="text-wrapper_3">
+                        <text lines="1" class="text_9">娃娃</text>
+                        <text lines="1" class="text_10">红发廊富水南路店</text>
+                        <text lines="1" decode="true" class="text_11">2023-8-14&nbsp;12:33:55</text>
+                    </view>
+                    <view class="text-group_5">
+                        <text lines="1" class="text_12">A25</text>
+                        <text lines="1" class="text_13">排号</text>
+                    </view>
+                </view>
+                <view class="box_9">
+                    <view class="image-text_5">
+                        <u-icon name="scan" size="18"></u-icon>
+                        <text lines="1" class="text-group_6">扫码</text>
+                    </view>
+                </view>
+                <view class="box_10"></view>
+                <view class="text-wrapper_4">
+                    <text lines="1" class="text_14">扫码后的项目名称</text>
+                    <text lines="1" class="text_15">服务中</text>
+                </view>
+                <view class="box_11">
+                    <view class="group_2"></view>
+                    <view class="group_3">
+                        <view class="image-text_6">
+                            <u-icon name="server-man" size="16"></u-icon>
+                            <text lines="1" class="text-group_7">服务人员：</text>
+                        </view>
+                        <view class="box_12">
+                            <u-icon name="clock" size="16"></u-icon>
+                            <text lines="1" class="text_16">服务时间：</text>
+                        </view>
+                    </view>
+                    <view class="text-wrapper_5">
+                        <text lines="1" class="text_17">张三</text>
+                        <text lines="1" decode="true" class="text_18">2023-8-14&nbsp;12:33:55</text>
+                    </view>
+                </view>
+                <view class="box_13">
+                    <text lines="1" class="text_19">订单总金额：</text>
+                    <text lines="1" class="text_20">¥48.00</text>
+                    <view class="image-text_7">
+                        <image
+                            src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngff61e1197c09a2e2a6dbd82ec2e37efb6e678021c6c1e8ba4e8df5ff9259086d"
+                            class="thumbnail_10"></image>
+                        <text lines="1" class="text-group_8">申诉</text>
+                    </view>
+                </view>
+                <view class="box_14"></view>
+                <view>
+                    <view class="text-wrapper_6">
+                        <text lines="1" class="text_21">扫码后的项目名称</text>
+                        <text lines="1" class="text_22">服务中</text>
+                    </view>
+                    <view class="box_15">
+                        <view class="block_1"></view>
+                        <view class="block_2">
+                            <view class="image-text_8">
+                                <u-icon name="server-man" size="16"></u-icon>
+                                <text lines="1" class="text-group_9">服务人员：</text>
+                            </view>
+                            <view class="box_16">
+                                <u-icon name="clock" size="16"></u-icon>
+                                <text lines="1" class="text_23">服务时间：</text>
+                            </view>
+                        </view>
+                        <view class="text-wrapper_7">
+                            <text lines="1" class="text_24">张三</text>
+                            <text lines="1" decode="true" class="text_25">2023-8-14&nbsp;12:33:55</text>
+                        </view>
+                    </view>
+                    <view class="box_17">
+                        <text lines="1" class="text_26">订单总金额：</text>
+                        <text lines="1" class="text_27">¥48.00</text>
+                        <view class="image-text_9">
+                            <image
+                                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngff61e1197c09a2e2a6dbd82ec2e37efb6e678021c6c1e8ba4e8df5ff9259086d"
+                                class="thumbnail_13"></image>
+                            <text lines="1" class="text-group_10">申诉</text>
+                        </view>
+                    </view>
+                    <view class="box_18"></view>
+                </view>
+                
+            </view>
+            <view class="box_19">
+                <text lines="1" class="text_28">合计价格：¥96.00</text>
+                <view class="section_1">
+                    <text lines="1" class="text_29">待支付</text>
+                    <text lines="1" class="text_30">¥48.00</text>
+                    <text lines="1" class="text_31">¥68.00</text>
+                    <text lines="1" class="text_32">价格明细</text>
+                    <view class="text-wrapper_8">
+                        <text lines="1" class="text_33">提交</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import tabBar from "../../components/tabBar/tabBar";
+export default {
+    components: {
+        tabBar
+    },
+    data() {
+        return {
+            title: 'Hello',
+            tabIndex: 3
+        }
+    },
+    onLoad() {
+
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style>
+@import '/common/css/common.css';
+@import './index.rpx.scss';</style>

otherPages/serviceItems/index.rpx.scss

@@ -0,0 +1,364 @@
+.page {
+  background-color: rgba(255, 255, 255, 1.000000);
+  position: relative;
+  width: 750rpx;
+  // height: 1624rpx;
+  overflow: hidden;
+  padding-left: 0rpx;
+  padding-right: 0rpx;
+  padding-top: 0rpx;
+  padding-bottom: 32rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+.box_2 {
+  width: 698rpx;
+  margin-top: 32rpx;
+  flex-direction: row;
+  display: flex;
+  justify-content: space-between;
+}
+
+.image-text_1 {
+  width: 256rpx;
+  flex-direction: row;
+  display: flex;
+  justify-content: space-between;
+  margin: 6rpx 0 6rpx 0;
+}
+
+.thumbnail_1 {
+  width: 40rpx;
+  height: 40rpx;
+  margin: 4rpx 0 4rpx 0;
+}
+
+.text-group_1 {
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 32rpx;
+  font-family: PingFangSC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 48rpx;
+}
+
+.image_2 {
+  width: 180rpx;
+  height: 60rpx;
+}
+
+.block_2 {
+  background-color: rgba(255, 255, 255, 1.000000);
+  display: flex;
+  flex-direction: column;
+  padding: 24rpx 32rpx 0 32rpx;
+}
+
+.text_3 {
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 28rpx;
+  font-family: PingFangSC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 44rpx;
+  margin: 0 398rpx 0 64rpx;
+}
+
+.box_3 {
+  flex-direction: row;
+  display: flex;
+  margin: 24rpx 238rpx 0 0;
+}
+
+.group_1 {
+  background-color: rgba(255, 255, 255, 1.000000);
+  border-radius: 16rpx;
+  width: 32rpx;
+  height: 32rpx;
+  border: 1px solid rgba(221, 221, 221, 1);
+  display: flex;
+  flex-direction: column;
+  margin: 28rpx 0 28rpx 0;
+}
+
+.group_2 {
+  margin-left: 32rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+.image-text_2 {
+  width: 156rpx;
+  flex-direction: row;
+  display: flex;
+  justify-content: space-between;
+}
+
+.thumbnail_2 {
+  width: 28rpx;
+  height: 28rpx;
+  margin: 4rpx 0 4rpx 0;
+}
+
+.text-group_2 {
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 36rpx;
+}
+
+.group_3 {
+  width: 156rpx;
+  margin-top: 16rpx;
+  flex-direction: row;
+  display: flex;
+  justify-content: space-between;
+}
+
+.thumbnail_3 {
+  width: 28rpx;
+  height: 28rpx;
+  margin: 4rpx 0 4rpx 0;
+}
+
+.text_4 {
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 36rpx;
+}
+
+.text-wrapper_2 {
+  display: flex;
+  flex-direction: column;
+}
+
+.text_5 {
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 36rpx;
+  margin-right: 180rpx;
+}
+
+.text_6 {
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 36rpx;
+  margin-top: 16rpx;
+}
+
+.text-wrapper_3 {
+  width: 212rpx;
+  flex-direction: row;
+  display: flex;
+  justify-content: space-between;
+  margin: 24rpx 410rpx 0 64rpx;
+}
+
+.text_7 {
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 20rpx;
+  font-family: PingFangSC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 36rpx;
+  margin-top: 4rpx;
+}
+
+.text_8 {
+  overflow-wrap: break-word;
+  color: rgba(237, 86, 159, 1);
+  font-size: 28rpx;
+  font-family: PingFangSC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 44rpx;
+}
+
+.box_4 {
+  background-color: rgba(238, 238, 238, 1.000000);
+  width: 686rpx;
+  height: 2rpx;
+  margin-top: 32rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+.text_11 {
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 36rpx;
+  margin-right: 180rpx;
+}
+
+.text_12 {
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 36rpx;
+  margin-top: 16rpx;
+}
+
+.text-wrapper_5 {
+  width: 212rpx;
+  flex-direction: row;
+  display: flex;
+  justify-content: space-between;
+  margin: 24rpx 410rpx 0 64rpx;
+}
+
+.text_13 {
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 20rpx;
+  font-family: PingFangSC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 36rpx;
+  margin-top: 4rpx;
+}
+
+.text_14 {
+  overflow-wrap: break-word;
+  color: rgba(237, 86, 159, 1);
+  font-size: 28rpx;
+  font-family: PingFangSC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 44rpx;
+}
+
+.box_6 {
+  background-color: rgba(238, 238, 238, 1.000000);
+  width: 686rpx;
+  height: 2rpx;
+  margin-top: 32rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+.block_3 {
+  background-color: rgba(247, 247, 247, 1.000000);
+  border-radius: 50rpx;
+  width: 686rpx;
+  align-self: center;
+  flex-direction: row;
+  display: flex;
+  position: fixed;
+  bottom: 140rpx;
+  justify-content: space-between;
+  padding: 20rpx 32rpx 20rpx 40rpx;
+}
+
+.text_15 {
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 44rpx;
+}
+
+.image-text_4 {
+  width: 132rpx;
+  flex-direction: row;
+  display: flex;
+  justify-content: space-between;
+}
+
+.text-group_4 {
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular;
+  font-weight: normal;
+  text-align: right;
+  white-space: nowrap;
+  line-height: 44rpx;
+}
+
+.thumbnail_6 {
+  width: 32rpx;
+  height: 32rpx;
+  margin: 6rpx 0 6rpx 0;
+}
+
+.text-wrapper_6 {
+  background-color: rgba(255, 224, 92, 1.000000);
+  border-radius: 54rpx;
+  align-self: center;
+  margin-top: 24rpx;
+  display: flex;
+  flex-direction: column;
+  width: 686rpx;
+  padding: 20rpx 314rpx 20rpx 316rpx;
+}
+
+.text_16 {
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular;
+  font-weight: normal;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 44rpx;
+}
+
+.tabBarLineHeight {
+  height: 170rpx;
+}
+
+.tabBarView {
+  position: fixed;
+  bottom: 32rpx;
+  left: 32rpx;
+
+  .submitButton {
+    text-align: center;
+    line-height: 84rpx;
+    width: 686rpx;
+    height: 84rpx;
+    background: #FFE05C;
+    border-radius: 54rpx;
+  }
+}

otherPages/serviceItems/index.vue

@@ -0,0 +1,72 @@
+<template>
+    <view class="content">
+        <view class="page">
+            <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
+                @scrolltolower="lower" @scroll="scroll">
+                <view class="block_2" v-for="  item in 10 ">
+                    <text lines="1" class="text_3">扫码后的项目名称</text>
+                    <view class="box_3">
+                        <view class="group_1"></view>
+                        <view class="group_2">
+                            <view class="image-text_2">
+                                <u-icon name="server-man" size="16"></u-icon>
+                                <text lines="1" class="text-group_2">服务人员：</text>
+                            </view>
+                            <view class="group_3">
+                                <u-icon name="clock" size="16"></u-icon>
+                                <text lines="1" class="text_4">服务时间：</text>
+                            </view>
+                        </view>
+                        <view class="text-wrapper_2">
+                            <text lines="1" class="text_5">张三</text>
+                            <text lines="1" decode="true" class="text_6">2023-8-14&nbsp;12:33:55</text>
+                        </view>
+                    </view>
+                    <view class="text-wrapper_3">
+                        <text lines="1" class="text_7">订单总金额：</text>
+                        <text lines="1" class="text_8">¥48.00</text>
+                    </view>
+                    <view class="box_4"></view>
+                </view>
+                
+            </scroll-view>
+            <view class="tabBarLineHeight"></view>
+            <view class="block_3">
+                <text lines="1" class="text_15">优惠券</text>
+                <view class="image-text_4">
+                    <text lines="1" class="text-group_4">未选择</text>
+                    <u-icon name="arrow-right" color="#666" size="18"></u-icon>
+                </view>
+            </view>
+            <view class="tabBarView">
+                <view class="submitButton">确定</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import tabBar from "../../components/tabBar/tabBar";
+export default {
+    components: {
+        tabBar
+    },
+    data() {
+        return {
+            title: 'Hello',
+            tabIndex: 3
+        }
+    },
+    onLoad() {
+
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import '/common/css/common.css';
+@import './index.rpx.scss';
+</style>

otherPages/storeService/index.rpx.scss

@@ -4,10 +4,8 @@
 
 .tabBarView {
     position: fixed;
-    bottom: 0;
+    bottom: 32rpx;
     left: 32rpx;
-
-
     .submitButton {
         text-align: center;
         line-height: 84rpx;

otherPages/storeService/index.vue

@@ -1,24 +1,28 @@
 <template>
     <view class="content">
         <view>
-            <view class="box_4">
-                <view class="group_1">
-                    <view class="text-group_2">
-                        <text lines="1" class="text_3">服务对象</text>
-                        <text lines="1" class="text_4">请选择服务对象</text>
+            <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
+                @scrolltolower="lower" @scroll="scroll">
+                <view class="box_4">
+                    <view class="group_1">
+                        <view class="text-group_2">
+                            <text lines="1" class="text_3">服务对象</text>
+                            <text lines="1" class="text_4">请选择服务对象</text>
+                        </view>
+                        <u-icon name="arrow-right" color="#666" size="18"></u-icon>
                     </view>
-                    <u-icon name="arrow-right" color="#666" size="18"></u-icon>
-                </view>
-                <view class="group_2"></view>
-                <view class="group_1">
-                    <view class="text-group_2">
-                        <text lines="1" class="text_3">服务类型</text>
-                        <text lines="1" class="text_4">请选择服务类型</text>
+                    <view class="group_2"></view>
+                    <view class="group_1">
+                        <view class="text-group_2">
+                            <text lines="1" class="text_3">服务类型</text>
+                            <text lines="1" class="text_4">请选择服务类型</text>
+                        </view>
+                        <u-icon name="arrow-right" color="#666" size="18"></u-icon>
                     </view>
-                    <u-icon name="arrow-right" color="#666" size="18"></u-icon>
+                    <view class="group_2"></view>
                 </view>
-                <view class="group_2"></view>
-            </view>
+            </scroll-view>>
+
             <view class="tabBarLineHeight"></view>
             <view class="tabBarView">
                 <view class="submitButton">提交</view>

pages.json

@@ -121,12 +121,33 @@
 						"navigationStyle": "custom"
 					}
 				},
+				{
+					"path": "orderDetail/index",
+					"style": {
+						"navigationBarTitleText": "订单详情",
+						"enablePullDownRefresh": false
+					}
+				},
 				{
 					"path": "storeService/index",
 					"style": {
 						"navigationBarTitleText": "到店服务",
 						"enablePullDownRefresh": false
 					}
+				},
+				{
+					"path": "serviceItems/index",
+					"style": {
+						"navigationBarTitleText": "选择服务项目",
+						"enablePullDownRefresh": false
+					}
+				},
+				{
+					"path": "bookService/index",
+					"style": {
+						"navigationBarTitleText": "预约服务",
+						"enablePullDownRefresh": false
+					}
 				}
 			]
 		},