su_nan-mobile_h5/src/pages/parkTraining/index.vue

<template>
	<div class="announcement">
		<div class="tap-part">
			<van-tabs
			 v-model="active"
			 color="#2A3980"
			 line-width="175px"
			 title-active-color="#2A3980"
			>
				<van-tab title="最新培训">
					<div class="tips-list">
						<div
						 v-for="item in tipList"
						 :class="['tip-item', item.active && 'active']"
						 @click="selectChange(item.value)"
						>
							{{ item.label }}
						</div>
					</div>

					<div class="card-news-list">
						<div
						 v-for="item in list"
						 class="detail-card shadow-radius news-card"
						 @click="getDetail(item)"
						>
							<div class="image">
								<img :src="item.annexArray[0]" alt=""/>
							</div>
							<div class="info-part">
								<div class="top">
									<p class="text">{{ item.trainTitle }}</p>
									<span
									 v-if="item.onlineOfflineStatus === '线下'"
									 class="tip-grid-bg"
									>线下</span
									>
									<span v-else class="tip-grid-bg red">线上</span>
								</div>

								<div class="bottom">
									<div
									 v-if="
                      item.onlineOfflineStatus === '线下' &&
                      item.registrationStatus === '1'
                    "
									 class="left"
									>
                    <span class="normal-tip by y-bg" style="text-align: center"
                    >报名中</span
                    >
									</div>
									<div
									 v-if="
                      item.onlineOfflineStatus === '线下' &&
                      item.registrationStatus === '2'
                    "
									 class="left"
									>
                    <span class="normal-tip by h-bg" style="text-align: center"
                    >报名已结束</span
                    >
									</div>

									<div
									 v-if="
                      item.onlineOfflineStatus === '线上' &&
                      item.trainStatus === '2'
                    "
									 class="left"
									>
                    <span class="normal-tip by z-bg" style="text-align: center"
                    >可观看</span
                    >
									</div>
									<div class="right">
										<div class="num">{{ item.partakeNumber }}人参与</div>
										<div
										 class="icon-collect"
										 @click.stop="changeCollectorsStatus(item)"
										>
											<i
											 v-if="item.collectorsStatus === '2'"
											 class="iconfont icon-wujiaoxingxingxingshoucangdianji blue"
											></i>
											<i
											 v-else
											 class="iconfont icon-wujiaoxingxingxingshoucangdianji"
											></i>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</van-tab>
				<van-tab title="报名记录">
					<div class="card-news-list">
						<div
						 v-for="item1 in regisSignList"
						 class="record-card shadow-radius"
						>
							<div class="left">
								<img :src="item1.annexArray[0]" alt=""/>
								<p class="text">请出示二维码签到</p>
							</div>
							<div class="right">
								<div class="title">{{ item1.trainTitle }}</div>

								<div class="time">时间：{{ item1.trainStartTime }}开始</div>

								<div class="add">
									<p>地址：{{ item1.trainAddress }}</p>
								</div>

								<div class="bottom">
									<p
									 v-if="item1.registrationStatus === '1'"
									 class="normal-tip by y-bg"
									 style="text-align: center"
									>
										报名中
									</p>
									<p
									 v-else
									 class="normal-tip by h-bg"
									 style="text-align: center"
									>
										已结束
									</p>
								</div>
							</div>
						</div>
					</div>
				</van-tab>
			</van-tabs>
		</div>
	</div>
</template>

<script>
import Base from '@/pages/base/base'
import auth from '@/service/auth'

import { clickCollect, list, listRegisSignInfo } from '@/service/api_train'

export default {
	name: 'ParkTraining',
	mixins: [Base],
	data() {
		return {
			url: process.env.VUE_APP_API_URL,
			active: 0,
			dc_key: ['trainType'],
			userId: '',
			tipList: [],
			search: {
				trainType: '',
				userId: '',
				publishStatus: '2'
			},
			list: [],
			regisSignList: []
		}
	},
	mounted() {
		this.userId = auth.uid()
		this.initDict(this.dc_key).then((res) => {
			this.tipList = this.dc_data.trainType
			this.getData()
			this.getRegisSignInfo()
		})
	},
	methods: {
		getData() {
			const _this = this
			this.search.userId = this.userId
			list(this.search).then((res) => {
				_this.list = res

				_this.list.forEach((e) => {
					e.annexArray[0] = e.annexArray[0].replace(
					 '/webServer/FileController/download/',
					 process.env.VUE_APP_API_URL + '/FileController/download/'
					)
				})
			})
		},
		getRegisSignInfo() {
			const _this = this
			listRegisSignInfo({ userId: this.userId, referenceType: '2' })
			 .then((res) => {
				 _this.regisSignList = res
				 _this.regisSignList.forEach((item) => {
					 console.log(this.url)
					 item.annexArray[0] = item.annexArray[0].replace(
						'/server/FileController/download/',
						process.env.VUE_APP_API_URL + '/FileController/download/'
					 )

					 item.trainStartTime = this.$common.transBaseDateTime(
						item.trainStartTime
					 )
				 })
				 console.log(_this.regisSignList)
			 })
			 .catch(() => {
			 })
		},
		selectChange(value) {
			let tel = true
			this.tipList.forEach((i) => {
				if (i.value === value) {
					if (i.active) {
						tel = false
					} else {
						i.active = true
					}
				} else {
					i.active = false
				}
			})
			if (tel) {
				this.search.trainType = value
				this.getData()
			}
		},
		getDetail(val) {
			if (val.onlineOfflineStatus === '线下') {
				this.$router.push({
					path: '/parkTraining/detail',
					query: {
						// 这里面是写需要传送的值
						id: val.id
					}
				})
			} else {
				this.$router.push({
					path: '/parkTraining/onlineDetail',
					query: {
						// 这里面是写需要传送的值
						id: val.id
					}
				})
			}
		},
		changeCollectorsStatus(val) {
			if (val.collectorsStatus === '2') {
				const _this = this
				clickCollect({
					id: val.id,
					userId: auth.currUser().id,
					collectorsStatus: '1'
				}).then((res) => {
					_this.getData()
					_this.getRegisSignInfo()
				})
			} else {
				const _this = this
				clickCollect({
					id: val.id,
					userId: auth.currUser().id,
					collectorsStatus: '2'
				}).then((res) => {
					_this.getData()
					_this.getRegisSignInfo()
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped type="text/scss">
.announcement {
	box-sizing: border-box;

	.tap-part {
		margin-top: 10px;
		height: calc(100vh - 10px);

		.van-tabs {
			height: 100%;
		}

		.info-list {
			height: calc(100vh - 92px);
			background-color: #fff;
			padding: 0 20px;
			overflow-y: auto;
		}
	}
}

//头部标签
.tips-list {
	margin-top: 20px;
	@include flex;
	flex-wrap: wrap;

	.tip-item {
		width: 120px;
		margin: 0 15px 20px;
		text-align: center;
		line-height: 40px;
		font-size: 24px;
		color: #fff;

		border-radius: 4px;
		background-color: rgba(215, 215, 215, 1);
	}

	.active {
		background-color: $main;
	}
}

.card-news-list {
	box-sizing: border-box;
	overflow-y: auto;
	height: calc(100vh - 240px);
	padding: 20px 20px;

	.news-card {
		margin-bottom: 10px;
	}

	.record-card {
		margin-bottom: 10px;
		height: 346px;
		background-color: #fff;
		padding: 20px 30px;
		box-sizing: border-box;
		@include flex;

		.left {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 100%;

			img {
				width: 244px;
			}

			.text {
				margin-bottom: 10px;
				text-align: center;
				font-size: 16px;
				color: $color4;
			}
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			text-align: center;
			font-size: 24px;
			height: 100%;
			color: $color4;
			padding-left: 100px;

			.title {
				font-weight: 700;
				margin-top: 20px;
			}

			.time {
			}

			.add {
				p {
					word-break: break-word;
				}
			}

			.bottom {
				text-align: right;
			}
		}
	}
}
</style>