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

联调培训课程列表、详情、评论

littleblue55 6 өдөр өмнө
parent
commit
cd555c2d6a

+ 69 - 0
api/edu.js

@@ -0,0 +1,69 @@
+import request from '@/utils/request'
+
+// 获取课程分类
+export function loadCourseCate() {
+	return request({
+		'url': '/course/category',
+		headers: {
+			isToken: true
+		},
+		'method': 'get'
+	})
+}
+// 获取课程列表
+export function loadCourseList(data) {
+	return request({
+		'url': '/course/list',
+		headers: {
+			isToken: true
+		},
+		'method': 'post',
+		data: data
+	})
+}
+
+// 获取课程详情
+export function loadCourseDetail(id) {
+	return request({
+		'url': `/course/${id}`,
+		headers: {
+			isToken: true
+		},
+		'method': 'get'
+	})
+}
+
+// 获取评论列表
+export function loadCommentList(id) {
+	return request({
+		'url': '/course/comment/list?courseId='+id,
+		headers: {
+			isToken: true
+		},
+		'method': 'get'
+	})
+}
+
+// 评论课程
+export function sendComment(data) {
+	return request({
+		'url': '/course/comment/send',
+		headers: {
+			isToken: true
+		},
+		'method': 'post',
+		data: data
+	})
+}
+
+// 购买培训课程
+export function payCourse(data) {
+	return request({
+		'url': '/course/payment',
+		headers: {
+			isToken: true
+		},
+		'method': 'post',
+		data: data
+	})
+}

+ 13 - 0
api/user.js

@@ -70,6 +70,19 @@ export function loginPhone(data){
 		'data': data
 	})
 }
+/**
+ * 微信登录-获取openId
+*/ 
+export function wxLoginOpenid(data){
+	return request({
+		'url': '/user/wxlogin/getOpenid',
+		headers: {
+			isToken: false
+		},
+		'method': 'post',
+		'data': data
+	})
+}
 
 /**
  * 我的

+ 1 - 1
pages/goOnEdu/course/courseDetail/component/courseDesc/courseDesc.vue

@@ -2,7 +2,7 @@
 	<view class="tabs-content" :style="{ paddingBottom : `${props.paddingBottom || 0}rpx` }">
 		<image :src="content" v-if="showType === 'image'" style="width: 100%" mode="widthFix"></image>
 		<u-parse :html="content" :selectable="true" v-else></u-parse>
-		课程简介-测试用,看能不能看到底部
+		<!-- 课程简介-测试用,看能不能看到底部 -->
 	</view>
 </template>
 

+ 25 - 23
pages/goOnEdu/course/courseDetail/courseDetail.vue

@@ -39,6 +39,7 @@
 	import courseDesc from './component/courseDesc/courseDesc.vue';
 	import courseCredits from './component/courseCredits/courseCredits.vue';
 	import courseComment from './component/courseComment/courseComment.vue';
+	import { loadCourseDetail, loadCommentList, sendComment } from "@/api/edu.js"
 	import {
 		ref
 	} from 'vue'
@@ -46,6 +47,7 @@
 		onLoad
 	} from '@dcloudio/uni-app'
 	const courseDetail = ref({});
+	const courseId = ref(null);
 	const items = ref(['课程简介', '课程学分', '观看评论']);
 	const currentTab = ref(0);
 	const comment = ref("");
@@ -123,45 +125,43 @@
 	function onClickItem(e) {
 		if (currentTab.value != e) {
 			currentTab.value = e;
+			if(e===2){
+				getComment(courseId.value)
+			}
 		}
 	}
 	// 初始化
 	function init(id) {
-		// 根据id初始化页面内容
-		courseDetail.value = {
-			id: id,
-			courseName: "11Vue.js 从入门到精通",
-			courseType: "领袖锻造营",
-			name: "李老师11",
-			courseDate: "2023-09-15",
-			imgUrl: "https://tse4-mm.cn.bing.net/th/id/OIP-C.X_J8jL0bSPQ_jgOrdIbsgQHaEK?rs=1&pid=ImgDetMain",
-			price: 199.00,
-			hasBuy: true,
-			hasFavi: false,
-			payType: "会员免费",
-			courseCredits: 2,
-		}
-		// console.log(courseDetail.value)
+		loadCourseDetail(id).then(res=>{
+			if(res?.data){
+				courseDetail.value = res.data;
+			}
+		})
+	}
+	function getComment(id){
+		loadCommentList(id).then(res=>{
+			if(res?.data){
+				commentList.value = res.data;
+			}
+		})
 	}
 	// 购买课程
 	function toBuy() {
 		uni.navigateTo({
-			url: "/pages/goOnEdu/course/courseDetail/courseOrder?id=" + courseDetail.value.id
+			url: "/pages/goOnEdu/course/courseDetail/courseOrder?id=" + courseId.value
 		})
 		// console.log("购买该课程", courseDetail.value.id)
 	}
 	
 	function toSend() {
-		console.log("评论内容:",comment.value)
-		// 发送给后端
-		commentList.value.push({
-			commentId: "0"+commentList.value.length,
-			username: "890567",
-			iocn: "",
+		sendComment({
+			courseId: courseId.value,
 			content: comment.value,
 			commentTime: formatDate(new Date())
+		}).then(res=>{
+			getComment(courseId.value)
+			comment.value = ""
 		})
-		comment.value = ""
 	}
 	
 	function formatDate(date) {
@@ -186,7 +186,9 @@
 		} = option;
 		// courseDetail.value.id = id
 		// console.log(courseDetail.value, 90)
+		courseId.value = id
 		init(id)
+		getComment(id)
 		uni.setNavigationBarTitle({
 			title: name
 		});

+ 31 - 18
pages/goOnEdu/course/component/courseHome/courseHome.vue → pages/goOnEdu/course/courseHome/courseHome.vue

@@ -2,13 +2,13 @@
 	<view class="container">
 		<!-- 搜索 -->
 		<u-search @search="search" :show-action="false" shape="round" placeholder="搜索您想要的内容"
-			v-model="searchWord"></u-search>
+			v-model="searchForm.keyword"></u-search>
 		<!-- tabs -->
 		<view style="padding-top: 20rpx;display: flex;">
 			<u-tabs style="flex: 1;" :list="tabsList" :is-scroll="true" font-size="24" :bold="false"
 				inactive-color="#000000" active-color="#000000" :bar-style="{'background-color': '#2979ff'}"
 				:gutter="30" height="45" v-model="currentTab" @change="changeTab"></u-tabs>
-			<u-icon name="list" style="flex: 0 0 auto;padding-left: 20rpx;"></u-icon>
+			<!-- <u-icon name="list" style="flex: 0 0 auto;padding-left: 20rpx;"></u-icon> -->
 		</view>
 		<!-- 列表 -->
 		<view class="course-list">
@@ -50,20 +50,22 @@
 	} from 'vue';
 	import {
 	} from '@dcloudio/uni-app'
+	import { loadCourseCate, loadCourseList } from "@/api/edu.js"
 	import { useCourseStore } from "@/store/courseStore.js"
 	const courseStore = useCourseStore();
-	const searchWord = ref("")
 	const isMember = ref(false);
-	const tabsList = ref([{
-		name: '全部'
-	}, {
-		name: '精英训练营'
-	}, {
-		name: '领袖锻造营'
-	}, {
-		name: '合规专训营'
-	}]);
+	const tabsList = ref([]);
 	const currentTab = ref(courseStore.currentTab); 
+	const searchForm = ref({
+		keyword: "",
+		pageNumber: 1,
+		pageSize: 10,
+	})
+	const courseMember = {
+		1: "免费",
+		2: "会员免费",
+		3: "付费",
+	}
 	// 展示的课程
 	const filterCourses = ref([]);
 	const courses = ref([{
@@ -179,13 +181,13 @@
 
 	// 按钮的样式
 	function getButtonClass(course) {
-		if (course.payType === "免费") return 'free';
-		if (course.payType === "会员免费") {
+		if (courseMember[course.payType] === "免费") return 'free';
+		if (courseMember[course.payType] === "会员免费") {
 			if (isMember.value) return 'member-free';
 			return course.hasBuy ? (new Date() < new Date(course.courseDate) ? 'purchased' : 'replay') :
 				'member-free';
 		}
-		if (course.payType === "付费") {
+		if (courseMember[course.payType] === "付费") {
 			return course.hasBuy ? (new Date() < new Date(course.courseDate) ? 'purchased' : 'replay') : 'purchase';
 		}
 		return 'error';
@@ -216,7 +218,7 @@
 	}
 	// 搜索
 	function search(e) {
-		console.log(e, "searchword")
+		console.log(e, "searchForm.keyword")
 	}
 	// 收藏
 	function collectCourse(id,index) {
@@ -226,9 +228,20 @@
 	}
 	// 初始化
 	function init() {
+		loadCourseCate().then(res=>{
+			if(res?.data){
+				tabsList.value = [{ code: '', name: '全部'}, ...res.data]
+			}
+		})
+		searchForm.value.keyword = ""
+		loadCourseList(searchForm.value).then(res=>{
+			if(res?.data){
+				courses.value = res.data;
+				filterCourses.value = [...courses.value];
+			}
+		})
 		// 初始化页面,获取数据
-		filterCourses.value = courses.value
-		searchWord.value = ""
+		// filterCourses.value = courses.value
 	}
 
 	function toPage(course) {

+ 0 - 0
pages/goOnEdu/course/component/courseMine/courseMine.vue → pages/goOnEdu/course/courseMine/courseMine.vue


+ 2 - 2
pages/goOnEdu/course/index.vue

@@ -34,8 +34,8 @@
 </template>
 
 <script>
-	import courseHome from './component/courseHome/courseHome.vue';
-	import courseMine from './component/courseMine/courseMine.vue';
+	import courseHome from './courseHome/courseHome.vue';
+	import courseMine from './courseMine/courseMine.vue';
 
 	export default {
 		data() {

+ 40 - 32
pages/login/login.vue

@@ -40,7 +40,8 @@
 					</view>
 					<view class="form-item">
 						<u-input height="80" placeholder="请输入密码" border-color="#d0d0d0" v-model="userNameForm.password"
-							:border="true" class="form-item-input" @confirm="userNameLoginHandle" type="password" password-icon/>
+							:border="true" class="form-item-input" @confirm="userNameLoginHandle" type="password"
+							password-icon />
 					</view>
 					<view class="form-button" @click="userNameLoginHandle">
 						立即登录
@@ -60,19 +61,17 @@
 				half-width="200">使用第三方账号登录</u-divider>
 			<view class="app-icon mb-30">
 				<!-- v-if="canIUseGetUserProfile" -->
-				<u-button  @click="getUserProfile" class="custom-button"
-					style="width: 40px;" plain :hair-line="false">
+				<!-- <u-button @click="getUserProfile" class="custom-button" style="width: 40px;" plain :hair-line="false">
 					<image src="https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/weixin.png"
 						mode="aspectFit" style="width: 40px;height: 40px;" />
-				</u-button>
+				</u-button> -->
 				<!-- v-else -->
-				<u-button  open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" class="custom-button"
+				<!-- <u-button open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" class="custom-button"
 					style="width: 40px;" plain :hair-line="false">
 					<image src="https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/weixin.png"
 						mode="aspectFit" style="width: 40px;height: 40px;" />
-				</u-button>
-				<u-button  @click="handleWxLogin()" class="custom-button"
-					style="width: 40px;" plain :hair-line="false">
+				</u-button> -->
+				<u-button @click="handleWxLogin()" class="custom-button" style="width: 40px;" plain :hair-line="false">
 					<image src="https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/weixin.png"
 						mode="aspectFit" style="width: 40px;height: 40px;" />
 				</u-button>
@@ -113,7 +112,8 @@
 		getCaptchaImage,
 		checknumberCaptcha,
 		smsSend,
-		loginPhone
+		loginPhone,
+		wxLoginOpenid
 	} from "@/api/user.js"
 	import {
 		msg,
@@ -180,31 +180,31 @@
 					phone,
 					captcha
 				} = this.phoneForm;
-				
+
 				// 手机号正则验证
 				if (!/^1[3-9]\d{9}$/.test(phone)) {
 					msg("请输入正确的手机号");
 					return;
 				}
-				
-				if(this.getPhoneCapt <= 0){
+
+				if (this.getPhoneCapt <= 0) {
 					msg("请先获取手机验证码");
 					return;
 				}
-				
+
 				// 验证码存在性检查
 				if (!captcha) {
 					msg("请输入验证码");
 					return;
 				}
-				
+
 				let checkUserBook = await this.checkUserBook()
 				if (!this.checkUserBook()) return;
 				// console.log(this.phoneForm)
 				uni.showLoading({
 					title: '正在登录...'
 				})
-				loginPhone(this.phoneForm).then(res=>{
+				loginPhone(this.phoneForm).then(res => {
 					// msg("登录成功");
 					console.log(res);
 				})
@@ -309,9 +309,9 @@
 				uni.showLoading({
 					title: '正在校验验证码'
 				})
-				
+
 				const checkRes = await checknumberCaptcha(this.numberCaptchaForm);
-				if(!checkRes.data.valid){
+				if (!checkRes.data.valid) {
 					uni.showToast({
 						title: '验证码输入错误',
 						icon: 'none'
@@ -322,8 +322,8 @@
 				const codeRes = await smsSend({
 					phone: this.phoneForm.phone
 				});
-				
-				if(codeRes && codeResdata.captchaUuid){
+
+				if (codeRes && codeResdata.captchaUuid) {
 					this.getPhoneCapt++;
 					this.phoneForm.captchaUuid = codeRes.captchaUuid
 					this.closePopup();
@@ -339,29 +339,37 @@
 					title: '正在获取图片'
 				})
 				const img = await getCaptchaImage();
-				if(!img.data.numberCaptchaSrc){
+				if (!img.data.numberCaptchaSrc) {
 					return
 				}
 				this.numberCaptchaForm.numberCaptchaUuid = img.data.numberCaptchaUuid
 				this.numberCaptchaSrc = img.data.numberCaptchaSrc;
 				uni.hideLoading();
 			},
-			
+
 			// --------验证码 end---------
 			async handleWxLogin() {
-				try {
-				    // 获取code
-				    const loginRes = await uni.login({
-				      provider: 'weixin'
-				    });
-				    const code = loginRes.code;
-					console.log(11, loginRes);
-				  } catch (error) {
-				    console.error('微信登录失败:', error);
-				  }
+				const loginRes = await wx.login();
+				const code = loginRes.code;
+				console.log("最新code", code)
+				wxLoginOpenid({code}).then(res=>{
+					console.log("weixinlogin", res)
+				})
+				
+				
+				// try {
+				// 	// 获取code
+				// 	const code = loginRes.code;
+				// 	console.log(code)
+				// 	wxLoginOpenid({code}).then(res=>{
+				// 		console.log("weixinlogin", res)
+				// 	})
+				// } catch (error) {
+				// 	console.log('微信登录失败:', error);
+				// }
 			},
 			decryptPhoneNumber(e) {
-				console.log(1111,e)
+				console.log(1111, e)
 				if (e.detail.encryptedData) {
 					const {
 						encryptedData,