XLJK-web/xinlijiankang-uniapp-main/pages/index/kcxq-x.vue

<template>
	<view class="">
		<view class="ddxqship">
			<view class="u-rela" style="width: 100%; height: 100%;" v-if="!videoShow" @click="playVideo">
				<image :src="info.img" mode="aspectFill" style="width: 100%;height: 100%;"></image>
				<u-icon name="play-right-fill" size="80" color="#fff" class="u-abso"
					style="z-index: 9; left: 50%; top: 50%; transform: translate(-50%,-50%);"></u-icon>
			</view>
			<video v-if="videoShow" @timeupdate="timeupdate" :src="videoinfo.content" autoplay
				style="width: 100%;height: 100%;"></video>
		</view>
		<view class="ddxqfayu">
			<view class="indhuyr">
				<view class="indjbrr"></view>
				<text>课程详情</text>
			</view>
			<view style="margin-top: 30rpx;">
				<view class="fzctob">
					<view class="kcxquyr">
						<text>课程名称</text>
					</view>
					<view class="kcxquyra">
						<text>{{item.title}}</text>
					</view>
				</view>
				<view style="border-top: 2rpx dashed #e8e8e8;width: 100%;margin: 22rpx 0;"></view>
				<!-- <view class="fzctob">
					<view class="kcxquyr">
						<text>课程分类</text>
					</view>
					<view class="fzctob kcwwerrt">
						<text v-for="(item,index) in info.type_title" :key="index">{{item}}</text>
					</view>
				</view> -->
			</view>
		</view>
		<view class="ddxqfayu" v-for="(item1,index1) in catalog" :key="index1">
			<view class="indhuyr">
				<view class="indjbrr"></view>
				<text>{{item1.title}}</text>
			</view>
			<view style="margin-top: 10rpx;">
				<view class="fsxto kandyyr" v-for="(item2,index2) in item1.list" :key="index2" @click="changevideo(item2)">
					<view class="flztoa">
						<text>{{item2.title}}</text>
						<image src="/static/zy/zyb3.png" style="width: 24px;height: 24px;" mode=""></image>
					</view>
					<view class="flztoa" style="margin-top: 4px;" v-if="item2.type == 1">
						<text class="ooddte">{{item2.video_title}}</text>
						<text class="ooddte">时长: {{item2.video_time}}</text>
					</view>
					<view class="flztoa" style="margin-top: 4px;" v-if="item2.type == 5"
						@click="goWxLive(item2.url,item2)">
						<text class="ooddte">{{item2.video_title}}</text>
						<text class="ooddte">点击进入直播间</text>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 200rpx;"></view>
		<view class="kcquuer" v-if="!is_pay">
			<!-- <view style="width: 100%;    width: 100%;text-align: center;line-height: 66rpx;color: #ff2424;"
				v-if="coupon">
				已使用优惠券 {{coupon.title}} 优惠 {{coupon.price}} 元
			</view> -->
			<view class="flztoa">
				<view class="kqyyefh" @click="pay(0)">
					<text>¥{{item.current_price}}/领取</text>
				</view>
				<!-- <navigator class="kqyyefha" v-if="is_vip == 0" url="../index/hykt">
					<text>会员/¥{{info.vip_price}}</text>
				</navigator> -->
				<!-- <view style="text-decoration:line-through;" class="kqyyefh" v-if="is_vip == 1">
					<text>普通/¥{{info.price}}</text>
				</view>
				<view class="kqyyefha" @click="pay(1)" v-if="is_vip == 1">
					<text>会员/¥{{info.vip_price}}</text>
				</view> -->
			</view>
		</view>

		<!-- <view class="kcquuer" v-if="!is_buy">
			<view style="width: 100%;    width: 100%;text-align: center;line-height: 66rpx;color: #ff2424;"
				v-if="coupon">已使用优惠券 {{coupon.title}} 优惠 {{coupon.price}} 元</view>
			<view class="flztoa">
				<view class="kqyyefh" @click="pay(0)" v-if="is_vip == 0">
					<text>普通/¥{{info.price}}</text>
				</view>
				<navigator class="kqyyefha" v-if="is_vip == 0" url="../index/hykt">
					<text>会员/¥{{info.vip_price}}</text>
				</navigator>
				<view style="text-decoration:line-through;" class="kqyyefh" v-if="is_vip == 1">
					<text>普通/¥{{info.price}}</text>
				</view>
				<view class="kqyyefha" @click="pay(1)" v-if="is_vip == 1">
					<text>会员/¥{{info.vip_price}}</text>
				</view>
			</view>
		</view> -->
	</view>
</template>
<style>
	page {
		background: #FAFAFA;
	}
</style>
<script>
	export default {
		data() {
			return {
				xqaxuye: false,
				info: {},
				videoinfo: {},
				catalog: [],
				is_pay: 0, //0需要购买  1不需要购买
				is_vip: '',
				videoShow: false,
				roomId: 0,
				customParams: {},
				seconds: 0,
				id: 0, // 课程id
				deviceType: 'wxapp',
				coupon: false,
				coupon_id:0,
				item:null
			}
		},
		onLoad(e) {
			// #ifdef APP-PLUS
			this.deviceType = 'wxh5'
			// #endif
			// #ifdef MP-WEIXIN
			this.deviceType = 'wxapp'
			// #endif
			let item = JSON.parse(e.item);
			this.id = item.id;
			// 课程章节列表
			this.getCourseChapter(item.id);
			this.item = item;
			this.is_pay = item.is_pay;
			this.is_vip = uni.getStorageSync('is_vip');

		},
		// 页面卸载 提交视频播放进度
		onUnload() {
			if (this.seconds != 0) {
				this.$post({
					data: {
						do: 'ChangeRecordHistory',
						data: {
							user_id: uni.getStorageSync('id'),
							course_id: this.id,
							catalog_id: this.videoinfo.catalog_id,
							chapter_id: this.videoinfo.id,
							chapter_time: this.formatSeconds(this.seconds)
						}
					}
				})
			}
		},
		methods: {
			getMyCoupon() {

			},
			timeupdate(e) {
				let time = e.detail.currentTime
				this.seconds = time
			},
			// 秒数处理为时分秒
			formatSeconds(value) {
				//  秒
				let second = parseInt(value)
				//  分
				let minute = 0
				//  小时
				let hour = 0
				//  天
				//  let day = 0
				//  如果秒数大于60，将秒数转换成整数
				if (second >= 60) {
					//  获取分钟，除以60取整数，得到整数分钟
					minute = parseInt(second / 60)
					//  获取秒数，秒数取佘，得到整数秒数
					second = parseInt(second % 60)
					//  如果分钟大于60，将分钟转换成小时
					if (minute > 60) {
						//  获取小时，获取分钟除以60，得到整数小时
						hour = parseInt(minute / 60)
						//  获取小时后取佘的分，获取分钟除以60取佘的分
			 		minute = parseInt(minute % 60)
						//  如果小时大于24，将小时转换成天
						//  if (hour > 23) {
						//    //  获取天数，获取小时除以24，得到整天数
						//    day = parseInt(hour / 24)
						//    //  获取天数后取余的小时，获取小时除以24取余的小时
						//    hour = parseInt(hour % 24)
						//  }
					}
				}
				let h = parseInt(hour) > 9 ? parseInt(hour) : '0' + parseInt(hour)
				let m = parseInt(minute) > 9 ? parseInt(minute) : '0' + parseInt(minute)
				let s = parseInt(second) > 9 ? parseInt(second) : '0' + parseInt(second)
				let result = '' + s;
				if (minute > 0) {
					result = '' + m + ':' + result
				}
				if (hour > 0) {
					result = '' + h + ':' + result
				}
				//  if (day > 0) {
				//    result = '' + parseInt(day) + '天' + result
			 //  }


				result = result.includes(':') ? result : '00:' + result
				console.log('result：', result)
				return result
			},
			goWxLive(id, item2) {
				// #ifdef MP-WEIXIN
				console.log(id);
				let roomId = [id];
				let customParams = encodeURIComponent(JSON.stringify({
					path: 'pages/index/index',
					pid: 1
				})) // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断）
				this.roomId = roomId;
				this.customParams = customParams;
				uni.navigateTo({
					url: 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + roomId +
						'&custom_params=' + customParams
				})
				// #endif
				// #ifdef APP-PLUS
				console.log(item2)
				uni.navigateTo({
					url: '/pages/index/watchLive?id=' + item2.id
				})
				// #endif
			},
			playVideo() {
				// if (!this.is_buy) {
				// 	uni.showModal({
				// 		title: '此课程未购买'
				// 	})
				// 	return
				// }
				this.videoShow = true
			},
			changevideo(info) {
				if (this.is_buy) {
					this.videoinfo = info
				} else {
					uni.showModal({
						title: '此课程未购买'
					})
				}
			},
			getCourseChapter() {
				let that = this;
				that.$request.getCourseChapter({course_id: that.id}).then(res => {
					console.log(res)
					if(res.code == 0){
						this.videoinfo = res.data[0];
					}else{
						wx.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					// that.labelList = res.data
				}).catch(err => {
					console.log(err)
				})
				
				return
				let user_id = uni.getStorageSync('id');
			// 	this.$post({
			// 		data: {
			// 			do: 'CourseInfo',
			// 			data: {
			// 				user_id: user_id,
			// 				id: id,
			// 				pw: '375'
			// 			}
			// 		}
			// 	}).then(res => {


			// 		let user_id = uni.getStorageSync('id')
			// 		this.$post({
			// 			data: {
			// 				do: 'GetMyCoupon',
			// 				data: {
			// 					user_id: user_id,
			// 				}
			// 			}
			// 		}).then(res1 => {
			// 			this.coupon = res1.data.coupon;
			// 			this.info = res.data;
			// 			console.log(this.info);
			// 			//有优惠券可以优惠
			// 			if(this.coupon){
			// 				this.info.origin_vip_price = this.info.vip_price;
			// 				this.info.origin_price = this.info.price;
							
			// 				this.info.vip_price = this.info.vip_price - this.coupon.price;
			// 				this.info.price = this.info.price - this.coupon.price;
						
			// 				if(this.info.vip_price <= 0){
			// 					this.info.vip_price = 0.01;
			// 				}
							
			// 				if(this.info.price <= 0){
			// 					this.info.price = 0.01;
			// 				}
			// 				this.coupon_id = this.coupon.id
			// 			}
			// 			this.catalog = res.data.catalog;
			// 			this.is_buy = res.data.is_buy;
			// 			if (res.data.is_buy) {
			// 				this.videoinfo = res.data.catalog[0].list[0];
			// 			} else {
			// 				this.videoinfo = '';
			// 				uni.showModal({
			// 					title: '此课程未购买'
			// 				})
			// 			}
			// 		})


			// 	})
			
			},
			pay(indexs) {
				let that = this;
				that.$request.receive({course_id: that.id}).then(res => {
					console.log(res)
					if(res.code == 0){
						if(that.data.item.current_price <= 0){
							wx.showToast({
								title: '领取成功',
							})
							that.getCourseChapter();
						}else{
							that.wechatpay(res.data);
						}
						
					}else{
						wx.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			wechatpay(pay) {
				console.log(pay)
				var that = this
				// #ifdef APP-PLUS
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo: pay.orderinfo,
					success() {
						uni.showToast({
							title: '支付成功'
						})
						that.getCourseChapter();
					},
					fail(res) {
						console.log(res)
						uni.showToast({
							title: '支付失败',
							icon: 'error'
						})
					}
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: pay.timeStamp,
					nonceStr: pay.nonceStr,
					package: pay.package,
					signType: 'MD5',
					paySign: pay.paySign,
					success() {
						uni.showToast({
							title: '支付成功'
						})
						that.getCourseChapter();
					},
					fail(res) {
						console.log(res)
						uni.showToast({
							title: '支付失败',
							icon: 'error'
						})
					}
				})
				// #endif

			}
		}
	}
</script>

<style lang="scss" scoped>
	.flztoa{
		justify-content: center;
	}
	.kandyyr {
		font-size: 14px;
		font-family: PingFang SC-常规体, PingFang SC;
		font-weight: normal;
		color: #333333;

		margin-top: 20px;
	}

	.ooddte {
		font-size: 12px;
		font-family: PingFang SC-常规体, PingFang SC;
		font-weight: normal;
		color: #999999;
		line-height: 17px;
	}
</style>