no message

src/layout/layout-order-item/src/main.vue

@@ -1,10 +1,47 @@
 <template>
-
+  <section class="layout-order-item jCenter">
+    <header class="layout-order-header rowACenter">
+      <div>订单号：1255658899</div>
+      <div class="layout-order-margin">下单时间：2021-04-27 08:22</div>
+      <div class="flex-1"></div>
+      <div class="layout-order-status">待支付</div>
+    </header>
+    <footer class="rowACenter layout-order-footer">
+      <v-image radius="50%" class="layout-order-avatar"></v-image>
+      <section class="flex-1">
+        <div class="line-1 layout-order-label">小鱿鱼</div>
+        <aside class="rowACenter">
+          <div>服务：王者荣耀</div>
+          <div class="layout-order-margin rowACenter">
+            <span>38巧鱼币/局</span>
+            <icon type="close" class="layout-order-close"></icon>
+            <span>1</span>
+          </div>
+          <div class="layout-order-margin rowACenter">
+            <div>总：</div>
+            <div class="layout-order-price">38</div>
+            <img src="@/assets/images/currency.png" class="layout-order-currency" />
+          </div>
+        </aside>
+      </section>
+      <aside class="layout-order-group flex jEnd">
+        <div class="layout-order-button cursor-pointer center">联系陪玩</div>
+      </aside>
+    </footer>
+  </section>
 </template>
 
 <script>
+import {
+  vImage,
+  icon
+} from '$components';
 export default {
-  name: "layout-order-item"
+  name: "layout-order-item",
+  components:{
+    icon,
+    vImage
+  }
 }
 </script>
 

src/layout/layout-order-item/style.scss

@@ -0,0 +1,61 @@
+/* 外层模块 */
+.layout-order-item{
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgba(255,255,255,0.1);
+  margin-bottom: 10px;
+  padding: 10px;
+  font-size: 14px;
+  line-height: 16px;
+}
+/* 外层模块 */
+
+/* 头部 */
+.layout-order-margin{
+  margin-left: 47px;
+}
+.layout-order-status{
+  margin-right: 17px;
+}
+
+/* 头部 */
+
+/* 底部 */
+.layout-order-footer{
+  margin-top: 15px;
+}
+.layout-order-label{
+  margin-bottom: 10px;
+}
+.layout-order-avatar{
+  @include square(40px);
+  margin-right: 7px;
+}
+.layout-order-close{
+  margin-left: 4px;
+  position: relative;
+  top: 1px;
+  font-size: 12px;
+  transform: scale(0.7);
+}
+.layout-order-price{
+  font-size: 18px;
+  line-height: 16px;
+  color: #F6E37C;
+}
+.layout-order-currency{
+  @include square(17px);
+  margin-left: 5px;
+}
+.layout-order-group{
+  height: 100%;
+}
+.layout-order-button{
+  width: 72px;
+  height: 26px;
+  border-radius: 13px;
+  background: $main-linear;
+  font-size: 14px;
+  line-height: 16px;
+}
+/* 底部 */

src/layout/layout-order/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="screen layout-order">
-
+    <layout-order-item></layout-order-item>
 <!--    <flat-list></flat-list>-->
   </section>
 </template>

src/mixins/order.ts

@@ -0,0 +1,9 @@
+export default {
+
+    methods:{
+
+        
+
+    }
+
+}

src/popup/popup-personal/components/my-order/components/order-item/data/tab.ts

@@ -1,18 +1,24 @@
+import {OrderPayUseStatus} from "$utils/control/order/const/order";
+
 export default [
     {
         label:'全部订单',
-        slot:'1'
+        slot:'1',
+        status: OrderPayUseStatus.all
     },
     {
         label:'待接单',
-        slot:'2'
+        slot:'2',
+        status: OrderPayUseStatus.have
     },
     {
         label:'进行中',
-        slot:'3'
+        slot:'3',
+        status: OrderPayUseStatus.orders
     },
     {
         label:'已完成',
-        slot:'4'
+        slot:'4',
+        status: OrderPayUseStatus.completed
     }
 ]

src/popup/popup-personal/components/my-order/components/order-item/src/main.vue

@@ -31,6 +31,7 @@
     >
       <layout-order
         :key="'layout-order-'+index"
+        :ref="item.status"
       ></layout-order>
     </template>
   </tab>

src/utils/control/order/const/order.ts

@@ -1,3 +1,18 @@
+enum OrderPayUseStatus {
+
+    // 全部订单
+    all='all',
+
+    // 待接单
+    orders='orders',
+
+    // 进行中
+    have='have',
+
+    // 已完成
+    completed='completed'
+}
+
 enum OrderPayStatus {
 
     // 待支付
@@ -51,5 +66,6 @@ enum OrderButton {
 export {
     OrderPayStatus,
     OrderStatus,
-    OrderButton
+    OrderButton,
+    OrderPayUseStatus
 }