|
|
@@ -28,167 +28,177 @@
|
|
|
</u-read-more>
|
|
|
</view>
|
|
|
</u-card>
|
|
|
- <u-card title="班级展示" :show-foot="false" title-size="32" margin="0px" :head-style="cardStyle">
|
|
|
+ <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>
|
|
|
+ <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: {
|
|
|
+ <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',
|
|
|
+ 'customStyle',
|
|
|
])
|
|
|
- },
|
|
|
- data() {
|
|
|
+ },
|
|
|
+ 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"
|
|
|
- },
|
|
|
+ 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) {
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
this.classId = options.id
|
|
|
this.initialize()
|
|
|
- },
|
|
|
- onShow() {},
|
|
|
- onPullDownRefresh() {
|
|
|
+ },
|
|
|
+ onShow() {},
|
|
|
+ onPullDownRefresh() {
|
|
|
this.initialize()
|
|
|
setTimeout(() => {
|
|
|
- uni.stopPullDownRefresh();
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
}, 500)
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 获取初始化数据
|
|
|
+ },
|
|
|
+ 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',
|
|
|
- })
|
|
|
- })
|
|
|
+ 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>
|
|
|
+ },
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style>
|
|
|
+ page {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <style lang="scss" scoped>
|
|
|
+ @import "@/static/css/themes.scss";
|
|
|
|
|
|
-<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;
|
|
|
|
|
|
- .content {
|
|
|
- width: 100%;
|
|
|
- float: left;
|
|
|
+ .class-info-text {
|
|
|
+ color: #999999;
|
|
|
+ line-height: 18px;
|
|
|
|
|
|
- .class-info-text {
|
|
|
- color: #999999;
|
|
|
- line-height: 18px;
|
|
|
+ u-icon {
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- u-icon {
|
|
|
- margin-right: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .student-box {
|
|
|
+ max-height: 200px;
|
|
|
+ padding: 0 15px;
|
|
|
+ margin: 25px 0 0 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: auto;
|
|
|
|
|
|
- .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- /deep/.u-card__head {
|
|
|
- padding-bottom: 0px !important;
|
|
|
- }
|
|
|
- }
|
|
|
+ .techaer-info-box {
|
|
|
+ display: flex;
|
|
|
|
|
|
- .techaer-info-box {
|
|
|
- display: flex;
|
|
|
+ .techaer-info {
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 10px;
|
|
|
|
|
|
- .techaer-info {
|
|
|
- flex: 1;
|
|
|
- margin-left: 10px;
|
|
|
+ .class-info-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .class-info-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .class-show-box {
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
|
|
|
- .class-show-box {
|
|
|
- width: 100%;
|
|
|
- float: left;
|
|
|
+ .class-show-card {
|
|
|
+ width: calc(50% - 16px);
|
|
|
+ margin: 0 8px 16px 8px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .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;
|
|
|
|
|
|
- .handle-fix-box {
|
|
|
- u-button {
|
|
|
- width: 50%;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ height: 30vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .handle-fix-box {
|
|
|
+ u-button {
|
|
|
+ width: 50%;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
liuboyan