exam.vue

<template>
	<view class="exam-wrap">
		<Settle :index="3">
			<view class="tip-text">
				<image class="tip-image" mode="widthFix" :src="tips1Image"></image>
				<text>接单教程可让您快速了解如何使用小程序，建议先查看并学习教程。</text>
			</view>
			<view class="learn-view">
				<view class="learn-view-title">接单操作须知</view>
				<view class="learn-list" v-for="(item, key) in tutorials" :key="key">
					<view class="learn-list-item">
						<view class="item-content">
							<view class="item-st">
								<image style="width: 80rpx;height: 36rpx;" :src="kcImage"></image>
								<text class="item-st-text">{{item.title.split(' ') ? item.title.split(' ')[0] : ''}}</text>
							</view>
							<view class="item-title">{{item.title.split(' ') ? item.title.split(' ')[1] : ''}}</view>
						</view>
						<u-button v-if="item.status" type="default" hover-class="none" shape="circle"
							:custom-style="learnedStyle" @click="viewCourse(item)">已学习</u-button>
						<u-button v-else type="'primary" plain="true" hover-class="none" shape="circle"
							:custom-style="learnStyle" @click="viewCourse(item)">去学习</u-button>
					</view>
					<view class="line-view"></view>
				</view>
			</view>
			<view class="tip-bottom">
				<view class="learn-view-title">接单操作考试</view>
				<view class="tip-bottom-t">系统随机出20道选择题，每题5分，及格为70分，分数不及格将影响接单。考题来自接单操作须知，请务必认真查看及学习，以便快速通过考试。</view>
				<view class="tip-bottom-h">希望您认真对待，祝您能顺利通过考试！</view>
			</view>

			<!-- <view class="exam-tips">
				<u-alert-tips :show-icon="true" class="exam-tips" type="warning" :title="tipsTitle"
					:description="tipsDescription"></u-alert-tips>
			</view>
			<view class="exam-course">
				<u-card margin="20rpx 0rpx 30rpx 0rpx" :border="false" :border-radius="cardRadius">
					<view class="exam-head" slot="head">师傅接单教程</view>
					<view class="exam-body" slot="body">
						<u-cell-group :border="false">
							<u-cell-item v-for="(item, key) in tutorials" :key="key" icon="play-circle"
								:border-bottom="false" :title="item.title" :value="item.value"
								:value-style="item.courseActive" @click="viewCourse(item)"></u-cell-item>
						</u-cell-group>
					</view>
				</u-card>
			</view>
			<view class="exam-course">
				<u-card margin="0rpx" :border="false" :border-radius="cardRadius">
					<view class="exam-head" slot="head">师傅接单考试</view>
					<uni-group slot="body">
						<view>总共20题，每题5分，答题时间不超过40分钟</view>
						<view>请认真对待，预祝顺利通过考试！</view>
					</uni-group>
				</u-card>
			</view>
			<view class="content-gap"></view> -->
			<template v-slot:bottom>
				<view class="btn-wrap">
					<u-button type="primary" :custom-style="buttonStyle" shape="circle" @click="handleClick">去考试</u-button>
				</view>
			</template>

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

<script>
	import Settle from '@/components/settle/index.vue';
	let app = getApp()
	export default {
		components: {
			Settle
		},
		data() {
			return {
				cardRadius: 12,
				tipsTitle: '提示：',
				// 简单使用固定培训视频
				tutorials: [{
						id: 'course1',
						courseId: 1,
						title: '',
						value: '去学习',
						courseActive: {},
						status: 0,
						url: ''
					},
					{
						id: 'course2',
						courseId: 2,
						title: '',
						value: '去学习',
						courseActive: {},
						status: 0,
						url: ''
					},
					{
						id: 'course3',
						courseId: 3,
						title: '',
						value: '去学习',
						courseActive: {},
						status: 0,
						url: ''
					},
					// {
					// 	id: 'course4',
					// 	courseId: 4,
					// 	title: '',
					// 	value: '去学习',
					// 	courseActive: {},
					// 	status: 0,
					// 	url: ''
					// }
				],
				tipsDescription: '接单考核可让您快速了解如何使用小程序，建议先查看学习教程'
			};
		},
		computed: {
			learnStyle() {
				return {
					'color': '#2272FF',
					'width': '120rpx',
					'height': '48rpx',
					'background-color': '#FFFFFF',
					'font-size': '24rpx'
				}
			},
			learnedStyle() {
				return {
					'color': '#999999',
					'width': '120rpx',
					'height': '48rpx',
					'background-color': '#FFFFFF',
					'font-size': '24rpx'
				}
			},
			buttonStyle() {
				return {
					'color': '#FFFFFF',
					'width': '500rpx',
					'height': '104rpx',
					'background-color': '#2272FF',
					'font-size': '32rpx',
					'font-weight': 'bold'
				}
			},
			tips1Image() {
				return process.uniEnv.qn_base_url + 'tips1.png'
			},
			kcImage() {
				return process.uniEnv.qn_base_url + 'kc.png'
			}
		},
		onLoad() {
			this.tutorials.map((item, key) => {
				item['url'] = app.globalData.service_standard[item.id].url
				item['title'] = app.globalData.service_standard[item.id].title
				item['value'] = item['status'] ? '已学习' : '去学习'
				item['courseActive'] = item['status'] ? this.learnStyle : this.learnedStyle
			})
		},
		onShow() {
			this.loadLearnData();
		},
		methods: {
			loadLearnData() {
				let that = this;
				that.$u.api
					.listOrderingTutorials()
					.then(res => {
						const results = res.data;
						if (res.code == 200 && results) {
							that.tutorials.forEach((data, i) => {
								if (results.hasOwnProperty(data.id)) {
									data.status = results[data.id];
									data.value = data.status ? '已学习' : '去学习';
									data.courseActive = data.status ? {
										"color": "#2979ff"
									} : {
										"color": "red"
									}
									that.tutorials[i] = data;
								}
							});
						}
					})
					.catch(e => {
						console.log(e, 'loadLearnData');
					});
			},
			handleClick() {
				uni.navigateTo({
					url: '/pages/exam/index'
				})
			},
			viewCourse(e) {
				let that = this;
				let params = `id=${e.id}&courseId=${e.courseId}&status=${e.status}`
				uni.navigateTo({
					url: `/pages/learn/course-detail?${params}`
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.exam-tips .u-alert-tips {
		border-radius: 12rpx !important;
		border: none !important;

		.u-alert-title {
			font-size: 28rpx !important;
			font-weight: bold;
		}
	}

	.exam-wrap {
		background-color: #F4F5F7;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow-y:auto;
	}

	.exam-head {
		font-size: 36rpx;
		font-weight: bold;
	}

	// .content-gap {
	// 	height: 1rpx;
	// 	margin-bottom: 200rpx;
	// }

	.tip-text {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 38rpx 30rpx 30rpx 30rpx;
		height: 140rpx;
		margin-bottom: 20rpx;
		font-size: 24rpx;
		color: #000000;
		display: flex;
		align-items: flex-start;
	}

	.tip-image {
		width: 26rpx;
		height: 32rpx;
		flex-shrink: 0;
		margin-right: 10rpx;
		margin-top: 2rpx;
	}

	.learn-view-title {
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
	}
	.tip-bottom {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 38rpx 30rpx 30rpx 30rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #333333;
		// margin-bottom: 188rpx;
		.tip-bottom-h {
			font-size: 24rpx;
			color: #999999;
		}
		.tip-bottom-t {
			margin-top: 30rpx;
			margin-bottom: 20rpx;
		}
	}

	.learn-view {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 38rpx 30rpx 30rpx 30rpx;
		margin-bottom: 20rpx;
		font-size: 32rpx;
		color: #333333;


		.learn-list {
			.learn-list-item {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
				margin-bottom: 30rpx;

				.item-content {
					display: flex;
				}

				.item-st {
					width: 80rpx;
					height: 36rpx;
					padding-right: 2rpx;
					text-align: center;
					margin-right: 20rpx;
					line-height: 24rpx;
					position: relative;
					.item-st-text {
						color: #FFFFFF;
						position: absolute;
						font-size: 16rpx;
						left: 20rpx;
						top: 8rpx;
						line-height: 28rpx;
					}
				}

				.item-title {
					color: #333333;
					font-size: 28rpx;
				}
			}

			.line-view {
				background-color: #F4F5F7;
				height: 2rpx;
				width: 100%;
			}
		}
	}
</style>