优化订单卡组件显示

hookehuyr
Commit 62f6d4c35de48180e19102afedf15925e0bc8c91 62f6d4c3 1 parent d69070fd
Showing 2 changed files with 174 additions and 47 deletions
src/components/orderCard.vue
src/pages/my/index.vue
--- a/src/components/orderCard.vue
View file @62f6d4c
+++ b/src/components/orderCard.vue
View file @62f6d4c
 <template>
   <view class="order-card-component">
-    <view style="padding: 0.5rem;">
+    <view class="order-card-header">
       <nut-row>
         <nut-col span="16">
           <view style="font-weight: bold; font-size: 34rpx;">家庭豪华连排三室套房</view>
           <view style="color: #7D7C7C; font-size: 24rpx;">两室  宜住3人 </view>
         </nut-col>
         <nut-col span="8">
-          <image style="width: 100%; height: 3rem; border-radius: 10rpx;" mode="aspectFill" src="https://img.yzcdn.cn/vant/cat.jpeg" />
+          <image mode="aspectFill" src="https://img.yzcdn.cn/vant/cat.jpeg" />
         </nut-col>
       </nut-row>
     </view>
-    <view style="padding: 0 0.5rem;"><nut-tag color="#FA685D">待支付</nut-tag></view>
+    <view class="order-card-status">
-    <view style="padding: 0.5rem;">
+      <nut-tag :color="STATUS_COLOR[props.data.status]">{{ STATUS_TEXT[props.data.status] }}</nut-tag>
+    </view>
+    <view class="order-card-price">
       <nut-row>
         <nut-col span="18">
-          <view style="height: 2rem; display: flex; align-items: center;">
+          <view class="order-card-price-text">
-            <text style="color: #EB2E2E; font-size: 1.3rem; font-weight: bold;">￥980</text>
+            <text class="left">￥980</text>
-            <text style="color: #7D7C7C; text-decoration: line-through; font-size: 0.85rem; margin-left: 5px;">￥1280</text>
+            <text class="right">￥1280</text>
           </view>
         </nut-col>
-        <nut-col span="6" style="text-align: right;">
+        <nut-col span="6" class="order-card-price-num">
-          <text style="font-size: 28rpx;">x1</text>
+          <text>x1</text>
         </nut-col>
       </nut-row>
     </view>
     <view class="calendar-select-page">
-      <nut-row gutter="">
+      <nut-row gutter="10">
         <nut-col span="9">
-          <view style="color: #7D7C7C; font-size: 0.8rem;">入住日期</view>
+          <view class="check-in-text">入住日期</view>
-          <view style="color: #7D7C7C; font-size: 0.85rem; font-weight: bold;">2023.12.07 星期四</view>
+          <view class="check-in-info">2023.12.07 星期四</view>
         </nut-col>
-        <nut-col span="5" style="padding: 0 10rpx;">
+        <nut-col span="5" class="book-days">
-          <view style="color: #7D7C7C; margin-top: 15%; font-size: 0.8rem; text-align: center; background-color: #fff; padding: 0.25rem 0; border-radius: 0.5rem;">
+          <view class="book-days-text">共1晚</view>
-            共1晚
-          </view>
         </nut-col>
         <nut-col span="9" style="margin-left: 10rpx;">
-          <view style="color: #7D7C7C; font-size: 0.8rem;">退房日期</view>
+          <view class="check-in-text">退房日期</view>
-          <view style="color: #7D7C7C; font-size: 0.85rem; font-weight: bold;">2023.12.08 星期五</view>
+          <view class="check-in-info">2023.12.08 星期五</view>
         </nut-col>
       </nut-row>
     </view>
-    <view style="padding: 0.5rem; padding-bottom: 0;">
+    <view class="order-card-control">
       <nut-row>
         <nut-col span="6">
-          <view @tap="showOrderInfo('id')" style="display: flex; align-items: center; margin: 20rpx 0;height: 60rpx;">
+          <view class="order-info" @tap="showOrderInfo('id')">
-            <text style="font-size: 26rpx; color: #7D7C7C;">入住信息</text>&nbsp;
+            <text>入住信息</text>&nbsp;
             <IconFont v-if="show_info" name="rect-up" size="12" color="#7D7C7C"></IconFont>
             <IconFont v-else name="rect-down" size="12" color="#7D7C7C"></IconFont>
           </view>
         </nut-col>
         <nut-col span="18">
-          <view style="display: flex; align-items: center;height: 100rpx; justify-content: flex-end;">
+          <view v-if="props.data.status !== 'cancel'" class="order-control">
             <nut-button @tap="cancelOrder('id')" plain color="#6A4925" size="small">取消订单</nut-button>&nbsp;
-            <nut-button @tap="payOrder('id')" color="#6A4925" size="small">立即支付</nut-button>
+            <nut-button v-if="props.data.status !== 'enable'" @tap="payOrder('id')" color="#6A4925" size="small">立即支付</nut-button>
           </view>
         </nut-col>
       </nut-row>
     </view>
-    <view style="display: flex; justify-content: flex-end; font-size: 23rpx; margin-bottom: 1rem; margin-right: 1rem;">
+    <view class="order-remain-time">
       <text>支付剩余时间</text>&nbsp;
-      <text style="font-size: 23rpx; color: red;">{{ formatTime(remain_time) }}</text>
+      <text style="font-size: 23rpx; color: red;">
+        {{ formatTime(remain_time) }}
+      </text>
     </view>
-    <view v-if="show_info">
+    <view class="order-info-detail" v-if="show_info">
-      <view style="border-bottom: 1px dashed #979797; padding: 0.5rem;">
+      <view class="order-info">
         <nut-row>
           <nut-col span="12">
-            <view style="color: #7D7C7C; font-size: 0.85rem;">入住时间</view>
+            <view class="check-in-text">入住时间</view>
           </nut-col>
           <nut-col span="12">
-            <view style="color: #7D7C7C; font-size: 0.85rem; text-align: right;">12月7日 14:00后</view>
+            <view class="check-in-info">12月7日 14:00后</view>
           </nut-col>
         </nut-row>
         <nut-row>
           <nut-col span="12">
-            <view style="color: #7D7C7C; font-size: 0.85rem; margin: 0.25rem 0;">退房日期</view>
+            <view class="check-out-text">退房日期</view>
           </nut-col>
           <nut-col span="12">
-            <view style="color: #7D7C7C; font-size: 0.85rem; text-align: right; margin: 0.25rem 0;">12月8日 12:00前</view>
+            <view class="check-out-info">12月8日 12:00前</view>
           </nut-col>
         </nut-row>
         <nut-row>
           <nut-col span="12">
-            <view style="color: #7D7C7C; font-size: 0.85rem;">早餐</view>
+            <view class="breakfast-text">早餐</view>
           </nut-col>
           <nut-col span="12">
-            <view style="color: #7D7C7C; font-size: 0.85rem; text-align: right;">3份</view>
+            <view class="breakfast-num">3份</view>
           </nut-col>
         </nut-row>
-        <view style="font-size: 0.85rem; margin-top: 0.25rem;">
+        <view class="order-info-detail-tip">
-          <view style="color: red; margin: auto; display: inline-block;">*</view> <view style="color: #7D7C7C; margin: auto; display: inline-block;">12月7日 20:00后未入住，订单将被取消</view>
+          <view>12月7日 20:00后未入住，订单将被取消</view>
         </view>
       </view>
-      <view style="padding: 0.5rem; font-size: 28rpx; color: #7D7C7C;">
+      <view class="order-detail">
-        <nut-row style="margin-bottom: 10rpx;">
+        <nut-row class="wrapper">
           <nut-col span="6">联系人：</nut-col>
-          <nut-col span="18" style="text-align: right;">王二虎</nut-col>
+          <nut-col span="18" class="right">王二虎</nut-col>
         </nut-row>
-        <nut-row style="margin-bottom: 10rpx;">
+        <nut-row class="wrapper">
           <nut-col span="6">联系电话：</nut-col>
-          <nut-col span="18" style="text-align: right;">18996999786</nut-col>
+          <nut-col span="18" class="right">18996999786</nut-col>
         </nut-row>
-        <nut-row style="margin-bottom: 10rpx;">
+        <nut-row class="wrapper">
           <nut-col span="6">备注：</nut-col>
-          <nut-col span="18" style="text-align: right;"></nut-col>
+          <nut-col span="18" class="right"></nut-col>
         </nut-row>
-        <nut-row style="margin-bottom: 10rpx;">
+        <nut-row class="wrapper">
           <nut-col span="6">下单时间：</nut-col>
-          <nut-col span="18" style="text-align: right;">2023-12-06</nut-col>
+          <nut-col span="18" class="right">2023-12-06</nut-col>
         </nut-row>
-        <nut-row style="margin-bottom: 10rpx;">
+        <nut-row class="wrapper">
           <nut-col span="6">订单号：</nut-col>
-          <nut-col span="18" style="text-align: right;">20231206</nut-col>
+          <nut-col span="18" class="right">20231206</nut-col>
         </nut-row>
       </view>
     </view>
@@ -124,6 +126,18 @@ import { ref, onMounted, onUnmounted } from 'vue'
 import Taro from '@tarojs/taro'
 import { IconFont } from '@nutui/icons-vue-taro';
+const STATUS_COLOR = {
+  'cancel': '#CECECE',
+  'no-pay': '#D5842D',
+  'enable': '#6A4925',
+}
+
+const STATUS_TEXT = {
+  'cancel': '已取消',
+  'enable': '待入住',
+  'no-pay': '待支付',
+}
+
 /**
  * 格式化时间
  * @param {*} seconds
@@ -214,12 +228,122 @@ onUnmounted(() => {
   border: 1px solid #f9f9f9;
   border-radius: 0.5rem;
   overflow: hidden;
+  .order-card-header {
+    padding: 0.5rem;
+    image {
+      width: 100%; height: 3rem; border-radius: 10rpx;
+    }
+  }
+  .order-card-status {
+    padding: 0 0.5rem;
+  }
+  .order-card-price {
+    padding: 0.5rem;
+    .order-card-price-text {
+      height: 2rem;
+      display: flex;
+      align-items: center;
+      .left {
+        color: #EB2E2E;
+        font-size: 1.3rem;
+        font-weight: bold;
+      }
+      .right {
+        color: #7D7C7C;
+        text-decoration: line-through;
+        font-size: 0.85rem;
+        margin-left: 5px;
+      }
+    }
+    .order-card-price-num {
+      text-align: right;
+      text {
+        font-size: 28rpx;
+      }
+    }
+  }
   .calendar-select-page {
     margin: 0 0.5rem;
     background-color: #F6ECE1;
     border-radius: 10rpx;
     padding: 1rem 0;
     padding-left: 0.5rem;
+    .check-in-text {
+      color: #7D7C7C; font-size: 0.8rem;
+    }
+    .check-in-info{
+      color: #7D7C7C; font-size: 0.85rem; font-weight: bold;
+    }
+    .book-days {
+      padding: 0 10rpx;
+      .book-days-text {
+        color: #7D7C7C; margin-top: 15%; font-size: 0.8rem; text-align: center; background-color: #fff; padding: 0.25rem 0; border-radius: 0.5rem;
+      }
+    }
+  }
+  .order-card-control {
+    padding: 0.5rem;
+    padding-bottom: 0;
+    .order-info {
+      display: flex; align-items: center; margin: 20rpx 0;height: 60rpx;
+      text {
+        font-size: 26rpx; color: #7D7C7C;
+      }
+    }
+    .order-control {
+      display: flex; align-items: center;height: 100rpx; justify-content: flex-end;
+    }
+  }
+  .order-remain-time {
+    display: flex;
+    justify-content: flex-end;
+    font-size: 23rpx;
+    margin-bottom: 1rem;
+    margin-right: 1rem;
+  }
+  .order-info-detail {
+    .order-info {
+      border-bottom: 1px dashed #979797; padding: 0.5rem;
+      .check-in-text {
+        color: #7D7C7C; font-size: 0.85rem;
+      }
+      .check-in-info {
+        color: #7D7C7C; font-size: 0.85rem; text-align: right;
+      }
+      .check-out-text {
+        color: #7D7C7C; font-size: 0.85rem; margin: 0.25rem 0;
+      }
+      .check-out-info {
+        color: #7D7C7C; font-size: 0.85rem; text-align: right; margin: 0.25rem 0;
+      }
+      .breakfast-text {
+        color: #7D7C7C; font-size: 0.85rem;
+      }
+      .breakfast-num {
+        color: #7D7C7C; font-size: 0.85rem; text-align: right;
+      }
+      .order-info-detail-tip {
+        font-size: 0.85rem; margin-top: 0.25rem;
+        &::before {
+          content: '*';
+          color: red;
+          margin: auto;
+          display: inline-block;
+        }
+        view {
+          color: #7D7C7C; margin: auto; display: inline-block;
+        }
+      }
+    }
+    .order-detail {
+      padding: 0.5rem; font-size: 28rpx; color: #7D7C7C;
+      .wrapper {
+        margin-bottom: 10rpx;
+        .right {
+          text-align: right;
+        }
+      }
+    }
   }
 }
 </style>
--- a/src/pages/my/index.vue
View file @62f6d4c
+++ b/src/pages/my/index.vue
View file @62f6d4c
 <!--
  * @Date: 2023-12-13 11:13:13
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-20 16:16:11
+ * @LastEditTime: 2023-12-20 17:02:35
  * @FilePath: /meihuaApp/src/pages/my/index.vue
  * @Description: 文件描述
 -->
@@ -77,6 +77,7 @@ const orderList = ref([
     time: '2023-12-13 11:13:13',
     price: 1200,
     remain_time: 10,
+    status: 'no-pay',
   },
   {
     id: 2,
@@ -86,6 +87,7 @@ const orderList = ref([
     time: '2023-12-13 11:13:13',
     price: 1200,
     remain_time: 100,
+    status: 'enable',
   },
   {
     id: 3,
@@ -95,6 +97,7 @@ const orderList = ref([
     time: '2023-12-13 11:13:13',
     price: 1200,
     remain_time: 100,
+    status: 'cancel',
   },
 ])