Applet/pages/recruit/details.vue

<template>
	<view class="container">
		<uni-section :title="info.topic" titleFontSize="18" type="line">
			<uni-list>
				<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon[0]" title="招募时间" :rightText="`${info.startTime}至${info.endTime}`"></uni-list-item>
				<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon[1]" title="负责人" :rightText="info.sponsorName"></uni-list-item>
				<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon[2]" title="联系电话" :rightText="info.sponsorPhone"></uni-list-item>
				<uni-list-item :show-extra-icon="true" title="招募人数" :rightText="info.count"></uni-list-item>
			</uni-list>
		</uni-section>
		<uni-section title="活动详情" titleFontSize="18" type="line">
			<rich-text image-menu-prevent="true" :nodes="info.content" class="content"></rich-text>
		</uni-section>
		<uni-goods-nav class="goodNav" :fill="true" :options="options" :buttonGroup="buttonGroup" @buttonClick="buttonClick" />
	</view>
</template>

<script>
	import request from '../../api/recruit.js';
	export default {
		onLoad: function (option) {
			this.id = option.id;
		},
		data() {
			return {
				id: '',
				info: null,
				options: [],
				extraIcon: [
					{
						color: '#c60814',
						size: '22',
						type: 'calendar'
					},
					{
						color: '#c60814',
						size: '22',
						type: 'person-filled'
					},
					{
						color: '#c60814',
						size: '22',
						type: 'phone'
					}
				],
				buttonGroup: [
					{
					  text: '报名活动',
					  backgroundColor: '#ff0000',
					  color: '#fff'
					}
				],
				statusInfo: true
			}
		},
		mounted() {
			this.query();
		},
		methods: {
			async query() {
				const res = await request.getDetails({ id: this.id });
				const statusInfo = await request.getStatus({ id: this.id });
				this.info = res.data;
				if (statusInfo.data) {
					this.buttonGroup[0].text = '报名成功';
					this.buttonGroup[0].backgroundColor = '#999';
					this.buttonGroup[0].disable = true;
				}
				
			},
			buttonClick(e) {
				if (e.index == 0){
					if (e.content.disable) return;
					this.report();
				}
			},
			async report() {
				const res = await request.report({ id: this.id });
				if (res.code == 200) {
					wx.showToast({
						title: '报名成功'
					})
					this.query();
				}
			},
		}
	}
</script>

<style>
	.container {
		position: relative;
		padding-bottom: 12vw;
		background-color: #fff;
	}
	.banner {
		width: 100%;
		height: 50vw;
	}
	.content {
		display: block;
		width: 90%;
		margin: 10px auto;
	}
	.goodNav {
		width: 100%;
		height: 12vw;
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>