spark-sale/pagesEnroll/classDetail.vue

<template>
	<view class="content">
		<u-card :title="classInfo.name" :show-foot="false" title-size="32" margin="0px 0px 10px 0px" :head-style="cardStyle">
			<view slot="body">
				<view class="class-info-text">
					<u-icon name="clock"></u-icon>
					{{classInfo.classStartDate}}&nbsp;&nbsp;{{classInfo.classStartHours}}&nbsp;&nbsp;{{classInfo.residue}}课时
				</view>
				<view class="class-info-text">
					<u-icon name="map"></u-icon>
					{{classInfo.address}}
				</view>
			</view>
		</u-card>
		<u-card title="授课教练" :show-foot="false" title-size="32" margin="0px 0px 10px 0px" :head-style="cardStyle">
			<view class="techaer-info-box" slot="body">
				<u-image :src="classInfo.coachUrl" mode="aspectFill" width="80px" height="80px" border-radius="10px" style=""></u-image>
				<view class="techaer-info">
					<view class="class-info-title">{{classInfo.coachName}}</view>
					<view class="class-info-text">{{classInfo.coachName}}</view>
				</view>
			</view>
		</u-card>
		<u-card title="班级简介" title-size="32" :show-foot="true" margin="0px 0px 10px 0px" :head-style="cardStyle">
			<view slot="body">
				<u-read-more :toggle="true" show-height="100" color="#333333" :shadow-style="shadowStyle">
					<view class="class-info-text">{{classInfo.desc}}</view>
				</u-read-more>
			</view>
		</u-card>
		<u-card title="班级近况" :show-foot="false" title-size="32" margin="0px" :head-style="cardStyle">
			<view class="class-show-box" slot="body">
				<view v-for="(item, index) in classInfo.showList" :key="index" class="class-show-card">
					<u-image :src="item.url" mode="aspectFill" height="30vw" border-radius="10px" v-if="item.type == 0"></u-image>
					<view class="video-col" v-if="item.type == 1">
						<video :src="item.url" object-fit="cover" controls :id="'video' + index"></video>
					</view>
					<view class="class-show-name">{{item.name}}</view>
				</view>
			</view>
		</u-card>
		<u-top-tips ref="uTips" </u-top-tips> </view> </template> <script>
			import {
			mapGetters
			} from 'vuex'
			const NET = require('@/utils/request')
			const API = require('@/config/api')
			export default {
			computed: {
			...mapGetters([
			'customStyle',
			])
			},
			data() {
			return {
			classId: '',
			classInfo: {
			name: '',
			classStartDate: '',
			classStartHours: '',
			residue: '',
			address: '',
			coachName: '',
			coachDesc: '',
			coachUrl: '',
			desc: '',
			showList: [],
			},
			handleStyleLeft: {
			borderRadius: '40px 0 0 40px',
			borderRight: '1px solid #ffffff'
			},
			handleStyleRight: {
			borderRadius: '0 40px 40px 0',
			borderLeft: '1px solid #ffffff'
			},
			cardStyle: {
			fontWeight: 'bold'
			},
			shadowStyle: {
			backgroundImage: 'linear-gradient(to bottom, transparent 80rpx, #ffffff 80rpx, #ffffff 100rpx)',
			paddingTop: "100rpx",
			marginTop: "-100rpx"
			},
			}
			},
			onLoad(options) {
			this.classId = options.id
			this.initialize()
			},
			onShow() {},
			onPullDownRefresh() {
			this.initialize()
			setTimeout(() => {
			uni.stopPullDownRefresh();
			}, 500)
			},
			methods: {
			// 获取初始化数据
			initialize() {
			NET.request(API.getClassDetail, {
			id: this.classId
			}, 'POST').then(res => {
			this.classInfo = res.data
			}).catch(error => {
			this.$refs.uTips.show({
			title: error.message,
			type: 'warning',
			})
			})
			},
			},
			}
			</script>

			<style>
				page {
					width: 100%;
					height: 100%;
					background-color: #f7f7f7;
					position: relative;
				}
			</style>
			<style lang="scss" scoped>
				@import "@/static/css/themes.scss";

				.content {
					width: 100%;
					float: left;

					.class-info-text {
						color: #999999;
						line-height: 18px;

						u-icon {
							margin-right: 2px;
						}
					}

					.student-box {
						max-height: 200px;
						padding: 0 15px;
						margin: 25px 0 0 0;
						box-sizing: border-box;
						overflow: auto;

						/deep/.u-card__head {
							padding-bottom: 0px !important;
						}
					}

					.techaer-info-box {
						display: flex;

						.techaer-info {
							flex: 1;
							margin-left: 10px;

							.class-info-title {
								font-size: 14px;
								font-weight: bold;
								margin-bottom: 5px;
							}
						}
					}

					.class-show-box {
						width: 100%;
						float: left;

						.class-show-card {
							width: calc(50% - 16px);
							margin: 0 8px 16px 8px;
							float: left;

							.class-show-name {
								width: 100%;
								text-align: center;
								line-height: 20px;
								font-size: 14px;
								margin-top: 5px;
							}
						}

						.video-col {
							width: 100%;
							height: 30vw;
							border-radius: 10px;

							video {
								width: 100%;
								height: 30vw;
							}
						}
					}

					.handle-fix-box {
						u-button {
							width: 50%;
							display: inline-block;
						}
					}
				}
			</style>