fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by 张文文
Commit 0dd06b614071dc8ddd8ac3e96f1108e98b79b18c 1 parent 5714fc6b

二手筛选项接口调试及修改 review by lea.guo

Inline Side-by-side
Showing 5 changed files with 154 additions and 96 deletions
... ... @@ -77,7 +77,7 @@ export default {
position: fixed;
bottom: 0;
left: 0;
top: 274px;
top: 274px; //app: 186px
width: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 9;
... ...
... ... @@ -34,9 +34,24 @@
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 === 'sort' || filter.filterId === 'gender'"
<div class="item-text" v-if="filter.filterId === 'maxSort' || filter.filterId === 'gender'"
:style="i===0 && 'margin-left:1rem'"
:class="(filterParams.sort.includes(item.itemId) || filterParams.gender.includes(item.itemId)) && 'item-text-selected'"
: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 === 'preSaleFlag'"
:style="i===0 && 'margin-left:1rem'"
:class="filterParams.preSaleFlag.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>
... ... @@ -74,25 +89,26 @@ export default {
filterData: [],
filterParams: {
sort: [], // 品类id
maxSort: [], // 品类id
preSaleFlag: [], //新旧程度
brand: [], // 品牌
gender: [], // 性别
size: [], // 尺码
price: [], // 价格
},
tempParams: {
sort: [], // 品类名称
maxSort: [], // 品类名称
preSaleFlag: [], //新旧程度
brand: [], // 品牌
gender: [], // 性别
size: [], // 尺码
price: [], // 价格
}
};
},
activated() {
let params = {...this.$route.query};
Object.assign(this.$data, this.$options.data());
!params.order && (params.order = 'sale_desc');
this.fetchData(params);
this.fetchData();
},
computed: {
... ... @@ -103,40 +119,30 @@ export default {
...mapActions(['fetchSecondFilterData']),
clear() {
let filterParams = {
sort: [],
brand: [],
gender: [],
size: [],
};
let tempParams = {
sort: [],
maxSort: [],
preSaleFlag: [],
price: [],
brand: [],
gender: [],
size: [],
};
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.setFilterParam(filterParams);
this.setTempParam(tempParams);
this.setTempParam(filterParams);
},
fetchData: async function(params) {
let filterData = await this.fetchSecondFilterData(params);
let filterData = await this.fetchSecondFilterData();
let filterParams = this.filterParams;
let tempParams = this.tempParams;
for (let item of filterData) {
if (item.itemList && item.itemList.length === 1) {
filterParams[item.filterId].push(item.itemList[0].itemId);
tempParams[item.filterId].push(item.itemList[0].itemName);
}
}
// for (let item of 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.filterData = filterData;
this.filterParams = filterParams;
this.tempParams = tempParams;
... ... @@ -144,22 +150,24 @@ export default {
submit() {
let params = {
sort: this.filterParams.sort.join(','),
maxSort: this.filterParams.maxSort.join(','),
brand: this.filterParams.brand.join(','),
gender: this.filterParams.gender.join(','),
size: this.filterParams.size.join(','),
preSaleFlag: this.filterParams.preSaleFlag.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;
}
});
// 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 === 'sort' && params[key]) {
if (key === 'maxSort' && params[key]) {
ENT_PARAMS.category = params[key];
ENT_ID.push(params[key]);
ENT_NAME.push('品类');
... ... @@ -179,6 +187,16 @@ export default {
ENT_ID.push(params[key]);
ENT_NAME.push('性别');
}
if (key === 'preSaleFlag' && 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();
... ... @@ -208,20 +226,33 @@ export default {
let rowData = this.filterData[row];
if (rowData && rowData.itemList && rowData.itemList.length === 1) {
return;
}
// if (filterId === 'size') {
// this.lowPrice = itemName;
// 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 {
filterItemArray.push(itemId);
filterTempArray.push(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;
... ... @@ -270,17 +301,6 @@ export default {
};
</script>
<style lang="scss" scoped>
.header {
width: 100%;
height: 45PX;
padding-left: 20PX;
padding-right: 20PX;
background-color: #fff;
display: flex;
align-items: stretch;
box-sizing: border-box;
}
.container {
position: absolute;
top: 0;
... ... @@ -291,23 +311,6 @@ export default {
z-index: 999;
}
.title {
font-size: 68px;
font-weight: bold;
color: #000;
height: 82px;
line-height: 82px;
margin: 40px;
flex-direction: row;
display: flex;
justify-content: space-between;
.cancel {
font-size: 36px;
color: #888;
}
}
.item-price-input {
display: flex;
margin-left: 40px;
... ... @@ -354,6 +357,9 @@ export default {
.content-search {
margin-top: 80px;
max-height: calc(100%-140px);
overflow: auto;
-webkit-overflow-scrolling: touch;
.item {
margin-bottom: 60px;
... ... @@ -402,6 +408,18 @@ export default {
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;
... ...
... ... @@ -106,20 +106,28 @@ export default {
},
filterParams: { //接口返回的数据
sort: [], //品类列表
maxSort: [], //品类列表
preSaleFlag: [], //新旧程度
brand: [], // 品牌列表
gender: [], // 性别列表
size: [], // 尺码列表
price: [], //价格列表
},
seletedFilterParams: { //选中的数据
brand: [], // 品牌列表
gender: [], // 性别列表
size: [], // 尺码列表
maxSort: [],
preSaleFlag: [],
brand: [],
gender: [],
size: [],
price: [],
},
selectedFilterNameParams: {
brand: [], // 品牌列表
gender: [], // 性别列表
size: [], // 尺码列表
maxSort: [],
preSaleFlag: [],
brand: [],
gender: [],
size: [],
price: [],
},
seletedFilterList: [], //下拉框显示列表
... ... @@ -207,17 +215,19 @@ export default {
// 点击Tab flag, 1:价格，2:默认
async pressType(flag) {
if (flag === this.selectedType && flag !== 1) {
return;
}
let filterParams = this.$refs.filtrate.getParams();
let filterParams = this.seletedFilterParams;
let params = {
sort: filterParams.sort.join(','), // 品类id
brand: filterParams.brand.join(','), // 品牌id
gender: filterParams.gender.join(','), // 性别
size: filterParams.size.join(','), // 尺码id
maxSort: filterParams.maxSort.join(','), // 品类id
brand: filterParams.brand.join(','), // 品牌id
gender: filterParams.gender.join(','), // 性别
size: filterParams.size.join(','), // 尺码id
preSaleFlag: filterParams.preSaleFlag.join(','), // 新旧程度id
price: filterParams.price.join(','), // 价格id
};
for (let i in params) {
... ... @@ -228,34 +238,43 @@ export default {
if (flag === 1) {
// this.setYasParam({tab: {index: 2, name: '价格'}});
this.priceDesc = !this.priceDesc;
params.order = this.priceDesc ? 'availableNowPrice:asc' : 'availableNowPrice:desc';
params.order = this.priceDesc ? 'price:asc' : 'price:desc';
} else if (flag === 2) {
// this.setYasParam({tab: {index: 1, name: '默认'}});
// this.setYasParam({tab: {index: 1, name: '推荐'}});
this.priceDesc = true;
params.order = 'sale_desc'; // 字段要修改
params.order = 'id:desc'; // 字段要修改
}
params.isReset = true;
await this.fetchList(params);
// await this.fetchList(params);
this.$refs.scroll.scrollTo(0, 0, 300);
this.yasShowPage();
// this.yasTab();
this.yasTab();
},
// 点击filterTab, 'new'全新瑕疵，'2hand'二手，'size'尺码，'brand'品牌，'gender'性别
async pressFilterType(flag) {
let filterArray = this.filterSelectArr;
if (flag === 'new' || flag === '2hand') {
this.foldStatus = false;
let tempParams = this.seletedFilterParams['preSaleFlag'];
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['preSaleFlag'] = tempParams;
} else {
this.seletedFilterList = flag === 'size' ? this.filterParams.size : flag === 'brand' ? this.filterParams.brand : this.filterParams.gender;
... ... @@ -337,13 +356,25 @@ export default {
let filterArray = [];
for (let key in idFilterParams) {
if (key !== 'sort') {
if (key !== 'maxSort') {
if (idFilterParams[key].length > 0) {
filterArray.push(key);
if (key === 'preSaleFlag') {
let flagArr = idFilterParams[key];
if (flagArr.length === 2) {
filterArray.push('new');
filterArray.push('2hand');
} else if (flagArr.includes('5')) {
filterArray.push('new');
} else {
filterArray.push('2hand');
}
} else {
filterArray.push(key);
}
}
}
}
this.filterSelectArr = filterArray;
},
... ... @@ -359,6 +390,9 @@ export default {
// this.yasTab(true);
this.$refs.filtrate.show();
this.$refs.filtrate.setFilterParam(this.seletedFilterParams);
this.foldStatus = false;
this.$refs.filtrateList.hide();
},
// yas
... ... @@ -402,7 +436,7 @@ export default {
await this.fetchSecondSkupList({ isReset: true });
let filterData = await this.fetchSecondFilterData({order: 'sale_desc'});
let filterData = await this.fetchSecondFilterData();
let filterParams = this.filterParams;
for (let item of filterData) {
... ...
... ... @@ -71,8 +71,8 @@ export default function() {
},
// 查询二手/瑕疵筛选列表
async fetchSecondFilterData({commit, state}, params) {
let result = await this.$api.get('/api/ufo/list/filterData', {...params});
async fetchSecondFilterData() {
let result = await this.$api.get('/api/ufo/secondhand/filterData', {});
if (result.code === 200) {
let {data} = result;
... ...
... ... @@ -31,6 +31,12 @@ module.exports = {
gender: {type: String}, // 性别
}
},
'/api/ufo/secondhand/filterData': {
ufo: true,
api: 'ufo.product.search.secondhand.filter',
params: {
}
},
'/api/ufo/list/searchWords': {
ufo: true,
api: 'ufo.product.searchWord',
... ...