From cd5c8dc0d8727cae5d14c4eea516fd62c470c0f3 Mon Sep 17 00:00:00 2001
From: wangkesi <wangkesi@3ncto.com>
Date: Fri, 12 Oct 2018 17:59:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BA=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                               |  30 +-
 src/assets/images/order-list/arrow.png    | Bin 0 -> 1044 bytes
 src/assets/images/order-list/location.png | Bin 0 -> 2505 bytes
 src/components/back-header.vue            |  39 +++
 src/router/index.js                       |   5 +
 src/view/order-list.vue                   | 321 ++++++++++++++++++++++
 6 files changed, 380 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/images/order-list/arrow.png
 create mode 100644 src/assets/images/order-list/location.png
 create mode 100644 src/components/back-header.vue
 create mode 100644 src/view/order-list.vue

diff --git a/src/App.vue b/src/App.vue
index 7b981ae..d87782d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,28 @@
 <template>
-  <div id="app">
-    <router-view></router-view>
-  </div>
+	<div id="app">
+		<router-view></router-view>
+	</div>
 </template>
 
 <script>
 export default {
-  name: 'app'
-}
+    name: "app"
+};
 </script>
 
 <style>
-body{
-  padding:0px;
-  margin:0px auto;
+body {
+    padding: 0px;
+    margin: 0px auto;
 }
-a{
-  text-decoration:none;
+a {
+    text-decoration: none;
 }
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: left;
-  color: #2c3e50;
+    font-family: PingFangSC-Light, helvetica, "Heiti SC";
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: left;
+    color: #2c3e50;
 }
 </style>
diff --git a/src/assets/images/order-list/arrow.png b/src/assets/images/order-list/arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..0c527f68e16e480347e3ca2af52858cb291ec4af
GIT binary patch
literal 1044
zcmV+v1nc{WP)<h;3K|Lk000e1NJLTq002q=004jp1^@s6tfT*<00009a7bBm000XU
z000XU0RWnu7ytkR#z{m$RCt{2-MwxTK@>pYbK?{sQRH<H4?qir8w!LlJ0%z)1RZqH
zpb$Zm9g&EN0t!GB6g*p&BG|F9y|(vn?wy%a?#_(HpVs!S8$*3k6vYSU+;q#h=##pW
zMNxbfk^2BuRZYG3C&O$@UmKwok!GcgwH9g}(yUammY~Mt@#yI2=xh_xtQ4{4Q2&s=
zipbqvCZ>iZus_nQl&}P#D2j6tdC+i;r)62b?`}&v6M)HNa%(gi{RVC{StNxkYyKIP
zvFcm;)@zF;A`eebPtQBqnX*>yqgrBJh{&TDvDV&jW~|jVKEh<I<!T>_GuBnLP>``^
zZH0o21v^4P#@ZPQ(#F~g3ev^e8w%3IY6J!8VKs(=w6I!1K{{Bip&$*cPM{!utj?ey
zZmdqBAYQD_p&(AIUZ5a8tlpp?F05XmAResVp&$;dL7?Cg>)_zvkBD4rFg-ZdU{C->
zQQQW;Tf`a^3hZJH4h1%`f<S>itYA=J3o9rT*ue@81vao$K!JWNHBg`%OBEF8#Zm_a
zI<Ztjfj%s?P@oG-H5BN<QV#_>uuMQfcq}te5Ejc66okVv2L)lUOhUo%SZ1MMSS-^}
z&<?ArstWk&y}z?<ta&JCePvNq)sJmhQ9wZ_Sl_(&<4xzIfr3u3zIgBNtveSL6!eD`
z9Tc?30?x{^oGc!Q5(?UX8;Z#JB386eaET=%zktJi=l+ki_X3s@k(;!8jTiH^+HXf^
z&bimXt0r^*T}_|LvMgrDqJ(OT1bp<~KVCc@9aJAk5E)coNDvWJpGXi1R0l}!y!X%R
z#+ire0O{C!|7_b>(@<@YNacsSA(6l+)X+#^5Gn)`7=sFh1csnOB7qU8&`4kaN&^xo
zhth%silH<ifl?@KNT3i(BN8Zs(uxF%pfn?a5-9CRpa9AO5(I{_f&>AfEFnQ4C~HU%
z0Lmf~3=Cxz2?m6+j06KgSx15apkhFRo}pqvf*zq_LV}*4Vnc!+pkhRVj-g^jf)1f#
zMuLu@oO3UMHw~w&M}iKZilTTTB2E7`&IA&)gh~YoT0o_Q1P!55LxKiSDI&q1P^lup
z9#APG!H!U=Bf$<(8R@cGsEl;gMyQOm+*+uNwAu<(Mq1wzR7Tp|94aH#C(s%x>c0k`
zbqF9L*PAX-Rn@dC%czlH;jP!?r`)Qlrr!ILt~aHzr4RFcuu?*THMa-5V5Noxn{PPZ
zipYy~=Tbz1nnxJt+%Yg+JeDdFY<VbN#7Y@yr<`-g&bjIKk-1!M_x=KfRw$hAkB!a%
O0000<MNUMnLSTYHufbLT

literal 0
HcmV?d00001

diff --git a/src/assets/images/order-list/location.png b/src/assets/images/order-list/location.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b7145f7ee322f605b27473fe55476a02773b96a
GIT binary patch
literal 2505
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
Tb!-{500000NkvXXu0mjfs~f`K

literal 0
HcmV?d00001

diff --git a/src/components/back-header.vue b/src/components/back-header.vue
new file mode 100644
index 0000000..ce7859b
--- /dev/null
+++ b/src/components/back-header.vue
@@ -0,0 +1,39 @@
+<template>
+	<div class="header">
+		<img src="../assets/images/icon/arrow-left.png" />
+		<div class="title">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+    props: {
+        path: {
+            type: String,
+            default: ""
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.header {
+    width: 100%;
+    height: 0.9rem;
+    position: relative;
+    background: rgba(255, 255, 255, 1);
+    img {
+        position: absolute;
+        left: 0.4rem;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+    .title {
+        text-align: center;
+        font-size: 0.36rem;
+        font-weight: 400;
+        color: rgba(51, 51, 51, 1);
+        line-height: 0.9rem;
+    }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 665fe88..e5f4326 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -69,6 +69,11 @@ let router = new Router({
         {
             path: "/",
             redirect: "/home"
+        },
+        {
+            path: "/order-list",
+            name: "orderList",
+            component: resolve => require(["@/view/order-list.vue"], resolve)
         }
     ]
 });
diff --git a/src/view/order-list.vue b/src/view/order-list.vue
new file mode 100644
index 0000000..c1e1f73
--- /dev/null
+++ b/src/view/order-list.vue
@@ -0,0 +1,321 @@
+<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>
+		<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>