style(client): 订单样式优化

src/PageMine/orderComment/index.vue

@@ -1,109 +0,0 @@
-<template>
-  <view class='container'>
-    <view class='container-box'>
-      <view class='title'>服务项目</view>
-      <view class='order-item'>
-        <view class='item-left'>
-          <image src="@/static/QR57a.jpg" class="img"></image>
-        </view>
-        <view class='item-right'>
-          <view class='right1'>水洗轿车</view>
-          <view class='right1'>X1</view>
-          <view class='right2'>汽车美容</view>
-        </view>
-      </view>
-      <u-line margin='24rpx 0 28rpx'></u-line>
-
-      <view class="rate-box">
-        <view class="rate-left">
-          <span style="color: #EA0000;">*</span>评分得分
-        </view>
-        <view class="rate-right">
-          <u-rate count="5" v-model="value"></u-rate>
-        </view>
-      </view>
-
-      <view class="comment-box">
-        <u--textarea v-model="remark" count placeholder="请输入评分内容" ></u--textarea>
-      </view>
-    </view>
-
-    <button class='btn' >取消预约</button>
-  </view>
-</template>
-
-<script>
-  export default{
-    data(){
-      return{
-        value:'',
-        remark:''
-      }
-    }
-  }
-</script>
-
-<style lang='scss' scope>
-  page{
-    background-color:#F9F9F9;
-  }
-  .container{
-    padding:24rpx 32rpx;
-    .container-box{
-      border-radius: 16rpx;
-      background-color: #fff;
-      padding: 24rpx;
-      .title{
-        margin-bottom:24rpx;
-        color:#333;
-        font-weight:bold;
-      }
-      .order-item{
-        display:flex;
-        .item-left{
-          margin-left: 32rpx;
-          .img{
-            width: 160rpx;
-            height: 160rpx;
-          }
-        }
-        .item-right{
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          .right1{
-            color: #333333;
-          }
-          .right2{
-            padding: 2rpx 12rpx;
-            color: #215EBE;
-            border:2rpx solid #215EBE;
-            background-color: #E8EEF8;
-          }
-        }
-      }
-
-      .rate-box{
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom:28rpx;
-        .rate-left{
-          align-items: center;
-        }
-        .rate-right{
-
-        }
-      }
-    }
-    .btn {
-      width: 100%;
-      background-color: #7A9ED8;
-      text-align: center;
-      color: #fff;
-      margin-top:50rpx;
-      height:80rpx;
-      line-height: 80rpx;
-    }
-  }
-</style>

src/PageMine/orderDetail/index.vue

@@ -1,27 +1,29 @@
 <template>
-  <view class='comtainer'>
-    <view class='title-box'>
+  <view class='order-detail'>
+    <view class="page-navbar">
+      <page-navbar bgColor="transparent" title="我的订单" titleColor="#fff" iconColor="#fff" />
+    </view>
+    <view class='title-box u-p-l-32'>
       <view class='title'>待使用</view>
-      <view class='explan'>请切务听信商家线下交易，平台交易有保降哦</view>
+      <view class='explain u-m-b-16'>请切务听信商家线下交易，平台交易有保降哦</view>
     </view>
 
     <view class="container-item-box">
       <view class='order-title'>此条形码给店员展示</view>
-
       <view class='order-item-top-box'>
         <view class='order-item' v-for="(item,index) of 3" :key="index">
           <view class='item-box'>
             <view class='item-left'>
-              <image src='@/static/QR57a.jpg' class='img'></image>
+              <base-img src='/static/img.jpg' width="160rpx" height="160rpx" borderRadius="16rpx"></base-img>
             </view>
-            <view class='item-right'>
-              <view class='right1'>水洗轿车</view>
-              <view class='right2'>X1</view>
-              <view class='right3'>汽车美容</view>
+            <view  class="u-m-l-32">
+              <view class='f-s-28 text-333 u-m-b-20'>水洗轿车</view>
+              <view class='f-s-24 text-333 u-m-b-32'>X1</view>
+              <base-text text="汽车美容" padding="2rpx 10rpx"></base-text>
             </view>
           </view>
         </view>
-        <view class='allprice'>
+        <view class='allPrice'>
          <view class='price-text'>总价:</view>
          <view class='price'>¥97.95</view>
         </view>
@@ -33,7 +35,6 @@
         <view class='refund-box'>
           <view class='refund-btn'>申请退款</view>
         </view>
-
         <view class='rqcode-box'>
           <view class='rqcode-img'>
             <image class='img' src='@/static/icon/tools.png'>
@@ -45,17 +46,15 @@
         </view>
       </view>
 
-      <view class="order-item-explan-box">
-        <view class='explan-title'>贵阳贵通汽车服务有限公司</view>
-        <view class='explan-sale'>
+      <view class="order-item-explain-box">
+        <view class='explain-title'>贵阳贵通汽车服务有限公司</view>
+        <view class='explain-sale'>
           <view class='sale-left'>营业中</view>
           <view class='sale-right'>销量 225</view>
         </view>
-        <view class='explan-address'>观山湖区高新区联合广场</view>
+        <view class='explain-address'>观山湖区高新区联合广场</view>
       </view>
-
       <button class='reserve-btn' @click='handlerSkipReserve'>立即预约</button>
-
     </view>
 
     <view class="containers-box">
@@ -84,7 +83,6 @@
           <view class='item-right'>1.订单核销码有效期60天，过期后自动退款； 2.未使用/未到期前随时可退，款项沿付款方式原路退回，订单使用后不可退款</view>
       </view>
     </view>
-
   </view>
 </template>
 
@@ -119,18 +117,22 @@ export default {
 </script>
 
 <style lang="scss" scope>
-.comtainer {
-  padding: 120rpx 32rpx 32rpx;
+.order-detail {
+  padding: 194rpx 32rpx 32rpx;
   background: linear-gradient(180deg, #d3e2ff 0%, #efeffa 35%, #f9f9f9 50%);
   min-height: calc(100vh - 152rpx);
   font-size: 28rpx;
+  position: relative;
+  .page-navbar {
+    position: absolute;
+  }
   .title-box {
     .title {
       color: #0c1223;
       font-size: 36rpx;
       font-weight: bold;
     }
-    .explan {
+    .explain {
       color: #333333;
       font-size: 26rpx;
       margin-top: 12rpx;
@@ -153,22 +155,11 @@ export default {
         margin-bottom: 24rpx;
         .item-box {
           display: flex;
-          .item-left {
-            .img {
-              width: 160rpx;
-              height: 160rpx;
-              border-radius: 16rpx;
-            }
-          }
           .item-right {
             margin-left: 32rpx;
             display: flex;
             flex-direction: column;
             justify-content: space-between;
-            .right1 {
-            }
-            .right2 {
-            }
             .right3 {
               padding: 2rpx 12rpx;
               border: 2rpx solid #215ebe;
@@ -183,7 +174,7 @@ export default {
         margin: 0;
       }
 
-      .allprice {
+      .allPrice {
         display: flex;
         justify-content: flex-end;
         font-size: 26rpx;
@@ -234,9 +225,9 @@ export default {
   }
 }
 
-.order-item-explan-box {
+.order-item-explain-box {
   margin-top: 50rpx;
-  .explan-sale {
+  .explain-sale {
     display: flex;
     margin: 9rpx 0;
     align-items: center;
@@ -249,7 +240,7 @@ export default {
       margin-left: 8rpx;
     }
   }
-  .explan-address {
+  .explain-address {
     font-size: 24rpx;
     color: #999999;
   }

src/PageMine/orderModules/index.vue

@@ -7,7 +7,12 @@
     </u-sticky>
 
     <view class="order-box">
-      <view class="order-item" v-for="(item, index) of 10" :key="index">
+      <view
+        class="order-item"
+        v-for="(item, index) of 10"
+        :key="index"
+        @click="$Router.push('/PageMine/orderDetail/index')"
+      >
         <view class="item-top">
           <view class="top-left">
             <image src="@/static/home/icon_home_detail_shop.png" class="img"></image>
@@ -21,7 +26,9 @@
             <image src="@/static/QR57a.jpg" class="img"></image>
           </view>
           <view class="item-right">
-            <view class="right-top"> 38号轮胎38号轮胎38号轮胎38号轮胎38号轮号轮号轮胎 </view>
+            <view class="right-top">
+              38号轮胎38号轮胎38号轮胎38号轮胎38号轮号轮号轮胎
+            </view>
             <view class="right-bottom">
               <view class="bottom-left"> ¥20.00 </view>
               <view class="bottom-right"> X1 </view>
@@ -143,9 +150,9 @@ export default {
   },
   methods: {
     handleEvaluate() {
-      console.log(1111111);
       uni.navigateTo({
         url: `/PageMine/gotoEvaluate/index`,
+        // url: `/PageMine/orderComment/index`,
       });
     },
   },

src/PageMine/orderReserve/index.vue

@@ -1,10 +1,12 @@
 <template>
   <view class="container">
+    <page-navbar bgColor="#fff" title="在线预约"></page-navbar>
+
     <view class="container-box">
       <view class="title">汽车美容</view>
-      <view class="item-box" v-for="(item, index) of 3" :key="index">
+      <view class="item-box" v-for="(item, index) of 2" :key="index">
         <view class="item-left">
-          <image src="@/static/QR57a.jpg" class="img"></image>
+          <image src="/static/img.jpg" class="img"></image>
         </view>
         <view class="item-right">
           <view class="right1">水洗轿车</view>
@@ -18,19 +20,31 @@
       <view class="input-item">
         <view class="item-top">联系方式</view>
         <view class="item-bottom">
-          <u--input placeholder="请输入联系方式" border="surround" v-model="value"></u--input>
+          <u--input
+            placeholder="请输入联系方式"
+            border="surround"
+            v-model="value"
+          ></u--input>
         </view>
       </view>
       <view class="input-item">
         <view class="item-top">预约时间</view>
         <view class="item-bottom">
-          <u--input placeholder="请输入联系方式" border="surround" v-model="value"></u--input>
+          <u--input
+            placeholder="请输入联系方式"
+            border="surround"
+            v-model="value"
+          ></u--input>
         </view>
       </view>
       <view class="input-item">
         <view class="item-top">备注</view>
         <view class="item-bottom">
-          <u--input placeholder="请输入备注信息" border="surround" v-model="value"></u--input>
+          <u--input
+            placeholder="请输入备注信息"
+            border="surround"
+            v-model="value"
+          ></u--input>
         </view>
       </view>
     </view>
@@ -49,7 +63,7 @@ export default {
     // 立即预约
     handlerReserve() {
       uni.navigateTo({
-        url: '/PageMine/orderModules/orderReserveSuccess',
+        url: '/PageMine/reserveSuccess/index',
       });
     },
   },

src/PageMine/reserveSuccess/index.vue

@@ -1,11 +1,13 @@
 <template>
   <view class="container">
-    <view class="back-icon">
+    <page-navbar bgColor="#fff" title="预约成功"></page-navbar>
+
+    <!-- <view class="back-icon">
       <u-icon name="arrow-left" color="#000" size="16" @click="handlerBack"></u-icon>
-    </view>
+    </view> -->
     <view class="success-icon-box">
       <view class="icon-img-box">
-        <image src="@/static/mine/icon_mine_success.png" class="img"></image>
+        <image src="/static/mine/icon_mine_success.png" class="img"></image>
       </view>
       <view class="icon-type">预约成功</view>
       <view class="icon-explan">商家将为您预留30分钟预约，请您按时到店。</view>
@@ -14,7 +16,7 @@
       <view class="title">汽车美容</view>
       <view class="item-box" v-for="(item, index) of 3" :key="index">
         <view class="item-left">
-          <image src="@/static/QR57a.jpg" class="img"></image>
+          <image src="/static/img.jpg" class="img"></image>
         </view>
         <view class="item-right">
           <view class="right1">水洗轿车</view>

src/pages.json

@@ -147,7 +147,7 @@
         {
           "path": "dynamicDetail/index",
           "style": {
-            "navigationBarTitleText": "动态详情"
+            "navigationStyle": "custom"
           }
         }
       ]
@@ -199,28 +199,21 @@
         {
           "path": "orderDetail/index",
           "style": {
-            "navigationBarTitleText": "订单详情"
+            "navigationStyle": "custom"
           }
         },
         {
           "path": "orderReserve/index",
           "style": {
-            "navigationBarTitleText": "订单预约"
+            "navigationStyle": "custom"
           }
         },
         {
           "path": "reserveSuccess/index",
           "style": {
-            "navigationBarTitleText": "预约成功",
             "navigationStyle": "custom"
           }
         },
-        {
-          "path": "orderComment/index",
-          "style": {
-            "navigationBarTitleText": "订单评价"
-          }
-        },
         {
           "path": "favourite/index",
           "style": {

src/pages/community/index.vue

@@ -26,7 +26,10 @@
 
     <view class="center-box">
       <view class="item-box" v-for="(item, index) of initList" :key="index">
-        <view class="item-top">
+        <view
+          class="item-top"
+          @click="$Router.push('/pagesCommunity/dynamicDetail/index')"
+        >
           <view class="top-left">
             <u-avatar :src="item.userDTO.avatar" size="45" />
           </view>