wx-yunyubang-miniprogram/pages/active/course.vue

<template>
	<view class='course'>
		<view class='courseImg'>
			<img src="../../static/coursebg1.png" alt="">
		</view>
		<view class='course_title'>{{info.title}}</view>
		<view class='course_table'>
			<u-table border-color='#fff'>
				<u-tr>
					<u-th>
						<p style="width:120rpx!important">时间</p></u-th>
					<u-th>
						<p style="width:180rpx!important">主题</p>
					</u-th>
					<u-th>
						<p style="width:180rpx!important">上课地址</p>
					</u-th>
					<u-th>主讲</u-th>
					<u-th>报名</u-th>
				</u-tr>
				<u-tr v-for='(item,index) in infolist' :class="index%2==0?'even':'odd'">
					<u-td>
						<p class="day">{{item.day}}</p>
						<p class="time">{{item.time}}</p>
					</u-td>
					<u-td>
						<p class='name'>{{item.theme}}</p>
					</u-td>
					<u-td>
						<p class='address'>{{item.address}}</p>
					</u-td>
					<u-td>
						<p class='speaker'>{{item.speaker?item.speaker:''}}</p>
					</u-td>
					<u-td>
						<p v-if='item.isBut' class='isbut' @click='toActiveDetail(item.link)'>
							报名
						</p>
					</u-td>
				</u-tr>
			</u-table>



		</view>



	</view>
</template>
<script>
	let sysInfo = uni.getSystemInfoSync();
	let SCREEN_WIDTH = sysInfo.screenWidth
	let SCREEN_HEIGHT = sysInfo.screenHeight;
	let WindowHeight = sysInfo.windowHeight;
	let windowWidth = sysInfo.windowWidth;
	import {
		weixin
	} from '@/utils/weixin.js';
	export default {
		data() {
			return {
				id: '',
				info: {},
				infolist: []
			}
		},
		onShareAppMessage() {
			return {
				title: this.info.title,
				path: "pages/active/course?id=" + this.info.id,
				imageUrl: this.img
			}
		},
		onShareTimeline() {
			var url = "pages/active/course?id=" + this.info.id;
			var title = this.info.title;
			return {
				title: title,
				path: url,
			}
		},
		onShow() {

		},
		onLoad(options) {
			var that = this;
			this.id = options.id;
			this.getCourseDetail()
			console.log("this.id", this.id)
			const scene = decodeURIComponent(options.scene);
			console.log(scene)
			// if (!weixin.isNull(scene)) {
			// 	this.form.active_id = weixin.getParam(scene, "id");
			// 	this.id = weixin.getParam(scene, "id");
			// 	this.form.promotion = this.promotion_id = weixin.getParam(scene, "promotion_id");
			// 	uni.setStorageSync("base_promotion_id", this.promotion_id);
			// }
			// if (!weixin.isNull(options.id))
			// 	this.form.active_id = options.id;

			// if (!weixin.isNull(options.promotion_id)) {
			// 	this.form.promotion = options.promotion_id;
			// 	uni.setStorageSync("base_promotion_id", options.promotion_id)
			// }

		},
		methods: {
			returnDate(date) {
				let dates = date.split(' ')[0].split("-")
				let md = parseInt(dates[1]) + '月' + parseInt(dates[2]) + '日'
				let mdtime = date.split(' ')[1].substring(0, 5)
				return {
					md: md,
					mdtime: mdtime
				}
			},
			toActiveDetail(link) {
				uni.navigateTo({
					url: link
				})
			},
			compareDate(date1, date2) {
				var oDate1 = new Date(date1);
				var oDate2 = new Date(date2);
				if (oDate1.getTime() > oDate2.getTime()) {
					return true; //第一个大
				} else {
					return false; //第二个大
				}
			},
			paixu(ary, key) {
				return ary.sort(function(a, b) {
					let x = parseInt(a[key])
					let y = parseInt(b[key])
					return ((x < y) ? -1 : (x > y) ? 1 : 0)
				})
			},
			getCourseDetail(id) {
				let that = this
				weixin.request({
					api: '/api/member/course/show',
					method: 'GET',
					data: {
						id: this.id
					},
					utilSuccess: r => {
						that.info = r
						let _list = that.paixu(r.item,'sortnumber')
						for (var k of _list) {
							let day = that.returnDate(k.time).md
							let time = that.returnDate(k.time).mdtime
							// 开始时间大于晚于现在时间可以报名
							let isBut = that.compareDate(k.time, new Date())
							that.infolist.push({
								day: day,
								time: time,
								address: k.address,
								name: k.name,
								theme:k.theme?k.theme:k.name,
								speaker: k.speaker,
								isBut: isBut,
								link: k.link
							})
						}
					},
					utilFail: r => {
						console.log(r);
					}
				})

			}

		}
	}
</script>
<style scoped>
	.course {
		background-color: #ffd3cb;
		min-height: 100vh;
	}

	.course_title {
		color: #ff9197;
		text-align: center;
		font-size: 60rpx;
		padding-bottom: 60rpx
	}

	.course_table {
		padding: 0 20rpx;
		padding-bottom: 120rpx
	}

	/deep/ .u-th {
		color: #fff !important;
		background-color: #ff9197 !important;
	}

	.day {
		color: #ff9197;
		font-size: 24rpx !important;
		width: 120rpx;
	}

	.time {
		font-size: 20rpx !important;
	}

	.address {
		font-size: 24rpx !important;
		width: 180rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 设置行数 */
		-webkit-box-orient: vertical;
	}

	.name {
		font-size: 24rpx !important;
		width: 180rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 设置行数 */
		-webkit-box-orient: vertical;
	}

	.speaker {
		font-size: 24rpx !important;
	}

	.isbut {
		font-size: 24rpx !important;
		color: #fff;
		background-color: #ff9197;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
	}

	/deep/ .even .u-tr {
		background-color: #faf8ef !important;
	}

	/deep/ .odd .u-tr {
		background-color: #fff3f3 !important;
	}
</style>