<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 ? 'https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/edu-icon/favi-icon.png' : 'https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/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('https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/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>