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
import Vue from 'vue';
import {
ROUTE_CHANGE,
} from 'store/yoho/types';
import {createApp} from './app';
import {createApi} from 'create-api';
import {Style, Toast, Dialog, DatePicker, ImagePreview} from 'cube-ui'; //eslint-disable-line
import {get} from 'lodash';
import { ROUTE_CHANGE } from 'store/yoho/types';
import { createApp } from './app';
import { createApi } from 'create-api';
import { Style, Toast, Dialog, DatePicker, ImagePreview } from 'cube-ui'; //eslint-disable-line
import { get } from 'lodash';
import Lazy from 'vue-lazyload';
import cookie from 'yoho-cookie';
import yoho from 'common/yoho';
... ... @@ -23,7 +21,7 @@ const $app = document.getElementById('app');
const isDegrade = Boolean(!($app && $app.attributes['data-server-rendered']));
const context = get(window, '__INITIAL_STATE__.yoho.context');
const {app, router, store} = createApp(context);
const { app, router, store } = createApp(context);
const api = createApi();
if (window.__INITIAL_STATE__) {
... ... @@ -45,8 +43,7 @@ Vue.use(OrderCouponList);
Vue.use(OrderPromotionList);
Vue.use(Bind);
yoho.auth = async(loginUrl) => {
yoho.auth = async loginUrl => {
let user = await sdk.getUser();
if (user && user.uid) {
... ... @@ -54,15 +51,16 @@ yoho.auth = async(loginUrl) => {
} else {
cookie.set('third_backurl', location.href, {
domain: '.yohobuy.com',
path: '/'
path: '/',
});
location.href = loginUrl || `${location.origin}/xianyu/passport/login/taobao`;
location.href =
loginUrl || `${location.origin}/xianyu/passport/login/taobao`;
return;
}
}
};
yoho.authRealName = async() => {
yoho.authRealName = async () => {
if (await yoho.auth()) {
let res = await api.get('/api/ufo/sellerOrder/entryStatus');
... ... @@ -71,7 +69,7 @@ yoho.authRealName = async() => {
if (!get(res.data, 'isZhiMaCertWithPhoto')) {
router.push({
name: 'passport.auth'
name: 'passport.auth',
});
return;
}
... ... @@ -82,19 +80,19 @@ yoho.authRealName = async() => {
return {
code: 403,
message: '未登录'
message: '未登录',
};
}
};
const fetchAsycData = (matched, r) => {
const asyncDataPromises = matched
.map(({asyncData}) => asyncData && asyncData({store, router: r})).
filter(p => p);
.map(({ asyncData }) => asyncData && asyncData({ store, router: r }))
.filter(p => p);
return Promise.all(asyncDataPromises);
};
const trackPage = (path) => {
const trackPage = path => {
if (window._hmt) {
try {
window._hmt.push(['_trackPageview', path]);
... ... @@ -111,9 +109,9 @@ router.onReady(() => {
param: {
F_URL: `${location.origin}${router.currentRoute.fullPath}`,
PAGE_URL: '',
PAGE_NAME: router.currentRoute.name
}
}
PAGE_NAME: router.currentRoute.name,
},
},
});
if (isDegrade) {
... ... @@ -121,7 +119,6 @@ router.onReady(() => {
}
router.beforeResolve((to, from, next) => {
if (from.query.bind_code) {
app.$createThirdBind().close();
} else if (to.query.bind_code) {
... ... @@ -132,7 +129,7 @@ router.onReady(() => {
trackPage(to.fullPath);
const matched = router.getMatchedComponents(to);
store.commit(ROUTE_CHANGE, {to, from});
store.commit(ROUTE_CHANGE, { to, from });
store.dispatch('reportYas', {
params: {
... ... @@ -140,20 +137,20 @@ router.onReady(() => {
param: {
F_URL: `${location.origin}${to.fullPath}`,
PAGE_URL: `${location.origin}${from.fullPath}`,
PAGE_NAME: from.name
}
}
PAGE_NAME: from.name,
},
},
});
fetchAsycData(matched, to)
.then(next)
.catch(e => {
store.dispatch('reportError', {error: e});
store.dispatch('reportError', { error: e });
console.error(e);
return next();
});
} catch (e) {
store.dispatch('reportError', {error: e});
store.dispatch('reportError', { error: e });
return next();
}
});
... ... @@ -161,7 +158,6 @@ router.onReady(() => {
});
router.onError(e => {
store.dispatch('reportError', {error: e});
router.push({name: 'error.500'});
store.dispatch('reportError', { error: e });
router.push({ name: 'error.500' });
});
... ...
<template>
<ul class="time-line-wrapper">
<li
:class="i === 0 ? 'time-line-item active' : 'time-line-item'"
class="time-line-item"
v-for="(deliveryDetail, i) in deliveryList"
:key="i"
>
<i class="time-line-label"></i>
<i
:class="
i === 0
? 'time-line-label iconfont iconxuanzhongduigou active'
: 'time-line-label'
"
></i>
<div>
<p class="content">{{ deliveryDetail.acceptRemark }}</p>
<p class="time">{{ deliveryDetail.createTimeStr }}</p>
... ... @@ -27,7 +33,7 @@ export default {
<style lang="scss" scoped>
.time-line-wrapper {
padding: 50px;
padding: 40px 0 80px 20px;
.time-line-item {
position: relative;
... ... @@ -54,25 +60,16 @@ export default {
display: block;
position: absolute;
left: -10px;
}
&.active {
font-size: 32px;
color: #000;
.content {
margin-top: 0;
}
& > i {
&.active {
width: 40px;
height: 40px;
left: -20px;
display: block;
position: absolute;
border-radius: 50%;
background-image: url("~statics/image/order/time-icon@3x.png");
background-size: contain;
font-size: 40px;
line-height: 1;
left: -21px;
background: #fff;
top: -10px;
color: #000;
}
}
}
... ...
<template>
<div class="logistics-wrapper">
<div class="header">
<p class="title">{{ logisticInfo.expressSender }}</p>
<img class="step" alt="" :src="stageImgUrl" />
</div>
<!-- 物流信息 -->
<div v-if="logisticInfo.wayBillCode" class="platform-delivery-info">
<div class="icon-wrapper">
<i class="icon"></i>
</div>
<div>
<p>
<span>快递公司:</span>
<span>
{{ logisticInfo.expressCompanyName }}
</span>
<span class="platform-info">{{ platformName }}</span>
</p>
<p>
<span>快递单号:</span>
<span>
{{ logisticInfo.wayBillCode }}
</span>
</p>
<layout-app>
<div class="logistics-wrapper">
<div class="header">
<!-- <p class="title">{{ logisticInfo.expressSender }}</p> -->
<img class="step" alt="" :src="stageImgUrl" />
</div>
</div>
<div class="content">
<!-- 物流信息 -->
<div v-if="logisticInfo.wayBillCode" class="platform-delivery-info">
<div class="icon-wrapper">
<i class="icon"></i>
</div>
<div>
<p>
<span>快递公司:</span>
<span>
{{ logisticInfo.expressCompanyName }}
</span>
<span class="platform-info">{{ platformName }}</span>
</p>
<p>
<span>快递单号:</span>
<span>
{{ logisticInfo.wayBillCode }}
</span>
</p>
</div>
</div>
<div class="delivery-detail" v-for="(detailInfo, i) in detailList" :key="i">
<p>{{ detailInfo.title }}</p>
<time-line :deliveryList="detailInfo.detailList" />
<div
class="delivery-detail"
v-for="(detailInfo, i) in detailList"
:key="i"
>
<span class="title">{{ detailInfo.title }}</span>
<time-line :deliveryList="detailInfo.detailList" />
</div>
</div>
</div>
</div>
</layout-app>
</template>
<script>
... ... @@ -93,24 +101,43 @@ export default {
height: 100vh;
-webkit-box-orient: vertical;
.step {
display: block;
margin: 0 auto;
height: 100px;
}
.content {
padding: 0 40px;
.platform-delivery-info {
display: flex;
.delivery-detail {
.title {
font-size: 24px;
padding: 8px 18px 6px 18px;
background: #f0f0f0;
display: inline-block;
}
}
.icon-wrapper {
width: 48px;
background-color: red;
.platform-delivery-info {
display: flex;
.icon {
display: block;
padding-bottom: 100%;
.icon-wrapper {
width: 48px;
background-color: red;
.icon {
display: block;
padding-bottom: 100%;
}
}
}
}
.header {
padding-bottom: 60px;
border-bottom: 1px solid #eee;
margin-bottom: 38px;
.step {
display: block;
margin: 0 auto;
height: 100px;
}
}
}
</style>
\ No newline at end of file
... ...