fix:首页样式，主体颜色更改

componets/tabs/index.js

@@ -10,8 +10,8 @@ Component({
         tabClass: { type: String, value: '' },
         swiperClass: { type: String, value: '' },
         activeClass: { type: String, value: '' },
-        tabUnderlineColor: { type: String, value: '#E32490' },
-        tabActiveTextColor: { type: String, value: '#323232' },
+        tabUnderlineColor: { type: String, value: '#BA9D6E' },
+        tabActiveTextColor: { type: String, value: '#BA9D6E' },
         tabInactiveTextColor: { type: String, value: '#323232' },
         tabBackgroundColor: { type: String, value: '#ffffff' },
         activeTab: { type: Number, value: 0 },

pages/appointment/appointment.js

@@ -26,7 +26,8 @@ Page({
     hasMobile: false,
     mobile: '',
     address:'',
-    shopName:''
+    shopName:'',
+    userName:''
   },
 
   /**
@@ -51,13 +52,15 @@ Page({
       address,
       shopName
     })
-    let userInfo = await app.getWxUserInfo()
+    let userInfo = await app.getWxUserInfo();
+    console.log(userInfo.name)
     if (userInfo) {
       this.setData({
         userInfo: userInfo,
         hasUserInfo: true,
         hasMobile: userInfo.mobile.length > 1 ? true : false,
-        mobile: userInfo.mobile
+        mobile: userInfo.mobile,
+        userName:userInfo.name
       })
     }
     await this.createTimeList();
@@ -130,7 +133,8 @@ Page({
     }
     _self.setData({
       hasMobile: hasMobile,
-      mobile: userInfo.mobile
+      mobile: userInfo.mobile,
+      
     })
   },
 

pages/appointment/appointment.scss

@@ -88,6 +88,15 @@
                     position: absolute;
                     bottom: 0;
                     left: 0;
+                    display: flex;
+                    justify-content: flex-start;
+
+                    & :first-child {
+                        font-size: 12px;
+                        color: #424242;
+                        padding-top: 25rpx;
+                        margin-right: 10rpx;
+                    }
                 }
             }
 
@@ -185,19 +194,19 @@
                 display: flex;
                 flex-wrap: wrap;
                 background-color: #fff;
-                margin: 10rpx 15rpx 0;
+                margin-top: 15rpx;
 
                 .time-info {
-                    width: 20%;
+                    width: 166rpx;
                     height: 80rpx;
                     line-height: 80rpx;
-                    // background-color: #E6E6E6;
-                    margin: 10rpx 0;
+                    background-color: #F5F5F5;
+                    margin: 5rpx 5rpx;
                     text-align: center;
                 }
 
                 .select-time {
-                    background-color: #DF3361;
+                    background-color: #BA9D6E;
                     color: #fff
                 }
 
@@ -209,10 +218,13 @@
     }
 
     .product-mobile {
-        height: 100rpx;
+        height: 200rpx;
         position: relative;
         margin-bottom: 50rpx;
-        >button {
+        display: flex;
+        flex-direction: column;
+
+        button {
             background-color: rgba(0, 0, 0, 0);
             color: #202020;
             font-weight: 400;
@@ -221,17 +233,44 @@
             padding: 0;
             /* margin: 0; */
             position: absolute;
-            left: -40rpx;
+            left: 60rpx;
             top: 0;
         }
+
+        .phone {
+            display: flex;
+            position: relative;
+            height: 100rpx;
+            line-height: 100rpx;
+
+            .phone-icon {
+                position: absolute;
+                width: 50rpx;
+                height: 50rpx;
+                top: 50%;
+                transform: translateY(-50%);
+                left: 40rpx;
+
+            }
+
+            .desc-text {
+                margin-left: 140rpx;
+                letter-spacing: 4rpx;
+            }
+        }
+
+        & :first-child {
+            border-bottom: 1px solid #ECECEC;
+        }
     }
 
     .appointment {
         width: 100%;
         height: 100rpx;
         display: flex;
-        justify-content:flex-start;
-        .price{
+        justify-content: flex-start;
+
+        .price {
             flex: 1;
             background-color: #222224;
             color: #fff;
@@ -240,7 +279,8 @@
             font-weight: 300;
             letter-spacing: 2rpx;
         }
-        .btn{
+
+        .btn {
             width: 300rpx;
             background-color: #BA9D6E;
             text-align: center;
@@ -248,11 +288,6 @@
         }
     }
 
-    .appointment-hover {
-        background-color: #fff;
-        border: 2rpx solid #DF3361;
-        color: rgb(54, 54, 54);
-    }
-
+ 
 
 }

pages/appointment/appointment.wxml

@@ -14,8 +14,10 @@
             <view class="product-name">
                 <view class="title">{{productName}}</view>
                 <view class="price">
-                    <text style="font-size:12px;color:#424242">¥</text>
-                    {{price}}
+                    <view >
+                        ¥
+                    </view>
+                    <view style="padding-top: 10rpx;">{{price}}</view>
                 </view>
             </view>
         </view>
@@ -34,10 +36,10 @@
     </view>
     <view class="desc-title">预约时间</view>
     <view class="order-time card">
-        <mp-tabs tabs="{{tabs}}" style="width: 100%;" data-active="{{activeTab}}" activeTab="{{activeTab}}" swiperClass="weui-tabs-swiper" bindtabclick="onTabClick" bindchange="onSlideChangeEnd" activeClass="tab-bar-title__selected" tabActiveTextColor="#E32490" swiperHeight="{{(tabs[activeTab].list.length)/5*140}}">
+        <mp-tabs tabs="{{tabs}}" style="width: 100%;" data-active="{{activeTab}}" activeTab="{{activeTab}}" swiperClass="weui-tabs-swiper" bindtabclick="onTabClick" bindchange="onSlideChangeEnd" activeClass="tab-bar-title__selected" tabActiveTextColor="#BA9D6E" swiperHeight="{{(tabs[activeTab].list.length)/5*125}}">
             <block wx:for="{{tabs}}" wx:key="title">
-                <view class="tab-content" data-set="{{item}}" slot="tab-content-{{index}}" bind:tap="handleClick" style="height: {{(tabs[activeTab].list.length)/5*140}}rpx;">
-                    <view class="orders" style="height: {{(tabs[activeTab].list.length)/5*140}}rpx;overflow-y: auto;">
+                <view class="tab-content" data-set="{{item}}" slot="tab-content-{{index}}" bind:tap="handleClick" style="height: {{(tabs[activeTab].list.length)/5*120}}rpx;">
+                    <view class="orders" style="height: {{(tabs[activeTab].list.length)/5*120}}rpx;overflow-y: auto;">
                         <block wx:for="{{tabs[activeTab].list}}" wx:for-index="index" wx:key="id">
                             <view class="time-info {{item.checked&&item.inTime?'select-time':''}}  {{item.inTime?'':'out-time'}}" data-time="{{item.time}}" data-i="{{index}}" bindtap="getOrderTime">
                                 <view class="time fw300">{{item.time}}</view>
@@ -49,18 +51,22 @@
             </block>
         </mp-tabs>
     </view>
-
-    <view class="desc-title">预留手机号</view>
+    <view class="desc-title">联系人</view>
     <view class="product-mobile card f17">
-        <button type="primary" wx:if="{{!hasMobile}}" bindgetphonenumber="getMobile" open-type="getPhoneNumber">
-            获取手机号
-        </button>
-        <button type="primary" wx:if="{{hasMobile}}">{{mobile}}</button>
+        <view class="phone">
+            <image class="phone-icon" src="../../images/icons/user.png"></image>
+            <view class="desc-text">{{userName}}</view>
+        </view>
+        <view class="phone">
+            <image class="phone-icon" src="../../images/icons/phone.png"></image>
+            <button type="primary" wx:if="{{!hasMobile}}" bindgetphonenumber="getMobile" open-type="getPhoneNumber">
+                点击获取手机号
+            </button>
+            <view class="desc-text" wx:if="{{hasMobile}}">{{mobile}}</view>
+        </view>
     </view>
-    <view class="appointment " >
+    <view class="appointment ">
         <view class="price">价格：¥{{peopleNum*price}}</view>
         <view class="btn" bindtap="checkAuth">提交预约</view>
     </view>
-
-    
 </view>

pages/appointment/appointment.wxss

@@ -91,6 +91,15 @@
   position: absolute;
   bottom: 0;
   left: 0;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.container .product-desc .product .product-name .price :first-child {
+  font-size: 12px;
+  color: #424242;
+  padding-top: 25rpx;
+  margin-right: 10rpx;
 }
 
 .container .people-num {
@@ -178,19 +187,20 @@
   display: flex;
   flex-wrap: wrap;
   background-color: #fff;
-  margin: 10rpx 15rpx 0;
+  margin-top: 15rpx;
 }
 
 .container .order-time .tab-content .orders .time-info {
-  width: 20%;
+  width: 166rpx;
   height: 80rpx;
   line-height: 80rpx;
-  margin: 10rpx 0;
+  background-color: #F5F5F5;
+  margin: 5rpx 5rpx;
   text-align: center;
 }
 
 .container .order-time .tab-content .orders .select-time {
-  background-color: #DF3361;
+  background-color: #BA9D6E;
   color: #fff;
 }
 
@@ -199,12 +209,14 @@
 }
 
 .container .product-mobile {
-  height: 100rpx;
+  height: 200rpx;
   position: relative;
   margin-bottom: 50rpx;
+  display: flex;
+  flex-direction: column;
 }
 
-.container .product-mobile > button {
+.container .product-mobile button {
   background-color: transparent;
   color: #202020;
   font-weight: 400;
@@ -213,10 +225,35 @@
   padding: 0;
   /* margin: 0; */
   position: absolute;
-  left: -40rpx;
+  left: 60rpx;
   top: 0;
 }
 
+.container .product-mobile .phone {
+  display: flex;
+  position: relative;
+  height: 100rpx;
+  line-height: 100rpx;
+}
+
+.container .product-mobile .phone .phone-icon {
+  position: absolute;
+  width: 50rpx;
+  height: 50rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 40rpx;
+}
+
+.container .product-mobile .phone .desc-text {
+  margin-left: 140rpx;
+  letter-spacing: 4rpx;
+}
+
+.container .product-mobile :first-child {
+  border-bottom: 1px solid #ECECEC;
+}
+
 .container .appointment {
   width: 100%;
   height: 100rpx;
@@ -240,9 +277,3 @@
   text-align: center;
   line-height: 100rpx;
 }
-
-.container .appointment-hover {
-  background-color: #fff;
-  border: 2rpx solid #DF3361;
-  color: #363636;
-}

pages/commentinfo/commentinfo.scss

@@ -58,25 +58,28 @@
         padding-top: 10rpx;
         min-height: 400rpx;
         position: relative;
+
         .weui-uploader {
             .weui-uploader__bd {
                 display: flex;
-                justify-content:flex-start;
+                justify-content: flex-start;
                 flex-wrap: wrap;
-                padding:30rpx 0;
-                
+                padding: 30rpx 0;
+
                 .pic {
                     width: 30%;
                     height: 200rpx;
                     margin-left: 1.111111%;
                     margin-bottom: 1%;
                     position: relative;
+
                     .weui-uploader__img {
                         width: 100%;
                         height: 100%;
                         position: relative;
                     }
-                    .delete-btn{
+
+                    .delete-btn {
                         width: 35rpx;
                         height: 35rpx;
                         border-radius: 50%;
@@ -88,7 +91,8 @@
                         text-align: center;
                         line-height: 35rpx;
                         color: #fff;
-                        &::after{
+
+                        &::after {
                             content: '';
                             width: 20rpx;
                             height: 2rpx;
@@ -98,16 +102,18 @@
                             left: 8rpx;
                         }
                     }
-                    
+
                 }
-                .add{
+
+                .add {
                     width: 200rpx;
                     height: 200rpx;
                     color: #999;
                     margin-left: 10rpx;
                     background-color: rgb(238, 238, 238);
                     position: relative;
-                    >.title{
+
+                    >.title {
                         width: 100%;
                         text-align: center;
                         position: absolute;
@@ -115,7 +121,8 @@
                         left: 105rpx;
                         transform: translateX(-50%);
                     }
-                    >.camera{
+
+                    >.camera {
                         width: 80rpx;
                         height: 80rpx;
                         margin: 0 auto;
@@ -124,21 +131,20 @@
                         top: 20%;
                         transform: translateX(-50%);
                     }
-                    
+
                 }
-               
-                
+
+
             }
         }
-        .upload-img-btn{
-           
-        }
+
+        .upload-img-btn {}
     }
 
-    .comment-btn{
+    .comment-btn {
         width: 80%;
         height: 110rpx;
-        background-color: #DF3361;
+        background-color: #BA9D6E;
         color: #fff;
         margin: 30rpx auto;
         text-align: center;

pages/commentinfo/commentinfo.wxss

@@ -136,7 +136,7 @@
 .container .comment-btn {
   width: 80%;
   height: 110rpx;
-  background-color: #DF3361;
+  background-color: #BA9D6E;
   color: #fff;
   margin: 30rpx auto;
   text-align: center;

pages/index/index.scss

@@ -16,16 +16,17 @@ Page {
     border-top: 1rpx solid #ECECEC;
     width: 100%;
     background-color: #F7F7F7;
-    position: fixed;
-    z-index: 99;
+
 
     >.title {
+      
       display: flex;
       justify-content: space-between;
       padding: 0 40rpx;
       height: 80rpx;
       line-height: 80rpx;
       background-color: #fff;
+      
 
       .title-left {
         position: relative;
@@ -82,7 +83,7 @@ Page {
 
   .product {
     overflow-y: auto;
-    padding-top: 590rpx;
+    // padding-top: 590rpx;
     /* .weui-tabs {
       .weui-tabs-bar__wrp {
         .weui-tabs-bar__content {

pages/index/index.wxss

@@ -16,8 +16,6 @@ Page {
   border-top: 1rpx solid #ECECEC;
   width: 100%;
   background-color: #F7F7F7;
-  position: fixed;
-  z-index: 99;
   /* 未获得授权时显示获取授权按钮 */
 }
 
@@ -76,7 +74,6 @@ Page {
 
 .container .product {
   overflow-y: auto;
-  padding-top: 590rpx;
   /* .weui-tabs {
       .weui-tabs-bar__wrp {
         .weui-tabs-bar__content {

pages/order/order.scss

@@ -3,7 +3,7 @@
 
     // 倒计时
     .timer {
-        background-color: #DF3361;
+        background-color: #BA9D6E;
         width: 100%;
         height: 60rpx;
         font-size: 14px;
@@ -135,7 +135,7 @@
 
         .confirm-btn,
         .pay-btn {
-            background-color: #DF3361;
+            background-color: #BA9D6E;
             width: 180rpx;
             height: 50rpx;
             font-size: 14px;

pages/order/order.wxss

@@ -3,7 +3,7 @@
 }
 
 .container .timer {
-  background-color: #DF3361;
+  background-color: #BA9D6E;
   width: 100%;
   height: 60rpx;
   font-size: 14px;
@@ -137,7 +137,7 @@
 
 .container .order-btn .confirm-btn,
 .container .order-btn .pay-btn {
-  background-color: #DF3361;
+  background-color: #BA9D6E;
   width: 180rpx;
   height: 50rpx;
   font-size: 14px;
@@ -159,15 +159,3 @@
   border: 1rpx solid #999;
   margin: 0 20rpx;
 }
-
-.xiaofei {
-  background-color: #DF3361;
-  width: 180rpx;
-  height: 50rpx;
-  font-size: 14px;
-  text-align: center;
-  line-height: 50rpx;
-  border-radius: 25rpx;
-  color: #fff;
-  margin-right: 20rpx;
-}

pages/personinfo/personinfo.scss

@@ -68,7 +68,7 @@
         width: 90%;
         height: 100rpx;
         margin: 10rpx auto;
-        background-color: #DF3361;
+        background-color: #BA9D6E;
         color: #fff;
         font-size: 17px;
         line-height: 100rpx;

pages/personinfo/personinfo.wxss

@@ -78,7 +78,7 @@
   width: 90%;
   height: 100rpx;
   margin: 10rpx auto;
-  background-color: #DF3361;
+  background-color: #BA9D6E;
   color: #fff;
   font-size: 17px;
   line-height: 100rpx;

pages/personorder/personorder.scss

@@ -45,14 +45,18 @@
 
         .orderinfo {
             margin: 0 20rpx 20rpx;
-
-
             .order-item {
                 display: flex;
                 justify-content: flex-start;
                 position: relative;
                 border-bottom: 1px solid #ebeef5;
-
+                .pay-text{
+                    position: absolute;
+                    top:-18rpx;
+                    left:20rpx;
+                    color: #BA9D6E;
+                    font-size: 14px;
+                }
                 .order-img {
                     width: 210rpx;
                     height: 200rpx;
@@ -124,7 +128,7 @@
 
                 .comment,
                 .pay {
-                    background-color: #DF3361;
+                    background-color: #BA9D6E                    ;
                     color: #fff;
                 }
             }

pages/personorder/personorder.wxml

@@ -1,7 +1,7 @@
 <!--pages/personorder/personorder.wxml-->
 <view class="container">
     <mp-tabs tabs="{{tabs}}" activeTab="{{activeTab}}" swiperClass="weui-tabs-swiper" bindtabclick="onTabClick"
-        bindchange="onChange" activeClass="tab-bar-title__selected" tabActiveTextColor="#E32490"
+        bindchange="onChange" activeClass="tab-bar-title__selected" tabActiveTextColor="#BA9D6E"
         swiperHeight="{{(tabs[activeTab].list.length)*420}}">
         <block wx:for="{{tabs}}" wx:key="title">
 

pages/personorder/personorder.wxss

@@ -50,6 +50,14 @@
   border-bottom: 1px solid #ebeef5;
 }
 
+.container .orders .orderinfo .order-item .pay-text {
+  position: absolute;
+  top: -18rpx;
+  left: 20rpx;
+  color: #BA9D6E;
+  font-size: 14px;
+}
+
 .container .orders .orderinfo .order-item .order-img {
   width: 210rpx;
   height: 200rpx;
@@ -59,7 +67,6 @@
 .container .orders .orderinfo .order-item .order-img image {
   width: 210rpx;
   height: 200rpx;
-  border-radius: 20rpx;
 }
 
 .container .orders .orderinfo .order-item .order-desc {
@@ -120,7 +127,7 @@
 
 .container .orders .orderinfo .operate-btn .comment,
 .container .orders .orderinfo .operate-btn .pay {
-  background-color: #DF3361;
+  background-color: #BA9D6E;
   color: #fff;
 }
 
@@ -129,12 +136,3 @@
   top: -3rpx;
   left: 0;
 }
-
-.pay-text {
-  display: inline;
-  position: absolute;
-  font-size: 28rpx;
-  line-height: 53rpx;
-  left: 20rpx;
-  color: #F4511E;
-}

pages/product/product.scss

@@ -59,7 +59,7 @@ page {
         width: 90%;
         height: 100rpx;
         margin: 10rpx auto;
-        background-color: #DF3361;
+        background-color: #BA9D6E;
 
         color: #fff;
 
@@ -71,9 +71,9 @@ page {
         }
     }
 
-    .appointment-hover {
+    /* .appointment-hover {
         background-color: #fff;
-        border: 2rpx solid #DF3361;
+        border: 2rpx solid #BA9D6E;
         color: rgb(54, 54, 54);
-    }
+    } */
 }

pages/product/product.wxss

@@ -8,6 +8,11 @@ page {
   width: 100%;
   overflow-x: hidden;
   overflow-y: auto;
+  /* .appointment-hover {
+        background-color: #fff;
+        border: 2rpx solid #BA9D6E;
+        color: rgb(54, 54, 54);
+    } */
 }
 
 .container .product-img {
@@ -18,21 +23,17 @@ page {
 }
 
 .container .product-img image {
-  width: 700rpx;
-  height: 446rpx;
-  border-radius: 30rpx;
-  margin-left: 25rpx;
-  margin-top: 25rpx;
+  width: 100%;
+  height: 500rpx;
 }
 
 .container .product-img > view {
-  margin: 10rpx 0 0 25rpx;
+  margin: 10rpx 0 0 20rpx;
 }
 
 .container .product-desc {
   margin-top: 10rpx;
   width: 100%;
-  margin-left: 25rpx;
 }
 
 .container .comments {
@@ -63,17 +64,8 @@ page {
   width: 90%;
   height: 100rpx;
   margin: 10rpx auto;
-  background-color: #DF3361;
+  background-color: #BA9D6E;
   color: #fff;
-  position: fixed;
-  bottom: 26rpx;
-  left: 31rpx;
-  border-radius: 54rpx
-}
-
-.card-product{
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
-  /* border: 1px solid #ebeef5; */
 }
 
 .container .appointment .btn {
@@ -82,21 +74,3 @@ page {
   text-align: center;
   letter-spacing: 2rpx;
 }
-
-.container .appointment-hover {
-  background-color: #fff;
-  border: 2rpx solid #DF3361;
-  color: #363636;
-}
-
-.discuss {
-  position: relative;
-  bottom: 100rpx;
-  font-size: 38rpx;
-  color: #9E9E9E;
-  letter-spacing: 5rpx;
-}
-
-.discuss-info {
-  text-align: center;
-}