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.
353 lines
8.4 KiB
353 lines
8.4 KiB
<template> |
|
<view class="page"> |
|
<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> |
|
|
|
<view class="wrap"> |
|
<sideSelect :menus="menus" @menuClick="menuClick" /> |
|
<view v-if="list.length" class="list"> |
|
<uni-swipe-action> |
|
<uni-swipe-action-item |
|
v-for="item in list" |
|
:key="i" |
|
:threshold="0" |
|
:right-options="ops" |
|
@click="e => handle(e, item)" |
|
> |
|
<view class="item" @click="toDetail(item)"> |
|
<view class="top"> |
|
<image class="pic" :src="item.coverUrl"></image> |
|
<view class=""> |
|
<view class="name ell">{{ item.competitionName }}</view> |
|
<view v-if="item.whetherToShowApplicants === '1'" class="meta ell">{{ item.applicantNum }}/{{ item.quantityLimit }}人已报名</view> |
|
</view> |
|
</view> |
|
|
|
<view class="texts"> |
|
<view class="meta">举办时间：{{ item.playStartTime + ' ~ ' + item.playEndTime }}</view> |
|
<view class="meta ell">主办方：{{ item.sponsor }}</view> |
|
</view> |
|
</view> |
|
</uni-swipe-action-item> |
|
</uni-swipe-action> |
|
</view> |
|
</view> |
|
|
|
<filter-popup ref="filter" showCategory :data="filters" :form.sync="filterForm" v-model="popup" title="全部筛选" height="1104rpx" @finsh="subFinsh"></filter-popup> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { postLoginActivity, competitionUserDel, cancelRegistration } from '@/apis/modules/activity.js' |
|
export default { |
|
data() { |
|
return { |
|
menus: [ |
|
{ |
|
id: '', |
|
name: '全部' |
|
}, |
|
{ |
|
id: 1, |
|
name: '活动' |
|
}, |
|
{ |
|
id: 2, |
|
name: '需求' |
|
}, |
|
{ |
|
id: 3, |
|
name: '招募' |
|
}, |
|
], |
|
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: '', |
|
ops: [ |
|
{ |
|
text: '删除', |
|
style: { |
|
backgroundColor: '#F56C6C' |
|
} |
|
}, |
|
{ |
|
text: '取消报名', |
|
style: { |
|
backgroundColor: '#f79c69' |
|
} |
|
} |
|
], |
|
} |
|
}, |
|
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() { |
|
this.initList() |
|
// this.getFilter() |
|
}, |
|
methods: { |
|
getList() { |
|
postLoginActivity({ |
|
pageNum: this.page, |
|
pageSize: this.pageSize, |
|
listType: 1, |
|
keyWord: this.keyword, |
|
platformSource: '' |
|
}).then(async ({ data }) => { |
|
this.list = this.reachBottom > 0 ? [...this.list, ...data.records] : data.records |
|
this.page++ // 每次获取了数据后page+1 |
|
const noMore = this.list.length === data.total // 是否加载完所有数据 |
|
this.status = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore |
|
this.reachBottom = noMore ? -1 : 0 // 加载完了则设置为-1 |
|
}).catch(e => {}) |
|
}, |
|
initList() { |
|
this.page = 1 |
|
this.reachBottom = 0 |
|
this.getList() |
|
}, |
|
// 筛选 |
|
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.id}`) |
|
}, |
|
// 删除 |
|
handle(e, row) { |
|
const that = this |
|
if (!e.index) { |
|
uni.showModal({ |
|
title: '提示', |
|
content: '确定要删除吗？', |
|
success(res) { |
|
if (res.confirm) { |
|
competitionUserDel({ |
|
competitionId: row.id |
|
}).then(res => { |
|
that.$util.sucMsg('删除成功') |
|
that.initList() |
|
}).catch(res => {}) |
|
} |
|
} |
|
}) |
|
} else { |
|
uni.showModal({ |
|
title: '提示', |
|
content: '确定要取消报名吗？', |
|
success(res) { |
|
if (res.confirm) { |
|
cancelRegistration(row.id).then(res => { |
|
that.$util.sucMsg('取消报名成功') |
|
that.initList() |
|
}).catch(res => {}) |
|
} |
|
} |
|
}) |
|
} |
|
}, |
|
// 左侧分类点击回调 |
|
menuClick(e) { |
|
|
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.wrap { |
|
display: flex; |
|
align-items: flex-start; |
|
} |
|
.list { |
|
flex: 1; |
|
padding: 20rpx; |
|
margin: 20rpx; |
|
border-radius: 8px; |
|
background-color: #fff; |
|
.item { |
|
padding: 28rpx 0; |
|
overflow: hidden; |
|
border-bottom: 1px solid rgba(225, 225, 225, .4); |
|
} |
|
.top { |
|
display: flex; |
|
} |
|
.pic { |
|
width: 160rpx; |
|
height: 100rpx; |
|
margin-right: 20rpx; |
|
border-radius: 8px; |
|
} |
|
.texts { |
|
// width: calc(100% - 240rpx); |
|
} |
|
.name { |
|
font-size: 28rpx; |
|
font-weight: 600; |
|
color: #333; |
|
} |
|
.meta { |
|
margin: 10rpx 0; |
|
font-size: 26rpx; |
|
color: #999; |
|
&:last-child { |
|
margin-bottom: 0; |
|
} |
|
} |
|
} |
|
</style>
|
|
|