daoshiyuyue-teacher/pages/mine/shuangchuang.vue

<template>
	<view class="shuangchaung">
		<u-sticky>
			<view class="search">
				<view class="u-demo-block__content">
					<view class="u-page__tag-item">
						<u-search placeholder="请输入项目标题" v-model="searchValue" @search="searchActive()"
							@clear="clearActive()" :show-action="false" shape='square'>
						</u-search>
					</view>
				</view>
				<view class="search-button" @click="searchActive()">搜索</view>
			</view>
		</u-sticky>
		<view class="item_wrap">
			<view class="empty" v-if="list.length==0">
				<view class="enptyStatus">
					<image src="../../static/empty.png" mode=""></image>
					<view class="words">
						暂无内容
					</view>
				</view>
			</view>
			<view class="item" v-for="(item,index) in list" :key="index">
				<!-- <view class="tag_wrap">
					<text v-if="item.check_status==1"  class="success">审核成功</text>
					<text v-if="item.check_status==2" class="wrang">审核失败</text>
					<text v-if="item.check_status==0" class="wait">待审核</text>
				</view> -->
				<view class="left">
					<view class="center">
						<view class="title">
							{{item.title}}
						</view>
						<view class="name">
							<text>导师：{{item.truename}}</text>
							<text v-if="item.check_status==1"  class="success">审核成功</text>
							<text v-if="item.check_status==2" class="wrang">审核失败</text>
							<text v-if="item.check_status==0" class="wait">待审核</text>
							<!-- <text v-if="getStart(item.apply_start_time) <= getNow() && getNow() <= getEnd(item.apply_end_time)" class="tag">进行中</text>
							<text v-if="getNow() > getEnd(item.apply_end_time)" class="tag over">已结束</text>
							<text v-if="getStart(item.apply_start_time) > getNow()" class="tag wait">未开始</text> -->
						</view>
					</view>
				
				</view>
				<view class="right">
					<text class="nums">{{item.sign_up_count}}/{{item.student_nums}}</text>
					<view class="detail" @click="to_detail(item.id)">
						<u-icon name="arrow-right" color="#999" size="24"></u-icon>
					</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				last: false,
				searchValue: '', //搜索
			}
		},
		onShow() {
			this.page = 1
			this.list = []
			this.last = false
			this.getList()
		},
		async onLoad() {
			// this.getList()
		},
		onReachBottom() {
			if (!this.last) {
				this.page++
			}
			console.log(this.page, 'oooooooooooooooooo')
			this.getList()
		},
		methods: {
			//点击搜索
			searchActive() {
				this.list = []
				this.page = 1
				this.last = false
				console.log(this.searchValue, '用户点击了搜索')
				this.getList()
			},
			//清空搜索框
			clearActive() {
				this.list = []
				this.page = 1
				this.last = false
				this.getList()
				console.log(this.searchValue, '用户点击了搜索---')
			},
			// 		//截取时间
			// 		getTime(time) {
			// 			if (!time) return '--'
			// 			else return time.split(' ')[0]
			// 		},
			// 		getTime1(time) {
			// 			let name = ''
			// 			for (let key in time) {
			// 				if (key == 'active_time')
			// 					name = time.active_time.slice(0,16)
			// 			}
			// 			return name ? name : '--'

			// 		},

			getList() {
				this.$u.get('/innovation', {
					title: this.searchValue,
					page: this.page,
					per_page: 15
				}).then(res => {
					console.log(res, 'ppp')
					let data = res.data.list
					console.log(res, 'course1')
					if (this.page > 1 && data.length == 0) {
						uni.showToast({
							title: '暂无更多',
							icon: 'none'
						})
						this.last = true
					} else {
						this.list = this.list.concat(data)
					}
				})
			},
			
			//获取开始时间
			getStart(time) {
				// let time = this.detail.apply_start_time
				// console.log(time,'tome')
				return new Date(time).getTime()
			},
			//获取结束时间
			getEnd(time) {
				// let time = this.detail.apply_end_time
				return new Date(time).getTime()
			},
			//获取当前时间
			getNow() {
				return Date.now()
			},
			
			
			to_detail(id) {
				console.log('详情')
				uni.navigateTo({
					url: './shuangchuang_detail?id=' + id
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		position: relative;
		background-color: #F7F7F7;
	}

	.shuangchaung {
		.enptyStatus{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					padding: 30px 10px;
					image{
						width: 120px;
						height: 150px;
						margin-top: 100px;
					}
					.words{
						color: #ffae21;
						font-size: 18px;
						padding-top: 18px;
					}
				}
		.search {
			background-color: #FFFFFF;
			padding: 8px 15px;
			// margin-top: 6px;
			display: flex;
			justify-items: center;
			justify-content: center;
			align-items: center;

			.search-button {
				padding: 0 10px;
				color: #138E57;
				font-size: 15px;
				text-align: center;
			}

			.u-demo-block__content {
				flex: 1;
			}

			::v-deep {
				.u-action {
					color: #138E57 !important;
				}
			}

		}

		.item_wrap {
			padding: 15px;

			.item {
				background-color: #fff;
				opacity: 1;
				border-radius: 4px;
				padding: 16px 15px;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10px;
				overflow: hidden;

				// .tag_wrap {
				// 	position: absolute;
				// 	top: 0;
				// 	// left: 0;
				// 	right: 0;

				// 	.success {
				// 		display: inline-block;
				// 		color: #67C23A;
				// 		background-color:rgba($color: #67C23A, $alpha: 0.2) ;
				// 		padding: 2px 5px;
				// 		font-size: 12px;
				// 		// border-bottom-right-radius: 6px;
				// 		border-bottom-left-radius: 6px;
				// 	}

				// 	.wrang {
				// 		display: inline-block;
				// 		color:#F56C6C;
				// 		background-color:rgba($color:#F56C6C, $alpha: 0.2) ;
				// 		padding: 2px 5px;
				// 		font-size: 12px;
				// 		// border-bottom-right-radius: 6px;
				// 		border-bottom-left-radius: 6px;
				// 	}

				// 	.wait {
				// 		display: inline-block;
				// 		color: #E6A23C;
				// 		background-color:rgba($color: #E6A23C, $alpha: 0.2) ;
				// 		padding: 2px 5px;
				// 		font-size: 12px;
				// 		// border-bottom-right-radius: 6px;
				// 		border-bottom-left-radius: 6px;
				// 	}
				// }

				.right {
					width: 30%;
					flex-shrink: 0;
					border-left: 1px solid #eee;
					text-align: center;
					// padding-right: 15px;
					display: flex;
					align-items: center;
					justify-content: space-between;
				
					text {
						display: block;
						font-size: 12px;
						color: #999;
						
					}
				
					.nums {
						display: inline-block;
						width: 70%;
						text-align: center;
						font-size: 20px;
						color: #3B7653;
						padding-left: 5px;
					}
				
					.detail {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-shrink: 0;
						width: 25px;
						height: 25px;
						text-align: center;
						border-radius: 50%;
						border: 1px solid #eee;
						color: #999;
						font-size: 16px;
				
					}
				}
				
				.left {
					width: 70%;
					flex-shrink: 0;
				
					.center {
						flex-shrink: 0;
				
						.title {
							font-size: 16px;
							color: #333;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
				
						.name {
							margin-top: 5px;
							font-size: 14px;
							color: #666;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							display: flex;
							align-items: center;
							justify-content: space-between;
							text{
								flex-shrink: 0;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								&:first-child{
									width: calc(100% - 75px);
								}
							}
							.success {
								display: inline-block;
								color: #67C23A;
								background-color:rgba($color: #67C23A, $alpha: 0.2) ;
								padding: 2px 5px;
								font-size: 12px;
								// border-bottom-right-radius: 6px;
								// border-bottom-left-radius: 6px;
								border-radius: 3px;
								margin-right: 15px;
								
							}
							
							.wrang {
								display: inline-block;
								color:#F56C6C;
								background-color:rgba($color:#F56C6C, $alpha: 0.2) ;
								padding: 2px 5px;
								font-size: 12px;
								// border-bottom-right-radius: 6px;
								// border-bottom-left-radius: 6px;
								border-radius: 3px;
								margin-right: 15px;
							}
							
							.wait {
								display: inline-block;
								color: #E6A23C;
								background-color:rgba($color: #E6A23C, $alpha: 0.2) ;
								padding: 2px 5px;
								font-size: 12px;
								// border-bottom-right-radius: 6px;
								// border-bottom-left-radius: 6px;
								border-radius: 3px;
								margin-right: 15px;
							}
							// .tag{
							// 	margin-right: 15px;
							// 	padding: 2px 5px;
							// 	background-color: rgba($color: #67C23A, $alpha: 0.2);
							// 	color: #67C23A;
							// 	border-radius: 3px;
							// 	font-size: 12px;
							// }
							// .over{
							// 	background-color: rgba($color: #F56C6C, $alpha: 0.2);
							// 	color: #F56C6C;
							// 	}
							// .wait{
							// 	background-color: rgba($color: #909399, $alpha: 0.2);
							// 	color: #909399;
							// }
						}
					}
				}
			}
		}
	}
</style>