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.
300 lines
7.6 KiB
300 lines
7.6 KiB
1 year ago
|
<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>
|