refactor：预约订单页面修改

orderPages/bookService/index.rpx.scss

@@ -1,420 +1,105 @@
-.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;
+.page{
+  background: #F7F7F7;
+}
+.group{
+  background: #FFFFFF;
+  padding: 0 32rpx;
+}
+
+.group2{
+  background: #FFFFFF;
+  padding: 0 32rpx;
+  height: 212rpx;
+  position: fixed;
+  bottom: 0;
+}
+
+.groupItem{
+  height: 154rpx;
+  border-bottom: 1px solid #EEEEEE;
+
+}
+.groupItemKey{
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333333;
+}
+.groupItemContent{
+  font-size: 28rpx;
+  font-weight: 400;
+  color: #999999;
+}
+.hint{
+  width: 24rpx;
+  height: 24rpx;
+  border-radius: 12rpx;
+  text-align: center;
+  background:   #FFAF36;
+  color: #FFFFFF;
+  font-size: 18rpx;
+}
+.hintCentent{
+  font-size: 24rpx;
+  font-weight: 400;
+  color: #FFAF36;
+  line-height: 24rpx;
+  margin-left: 10rpx;
+}
+.textareaView{
+  height: 280rpx;
+  background: #FAFAFA;
+  border-radius: 16rpx;
+  margin-top: 16rpx;
+  margin-bottom: 32rpx;
+
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #999999;
+  padding: 24rpx;
+}
+.btnTitle{
+  font-size: 24rpx;
+  font-weight: 400;
+  color: #333333;
+  margin-left: 32rpx;
+  margin-top: 24rpx;
+}
+.btn{
+  width: 686rpx;
+  height: 108rpx;
+  background: #FFF6CE;
+  border-radius: 60rpx;
+  margin-top: 16rpx;
+}
+.title{
+  font-size: 24rpx;
+  font-weight: 400;
+  color: #333333;
+  line-height: 108rpx;
+  margin-top: 32rpx;
+  margin-left: 32rpx;
+}
+.num{
+  font-size: 36rpx;
+  font-weight: bord;
+  color: #111111;
+  line-height: 108rpx;
+  margin-left: 8rpx;
+
+}
+.btnRight{
+  width: 220rpx;
+  height: 108rpx;
+  background: #FFE05C;
+  border-radius: 0rpx 60rpx 60rpx 0rpx;
+
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #111111;
+  line-height: 108rpx;
+  text-align: center;
+}
+.marginTop{
+  margin-top: 24rpx;
 }

orderPages/bookService/index.vue

@@ -1,69 +1,107 @@
 <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 class="page">
+        <view class="flex-col group">
+            <view class="flex-col justify-around groupItem">
+                <view class="groupItemKey">
+                    <text>服务对象</text>
                 </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 class="flex-row justify-between groupItemContent" @click="getServiceObject">
+                    <text>{{serviceObject.nickName || '请选择对象' }}</text>
+                    <u-icon name="arrow-right" color="#666" size="18"></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 class="flex-col justify-around groupItem">
+                <view class="groupItemKey">
+                    <text>服务类别</text>
                 </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>
+                <picker  @change="bindPickerChange" mode='selector'  range-key="typeName" :value="index" :range="storeServiceList">
+                    <view class="flex-row justify-between groupItemContent">
+                        <text>{{storeServiceList[index].typeName || '请选择服务类别' }}</text>
+                        <u-icon name="arrow-right" color="#666" size="18"></u-icon>
                     </view>
-                    <u-icon name="arrow-right" size="16"></u-icon>
+                </picker>
+            </view>
+
+        </view>
+
+
+        <view class="flex-col group marginTop">
+
+            <view class="flex-row ">
+                <view class="hint">
+                    <text>!</text>
                 </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 class="hintCentent">
+                    <text>需提前一天起预约，取消订单服务需服务前一天取消</text>
                 </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 class="flex-col justify-around groupItem">
+                <view class="groupItemKey">
+                    <text>服务日期</text>
                 </view>
+                <picker  @change="bindPickerChange" mode='selector'  range-key="typeName" :value="index" :range="storeServiceList">
+                    <view class="flex-row justify-between groupItemContent">
+                        <text>{{storeServiceList[index].typeName || '请选择服务日期' }}</text>
+                        <u-icon name="arrow-right" color="#666" size="18"></u-icon>
+                    </view>
+                </picker>
             </view>
-            <view class="box_16 bord">
-                <text lines="1" class="text_16">提交订单之前需支付预约服务费用</text>
-                <view class="box_17 bord">
-                    <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 class="flex-col justify-around groupItem">
+
+                <view class="groupItemKey">
+                    <text>服务时段</text>
+                </view>
+                <picker  @change="bindPickerChange" mode='selector'  range-key="typeName" :value="index" :range="storeServiceList">
+                    <view class="flex-row justify-between groupItemContent">
+                        <text>{{storeServiceList[index].typeName || '服务时段' }}</text>
+                        <u-icon name="arrow-right" color="#666" size="18"></u-icon>
                     </view>
+                </picker>
+            </view>
+
+            <view class="flex-col justify-around groupItem">
+                <view class="groupItemKey">
+                    <text>服务人员</text>
                 </view>
+                <picker  @change="bindPickerChange" mode='selector'  range-key="typeName" :value="index" :range="storeServiceList">
+                    <view class="flex-row justify-between groupItemContent">
+                        <text>{{storeServiceList[index].typeName || '请选择服务人员' }}</text>
+                        <u-icon name="arrow-right" color="#666" size="18"></u-icon>
+                    </view>
+                </picker>
             </view>
+
+
         </view>
+        <view class="flex-col group marginTop">
+            <view class="groupItemKey">
+                <text>服务定制</text>
+            </view>
+            <view class="textareaView">
+                <textarea placeholder-style="color:#999999;fontSize:28rpx" placeholder="如有其它特殊需求，请在此输入您的需求"/>
+            </view>
+        </view>
+
+        <view :style="{'height':'236rpx'}"></view>
+
+        <view class="flex-col  group2 ">
+            <view class="btnTitle">
+                <text>提交订单之前需支付预约服务费用</text>
+            </view>
+            <view class="btn flex-row justify-between">
+                <view>
+                    <text class="title">待支付</text>
+                    <text class="num">￥120</text>
+                </view>
+                <view class="btnRight">
+                    <text>提交</text>
+                </view>
+            </view>
+        </view>
+
     </view>
 </template>
 
@@ -73,14 +111,70 @@ export default {
 
     data() {
         return {
-
+            store:{},
+            serviceObject:{},
+            storeServiceList:[],
+            index:0
         }
     },
     onLoad() {
+        this.listServiceObject()
+    },
 
+    onShow(){
+        // 服务对象
+        uni.$off()
+        uni.$on('selectedServiceObject', this.selectedServiceObject);
+
+        this.store = uni.getStorageSync('storeInfo')
+        // this.storeAllServiceList()
+        this.category()
     },
+
     methods: {
 
+        // 查询服务对接信息列表
+        listServiceObject(){
+            this.$api.listServiceObject(this.reqParm).then((res)=>{
+                console.log('++++++++++listServiceObject+++++++++++',res)
+                this.getImgUrlByOssId(res.data.data[0]);
+            }).catch(() =>{
+                uni.showToast({
+                    title: "操作失败"
+                })
+            });
+        },
+        // 获取图片
+        getImgUrlByOssId(data){
+            if (data.facePhoto){
+                this.$api.getImgUrlByOssId({ossId:item.facePhoto}).then(res=>{
+                    console.log('+++++++++++++getImgUrlByOssId+++++++++++++++',res)
+                })
+            }
+            this.serviceObject = data
+        },
+
+        getServiceObject(){
+            uni.navigateTo({
+                url:'/orderPages/serviceObject/index'
+            })
+        },
+        selectedServiceObject(e){
+            this.serviceObject = e
+        },
+
+        bindPickerChange(e){
+            this.index= e.detail.value
+            console.log(e)
+        },
+
+        category(){
+            this.$api.category({storeId:this.store.storeId}).then(res=>{
+                this.storeServiceList= res.data.data
+            })
+
+        },
+
     }
 }
 </script>