138 lines
3.5 KiB
Vue
138 lines
3.5 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 封面 -->
|
|
<view class="cover">
|
|
<image class="cover-src" :src="cover" mode="aspectFill"></image>
|
|
</view>
|
|
<!-- 课程信息 -->
|
|
<view class="info">
|
|
<view class="info-title">{{ title }}</view>
|
|
<view class="info-subtitle">{{ subtitle }}</view>
|
|
<view class="info-info">
|
|
<view class="info-info-item">
|
|
<label>总学期</label>
|
|
<view class="info-value">{{count.all || '-'}}期</view>
|
|
</view>
|
|
<view class="info-info-item">
|
|
<label>已结束</label>
|
|
<view class="info-value">{{count.over || 0}}期</view>
|
|
</view>
|
|
<view class="info-info-item" v-if="semester != null">
|
|
<label>当期时间</label>
|
|
<view class="info-value">{{semester.time.start || '-'}}</view>
|
|
</view>
|
|
<view class="info-info-item" v-if="semester != null">
|
|
<label>报名价格</label>
|
|
<view class="info-value price">{{semester.price || '0.00'}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 课程介绍 -->
|
|
<rich-text :nodes="content"></rich-text>
|
|
<!-- 报名信息 -->
|
|
<view class="footer">
|
|
<view class="footer-btn" @click="onBuy">立即购买</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { info } from '@/apis/interfaces/empower.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
id : '',
|
|
cover : '',
|
|
title : '',
|
|
subtitle : '',
|
|
price : '0.00',
|
|
semester : null,
|
|
count : {},
|
|
content : []
|
|
};
|
|
},
|
|
onShow() {
|
|
info(this.$Route.query.id).then(res => {
|
|
let { cover, title, subtitle, price, semester_current, count, content, id } = res;
|
|
this.id = id
|
|
this.cover = cover
|
|
this.title = title
|
|
this.subtitle = subtitle
|
|
this.price = price
|
|
this.semester = semester_current
|
|
this.count = count
|
|
this.content = content.replace(/\<img/gi, '<img style="width:100%;height:auto"');
|
|
uni.setNavigationBarTitle({
|
|
title: title
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
onBuy(){
|
|
this.$Router.push({
|
|
name : 'EmpowerBuy',
|
|
params : { id: this.id }
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content{ padding-bottom: 180rpx; }
|
|
// 封面图
|
|
.cover{
|
|
position: relative;
|
|
padding-top: 70%;
|
|
background: #f7f8f9;
|
|
&-src{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
|
|
}
|
|
// 信息
|
|
.info{
|
|
padding: 40rpx;
|
|
&-title{ font-weight: bold; font-size: 50rpx; margin-bottom: 20rpx; line-height: 65rpx; color: #333; text-align: justify; }
|
|
&-subtitle{ font-size: 30rpx; line-height: 50rpx; margin-bottom: 40rpx; color: #333; text-align: justify; }
|
|
&-info{
|
|
background: $window-color;
|
|
padding: 0 30rpx;
|
|
font-size: 30rpx;
|
|
border-radius: 20rpx;
|
|
&-item{
|
|
padding: 30rpx 0;
|
|
line-height: 40rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
@extend .border-solid;
|
|
label{ font-weight: bold; width: 170rpx; }
|
|
&:last-child::after{ display: none; }
|
|
}
|
|
}
|
|
&-value{
|
|
width: calc(100% - 170rpx);
|
|
text-align: right;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
&.price{ font-weight: bold; color: $text-price; }
|
|
}
|
|
}
|
|
// 底部
|
|
.footer{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 30rpx 30rpx 50rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
z-index: 99;
|
|
background-color: white;
|
|
box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, .04);
|
|
.footer-btn{ background: $main-color; color: white; line-height: 100rpx; border-radius: 50rpx; flex: 1; text-align: center; font-weight: bold; font-size: 36rpx; }
|
|
}
|
|
</style>
|