fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by 邱骏
Commit 6cc2d22f15cc1a77520eda534cc68802686708d2 2 parents 648ec8fc 854d3ad0 master ... develop feature/2019/1230-community-article feature/confirm-money feature/coupon feature/detail-images-contents feature/pay-success-resource feature/product_multiImage feature/saler_coupon hotfix/detail-imageview-close hotfix/income-order-confirm

Merge branch 'develop' into feature/detail-images-contents

Inline Side-by-side
Showing 24 changed files with 1360 additions and 136 deletions
... ... @@ -33,7 +33,9 @@ const xianyu = {
closeNavRightItem() {
if (this.isAliApp && window.WindVane) {
window.WindVane.call('WVIdleFishApi', 'setHideNavigatorRightItem', {},()=>{},()=>{})
window.WindVane.call('WVIdleFishApi', 'setHideNavigatorRightItem', {},()=>{
},()=>{
})
}
},
... ... @@ -47,12 +49,16 @@ const xianyu = {
window._xianyuShare = () => {
this.setXianyuShare(shareParam, handler);
}
// xianyu android bug: title必传切不能为空字符串，icon才能展示
// xianyu ios bug: 图片按钮无法隐藏 TOTO ali修复
const param = {
title: '∙∙∙', // 按钮名称
icon: this.isAndroid ? ' http://cdn.yoho.cn/xianyu/share-btn.png': '',
func: '_xianyuShare' // func: 'test' //点击调用函数 注意调用的函数必须挂载在window上
}
// console.log('this.isAliApp && window.WindVane', this.isAliApp , window.WindVane);
if (this.isAliApp && window.WindVane) {
window.WindVane.call('WVIdleFishApi', 'setNavigatorRightItem', {
title: '∙∙∙', // 按钮名称
func: '_xianyuShare' // func: 'test' //点击调用函数 注意调用的函数必须挂载在window上
}, function(data) {
window.WindVane.call('WVIdleFishApi', 'setNavigatorRightItem',param, function(data) {
console.log('setNavigatorRightItem success：',data);
}, function(e) {
console.log('setNavigatorRightItem error：',e);
... ...
... ... @@ -217,6 +217,12 @@ export default {
font-weight: bold;
color: #000000;
line-height: 44px;
max-width: 200px;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mobile {
... ...
... ... @@ -9,11 +9,11 @@
@scroll="scrollHandler"
@scroll-end="scrollEndHandler"
@pulling-up="onPullingUp" >
<div class="channel-body" ref="body">
<div ref="body">
<div ref="topSource" class="channel-html">
<div class="search-header middle" @click="goSearch">
<div class="search-img"></div>
<input class="search-input" type="search" disabled="true" placeholder="搜索商品名称或货号"/>
<input class="search-input" type="search" disabled="true" :placeholder="defaultSearchWord || '搜索商品名称或货号'"/>
</div>
<template v-for="(item, index) in channelList.list">
<Swiper :list="item.data" :ref="index" :PAGE_URL="PAGE_URL" :key="index" v-if="item.template_name == 'threePicture'"/>
... ... @@ -111,7 +111,7 @@ export default {
};
},
computed: {
...mapState(['channelList', 'contentCode']),
...mapState(['channelList', 'contentCode', 'defaultSearchWord']),
navList() {
return get(find(this.channelList.list, ['template_name', 'guessLike']), 'data') || [];
},
... ... @@ -151,6 +151,8 @@ export default {
this.init();
// this.getAllInboxCatInfo();
this.fetchDefaultSearchWord()
this.PAGE_URL = window.location.href;
if (!this.reported) {
... ... @@ -189,7 +191,7 @@ export default {
this.reported = true;
},
methods: {
...mapActions(['fetchChannelList', 'getAllInboxCatInfo']),
...mapActions(['fetchChannelList', 'getAllInboxCatInfo', 'fetchDefaultSearchWord']),
...mapActionsList(['fetchProductList']),
init() {
this.$nextTick(() => {
... ... @@ -485,15 +487,15 @@ export default {
.channel-html {
padding: 20px 24px 0;
&:before {
content: "";
width: 520px;
height: 28px;
background-image: url("~statics/image/channel/server.png");
background-size: 100% 100%;
margin: 10px auto 20px;
display: block;
}
// &:before {
// content: "";
// width: 520px;
// height: 28px;
// background-image: url("~statics/image/channel/service-info.png");
// background-size: 100% 100%;
// margin: 10px auto 20px;
// display: block;
// }
&:after {
content: "";
... ...
<template>
<div class="container" v-show="showType">
<!-- <div class="title">筛选
<div class="cancel" @click="back()">取消</div>
</div> -->
<div class="content-search">
<div class="item" v-if="filterData && filterData.length" v-for="(filter,row) in filterData">
<div class="item-title">{{filter.filterName}}</div>
... ... @@ -60,13 +57,6 @@ export default {
size: [], // 尺码id
},
filterData: [],
filterVisible: false,
copyFilterParams: {
sort: [], // 品类id
brand: [], // 品牌id
gender: [], // 性别
size: [], // 尺码id
}
};
},
activated() {
... ... @@ -114,15 +104,9 @@ export default {
this.filterParams = filterParams;
},
back() {
this.filterParams = {...this.copyFilterParams};
this.hide();
},
submit() {
let routeParams = this.$route.query;
this.copyFilterParams = {...this.filterParams};
let params = {
sort: this.filterParams.sort.join(',') || routeParams.sort,
brand: this.filterParams.brand.join(','), // 品牌id
... ...
... ... @@ -3,7 +3,7 @@
<form action="javascript:void(0)">
<div class="search-header middle">
<div class="search-img"></div>
<input class="search-input" type="search" v-model="query" placeholder="Search" @input="suggest"
<input class="search-input" type="search" v-model="query" :placeholder="defaultSearchWord || 'Search'" @input="suggest"
@keyup.13="searchGoods"/>
<div class="search-clear" :class="query && 'search-clear-img'" @click="clear()"></div>
</div>
... ... @@ -51,7 +51,7 @@ export default {
},
query: '',
localHistory: [],
SEARCH_POS: 1
SEARCH_POS: 1,
};
},
activated() {
... ... @@ -70,7 +70,7 @@ export default {
});
},
computed: {
...mapState(['searchWord', 'defaultSearchWord', 'searchSuggestList']),
...mapState(['searchWord','defaultSearchWord', 'searchSuggestList']),
},
methods: {
...mapActions(['fetchSearchWords', 'fetchDefaultSearchWords', 'fetchSearchSuggest']),
... ... @@ -79,6 +79,9 @@ export default {
this.query = '';
},
searchGoods: function() {
if(!this.query && this.defaultSearchWord) {
this.query = this.defaultSearchWord;
}
this.addLocalWord();
this.yasInput({type: 0, index: 0, query: this.query});
this.$router.push({
... ...
... ... @@ -18,7 +18,7 @@
<div class="price-status">
<span class="price">￥{{ goodsInfo.goodPrice }}</span>
</div>
<p class="item-name"><span>【{{ goodsInfo.typeTag }}】</span>
<p class="item-name"><span v-if="goodsInfo.typeTag">【{{ goodsInfo.typeTag }}】</span>
{{ goodsInfo.productName }}
</p>
</div>
... ...
... ... @@ -52,7 +52,7 @@
<!-- 相关商品 -->
<top-list ref="topList" v-if="topList && topList.length !== 0" :list="topList" @itemClick="gotoProduct"
@allClick="gotoBrand"/>
<img class="ref-img" v-lazy="prdDetailTip"/>
<!-- <img class="ref-img" v-lazy="prdDetailTip"/> -->
</div>
<!-- 视频资源位 -->
... ... @@ -71,7 +71,7 @@
<img-size :src="sizeImg(videoResource.src)"/>
</a>
<img class="ref-img" v-lazy="prdDetailImage"/>
<!-- <img class="ref-img" v-lazy="prdDetailImage"/> -->
<!--尺码图片-->
<size-image :brand-id="brandId" :product-id="productId"></size-image>
... ...
<template>
<div class="list-component" v-show="showType">
<div class="list-bg">
<div class="list-item" v-if="list.length" v-for="(item, index) in list" :key="index">
<div class="item" @click="clickItem(item.itemId, item.itemName)">
<span :class="selectParams.id.includes(item.itemId) ? 'active-span' : '' ">{{item.itemName}}</span>
<div v-if="selectParams.id.includes(item.itemId)" class="select-class"></div>
</div>
</div>
</div>
<div class="list-bottom">
<div class="bottom-btn clear" @click="clear">重置</div>
<div class="bottom-btn submit" @click="submit">确定</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showType: false,
selectParams: {
id: [],
name: []
}
}
},
props: {
list: Array,
},
methods: {
show() {
this.showType = true;
},
hide() {
this.showType = false;
},
setFilterList(params) {
this.selectParams.id = params.id || [];
this.selectParams.name = params.name || [];
},
submit() {
this.$parent.updateFilterParams(this.selectParams);
this.hide();
},
clear() {
let params = {
id: [],
name: []
};
this.selectParams = params;
},
clickItem(itemId, itemName) {
let idArray = [].concat(this.selectParams.id);
let nameArray = [].concat(this.selectParams.name);
if (idArray.includes(itemId)) {
idArray = idArray.filter(item => item !== itemId);
nameArray = nameArray.filter(item => item !== itemName);
} else {
idArray.push(itemId);
nameArray.push(itemName);
}
this.selectParams.id = idArray;
this.selectParams.name = nameArray;
}
}
}
</script>
<style lang="scss" scoped>
.list-component {
position: fixed;
bottom: 0;
left: 0;
top: 186px;
width: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 9;
}
.list-bg {
display: flex;
flex-wrap: wrap;
background: #ffffff;
max-height: 480px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.list-item {
width: 50%;
padding: 0 40px;
height: 80px;
border-style: none;
overflow: hidden;
}
.item {
display: flex;
flex-direction: row;
align-items: center;
span {
font-size: 24px;
color: #999;
line-height: 80px;
letter-spacing: 0;
text-align: left;
margin-left: 20px;
}
.active-span {
color: #000;
}
}
.select-class {
margin-left: 16px;
width: 24px;
height: 24px;;
background: url(~statics/image/list/selected@3x.png) no-repeat;
background-size: contain;
}
.list-bottom {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 16px 34px;
background: #fff;
}
.bottom-btn {
height: 80px;
width: calc((100% - 24px)/2);
line-height: 80px;
text-align: center;
font-size: 32px;
border-radius: 40px;
}
.clear {
color: #333;
background: #fff;
border: 1px solid rgba(0,0,0,0.12);
}
.submit {
margin-left: 24px;
font-weight: bold;
color: #fff;
background: #002B47;
}
</style>
... ...
<template>
<div class="container" v-show="showType">
<div class="content-search" v-if="filterData && filterData.length">
<div class="item" v-for="(filter,row) in filterData">
<div class="item-title">{{filter.filterName}}</div>
<div class="item-price-input" v-if="filter.filterId === 'price'">
<div class="input-wrapper">
<Input class="price-input" v-model="lowPrice" placeholder="输入最低价格" @input="onLowerPirceChange"></Input>
</div>
<div class="horizontal-line"></div>
<div class="input-wrapper">
<Input class="price-input" v-model="highPrice" placeholder="输入最高价格" @input="onHighPirceChange"></Input>
</div>
</div>
<div v-if="filter.itemList && filter.itemList.length" class="item-list">
<div class="item-img-content"
v-if="filter.filterId === 'brand'"
:class="filterParams.brand.includes(item.itemId) && 'item-img-selected'"
v-for="(item,i) in filter.itemList"
:style="i===0 && 'margin-left:1rem'"
@click="select({filterId:filter.filterId, itemId:item.itemId, row, itemName: item.itemName})">
<div class="item-img" >
<img :src="(item.itemUrl || '').replace('http://', '//').replace('{width}', 280).replace('{height}', 140)" />
</div>
<div class="item-img-text">{{item.itemName}}</div>
</div>
<div class="item-text item-size"
v-if="filter.filterId === 'size'"
:style="i===0 && 'margin-left:1rem'"
:class="filterParams.size.includes(item.itemId) && 'item-text-selected'"
v-for="(item,i) in filter.itemList" @click="select({filterId:filter.filterId, itemId:item.itemId, row, itemName: item.itemName})">
{{item.itemName}}
</div>
<div class="item-text" v-if="filter.filterId === 'maxSort' || filter.filterId === 'gender'"
:style="i===0 && 'margin-left:1rem'"
:class="(filterParams.maxSort.includes(item.itemId) || filterParams.gender.includes(item.itemId)) && 'item-text-selected'"
v-for="(item,i) in filter.itemList" @click="select({filterId:filter.filterId, itemId:item.itemId, row, itemName: item.itemName})">
{{item.itemName}}
</div>
<div class="item-text price-size"
v-if="filter.filterId === 'price'"
:style="i===0 && 'margin-left:1rem'"
:class="filterParams.price.includes(item.itemId) && 'item-text-selected'"
v-for="(item,i) in filter.itemList" @click="select({filterId:filter.filterId, itemId:item.itemId, row, itemName: item.itemName})">
{{item.itemName}}
</div>
<div class="item-text flag-size"
v-if="filter.filterId === 'preSale_flag'"
:style="i===0 && 'margin-left:1rem'"
:class="filterParams.preSale_flag.includes(item.itemId) && 'item-text-selected'"
v-for="(item,i) in filter.itemList" @click="select({filterId:filter.filterId, itemId:item.itemId, row, itemName: item.itemName})">
{{item.itemName}}
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="clear" @click="clear()">清除</div>
<div class="submit" @click="submit()">确定</div>
</div>
</div>
</template>
<script>
import {createNamespacedHelpers} from 'vuex';
const {mapState, mapActions} = createNamespacedHelpers('second/skupList');
import ImgSize from '../../../components/img-size';
import {Scroll, Input} from 'cube-ui';
export default {
name: 'Filtrate',
components: {ImgSize, Scroll, Input},
props: {
yasParams: Object,
},
data() {
return {
showType: false,
highPrice: '',
lowPrice: '',
filterParams: {
maxSort: [], // 品类id
preSale_flag: [], //新旧程度
brand: [], // 品牌
gender: [], // 性别
size: [], // 尺码
price: [], // 价格
},
tempParams: {
maxSort: [],
preSale_flag: [],
brand: [],
gender: [],
size: [],
price: [],
}
};
},
activated() {
Object.assign(this.$data, this.$options.data());
this.fetchData();
},
computed: {
...mapState(['filterData'])
},
methods: {
...mapActions(['']),
onLowerPirceChange() {
let currentPrice = this.lowPrice;
if (this.filterParams.price.length > 0) {
let priceSplit = this.filterParams.price[0].split(',');
let firstPrice = priceSplit[0] ? priceSplit[0] : '';
if (currentPrice !== firstPrice) {
this.filterParams.price = [];
}
}
},
onHighPirceChange() {
let currentPrice = this.highPrice;
if (this.filterParams.price.length > 0) {
let priceSplit = this.filterParams.price[0].split(',');
let lastPrice = priceSplit[1] ? priceSplit[1] : '';
if (currentPrice !== lastPrice) {
this.filterParams.price = [];
}
}
},
clear() {
let filterParams = {
maxSort: [],
preSale_flag: [],
price: [],
brand: [],
gender: [],
size: [],
};
this.lowPrice = '';
this.highPrice = '';
this.setFilterParam(filterParams);
this.setTempParam(filterParams);
},
fetchData() {
let filterParams = this.filterParams;
let tempParams = this.tempParams;
// for (let item of this.filterData) {
// if (item.itemList && item.itemList.length === 1) { //只有一个默认选中
// filterParams[item.filterId].push(item.itemList[0].itemId);
// tempParams[item.filterId].push(item.itemList[0].itemName);
// }
// }
this.filterParams = filterParams;
this.tempParams = tempParams;
},
submit() {
// 自定义价格塞进params里
if (this.filterParams.price.length === 0) {
if (this.lowPrice || this.highPrice) {
this.filterParams.price = [this.lowPrice, this.highPrice];
}
}
let params = {
maxSort: this.filterParams.maxSort.join(','),
brand: this.filterParams.brand.join(','),
gender: this.filterParams.gender.join(','),
size: this.filterParams.size.join(','),
preSale_flag: this.filterParams.preSale_flag.join(','),
price: this.filterParams.price.join(','),
};
// this.filterData.length > 0 && this.filterData.map(row => {
// if (row.itemList && row.itemList.length === 1) {
// params[row.filterId] = row.itemList[0].itemId;
// }
// });
let ENT_PARAMS = {}, ENT_ID = [], ENT_NAME = [];
for (let key in params) {
if (key === 'maxSort' && params[key]) {
ENT_PARAMS.category = params[key];
ENT_ID.push(params[key]);
ENT_NAME.push('品类');
}
if (key === 'brand' && params[key]) {
ENT_PARAMS.brand = params[key];
ENT_ID.push(params[key]);
ENT_NAME.push('品牌');
}
if (key === 'size' && params[key]) {
ENT_PARAMS.size = params[key];
ENT_ID.push(params[key]);
ENT_NAME.push('尺寸');
}
if (key === 'gender' && params[key]) {
ENT_PARAMS.sex = params[key];
ENT_ID.push(params[key]);
ENT_NAME.push('性别');
}
if (key === 'preSale_flag' && params[key]) {
ENT_PARAMS.flag = params[key];
ENT_ID.push(params[key]);
ENT_NAME.push('新旧程度');
}
if (key === 'price' && params[key]) {
ENT_PARAMS.price = params[key];
ENT_ID.push(params[key]);
ENT_NAME.push('价格');
}
}
this.yasParams.ENT_PARAMS = JSON.stringify(ENT_PARAMS);
this.yasParams.ENT_ID = ENT_ID.toString();
this.yasParams.ENT_NAME = ENT_NAME.toString();
this.yas(this.yasParams);
this.$parent.setFilterParams({id: this.filterParams, name:this.tempParams});
this.hide();
},
select({filterId, itemId, row, itemName}) {
let tempParams = this.tempParams;
let filterTempArray = tempParams[filterId];
let optParams = this.filterParams;
let filterItemArray = optParams[filterId];
let rowData = this.filterData[row];
// if (rowData && rowData.itemList && rowData.itemList.length === 1) {
// return;
// }
if (filterItemArray.includes(itemId)) {
filterItemArray = filterItemArray.filter(item => item !== itemId);
filterTempArray = filterTempArray.filter(item => item !== itemName);
if (filterId === 'price') {
this.lowPrice = '';
this.highPrice = '';
}
} else {
if (this.filterData[row].multiSelect) {
filterItemArray.push(itemId);
filterTempArray.push(itemName);
} else {
filterItemArray = [itemId];
filterTempArray = [itemName];
}
if (filterId === 'price') {
if (itemName.search('-') != -1) {
let priceSplit = itemName.split('-');
this.lowPrice = priceSplit[0] ? priceSplit[0] : '';
this.highPrice = priceSplit[1] ? priceSplit[1] : '';
} else {
this.lowPrice = itemName.substring(0, itemName.length-2);
this.highPrice = '';
}
}
}
tempParams[filterId] = filterTempArray;
this.setTempParam(tempParams);
optParams[filterId] = filterItemArray;
this.setFilterParam(optParams);
},
setFilterParam(filter) {
let filterParams = this.filterParams;
if (typeof filter === 'object' && Object.keys(filter).length) {
for (let key in filter) {
filterParams[key] = filter[key];
}
this.filterParams = filterParams;
}
},
setTempParam(filter) {
let filterParams = this.tempParams;
if (typeof filter === 'object' && Object.keys(filter).length) {
for (let key in filter) {
filterParams[key] = filter[key];
}
this.tempParams = filterParams;
}
},
show() {
this.showType = true;
},
hide() {
this.showType = false;
},
yas(param) {
this.$store.dispatch('reportYas', {
params: {
param,
appop: 'XY_UFO_SECONDHAND_LIST_SCREEN_C'
}
});
}
}
};
</script>
<style lang="scss" scoped>
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
z-index: 999;
}
.item-price-input {
display: flex;
margin-left: 40px;
margin-right: 40px;
width: calc(100%-80px);
height: 80px;
line-height: 80px;
margin-bottom: 24px;
flex-direction: row;
align-items: center;
overflow: hidden;
}
.input-wrapper {
width: 300px;
height: 80px;
border-radius: 40px;
background: #f5f5f5;
overflow: hidden;
}
.price-input {
width: 300px;
height: 80px;
background: #f5f5f5;
&:after {
border-color: #f5f5f5;
}
/deep/ .cube-input-field {
text-align: center;
padding: 20px;
}
}
.horizontal-line {
width: 20px;
height: 4px;
background: #000;
margin-left: 6px;
margin-right: 6px;
}
.content-search {
margin-top: 80px;
max-height: calc(100%-140px);
overflow: auto;
-webkit-overflow-scrolling: touch;
.item {
margin-bottom: 60px;
}
.item-title {
margin-left: 40px;
margin-bottom: 20px;
font-size: 40px;
color: #000;
letter-spacing: 0;
font-weight: 500;
}
.item-list {
overflow-y: hidden;
overflow-x: scroll;
display: -webkit-box;
width: 100%;
}
.item-list ::-webkit-scrollbar {
display: none;
}
.item-text {
background: #f5f5f5;
font-size: 28px;
color: #222;
text-align: center;
width: 200px;
height: 80px;
line-height: 80px;
margin-right: 20px;
border-radius: 40px;
}
.item-text-selected {
background: #08304b;
color: #fff;
}
.item-size {
width: 130px;
height: 80px;
line-height: 80px;
}
.price-size {
width: 200px;
height: 80px;
line-height: 80px;
}
.flag-size {
width: 160px;
height: 80px;
line-height: 80px;
}
.item-img {
width: 140px;
height: 70px;
margin-bottom: 22px;
& > img {
width: 100%;
height: 100%;
}
}
.item-img-selected {
opacity: 1 !important;
}
.item-img-content {
opacity: 0.2;
width: 160px;
height: 140px;
display: flex;
justify-content: center;
flex-direction: column;
margin-right: 20px;
}
.item-img-text {
font-size: 20px;
color: #000;
letter-spacing: 0;
text-align: center;
width: 140px;
height: 64px;
}
}
.bottom {
height: 120px;
position: fixed;
bottom: 0;
z-index: 9;
width: 100%;
background: #fff;
display: flex;
border-top: 1px solid rgba(0, 0, 0, 0.12);
justify-content: space-between;
align-items: center;
}
.clear {
margin-left: 32px;
line-height: 80px;
text-align: center;
width: 330px;
height: 80px;
color: #000;
font-size: 32px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 40px;
}
.submit {
line-height: 80px;
background-color: #08304B;
width: 330px;
height: 80px;
text-align: center;
color: #fff;
font-size: 32px;
border-radius: 40px;
margin-right: 32px;
}
.back {
margin-top: 24px;
width: 24PX;
height: 24PX;
background: url(~statics/image/order/back@3x.png) no-repeat;
background-size: cover;
}
</style>
... ...
... ... @@ -7,8 +7,8 @@
<image-format
:class="product.status === 100 ? 'dim-imge' : 'second-image'"
:src="product.secondhand_image"
:width="180"
:height="180"/>
:width="360"
:height="360"/>
<div v-if="product.status === 100" class="dim-out"></div>
</div>
... ...
... ... @@ -19,8 +19,8 @@
:lazy="false"
alt="图片加载失败"
:src="item"
:width="375"
:height="375"
:width="750"
:height="750"
/>
<div class="pole-dot-area"></div>
</cube-slide-item>
... ... @@ -51,8 +51,8 @@
class="image"
:alt="info.image"
:src="info.image"
:width="70"
:height="70"
:width="140"
:height="140"
/>
<div class="middle" @click="'productId'">
<p class="name ellipsis">{{ info.productName }}</p>
... ...
<template>
<LayoutApp :show-back="true" title="二手" class="list-wrapper">
<LayoutScroll
ref="scrolllist"
@scroll="onScroll"
@scroll-end="scrollEndHandler"
@pulling-up="fetchSkupList(isMore)"
v-if="skupList.list.length"
class="list-scroll-bg"
>
<SecondList ref="second" :list="skupList.list" :yasParams="yasParams"></SecondList>
</LayoutScroll>
<UfoNoItem class="empty" :tip="`暂无数据`" v-else></UfoNoItem>
</LayoutApp>
<div>
<LayoutApp :show-back="true" title="二手" class="list-wrapper">
<div class="filter">
<div class="filter-tab">
<div class="tab-item" :class="selectedType === 2 && 'selected-tab'" @click="pressType(2)">推荐</div>
<div class="tab-item middle" @click="pressType(1)">
<span :class="selectedType === 1 && 'selected-tab'">价格</span>
<div :class="arrowClass"></div>
</div>
</div>
<div class="middle">
<div class="screen middle" @click="goFilter()">
<div class="screen-img"></div>
筛选
</div>
</div>
</div>
<div class="filter-sub">
<div class="filter-sub-tab">
<div class="tab-sub-group-item" :class="filterSelectArr.includes('new') && 'selected-sub-tab'" @click="pressFilterType('new')">全新瑕疵</div>
<div class="tab-sub-group-item" :class="filterSelectArr.includes('2hand') && 'selected-sub-tab'" @click="pressFilterType('2hand')">二手</div>
<div class="tab-sub-group-item" :class="filterSelectArr.includes('size') && 'selected-sub-tab'" @click="pressFilterType('size')">
<span>{{this.selectedFilterNameParams.size.toString().length ? this.selectedFilterNameParams.size.toString(): '尺码'}}</span>
<div :class="[filterSelectArr.includes('size') ? foldClass : 'black-down-arrow']"></div>
</div>
<div class="tab-sub-group-item" :class="filterSelectArr.includes('brand') && 'selected-sub-tab'" @click="pressFilterType('brand')">
<span>{{this.selectedFilterNameParams.brand.toString().length ? this.selectedFilterNameParams.brand.toString(): '品牌'}}</span>
<div :class="[filterSelectArr.includes('brand') ? foldClass : 'black-down-arrow']"></div>
</div>
<div class="tab-sub-group-item" :class="filterSelectArr.includes('gender') && 'selected-sub-tab'" @click="pressFilterType('gender')">
<span>{{this.selectedFilterNameParams.gender.toString().length ? this.selectedFilterNameParams.gender.toString(): '性别'}}</span>
<div :class="[filterSelectArr.includes('gender') ? foldClass : 'black-down-arrow']"></div>
</div>
</div>
</div>
<LayoutScroll ref="scroll" class="list-scroll-bg" v-if="skupList.list.length"
@scroll="onScroll"
@scroll-end="scrollEndHandler"
@pulling-up="onPullingUp"
>
<SecondList ref="second" :list="skupList.list" :yasParams="yasParams"></SecondList>
</LayoutScroll>
<UfoNoItem v-if="isShowEmpty" class="empty" :tip="`暂无数据`"></UfoNoItem>
</LayoutApp>
<Filtrate ref="filtrate" :yasParams="yasParams"></Filtrate>
<FiltrateList ref="filtrateList" :list="seletedFilterList"></FiltrateList>
</div>
</template>
<script>
import SecondList from './components/second-list';
import Filtrate from './components/filtrate';
import FiltrateList from './components/filtrate-list';
import UfoNoItem from '../../components/ufo-no-item';
import { createNamespacedHelpers } from 'vuex';
... ... @@ -27,32 +70,353 @@ export default {
name: 'UfoSecondListPage',
components: {
SecondList,
UfoNoItem
UfoNoItem,
Filtrate,
FiltrateList
},
data() {
return {
isFetch: true,
scrollY: 0,
isShowEmpty: false,
yasParams: {
P_NAME: 'XY_UFOSecondList',
TYPE_ID: 5,
TAB_ID: '',
TAB_NAME: '',
P_PARAM: [].toString()
}
},
selectedType: 2, // tab类型高亮，1价格，2推荐
priceDesc: true,
filterSelectArr: [], // 'new'全新瑕疵，'2hand'二手，'size'尺码，'brand'品牌，'gender'性别
foldStatus: false,
lastFilterFlag: '',
skupList: {
showErrorPage: false,
isFetching: false,
error: null,
page: 0, // 当前页
page_size: 10, // 每页数量
page_total: 0, // 总共多少页
total: 0, // 总共多少条
endReached: false, // 到达底部
list: [], // 商品列表
isEmpty: false,
},
searchParams: {
order: '', // 指定排序
productPool: null, // 商品池id
maxSort: null, // 品类id
brand: null, // 品牌id
gender: null, // 性别
size: null, // 尺码id
price: null, // 价格
preSale_flag: null, // 新旧程度
limit: null, // 每页记录数
page: null, // 当前页号
},
filterParams: { //接口返回的数据
maxSort: [], //品类列表
preSale_flag: [], //新旧程度
brand: [], // 品牌列表
gender: [], // 性别列表
size: [], // 尺码列表
price: [], //价格列表
},
seletedFilterParams: { //选中的数据
maxSort: [],
preSale_flag: [],
brand: [],
gender: [],
size: [],
price: [],
},
selectedFilterNameParams: {
maxSort: [],
preSale_flag: [],
brand: [],
gender: [],
size: [],
price: [],
},
seletedFilterList: [], //下拉框显示列表
};
},
computed: {
...mapState(['skupList', 'isMore'])
...mapState([]),
arrowClass() {
return [
this.selectedType === 1 ? this.priceDesc ? 'desc-arrow' : 'asc-arrow' : 'price-arrow'
];
},
foldClass() {
return [
this.foldStatus ? 'white-up-arrow' : 'white-down-arrow'
];
}
},
methods: {
...mapActions(['fetchSecondSkupList']),
...mapActions(['fetchSecondSkupList', 'fetchSecondFilterData']),
// 上拉加载
async onPullingUp() {
await this.fetchList();
},
// 查询商品列表
async fetchList(params) {
let searchParams = this.searchParams;
let list = this.skupList;
let limit = list.page_size;
let isReset = false;
if (params && params.isReset) {
isReset = true;
delete params.isReset;
}
if (!isReset && (list.endReached || (!list.endReached && list.page_total === 1))) {
return;
}
if (typeof params === 'object' && Object.keys(params)) {
searchParams = Object.assign({...searchParams}, params);
this.searchParams = searchParams;
}
// console.log('this.searchParams', this.searchParams);
async fetchSkupList(isMore) {
if (this.isMore) {
await this.fetchSecondSkupList({ isReset: false });
let page = isReset ? 1 : (list.page + 1);
for (let key in searchParams) {
if (!searchParams[key]) {
delete searchParams[key];
}
}
let result = await this.fetchSecondSkupList({
...searchParams,
page,
limit
});
let {data} = result;
if (result.code === 200) {
data.endReached = (data.page === data.page_total) && (data.page_size !== 1) || !data.page_total;
if (data && !data.total) {
this.isShowEmpty = true;
} else {
this.isShowEmpty = false;
}
} else {
this.isShowEmpty = true;
}
if (typeof data === 'object' && Object.keys(data).length) {
for (let key in data) {
if (key === 'skup_list') {
list.list = data.page > 1 ? list.list.concat(data.skup_list) : data.skup_list;
} else {
list[key] = data[key];
}
}
list.list && list.list.length ? list.isEmpty = false : list.isEmpty = true;
this.skupList = list;
}
},
// 更新数据
async updateList() {
let params = {
maxSort: this.seletedFilterParams.maxSort.join(','),
brand: this.seletedFilterParams.brand.join(','),
gender: this.seletedFilterParams.gender.join(','),
size: this.seletedFilterParams.size.join(','),
preSale_flag: this.seletedFilterParams.preSale_flag.join(','),
price: this.seletedFilterParams.price.join(','),
};
params.isReset = true;
await this.fetchList(params);
this.$refs.scroll.scrollTo(0, 0, 300);
},
// 点击Tab, 1:价格，2:默认
async pressType(flag) {
if (flag === this.selectedType && flag !== 1) {
return;
}
let filterParams = this.seletedFilterParams;
let params = {
maxSort: filterParams.maxSort.join(','), // 品类id
brand: filterParams.brand.join(','), // 品牌id
gender: filterParams.gender.join(','), // 性别
size: filterParams.size.join(','), // 尺码id
preSale_flag: filterParams.preSale_flag.join(','), // 新旧程度
price: filterParams.price.join(','), // 价格
};
for (let i in params) {
!params[i] && delete params[i];
}
if (flag === 1) {
this.priceDesc = !this.priceDesc;
params.order = this.priceDesc ? 'price:asc' : 'price:desc';
} else if (flag === 2) {
this.priceDesc = true;
params.order = 'id:desc';
}
this.selectedType = flag;
params.isReset = true;
await this.fetchList(params);
this.$refs.scroll.scrollTo(0, 0, 300);
this.yasShowPage();
},
// 点击, 'new'全新瑕疵，'2hand'二手，'size'尺码，'brand'品牌，'gender'性别
async pressFilterType(flag) {
let filterArray = this.filterSelectArr;
if (flag === 'new' || flag === '2hand') {
this.foldStatus = false;
let tempParams = this.seletedFilterParams['preSale_flag'];
let tmp = flag === 'new' ? '5' : '6';
//选中的放在数组里
if (filterArray.includes(flag)) {
filterArray = filterArray.filter(item => item !== flag);
tempParams = tempParams.filter(item => item !== tmp);
} else {
filterArray.push(flag);
tempParams.push(tmp);
}
this.seletedFilterParams['preSale_flag'] = tempParams;
// 重新获取数据
this.updateList();
} else {
this.seletedFilterList = flag === 'size' ? this.filterParams.size : flag === 'brand' ? this.filterParams.brand : this.filterParams.gender;
this.foldStatus = this.lastFilterFlag === flag ? !this.foldStatus : true;
let temp = this.seletedFilterParams[flag];
if (temp.length === 0) {
filterArray.push(flag);
}
}
this.filterSelectArr = filterArray;
// 后面三个tab点击但是未选择清除一下状态
if (this.lastFilterFlag !== flag) {
this.clearStatus(flag);
}
this.lastFilterFlag = flag;
let tempIdArr = this.seletedFilterParams[flag];
let tempNameArr = this.selectedFilterNameParams[flag];
if (this.foldStatus) {
this.$refs.filtrateList.show();
this.$refs.filtrateList.setFilterList({id: tempIdArr, name: tempNameArr});
} else {
this.$refs.filtrateList.hide();
}
},
clearStatus(flag) {
let params = this.seletedFilterParams;
let filterArray = this.filterSelectArr;
for (let key in params) {
if (key !== flag) {
if (filterArray.includes(key) && params[key].length === 0) {
filterArray = filterArray.filter(item => item !== key);
}
}
}
this.filterSelectArr = filterArray;
},
updateFilterParams(params) {
// 更新一下fold状态
this.foldStatus = false;
this.seletedFilterParams[this.lastFilterFlag] = params.id;
this.selectedFilterNameParams[this.lastFilterFlag] = params.name;
let idArray = params.id || [];
if (idArray.length === 0) {
//下拉框未选中，清除选中状态
let flag = this.lastFilterFlag;
let filterArray = this.filterSelectArr;
if (filterArray.includes(flag)) {
filterArray = filterArray.filter(item => item !== flag);
}
this.filterSelectArr = filterArray;
} else {
let flag = this.lastFilterFlag;
let filterArray = this.filterSelectArr;
if (!filterArray.includes(flag)) {
filterArray.push(flag);
}
this.filterSelectArr = filterArray;
}
// 重新获取数据
this.updateList();
},
setFilterParams(params) {
this.seletedFilterParams = params.id;
this.selectedFilterNameParams = params.name;
let idFilterParams = params.id;
let filterArray = [];
for (let key in idFilterParams) {
if (key !== 'maxSort') {
if (idFilterParams[key].length > 0) {
if (key === 'preSale_flag') {
let flagArr = idFilterParams[key];
if (flagArr.length === 2) {
filterArray.push('new', '2hand');
} else if (flagArr.includes('5')) {
filterArray.push('new');
} else {
filterArray.push('2hand');
}
} else {
filterArray.push(key);
}
}
}
}
this.filterSelectArr = filterArray;
// 重新获取数据
this.updateList();
},
onScroll({ y }) {
this.scrollY = -y;
},
... ... @@ -61,6 +425,15 @@ export default {
this.$refs.second.yasShowEvent(-y);
},
goFilter() {
this.$refs.filtrate.show();
this.$refs.filtrate.setFilterParam(this.seletedFilterParams);
this.$refs.filtrate.setTempParam(this.selectedFilterNameParams);
this.foldStatus = false;
this.$refs.filtrateList.hide();
},
yasShowPage() {
let { total, list } = this.skupList;
let PRD_LIST = [];
... ... @@ -81,17 +454,39 @@ export default {
this.isFetch = to.name !== 'SecondProductDetail'
next();
},
activated: function() {
if(this.isFetch) {
this.scrollY = 0;
this.fetchSecondSkupList({ isReset: true });
async activated() {
let {list} = this.skupList;
if (this.isFetch) {
this.$refs.filtrate.hide();
Object.assign(this.$data, this.$options.data());
let params = {};
!params.order && (params.order = 'id:desc');
await this.fetchList({...params, isReset: true});
// 获取筛选项
let filterData = await this.fetchSecondFilterData();
let filterParams = this.filterParams;
for (let item of filterData) {
if (item.itemList && item.itemList.length >= 1) {
filterParams[item.filterId] = item.itemList;
}
}
this.filterParams = filterParams;
} else {
this.scrollY && this.$refs.scroll.scrollTo(this.scrollY);
}
this.$nextTick(()=> {
this.$refs.scrolllist.scrollTo(this.scrollY);
this.$refs.second.yasShowEvent(this.scrollY);
this.yasShowPage();
})
}
this.$refs.second.yasShowEvent(this.scrollY);
this.yasShowPage();
},
deactivated() {
this.$refs.filtrate.hide();
this.$refs.filtrateList.hide();
},
};
</script>
... ... @@ -111,4 +506,138 @@ export default {
background-color: #f5f5f5;
flex: 1;
}
.filter {
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-left: 50px;
padding-right: 24px;
background: #fff;
}
.filter-tab {
display: flex;
flex-direction: row;
align-items: center;
font-size: 32px;
color: #999;
text-align: center;
}
.selected-tab {
color: #000;
font-weight: bold;
}
.tab-item {
margin-right: 60px;
}
.screen {
font-size: 32px;
color: #000;
letter-spacing: 0;
}
.middle {
display: flex;
align-items: center;
}
.asc-arrow {
width: 40px;
height: 40px;
background: url(~statics/image/list/asc_arrow@3x.png) no-repeat;
background-size: cover;
}
.desc-arrow {
width: 40px;
height: 40px;
background: url(~statics/image/list/desc_arrow@3x.png) no-repeat;
background-size: cover;
}
.price-arrow {
width: 40px;
height: 40px;
background: url(~statics/image/list/price_arrow@3x.png) no-repeat;
background-size: cover;
}
.screen-img {
width: 40px;
height: 40px;
background: url(~statics/image/list/filter@3x.png) no-repeat;
background-size: cover;
}
.filter-sub {
width: 100%;
height: 86px;
display: flex;
padding-left: 20px;
padding-right: 20px;
background: #fff;
}
.filter-sub-tab {
display: flex;
flex-direction: row;
}
.tab-sub-group-item {
background: #f5f5f5;
font-size: 24px;
color: #000;
border-radius: 4px;
margin-right: 18px;
height: 56px;
width: 128px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
overflow: hidden;
span {
text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
max-width: 80px;
}
}
.selected-sub-tab {
color: #fff;
background: #08304B;
}
.black-down-arrow {
width: 40px;
height: 40px;
background: url(~statics/image/list/black_down@3x.png) no-repeat;
background-size: contain;
}
.white-down-arrow {
width: 40px;
height: 40px;
background: url(~statics/image/list/white_down@3x.png) no-repeat;
background-size: contain;
}
.white-up-arrow {
width: 40px;
height: 40px;
background: url(~statics/image/list/white_up@3x.png) no-repeat;
background-size: contain;
}
</style>
... ...
... ... @@ -19,6 +19,7 @@ export default function() {
current: 0,
},
contentCode: contentCode,
defaultSearchWord: '',
showMsg: false,
},
mutations: {
... ... @@ -62,6 +63,9 @@ export default function() {
}
});
},
[Types.FETCH_DEFAULT_SEARCH_WORD](state, [{search_word} = {}] = []) {
state.defaultSearchWord = search_word;
},
},
actions: {
async fetchProductList({ commit, state }, obj) {
... ... @@ -93,6 +97,19 @@ export default function() {
if (result.code === 200) {
commit(Types.FETCH_NEWSACTIVE, { list: result.data || [] });
}
},
/**
* ufo.product.searchWord
word_type=2 搜索默认词
client_type= iphone android h5
*/
async fetchDefaultSearchWord({commit}) {
const res = await this.$api.get('/api/ufo/list/searchWords', {word_type: 1});
if (res.code === 200) {
commit(Types.FETCH_DEFAULT_SEARCH_WORD, res.data);
}
}
},
};
... ...
... ... @@ -12,3 +12,5 @@ export const FETCH_NEWSACTIVE = 'FETCH_NEWSACTIVE';
export const FETCH_FAVORITE_LIST_REQUEST = 'FETCH_FAVORITE_LIST_REQUEST';
export const FETCH_FAVORITE_LIST_FAILD = 'FETCH_FAVORITE_LIST_FAILD';
export const FETCH_FAVORITE_LIST_SUCCESS = 'FETCH_FAVORITE_LIST_SUCCESS';
export const FETCH_DEFAULT_SEARCH_WORD = 'FETCH_DEFAULT_SEARCH_WORD';
... ...
... ... @@ -4,7 +4,7 @@ export default function() {
state: {
filterVisible: false,
searchWord: [],
defaultSearchWord: [],
defaultSearchWord: '',
searchSuggestList: [],
},
mutations: {
... ... @@ -15,8 +15,10 @@ export default function() {
setSearchWords(state, {searchWord}) {
state.searchWord = searchWord;
},
setDefaultSearchWords(state, {defaultSearchWord}) {
state.defaultSearchWord = defaultSearchWord;
setDefaultSearchWords(state, {defaultSearchWord = []}) {
const [{search_word} = {}] = defaultSearchWord;
state.defaultSearchWord = search_word;
}
},
actions: {
... ...
import Vue from 'vue';
export default function() {
return {
namespaced: true,
state: {
page: 1,
pageTotal: 0,
skupList: {
list: []
},
isMore: false,
isShowEmpty: false
filterData: []
},
mutations: {
addList(state, { data, isReset }) {
if (data && data.skup_list) {
let { page, skup_list = [], page_total } = data;
if (page_total > page) {
state.isMore = true;
state.pageTotal = page_total;
state.page = page + 1;
} else {
state.isMore = false;
}
if (isReset) {
state.skupList.list = skup_list;
} else {
let list = state.skupList.list.concat(skup_list);
Vue.set(state.skupList, 'list', list);
}
}
},
errorData(state) {
state.isShowEmpty = true;
setFilterData(state, info) {
state.filterData = info;
}
},
actions: {
async fetchSecondSkupList({ commit, state }, {isReset} = {}) {
let page = 1;
// 查询二手/瑕疵商品列表
async fetchSecondSkupList({commit, state}, params) {
let result = await this.$api.get('/api/ufo/secondhand/skupList', {
...params,
});
if (isReset) {
page = 1;
} else {
page = state.page;
}
return result;
},
let limit = 10;
const result = await this.$api.get('/api/ufo/secondhand/skupList', {page, limit, debug: 'XYZ'});
// 查询二手/瑕疵筛选列表
async fetchSecondFilterData({commit}) {
let {data} = await this.$api.get('/api/ufo/secondhand/filterData');
if (result.code === 200) {
let data = result.data;
commit('setFilterData', data.filter || []);
commit('addList', { data, isReset });
} else {
commit('errorData');
}
return result.data || [];
return data.filter || [];
},
},
};
... ...
... ... @@ -137,11 +137,5 @@ module.exports = {
auth: true,
api: 'ufo.users.listInboxTypeInfo',
param: {}
},
'/api/ufo/secondhand/skupList': {
ufo: true,
api: 'ufo.product.search.secondhand.skupList',
params: {},
auth: true,
},
}
};
... ...
... ... @@ -31,6 +31,27 @@ module.exports = {
gender: {type: String}, // 性别
}
},
'/api/ufo/secondhand/filterData': {
ufo: true,
api: 'ufo.product.search.secondhand.filter',
params: {
}
},
'/api/ufo/secondhand/skupList': {
ufo: true,
api: 'ufo.product.search.secondhand.skupList',
params: {
order: {type: String}, // 指定排序
maxSort: {type: String}, // 品类id
brand: {type: String}, // 品牌id
gender: {type: String}, // 性别
preSale_flag: {type: String}, // 新旧程度
price: {type: String}, // 价格
size: {type: String}, // 尺码
productPool: {type: Number}, // 商品池id
},
auth: true,
},
'/api/ufo/list/searchWords': {
ufo: true,
api: 'ufo.product.searchWord',
... ...
{
"name": "xianyu-ufo-app-web",
"version": "1.1.2",
"version": "1.2.5-beta3",
"private": true,
"description": "Xianyu Project With Express",
"repository": {
... ...