fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by lea guo
Commit 1483f72c9fc8fea5044f840dce45e7a6ec317672 1 parent 4e021233

物流信息

Inline Side-by-side
Showing 3 changed files with 114 additions and 94 deletions
1 import Vue from 'vue'; 1 import Vue from 'vue';
2 -import {  
3 - ROUTE_CHANGE,  
4 -} from 'store/yoho/types';  
5 -import {createApp} from './app';  
6 -import {createApi} from 'create-api';  
7 -import {Style, Toast, Dialog, DatePicker, ImagePreview} from 'cube-ui'; //eslint-disable-line  
8 -import {get} from 'lodash'; 2 +import { ROUTE_CHANGE } from 'store/yoho/types';
  3 +import { createApp } from './app';
  4 +import { createApi } from 'create-api';
  5 +import { Style, Toast, Dialog, DatePicker, ImagePreview } from 'cube-ui'; //eslint-disable-line
  6 +import { get } from 'lodash';
9 import Lazy from 'vue-lazyload'; 7 import Lazy from 'vue-lazyload';
10 import cookie from 'yoho-cookie'; 8 import cookie from 'yoho-cookie';
11 import yoho from 'common/yoho'; 9 import yoho from 'common/yoho';
@@ -23,7 +21,7 @@ const $app = document.getElementById('app'); @@ -23,7 +21,7 @@ const $app = document.getElementById('app');
23 21
24 const isDegrade = Boolean(!($app && $app.attributes['data-server-rendered'])); 22 const isDegrade = Boolean(!($app && $app.attributes['data-server-rendered']));
25 const context = get(window, '__INITIAL_STATE__.yoho.context'); 23 const context = get(window, '__INITIAL_STATE__.yoho.context');
26 -const {app, router, store} = createApp(context); 24 +const { app, router, store } = createApp(context);
27 const api = createApi(); 25 const api = createApi();
28 26
29 if (window.__INITIAL_STATE__) { 27 if (window.__INITIAL_STATE__) {
@@ -45,8 +43,7 @@ Vue.use(OrderCouponList); @@ -45,8 +43,7 @@ Vue.use(OrderCouponList);
45 Vue.use(OrderPromotionList); 43 Vue.use(OrderPromotionList);
46 Vue.use(Bind); 44 Vue.use(Bind);
47 45
48 -  
49 -yoho.auth = async(loginUrl) => { 46 +yoho.auth = async loginUrl => {
50 let user = await sdk.getUser(); 47 let user = await sdk.getUser();
51 48
52 if (user && user.uid) { 49 if (user && user.uid) {
@@ -54,15 +51,16 @@ yoho.auth = async(loginUrl) => { @@ -54,15 +51,16 @@ yoho.auth = async(loginUrl) => {
54 } else { 51 } else {
55 cookie.set('third_backurl', location.href, { 52 cookie.set('third_backurl', location.href, {
56 domain: '.yohobuy.com', 53 domain: '.yohobuy.com',
57 - path: '/' 54 + path: '/',
58 }); 55 });
59 56
60 - location.href = loginUrl || `${location.origin}/xianyu/passport/login/taobao`; 57 + location.href =
  58 + loginUrl || `${location.origin}/xianyu/passport/login/taobao`;
61 return; 59 return;
62 } 60 }
63 -} 61 +};
64 62
65 -yoho.authRealName = async() => { 63 +yoho.authRealName = async () => {
66 if (await yoho.auth()) { 64 if (await yoho.auth()) {
67 let res = await api.get('/api/ufo/sellerOrder/entryStatus'); 65 let res = await api.get('/api/ufo/sellerOrder/entryStatus');
68 66
@@ -71,7 +69,7 @@ yoho.authRealName = async() => { @@ -71,7 +69,7 @@ yoho.authRealName = async() => {
71 69
72 if (!get(res.data, 'isZhiMaCertWithPhoto')) { 70 if (!get(res.data, 'isZhiMaCertWithPhoto')) {
73 router.push({ 71 router.push({
74 - name: 'passport.auth' 72 + name: 'passport.auth',
75 }); 73 });
76 return; 74 return;
77 } 75 }
@@ -82,19 +80,19 @@ yoho.authRealName = async() => { @@ -82,19 +80,19 @@ yoho.authRealName = async() => {
82 80
83 return { 81 return {
84 code: 403, 82 code: 403,
85 - message: '未登录' 83 + message: '未登录',
86 }; 84 };
87 -} 85 +};
88 86
89 const fetchAsycData = (matched, r) => { 87 const fetchAsycData = (matched, r) => {
90 const asyncDataPromises = matched 88 const asyncDataPromises = matched
91 - .map(({asyncData}) => asyncData && asyncData({store, router: r})).  
92 - filter(p => p); 89 + .map(({ asyncData }) => asyncData && asyncData({ store, router: r }))
  90 + .filter(p => p);
93 91
94 return Promise.all(asyncDataPromises); 92 return Promise.all(asyncDataPromises);
95 }; 93 };
96 94
97 -const trackPage = (path) => { 95 +const trackPage = path => {
98 if (window._hmt) { 96 if (window._hmt) {
99 try { 97 try {
100 window._hmt.push(['_trackPageview', path]); 98 window._hmt.push(['_trackPageview', path]);
@@ -111,9 +109,9 @@ router.onReady(() => { @@ -111,9 +109,9 @@ router.onReady(() => {
111 param: { 109 param: {
112 F_URL: `${location.origin}${router.currentRoute.fullPath}`, 110 F_URL: `${location.origin}${router.currentRoute.fullPath}`,
113 PAGE_URL: '', 111 PAGE_URL: '',
114 - PAGE_NAME: router.currentRoute.name  
115 - }  
116 - } 112 + PAGE_NAME: router.currentRoute.name,
  113 + },
  114 + },
117 }); 115 });
118 116
119 if (isDegrade) { 117 if (isDegrade) {
@@ -121,7 +119,6 @@ router.onReady(() => { @@ -121,7 +119,6 @@ router.onReady(() => {
121 } 119 }
122 120
123 router.beforeResolve((to, from, next) => { 121 router.beforeResolve((to, from, next) => {
124 -  
125 if (from.query.bind_code) { 122 if (from.query.bind_code) {
126 app.$createThirdBind().close(); 123 app.$createThirdBind().close();
127 } else if (to.query.bind_code) { 124 } else if (to.query.bind_code) {
@@ -132,7 +129,7 @@ router.onReady(() => { @@ -132,7 +129,7 @@ router.onReady(() => {
132 trackPage(to.fullPath); 129 trackPage(to.fullPath);
133 const matched = router.getMatchedComponents(to); 130 const matched = router.getMatchedComponents(to);
134 131
135 - store.commit(ROUTE_CHANGE, {to, from}); 132 + store.commit(ROUTE_CHANGE, { to, from });
136 133
137 store.dispatch('reportYas', { 134 store.dispatch('reportYas', {
138 params: { 135 params: {
@@ -140,20 +137,20 @@ router.onReady(() => { @@ -140,20 +137,20 @@ router.onReady(() => {
140 param: { 137 param: {
141 F_URL: `${location.origin}${to.fullPath}`, 138 F_URL: `${location.origin}${to.fullPath}`,
142 PAGE_URL: `${location.origin}${from.fullPath}`, 139 PAGE_URL: `${location.origin}${from.fullPath}`,
143 - PAGE_NAME: from.name  
144 - }  
145 - } 140 + PAGE_NAME: from.name,
  141 + },
  142 + },
146 }); 143 });
147 144
148 fetchAsycData(matched, to) 145 fetchAsycData(matched, to)
149 .then(next) 146 .then(next)
150 .catch(e => { 147 .catch(e => {
151 - store.dispatch('reportError', {error: e}); 148 + store.dispatch('reportError', { error: e });
152 console.error(e); 149 console.error(e);
153 return next(); 150 return next();
154 }); 151 });
155 } catch (e) { 152 } catch (e) {
156 - store.dispatch('reportError', {error: e}); 153 + store.dispatch('reportError', { error: e });
157 return next(); 154 return next();
158 } 155 }
159 }); 156 });
@@ -161,7 +158,6 @@ router.onReady(() => { @@ -161,7 +158,6 @@ router.onReady(() => {
161 }); 158 });
162 159
163 router.onError(e => { 160 router.onError(e => {
164 - store.dispatch('reportError', {error: e});  
165 - router.push({name: 'error.500'}); 161 + store.dispatch('reportError', { error: e });
  162 + router.push({ name: 'error.500' });
166 }); 163 });
167 -  
1 <template> 1 <template>
2 <ul class="time-line-wrapper"> 2 <ul class="time-line-wrapper">
3 <li 3 <li
4 - :class="i === 0 ? 'time-line-item active' : 'time-line-item'" 4 + class="time-line-item"
5 v-for="(deliveryDetail, i) in deliveryList" 5 v-for="(deliveryDetail, i) in deliveryList"
6 :key="i" 6 :key="i"
7 > 7 >
8 - <i class="time-line-label"></i> 8 + <i
  9 + :class="
  10 + i === 0
  11 + ? 'time-line-label iconfont iconxuanzhongduigou active'
  12 + : 'time-line-label'
  13 + "
  14 + ></i>
9 <div> 15 <div>
10 <p class="content">{{ deliveryDetail.acceptRemark }}</p> 16 <p class="content">{{ deliveryDetail.acceptRemark }}</p>
11 <p class="time">{{ deliveryDetail.createTimeStr }}</p> 17 <p class="time">{{ deliveryDetail.createTimeStr }}</p>
@@ -27,7 +33,7 @@ export default { @@ -27,7 +33,7 @@ export default {
27 33
28 <style lang="scss" scoped> 34 <style lang="scss" scoped>
29 .time-line-wrapper { 35 .time-line-wrapper {
30 - padding: 50px; 36 + padding: 40px 0 80px 20px;
31 37
32 .time-line-item { 38 .time-line-item {
33 position: relative; 39 position: relative;
@@ -54,25 +60,16 @@ export default { @@ -54,25 +60,16 @@ export default {
54 display: block; 60 display: block;
55 position: absolute; 61 position: absolute;
56 left: -10px; 62 left: -10px;
57 - }  
58 -  
59 - &.active {  
60 - font-size: 32px;  
61 - color: #000;  
62 -  
63 - .content {  
64 - margin-top: 0;  
65 - }  
66 63
67 - & > i { 64 + &.active {
68 width: 40px; 65 width: 40px;
69 height: 40px; 66 height: 40px;
70 - left: -20px;  
71 - display: block;  
72 - position: absolute;  
73 - border-radius: 50%;  
74 - background-image: url("~statics/image/order/time-icon@3x.png");  
75 - background-size: contain; 67 + font-size: 40px;
  68 + line-height: 1;
  69 + left: -21px;
  70 + background: #fff;
  71 + top: -10px;
  72 + color: #000;
76 } 73 }
77 } 74 }
78 } 75 }
1 <template> 1 <template>
2 - <div class="logistics-wrapper">  
3 - <div class="header">  
4 - <p class="title">{{ logisticInfo.expressSender }}</p>  
5 - <img class="step" alt="" :src="stageImgUrl" />  
6 - </div>  
7 - <!-- 物流信息 -->  
8 - <div v-if="logisticInfo.wayBillCode" class="platform-delivery-info">  
9 - <div class="icon-wrapper">  
10 - <i class="icon"></i>  
11 - </div>  
12 - <div>  
13 - <p>  
14 - <span>快递公司:</span>  
15 - <span>  
16 - {{ logisticInfo.expressCompanyName }}  
17 - </span>  
18 - <span class="platform-info">{{ platformName }}</span>  
19 - </p>  
20 - <p>  
21 - <span>快递单号:</span>  
22 - <span>  
23 - {{ logisticInfo.wayBillCode }}  
24 - </span>  
25 - </p> 2 + <layout-app>
  3 + <div class="logistics-wrapper">
  4 + <div class="header">
  5 + <!-- <p class="title">{{ logisticInfo.expressSender }}</p> -->
  6 + <img class="step" alt="" :src="stageImgUrl" />
26 </div> 7 </div>
27 - </div> 8 + <div class="content">
  9 + <!-- 物流信息 -->
  10 + <div v-if="logisticInfo.wayBillCode" class="platform-delivery-info">
  11 + <div class="icon-wrapper">
  12 + <i class="icon"></i>
  13 + </div>
  14 + <div>
  15 + <p>
  16 + <span>快递公司:</span>
  17 + <span>
  18 + {{ logisticInfo.expressCompanyName }}
  19 + </span>
  20 + <span class="platform-info">{{ platformName }}</span>
  21 + </p>
  22 + <p>
  23 + <span>快递单号:</span>
  24 + <span>
  25 + {{ logisticInfo.wayBillCode }}
  26 + </span>
  27 + </p>
  28 + </div>
  29 + </div>
28 30
29 - <div class="delivery-detail" v-for="(detailInfo, i) in detailList" :key="i">  
30 - <p>{{ detailInfo.title }}</p>  
31 - <time-line :deliveryList="detailInfo.detailList" /> 31 + <div
  32 + class="delivery-detail"
  33 + v-for="(detailInfo, i) in detailList"
  34 + :key="i"
  35 + >
  36 + <span class="title">{{ detailInfo.title }}</span>
  37 + <time-line :deliveryList="detailInfo.detailList" />
  38 + </div>
  39 + </div>
32 </div> 40 </div>
33 - </div> 41 + </layout-app>
34 </template> 42 </template>
35 43
36 <script> 44 <script>
@@ -93,24 +101,43 @@ export default { @@ -93,24 +101,43 @@ export default {
93 height: 100vh; 101 height: 100vh;
94 -webkit-box-orient: vertical; 102 -webkit-box-orient: vertical;
95 103
96 - .step {  
97 - display: block;  
98 - margin: 0 auto;  
99 - height: 100px;  
100 - } 104 + .content {
  105 + padding: 0 40px;
101 106
102 - .platform-delivery-info {  
103 - display: flex; 107 + .delivery-detail {
  108 + .title {
  109 + font-size: 24px;
  110 + padding: 8px 18px 6px 18px;
  111 + background: #f0f0f0;
  112 + display: inline-block;
  113 + }
  114 + }
104 115
105 - .icon-wrapper {  
106 - width: 48px;  
107 - background-color: red; 116 + .platform-delivery-info {
  117 + display: flex;
108 118
109 - .icon {  
110 - display: block;  
111 - padding-bottom: 100%; 119 + .icon-wrapper {
  120 + width: 48px;
  121 + background-color: red;
  122 +
  123 + .icon {
  124 + display: block;
  125 + padding-bottom: 100%;
  126 + }
112 } 127 }
113 } 128 }
114 } 129 }
  130 +
  131 + .header {
  132 + padding-bottom: 60px;
  133 + border-bottom: 1px solid #eee;
  134 + margin-bottom: 38px;
  135 +
  136 + .step {
  137 + display: block;
  138 + margin: 0 auto;
  139 + height: 100px;
  140 + }
  141 + }
115 } 142 }
116 </style> 143 </style>