fe / yohoblk-wap · Commits

Go to a project

Authored by 沈志敏
Commit 1aa5c4ec06cf760e665fbe9b7e6cd3f8eacce344 1 parent 5b209508

fix bug

Inline Side-by-side
Showing 4 changed files with 85 additions and 89 deletions
@@ -65,7 +65,7 @@ const applySuccuss = function(type, applyId) { @@ -65,7 +65,7 @@ const applySuccuss = function(type, applyId) {
65 65
66 const modal = new Modal({ 66 const modal = new Modal({
67 styleClass: 'return-success-modal', 67 styleClass: 'return-success-modal',
68 - text: `${kind.name}申请已提交,请等待审核.....`, 68 + title: `${kind.name}申请已提交,请等待审核.....`,
69 buttons: [{ 69 buttons: [{
70 text: '返回订单', 70 text: '返回订单',
71 handler: function() { 71 handler: function() {
@@ -43,6 +43,7 @@ @@ -43,6 +43,7 @@
43 color: #4a90e2; 43 color: #4a90e2;
44 font-size: 30px; 44 font-size: 30px;
45 line-height: 88px; 45 line-height: 88px;
  46 + font-weight: bold;
46 } 47 }
47 48
48 a.modal-button:first-of-type { 49 a.modal-button:first-of-type {
@@ -22,7 +22,7 @@ @@ -22,7 +22,7 @@
22 } 22 }
23 23
24 .item-del { 24 .item-del {
25 - margin-top: 10px; 25 + margin-top: 20px;
26 border-top: 1px solid #e0e0e0; 26 border-top: 1px solid #e0e0e0;
27 color: #5c99e4; 27 color: #5c99e4;
28 } 28 }
1 <template> 1 <template>
2 -<div class="logistic-page yoho-page">  
3 - <div class="overview">  
4 - <div class="left" >  
5 - <a href="{{logisticDate.url}}">  
6 - <img class="icon" v-bind:src="logo | resize 88 88" />  
7 - </a>  
8 - </div>  
9 - <div class="right">  
10 - <div>  
11 - <span class='info'>物流公司:</span>  
12 - <span >{{logisticDate.caption}}</span>  
13 - </div>  
14 - <div>  
15 - <span class='info'>快递单号:</span>  
16 - <span>{{logisticDate.express_number}}</span> 2 + <div class="logistic-page yoho-page">
  3 + <div class="overview">
  4 + <div class="left" >
  5 + <img class="logoicon" v-bind:src="logo | resize 90 90" />
17 </div> 6 </div>
18 - </div>  
19 - </div><!--end overview-->  
20 -  
21 - <div class="title">  
22 - <span>物流详情</span>  
23 - </div>  
24 -  
25 - <div class="detail">  
26 - <div class="timeline-box" v-for="(index, detail) in logisticDate.express_detail">  
27 - <span class="timeline-node"></span>  
28 - <div class="timeline-info">  
29 - <div class="timeline-info-row">  
30 - {{detail.accept_address}} 7 + <div class="right">
  8 + <div>
  9 + <span class='info'>物流公司:</span>
  10 + <span >{{logisticDate.caption}}</span>
31 </div> 11 </div>
32 - <div class="timeline-info-row">  
33 - {{detail.acceptTime}} 12 + <div>
  13 + <span class='info'>快递单号:</span>
  14 + <span>{{logisticDate.express_number}}</span>
34 </div> 15 </div>
35 </div> 16 </div>
  17 + </div><!--end overview-->
  18 + <div class="title">
  19 + <span>物流详情</span>
36 </div> 20 </div>
37 - </div><!--end detail-->  
38 -  
39 -</div><!--end logistic-page--> 21 + <div class="detail">
  22 + <div class="timeline-box" v-for="(index, detail) in logisticDate.express_detail">
  23 + <span class="timeline-node"></span>
  24 + <div class="timeline-info">
  25 + <div class="timeline-info-row">
  26 + {{detail.accept_address}}
  27 + </div>
  28 + <div class="timeline-info-row time">
  29 + {{detail.acceptTime}}
  30 + </div>
  31 + </div>
  32 + </div>
  33 + </div><!--end detail-->
  34 + </div><!--end logistic-page-->
40 </template> 35 </template>
41 -  
42 <style> 36 <style>
43 $logistic_gray: #f0f0f0; 37 $logistic_gray: #f0f0f0;
44 -$border_color_strong: #e5e5e5;  
45 $border_color_light: #eee; 38 $border_color_light: #eee;
46 39
47 .logistic-page { 40 .logistic-page {
48 background-color: $logistic_gray; 41 background-color: $logistic_gray;
49 42
50 .overview { 43 .overview {
51 - height: 120px; 44 + height: 150px;
52 line-height: 120px; 45 line-height: 120px;
53 width: 100%; 46 width: 100%;
54 - margin-bottom: 40px; 47 + margin-bottom: 20px;
55 background-color: #fff; 48 background-color: #fff;
56 color: #464646; 49 color: #464646;
57 - border-bottom: 1px solid $border_color_strong; 50 + border-bottom: 1px solid $border_color_light;
58 51
59 .left { 52 .left {
60 - width: 19%; 53 + width: 150px;
61 float: left; 54 float: left;
62 text-align: center; 55 text-align: center;
63 height: 100%; 56 height: 100%;
64 57
65 - .icon {  
66 - width: 88px;  
67 - height: 88px; 58 + .logoicon {
  59 + width: 90px;
  60 + height: 90px;
68 margin: 0 auto; 61 margin: 0 auto;
69 background-size: 100%; 62 background-size: 100%;
70 background-repeat: no-repeat; 63 background-repeat: no-repeat;
71 background-position: center; 64 background-position: center;
72 - margin-top: 16px; 65 + margin-top: 30px;
73 } 66 }
74 } 67 }
75 68
76 .right { 69 .right {
77 - width: 81%; 70 + width: 600px;
  71 + height: 100%;
78 float: left; 72 float: left;
79 - padding-top: 20px;  
80 - padding-bottom: 20px;  
81 - height: 80px; 73 + padding: 36px 0;
82 74
83 div { 75 div {
84 height: 40px; 76 height: 40px;
85 line-height: 44px; 77 line-height: 44px;
86 - color: #595959;  
87 font-size: 24px; 78 font-size: 24px;
88 } 79 }
89 } 80 }
90 81
91 .info { 82 .info {
92 padding-right: 4px; 83 padding-right: 4px;
  84 + color: #b0b0b0;
93 } 85 }
94 } 86 }
95 87
96 .title { 88 .title {
97 - height: 112px;  
98 - line-height: 112px; 89 + height: 88px;
  90 + line-height: 89px;
99 background-color: #fff; 91 background-color: #fff;
100 - padding-left: 40px;  
101 - font-size: 40px; 92 + padding-left: 30px;
  93 + font-size: 34px;
102 } 94 }
103 95
104 .detail { 96 .detail {
105 background-color: #fff; 97 background-color: #fff;
106 - padding-left: 80px; 98 + padding-left: 42px;
107 margin-bottom: 40px; 99 margin-bottom: 40px;
108 } 100 }
109 101
110 .timeline-box { 102 .timeline-box {
111 - border-left: 1px solid $border_color_strong; 103 + border-left: 1px solid $border_color_light;
112 position: relative; 104 position: relative;
113 - padding-left: 52px; 105 + padding-left: 42px;
  106 + height: 116px;
114 } 107 }
115 108
116 .timeline-node { 109 .timeline-node {
@@ -118,25 +111,31 @@ $border_color_light: #eee; @@ -118,25 +111,31 @@ $border_color_light: #eee;
118 top: 32px; 111 top: 32px;
119 left: -9.04444px; 112 left: -9.04444px;
120 display: inline-block; 113 display: inline-block;
121 - width: 16.4px;  
122 - height: 16.4px;  
123 - background-color: $border_color_strong; 114 + width: 16px;
  115 + height: 16px;
  116 + background-color: #b0b0b0;
124 border-radius: 100%; 117 border-radius: 100%;
125 } 118 }
126 119
127 .timeline-box:first-child { 120 .timeline-box:first-child {
128 .timeline-node { 121 .timeline-node {
129 - background-color: #989898; 122 + background-color: #000;
  123 + width: 22px;
  124 + height: 22px;
130 } 125 }
131 126
132 .timeline-info-row { 127 .timeline-info-row {
133 - color: #606060; 128 + color: #000;
  129 + }
  130 +
  131 + .time {
  132 + color: #b0b0b0;
134 } 133 }
135 } 134 }
136 135
137 .timeline-info { 136 .timeline-info {
138 padding: 20px 0; 137 padding: 20px 0;
139 - border-bottom: 1px solid $border_color_strong; 138 + border-bottom: 1px solid $border_color_light;
140 } 139 }
141 140
142 .timeline-box:last-child { 141 .timeline-box:last-child {
@@ -149,49 +148,45 @@ $border_color_light: #eee; @@ -149,49 +148,45 @@ $border_color_light: #eee;
149 min-height: 40px; 148 min-height: 40px;
150 line-height: 40px; 149 line-height: 40px;
151 font-size: 28px; 150 font-size: 28px;
152 - color: #bababa; 151 + color: #b0b0b0;
153 padding-right: 32px; 152 padding-right: 32px;
154 } 153 }
  154 +
  155 + .time {
  156 + font-size: 24px;
  157 + }
155 } 158 }
156 </style> 159 </style>
157 -  
158 -  
159 <script> 160 <script>
160 const $ = require('jquery'); 161 const $ = require('jquery');
161 const qs = require('yoho-qs'); 162 const qs = require('yoho-qs');
162 const tip = require('common/tip'); 163 const tip = require('common/tip');
163 164
164 module.exports = { 165 module.exports = {
165 - props: [],  
166 data() { 166 data() {
167 return { 167 return {
168 logisticDate: [], 168 logisticDate: [],
169 logo: '' 169 logo: ''
170 }; 170 };
171 }, 171 },
172 - methods: {  
173 - getLogisticDate() {  
174 - let data = {  
175 - orderCode: qs.order_code || '',  
176 - type: qs.type || '',  
177 - id: qs.id || ''  
178 - };  
179 -  
180 - $.ajax({  
181 - url: '/me/get-order-logistic-date',  
182 - data: data  
183 - }).then(result => {  
184 - this.logisticDate = result;  
185 - if (result && result.logo) {  
186 - this.logo = result.logo;  
187 - }  
188 - }).fail(() => {  
189 - tip('网络错误');  
190 - });  
191 - }  
192 - },  
193 created() { 172 created() {
194 - this.getLogisticDate(); 173 + const data = {
  174 + orderCode: qs.order_code || '',
  175 + type: qs.type || '',
  176 + id: qs.id || ''
  177 + };
  178 +
  179 + $.ajax({
  180 + url: '/me/get-order-logistic-date',
  181 + data: data
  182 + }).then(result => {
  183 + this.logisticDate = result;
  184 + if (result && result.logo) {
  185 + this.logo = result.logo;
  186 + }
  187 + }).fail(() => {
  188 + tip('网络错误');
  189 + });
195 } 190 }
196 }; 191 };
197 </script> 192 </script>