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.
411 lines
9.7 KiB
411 lines
9.7 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"> |
|
<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.id}" @click="tabChange(tab.id)">{{ tab.classificationName }}</li> |
|
</scroll-view> |
|
</ul> |
|
<view v-if="list.length" class="list"> |
|
<uni-swipe-action> |
|
<uni-swipe-action-item |
|
v-for="(item, i) in list" |
|
:key="i" |
|
:threshold="0" |
|
:right-options="ops" |
|
@click="e => handle(e, item)" |
|
> |
|
<view class="item" @click.stop="toDetail(item)"> |
|
<view class="top"> |
|
<image class="pic" :src="item.coverUrl"></image> |
|
<view class="right"> |
|
<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 v-if="item.playing" class="voucher" @click.stop="use(item)">电子入场券</view> |
|
</view> |
|
</uni-swipe-action-item> |
|
</uni-swipe-action> |
|
</view> |
|
</view> |
|
|
|
<uni-popup ref="popup" type="dialog"> |
|
<view class="sign-popup"> |
|
<uni-icons class="close" type="closeempty" size="16" color="#4876f9" @click="closePopup"></uni-icons> |
|
<view class="activity-name">{{ curRow.competitionName }}</view> |
|
<view class="title">签到二维码</view> |
|
<image class="qrcode" src="http://124.71.79.122/images/miniProgram/qrcode.png"></image> |
|
<view v-if="curRow.playStartTime" class="date">有效期限{{ curRow.playStartTime.substr(0, 16) + ' ~ ' + curRow.playEndTime.substr(0, 16) }}</view> |
|
<view class="userName">{{ info.hrUserInfo.userName }}</view> |
|
<view class="phone">{{ info.hrUserInfo.phone }}</view> |
|
<view v-if="info.organizationInfoList && info.organizationInfoList.length" class="org-name">{{ info.organizationInfoList[0].organizationName }}</view> |
|
</view> |
|
</uni-popup> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { postLoginActivity, competitionUserDel, cancelRegistration, categoryList } from '@/apis/modules/activity.js' |
|
import { viewUserDetails } from '@/apis/modules/user.js' |
|
import Util from '@/libs/util' |
|
export default { |
|
data() { |
|
return { |
|
tabs: [], |
|
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: '', |
|
timer: null, |
|
curRow: {}, |
|
info: {}, |
|
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.getCategory() |
|
this.initList() |
|
this.getInfo() |
|
}, |
|
methods: { |
|
getList() { |
|
postLoginActivity({ |
|
pageNum: this.page, |
|
pageSize: this.pageSize, |
|
listType: 1, |
|
keyWord: this.keyword, |
|
classificationId: this.curTab, |
|
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 |
|
|
|
this.now = await Util.getNow() |
|
this.statusInterval() |
|
uni.hideLoading() |
|
this.timer = setInterval(() => { |
|
this.now = new Date(this.now.setSeconds(this.now.getSeconds() + 1)) |
|
this.statusInterval() |
|
}, 1000) |
|
}).catch(e => {}) |
|
}, |
|
async statusInterval () { |
|
this.list.map(item => { |
|
if (item.signUpStartTime && item.signUpEndTime) { |
|
this.handleStatus(item) |
|
} |
|
}) |
|
}, |
|
// 定时处理时间及状态 |
|
handleStatus (item) { |
|
let playing = 0 |
|
const playStartTime = new Date(item.playStartTime) // 报名开始时间 |
|
const playEndTime = new Date(item.playEndTime) // 报名结束时间 |
|
const { now } = this |
|
// 报名中(whetherToSignUp 是否已报名 0为已报名 1为未报名) |
|
if (now > playStartTime && now < playEndTime) { |
|
playing = 1 |
|
} |
|
this.$set(item, 'playing', playing) |
|
}, |
|
initList() { |
|
this.page = 1 |
|
this.reachBottom = 0 |
|
this.getList() |
|
}, |
|
// 获取组织名字 |
|
async getInfo() { |
|
const { result } = await viewUserDetails({ |
|
openId: this.openId |
|
}) |
|
this.info = result |
|
}, |
|
// 获取分类 |
|
async getCategory() { |
|
const { page } = await categoryList() |
|
this.tabs = page |
|
}, |
|
// 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 => {}) |
|
} |
|
} |
|
}) |
|
} |
|
}, |
|
// 展示电子券 |
|
use(row) { |
|
if (row.playing) { |
|
this.curRow = row |
|
this.$refs.popup.open() |
|
} |
|
}, |
|
// 关闭弹框 |
|
closePopup() { |
|
this.$refs.popup.close() |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.tab-wrap { |
|
display: flex; |
|
.tab-scroll { |
|
width: calc(100% - 100rpx); |
|
white-space: nowrap; |
|
li { |
|
display: inline-block; |
|
} |
|
} |
|
} |
|
.list { |
|
padding: 20rpx; |
|
margin: 20rpx; |
|
border-radius: 8px; |
|
background-color: #fff; |
|
.item { |
|
position: relative; |
|
padding: 28rpx 0; |
|
overflow: hidden; |
|
border-bottom: 1px solid rgba(225, 225, 225, .4); |
|
} |
|
.top { |
|
display: flex; |
|
align-items: center; |
|
margin-bottom: 20rpx; |
|
} |
|
.pic { |
|
min-width: 160rpx; |
|
width: 160rpx; |
|
height: 100rpx; |
|
margin-right: 20rpx; |
|
border-radius: 8px; |
|
} |
|
.right { |
|
width: calc(100% - 180rpx); |
|
} |
|
.name { |
|
margin-bottom: 10rpx; |
|
font-size: 28rpx; |
|
font-weight: 600; |
|
color: #333; |
|
} |
|
.meta { |
|
margin-bottom: 10rpx; |
|
font-size: 24rpx; |
|
color: #999; |
|
&:last-child { |
|
margin-bottom: 0; |
|
} |
|
} |
|
.voucher { |
|
position: absolute; |
|
bottom: 10rpx; |
|
right: 0; |
|
padding: 8rpx 20rpx; |
|
margin-left: 20rpx; |
|
font-size: 24rpx; |
|
color: #fff; |
|
white-space: nowrap; |
|
background-color: $uni-primary; |
|
border-radius: 4px; |
|
} |
|
} |
|
|
|
|
|
.sign-popup { |
|
position: relative; |
|
width: 80vw; |
|
padding: 20rpx 0; |
|
text-align: center; |
|
box-sizing: border-box; |
|
background-color: #fff; |
|
border-radius: 8px; |
|
.close { |
|
position: absolute; |
|
top: 20rpx; |
|
right: 20rpx; |
|
} |
|
.activity-name { |
|
padding: 0 10rpx; |
|
font-size: 36rpx; |
|
color: $uni-primary; |
|
} |
|
.title { |
|
padding: 20rpx 0; |
|
margin: 20rpx 0; |
|
font-size: 32rpx; |
|
color: #fff; |
|
background-color: $uni-primary; |
|
} |
|
.qrcode { |
|
width: 200rpx; |
|
height: 200rpx; |
|
} |
|
.date { |
|
margin: 20rpx; |
|
font-size: 24rpx; |
|
color: #8c8c8c; |
|
} |
|
.userName { |
|
font-size: 30rpx; |
|
color: #333; |
|
} |
|
.phone { |
|
margin: 20rpx; |
|
font-size: 24rpx; |
|
color: #6f6f6f; |
|
} |
|
.org-name { |
|
font-size: 24rpx; |
|
color: #333; |
|
} |
|
} |
|
</style>
|
|
|