新增增收赋能

2023-07-07 18:55:54 +08:00
parent 1af9e0eda5
commit e37f23be46
13 changed files with 1387 additions and 707 deletions
--- a/pages/empower/info.vue
+++ b/pages/empower/info.vue
@@ -0,0 +1,136 @@
+<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>分享</view>
+			<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 })
+			}).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: #f7f8f9;
+			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: $mian-color; }
+		}
+	}
+	// 底部
+	.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: $mian-color; color: white; line-height: 100rpx; border-radius: 50rpx; flex: 1; text-align: center; font-weight: bold; font-size: 36rpx; margin-left: 50rpx; }
+	}
+</style>