fe / yohoblk-wap · Commits

Go to a project

Authored by 陈峰
Commit 4a34316e293cd6b37a7225cda1be8c799a881ac7 1 parent 35c8076e

yas

Inline Side-by-side
Showing 20 changed files with 200 additions and 69 deletions
... ... @@ -80,7 +80,7 @@ module.exports = {
port: '4444' // influxdb port
},
console: {
level: 'info',
level: 'debug',
colorize: 'all',
prettyPrint: true
}
... ...
... ... @@ -27,6 +27,14 @@ if (isYohoBuy && !$appLink) {
$appLink.className = 'no-intercept';
body.appendChild($appLink);
setTimeout(() => {
if (window.newBlk) { // 如果是新版blk框架屏蔽页面跳转时走yas上报，统一走新版框架上报
$appLink.onclick = (evt) => {
evt.stopPropagation();
};
}
}, 0);
}
/* 提示信息 */
... ...
... ... @@ -262,6 +262,16 @@ export default {
if (history.replaceState) {
history.replaceState({}, '', location.pathname + '?'+ query);
}
if (filter.gender) {
if (window._yas && window._yas.sendAppLogs) {
window._yas.sendAppLogs({
appop: 'YB_BLK_LIST_GENDER_C',
param: JSON.stringify({
gender: filter.gender
})
}, true);
}
}
bus.$emit('fold.choice.except');
bus.$emit('filter.change', {
... ...
<template>
<v-touch tag="a" @tap="click">
<v-touch tag="span" class="link-a" @tap="click">
<slot></slot>
</v-touch>
</template>
<script>
import parse from 'yoho-qs/parse';
import {REPORT_YAS} from 'store/yoho/types';
import parse from 'yoho-qs/parse';
export default {
export default {
name: 'ALink',
props: {
href: [String],
to: String
to: String,
yas: Object,
yasF: Number,
yasI: Number
},
methods: {
click() {
... ... @@ -32,15 +36,37 @@
const route = this.$router.resolve(routeUrl).route;
if (route.matched.length) {
this.reportYas(`${location.origin}${routeUrl}`);
this.$router.push(routeUrl);
} else {
this.reportYas(url);
this.dispatch(url);
}
} else if (this.to) {
this.reportYas(`${location.origin}${this.to}`);
this.$router.push(this.to);
}
},
reportYas(url) {
const param = {
F_URL: url,
PAGE_URL: `${location.origin}${this.$route.fullPath}`,
PAGE_NAME: this.$route.name
};
if (this.yas) {
param.F_ID = this.yas.template_id;
param.F_NM = this.yas.template_name;
param.F_INDEX = (this.yasF || 0) + 1;
param.I_INDEX = (this.yasI || 0) + 1;
}
this.$store.dispatch(REPORT_YAS, {
params: {
appop: 'YB_H5_PAGE_FLR_C',
param
}
});
},
dispatch(url) {
const origin = location.origin;
const defaultTitleMap = {
... ... @@ -127,7 +153,7 @@
};
if (this.$yoho.isApp || this.$yoho.isYohoBuy) {
let titleMap ={...defaultTitleMap};
let titleMap = {...defaultTitleMap};
let [path, qs] = url.split('?');
qs = parse(qs);
... ... @@ -197,7 +223,7 @@
}
}
}
};
};
</script>
<style>
... ...
<template>
<a-link :href="href">
<a-link :href="href" :yas="yas" :yas-f="yasF" :yas-i="yasI">
<slot></slot>
</a-link>
</template>
... ... @@ -14,7 +14,10 @@ export default {
};
},
props: {
value: [Object]
value: [Object],
yas: Object,
yasF: Number,
yasI: Number
},
computed: {
...mapState(['yoho'])
... ... @@ -27,8 +30,8 @@ export default {
methods: {
getLink(product) {
let {product_skn} = product;
let href = `/product/pro_${product_skn}.html`;
if (this.yoho.env.isYohoBuy) {
let goParams = {
action: 'go.productDetail',
... ... @@ -50,7 +53,7 @@ export default {
}
}
}
}
};
</script>
<style>
... ...
<template>
<div class="resource-category">
<a-link class="cate-label" :href="brandLink">品牌<i class="icon icon-right"></i></a-link>
<div v-for="(item, index) in sort" v-if="item.sub">
<a-link class="cate-label" :href="brandLink" :yas="value" :yas-f="index">品牌<i class="icon icon-right"></i></a-link>
<div v-for="(item, index) in sort" v-if="item.sub" :key="index">
<p class="cate-label" @click="toggle(index)">{{item.category_name
}}<i class="icon" :class="sortClass[index]"></i></p>
<div class="cate-items" v-if="show[index]">
<a-link class="cate-item"
:href="`/product/list?sort=${getAllSortId(index)}&sort_name=全部${item.category_name}&gender=${genderCvt}`">
:href="`/product/list?sort=${getAllSortId(index)}&sort_name=全部${item.category_name}&gender=${genderCvt}`"
:yas="value"
:yas-f="index">
{{`全部${item.category_name}`}}</a-link>
<a-link
:href="`/product/list?sort=${sub.relation_parameter.sort}&sort_name=${sub.category_name}&gender=${genderCvt}`"
class="cate-item" v-for="sub in item.sub" :key="sub.category_id">{{sub.category_name}}
class="cate-item"
v-for="sub in item.sub"
:key="sub.category_id"
:yas="value"
:yas-f="index">{{sub.category_name}}
</a-link>
</div>
</div>
... ... @@ -18,19 +24,19 @@
</template>
<script>
import _ from 'lodash/core';
import Resource from './resource';
export default {
name: 'ResourceCategory',
props: {
value: Object
value: Object,
index: Number
},
data() {
return {
show: [],
sortClass: []
}
};
},
computed: {
brandLink() {
... ... @@ -40,10 +46,10 @@ export default {
return { men: '1,3', women: '2,3' }[this.gender];
},
gender() {
return this.value.gender;
return this.value.data.gender;
},
sort() {
return this.value.sort;
return this.value.data.sort;
}
},
methods: {
... ... @@ -55,7 +61,7 @@ export default {
});
},
getAllSortId(idx) {
return this.value.sort[idx].sub.map(sort=>sort.relation_parameter.sort).join(',') + ',';
return this.value.data.sort[idx].sub.map(sort=>sort.relation_parameter.sort).join(',') + ',';
}
},
created() {
... ...
... ... @@ -3,7 +3,7 @@
<awesome-swiper name="mySwiper" :options="swiperOption" class="swipe">
<div class="swiper-wrapper" @click="activeLink">
<div class="swiper-slide"
v-for="focus in value"
v-for="focus in value.data"
:key="focus.src"
:style="{backgroundColor: focus.bgColor}">
<img-format :src="focus.src" :w="750" :h="480"></img-format>
... ... @@ -11,7 +11,7 @@
</div>
<div class="swiper-pagination"></div>
</awesome-swiper>
<a-link ref="linkA" :href="activeHref"></a-link>
<a-link ref="linkA" :href="activeHref" :yas="value" :yas-f="index" :yas-i="imageIndex"></a-link>
</div>
</template>
... ... @@ -21,7 +21,8 @@
export default {
name: 'ResourceFocusImage',
props: {
value: Array
value: Object,
index: Number
},
data() {
return {
... ... @@ -35,9 +36,14 @@
}
};
},
computed: {
imageIndex() {
return this.mySwiper ? this.mySwiper.realIndex : 0;
}
},
methods: {
activeLink() {
const img = this.value[this.mySwiper.realIndex];
const img = this.value.data[this.mySwiper.realIndex];
if (img) {
this.activeHref = img.url;
... ...
<template>
<resource class="no-padding-right">
<ul class="resource-goods">
<li class="product-item" v-for="(item, index) in value" :key="index">
<product-link :value="item" class="link"></product-link>
<li class="product-item" v-for="(item, pi) in value.data" :key="pi">
<product-link :value="item" class="link" :yas="value" :yas-f="index" :yas-i="pi"></product-link>
<img-format :lazy="lazy" :src="item.src" :w="94" :h="125"></img-format>
<div class="ellipsis">
<p class="title">{{item.product_name}}</p>
... ... @@ -20,7 +20,8 @@ export default {
name: 'ResourceGoods',
props: {
value: Array,
lazy: Boolean
lazy: Boolean,
index: Number
},
computed: {
},
... ...
<template>
<resource class="no-padding-right" v-if="showFloor">
<ul class="resource-blk-new-products" v-if="value.showType == 1">
<li class="product-item" v-for="(item, index) in value.list" :key="index">
<product-link :value="item" class="link"></product-link>
<ul class="resource-blk-new-products" v-if="value.data.showType == 1">
<li class="product-item" v-for="(item, pi) in value.data.list" :key="pi">
<product-link :value="item" class="link" :yas="value" :yas-f="index" :yas-i="pi"></product-link>
<img-format :lazy="lazy" :src="item.default_images" :w="188" :h="250"></img-format>
<div class="ellipsis">
<p class="title" v-if="item.brand_name">{{item.brand_name}}</p>
... ... @@ -11,10 +11,10 @@
</div>
</li>
</ul>
<ul class="resource-blk-new-products" v-if="value.showType == 2">
<ul class="resource-blk-new-products" v-if="value.data.showType == 2">
<div class="one">
<li class="product-item" v-for="(item, index) in value.list" :key="index" v-if="index % 2 == 0">
<product-link :value="item" class="link"></product-link>
<li class="product-item" v-for="(item, pi) in value.data.list" :key="pi" v-if="pi % 2 == 0">
<product-link :value="item" class="link" :yas="value" :yas-f="index" :yas-i="pi"></product-link>
<img-format :lazy="lazy" :src="item.default_images" :w="188" :h="250"></img-format>
<div class="ellipsis">
<p class="title" v-if="item.brand_name">{{item.brand_name}}</p>
... ... @@ -24,8 +24,8 @@
</li>
</div>
<div class="two">
<li class="product-item" v-for="(item, index) in value.list" :key="index" v-if="index % 2 == 1">
<product-link :value="item" class="link"></product-link>
<li class="product-item" v-for="(item, pi) in value.data.list" :key="pi" v-if="pi % 2 == 1">
<product-link :value="item" class="link" :yas="value" :yas-f="index" :yas-i="pi"></product-link>
<img-format :lazy="lazy" :src="item.default_images" :w="188" :h="250"></img-format>
<div class="ellipsis">
<p class="title" v-if="item.brand_name">{{item.brand_name}}</p>
... ... @@ -45,12 +45,13 @@ export default {
name: 'ResourceBlkNewProductList',
props: {
value: Object,
lazy: Boolean
lazy: Boolean,
index: Number
},
computed: {
showFloor() {
return this.value.showType == 1 && this.value.list && this.value.list.length > 3 ||
this.value.showType == 2 && this.value.list && this.value.list.length > 7;
return this.value.data.showType === 1 && this.value.data.list && this.value.data.list.length > 3 ||
this.value.data.showType === 2 && this.value.data.list && this.value.data.list.length > 7;
}
},
components: {Resource}
... ...
<template>
<resource class="no-padding-right">
<ul class="resource-products">
<li class="product-item" v-for="(item, index) in value.list" :key="index">
<li class="product-item" v-for="(item, index) in value.data.list" :key="index">
<img-format :lazy="lazy" :src="item.default_images" :w="94" :h="125"></img-format>
<div class="ellipsis">
<p class="brand" v-if="item.brand_name">{{item.brand_name}}</p>
... ... @@ -20,7 +20,8 @@ export default {
name: 'ResourceProductList',
props: {
value: Object,
lazy: Boolean
lazy: Boolean,
index: Number
},
computed: {
},
... ...
<template>
<resource class="resource-single-image">
<a-link
:title="value.title"
:title="value.data.title"
:href="img.url"
v-for="(img, index) in value.list"
:key="index">
v-for="(img, pi) in value.data.list"
:key="pi"
:yas="value"
:yas-f="index">
<img-format
:lazy="lazy"
:src="img.src"
:w="value.imageWidth"
:h="value.imageHeight"
:w="value.data.imageWidth"
:h="value.data.imageHeight"
:alt="img.alt">
</img-format>
</a-link>
... ... @@ -23,7 +25,8 @@ export default {
name: 'ResourceSingleImage',
props: {
value: Object,
lazy: Boolean
lazy: Boolean,
index: Number
},
components: {Resource}
};
... ...
<template>
<resource class="no-padding-right">
<ul class="resource-tf-goods">
<li class="product-item" v-for="(item, index) in value.list" :key="index">
<product-link :value="item" class="link"></product-link>
<li class="product-item" v-for="(item, pi) in value.data.list" :key="pi">
<product-link :value="item" class="link" :yas="value" :yas-f="index" :yas-i="pi"></product-link>
<img-format :lazy="lazy" :src="item.default_images" :w="188" :h="250"></img-format>
<div class="ellipsis">
<p class="title" v-if="item.product_name">{{item.product_name}}</p>
... ... @@ -20,7 +20,8 @@ export default {
name: 'ResourceTfGoodsList',
props: {
value: Object,
lazy: Boolean
lazy: Boolean,
index: Number
},
computed: {
},
... ...
<template>
<resource class="resource-ti-image">
<div class="resource-ti-image-item">
<a-link :href="value.list[0].url">
<img-format :lazy="lazy" :src="value.list[0].src" :w="value.imageWidth"
:h="value.imageHeight"></img-format>
<a-link :href="value.data.list[0].url" :yas="value" :yas-f="index" :yas-i="0">
<img-format :lazy="lazy" :src="value.data.list[0].src" :w="value.data.imageWidth"
:h="value.data.imageHeight"></img-format>
</a-link>
</div>
<div class="split"></div>
<div class="resource-ti-image-item">
<a-link :href="value.list[1].url">
<img-format :lazy="lazy" :src="value.list[1].src" :w="value.imageWidth"
:h="value.imageHeight"></img-format>
<a-link :href="value.data.list[1].url" :yas="value" :yas-f="index" :yas-i="1">
<img-format :lazy="lazy" :src="value.data.list[1].src" :w="value.data.imageWidth"
:h="value.data.imageHeight"></img-format>
</a-link>
</div>
</resource>
... ... @@ -23,7 +23,8 @@ export default {
name: 'ResourceTwoImage',
props: {
value: Object,
lazy: Boolean
lazy: Boolean,
index: Number
},
components: {Resource}
};
... ...
... ... @@ -3,6 +3,7 @@ import Vue from 'vue';
import {
ROUTE_CHANGE,
PAGE_INIT_VISIBLE,
REPORT_YAS,
} from 'store/yoho/types';
import FastClick from 'fastclick';
import {createApp} from './app';
... ... @@ -17,9 +18,10 @@ import 'statics/scss/font.scss';
FastClick.attach(document.body);
const {app, router, store} = createApp();
window.newBlk = true;
if (window.__INITIAL_STATE__) {
store.replaceState(window.__INITIAL_STATE__);
}
... ... @@ -48,6 +50,16 @@ router.onReady(() => {
if (window._hmt) {
window._hmt.push(['_trackPageview', to.fullPath]);
}
store.dispatch(REPORT_YAS, {
params: {
appop: 'YB_H5_PAGE_OPEN_L',
param: {
F_URL: `${location.origin}${to.fullPath}`,
PAGE_URL: `${location.origin}${from.fullPath}`,
PAGE_NAME: from.name
}
}
});
Promise.all(matched.map(({asyncData}) =>
asyncData && asyncData({store, router: to})))
... ...
... ... @@ -17,7 +17,8 @@
<component
:is="component.template_name"
v-for="(component, index) in channel.about.filter(c => ['newSingleImage'].some(k => k === c.template_name) )"
:value="component.data"
:value="component"
:index="index"
:key="index"></component>
</layout-body>
</template>
... ... @@ -30,7 +31,6 @@ import {mapState} from 'vuex';
import {
ResourceSingleImage
} from 'components/resources';
import components from 'components/resources';
export default {
name: 'About',
... ... @@ -40,7 +40,7 @@ export default {
computed: {
...mapState(['channel']),
},
beforeRouteEnter (to, from, next) {
beforeRouteEnter(to, from, next) {
next(vm => {
if (vm.$yoho && vm.$yoho.isAndroid) {
vm.$yoho.blkBackStatus(true);
... ...
... ... @@ -15,7 +15,8 @@
:is="component.template_name"
v-for="(component, index) in (floors || []).filter(c => ['twoPicture', 'goods', 'tfGoodsList', 'focus', 'blkCategory', 'newSingleImage', 'BlkNewProductFloorResource'].some(k => k === c.template_name) )"
:lazy="index > 5"
:value="component.data"
:value="component"
:index="index"
:key="index"></component>
</scroller>
</layout-body>
... ... @@ -27,6 +28,7 @@
SET_GENDER,
FETCH_CHANNEL_REQUEST,
} from 'store/channel/types';
import {REPORT_YAS} from 'store/yoho/types';
import {mapState} from 'vuex';
import {
ResourceGoods,
... ... @@ -49,11 +51,22 @@
men: '男士',
women: '女士'
}
}
};
},
methods: {
searchSliderSwitch() {
this.searchSlider = !this.searchSlider;
if (this.searchSlider) {
this.$store.dispatch(REPORT_YAS, {
params: {
appop: 'YB_SECOND_HOME_BLK_SEARCH_C',
param: {
POS_ID: this.gender === 'men' ? 103 : 102
}
}
});
}
},
async loading() {
await this.$store.dispatch(FETCH_CHANNEL_REQUEST, {refresh: true});
... ... @@ -69,7 +82,7 @@
return this.$store.state.channel[this.gender].floors;
}
},
beforeRouteEnter (to, from, next) {
beforeRouteEnter(to, from, next) {
next(vm => {
if (vm.$yoho && vm.$yoho.isAndroid) {
vm.$yoho.blkBackStatus(true);
... ... @@ -78,6 +91,7 @@
},
asyncData({store, router: to}) {
const gender = /\/channel\/men/.test(to.path) ? 'men' : 'women';
store.commit(SET_GENDER, gender);
return store.dispatch(FETCH_CHANNEL_REQUEST, {gender});
},
... ...
... ... @@ -111,7 +111,7 @@ export default {
border-bottom: solid 1px #EEEEEE;
line-height: 86px;
a {
.link-a {
position: absolute;
top: 0;
right: 20px;
... ... @@ -126,7 +126,7 @@ export default {
padding-left: 0;
font-family: HiraginoSansGB-W3, HelveticaNeue , Tahoma, Arial;
a {
.link-a {
left: 0;
}
}
... ...
... ... @@ -22,7 +22,8 @@
v-for="(component, index) in (channel.home || []).filter(c => ['twoPicture', 'tfGoodsList', 'newSingleImage', 'BlkNewProductFloorResource'].some(k => k === c.template_name) )"
:lazy="index > 5"
v-if="loadComponent || index < 6"
:value="component.data"
:value="component"
:index="index"
:key="index"></component>
</div>
</scroller>
... ... @@ -42,6 +43,7 @@ import ResourceTfGoodsList from 'components/resources/resource-tfgoods-list';
import {SearchSlider} from 'components/search';
import {mapState} from 'vuex';
import {HomeSlider} from './components';
import {REPORT_YAS} from 'store/yoho/types';
export default {
name: 'Channel',
... ... @@ -61,15 +63,39 @@ export default {
methods: {
homeSliderSwitch() {
this.homeSlider = !this.homeSlider;
if (this.homeSlider) {
this.$store.dispatch(REPORT_YAS, {
params: {
appop: 'YB_SECOND_HOME_BLK_SIDEBAR_C'
}
});
}
},
searchSliderSwitch() {
this.searchSlider = !this.searchSlider;
if (this.searchSlider) {
this.$store.dispatch(REPORT_YAS, {
params: {
appop: 'YB_SECOND_HOME_BLK_SEARCH_C',
param: {
POS_ID: 101
}
}
});
}
},
async loading() {
await this.$store.dispatch(FETCH_HOME_REQUEST, true);
this.$refs.scroller.stop();
},
goBack() {
this.$store.dispatch(REPORT_YAS, {
params: {
appop: 'YB_SECOND_HOME_BLK_BACK_C'
}
});
this.$yoho.goNewBack();
}
},
... ...
... ... @@ -3,7 +3,8 @@ import {
SET_TITLE,
ROUTE_CHANGE,
INIT_ROUTE_CHANGE,
PAGE_INIT_VISIBLE
PAGE_INIT_VISIBLE,
REPORT_YAS,
} from './types';
import _ from 'lodash/core';
... ... @@ -58,6 +59,16 @@ export function createYoho() {
[PAGE_INIT_VISIBLE](state, {visible}) {
state.visible = visible;
}
},
actions: {
[REPORT_YAS](action, {params: {appop, param}, asyncindx = false}) {
if (window._yas) {
window._yas.sendAppLogs({
appop,
param: JSON.stringify(param)
}, asyncindx);
}
}
}
};
}
... ...
... ... @@ -3,3 +3,4 @@ export const SET_TITLE = 'SET_TITLE';
export const ROUTE_CHANGE = 'ROUTE_CHANGE';
export const INIT_ROUTE_CHANGE = 'INIT_ROUTE_CHANGE';
export const PAGE_INIT_VISIBLE = 'PAGE_INIT_VISIBLE';
export const REPORT_YAS = 'REPORT_YAS';
... ...