menber-center/pages/goOnEdu/course/courseDetail/courseOrder.vue

<template>
	<view class="container">
		<view class="course-item">
			<view class="course-item-image">
				<image class="course-image" :src="course.imgUrl" 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;"
						:src="course.hasFavi ? `${FILE_URL}/edu-icon/favi-icon.png` : `${FILE_URL}/edu-icon/no-favi-icon.png`">
					</image>
				</view>
				<view class="course-type">{{ course.courseType }}</view>
				<view class="course-teacher">
					<u-icon name="account" size="28"></u-icon>
					{{ course.name }}
				</view>
				<view class="course-date">
					<u-icon name="clock" size="28"></u-icon>
					{{ getDateWeek(course.courseDate) }}
				</view>
				<view class="course-price">￥{{ isMember ? course.priceMember : course.price }}元</view>
			</view>
		</view>
		<view class="course-form" style="margin-top: 20rpx;">
			<view class="course-form-item">
				<view class="course-label">
					开课时间
				</view>
				<view class="course-value">
					{{ course.courseDate }}{{ course.courseTime }}开课
				</view>
			</view>
			<view class="course-form-item">
				<view class="course-label">
					支付方式
				</view>
				<view class="course-value" @click="payTypeShow = true">
					{{ activePayType }}<i class="iconfont icon-sangedian-copy"></i>
				</view>
			</view>
		</view>
		<view class="course-form" style="margin-top: 20rpx;">
			<view class="course-form-item">
				<view class="course-label">
					课程金额
				</view>
				<view class="course-value">
					￥{{ isMember ? course.priceMember : course.price }}
				</view>
			</view>
			<view class="course-form-item">
				<view class="course-label">
					积分抵扣
				</view>
				<view class="course-value">
					无
				</view>
			</view>
			<view class="course-form-item">
				<view class="course-label">
					合计金额
				</view>
				<view class="course-value">
					￥{{ price }}
				</view>
			</view>
		</view>
		<view class="course-form" style="margin-top: 20rpx;">
			<view class="course-form-item">
				<view class="course-label">
					课程有效期：<text class="text-red">{{ course.expirationDate }}</text>
				</view>
			</view>
		</view>
		<view class="course-form" style="background: none;" v-if="!isMember && course.viewMode === '2'">
			<view class="course-form-item" @click="toJoin">
				<text class="text-red" style="font-weight: bold;">个人会员或单位会员免费，点击现在入会></text>
			</view>
		</view>
		<view class="pay">
			<view class="pay-price">
				￥:{{price}}
			</view>
			<view>
				<button class="pay-btn" @click="toBuy">立即购买</button>
			</view>
		</view>
		<u-action-sheet :list="list" v-model="payTypeShow" @click="clickAction" safe-area-inset-bottom></u-action-sheet>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import configService from '@/utils/baseurl.js'
	import {
		loadCourseDetail,
		payCourse
	} from "@/api/edu.js"
	import {
		msgError,
		msgSuccess
	} from "@/utils/common.js"
	import {
		useAuthStore
	} from '@/store/authStore'
	const authStore = useAuthStore();
	const isMember = computed(() => {
		authStore.loadUserInfo()
		return authStore.userInfo.isMember == '0' ? false : true
	})
	const openid = computed(() => {
		authStore.loadOpenid()
		return authStore.openid
	})
	const FILE_URL = configService.FILE_URL;
	const courseId = ref("");
	const course = ref({})
	const price = computed(() => {
		let val;
		if (isMember.value) {
			val = course.value.priceMember
		} else {
			val = course.value.price
		}
		// 如果后续有积分需求可以写在这里，计算一下积分，返回最终值
		payForm.value.amount = val
		return val
	})

	const activePayType = ref("微信支付")

	const list = ref([{
		text: '微信支付'
	}])

	const payForm = ref({
		title: "",
		desc: "",
		id: "",
		amount: "",
		openid: ""
	})

	const payTypeShow = ref(false)
	// 支付完成
	const toBuy = () => {
		payForm.value.openid = openid.value
		console.log(payForm.value)
		// 支付部分
		payCourse(payForm.value).then(res => {
			if (res && res.code === 0) {
				const params = res.data
				wx.requestPayment({
					nonceStr: params.nonceStr,
					package: params.package,
					paySign: params.paySign,
					signType: params.signType,
					timeStamp: params.timeStamp,
					success(res){
						uni.navigateTo({
							url:"/pages/goOnEdu/course/courseDetail/coursePay?id="+ courseId.value
						})
					},
					fail(res){
						msgError("支付失败")
					}
				})
			}
		})
		// uni.redirectTo({
		// 	url: "/pages/goOnEdu/course/courseDetail/coursePay?id=" + courseId.value
		// })
	}

	const clickAction = (i) => {
		// console.log(i)
		activePayType.value = list.value[i].text
		payTypeShow.value = false
	}

	// 日期格式：xxxx年xx月xx日（星期x）
	function getDateWeek(val) {
		const date = new Date(val);
		const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];
		const year = date.getFullYear();
		const month = date.getMonth() + 1; // 注意：月份从0开始
		const day = date.getDate();
		const dayOfWeek = daysOfWeek[date.getUTCDay()];
		// const result = `${year}年${month}月${day}日（星期${dayOfWeek}）`
		return `${year}年${month}月${day}日（星期${dayOfWeek}）`
	}
	const toJoin = () =>{
		uni.navigateTo({
			url: '/pages/joinClub/joinClub'
		})
	}
	
	// 初始化
	function init(id) {
		loadCourseDetail(id).then(res => {
			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
			}
		})
	}

	onLoad((option) => {
		const {
			id
		} = option;
		init(id);
		console.log('onLoad', id)
	})
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100vw;
		background-color: $uni-bg-color;
		// padding: 0 20rpx;
	}

	.course-item {
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		overflow: hidden;
		margin: 0 20rpx;
		border-radius: 10rpx;

		.course-item-image {
			width: 200rpx;
			height: 280rpx;
			flex: 0 0 auto;
			margin-right: 20rpx;

			.course-image {
				width: 100%;
				height: 100%;
			}

		}

		.course-item-content {
			flex: 1;
			position: relative;

			view {
				margin-bottom: 22rpx;
			}

			.course-title {
				font-weight: bold;
				margin-right: 10px;
				font-size: 28rpx;
				color: #000;
			}

			.course-type,
			.course-teacher,
			.course-date,
			.course-price {
				font-size: 30rpx;
				color: #000;
			}

			.course-price {
				color: #fe0000;
				letter-spacing: 2rpx;
			}

			.button::after {
				content: none;
				/* 移除内容 */
			}

			.button {
				position: absolute;
				right: 0;
				bottom: 0;
				min-width: 80px;
				padding: 0 40rpx;
				white-space: nowrap;
				height: 45rpx;
				line-height: 45rpx;
				font-size: 22rpx;
				/* padding: 0; */
				border-radius: 50rpx;
				color: white;
				border: none;
			}

			.free {
				background-color: #006af4;
			}

			.purchase {
				background-color: #fe0000;
			}

			.member-free {
				background-color: transparent;
				background-image: url('http://www.gzrea.org.cn:8543/icon/wxmp/bg-label.png');
				background-size: cover;
				background-repeat: no-repeat;
				color: #000;
				height: initial;
				padding: 6rpx 0 3rpx;
				border-radius: 0;
			}

			.replay {
				background-color: #006af4;
			}

			.purchased {
				background-color: #006af4;
			}
		}


	}

	.course-form {
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		overflow: hidden;
		border-radius: 10rpx;
		flex-direction: column;
		font-size: 30rpx;
		margin: 0 20rpx;

		.course-form-item {
			display: flex;
			justify-content: space-between;
			width: 100%;
			margin: 20rpx 0;

			.iconfont {
				display: inline-block;
				font-size: 24rpx;
			}
		}
	}

	.pay {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 40rpx 20rpx env(safe-area-inset-bottom, 0);
		background-color: #fff;
		align-items: center;

		.pay-price {
			font-size: 60rpx;
			color: red;
			font-weight: bold;
		}

		.pay-btn {
			width: 200rpx;
			height: 70rpx;
			line-height: 70rpx;
			background-color: red;
			color: #fff;
			border-radius: 40rpx;
		}
	}

	.text-red {
		color: red;
	}
</style>