Эх сурвалжийг харах

修改:1。增加课程报名;2.修改课程部分接口字段

littleblue55 12 цаг өмнө
parent
commit
627b0c171d

+ 11 - 0
api/edu.js

@@ -112,4 +112,15 @@ export function loadCredit(){
 		},
 		'method': 'get'
 	})
+}
+
+//报名
+export function regCourse(id){
+	return request({
+		url: `/course/register/${id}`,
+		headers: {
+			isToken: true
+		},
+		'method': 'post'
+	})
 }

+ 7 - 5
components/lgSwiper.vue

@@ -8,11 +8,12 @@
 				<view :class="index==currentIndex? 'swiper-item active':'swiper-item'">
 					<view style="width: 100%;height: 90%;position: relative;">
 						<image style="width: 100%;height: 100%;" mode="aspectFit" :src="slide[image]"></image>
-						<view style="background: linear-gradient(to bottom, rgb(255 248 248 / 86%), rgb(255 255 255 / 24%));
-							position: absolute;z-index: 9999;width: 100%;height: 70rpx;"
-							:class="index==currentIndex? 'end-active':'end'"
+						<view style="background: rgb(255 248 248 / 60%);
+							position: absolute;z-index: 9999;width: 100%;height: 100%;"
+							:class="index == currentIndex ? 'end-active':'end'"
 							v-if="slide.status === '2' || slide.status === '3'">
-							<text style="font-size: 25rpx; padding-left:10rpx ;">已结束</text>
+							<text style="position: absolute;top: 50%;
+							left: 50%;transform: translate(-50%,-50%);font-size: 30rpx;">已结束</text>
 						</view>
 					</view>
 					<view class="swiper-text-box">
@@ -103,7 +104,8 @@
 		left: 0;
 	}
 	.end{
-		left: 15rpx;
+		// left: 15rpx;
+		left: 0;
 		top: 0;
 	}
 

+ 2 - 1
package.json

@@ -13,6 +13,7 @@
     "sass-loader": "^16.0.4"
   },
   "dependencies": {
-    "crypto-js": "^4.2.0"
+    "crypto-js": "^4.2.0",
+    "dayjs": "^1.11.13"
   }
 }

+ 59 - 29
pages/goOnEdu/course/courseDetail/courseDetail.vue

@@ -20,19 +20,22 @@
 					paddingBottom: `${videoShow?'150rpx':'0'}`
 				}"
 				style="height: 100%;overflow: scroll;padding-left: 20rpx;padding-right: 20rpx;">
-					<view class="text-title">{{courseDetail.courseName}}</view>
+					<view class="text-title">{{courseDetail.title}}</view>
 					<view class="text-title">课程概述</view>
 					<view class="text-content">{{courseDetail.summary}}</view>
 					<view class="text-title">课程时间</view>
-					<view class="text-content">{{courseDetail.courseDate ? getDateWeek(courseDetail.courseDate) : ''}}</view>
+					<view class="text-content">{{courseDetail.date ? getDateWeek(courseDetail.date) : ''}}</view>
 					<view class="text-title">培训地点</view>
 					<view class="text-content">{{courseDetail.loc}}</view>
-					<view class="text-tip" v-if="!isMember">个人会员或单位会员免费,点击现在入会></view>
+					<view class="text-tip" v-if="!isMember && courseDetail.viewMode === '2'">个人会员或单位会员免费,点击现在入会></view>
 					
 				</view>
 				<view class="section-bottom" @click="toVideo" v-show="videoShow">
 					<text>预约课程</text>
 				</view>
+				<view :class="['section-bottom', `${courseDetail.hasReg ? 'bg-blue' : ''}`]" v-show="regShow" @click="toReg">
+					<text>{{ courseDetail?.hasReg ? '报名成功' : '点击报名' }}</text>
+				</view>
 			</view>
 			<view class="content" v-if="currentTab === 1" style="overflow: hidden;">
 				<view class=""
@@ -78,7 +81,8 @@
 	import {
 		loadCourseDetail,
 		loadCommentList,
-		sendComment
+		sendComment,
+		regCourse
 	} from "@/api/edu.js"
 	import {
 		getToken
@@ -86,6 +90,8 @@
 	import {
 		useAuthStore
 	} from '@/store/authStore'
+	import dayjs from 'dayjs'
+	dayjs.locale('zh-cn')
 	const authStore = useAuthStore();
 	// const isMember = ref(false)
 	const feedShow = ref(false)
@@ -348,14 +354,14 @@
 	})
 	
 	
-	// 跳转预告
+	// 线上-点击预约-跳转预告
 	function toVideo(){
 		wx.getChannelsLiveNoticeInfo({
-			'finderUserName': 'sphIfs9sYiL5RB3',
+			'finderUserName': "sphIfs9sYiL5RB3",
 			success: (res)=>{
 				let noticeId = null;
 				if(res.otherInfos.length > 0){
-					let date1 = new Date(formatDateS(courseDetail.value.courseDate))
+					let date1 = new Date(formatDateS(courseDetail.value.date))
 					res.otherInfos.forEach(item=>{
 						let date = new Date(item.startTime*1000);
 						// console.log(item,date1, date)
@@ -378,48 +384,69 @@
 						console.log(err)
 					}
 				})
+			},
+			fail(err) {
+				console.error('调用失败:', err);
 			}
 		})
 	}
+	// 线上课程-获取视频号回放
 	function getVideo(){
-		const startDate = new Date(formatDateS(courseDetail.value.courseDate));
-		// 计算 endTime(startDate 加一天)
-		const endDate = new Date(startDate);
-		endDate.setDate(startDate.getDate() + 1);
+		const startDate = dayjs(courseDetail.value.date).format("YYYY-MM-DD");
+		const endDate = dayjs(startDate).add(1, 'day').format("YYYY-MM-DD");
 		// 获取时间戳
-		const startTime = startDate.getTime();
-		const endTime = endDate.getTime();
+		const startTime = new Date(startDate).getTime();
+		const endTime = new Date(endDate).getTime();
 		wx.getChannelsLiveInfo({
-			'finderUserName': 'sphIfs9sYiL5RB3',
-			'startTime': startTime,
-			'endTime': endTime,
+			'finderUserName': "sphIfs9sYiL5RB3",
+			startTime: startTime,
+			endTime: endTime,
 			success: (res)=>{
 				feedId.value = res.feedId;
-				console.log("直播信息", res.feedId)
+				// console.log("直播信息", res)
 				feedShow.value = true
-				// wx.openChannelsLive({
-				// 	finderUserName: 'sphIfs9sYiL5RB3',
-				// 	feedId: res.feedId,
-				// 	nonceId: res.nonceId,
-				// 	success: (resp)=>{
-				// 		console.log(resp)
-				// 	}
-				// })
+			},
+			fail(err) {
+				console.error('调用失败:', err);
 			}
 		})
 	}
-	// 是否显示预约按钮
+	// 线上课程-进来后-是否显示预约按钮
 	const videoShow = computed(()=>{
 		// regType = 1 是线上课程
 		// feedShow为true是回放
+		if(courseDetail.value?.status==='2' || courseDetail.value?.status==='3'){
+			return false;
+		}
 		return (courseDetail.value?.regType ==='1') && !feedShow.value
 	})
-	// 是否显示购买按钮--暂时无用
-	const buyShow = computed(()=>{
+	// 线下课程-是否显示报名按钮
+	const regShow = computed(()=>{
 		// regType = 0 是线上课程 
 		// 缺少判断是否购买
-		return (courseDetail.value?.regType ==='0')
+		return courseDetail.value?.regType ==='0'
 	})
+	function toReg(){
+		let isReg = courseDetail.value.hasReg ?? false;
+		let viewMode = courseDetail.value.viewMode
+		if(isReg){
+			return;
+		}
+		if(viewMode==='1' || (isMember.value && viewMode==='2')){
+			// 直接报名
+			console.log("直接报名")
+			regCourse(courseId.value).then(res=>{
+				if(res.code===0){
+					init(courseId.value)
+				}
+			})
+			return 
+		}
+		uni.navigateTo({
+			url: "/pages/goOnEdu/course/courseDetail/courseOrder?id=" + courseId.value
+		})
+		return
+	}
 </script>
 <style lang="scss">
 	.u-drawer-bottom {
@@ -513,6 +540,9 @@
 		box-sizing: content-box;
 		padding-bottom: env(safe-area-inset-bottom, 0);
 	}
+	.bg-blue{
+		background-color: #3097ff;
+	}
 
 	.comment-input-box {
 		width: 100%;

+ 39 - 25
pages/goOnEdu/course/courseDetail/courseOrder.vue

@@ -2,23 +2,23 @@
 	<view class="container">
 		<view class="course-item">
 			<view class="course-item-image">
-				<image class="course-image" :src="course.imgUrl" mode="aspectFill"></image>
+				<image class="course-image" :src="course.thumImg" mode="aspectFill"></image>
 			</view>
 			<view class="course-item-content">
 				<view class="course-title">
-					<text>{{ course.courseName }}</text>
-					<image style="width: 25rpx;height: 25rpx;padding-left: 20rpx;"
+					<text>{{ course.title }}</text>
+					<!-- <image style="width: 25rpx;height: 25rpx;padding-left: 20rpx;"
 						:src="course.hasFavi ? `${FILE_URL}/edu-icon/favi-icon.png` : `${FILE_URL}/edu-icon/no-favi-icon.png`">
-					</image>
+					</image> -->
 				</view>
-				<view class="course-type">{{ course.courseType }}</view>
+				<view class="course-type">{{ course.type }}</view>
 				<view class="course-teacher">
 					<u-icon name="account" size="28"></u-icon>
-					{{ course.name }}
+					{{ course.lecturer }}
 				</view>
 				<view class="course-date">
 					<u-icon name="clock" size="28"></u-icon>
-					{{ getDateWeek(course.courseDate) }}
+					{{ course.date ? getDateWeek(course.date) : ""}}
 				</view>
 				<view class="course-price">¥{{ isMember ? course.priceMember : course.price }}元</view>
 			</view>
@@ -29,7 +29,7 @@
 					开课时间
 				</view>
 				<view class="course-value">
-					{{ course.courseDate }}{{ course.courseTime }}开课
+					{{ course.date }}开课
 				</view>
 			</view>
 			<view class="course-form-item">
@@ -70,7 +70,7 @@
 		<view class="course-form" style="margin-top: 20rpx;">
 			<view class="course-form-item">
 				<view class="course-label">
-					课程有效期:<text class="text-red">{{ course.expirationDate }}</text>
+					课程有效期:<text class="text-red">{{ course.expired }}</text>
 				</view>
 			</view>
 		</view>
@@ -97,12 +97,13 @@
 		computed
 	} from 'vue'
 	import {
-		onLoad
+		onLoad, onShow
 	} from '@dcloudio/uni-app'
 	import configService from '@/utils/baseurl.js'
 	import {
 		loadCourseDetail,
-		payCourse
+		payCourse,
+		regCourse
 	} from "@/api/edu.js"
 	import {
 		msgError,
@@ -153,7 +154,7 @@
 	// 支付完成
 	const toBuy = () => {
 		payForm.value.openid = openid.value
-		console.log(payForm.value)
+		// console.log(payForm.value)
 		// 支付部分
 		payCourse(payForm.value).then(res => {
 			if (res && res.code === 0) {
@@ -165,8 +166,13 @@
 					signType: params.signType,
 					timeStamp: params.timeStamp,
 					success(res){
-						uni.navigateTo({
-							url:"/pages/goOnEdu/course/courseDetail/coursePay?id="+ courseId.value
+						// 购买成功后报名,报名成功后跳转页面
+						regCourse(courseId.value).then(res=>{
+							if(res.code===0){
+								uni.navigateTo({
+									url:"/pages/goOnEdu/course/courseDetail/coursePay?id="+ courseId.value+"&viewMode=" + course.value.viewMode
+								})
+							}
 						})
 					},
 					fail(res){
@@ -176,22 +182,21 @@
 			}
 		})
 		// uni.navigateTo({
-		// 	url:"/pages/goOnEdu/course/courseDetail/coursePay?id="+ courseId.value
-		// })
-		// uni.redirectTo({
-		// 	url: "/pages/goOnEdu/course/courseDetail/coursePay?id=" + courseId.value
+		// 	url:"/pages/goOnEdu/course/courseDetail/coursePay?id="+ courseId.value+"&viewMode=" + course.value.viewMode
 		// })
 	}
 
-	const clickAction = (i) => {
+	function clickAction(i){
 		// console.log(i)
 		activePayType.value = list.value[i].text
 		payTypeShow.value = false
 	}
-
+	function formatDateS(dateStr) {
+		return dateStr.replace(" ", "T");
+	}
 	// 日期格式:xxxx年xx月xx日(星期x)
 	function getDateWeek(val) {
-		const date = new Date(val);
+		const date = new Date(formatDateS(val));
 		const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];
 		const year = date.getFullYear();
 		const month = date.getMonth() + 1; // 注意:月份从0开始
@@ -200,7 +205,7 @@
 		// const result = `${year}年${month}月${day}日(星期${dayOfWeek})`
 		return `${year}年${month}月${day}日(星期${dayOfWeek})`
 	}
-	const toJoin = () =>{
+	function toJoin(){
 		uni.navigateTo({
 			url: '/pages/joinClub/joinClub'
 		})
@@ -212,8 +217,14 @@
 			if (res?.data) {
 				course.value = res.data;
 				payForm.value.id = res.data.id;
-				payForm.value.title = res.data.courseName
-				payForm.value.desc = res.data.courseName
+				payForm.value.title = res.data.title
+				payForm.value.desc = res.data.title
+				//如果已经买了,就返回倒详情页
+				if(res.data.hasBuy){
+					uni.navigateBack({
+						delta: 1
+					});
+				}
 			}
 		})
 	}
@@ -222,9 +233,12 @@
 		const {
 			id
 		} = option;
-		init(id);
+		courseId.value = id
 		console.log('onLoad', id)
 	})
+	onShow(()=>{
+		init(courseId.value)
+	})
 </script>
 
 <style lang="scss" scoped>

+ 5 - 3
pages/goOnEdu/course/courseDetail/coursePay.vue

@@ -3,9 +3,9 @@
 		<view class="pay-content">
 			<image :src="`${FILE_URL}/edu-icon/pay.png`" class="pay-img"></image>
 			<text class="pay-text">支付成功</text>
-			<button class="play-btn" @click="toWatch">点击观看</button>
+			<!-- <button class="play-btn" @click="toWatch">点击观看</button> -->
 		</view>
-		<view class="pay-member" v-if="!isMember" @click="toJoin">
+		<view class="pay-member" v-if="!isMember && courseView === '2'" @click="toJoin">
 			<text>个人会员或单位会员免费,点击现在入会></text>
 		</view>
 	</view>
@@ -27,6 +27,7 @@
 		})
 	}
 	const courseId = ref("");
+	const courseView = ref("");
 	const toWatch = () => {
 		// uni.redirectTo({
 		// 	url:"/pages/goOnEdu/course/courseDetail/courseDetail?id=" + courseId.value
@@ -36,8 +37,9 @@
 		});
 	}
 	onLoad((option) => {
-		const { id } = option
+		const { id, viewMode } = option
 		courseId.value = id
+		courseView.value = viewMode
 		authStore.loadUserInfo()
 		isMember.value = authStore.userInfo.isMember == '0' ? false : true
 		// console.log('onLoad')

+ 18 - 16
pages/goOnEdu/course/courseHome/courseHome.vue

@@ -15,25 +15,25 @@
 			<view v-for="(course,index) in filterCourses" :key="course.id" >
 				<view class="course-item">
 					<view class="course-item-image">
-						<image class="course-image" :src="course.cover" mode="aspectFit" @click="toPage(course)"></image>
+						<image class="course-image" :src="course.thumImg ? course.thumImg : course.cover" mode="aspectFit" @click="toPage(course)"></image>
 					</view>
 					<view class="course-item-content">
 						<view class="course-title">
-							<text @click="toPage(course)">{{ course.courseName }}</text>
+							<text @click="toPage(course)">{{ course.title }}</text>
 							<!-- 1.隐藏收藏功能 -->
 							<!-- <image style="width: 25rpx;height: 25rpx;padding-left: 20rpx;"
 								:src="course.hasFavi ? `${FILE_URL}/edu-icon/favi-icon.png` : `${FILE_URL}/edu-icon/no-favi-icon.png`"
 								@click.stop="collectCourse(course.id, index, course.hasFavi)">
 							</image> -->
 						</view>
-						<view class="course-type">{{ course.courseType }}</view>
+						<view class="course-type">{{ course.type }}</view>
 						<view class="course-teacher">
 							<u-icon name="account" size="28"></u-icon>
 							{{ course.lecturer }}
 						</view>
 						<view class="course-date">
 							<u-icon name="clock" size="28"></u-icon>
-							{{ getDateWeek(course.courseDate) }}
+							{{ getDateWeek(course.date) }}
 						</view>
 						<!-- <view class="course-price"
 							v-if=" (course.viewMode === '3') || (isMember && course.viewMode==='2')">
@@ -41,16 +41,16 @@
 						</view>
 						<view v-else style="height: 30rpx;width: 100%;"></view> -->
 						<!-- 如果没结束 -->
-						<view class="func" v-if="course.status !== '2' && course.status !== '3'">
+						<view class="func" v-if="course.status !== '2' && course.status !== '3'" @click="toPage(course)">
 							<!-- 如果是免费,直接显示免费 -->
 							<view v-if="course.viewMode==='1'" class="func-box" style="justify-content: flex-end;">
 								<view class="button free">免费</view>
 							</view>
-							<view v-else-if="course.viewMode==='2' && isMember" class="func-box">
+							<view v-else-if="course.viewMode==='2' && isMember" class="func-box" >
 								<view class="price">¥{{ course.price }}元</view>
 								<view class="button member-free">会员免费</view>
 							</view>
-							<view v-else-if="course.viewMode==='2' && !isMember" class="func-box">
+							<view v-else-if="course.viewMode==='2' && !isMember" class="func-box" >
 								<view style="flex: 0 0 auto;display: flex;align-items: center;">
 									<view class="member-free">
 										会员免费
@@ -140,7 +140,7 @@
 		keyword: "",
 		pageNumber: 1,
 		pageSize: 10,
-		courseType: ""
+		type: ""
 	})
 	const pageNumber = ref(1)
 	const pageSize = ref(10)
@@ -161,10 +161,10 @@
 	const filterCourses = ref([]);
 	const courses = ref([{
 		id: 1,
-		courseName: "前端开发基础前端开发基础前端开发基础",
-		courseType: "精英训练营",
+		title: "前端开发基础前端开发基础前端开发基础",
+		type: "精英训练营",
 		name: "张老师",
-		courseDate: "2023-10-01",
+		date: "2023-10-01",
 		imgUrl: "https://tse3-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?rs=1&pid=ImgDetMain",
 		price: 99.00,
 		hasBuy: false,
@@ -176,7 +176,7 @@
 	function getButtonText(course) {
 		console.log(course)
 		// const currentDate = new Date();
-		// const classDate = new Date(formatDateS(course.courseDate));
+		// const classDate = new Date(formatDateS(course.date));
 		// if(currentDate > classDate) {
 
 		// }
@@ -205,11 +205,11 @@
 		if (courseMember[course.viewMode] === '免费') return 'free';
 		if (courseMember[course.viewMode] === '会员免费') {
 			if (isMember.value) return 'member-free';
-			return course.hasBuy ? (new Date() < new Date(course.courseDate) ? 'purchased' : 'replay') :
+			return course.hasBuy ? (new Date() < new Date(course.date) ? 'purchased' : 'replay') :
 				'member-free';
 		}
 		if (courseMember[course.viewMode] === '付费') {
-			return course.hasBuy ? (new Date() < new Date(course.courseDate) ? 'purchased' : 'replay') : 'purchase';
+			return course.hasBuy ? (new Date() < new Date(course.date) ? 'purchased' : 'replay') : 'purchase';
 		}
 		return 'error';
 	}
@@ -256,7 +256,7 @@
 	}
 	// 获取列表数据
 	function search(e) {
-		// 如果是全部,则不传courseType这个值
+		// 如果是全部,则不传type这个值
 		searchForm.value = {
 			keyword: e,
 			pageNumber: pageNumber.value,
@@ -313,7 +313,7 @@
 	// 跳转到课程详情页
 	function toPage(course) {
 		uni.navigateTo({
-			url: `/pages/goOnEdu/course/courseDetail/courseDetail?id=${course.id}&title=${course.courseName}`
+			url: `/pages/goOnEdu/course/courseDetail/courseDetail?id=${course.id}&title=${course.title}`
 		});
 	}
 	// 加载更多
@@ -346,6 +346,8 @@
 <style lang="scss" scoped>
 	.container {
 		// padding: 20px;
+		// width: 100vh;
+		// overflow: hidden;
 	}
 
 	.title {

+ 5 - 5
pages/goOnEdu/course/courseMine/courseMine.vue

@@ -24,11 +24,11 @@
 			path: "/pages/goOnEdu/course/courseMine/mineCredits/mineCredits",
 			name: "学分明细"
 		},
-		{
-			id: "3",
-			path: "/pages/goOnEdu/course/courseMine/mineFavi/mineFavi",
-			name: "我的收藏"
-		},
+		// {
+		// 	id: "3",
+		// 	path: "/pages/goOnEdu/course/courseMine/mineFavi/mineFavi",
+		// 	name: "我的收藏"
+		// },
 	]);
 	const toPage = (url) => {
 		uni.navigateTo({

+ 2 - 2
pages/index/index.vue

@@ -35,7 +35,7 @@
 				</template>
 				<template v-slot:body>
 					<lg-swiper v-if="courseList.length!=0" :sildeItems="courseList" @swiperClick="swiperClick"
-						image="courseImg" title="courseName"></lg-swiper>
+						image="thumImg" title="title"></lg-swiper>
 					<u-empty text="暂无内容" mode="data" v-else></u-empty>
 				</template>
 			</u-card>
@@ -358,7 +358,7 @@ import { msg, msgSuccess } from '../../utils/common'
 			return
 		}
 		uni.navigateTo({
-			url: `/pages/goOnEdu/course/courseDetail/courseDetail?id=${data.id}&title=${data.courseName}`
+			url: `/pages/goOnEdu/course/courseDetail/courseDetail?id=${data.id}&title=${data.title}`
 		});
 	}