mz/pages/course/detail.vue

<template>
	<view class="container">
		<!-- 轮播图 -->
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="swiper in swiperlist" :key="swiper.id"><image :src="swiper"></image></swiper-item>
				</swiper>
				<view class="indicator"><view class="dots" v-for="(swiper, index) in swiperlist" :class="[swiperCurrent >= index ? 'on' : '']" :key="index"></view></view>
			</view>
			<view class="swiper-name">
				<view class="flex item-box">
					<view class="item-name ellipsis">{{ list.title }}</view>
					<view class="item-collection" @click="collect">
						<image src="../../static/img/img026.png" v-if="list.collect == false"></image>
						<image src="../../static/img/img027.png" v-if="list.collect == true"></image>
						<view class="collection">收藏</view>
					</view>
				</view>
				<view class="tip-box">
					<text v-for="ls in list.label">{{ ls }}</text>
				</view>
				<view class="price-box flex">
					<view class="price">
						￥
						<text>{{ list.money }}</text>
					</view>
					<view class="number">已有{{ list.browse_count }}人学习</view>
				</view>
			</view>
		</view>
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>
		<!-- 详情 -->
		<view class="course-details" v-if="tabCurrentIndex == 1">
			<view class="details-intro">
				<view class="intro-title"><text>- 课程介绍 -</text></view>
				<rich-text class="detail-centent" :nodes="list.content"></rich-text>
			</view>
		</view>
		<!-- 课程目录 -->
		<view class="course-catalogue" v-if="tabCurrentIndex == 0"><view class="no-data" v-if="courseList == ''">暂无数据</view></view>
		<view class="course-catalogue" v-if="tabCurrentIndex == 0">
			<view class="course-menu flex_item" v-for="(ls, index) in courseList" :key="index" @click="ToCourseDetail(ls)">
				<image :src="ls.image"></image>
				<view class="menu-info">
					<view class="title">{{ ls.title }}</view>
					<view class="tip"><text>直播回放</text></view>
					<view class="price red" v-if="ls.is_pay == 1 && isPay == true">您已购买</view>
					<view class="price" v-if="ls.is_pay == 1 && isPay == false">付费购买</view>
					<text class="free" v-if="ls.is_pay == 0">免费</text>
				</view>
			</view>
		</view>
		<view class="foot-box flex" v-if="isPay == false">
			<view class="home" @click="ToHome">
				<image src="../../static/img/img028.png"></image>
				<view>首页</view>
			</view>
			<view class="Topay" @click="OpenPay">立即购买</view>
		</view>
		<!-- 支付弹窗 -->
		<uni-popup ref="popup" type="bottom">
			<view class="payment">
				<view class="first flex " @click="payclose()">
					<text class="word">选择支付方式</text>
					<image src="../../static/img/img25.png"></image>
				</view>
				<view class="pay-type-list">
					<view class="type-item b-b" @click="changePayType('weixin')">
						<view class="img"><image class="yue" src="../../static/img/img26.png"></image></view>
						<view class="con"><text class="tit">微信支付</text></view>
						<label class="radio"><radio value="" color="#FC4141" :checked="payType == 'weixin'"></radio></label>
					</view>
					<view class="type-item flex_item" @click="changePayType('yue')">
						<view class="img"><image class="yue" src="../../static/img/img017.png"></image></view>
						<view class="con"><text class="tit">余额支付</text></view>
						<label class="radio"><radio value="" color="#FC4141" :checked="payType == 'yue'"></radio></label>
					</view>
				</view>
				<view class="one"></view>
				<view class="Third flex">
					<view class="two1">
						<text class="two1-1 ">合计：</text>
						<text class="two1-2">￥</text>
						<text class="two1-2 size">{{ list.money }}</text>
					</view>
					<view class="two2" :class="{ clickbg: payLoding }" @click.stop="!payLoding ? confirm() : ''"><text>立即支付</text></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import { details, collect, course, create_order } from '@/api/course.js';
// #ifdef H5
import weixinObj from '@/libs/jweixin-module/index.js';
// #endif
export default {
	data() {
		return {
			tabCurrentIndex: 0,
			id: '', //专题详情id
			isPay: '', //是否购买该专题
			swiperlist: '', //轮播图
			swiperCurrent: 0, //轮播图
			swiperHeight: 300,
			list: '', //详情数据
			navList: [
				{
					state: 1,
					text: '课程目录'
				},
				{
					state: 0,
					text: '详情'
				}
			],
			courseList: [],
			payType: 'weixin', //支付类型
			payLoding: false, //判断是否支付中
			// #ifdef H5
			froms: '', //当前是否为微信浏览器
			// #endif
			type: '' //判断是否从订单中进入
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.loadData();
		this.course();
	},
	methods: {
		//加载专题详情
		loadData() {
			let obj = this;
			details({
				id: obj.id
			})
				.then(data => {
					obj.isPay = data.data.isPay;
					obj.swiperlist = data.data.special.swiperlist;
					obj.list = data.data.special.special;
				})
				.catch(e => {
					console.log(e.message);
				});
		},
		//专题收藏或者取消收藏
		collect() {
			let obj = this;
			collect({
				id: obj.id
			})
				.then(data => {
					obj.loadData();
				})
				.catch(e => {
					console.log(e.message);
				});
		},
		//课程目录列表
		course() {
			let obj = this;
			course({
				special_id: obj.id,
				limit: 10,
				page: 1
			})
				.then(data => {
					this.courseList = data.data.list;
				})
				.catch(e => {
					console.log(e.message);
				});
		},
		//课程详情
		ToCourseDetail(ls) {
			let obj = this;
			if (ls.is_pay == 1) {
				if (obj.isPay == false) {
					this.$api.msg('清先购买该课程！');
				} else {
					uni.navigateTo({
						url: '/pages/course/curriculum?id=' + ls.id + '&specialId=' + obj.id
					});
				}
				this.$api.msg('清先购买该课程！');
			} else {
				uni.navigateTo({
					url: '/pages/course/curriculum?id=' + ls.id + '&specialId=' + obj.id
				});
			}
		},
		//轮播图
		swiperChange(e) {
			const index = e.detail.current;
			this.swiperCurrent = index;
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
		},
		//返回首页
		ToHome() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		//打开支付弹窗
		OpenPay() {
			this.$refs.popup.open();
		},
		//关闭支付弹窗
		payclose() {
			this.$refs.popup.close();
		},
		//选择支付方式
		changePayType(type) {
			this.payType = type;
			console.log(this.payType);
		},
		//确认支付
		confirm: async function() {
			let obj = this;
			// 支付中
			obj.payLoding = true;
			// #ifdef H5
			// 获取当前是否为微信浏览器
			obj.froms = uni.getStorageSync('weichatBrowser') || '';
			// #endif
			obj.CreateOrder();
		},
		//订单创建
		CreateOrder() {
			let obj = this;
			// 生成订单
			create_order({
				special_id: obj.id,
				pay_type_num: 2, 
				payType: obj.payType ,//支付类型 
				total_num:1,
			})
				.then(data => {
					// 判断是否为余额支付
					if (obj.payType == 'yue') {
						if (data.code == 200) {
							if (data.msg == '余额支付成功') {
								obj.$api.msg('购买成功！');
							}
							obj.payclose();
							obj.loadData();
						} else {
							obj.$api.msg(msg);
						}
					}
					// #ifdef H5
					if (obj.payType == 'weixin') {
						console.log(data,'data')
						let config = data.data.jsConfig;
						console.log(config, 'config');
						weixinObj.chooseWXPay({
							timestamp: config.timestamp,
							nonceStr: config.nonceStr,
							package: config.package,
							signType: config.signType,
							paySign: config.paySign,
							success: function(res) {
								obj.loadData();
								obj.payclose();
							},
							fail: function(res) {
								obj.payLoding = false;
								console.log(res, '失败');
								console.log(res.errMsg);
							}
						});
					}
					// #endif
				})
				.catch(e => {
					// 支付完成
					console.log(e.message);
					if (e.message == '该订单已支付!') {
						// obj.paySuccessTo();
					}
				});
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss">
.container {
}
//轮播图
.swiper {
	width: 100%;
	background-color: #ffffff;
	.swiper-box {
		width: 100%;
		height: 500rpx;
		overflow: hidden;
		// box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
		//兼容ios，微信小程序
		position: relative;
		z-index: 1;
		swiper {
			width: 100%;
			height: 500rpx;
			swiper-item {
				image {
					width: 100%;
					height: 500rpx;
				}
			}
		}
		.indicator {
			position: absolute;
			bottom: 20upx;
			left: 20upx;
			background-color: rgba(255, 255, 255, 0.4);
			width: 150upx;
			height: 5upx;
			border-radius: 3upx;
			overflow: hidden;
			display: flex;
			.dots {
				width: 0upx;
				background-color: rgba(255, 255, 255, 1);
				transition: all 0.3s ease-out;
				&.on {
					width: (100%/3);
				}
			}
		}
	}
}
.swiper-name {
	width: 100%;
	padding: 35rpx 30rpx;
	.item-box {
		position: relative;
		.item-name {
			position: relative;
			top: 0rpx;
			font-size: 36rpx;
			width: 90%;
		}
		.item-collection {
			text-align: center;
			position: absolute;
			top: 0rpx;
			right: 0;
			image {
				width: 55rpx;
				height: 50rpx;
			}
			.collection {
				font-size: 26rpx;
				color: #999999;
			}
		}
	}
	.tip-box {
		padding: 15rpx 0rpx;
		text {
			background-color: #e3e9fe;
			color: #6786fb;
			font-size: 22rpx;
			padding: 8rpx 15rpx;
			border-radius: 10rpx;
			margin-right: 15rpx;
		}
	}
	.price-box {
		font-size: 26rpx;
		color: #999999;
		.price {
			color: #e73932;
			text {
				font-size: 35rpx;
				font-weight: bold;
			}
		}
	}
}
//视频
.top {
	width: 100%;
	height: 500rpx;
	.course-video {
		width: 100%;
		height: 100%;
	}
}

.navbar {
	display: flex;
	height: 40px;
	padding: 0 5px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 10;
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 30rpx;
		color: $font-color-dark;
		position: relative;
		&.current {
			color: $base-color;
		}
	}
}

// 详情
.course-details {
	padding: 20rpx;
	.details-content {
		background: #ffffff;
		border-radius: 10rpx;
		text-align: center;
		.details-title {
			padding: 30rpx 0;
			border-bottom: 1px solid #f0f0f0;
			font-size: $font-base;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
		.details-num {
			display: flex;
			padding: 30rpx 0;
			font-size: $font-sm + 2rpx;
			font-weight: bold;
			color: rgba(102, 102, 102, 1);
			text {
				flex: 1;
			}
			.interval {
				width: 2px;
				background-color: #eeeeee;
			}
		}
	}

	.details-intro {
		padding: 40rpx 20rpx;
		background: #ffffff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		margin-bottom: 120rpx;
		.intro-title {
			width: 100%;
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color;
			text-align: center;
			margin-bottom: 40rpx;
		}
		.intro-text {
			color: #5dcafa;
			font-size: $font-base;
			line-height: 40rpx;
		}
		.intro-img {
			width: 100%;
			height: 400rpx;
			margin-top: 40rpx;
			.img {
				width: 100%;
				height: 100%;
			}
		}
	}
}

// 课程目录
.course-catalogue {
	padding: 20rpx;
	.no-data {
		width: 100%;
		text-align: center;
		font-size: 26rpx;
	}
	.course-menu {
		background: #ffffff;
		border-bottom: 1px solid #f0f0f0;
		padding: 20rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		image {
			width: 250rpx;
			height: 135rpx;
			border-radius: 15rpx;
		}
		.menu-info {
			padding-left: 25rpx;
			color: #333333;
			.title {
				font-size: 28rpx;
			}
			.tip {
				margin: 15rpx 0rpx;
				text {
					padding: 5rpx 10rpx;
					background-color: rgba(43, 121, 245, 0.18);
					color: #6786fb;
				}
			}
			.price {
				color: #e73932;
			}
			.red {
				color: #6786fb !important;
			}
			.free {
				background: rgba(253, 248, 234, 1);
				border-radius: 19px;
				color: rgba(241, 174, 39, 1);
				padding: 2rpx 10rpx;
			}
		}
	}
}
.foot-box {
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #ffffff;
	padding: 0rpx 35rpx;
	font-size: 22rpx;
	color: #333333;
	.home {
		width: 15%;
		text-align: center;
		image {
			width: 35rpx;
			height: 38rpx;
		}
	}
	.Topay {
		width: 80%;
		background-color: #6786fb;
		text-align: center;
		color: #ffffff;
		padding: 25rpx 0rpx;
		margin: 15rpx 0rpx;
		border-radius: 45rpx;
	}
}
//支付弹窗

.pay-type-list {
	margin-top: 20upx;
	background-color: #fff;
	padding-left: 40upx;
	.type-item {
		height: 120upx;
		padding: 20upx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 60upx;
		font-size: 30upx;
		position: relative;
	}
	.icon {
		width: 100upx;
		font-size: 52upx;
	}
	.img {
		color: #fe8e2e;
		width: 50rpx;
		height: 50rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.tit {
		font-size: $font-lg;
		color: $font-color-dark;
		margin-bottom: 4upx;
	}
	.con {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding-left: 25rpx;
		font-size: $font-sm;
		color: $font-color-light;
	}
}
.payment {
	background-color: #ffffff;
	border-radius: 15rpx 15rpx 0rpx 0rpx;
	z-index: 999;
	.first {
		border-bottom: 2rpx solid $border-color-light;
		padding: 38rpx 25rpx;
		.word {
			font-size: $uni-font-size-base;
			font-weight: bold;
			color: $font-color-dark;
		}
		image {
			width: 25rpx;
			height: 25rpx;
		}
	}
	.one {
		height: 20rpx;
		background-color: #f6f6f6;
	}
	.Third {
		.two1 {
			width: 55%;
			background-color: #ffffff;
			padding-left: 25rpx;
			.two1-1 {
				font-size: $uni-font-size-base;
				font-weight: 400;
				color: $font-color-dark;
			}
			.two1-2 {
				font-size: $uni-font-size-sm;
				font-weight: bold;
				color: $color-red1;
			}
			.size {
				font-size: $uni-font-size-lg + 4rpx;
			}
		}
		.two2 {
			width: 45%;
			background: $color-red1;
			color: #ffffff;
			font-size: $uni-font-size-lg;
			font-weight: 550;
			text-align: center;
			padding: 30rpx 0rpx;
		}
		.clickbg {
			background-color: $color-gray !important;
		}
	}
}
</style>