zc_saas_h5/pages2/wd/class.vue

<template>
	<view style="padding: 30rpx;">
		<navigator :url="'/pages2/wd/course?id='+item.goodsId" v-for="(item, index) in goodsList" :key="index" style="margin-bottom: 30rpx;">
			<view class="class_item">
				<image :src="$method.splitImgHost(item.coverUrl, true)" style="height: 316rpx;width: 100%;border-radius: 24rpx;"></image>
				<view style="color: #333333;font-weight: bold;font-size: 32rpx;">{{ item.goodsName }}</view>
				<view class=".content_box">
					<image src="/static/icon/wk_icon1.png" class="wk_icon"></image>
					共
					<text class="content">3</text>
					科
					<text class="content">120</text>
					节
					<text class="content">60</text>
					学时
				</view>
				<view class=".content_box">
					<image src="/static/icon/wk_icon2.png" class="wk_icon"></image>
					学习有效期：
					<text class="content">{{ $method.timestampToTime(item.validityStartTime) }} - {{ $method.timestampToTime(item.validityEndTime) }}</text>
				</view>
			</view>
			<view class="bottomBox">
				<view class=".content_box">
					<image src="/static/icon/wk_icon3.png" class="wk_icon"></image>
					学习进度：26/120
				</view>
				<view class="box_progress">
					<view style="width: 60%;"><u-line-progress active-color="#ff9900" :percent="70"></u-line-progress></view>
					<view><u-button type="warning" size="mini" @click.stop="studyIn">进入学习</u-button></view>
				</view>
				<view class="box_progress">
					<view style="width: 60%;"><text style="color: #333333;white-space: nowrap;text-overflow: ellipsis;">这是一个考试标题</text></view>
					<view><u-button :plain="true" type="primary" size="mini" @click.stop="appointment(item)">预约考试</u-button></view>
				</view>
				<view class="box_progress" v-if="false">
					<view style="width: 60%;"><text style="color: #2979ff;white-space: nowrap;text-overflow: ellipsis;">【机电全科】2021年一建黄金A</text></view>
					<view><u-button type="primary" size="mini">进入刷题</u-button></view>
				</view>
			</view>
		</navigator>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [1, 2, 3],
			goodsList: []
		};
	},
	onLoad(option) {
		this.courseGoodsList();
	},
	onShow() {},
	methods: {
		courseGoodsList() {
			let self = this;
			this.$api.courseGoodsList().then(res => {
				if (res.data.code == 200) {
					self.goodsList = res.data.rows;
				}
			});
		},
		studyIn() {
			this.$navTo.togo('/pages2/verify/input');
		},
		appointment(item) {
			var data = {
				goodsId: item.goodsId,
				gradeId: item.gradeId
			};
			this.$api.getApplysubscribe(data).then(res => {
				if (res.data.code === 500) {
					uni.showModal({
						showCancel: false,
						content: res.data.msg
					});
				}
				if (res.data.code === 200) {
					this.$navTo.togo('/pages2/appointment/index', {
						goodsId: item.goodsId,
						gradeId: item.gradeId
					});
				}
			});
		}
	}
};
</script>
<style>
page {
	background: #eaeef1;
}
</style>
<style scope>
.box_progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;
}
.bottomBox {
	background: #ffffff;
	width: 94%;
	border-bottom-left-radius: 24rpx;
	border-bottom-right-radius: 24rpx;
	margin: 0 auto;
	padding: 20rpx;
}
.content_box {
	display: flex;
	align-items: center;
	color: #999999;
	margin-top: 8rpx;
}
.content {
	color: #000000;
	margin: 0 8rpx;
}
.wk_icon {
	width: 24rpx;
	height: 24rpx;
	margin-right: 8rpx;
}

.class_item {
	width: 100%;
	background: #ffffff;
	box-shadow: 0rpx 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
	border-radius: 24rpx;
	padding: 20rpx;
	z-index: 999;
	position: relative;
}
</style>