From 59946ce0ac15c3c133539594243811af9afbf888 Mon Sep 17 00:00:00 2001
From: wangkesi <wangkesi@3ncto.com>
Date: Mon, 15 Oct 2018 21:53:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/order-item.vue | 183 +++++++++++++++
 src/router/index.js           |  10 +
 src/view/order-check.vue      | 321 +++++++++++++++++++++++++++
 src/view/order-detail.vue     | 404 ++++++++++++++++++++++++++++++++++
 src/view/order-list.vue       | 327 +++------------------------
 5 files changed, 951 insertions(+), 294 deletions(-)
 create mode 100644 src/components/order-item.vue
 create mode 100644 src/view/order-check.vue
 create mode 100644 src/view/order-detail.vue

diff --git a/src/components/order-item.vue b/src/components/order-item.vue
new file mode 100644
index 0000000..12d9bc4
--- /dev/null
+++ b/src/components/order-item.vue
@@ -0,0 +1,183 @@
+<template>
+	<div class="item">
+		<div class="item-top">
+			<div class="item-top-address">广州站</div>
+			<div class="item-top-state">已取消</div>
+		</div>
+		<div class="item-main">
+			<img src="">
+			<div class="item-main-text">
+				<div class="name">5A至臻家·体验卡</div>
+				<div class="tips">104次×4小时全屋高端保洁</div>
+				<div class="tag-box">
+					<i class="tag">新人优惠</i>
+					<i class="tag">新人优惠</i>
+				</div>
+				<div class="price-box">
+					<div class="box-left">¥18999</div>
+					<div class="box-right">
+						<div class="box-right-text">
+							实付：
+						</div>
+						¥18999
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+    data() {
+        return {};
+    },
+    props: {}
+};
+</script>
+<style lang="scss" scoped>
+.item {
+    background-color: white;
+    width: 100%;
+    color: #333;
+    margin-bottom: 0.2rem;
+    .item-top {
+        height: 0.65rem;
+        border-bottom: 0.01rem solid #e5e5e5;
+        box-sizing: border-box;
+        font-size: 0.3rem;
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        padding: 0 0.36rem 0 0.3rem;
+        line-height: 1;
+        align-items: center;
+        .item-top-address {
+        }
+        .item-top-state {
+            color: #999;
+            font-size: 0.28rem;
+        }
+    }
+    .item-main {
+        display: flex;
+        height: 2.1rem;
+        width: 100%;
+        padding-top: 0.26rem;
+        box-sizing: border-box;
+        padding-right: 0.38rem;
+        padding-left: 0.29rem;
+        img {
+            width: 1.58rem;
+            height: 1.58rem;
+            margin-right: 0.16rem;
+        }
+        .item-main-text {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            padding-top: 0.03rem;
+            .name {
+                font-size: 0.3rem;
+                overflow: hidden;
+                line-height: 1.1;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 1;
+                word-wrap: break-word;
+                white-space: normal;
+                word-break: break-all;
+                margin-bottom: 0.1rem;
+            }
+            .tips {
+                font-size: 0.24rem;
+                color: #999;
+                overflow: hidden;
+                line-height: 1.1;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 1;
+                word-wrap: break-word;
+                white-space: normal;
+                margin-bottom: 0.1rem;
+                word-break: break-all;
+            }
+            .tag-box {
+                font-size: 0.2rem;
+                display: flex;
+                height: 0.3rem;
+                overflow: hidden;
+                margin-bottom: 0.12rem;
+                .tag {
+                    flex-shrink: 1;
+                    height: 100%;
+                    font-style: normal;
+                    background: #ffe2c7;
+                    padding: 0rem 0.1rem;
+                    line-height: 0.28rem;
+                    color: #ff8a1d;
+                    border-radius: 0.15rem;
+                    // margin-bottom: 0.1rem;
+                    flex-shrink: 1;
+                    overflow: hidden;
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 1;
+                    line-height: 0.3rem;
+                    word-wrap: break-word;
+                    white-space: normal;
+                    word-break: break-all;
+                }
+            }
+            .price-box {
+                width: 100%;
+                display: flex;
+                align-items: flex-end;
+                line-height: 1;
+                justify-content: space-between;
+                .box-left {
+                    font-size: 0.3rem;
+                    color: #999;
+                }
+                .box-right {
+                    font-size: 0.34rem;
+                    display: flex;
+                    justify-content: flex-end;
+                    .box-right-text {
+                        color: #999;
+                    }
+                }
+            }
+        }
+    }
+    .gift-box {
+        width: 100%;
+        border-top: 0.01rem solid #f9f9f9;
+        padding: 0.2rem;
+        display: flex;
+        box-sizing: border-box;
+        flex-direction: column;
+        .gift-item {
+            display: flex;
+            width: 100%;
+            align-items: center;
+            font-size: 0.24rem;
+            line-height: 1.2;
+            color: #666;
+            .item-text {
+                flex-shrink: 0;
+                flex-grow: 0;
+            }
+            .gift-item-main {
+                flex-shrink: 1;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 1;
+                overflow: hidden;
+                word-wrap: break-word;
+                white-space: normal;
+                word-break: break-all;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index e5f4326..c8f1f0c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -70,6 +70,16 @@ let router = new Router({
             path: "/",
             redirect: "/home"
         },
+        {
+            path: "/order-check",
+            name: "orderCheck",
+            component: resolve => require(["@/view/order-check.vue"], resolve)
+        },
+        {
+            path: "/order-detail",
+            name: "orderCheck",
+            component: resolve => require(["@/view/order-detail.vue"], resolve)
+        },
         {
             path: "/order-list",
             name: "orderList",
diff --git a/src/view/order-check.vue b/src/view/order-check.vue
new file mode 100644
index 0000000..f737eb4
--- /dev/null
+++ b/src/view/order-check.vue
@@ -0,0 +1,321 @@
+<template>
+	<div class="order-check-whole">
+		<back-header>
+			订单确认
+		</back-header>
+		<div class="top">
+			<div class="goods-container">
+				<img src="">
+				<div class="goods-main-container">
+					<div class="name">高端保洁铂金月卡</div>
+					<div class="box">
+						<div class="box-text">1次×4小时高端保洁 1次×4小时高端保洁 1次×4小时高端保洁 1次×4小时高端保洁 1次×4小时高端保洁 </div>
+						<div class="box-price">¥39911111</div>
+					</div>
+				</div>
+			</div>
+			<div class="gift-container">
+				<div class="gift-item">
+					<div class="text">【赠品】</div>
+					<div class="name">高端保洁铂金月卡  高端保洁铂金月卡 高端保洁铂金月卡 高端保洁铂金月卡 高端保洁铂金月卡 高端保洁铂金月卡</div>
+					<div class="num">X1</div>
+				</div>
+			</div>
+		</div>
+		<div class="service-area">
+			<div class="title">
+				<img src="../assets/images/order-list/location.png">
+				服务区域：
+			</div>
+			<div class="area-text">
+				广州市（天河区、海珠区、番禺区、白云区、越秀区、荔湾区、黄埔区）；佛山市（xxx区、xxx区、xxx区）
+			</div>
+		</div>
+		<div class="coupon-container">
+			<div class="coupon-left">
+				<div class="left-box">
+					<img src="../assets/images/order-list/location.png">
+					<div class="text">
+						优惠券：
+					</div>
+					<div class="name">新人专属券新人专属券新人专属券新人专属券</div>
+				</div>
+				<div class="price">-￥400</div>
+			</div>
+			<img class="icon" src="../assets/images/order-list/arrow.png">
+		</div>
+		<div class="message-container">
+			<div class="title">
+				<img src="../assets/images/order-list/location.png">
+				留言备注：
+			</div>
+			<textarea placeholder="为了更好地为您服务，请简单说明您家的格局面积与保洁史"></textarea>
+		</div>
+		<div class="pay-container">
+			<div class="text">支付方式</div>
+			<div class="pay">
+				<img src="">
+				微信支付
+			</div>
+		</div>
+		<div class="clause"></div>
+	</div>
+</template>
+<script>
+import backHeader from "../components/back-header.vue";
+export default {
+    data() {
+        return {};
+    },
+    components: {
+        "back-header": backHeader
+    },
+    methods: {
+        getData() {}
+    }
+};
+</script>
+<style lang="scss" scoped>
+.top {
+    margin-bottom: 0.18rem;
+}
+.goods-container {
+    width: 100%;
+    color: #333;
+    height: 1.6rem;
+    margin-top: 0.1rem;
+    background-color: white;
+    display: flex;
+    box-sizing: border-box;
+    padding: 0.16rem 0.37rem 0rem 0.22rem;
+    img {
+        width: 1.28rem;
+        height: 1.28rem;
+        margin-right: 0.33rem;
+    }
+    .goods-main-container {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        padding-top: 0.06rem;
+        .name {
+            line-height: 1.1;
+            font-size: 0.3rem;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+            word-wrap: break-word;
+            // margin-top: 0.1rem;
+            white-space: normal;
+            word-break: break-all;
+            margin-bottom: 0.15rem;
+        }
+        .box {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-end;
+            .box-text {
+                font-size: 0.24rem;
+                line-height: 1.1;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 1;
+                word-wrap: break-word;
+                white-space: normal;
+                word-break: break-all;
+                color: #999;
+                height: 0.24rem;
+                margin-right: 0.2rem;
+            }
+            .box-price {
+                line-height: 1;
+                font-weight: 400;
+                font-size: 0.38rem;
+                color: #333;
+            }
+        }
+    }
+}
+.gift-container {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0.2rem;
+    background-color: #fff;
+    border-top: 0.01rem solid rgba(243, 243, 243, 1);
+    display: flex;
+    flex-direction: column;
+    color: #666;
+    font-size: 0.24rem;
+    .gift-item {
+        display: flex;
+        line-height: 1.2;
+        align-items: center;
+        .text {
+            flex-shrink: 0;
+        }
+        .name {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+            word-wrap: break-word;
+            white-space: normal;
+            margin-right: 0.1rem;
+            word-break: break-all;
+        }
+        .num {
+            flex-shrink: 0;
+        }
+    }
+}
+.service-area {
+    padding: 0.36rem 0.2rem;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    color: #666;
+    margin-bottom: 0.1rem;
+    .title {
+        display: flex;
+        font-size: 0.3rem;
+        align-items: center;
+        line-height: 1;
+        margin-bottom: 0.2rem;
+        font-weight: normal;
+        img {
+            width: 0.32rem;
+            height: 0.3rem;
+            margin-right: 0.08rem;
+        }
+    }
+    .area-text {
+        padding-left: 0.4rem;
+        font-size: 0.26rem;
+    }
+}
+.coupon-container {
+    width: 100%;
+    height: 1rem;
+    display: flex;
+    align-items: center;
+    padding-left: 0.2rem;
+    font-size: 0.3rem;
+    line-height: 1.1;
+    background-color: #fff;
+    box-sizing: border-box;
+    justify-content: space-between;
+    margin-bottom: 0.1rem;
+    .coupon-left {
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-right: 0.43rem;
+        img {
+            flex-grow: 0;
+            width: 0.32rem;
+            flex-shrink: 0;
+            height: 0.3rem;
+            margin-right: 0.08rem;
+        }
+        .text {
+            flex-grow: 0;
+            flex-shrink: 0;
+            margin-right: 0.5rem;
+        }
+        .name {
+            flex-grow: 1;
+            // flex-shrink: 1;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            font-size: 0.28rem;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+            word-wrap: break-word;
+            white-space: normal;
+            // max-width: 3rem;
+            word-break: break-all;
+        }
+        .price {
+            color: #f42525;
+            flex-shrink: 0;
+            font-size: 0.34rem;
+        }
+    }
+    .left-box {
+        display: flex;
+        align-items: center;
+        flex-grow: 1;
+        margin-right: 0.2rem;
+    }
+    .icon {
+        width: 0.16rem;
+        margin-right: 0.37rem;
+        height: 0.27rem;
+    }
+}
+.message-container {
+    width: 100%;
+    background-color: #fff;
+    height: 2.48rem;
+    margin-bottom: 0.1rem;
+    padding: 0.36rem 0.3rem 0 0.2rem;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    color: #666;
+    .title {
+        display: flex;
+        font-size: 0.3rem;
+        align-items: center;
+        line-height: 1;
+        margin-bottom: 0.17rem;
+        font-weight: normal;
+        img {
+            width: 0.32rem;
+            height: 0.3rem;
+            margin-right: 0.08rem;
+        }
+    }
+    textarea {
+        border-style: none;
+        text-shadow: none;
+        -webkit-appearance: none;
+        -webkit-user-select: text;
+        outline-color: transparent;
+        font-family: "AvantGardGothEF-Book";
+        padding-left: 0.4rem;
+        height: 1.5rem;
+        box-shadow: none;
+        outline: none;
+        outline-style: none;
+        border: none;
+        background-color: white;
+    }
+}
+.pay-container {
+    width: 100%;
+    height: 1rem;
+    box-sizing: border-box;
+    padding: 0 0.3rem 0 0.2rem;
+    background-color: white;
+    font-size: 0.3rem;
+    line-height: 1;
+	justify-content: space-between;
+	margin-bottom: 0.3rem;
+    display: flex;
+	align-items: center;
+	.pay{
+		display: flex;
+	}
+}
+.clause{
+
+}
+</style>
diff --git a/src/view/order-detail.vue b/src/view/order-detail.vue
new file mode 100644
index 0000000..4e35027
--- /dev/null
+++ b/src/view/order-detail.vue
@@ -0,0 +1,404 @@
+<template>
+	<div class="order-detail-whole">
+		<back-header style="margin-bottom:0.15rem">
+			订单详情
+		</back-header>
+		<div class="goods-box">
+			<div class="item-top">
+				<div class="item-top-address">广州站</div>
+				<div class="item-top-state">已取消</div>
+			</div>
+			<div class="item-main">
+				<img src="">
+				<div class="item-main-text">
+					<div class="name">5A至臻家·体验卡</div>
+					<div class="tips-box">
+						<div class="tips">
+							104次×4小时全屋高端保洁
+						</div>
+						<div class="price">¥399</div>
+					</div>
+					<div class="tag-box">
+						<i class="tag">新人优惠</i>
+						<i class="tag">新人优惠</i>
+					</div>
+				</div>
+			</div>
+			<div class="gift-box">
+				<div class="gift-item">
+					<div class="text">【赠品】</div>
+					<div class="name">高端保洁铂金月卡</div>
+					<div class="num">x1</div>
+				</div>
+			</div>
+		</div>
+		<div class="message">
+			<div class="message-title">留言备注：</div>
+			<div class="box" role="text">
+				这里是留言内容，下面的的内容是展示超出换行样式的辅导费费大幅度发
+			</div>
+		</div>
+		<div class="time-box">
+			<div class="time-item">下单时间：
+				<div class="time">2018-09-25 17:00:00</div>
+			</div>
+			<div class="time-item">付款时间：
+				<div class="time">2018-09-25 17:00:00</div>
+			</div>
+		</div>
+		<div class="money-box">
+			<div class="money-box-top">
+				<div class="order">
+					<div class="text">订单金额：</div>
+					<div class="num">¥399</div>
+				</div>
+				<div class="discount">
+					<div class="text">
+						<div class="string">
+							优惠减免：
+						</div>
+						<span class="discount-name">(新人专享优惠券)</span>
+					</div>
+					<div class="num">¥20</div>
+				</div>
+			</div>
+			<div class="money-box-bottom">
+				<div class="button-box" role="button">
+					取消订单
+				</div>
+				<!-- <div class="button-box" role="button">
+					申请退款
+				</div> -->
+				<div class="money">
+					实际支付：
+					<div class="money-count">¥379</div>
+				</div>
+			</div>
+		</div>
+		<div class="fill"></div>
+		<div class="button" role="button">
+			{{buttonText}}
+		</div>
+	</div>
+</template>
+<script>
+import backHeader from "../components/back-header.vue";
+export default {
+    data() {
+        return {
+            state: "",
+            buttonText: "重新下单"
+        };
+    },
+    watch: {
+        state(val) {}
+    },
+    components: {
+        "back-header": backHeader
+    }
+};
+</script>
+<style lang="scss" scoped>
+.order-detail-whole {
+    // min-height: 100vh;
+}
+.goods-box {
+    background-color: white;
+    width: 100%;
+    color: #333;
+    margin-bottom: 0.2rem;
+    // height: 2.25rem;
+    width: 100%;
+    .item-top {
+        height: 0.65rem;
+        border-bottom: 0.01rem solid #e5e5e5;
+        box-sizing: border-box;
+        font-size: 0.3rem;
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        padding: 0 0.36rem 0 0.3rem;
+        line-height: 1;
+        align-items: center;
+        .item-top-address {
+        }
+        .item-top-state {
+            color: #999;
+            font-size: 0.28rem;
+        }
+    }
+    .item-main {
+        display: flex;
+        height: 1.6rem;
+        width: 100%;
+        padding-top: 0.16rem;
+        box-sizing: border-box;
+        padding-right: 0.38rem;
+        padding-left: 0.22rem;
+        img {
+            width: 1.28rem;
+            height: 1.28rem;
+            margin-right: 0.16rem;
+        }
+        .item-main-text {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            padding-top: 0.03rem;
+            .name {
+                font-size: 0.3rem;
+                overflow: hidden;
+                line-height: 1.1;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 1;
+                word-wrap: break-word;
+                white-space: normal;
+                word-break: break-all;
+                margin-bottom: 0.05rem;
+            }
+            .tips-box {
+                display: flex;
+                margin-bottom: 0.14rem;
+                align-items: flex-end;
+                justify-content: space-between;
+                .tips {
+                    flex-shrink: 1;
+                    font-size: 0.24rem;
+                    color: #999;
+                    overflow: hidden;
+                    line-height: 1.3;
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 1;
+                    word-wrap: break-word;
+                    white-space: normal;
+                    word-break: break-all;
+                }
+                .price {
+                    flex-shrink: 0;
+                    font-size: 0.38rem;
+                    color: #333;
+                    line-height: 1;
+                }
+            }
+            .tag-box {
+                font-size: 0.2rem;
+                display: flex;
+                height: 0.3rem;
+                overflow: hidden;
+                margin-bottom: 0.12rem;
+                .tag {
+                    flex-shrink: 1;
+                    height: 100%;
+                    font-style: normal;
+                    background: #ffe2c7;
+                    padding: 0rem 0.1rem;
+                    line-height: 0.28rem;
+                    color: #ff8a1d;
+                    border-radius: 0.15rem;
+                    // margin-bottom: 0.1rem;
+                    flex-shrink: 1;
+                    overflow: hidden;
+                    display: -webkit-box;
+                    margin-right: 0.1rem;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 1;
+                    line-height: 0.3rem;
+                    word-wrap: break-word;
+                    white-space: normal;
+                    word-break: break-all;
+                }
+            }
+        }
+    }
+    .gift-box {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0.2rem;
+        border-top: 0.01rem solid #f9f9f9;
+        .gift-item {
+            display: flex;
+            margin-bottom: 0.18rem;
+            font-size: 0.24rem;
+            align-items: center;
+            color: #666;
+            line-height: 1.1;
+            .text {
+                flex-shrink: 0;
+            }
+            .name {
+                flex-shrink: 1;
+                overflow: hidden;
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 1;
+                word-wrap: break-word;
+                white-space: normal;
+                word-break: break-all;
+            }
+            .num {
+                flex-shrink: 1;
+            }
+        }
+    }
+}
+.message {
+    width: 100%;
+    height: 2.5rem;
+    background-color: white;
+    box-sizing: border-box;
+    padding: 0.3rem 0.2rem;
+    margin-bottom: 0.2rem;
+    .message-title {
+        font-size: 0.28rem;
+        color: #999;
+        line-height: 1;
+        margin-bottom: 0.12rem;
+    }
+    .box {
+        width: 100%;
+        height: 1.47rem;
+        font-size: 0.28rem;
+        font-family: PingFangSC-Regular;
+        color: rgba(51, 51, 51, 1);
+        background: rgba(247, 247, 247, 1);
+        padding: 0.13rem 0.1rem;
+        box-sizing: border-box;
+        line-height: 0.36rem;
+        overflow-y: scroll;
+    }
+}
+.time-box {
+    width: 100%;
+    height: 1.5rem;
+    padding: 0.4rem 0.2rem;
+    background-color: #fff;
+    box-sizing: border-box;
+    margin-bottom: 0.2rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .time-item {
+        display: flex;
+        font-size: 0.28rem;
+        align-items: center;
+        line-height: 1;
+        color: #666;
+        .time {
+            font-size: 0.3rem;
+            color: #333;
+        }
+    }
+}
+.money-box {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0.33rem 0.22rem;
+    background-color: white;
+    margin-bottom: 0.43rem;
+    .money-box-top {
+        border-bottom: 0.01rem solid #dcdcdc;
+        margin-bottom: 0.23rem;
+        width: 100%;
+        .order {
+            display: flex;
+            align-items: center;
+            line-height: 1;
+            justify-content: space-between;
+            margin-bottom: 0.3rem;
+            .text {
+                font-size: 0.28rem;
+                color: #666;
+            }
+            .num {
+                color: #333;
+                font-size: 0.32rem;
+            }
+        }
+        .discount {
+            display: flex;
+            align-items: center;
+            line-height: 1;
+            justify-content: space-between;
+            margin-bottom: 0.2rem;
+            .text {
+                flex-shrink: 1;
+                display: flex;
+                font-size: 0.28rem;
+                color: #666;
+                .string {
+                    flex-shrink: 0;
+                }
+                .discount-name {
+                    flex-shrink: 1;
+                    color: #333;
+                    overflow: hidden;
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 1;
+                    word-wrap: break-word;
+                    white-space: normal;
+                    word-break: break-all;
+                    font-size: 0.26rem;
+                }
+            }
+            .num {
+                color: #333;
+                font-size: 0.32rem;
+                flex-shrink: 0;
+            }
+        }
+    }
+    .money-box-bottom {
+        display: flex;
+        width: 100%;
+        line-height: 1;
+        justify-content: space-between;
+        .button-box {
+            width: 1.4rem;
+            height: 0.44rem;
+            color: #666;
+            font-size: 0.26rem;
+            line-height: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border: 0.01rem solid rgba(220, 220, 220, 1);
+			border-radius:4px;
+        }
+        .button {
+        }
+        .money {
+            display: flex;
+            color: #666;
+            font-size: 0.26rem;
+            align-items: center;
+            .money-count {
+                color: #333;
+                font-size: 0.32rem;
+            }
+        }
+    }
+}
+.fill {
+    width: 100%;
+    height: 1rem;
+    background-color: rgba(247, 247, 247, 0);
+}
+.button {
+    width: 100%;
+    position: fixed;
+    height: 1rem;
+    bottom: 0;
+    background-color: #fff;
+    text-align: center;
+    line-height: 1rem;
+    color: #00ba85;
+    font-size: 0.36rem;
+}
+.green {
+    background: #00ba86;
+    color: #fff;
+}
+</style>
diff --git a/src/view/order-list.vue b/src/view/order-list.vue
index c1e1f73..be60db2 100644
--- a/src/view/order-list.vue
+++ b/src/view/order-list.vue
@@ -1,321 +1,60 @@
 <template>
 	<div class="order-list-whole">
 		<back-header>
-			订单确认
+			我的订单
 		</back-header>
-		<div class="top">
-			<div class="goods-container">
-				<img src="">
-				<div class="goods-main-container">
-					<div class="name">高端保洁铂金月卡</div>
-					<div class="box">
-						<div class="box-text">1次×4小时高端保洁 1次×4小时高端保洁 1次×4小时高端保洁 1次×4小时高端保洁 1次×4小时高端保洁 </div>
-						<div class="box-price">¥39911111</div>
-					</div>
-				</div>
-			</div>
-			<div class="gift-container">
-				<div class="gift-item">
-					<div class="text">【赠品】</div>
-					<div class="name">高端保洁铂金月卡  高端保洁铂金月卡 高端保洁铂金月卡 高端保洁铂金月卡 高端保洁铂金月卡 高端保洁铂金月卡</div>
-					<div class="num">X1</div>
-				</div>
-			</div>
+		<div class="state-bar">
+			<div class="state-item" @click="active=''" :class="{active:!active}">全部</div>
+			<div class="state-item" @click="active=1" :class="{active:active==1}">待支付</div>
+			<div class="state-item" @click="active=2" :class="{active:active==2}">已支付</div>
+			<div class="state-item" @click="active=3" :class="{active:active==3}">退款中</div>
+			<div class="state-item" @click="active=4" :class="{active:active==4}">已退款</div>
 		</div>
-		<div class="service-area">
-			<div class="title">
-				<img src="../assets/images/order-list/location.png">
-				服务区域：
-			</div>
-			<div class="area-text">
-				广州市（天河区、海珠区、番禺区、白云区、越秀区、荔湾区、黄埔区）；佛山市（xxx区、xxx区、xxx区）
-			</div>
-		</div>
-		<div class="coupon-container">
-			<div class="coupon-left">
-				<div class="left-box">
-					<img src="../assets/images/order-list/location.png">
-					<div class="text">
-						优惠券：
-					</div>
-					<div class="name">新人专属券新人专属券新人专属券新人专属券</div>
-				</div>
-				<div class="price">-￥400</div>
-			</div>
-			<img class="icon" src="../assets/images/order-list/arrow.png">
-		</div>
-		<div class="message-container">
-			<div class="title">
-				<img src="../assets/images/order-list/location.png">
-				留言备注：
-			</div>
-			<textarea placeholder="为了更好地为您服务，请简单说明您家的格局面积与保洁史"></textarea>
-		</div>
-		<div class="pay-container">
-			<div class="text">支付方式</div>
-			<div class="pay">
-				<img src="">
-				微信支付
-			</div>
-		</div>
-		<div class="clause"></div>
+		<order-item></order-item>
 	</div>
 </template>
 <script>
+import orderItem from "../components/order-item.vue";
 import backHeader from "../components/back-header.vue";
 export default {
     data() {
-        return {};
+        return {
+            active: ""
+        };
     },
     components: {
-        "back-header": backHeader
-    },
-    methods: {
-        getData() {}
+        "back-header": backHeader,
+        "order-item": orderItem
     }
 };
 </script>
 <style lang="scss" scoped>
-.top {
-    margin-bottom: 0.18rem;
+.order-list-whole {
 }
-.goods-container {
+.state-bar {
     width: 100%;
-    color: #333;
-    height: 1.6rem;
-    margin-top: 0.1rem;
+    height: 0.8rem;
+    // box-sizing: border-box;
+    border-top: 0.01rem solid rgba(238, 238, 238, 1);
     background-color: white;
     display: flex;
-    box-sizing: border-box;
-    padding: 0.16rem 0.37rem 0rem 0.22rem;
-    img {
-        width: 1.28rem;
-        height: 1.28rem;
-        margin-right: 0.33rem;
-    }
-    .goods-main-container {
-        flex-grow: 1;
-        display: flex;
-        flex-direction: column;
-        padding-top: 0.06rem;
-        .name {
-            line-height: 1.1;
-            font-size: 0.3rem;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 1;
-            word-wrap: break-word;
-            // margin-top: 0.1rem;
-            white-space: normal;
-            word-break: break-all;
-            margin-bottom: 0.15rem;
-        }
-        .box {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-end;
-            .box-text {
-                font-size: 0.24rem;
-                line-height: 1.1;
-                text-overflow: ellipsis;
-                overflow: hidden;
-                display: -webkit-box;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 1;
-                word-wrap: break-word;
-                white-space: normal;
-                word-break: break-all;
-                color: #999;
-                height: 0.24rem;
-                margin-right: 0.2rem;
-            }
-            .box-price {
-                line-height: 1;
-                font-weight: 400;
-                font-size: 0.38rem;
-                color: #333;
-            }
-        }
-    }
-}
-.gift-container {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 0.2rem;
-    background-color: #fff;
-    border-top: 0.01rem solid rgba(243, 243, 243, 1);
-    display: flex;
-    flex-direction: column;
-    color: #666;
-    font-size: 0.24rem;
-    .gift-item {
-        display: flex;
-        line-height: 1.2;
-        align-items: center;
-        .text {
-            flex-shrink: 0;
-        }
-        .name {
-            text-overflow: ellipsis;
-            overflow: hidden;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 1;
-            word-wrap: break-word;
-            white-space: normal;
-            margin-right: 0.1rem;
-            word-break: break-all;
-        }
-        .num {
-            flex-shrink: 0;
-        }
-    }
-}
-.service-area {
-    padding: 0.36rem 0.2rem;
-    background-color: #fff;
-    display: flex;
-    flex-direction: column;
-    color: #666;
-    margin-bottom: 0.1rem;
-    .title {
-        display: flex;
-        font-size: 0.3rem;
-        align-items: center;
-        line-height: 1;
-        margin-bottom: 0.2rem;
-        font-weight: normal;
-        img {
-            width: 0.32rem;
-            height: 0.3rem;
-            margin-right: 0.08rem;
-        }
-    }
-    .area-text {
-        padding-left: 0.4rem;
-        font-size: 0.26rem;
-    }
-}
-.coupon-container {
-    width: 100%;
-    height: 1rem;
-    display: flex;
     align-items: center;
-    padding-left: 0.2rem;
-    font-size: 0.3rem;
-    line-height: 1.1;
-    background-color: #fff;
+    padding: 0rem 0.46rem 0 0.46rem;
     box-sizing: border-box;
     justify-content: space-between;
-    margin-bottom: 0.1rem;
-    .coupon-left {
-        flex-grow: 1;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-right: 0.43rem;
-        img {
-            flex-grow: 0;
-            width: 0.32rem;
-            flex-shrink: 0;
-            height: 0.3rem;
-            margin-right: 0.08rem;
-        }
-        .text {
-            flex-grow: 0;
-            flex-shrink: 0;
-            margin-right: 0.5rem;
-        }
-        .name {
-            flex-grow: 1;
-            // flex-shrink: 1;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            font-size: 0.28rem;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 1;
-            word-wrap: break-word;
-            white-space: normal;
-            // max-width: 3rem;
-            word-break: break-all;
-        }
-        .price {
-            color: #f42525;
-            flex-shrink: 0;
-            font-size: 0.34rem;
-        }
-    }
-    .left-box {
-        display: flex;
-        align-items: center;
-        flex-grow: 1;
-        margin-right: 0.2rem;
-    }
-    .icon {
-        width: 0.16rem;
-        margin-right: 0.37rem;
-        height: 0.27rem;
+    margin-bottom: 0.2rem;
+    .state-item {
+        line-height: 0.8rem;
+        font-size: 0.32rem;
+        font-family: PingFang-SC-Medium;
+        height: 100%;
+        font-weight: 500;
+        padding: 0 0.07rem;
+    }
+    .active {
+        padding-top: 0.03rem;
+        border-bottom: 0.03rem solid #00ba86;
+        color: rgba(0, 186, 134, 1);
     }
-}
-.message-container {
-    width: 100%;
-    background-color: #fff;
-    height: 2.48rem;
-    margin-bottom: 0.1rem;
-    padding: 0.36rem 0.3rem 0 0.2rem;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    color: #666;
-    .title {
-        display: flex;
-        font-size: 0.3rem;
-        align-items: center;
-        line-height: 1;
-        margin-bottom: 0.17rem;
-        font-weight: normal;
-        img {
-            width: 0.32rem;
-            height: 0.3rem;
-            margin-right: 0.08rem;
-        }
-    }
-    textarea {
-        border-style: none;
-        text-shadow: none;
-        -webkit-appearance: none;
-        -webkit-user-select: text;
-        outline-color: transparent;
-        font-family: "AvantGardGothEF-Book";
-        padding-left: 0.4rem;
-        height: 1.5rem;
-        box-shadow: none;
-        outline: none;
-        outline-style: none;
-        border: none;
-        background-color: white;
-    }
-}
-.pay-container {
-    width: 100%;
-    height: 1rem;
-    box-sizing: border-box;
-    padding: 0 0.3rem 0 0.2rem;
-    background-color: white;
-    font-size: 0.3rem;
-    line-height: 1;
-	justify-content: space-between;
-	margin-bottom: 0.3rem;
-    display: flex;
-	align-items: center;
-	.pay{
-		display: flex;
-	}
-}
-.clause{
-
 }
 </style>