Forráskód Böngészése

完善课程详情页是否显示购买按钮和跳转文字

littleblue55 3 napja
szülő
commit
7143781a96

+ 11 - 0
pages.json

@@ -420,6 +420,17 @@
 					"titleNView": true
 				}
 			}
+		},
+		{
+			"path" : "pages/joinClub/joinClub",
+			"style" : 
+			{
+				"navigationBarTitleText": "会员入会",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": true
+				}
+			}
 		}
 	],
 	"globalStyle": {

+ 43 - 30
pages/goOnEdu/course/courseDetail/component/courseDesc/courseDesc.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="tabs-content" :style="{ paddingBottom : `${props.paddingBottom || 0}rpx` }">
-		<view v-if="!isMember && payType!=='1'" class="pay-member" >
+		<view v-if="!isMember && payType==='2' && !hasBuy" class="pay-member" @click="toJoin">
 			<text>个人会员或单位会员免费,点击现在入会></text>
 		</view>
 		<image :src="content" v-if="showType === 'image'" style="width: 100%" mode="widthFix"></image>
@@ -12,50 +12,63 @@
 <script setup>
 	import {
 		ref,
-		defineProps 
+		defineProps,
+		computed
 	} from 'vue'
-	import { useAuthStore } from '@/store/authStore.js';
+	import {
+		useAuthStore
+	} from '@/store/authStore.js';
 	import {
 		onLoad,
 	} from '@dcloudio/uni-app'
 	const authStore = useAuthStore();
-	const isMember = ref(false)
+	const isMember = computed(()=>{
+		return authStore.userInfo.isMember == '0' ? false : true
+	})
 	const props = defineProps({
-	  paddingBottom: {
-	    type: Number,
-	    required: false,
-		default: 10 
-	  },
-	  showType :{
-		  type: String,
-		  required: true,
-		  default: "image"
-	  },
-	  content: {
-		  type: String,
-		  required: true,
-		  default: ""
-	  },
-	  payType: {
-		  type: String,
-		  required: true,
-		  default: "1"
-	  }
+		paddingBottom: {
+			type: Number,
+			required: false,
+			default: 10
+		},
+		showType: {
+			type: String,
+			required: true,
+			default: "image"
+		},
+		content: {
+			type: String,
+			required: true,
+			default: ""
+		},
+		payType: {
+			type: String,
+			required: true,
+			default: "1"
+		},
+		hasBuy: {
+			type: Boolean,
+			required: true,
+			default: false
+		}
 	});
+	
+	const toJoin = () =>{
+		uni.navigateTo({
+			url: '/pages/joinClub/joinClub'
+		})
+	}
 	// const content = ref("<p>20名协会成员于10月15adhjshajdhsadsajdakshdjahjkd,骄傲的噶说的话吗,计划的哈手机号,很多看啥看,撒海空军的卡号是,按开机动画就撒开,安达市快点哈尽快,打火机客户打款,收获颇丰。此次活动增进了大家对科技前沿的认识。</p><img src='/static/notice/ditu.jpg' /><img src='/static/notice/ditu.jpg' /><img src='/static/notice/ditu.jpg' /><img src='/static/notice/ditu.jpg' />")
-	onLoad(() => {
-		isMember.value = authStore.userInfo.isMember == '0'? false : true;
-		// initUser()
-	})
 </script>
 
 <style lang="scss" scoped>
-	.tabs-content{
+	.tabs-content {
 		padding-top: 10rpx;
 		height: inherit;
 		position: relative;
 	}
-	.pay-member{
+
+	.pay-member {
 		color: red;
 		// text-align: center;
 		margin-bottom: 5rpx;

+ 75 - 43
pages/goOnEdu/course/courseDetail/courseDetail.vue

@@ -14,21 +14,22 @@
 			</view>
 			<view class="content">
 				<courseDesc v-if="currentTab === 0" :paddingBottom="100" showType="image"
-					:content="courseDetail.imgUrl?courseDetail.imgUrl:''" :payType="courseDetail.payType"></courseDesc>
+					:content="courseDetail.imgUrl?courseDetail.imgUrl:''" :hasBuy="courseDetail.hasBuy"
+					:payType="courseDetail.viewMode"></courseDesc>
 				<courseCredits v-if="currentTab === 1" :credit="courseDetail.courseCredits"></courseCredits>
 				<courseComment v-if="currentTab === 2" :paddingBottom="100" :commentList="commentList"></courseComment>
 			</view>
 
 		</view>
-		<view v-if="currentTab === 0" class="section-bottom" @click="toBuy">
+		<view v-if="showBuy" class="section-bottom" @click="toBuy">
 			<text>点击购买</text>
 		</view>
 		<view v-if="currentTab === 2" class="section-bottom " style="background-color: #f2f2f2;">
 			<view class="comment-input-box">
-				<u-input :custom-style="inputStyle"
-				class="comment-input" v-model="comment" :border="false" placeholder="写留言" height="60" adjust-position/>
-				<u-button class="comment-button" :hair-line="false"
-					:custom-style="customStyle" @click="toSend">发送</u-button>
+				<u-input :custom-style="inputStyle" class="comment-input" v-model="comment" :border="false"
+					placeholder="写留言" height="60" adjust-position />
+				<u-button class="comment-button" :hair-line="false" :custom-style="customStyle"
+					@click="toSend">发送</u-button>
 			</view>
 		</view>
 	</view>
@@ -39,16 +40,25 @@
 	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
+		loadCourseDetail,
+		loadCommentList,
+		sendComment
+	} from "@/api/edu.js"
+
+	import {
+		useAuthStore
+	} from '@/store/authStore'
+	const authStore = useAuthStore();
+	// const isMember = ref(false)
+
+	import {
+		ref, computed
 	} from 'vue'
 	import {
 		onLoad
 	} from '@dcloudio/uni-app'
-	
-	
-	
+
 	const courseDetail = ref({});
 	const courseId = ref(null);
 	const items = ref(['课程简介', '课程学分', '观看评论']);
@@ -73,54 +83,53 @@
 		fontSize: '26rpx'
 	})
 	// 评论列表
-	const commentList = ref([
-		{
+	const commentList = ref([{
 			commentId: "01",
 			username: "用户名123",
 			iocn: "",
-			content:"评论内容评论内容评容,大赛冠军的",
+			content: "评论内容评论内容评容,大赛冠军的",
 			commentTime: "2023-10-10 19:00:00"
 		},
 		{
 			commentId: "02",
 			username: "用户名567",
 			iocn: "",
-			content:"hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级,撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户,大赛冠军的",
+			content: "hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级,撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户,大赛冠军的",
 			commentTime: "2023-10-11 19:00:00"
 		},
 		{
 			commentId: "03",
 			username: "用户名567",
 			iocn: "",
-			content:"hajdkhd dhasjhd ,,大赛冠军的",
+			content: "hajdkhd dhasjhd ,,大赛冠军的",
 			commentTime: "2023-10-12 19:00:00"
 		},
 		{
 			commentId: "04",
 			username: "用户名567",
 			iocn: "",
-			content:"hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级,撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户,大赛冠军的",
+			content: "hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级,撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户,大赛冠军的",
 			commentTime: "2023-10-13 19:00:00"
 		},
 		{
 			commentId: "05",
 			username: "用户名567",
 			iocn: "",
-			content:"hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级,撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户,大赛冠军的",
+			content: "hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级,撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户,大赛冠军的",
 			commentTime: "2023-10-14 19:00:00"
 		},
 		{
 			commentId: "06",
 			username: "用户名567",
 			iocn: "",
-			content:"hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级,撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户,大赛冠军的",
+			content: "hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级,撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户,大赛冠军的",
 			commentTime: "2025-01-17 12:00:00"
 		},
 		{
 			commentId: "07",
 			username: "用户名567",
 			iocn: "",
-			content:"hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级,撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户,大赛冠军的",
+			content: "hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级,撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户,大赛冠军的",
 			commentTime: "2025-01-17 15:30:00"
 		}
 	])
@@ -128,22 +137,24 @@
 	function onClickItem(e) {
 		if (currentTab.value != e) {
 			currentTab.value = e;
-			if(e===2){
+			if (e === 2) {
 				getComment(courseId.value)
 			}
 		}
 	}
 	// 初始化
 	function init(id) {
-		loadCourseDetail(id).then(res=>{
-			if(res?.data){
+		loadCourseDetail(id).then(res => {
+			if (res?.data) {
 				courseDetail.value = res.data;
+				console.log(courseDetail, "课程详情")
 			}
 		})
 	}
-	function getComment(id){
-		loadCommentList(id).then(res=>{
-			if(res?.data){
+
+	function getComment(id) {
+		loadCommentList(id).then(res => {
+			if (res?.data) {
 				commentList.value = res.data;
 			}
 		})
@@ -155,40 +166,61 @@
 		})
 		// console.log("购买该课程", courseDetail.value.id)
 	}
-	
+
 	function toSend() {
 		sendComment({
 			courseId: courseId.value,
 			content: comment.value,
 			commentTime: formatDate(new Date())
-		}).then(res=>{
+		}).then(res => {
 			getComment(courseId.value)
 			comment.value = ""
 		})
 	}
-	
+
 	function formatDate(date) {
-	    const pad = (num) => num.toString().padStart(2, '0');
-	    
-	    const year = date.getFullYear();
-	    const month = pad(date.getMonth() + 1); // 月份从0开始,需加1
-	    const day = pad(date.getDate());
-	    
-	    const hours = pad(date.getHours());
-	    const minutes = pad(date.getMinutes());
-	    const seconds = pad(date.getSeconds());
-	    
-	    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+		const pad = (num) => num.toString().padStart(2, '0');
+
+		const year = date.getFullYear();
+		const month = pad(date.getMonth() + 1); // 月份从0开始,需加1
+		const day = pad(date.getDate());
+
+		const hours = pad(date.getHours());
+		const minutes = pad(date.getMinutes());
+		const seconds = pad(date.getSeconds());
+
+		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 	}
-	
+
+	const showBuy = computed(()=>{
+		if (courseDetail.value.viewMode === '2' &&
+			!isMember.value &&
+			!courseDetail.value.hasBuy &&
+			currentTab.value === 0) {
+			console.log(1)
+			return true
+		}
+		// 付费,不管是不是会员,并且没买的
+		if (courseDetail.value.viewMode === '3' &&
+			!courseDetail.value.hasBuy &&
+			currentTab.value === 0) {
+			console.log(2)
+			return true
+		}
+		console.log(3)
+		return false
+	})
+	const isMember = computed(()=>{
+		return authStore.userInfo.isMember == '0' ? false : true
+	})
 	// 初始化页面
 	onLoad((option) => {
 		const {
 			id,
 			name
 		} = option;
-		// courseDetail.value.id = id
-		// console.log(courseDetail.value, 90)
+		// isMember.value = authStore.userInfo.isMember == '0' ? false : true;
+		// console.log("是否是会员", isMember.value)
 		courseId.value = id
 		init(id)
 		getComment(id)

+ 7 - 7
pages/goOnEdu/course/courseHome/courseHome.vue

@@ -108,7 +108,7 @@
 		price: 99.00,
 		hasBuy: false,
 		hasFavi: true,
-		payType: "免费" // 新增字段,标识课程的付费类型
+		viewMode: "免费" // 新增字段,标识课程的付费类型
 	}, ]);
 
 	// 按钮的文字
@@ -116,10 +116,10 @@
 		const currentDate = new Date();
 		const classDate = new Date(course.courseDate);
 
-		if (course.payType === '1') {
+		if (course.viewMode === '1') {
 			return "免费";
 		}
-		if (course.payType === '2') {
+		if (course.viewMode === '2') {
 			if (isMember.value) return "会员免费";
 			if (!course.hasBuy && !isMember.value) return "会员免费";
 			if (course.hasBuy) {
@@ -127,7 +127,7 @@
 			}
 		}
 
-		if (course.payType === '3') {
+		if (course.viewMode === '3') {
 			if (!course.hasBuy) return "点击购买";
 			return currentDate < classDate ? "点击查看" : "点击查看回放";
 		}
@@ -138,13 +138,13 @@
 
 	// 按钮的样式
 	function getButtonClass(course) {
-		if (courseMember[course.payType] === '免费') return 'free';
-		if (courseMember[course.payType] === '会员免费') {
+		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') :
 				'member-free';
 		}
-		if (courseMember[course.payType] === '付费') {
+		if (courseMember[course.viewMode] === '付费') {
 			return course.hasBuy ? (new Date() < new Date(course.courseDate) ? 'purchased' : 'replay') : 'purchase';
 		}
 		return 'error';

+ 19 - 0
pages/joinClub/joinClub.vue

@@ -0,0 +1,19 @@
+<template>
+	<view>
+		会员入会
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>