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.keChengTuPian" mode="aspectFill"></image>
			</view>
			<view class="course-item-content">
				<view class="course-title">
					<text>{{ course.keChengMingCheng }}</text>
					<image style="width: 25rpx;height: 25rpx;padding-left: 20rpx;"
						:src="course.isShouCang ? '/static/edu-icon/favi-icon.png' : '/static/edu-icon/no-favi-icon.png'">
					</image>
				</view>
				<view class="course-type">{{ course.keChengLeXing }}</view>
				<view class="course-teacher">
					<u-icon name="account" size="28"></u-icon>
					{{ course.shouKeZhe }}
				</view>
				<view class="course-date">
					<u-icon name="clock" size="28"></u-icon>
					{{ getDateWeek(course.shouKeRiQi) }}
				</view>
				<view class="course-price">￥{{ course.jiaGe }}元</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.shouKeRiQi }}{{ course.shouKeShiJian }}开课
				</view>
			</view>
			<view class="course-form-item">
				<view class="course-label">
					支付方式
				</view>
				<view class="course-value" @click="show = 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">
					￥{{ course.jiaGe }}
				</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.keChengYouXiaoQi }}</text>
				</view>
			</view>
		</view>
		<view class="course-form" style="background: none;">
			<view class="course-form-item">
				<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="show" @click="clickAction" safe-area-inset-bottom></u-action-sheet>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const courseId = ref("");
	const course = ref({})
	const price = ref(0)
	const activePayType = ref("微信支付")
	const list = ref([{
		text: '微信支付'
	}, {
		text: '支付宝支付'
	}])
	const show = ref(false)
	const toBuy = () => {
		uni.redirectTo({
			url: "/pages/goOnEdu/course/courseDetail/coursePay?id=" + courseId.value
		})
	}

	const clickAction = (i) =>{
		// console.log(i)
		activePayType.value = list.value[i].text
		show.value = false
	}
	// 加载数据
	const init = (id) => {
		// 加载数据
		courseId.value = id
		course.value = {
			id: id,
			keChengMingCheng: "11Vue.js 从入门到精通",
			keChengLeXing: "领袖锻造营",
			shouKeZhe: "李老师11",
			shouKeRiQi: "2023-09-15",
			shouKeShiJian: "18:00",
			keChengTuPian: "https://tse4-mm.cn.bing.net/th/id/OIP-C.X_J8jL0bSPQ_jgOrdIbsgQHaEK?rs=1&pid=ImgDetMain",
			jiaGe: 199.00,
			isGouMai: true,
			isShouCang: false,
			fuFeiLeiXing: "会员免费",
			keChengYouXiaoQi: "用户注销前有效"
		}
		price.value = course.value.jiaGe
	}
	// 日期格式：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}）`
	}
	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('~@/static/images/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>