medicine_app/pages/trainingCourse/index.vue

<template>
	<view class="page" style=" height:100vh; background: #f6f6f8;">
		<z-nav-bar title="培训班管理">
			<view slot="right">
				<picker mode="date" fields="year" @change="handleYearChange">
				  <view class="picker">
					<uni-icons type="info" size="16"></uni-icons>{{ year || '请选择年份' }}
				  </view>
				</picker>
			</view>
		</z-nav-bar>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="list_block" v-if="!nullStatus">
			<view class="list_item" v-for="(item,index) in list" :key="index">
				<view class="list_item_right">
					<text class="list_item_title">{{item.title}}</text>
					<text class="list_item_text">活动类型：<span v-if="item.type==1">线上</span><span v-else>线下</span></text>
					<text class="list_item_text">活动年份：{{item.year}}</text>
					<text class="list_item_text">培训日期：{{item.trainingDate}}至{{item.endDate}}</text>
					<text class="list_item_text">培训价格：
						<span style="color: red; font-size: 32rpx; font-weight: bold;">￥{{item.finalFee}}</span>
						<span style="text-decoration: line-through; padding-left: 15rpx;" v-if="Number(item.finalFee)!=item.fee">￥{{item.fee}}</span>
					</text>
					<text class="list_item_text" style=" font-size: 24rpx;" v-if="Number(item.finalFee)!=item.fee">{{item.identity}}身份报名享优惠折扣</text>
					<view style=" display: flex; align-items: center;">
						<uni-button class="list_item_btn" @click="goToDetail(item)">了解详情</uni-button>
						<uni-button class="list_item_btn list_item_btn_bm" @click="goToBuy(item)" v-if="item.isJoin!=1&&item.singupFlag!=0">立即报名</uni-button>
						<uni-button class="list_item_btn list_item_btn_ybm" @click="goToContact(item)" v-if="item.isJoin==1&&item.singupFlag!=0">已报名联系客服</uni-button>
					</view>
				</view>
				
				<view class="statusBg" v-if="item.isJoin==1">已报名</view>
				<view class="statusBg statusBg2" :class="item.isJoin==1?'statusBg_top':''" v-if="item.singupFlag==0">已关闭</view>
			</view>
		</view>
		<view class="zanwu" v-if="nullStatus">暂无数据</view>
		
		<z-navigation></z-navigation>
		
		<u-popup key="1" v-if="showCodeImg" :show="showCodeImg" :round="10" @close="closePup">
			<view class="box6">
				<text>非常感谢您报名我们的培训班，<br/>您可以添加客服微信，我们会邀请您进培训群。</text>
				<image @click="previewImage('/static/qiyeWx.jpg')" src="/static/qiyeWx.jpg" mode="widthFix" style="width: 100px; height: 100px; margin: 0 auto;"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
import $http from '@/config/requestConfig.js';

export default {
	data() {
		return {
			list: [],
			nullStatus: false,
			year: '',
			showCodeImg: false,
		}
	},
	onLoad(e) {
		
	},
	onShow() {
		this.getData();
	},
	methods: {
		//获取数据
		getData(){
			uni.showLoading({
				title: '加载中'
			})
			$http.request({
				url: "common/trainingClass/trainingClassList",
				method: "POST",
				data: {
					year: this.year
				},
				header: {
					'Content-Type': 'application/json'
				},
			})
			.then(res => {
				uni.hideLoading();
				if (res.code == 0) {
					if(res.trainingClassList&&res.trainingClassList.length>0){
						this.list = res.trainingClassList;
					}else{
						this.list = [];
						this.nullStatus = true;
					}
				}
			}).catch(e => {
				
			});
		},
		//选择年份
		handleYearChange(event){
			this.year = event.detail.value;
			this.list = [];
			this.nullStatus = false;
			this.getData();
		},
		//了解详情
		goToDetail(item){
			uni.navigateTo({
			  url: `/pages/trainingCourse/detail?image=${item.icon}`,
			});
		},
		//立即报名
		goToBuy(item){
			var data = {
				id: item.id,
				title: item.title,
				price: item.finalFee,
				identity: item.identity
			}
			uni.navigateTo({
			  url: '/pages/order/index?data='+JSON.stringify(data),
			});
		},
		//联系客服
		goToContact(item){
			this.showCodeImg = true;
		},
		//关闭弹窗
		closePup(){
			this.showCodeImg = false;
		},
		//放大图片
		previewImage(url) {
		  this.showCodeImg = false
		  uni.previewImage({
		    urls: [url],
		  });
		},
	},
}
</script>

<style>
.zanwu{
	font-style: 26rpx;
	line-height: 30rpx;
	padding-top: 100rpx;
	text-align: center;
	color: #999;
}
.list_block{
	padding: 20rpx;
}
.list_item{
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
	padding: 20rpx;
	box-shadow: 0px 0px 6px 0px #a7bbe4;
	position: relative;
}
.list_item_right{
	margin-left: 20rpx;
}
.list_item_right text{
	display: block;
}
.list_item_title{
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	line-height: 40rpx;
	padding-bottom: 10rpx;
}
.list_item_text{
	font-size: 28rpx;
	color: #666;
	line-height: 42rpx;
}
.list_item_btn{
	margin-top: 15rpx;
	width: 150rpx;
	height: 50rpx;
	text-align: center;
	line-height: 50rpx;
	border-radius: 15rpx;
	background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%);
	font-size: 24rpx;
	color: #fff;
}
.list_item_btn_bm{
	margin-left: 10rpx;
	background-image: linear-gradient(90deg, #ff1f00 0%, #fa9f93 100%);
}
.list_item_btn_ybm{
	width: 200rpx;
	margin-left: 10rpx;
	background-image: linear-gradient(90deg, #ff8d00 0%, #f5c350 100%);
}
.statusBg{
	position: absolute;
	right: 0;
	top: 20rpx;
	width: 100rpx;
	height: 44rpx;
	line-height: 44rpx;
	background: #ff1f00;
	opacity: 0.8;
	border-radius: 50rpx 0 0 50rpx;
	font-size: 22rpx;
	color: #fff;
	padding-left: 20rpx;
}
.statusBg2{
	background: #999;
}
.statusBg_top{
	top: 70rpx;
}
.picker{
	display: flex;
	align-items: center;
	font-size: 26rpx;
	padding-right: 20rpx;
}
.box6{
	padding: 20rpx;
}
.box6 text{
	display: block;
	text-align: center;
	color: #999;
	margin-bottom: 20rpx;
	font-size: 28rpx;
	line-height: 36rpx;
}
</style>