✨ feat(order):订单静态页面

src/pages/tabbar/order/index.vue

@@ -5,28 +5,79 @@
 -->
 <template>
   <view>
-    <view style="background-color: #fff; padding: 15rpx">
-      <u-tabs
-        :list="list1"
-        lineWidth="30"
-        lineColor="$uni-bg-color-primary"
-        :activeStyle="{
-          color: '#000',
-          fontWeight: 'bold',
-          fontSize: '32rpx',
-          transform: 'scale(1.05)',
-          marginBottom: '15rpx',
-        }"
-        :inactiveStyle="{
-          color: '#333',
-          fontSize: '30rpx',
-          transform: 'scale(1)',
-          marginBottom: '15rpx',
-        }"
-        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
-      ></u-tabs>
+    <view class="order">
+      <view style="background-color: #fff; padding: 15rpx">
+        <u-tabs
+          :list="list1"
+          lineWidth="30"
+          lineColor="$uni-bg-color-primary"
+          :activeStyle="{
+            color: '#000',
+            fontWeight: 'bold',
+            fontSize: '32rpx',
+            transform: 'scale(1.05)',
+            marginBottom: '15rpx',
+          }"
+          :inactiveStyle="{
+            color: '#333',
+            fontSize: '30rpx',
+            transform: 'scale(1)',
+            marginBottom: '15rpx',
+          }"
+          itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
+        ></u-tabs>
+      </view>
+
+      <view class="order__info" v-for="index in 4" :key="index">
+        <view class="order__info--phone">
+          <view>
+            <view style="font-size: 35rpx; margin-bottom: 20rpx">
+              182***4342
+              <text class="tipInfo" style="margin-left: 10rpx">(预留手机)</text>
+            </view>
+            <view class="tipInfo">近90天第16次下单</view>
+          </view>
+          <u-icon name="phone" color="#2979ff" size="28"></u-icon>
+        </view>
+
+        <view class="order__info--pay">
+          <text>顾客待付款</text>
+          <view class="service">
+            <image
+              slot="icon"
+              src="@/static/QR57a.jpg"
+              style="width: 200rpx; height: 200rpx"
+            />
+            <view class="description">
+              <view class="description--title">汽车维修与保养</view>
+              <view class="tipInfo">专业维修保界</view>
+              <view class="description--text">服务描述……</view>
+            </view>
+          </view>
+        </view>
+
+        <view class="order__info--compute">
+          <view class="computeFlex">
+            <view>发票信息</view>
+            <view class="tipInfo">不需要</view>
+          </view>
+          <view class="computeFlex">
+            <view>技术服务费</view>
+            <view class="tipInfo">￥15</view>
+          </view>
+          <view class="computeFlex">
+            <view>本单预计收入</view>
+            <view class="tipInfo">￥723.7</view>
+          </view>
+        </view>
+
+        <view class="order__info--tip">
+          <view class="tipInfo"> 订单编号：12232964103521日</view>
+          <view class="tipInfo"> 交易快照：发生争议时，可作为判断依据</view>
+          <view class="tipInfo"> 下单时间：12-0318：03</view>
+        </view>
+      </view>
     </view>
-    <view class="order">11111111</view>
   </view>
 </template>
 
@@ -35,21 +86,11 @@ export default {
   data() {
     return {
       list1: [
-        {
-          name: '全部',
-        },
-        {
-          name: '进行中',
-        },
-        {
-          name: '预约中',
-        },
-        {
-          name: '退款',
-        },
-        {
-          name: '已完成',
-        },
+        { id: '1', name: '全部' },
+        { id: '2', name: '进行中' },
+        { id: '3', name: '预约中' },
+        { id: '4', name: '退款' },
+        { id: '5', name: '已完成' },
       ],
     };
   },
@@ -60,6 +101,62 @@ export default {
 .order {
   min-height: 100vh;
   background-color: $uni-bg-color-page;
-  padding: $uni-bg-padding-sm;
+  &__info {
+    margin: 20rpx 0;
+    background-color: $uni-bg-color;
+    padding: $uni-bg-padding-sm;
+    &--phone {
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: 20rpx;
+      border-bottom: 2rpx solid #ececec;
+    }
+
+    &--pay {
+      margin: 20rpx 0;
+      > text {
+        font-size: 36rpx;
+        color: #333;
+      }
+
+      .service {
+        display: flex;
+        margin-top: 20rpx;
+        .description {
+          margin-left: 20rpx;
+          &--title {
+            font-size: 34rpx;
+            font-weight: 700;
+            margin-bottom: 10rpx;
+          }
+
+          &--text {
+            font-size: 30rpx;
+            color: #333;
+          }
+        }
+      }
+    }
+
+    &--compute {
+      margin-top: 40rpx;
+      padding-bottom: 20rpx;
+      border-bottom: 2rpx solid #ececec;
+      .computeFlex {
+        margin-bottom: 20rpx;
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+
+    &--tip {
+      margin-top: 30rpx;
+    }
+  }
+}
+
+.tipInfo {
+  font-size: 24rpx;
+  color: #666;
 }
 </style>