增加订单列表页面

src/pages.json

@@ -43,6 +43,12 @@
 				"navigationBarTitleText": "确认订单"
 			}
 		},
+		{
+			"path": "pages/order/order",
+			"style": {
+				"navigationBarTitleText": "我的订单"
+			}
+		},
 		{
 			"path": "pages/demand/demand",
 			"style": {

src/pages/order/order.vue

@@ -0,0 +1,99 @@
+<template>
+    <app-layout
+        headerBackgroundColor="#F6F6F6"
+        backgroundColor="#F6F6F6"
+        title="订单"
+        textColor="dark"
+    >
+        <view class="order-menu">
+            <view
+                class="menu-item"
+                :class="[tabIndex == 0 ? 'active' : '']"
+                @click="tabIndex = 0"
+            >
+                <text class="text">全部订单</text>
+            </view>
+            <view
+                class="menu-item"
+                :class="[tabIndex == 1 ? 'active' : '']"
+                @click="tabIndex = 1"
+            >
+                <text class="text">退款记录</text>
+            </view>
+        </view>
+        <view class="order-list-container">
+            <swiper
+                class="list-container"
+                :current="tabIndex"
+                :duration="300"
+                @change="changeTab"
+                :style="{ height: tabHeight + 'px' }"
+            >
+                <swiper-item>
+                    <view class="tab-item tab0">1</view>
+                </swiper-item>
+                <swiper-item>
+                    <view class="tab-item tab1">2</view>
+                </swiper-item>
+            </swiper>
+        </view>
+    </app-layout>
+</template>
+
+<script>
+import AppLayout from "@/components/layout/layout";
+export default {
+    name: "order",
+    data() {
+        return {
+            tabIndex: 0,
+        };
+    },
+    components: {
+        AppLayout,
+    },
+    onLoad() {},
+    onShow() {},
+    onReady() {},
+    onReachBottom() {},
+    onPullDownRefresh() {},
+    methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.order-menu {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #ffffff;
+    margin-bottom: 20rpx;
+    .menu-item {
+        width: 210rpx;
+        height: 115rpx;
+        box-sizing: border-box;
+        text-align: center;
+        .text {
+            font-size: 30rpx;
+            color: #999999;
+            line-height: 115rpx;
+        }
+    }
+    .menu-item.active {
+        border-bottom: 7rpx solid #8b9aeb;
+        .text {
+            font-weight: bold;
+            color: #8b9aeb;
+        }
+    }
+}
+.order-list-container {
+    width: 100%;
+    height: 500rpx;
+    background-color: #ffffff;
+    .list-container {
+        width: 100%;
+    }
+}
+</style>