|
@@ -0,0 +1,194 @@
|
|
|
+<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}} {{classInfo.classStartHours}} {{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"></u-image>
|
|
|
+ <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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .handle-fix-box {
|
|
|
+ u-button {
|
|
|
+ width: 50%;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|