fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by Tao
Commit 4ee1bff59fbd98c18266ddf408e60d1305753d48 2 parents c36a3dfb 13c8672d

modify nav

Inline Side-by-side
Showing 12 changed files with 188 additions and 93 deletions
... ... @@ -191,7 +191,6 @@ export default {
}
.change-bid-price-wrapper {
position: absolute;
width: 600px;
background-color: #fff;
transform: scale(0.9);
... ...
... ... @@ -48,7 +48,16 @@ export default {
border-color: #f5f5f5;
}
/deep/ input::-webkit-input-placeholder {
font-size: 0.9rem;
padding: 0.2rem;
bottom: 0.4rem;
}
/deep/ .cube-input-field {
font-family: "DINAlternate-Bold", "ufofont", "PingFang-SC-Regular", sans-serif;
padding: 0.25rem;
font-size: 1rem;
color: #000;
}
}
... ...
... ... @@ -4,44 +4,42 @@
</div>
<div v-else>
<LayoutApp title="选择地址" :show-back="true" :back-action="goBack">
<CubeScroll class="main-container" ref="scroll" :options="scrollOpts">
<div class="user-list">
<div
v-for="(item, index) in addressList"
:key="index"
class="item"
@click="toOrderPage(item)"
>
<slot name="item" :data="item">
<div class="user-item">
<div class="user-list">
<div
v-for="(item, index) in addressList"
:key="index"
class="item"
@click="toOrderPage(item)"
>
<slot name="item" :data="item">
<div class="user-item">
<div
:class="{
'uncheck-item': item.address_id !== selectedAddressId,
'check-item': item.address_id === selectedAddressId
}"
></div>
<div class="user-info">
<div class="extra">
<p class="name">{{ item.consignee }}</p>
<p class="mobile">{{ item.mobile }}</p>
<div v-if="item.is_default === 'Y'" class="tag-btn">默认</div>
<div v-if="item.tag_code && item.tag" class="tag-btn">{{ item.tag }}</div>
<div
:class="{
'uncheck-item': item.address_id !== selectedAddressId,
'check-item': item.address_id === selectedAddressId
}"
></div>
<div class="user-info">
<div class="extra">
<p class="name">{{ item.consignee }}</p>
<p class="mobile">{{ item.mobile }}</p>
<div v-if="item.is_default === 'Y'" class="tag-btn">默认</div>
<div v-if="item.tag_code && item.tag" class="tag-btn">{{ item.tag }}</div>
<div
class="option-btn"
:data-item="JSON.stringify(item)"
:data-add="0"
@click="toEditorPage"
>编辑</div>
</div>
<p class="address">{{ item.area }}{{ item.address }}</p>
</div>
class="option-btn"
:data-item="JSON.stringify(item)"
:data-add="0"
@click="toEditorPage"
>编辑</div>
</div>
</slot>
<div class="border-line"></div>
<p class="address">{{ item.area }}{{ item.address }}</p>
</div>
</div>
</div>
<div class="add-btn" :data-add="1" @click="toEditorPage">新增地址</div>
</CubeScroll>
</slot>
<div class="border-line"></div>
</div>
</div>
<div class="add-btn" :data-add="1" @click="toEditorPage">新增地址</div>
</LayoutApp>
</div>
</template>
... ... @@ -156,19 +154,6 @@ export default {
</script>
<style lang="scss" scoped>
/deep/ {
.cube-scroll-content {
min-height: 100%;
}
.cube-scroll-list-wrapper {
overflow: auto;
}
.cube-loading-spinners {
margin: auto;
}
}
.father-img {
position: absolute;
... ... @@ -186,6 +171,7 @@ export default {
}
.user-list {
display: block;
background-color: white;
.border-line {
... ... @@ -255,14 +241,14 @@ export default {
.option-btn {
display: block;
width: 65px;
line-height: 44px;
width: 80px;
line-height: 50px;
letter-spacing: -0.29px;
color: black;
font-size: 24px;
position: absolute;
right: 40px;
text-align: right;
right: 30px;
text-align: center;
}
}
... ...
<template>
<LayoutApp :title="title" :show-back="true">
<div class="pane-body">
<div class="pane-body" ref="paneBody">
<FormItem>
<CInput
label="收货人"
... ... @@ -71,6 +71,7 @@
></Radio>
</div>
</div>
<div class="white-space"></div>
<div :class="submitClass" @touchend="onSubmit">确 认</div>
<AddressAct
... ... @@ -279,12 +280,15 @@ export default {
chooseArea() {
this.isShowProvince = true;
this.$refs.paneBody.style.overflow = 'hidden';
this.$refs.addressAct.parentHandleclick({
areaCode: this.area_code
});
},
popHidden() {
let that = this;
this.$refs.paneBody.style.overflow = 'auto';
that.isShowProvince = false;
},
modifyAddressAct(info) {
... ... @@ -402,6 +406,13 @@ export default {
}
}
.white-space {
position: relative;
display: block;
overflow: hidden;
height: 120px;
}
.wrapper-tag {
margin: 30px 0;
... ... @@ -449,7 +460,7 @@ export default {
background-color: #cccccc;
color: white;
border-radius: 40px;
position: absolute;
position: fixed;
left: 32px;
right: 32px;
bottom: 24px;
... ...
... ... @@ -509,7 +509,7 @@ export default {
align-items: center;
&.active {
font-size: 36px;
font-size: 30px;
color: #000;
font-weight: bold;
}
... ...
... ... @@ -70,6 +70,7 @@ export default {
isShow: false,
total: 0,
active: 0,
yasHeight: 0,
listBaseParams: {
isHome: true,
},
... ... @@ -107,18 +108,19 @@ export default {
};
},
computed: {
...mapState(['channelList','contentCode']),
...mapState(['channelList', 'contentCode']),
navList() {
return get(find(this.channelList.list, ['template_name', 'guessLike']), 'data') || [];
},
navInfo() {
let index = findIndex(this.channelList.list, ['template_name', 'guessLike'])
let id = get(find(this.channelList.list, ['template_name', 'guessLike']), 'template_id')
let index = findIndex(this.channelList.list, ['template_name', 'guessLike']);
let id = get(find(this.channelList.list, ['template_name', 'guessLike']), 'template_id');
return {
F_ID: id,
F_NAME: 'guessLike',
F_INDEX: index + 1
}
};
},
noItemStyle() {
return {
... ... @@ -167,7 +169,7 @@ export default {
this.refreshProductList(this.active);
},
methods: {
...mapActions(['fetchChannelList','getAllInboxCatInfo']),
...mapActions(['fetchChannelList', 'getAllInboxCatInfo']),
...mapActionsList(['fetchProductList']),
init() {
this.$nextTick(() => {
... ... @@ -295,26 +297,30 @@ export default {
I_INDEX: Number(params.index) + 1,
TAB_ID: Number(params.index) + 1,
TAB_NAME: params.title});
console.log(this.listYasParams)
}
},
getIndex({index, params}) {
this.selectedCategory = params;
this.active = Number(index);
this.isShow && this.$refs.scroll.scrollTo(this.navTop);
// this.setYasParam({index, ...params});
this.guessLikeListParams({index, ...params});
// 商品列表曝光
this.listScrollY > 0 && this.$refs.product && this.$refs.product.yasShowEvent(this.listScrollY);
this.listScrollY > 0 && this.$refs.product && this.$refs.product.yasShowEvent(this.yasHeight);
},
scrollEndHandler({y}) {
let scrollHeight = Math.abs(y);
let viewHeight = this.$refs.scroll.$el.offsetHeight;
let productListTop = this.$refs.product && this.$refs.product.$el.offsetTop || this.navTop + this.navHeight;
let listScrollY = scrollHeight + viewHeight - productListTop;
this.listScrollY = listScrollY
this.listScrollY = listScrollY;
this.yasHeight = scrollHeight - this.navTop;
// 商品列表曝光
listScrollY > 0 && this.$refs.product && this.$refs.product.yasShowEvent(listScrollY);
listScrollY > 0 && this.$refs.product && this.$refs.product.yasShowEvent(this.yasHeight);
if (scrollHeight >= this.navTop) {
return;
}
... ...
... ... @@ -54,11 +54,11 @@ export default {
}
});
},
yasShowEvent(height) {
yasShowEvent: function(height) {
// 获取列表单个元素高度
let index = 0;
if (height) {
if (Number(height) > 0) {
// 获取第一个曝光元素
let item = document.querySelector('.product-list-item');
let itemHeight = item.offsetHeight;
... ... @@ -92,6 +92,7 @@ export default {
list.map((value, i) => {
DATA.push({...this.yasParams, I_INDEX: i + index + 1, PRD_ID: value.id});
});
this.$store.dispatch('reportYas', {
params: {
param: {DATA},
... ... @@ -112,7 +113,7 @@ export default {
// 7.PRD_ID：商品id
this.$store.dispatch('reportYas', {
params: {
param: {...this.yasParams, I_INDEX: index, PRD_ID: id },
param: {...this.yasParams, I_INDEX: index + 1, PRD_ID: id },
appop: 'XY_UFO_PRD_LIST_C'
}
});
... ...
... ... @@ -96,7 +96,9 @@ export default {
};
},
activated: async function() {
if (this.yoho.direction === 'forword') {
let {list} = this.productList;
if (this.yoho.direction === 'forword' || !list.length) {
this.$refs.filtrate.hide();
Object.assign(this.$data, this.$options.data());
this.changeArrow();
... ... @@ -111,6 +113,7 @@ export default {
this.setYasParam({param: params, tab: {index: 1, name: '人气'}});
!params.order && (params.order = 'sale_desc');
await this.fetchList({...params, isReset: true});
this.$refs.product.yasShowEvent(0);
} else {
this.scrollY && this.$refs.scroll.scrollTo(this.scrollY);
}
... ...
... ... @@ -25,7 +25,7 @@
</div>
</Scroll>
<Scroll v-show="query.length" :options="scrollOptions" :data="searchSuggestList">
<div class="item-line middle" v-if="searchSuggestList.length" v-for="(item, index) of searchSuggestList" @click="goSearch({query : item.item} ,{type: 3, index})">
<div class="item-line middle" v-if="searchSuggestList.length" v-for="(item, index) of searchSuggestList" @click="goSearch({query : item.item} ,{type: 0, index: 0})">
{{item.item}}
</div>
</Scroll>
... ... @@ -60,6 +60,13 @@ export default {
this.fetchDefaultSearchWords();
this.setLocalList();
},
beforeRouteEnter: function(to, from, next) {
next(vm => {
if (from.name === 'List') {
vm.SEARCH_POS = 3;
}
});
},
computed: {
...mapState(['searchWord', 'defaultSearchWord', 'searchSuggestList']),
},
... ... @@ -108,11 +115,6 @@ export default {
}
this.localHistory = localHistory;
},
beforeRouteEnter: function(to, from, next) {
if (from.name !== 'List') {
this.SEARCH_POS = 3;
}
},
addLocalWord: function(query) {
if (this.query || query) {
let addQuery = query || this.query;
... ...
... ... @@ -111,7 +111,6 @@ export default {
buy(product) {
this.$yoho.auth()
.then((res) => {
if (res) {
this.hide();
this.updateTradeInfo({
... ... @@ -135,7 +134,33 @@ export default {
productId: get(data, 'productId', ''),
image: this.imageUrl,
skup: product.skup,
})
});
/**
* 数据埋点
* 购买确认订单
* 购买-选择尺码生成订单
* 商品详情页-选择尺码确认后上报
* 商品详情页点击出售/购买/求购按钮
* event: XY_UFO_PRD_DT_BUY_SEL_C
* 1.PRD_ID：商品ID；
* 2.PRD_SKU：商品SKU；
* 3.PRD_SIZE：尺码；
* 新增字段：
* 4.ORD_TYPE：订单类型；1-购买，2-出售，3-求购，4-变现；
*/
this.$store.dispatch('reportYas', {
params: {
appop: 'XY_UFO_PRD_DT_BUY_SEL_C',
param: {
PRD_ID: data.productId,
PRD_SKU: product.skup,
PRD_SIZE: product.size_id,
ORD_TYPE: 3,
},
},
});
this.$router.push({
name: 'buyerAskOrder',
query: {
... ... @@ -144,9 +169,7 @@ export default {
});
});
}
})
});
},
hide() {
this.$refs.popup.hide();
... ...
... ... @@ -190,6 +190,7 @@ export default {
}
this.$emit('select', {
size_name: this.selectedSize.size_name,
size_id: this.selectedSize.size_id,
productId: this.product.product_id,
storageId: this.selectedSize.storage_id,
skup: this.selectedSize.skup,
... ... @@ -220,19 +221,27 @@ export default {
/**
* 数据埋点
* 购买确认订单
* 购买-选择尺码生成订单
* 商品详情页-选择尺码确认后上报
* 商品详情页点击出售/购买/求购按钮
* event: XY_UFO_PRD_DT_SALE_C
* params: 1.TAB_ID：1-出售，2-购买，3-求购, 4-变现；
* 2.PRD_ID：商品ID；
* event: XY_UFO_PRD_DT_BUY_SEL_C
* 1.PRD_ID：商品ID；
* 2.PRD_SKU：商品SKU；
* 3.PRD_SIZE：尺码；
* 新增字段：
* 4.ORD_TYPE：订单类型；1-购买，2-出售，3-求购，4-变现；
*/
this.$store.dispatch('reportYas', {
params: {
appop: 'XY_UFO_PRD_DT_BUY_SEL_C',
param: {
TAB_ID: 4,
PRD_ID: this.product.product_id,
PRD_ID: this.product.product_id,
PRD_SKU: get(this.selectedSize, 'bid_skup', 0),
PRD_SIZE: get(this.selectedSize, 'size_id', 0),
ORD_TYPE: 4,
},
}
},
});
// 跳转变现
... ... @@ -244,9 +253,7 @@ export default {
}
});
}
});
},
},
};
... ...
... ... @@ -459,6 +459,22 @@ export default {
// 购买
buy() {
/**
* 数据埋点
* 商品详情页点击出售/购买/求购按钮
* event: XY_UFO_PRD_DT_SALE_C
* params: 1.TAB_ID：1-出售，2-购买，3-求购；
* 2.PRD_ID：商品ID；
*/
this.$store.dispatch('reportYas', {
params: {
appop: 'XY_UFO_PRD_DT_SALE_C',
param: {
TAB_ID: 2,
PRD_ID: this.productId
},
}
});
this.resetSelectedSize();
this.selectSizeConfig = {
dest: 'OrderBuyConfirm',
... ... @@ -477,6 +493,22 @@ export default {
return;
}
/**
* 数据埋点
* 商品详情页点击出售/购买/求购按钮
* event: XY_UFO_PRD_DT_SALE_C
* params: 1.TAB_ID：1-出售，2-购买，3-求购；
* 2.PRD_ID：商品ID；
*/
this.$store.dispatch('reportYas', {
params: {
appop: 'XY_UFO_PRD_DT_SALE_C',
param: {
TAB_ID: 1,
PRD_ID: this.productId
},
}
});
this.resetSelectedSize();
this.selectSizeConfig = {
dest: 'OrderSellConfirm',
... ... @@ -490,17 +522,25 @@ export default {
async onSelectTradeProduct(tradeProduct) {
/**
* 数据埋点
* 购买确认订单
* 购买-选择尺码生成订单
* 商品详情页-选择尺码确认后上报
* 商品详情页点击出售/购买/求购按钮
* event: XY_UFO_PRD_DT_SALE_C
* params: 1.TAB_ID：1-出售，2-购买，3-求购；
* 2.PRD_ID：商品ID；
* event: XY_UFO_PRD_DT_BUY_SEL_C
* 1.PRD_ID：商品ID；
* 2.PRD_SKU：商品SKU；
* 3.PRD_SIZE：尺码；
* 新增字段：
* 4.ORD_TYPE：订单类型；1-购买，2-出售，3-求购，4-变现；
*/
this.$store.dispatch('reportYas', {
params: {
appop: 'XY_UFO_PRD_DT_BUY_SEL_C',
param: {
TAB_ID: this.selectSizeConfig.type === 'buy' ? 2 : 1,
PRD_ID: tradeProduct.productId
PRD_ID: tradeProduct.productId,
PRD_SKU: tradeProduct.skup,
PRD_SIZE: tradeProduct.size_id,
ORD_TYPE: this.selectSizeConfig.type === 'buy' ? 1 : 2
},
}
});
... ... @@ -573,6 +613,14 @@ export default {
// 打开求购列表
qiugou() {
this.showBidSheet = true;
/**
* 数据埋点
* 商品详情页点击出售/购买/求购按钮
* event: XY_UFO_PRD_DT_SALE_C
* params: 1.TAB_ID：1-出售，2-购买，3-求购；
* 2.PRD_ID：商品ID；
*/
this.$store.dispatch('reportYas', {
params: {
appop: 'XY_UFO_PRD_DT_SALE_C',
... ...