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.
187 lines
3.9 KiB
187 lines
3.9 KiB
<template> |
|
<view class="wrap"> |
|
<view class="banner"> |
|
<image class="pic" :src="form.coverUrl" mode="widthFix"></image> |
|
</view> |
|
|
|
<view class="info"> |
|
<view class="line"> |
|
<view class="label">状态：</view> |
|
<view class="val">进行中</view> |
|
</view> |
|
<view class="line"> |
|
<view class="label">人数限制：</view> |
|
<view class="val">{{ form.quantityLimit }}</view> |
|
</view> |
|
<view class="line"> |
|
<view class="label">举办时间：</view> |
|
<view class="val">{{ form.playStartTime + ' ~ ' + form.playEndTime }}</view> |
|
</view> |
|
<view class="line"> |
|
<view class="label">活动地点：</view> |
|
<view class="val">{{ form.reportingPlace }}</view> |
|
</view> |
|
<view class="line"> |
|
<view class="label">主办方：</view> |
|
<view class="val">{{ form.sponsor }}</view> |
|
</view> |
|
<view v-if="form.whetherToShowApplicants === '1'" class="line"> |
|
<view class="label">已报名人员：</view> |
|
<view class="val">(0/{{ form.quantityLimit }})</view> |
|
</view> |
|
</view> |
|
|
|
<ul class="tab"> |
|
<li v-for="(tab, i) in tabs" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li> |
|
</ul> |
|
|
|
<view v-if="!curTab" class="detail"> |
|
<mp-html :content="form.description"/> |
|
</view> |
|
<view v-else class="list"> |
|
|
|
</view> |
|
|
|
<view class="btns"> |
|
<view class="btn share">分享</view> |
|
<view class="btn sign">立刻报名</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { getCompetition } from '@/apis/modules/activity.js' |
|
export default { |
|
data() { |
|
return { |
|
id: '', |
|
curTab: 0, |
|
tabs: [ |
|
{ |
|
name: '活动详情', |
|
id: 0 |
|
}, |
|
{ |
|
name: '活动通知', |
|
id: 1 |
|
}, |
|
], |
|
form: { |
|
quantityLimit: '', |
|
playStartTime: '', |
|
playEndTime: '', |
|
reportingPlace: '', |
|
sponsor: '', |
|
}, |
|
shopCartTotal: 0, |
|
types: [], |
|
mpStyle: { |
|
p: 'font-size: 25rpx !important;font-family: Microsoft Yahei !important;font-weight: 400 !important;color: #333 !important;', |
|
span: 'font-size: 25rpx !important;font-family: Microsoft Yahei !important;font-weight: 400 !important;color: #333 !important;' |
|
} |
|
} |
|
}, |
|
onShow() { |
|
const pages = getCurrentPages() |
|
const { options } = pages[pages.length - 1] |
|
this.id = options.id |
|
this.getInfo() |
|
}, |
|
methods: { |
|
// 获取详情 |
|
getInfo() { |
|
uni.showLoading({ |
|
title: '加载中' |
|
}) |
|
getCompetition(this.id).then(res => { |
|
const data = res.competition |
|
data.whetherToShowApplicants === '1' && this.tabs.push({ |
|
name: '已报名人员', |
|
id: 2 |
|
}) |
|
this.form = data |
|
uni.hideLoading() |
|
}).catch(e => { |
|
uni.hideLoading() |
|
}) |
|
}, |
|
// tab切换 |
|
tabChange(tab) { |
|
this.curTab = tab.id |
|
}, |
|
// 下载附件 |
|
download(item) { |
|
uni.setStorageSync('files', { |
|
copyWriting: this.form.mall.productName, |
|
fileName: [item.fileName], |
|
urls: [item.filePath] |
|
}) |
|
this.$util.to(`/team/send/send`) |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.wrap { |
|
padding-bottom: 140rpx; |
|
} |
|
.banner { |
|
.pic { |
|
width: 100%; |
|
} |
|
} |
|
.info { |
|
position: relative; |
|
padding: 20rpx; |
|
margin: -150rpx 30rpx 30rpx; |
|
background-color: #fff; |
|
border-radius: 8px; |
|
.line { |
|
display: flex; |
|
align-items: center; |
|
margin: 20rpx 0; |
|
} |
|
.label { |
|
min-width: 180rpx; |
|
font-size: 28rpx; |
|
} |
|
.val { |
|
font-size: 28rpx; |
|
font-weight: 600; |
|
color: #333; |
|
} |
|
} |
|
.detail { |
|
padding: 34rpx 32rpx; |
|
margin: 20rpx; |
|
border-radius: 20px; |
|
background-color: #fff; |
|
} |
|
.btns { |
|
position: fixed; |
|
bottom: 0; |
|
display: flex; |
|
justify-content: center; |
|
width: 100%; |
|
padding: 20rpx 0; |
|
background-color: #fff; |
|
.btn { |
|
width: 200rpx; |
|
padding: 16rpx 0; |
|
font-size: 28rpx; |
|
color: #fff; |
|
text-align: center; |
|
} |
|
.share { |
|
background-color: #75b4ff; |
|
border-top-left-radius: 40rpx; |
|
border-bottom-left-radius: 40rpx; |
|
} |
|
.sign { |
|
background-color: $uni-primary; |
|
border-top-right-radius: 40rpx; |
|
border-bottom-right-radius: 40rpx; |
|
} |
|
} |
|
</style>
|
|
|