You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
299 lines
7.6 KiB
299 lines
7.6 KiB
<template> |
|
<view> |
|
<view class="filter"> |
|
<uni-search-bar class="search" radius="30" placeholder="请输入活动名称" v-model="keyword" clearButton="auto" cancelButton="none" /> |
|
<uni-icons class="icon" custom-prefix="iconfont" type="icon-filter" size="22" color="#007eff" @click="popup = true"></uni-icons> |
|
</view> |
|
|
|
<ul class="tab-wrap"> |
|
<view class="tab"> |
|
<li :class="{active: curTab === ''}" @click="tabChange('')">全部</li> |
|
</view> |
|
|
|
<scroll-view scroll-x :scroll-left="scrollLeft" class="tab tab-scroll"> |
|
<li v-for="(tab, i) in tabs" :key="i" :class="{active: curTab === tab.value}" @click="tabChange(tab.value)">{{ tab.title }}</li> |
|
</scroll-view> |
|
</ul> |
|
|
|
<ul class="list"> |
|
<li v-for="(item, i) in list" :key="i" @click="toDetail(item)"> |
|
<image class="pic" src="@/static/image/info-bg.jpg"></image> |
|
<view class="right"> |
|
<view class="name">测试名称</view> |
|
<view class="meta">时间：23323</view> |
|
<view class="meta">主办方：23323</view> |
|
<view class="meta">12/343人已报名</view> |
|
</view> |
|
</li> |
|
</ul> |
|
|
|
<filter-popup ref="filter" showCategory :data="filters" :form.sync="filterForm" v-model="popup" title="全部筛选" height="1104rpx" @finsh="subFinsh"></filter-popup> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { tagsList, listOfGoods, productTypeList, shoppingCartList } from '@/apis/modules/product.js' |
|
export default { |
|
data() { |
|
return { |
|
popup: false, |
|
//筛选表单数据 |
|
filters: [ |
|
{ |
|
children: false,//是否有子项 |
|
title: "产品类型", |
|
key: "productType", //键名 接收对象名字 |
|
keyValue: "value", //获取的值是哪个 |
|
isRadio: true, //是否单选 否则多选 |
|
data: [], |
|
}, |
|
{ |
|
children: false,//是否有子项 |
|
title: "官方精选", |
|
key: "selection", //键名 接收对象名字 |
|
keyValue: "value", //获取的值是哪个 |
|
data: [ |
|
{ |
|
value: 1, |
|
title: '官方精选' |
|
} |
|
], |
|
}, |
|
{ |
|
children: false,//是否有子项 |
|
title: "产品标签", |
|
key: "tagId", //键名 接收对象名字 |
|
keyValue: "value", //获取的值是哪个 |
|
isRadio: true, //是否单选 否则多选 |
|
data: [], |
|
}, |
|
], |
|
filterForm: { |
|
productType: [], |
|
selection: [], |
|
tagId: [] |
|
}, |
|
form: { |
|
categoryId: '', |
|
professionalCategoryId: '', |
|
professionalId: '', |
|
productType: '', |
|
selection: '', |
|
tagId: '' |
|
}, |
|
tagId: '', |
|
curTab: '', |
|
tabs: [], |
|
scrollLeft: 0, |
|
reachBottom: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据 |
|
status: 'more', // 上拉加载状态 more|loading|noMore |
|
searchTimer: null, |
|
sort: 0, |
|
keyword: '', |
|
list: [], |
|
page: 1, |
|
pageSize: 10, |
|
total: 0, |
|
cartNum: '', |
|
productTypeName: '', |
|
tagName: '', |
|
categoryName: '', |
|
} |
|
}, |
|
watch: { |
|
keyword () { |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(() => { |
|
this.initList() |
|
}, 500) |
|
} |
|
}, |
|
// 下拉刷新 |
|
onPullDownRefresh() { |
|
this.initList() |
|
setTimeout(() => { |
|
uni.stopPullDownRefresh() |
|
}, 1500) |
|
}, |
|
// 上拉加载 |
|
onReachBottom() { |
|
if (this.reachBottom >= 0) { |
|
this.reachBottom = 1 |
|
this.status = 'loading' |
|
this.getList() |
|
} |
|
}, |
|
onShow() { |
|
const pages = getCurrentPages() |
|
const { options } = pages[pages.length - 1] |
|
const { tagId, tagsName } = options |
|
this.form.tagId = +tagId || '' |
|
if (tagId) { |
|
this.filterForm.tagId = [+tagId] |
|
// this.tagName = tagsName |
|
} |
|
|
|
this.keyword = options.keyword || '' |
|
this.page = 1 |
|
this.getList() |
|
this.getFilter() |
|
this.getShopCart() |
|
}, |
|
methods: { |
|
getList() { |
|
listOfGoods({ |
|
pageNum: this.page, |
|
pageSize: this.pageSize, |
|
sort: 0, |
|
isShelves: 0, |
|
hotTag: this.form.tagId ? 2 : 1, |
|
...this.form, |
|
productName: this.keyword, |
|
productType: this.curTab |
|
}).then(({ page }) => { |
|
// 未加载完所有数据，并且不是筛选，则拼接list，否则直接赋值 |
|
const list = page.records |
|
list.map(e => { |
|
e.productIntroduction = this.$util.removeTag(e.productIntroduction) |
|
}) |
|
this.list = this.reachBottom > 0 ? [...this.list, ...list] : list |
|
this.page++ // 每次获取了数据后page+1 |
|
const noMore = this.list.length === page.total // 是否加载完所有数据 |
|
this.status = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore |
|
this.reachBottom = noMore ? -1 : 0 // 加载完了则设置为-1 |
|
}).catch(e => {}) |
|
}, |
|
initList() { |
|
this.page = 1 |
|
this.reachBottom = 0 |
|
this.getList() |
|
}, |
|
// 获取购物车数量 |
|
getShopCart() { |
|
shoppingCartList({ |
|
pageNum: 1, |
|
pageSize: 1000, |
|
}).then(({ data }) => { |
|
this.total = data.total |
|
}).catch(e => {}) |
|
}, |
|
// 筛选 |
|
getFilter() { |
|
// 产品类型 |
|
productTypeList().then(res => { |
|
res.typeList.forEach(e => { |
|
e.value = e.typeId |
|
e.title = e.typeName |
|
}) |
|
this.tabs = res.typeList |
|
this.filters[0].data = res.typeList |
|
}).catch(e => {}) |
|
|
|
// 产品标签 |
|
tagsList().then(res => { |
|
res.tagsList.forEach(e => { |
|
e.value = e.tagsId |
|
e.title = e.tagsName |
|
}) |
|
this.filters[2].data = res.tagsList |
|
}).catch(e => {}) |
|
}, |
|
// 筛选确定回调 |
|
subFinsh(val) { |
|
const { productType, selection, tagId, categoryId, professionalCategoryId, professionalId, categoryName } = val |
|
this.form = { |
|
categoryId: categoryId || '', |
|
professionalCategoryId: professionalCategoryId || '', |
|
professionalId: professionalId || '', |
|
productType: productType.length ? productType[0] : '', |
|
selection: selection.length ? selection[0] : '', |
|
tagId: tagId.length ? tagId[0] : '' |
|
} |
|
this.categoryName = categoryName || '' |
|
this.productTypeName = this.form.productType ? this.filters[0].data.find(e => e.value == this.form.productType).title : '' |
|
this.tagName = this.form.tagId ? this.filters[2].data.find(e => e.value == this.form.tagId).title : '' |
|
this.initList() |
|
}, |
|
// 删除学科专业已选 |
|
delCategory() { |
|
this.$refs.filter.category = [] |
|
this.$refs.filter.categoryName = '' |
|
this.$refs.filter.categoryId = '' |
|
this.$refs.filter.professionalCategoryId = '' |
|
this.$refs.filter.professionalId = '' |
|
this.form.categoryId = '' |
|
this.form.professionalCategoryId = '' |
|
this.form.professionalId = '' |
|
this.categoryName = '' |
|
this.initList() |
|
}, |
|
// 删除产品类型已选 |
|
delProductType() { |
|
this.filterForm.productType = [] |
|
this.form.productType = '' |
|
this.productTypeName = '' |
|
this.initList() |
|
}, |
|
// 删除官方精选已选 |
|
delSelection() { |
|
this.filterForm.selection = [] |
|
this.form.selection = '' |
|
this.initList() |
|
}, |
|
// 删除产品标签已选 |
|
delTag() { |
|
this.filterForm.tagId = [] |
|
this.form.tagId = '' |
|
this.tagName = '' |
|
this.initList() |
|
}, |
|
// tab切换 |
|
tabChange(id) { |
|
this.curTab = id |
|
this.initList() |
|
}, |
|
// 跳转详情 |
|
toDetail(item) { |
|
this.$util.to(`../activityDetail/activityDetail?id=${item.mallId}`) |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.tab-wrap { |
|
display: flex; |
|
.tab-scroll { |
|
width: calc(100% - 100rpx); |
|
white-space: nowrap; |
|
li { |
|
display: inline-block; |
|
} |
|
} |
|
} |
|
.list { |
|
li { |
|
display: flex; |
|
padding: 20rpx; |
|
margin: 16rpx 20rpx; |
|
background-color: #fff; |
|
border-radius: 16rpx; |
|
} |
|
.pic { |
|
width: 240rpx; |
|
height: 180rpx; |
|
margin-right: 20rpx; |
|
border-radius: 8px; |
|
} |
|
.name { |
|
font-size: 30rpx; |
|
font-weight: 600; |
|
color: #333; |
|
} |
|
.meta { |
|
margin: 10rpx 0; |
|
font-size: 26rpx; |
|
color: #999; |
|
} |
|
} |
|
</style>
|
|
|