veterans_H5/h5_web/pages/basicTraining/components/offline.vue

<template>
	<view>
		<view class="status">
			<view class="title">{{offlineInfo.adaptStatus|verifyStatusFilter}}</view>
			<view class="tip">注：必须参加线下培训才能通过适应性培训</view>
			<!-- <u-parse :html="offlineInfo.offlineContent"></u-parse> -->			
		</view>
		<view class="content">
			<!-- <dl>
				<dt>【培训名称】</dt>
				<dd>{{offlineInfo.adaptName}}</dd>
			</dl>
			<dl>
				<dt>【培训地址】</dt>
				<dd>{{offlineInfo.adaptAddress}}</dd>
			</dl>
			<dl>
				<dt>【培训时长】</dt>
				<dd>{{offlineInfo.timeLength}}</dd>
			</dl>
			<dl>
				<dt>【开始时间】</dt>
				<dd>{{offlineInfo.startTime}}</dd>小时
			</dl>
			<dl>
				<dt>【结束时间】</dt>
				<dd>{{offlineInfo.endTime}}</dd>
			</dl> -->
			<dl>
				<dt>【培训安排】</dt>
				<dd>
					<u-parse :html="offlineInfo.adaptPlan"></u-parse>
				</dd>
				<!-- <dd>{{offlineInfo.adaptPlan}}</dd> -->
			</dl>
		</view>
		<u-bottom>
			<view slot="content">
				<view @click="sign" v-if="offlineInfo.flag==0&&offlineId" class="status-btn fix-bottom">
					确认签到
				</view>
				<view v-else-if="offlineInfo.flag==0&&!offlineId" class="status-btn fix-bottom">
					未签到
				</view>
				<view slot="content" v-else-if="offlineInfo.flag==1" class="status-btn fix-bottom">
					已签到
				</view>
			</view>
		</u-bottom>
	</view>
</template>

<script>
	export default{
		name: 'offlineTraining',
		props:{
			offlineId: {
				type: String,
				default: function() {
					return ''
				}
			}
		},
		data(){
			return{
				offlineInfo:'',
				params:{}
			}
		},
		onLoad(){
			
		},
		mounted() {
			if(this.offlineId){
				this.params.id = this.offlineId;
				this.getAdaptTrainIdOffline(this.params);
			}else{
				this.getAdaptTrainOffline();
			}
		},
		onShow(){
			
		},
		filters: {
		  verifyStatusFilter(value) {
			if (value == 0) {
			  return '未开始';
			}else if(value == 1){
				return '进行中';
			}else if(value == 2){
				return '已完成';
			}else {
			  return '未知';
			}
		  },
		  verifyFlagFilter(value){
			  if (value == 0) {
			    return '未参与';
			  }else if(value == 1){
			  	return '已参与';
			  }else {
			    return '未知';
			  }
		  }
		},
		methods:{
			getAdaptTrainOffline(){
				this.$u.api.getAdaptTrainOffline().then(res=>{
					this.offlineInfo = res.data||[];
					console.log('getAdaptTrainOffline',JSON.parse(JSON.stringify(res)));
				})
			},
			getAdaptTrainIdOffline(params){
				console.log('params',params)
				this.$u.api.getAdaptTrainIdOffline(params).then(res=>{
					this.offlineInfo = res.data||[];
					console.log('getAdaptTrainIdOffline',JSON.parse(JSON.stringify(res)));
				})
			},
			sign(){
				this.$u.api.postSignOffline({tabId:this.offlineId}).then(res=>{
					if(res.code == 200){
						this.getAdaptTrainIdOffline(this.params);
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					console.log('postSignOffline',JSON.parse(JSON.stringify(res)));
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status{background-color: #fff;padding: 24rpx;border-radius: 8rpx;text-align: center;margin: 24rpx;}
	.status .title{font-size: 36rpx;color: #fc7a40;margin-bottom: 10rpx;}
	.status .tip{font-size: 18rpx;color: #bfbfbf;}
	.status-btn{background-color: #4433d9;color: #fff;margin: 0 24rpx;padding: 24rpx;border-radius: 8rpx;}
	.content{background-color: #fff;padding: 24rpx;margin: 24rpx;}
	.content dl{margin-bottom: 24rpx;}
	.content dt{font-size: 36rpx;margin-bottom: 24rpx;}
	.content dd{color: #5f5f5f;margin: 0;}
	// @import  './offline.scss'
</style>