完成部分订单列表

src/components/order/order-item.vue

@@ -0,0 +1,21 @@
+<template>
+    <view class="order-item">
+        
+    </view>
+</template>
+
+<script>
+export default {
+    name: "order-order-item",
+    data() {
+        return {};
+    },
+    components: {},
+    created() {},
+    mounted() {},
+    destroyed() {},
+    methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>

src/pages/order/order.vue

@@ -24,7 +24,42 @@
                         <view class="tab-item" :class="['tab' + tabIdx]">
                             <view class="order-list">
                                 <block v-for="(item, index) in tabItem.list" :key="index">
-                                    <view class="order-item" @click="$utils.toPage('/pages/order/detail?id=' + item.id)"> </view>
+                                    <view class="order-item" @click="$utils.toPage('/pages/order/detail?id=' + item.id)">
+                                        <view class="order-header">
+                                            <view class="state-text">
+                                                <text>等待师傅报价</text>
+                                            </view>
+                                            <view class="more">
+                                                <text class="text">详情</text>
+                                                <text class="iconfont icon-jinru"></text>
+                                            </view>
+                                        </view>
+                                        <view class="order-body">
+                                            <view class="row">
+                                                <text class="title">订单编号：</text>
+                                                <text class="text">{{ item.orderId }}</text>
+                                                <text class="copy" @click.stop="copyOrderId(item.orderId)">复制</text>
+                                            </view>
+                                            <view class="row">
+                                                <text class="title">服务分类：</text>
+                                                <text class="text">{{ item.cate }}</text>
+                                            </view>
+                                            <view class="row limit-line clamp-1">
+                                                <text class="title">需求内容：</text>
+                                                <text class="text">{{ item.explain }}</text>
+                                            </view>
+                                            <view class="row">
+                                                <text class="title">下单时间：</text>
+                                                <text class="text">{{ item.createTime }}</text>
+                                            </view>
+                                            <view class="row">
+                                                <text class="title">服务时间：</text>
+                                                <text class="text">{{ item.serviceTime }}</text>
+                                            </view>
+                                            <view class="worker-list"></view>
+                                        </view>
+                                        <view class="order-footer"></view>
+                                    </view>
                                 </block>
                             </view>
                         </view>
@@ -150,6 +185,18 @@ export default {
             });
         },
         loadData() {},
+        copyOrderId(orderId) {
+            const t = this;
+            uni.setClipboardData({
+                data: orderId,
+                success(result) {
+                    t.$utils.toast("内容已复制");
+                },
+                fail(error) {
+                    t.$utils.toast("复制失败");
+                },
+            });
+        },
     },
 };
 </script>
@@ -183,7 +230,6 @@ export default {
 }
 .order-list-group {
     width: 100%;
-    background-color: #ffffff;
     touch-action: none;
     .list-tab-list {
         width: 100%;
@@ -192,6 +238,56 @@ export default {
 .order-item {
     width: 100%;
     padding: 30rpx;
+    box-sizing: border-box;
     background-color: #ffffff;
+    margin-bottom: 30rpx;
+    .order-header {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        line-height: 32rpx;
+        .state-text {
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #000000;
+        }
+        .more {
+            font-size: 26rpx;
+            color: #666666;
+            display: flex;
+            align-items: center;
+        }
+        .iconfont {
+            color: #a7a7a7;
+            font-size: 32rpx;
+            margin-left: 8rpx;
+        }
+    }
+}
+.order-body {
+    width: 700rpx;
+    border-bottom: 2rpx solid #e8e7e7;
+    padding: 35rpx 0 18rpx 0;
+    .row {
+        position: relative;
+        width: 100%;
+        font-size: 28rpx;
+        line-height: 30rpx;
+        margin-bottom: 22rpx;
+        .title {
+            color: #999999;
+        }
+        .text {
+            color: #000000;
+        }
+        .copy {
+            color: #8194f2;
+            margin-left: 24rpx;
+        }
+    }
+    .row:last-child {
+        margin-bottom: 0;
+    }
 }
 </style>