<template>
	<view class="detail" :style="{paddingBottom:paddingBottom}">
		<swiper @longpress="openBs()" :circular="true" class="swipers" @change="change" :current="current"
			:vertical="true" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="300">
			<swiper-item class="swipers-item" v-for="(item,index) in swiperList" :key="item.courseDetailsId">
				<view class="swipers-items" v-if="current == index">
					<!-- 视频 -->
					<video :show-fullscreen-btn="false" @controlstoggle="controlstoggles" object-fit="contain"
						v-if="current === index && item.videoUrl" :play-strategy="2" :show-loading="true"
						codec="software" :muted="false" :show-center-play-btn="true" :loop="true" @ended="ended"
						@timeupdate="timeupdate" @play="videoPlay('myVideo'+item.courseDetailsId, item.courseDetailsId)"
						:enable-progress-gesture="false" :poster="item.titleImg" :ref="'myVideo'+item.courseDetailsId"
						:id="'myVideo'+item.courseDetailsId" :src="item.videoUrl" :autoplay="item.autoPlay"
						class="swipers-items-video"></video>
					<image v-else @click="!item.videoUrl?openPay():''" :src="item.titleImg" class="swipers-items-imgsbg"
						mode="aspectFill">
					</image>
					<!-- 返回图标 -->
					<image v-if="showBack" src="../static/nvueIcon/backs.png" @click="goBack()"
						class="swipers-items-back" mode="">
					</image>
					<!-- 右边操作 -->
					<view class="swipers-items-right" :style="rightTop" v-if="showControls">
						<view class="swipers-items-right-item">
							<view class="swipers-items-right-item-img" @click.stop="dianzan(item)">
								<image v-if="item.isGood!=0" class="swipers-items-right-item-imgs"
									src="../static/nvueIcon/myLove_.png" mode=""></image>
								<image v-else class="swipers-items-right-item-imgs" src="../static/nvueIcon/myLove.png"
									mode=""></image>
							</view>
							<view class="swipers-items-right-item-txt">
								<text class="swipers-items-right-item-txts">
									{{item.goodNum}}
								</text>
							</view>
						</view>
						<view class="swipers-items-right-item" @click="share()">
							<view class="swipers-items-right-item-img">
								<image class="swipers-items-right-item-imgs" src="../../static/images/me/share.png"
									mode=""></image>
							</view>
							<view class="swipers-items-right-item-txt">
								<text class="swipers-items-right-item-txts">
									分享
								</text>
							</view>
						</view>
						<view class="swipers-items-right-item" v-if="isCollect">
							<view class="swipers-items-right-item-img" @click.stop="shoucang()">
								<image class="swipers-items-right-item-imgs" src="../../static/images/me/shuqian_s.png"
									mode=""></image>
							</view>
							<view class="swipers-items-right-item-txt">
								<text class="swipers-items-right-item-txts">
									已追
								</text>
							</view>
						</view>
						<view class="swipers-items-right-item" v-else>
							<view class="swipers-items-right-item-img" @click.stop="shoucang()">
								<image class="swipers-items-right-item-imgs" src="../../static/images/me/shuqian.png"
									mode=""></image>
							</view>
							<view class="swipers-items-right-item-txt">
								<text class="swipers-items-right-item-txts">
									追剧
								</text>
							</view>
						</view>
					</view>
					<!-- 底部视频信息 -->
					<view class="swipers-items-btom" v-if="showControls">
						<view class="swipers-items-btom-box">
							<!-- 标题 -->
							<view class="swipers-items-btom-box-title">
								<text class="swipers-items-btom-box-titles">
									{{item.courseDetailsName}}
								</text>
							</view>
							<!-- 介绍 -->
							<view v-if="item.content" class="swipers-items-btom-box-content">
								<text class="swipers-items-btom-box-contents">{{item.content}}</text>
							</view>
							<!-- 集数 -->
							<view @click="openShow()" class="swipers-items-btom-box-num">
								<text class="swipers-items-btom-box-nums">
									第{{item.num}}集（共{{meunList.length}}集）选集 >
								</text>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 选集弹窗 -->
		<uni-popup @change="changeXj" ref="popup" :safe-area="false">
			<view class="list">
				<view class="list-title">
					<view class="list-title-l">
						<text class="list-title-ls">
							{{title}}
						</text>
						<text class="list-title-lsn">共{{meunList.length}}集</text>
					</view>
					<view class="list-title-r" @click="closeList()">
						<image class="list-title-rs" src="../../static/images/me/closeIconss.png" mode=""></image>
					</view>
				</view>
				<view class="list-content">
					<scroll-view :scroll-into-view="scrollIntoViews" :show-scrollbar="true" scroll-y="true" class="
						">
						<view class="list-contentss">
							<view :id="item.viewInfo" @click="selectPlay(item,index)"
								:class="('video'+index) == scrollIntoView?'videoListCurr':''" class="list-content-item"
								v-for="(item,index) in meunList" :key="index">
								<text class="list-content-items">第{{index+1}}集</text>
								<image v-if="('video'+index) == scrollIntoView" class="list-box-item-playing"
									src="../../static/images/me/playIng.png" mode=""></image>
								<view v-if="!item.videoUrl" class="list-box-item-lock">
									<image class="list-box-item-lockI" src="../../static/images/me/lockWite.png"
										mode=""></image>
								</view>
							</view>
							<view style="height: 0;" class="list-content-item">

							</view>
						</view>
					</scroll-view>

				</view>
			</view>
		</uni-popup>
		<!-- 购买弹窗 -->
		<uni-popup ref="popupPya" :safe-area="false">
			<view class="pay">
				<view class="list-title">
					<view class="list-title-l">
						<text class="list-title-lss">
							当前视频 没有播放权限
						</text>
					</view>
					<view class="list-title-r" @click="closePay()">
						<image class="list-title-rs" src="../../static/images/me/closeIconss.png" mode=""></image>
					</view>
				</view>
				<text class=""
					style="font-size: 24rpx;color: #999;padding: 0 34rpx;margin: 20rpx 0; auto;text-align: left;width: 100%;">
					{{getRedEnvelopeTips}}
				</text>
				<view class="pay-content">
					<view class="pay-content-item" @click="payVideo(1)">
						<image class="pay-content-item-icon" src="../../static/images/me/rmIcon.png" mode=""></image>
						<text class="pay-content-items">
							{{countPrice*scale}}金币解锁整部视频
						</text>
					</view>
					<view v-if="isShowMoneyPay" class="pay-content-item" @click="payVideo(2)">
						<text class="pay-content-items">
							{{countPrice}}元解锁单集视频
						</text>
					</view>
					<!-- <view class="pay-content-item" @click="goNav('/pages/me/vip/index')" v-if="isVips == '是'">
						<image class="pay-content-item-icon" src="../../static/images/me/rmIcon.png" mode=""></image>
						<text class="pay-content-items">
							开通会员
						</text>
					</view> -->

				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupBs" :safe-area="true" background-color="#ffffff">
			<view class="bs">
				<text class="bs-title">倍速：</text>
				<view class="bs-se">
					<view class="bs-se-i" @click="BsChange(index)" :class="nowBs==index?'bsActive':''"
						v-for="(item,index) in subList" :key="index">
						<text class="bs-se-it">{{item.name}}</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 支付弹窗 -->
		<uni-popup ref="popuppay" :safe-area="false">
			<view class="popuppay">
				<!-- 标题 -->
				<view class="popuppay-title">
					<text class="popuppay-title-l">
						购买后继续观看
					</text>
					<image @click="closePopusPay()" class="popuppay-title-r"
						src="../../static/images/me/closeIconss.png" mode=""></image>
				</view>
				<!-- 余额 -->
				<!-- <view class="popuppay-money">
					<view class="popuppay-money-l">
						<text class="popuppay-money-l-ye">
							账号余额:
						</text>
						<text class="popuppay-money-l-jd">
							{{moneyNum}}金币
						</text>
						<text class="popuppay-money-l-mx" @click="goWallet('/me/wallet/wallet')">
							查看明细
						</text>
					</view>
					<view class="popuppay-money-r">
						<text class="popuppay-money-ye">
							解锁价格:
						</text>
						<text class="popuppay-money-jd">
							{{payPrice}}金币
						</text>
					</view>
				</view> -->
				<!-- 充值类型列表 -->
				<!-- <scroll-view scroll-y="true" class="payLists">
					<view class="popuppay-payList">
						<view class="payList-item" @click="wallCurr = index" :class="wallCurr == index?'activePrice':''"
							v-for="(item,index) in wallet" :key="index">
							<view class="payList-item-price">
								<text class="payList-item-prices">
									￥{{item.price}}
								</text>

							</view>
							<view class="payList-item-dou">
								<text class="payList-item-dous">
									{{item.money}}金币
								</text>
							</view>
							<view class="payList-item-duo" v-if="item.giveMoney>0">
								<text class="payList-item-duos">
									多送{{item.giveMoney}}金币
								</text>
							</view>
							<view class="payList-item-hui" v-if="item.remarks">
								<text class="payList-item-huis">
									{{item.remarks}}
								</text>
							</view>
						</view>
					</view>
				</scroll-view> -->
				<!-- 支付类型 -->
				<view class="payType">
					<view class="payType-item" @tap='selectWay(item)' v-for="(item,index) in openLists" :key="index">
						<view class="payType-item-l">
							<image class="payType-item-l-icon" :src="item.image" mode=""></image>
							<text class="payType-item-l-txt">
								{{item.text}}
							</text>

						</view>
						<view class="payType-item-r">
							<radio-group name="openWay" style="margin-left: 20upx;">
								<label class="tui-radio">
									<radio color="#ff7581" :checked="openWay === item.id ? true : false" />
								</label>
							</radio-group>
						</view>
					</view>
				</view>
				<!-- 温馨提示 -->
				<view v-if="moneyTips" class="tips">
					<view class="tips-title">
						<text class="tips-titles">温馨提示</text>
					</view>
					<view class="tips-contont">
						<text class="tips-contonts">
							{{moneyTips}}
						</text>
					</view>
				</view>
				<!-- 协议 -->
				<view class="illustrate">
					<checkbox-group @change="checked = !checked">
						<label>
							<checkbox color="#ff7581" style="transform:scale(0.7)" value="cb" :checked="checked" />
						</label>
					</checkbox-group>
					<text class="illustrate-txt" @click="checked = !checked">
						我已经阅读并同意
					</text>
					<text class="illustrate-txts" @click="goWallet('/me/setting/payXieYi')">
						《付费须知说明》
					</text>
				</view>
				<!-- 支付按钮 -->
				<view class="popuppay-btn" @click="pay()">
					<text class="popuppay-btn-txt">
						立即支付
					</text>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	import config from '../../common/config.js'
	import httpsRequest from '../../common/httpRequest.js'
	export default {
		data() {
			return {
				showBack: true,
				nowBs: 1, //当前倍速
				subList: [{
					name: '0.5x',
					num: 0.5
				}, {
					name: '1x',
					num: 1
				}, {
					name: '1.25x',
					num: 1.25
				}, {
					name: '1.5x',
					num: 1.5
				}],
				isStart: false, //是否开始生成二维码
				erweima: '',
				qrCodeData: '',
				haibaoImg: '',
				showImg: false,
				haibaoShow: false,
				title: '',
				imgSrc: '',
				current: 0,
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 0.5)'
				},
				show: false,
				videoList: [],
				videoContext: null, //记录当前视频的上下文
				isVIP: false, //是否是vip
				courseId: '',
				meunList: [], //菜单
				meunTop: 37, //返回图标距离顶部的距离
				num: 1, //当前播放的集数
				showPay: false, //购买视频的弹窗
				info: {}, //整部的信息
				courseDetailsId: '', //详情id
				scrollIntoView: '', //当前播放视频的位置
				scrollIntoViews: 'video0', //当前播放视频的位置
				isVips: '否', //是否显示会员
				zhengbu: '否',
				danbu: '否',
				rightTop: {
					top: '0rpx'
				},
				showControls: true, //是否显示控制中心
				zongPrice: 0, //整部价格
				countPrice: 0, //单集价格
				wallCurr: 0,
				wallet: [],
				productId: '', //默认苹果内购商品ID
				productIds: ['sixzuan', 'shierzuan'], //苹果内购商品
				openLists: [],
				openWay: 1,
				moneyTips: '',
				checked: false, //是否同意协议
				moneyNum: 0, //余额
				payPrice: 0, //解锁价格
				iosPayId: '',
				isCollect: false,
				playFlag: false,
				getRedEnvelopeTips: '',
				scale: 1,
				paddingBottom: '0',
				isShowMoneyPay: true,
			};
		},
		computed: {
			swiperList() {
				return this.videoList;
			}
		},
		// onHide() {
		// 	if (this.videoContext) {
		// 		this.videoContext.stop()
		// 		this.videoContext = null
		// 	}
		// },
		onUnload() {
			if (this.videoContext) {
				this.videoContext.stop()
				this.videoContext = null
			}
		},
		onShow() {
			console.log("走了iOS播放器。。。。。。。。。。。。。。。");
			//当应用从后台进入前台时自动播放
			if (this.videoContext) {
				this.videoContext.play()
			}
			this.isVips = uni.getStorageSync('isVips') ? uni.getStorageSync('isVips') : '否'
			let that = this
			uni.$on('back', (data) => {
				if (data.flag == true) {
					that.showPay = false
					that.getDataList(that.courseId, that.courseDetailsId, true);
					that.getMyLoveStatus()
					that.getMoneyList()
					that.getMyMoney()
				}
			})
			this.moneyTips = uni.getStorageSync('moneyTips')
			// #ifdef APP-PLUS
			if (plus.os.name.toLowerCase() === 'android') {
				this.openLists = [
					// {
					// 	image: '/static/images/pay/weixin.png',
					// 	text: '微信',
					// 	id: 2
					// }, 
					{
						image: '/static/images/pay/zhifubao.png',
						text: '支付宝',
						id: 1
					},
				];
				this.openWay = 1;
				let syPaySel = uni.getStorageSync('syPaySel')
				// if (syPaySel === '是') {
				// 	let openListsItem = {
				// 		image: '/static/images/pay/shouyi.png',
				// 		text: '收益余额',
				// 		id: 4
				// 	};
				// 	this.openLists.push(openListsItem)
				// }
			} else {
				let checkIosPay = uni.getStorageSync('checkIosPay');
				// if (checkIosPay === '是') {
				// 	this.openLists = [{
				// 		image: '/static/images/pay/weixin.png',
				// 		text: '苹果',
				// 		id: 3
				// 	}];
				// 	this.openWay = 3;
				// } else {
				this.openLists = [
					// {
					// 	image: '/static/images/pay/weixin.png',
					// 	text: '微信',
					// 	id: 2
					// }, 
					{
						image: '/static/images/pay/zhifubao.png',
						text: '支付宝',
						id: 1
					},
				];
				this.openWay = 1;
				let syPaySel = uni.getStorageSync('syPaySel')
				// if (syPaySel === '是') {
				// 	let openListsItem = {
				// 		image: '/static/images/pay/shouyi.png',
				// 		text: '收益余额',
				// 		id: 4
				// 	};
				// 	this.openLists.push(openListsItem)
				// }
				// }
			}

			// #endif
			this.$nextTick(() => {
				this.closePopusPay()
			})
			if (this.courseId) {
				this.getDataList(this.courseId, this.courseDetailsId);

			}
			httpsRequest.getT('app/course/getRedEnvelopeTips').then(res => {
				if (res.code == 0) {
					this.getRedEnvelopeTips = res.data
				}
			})
			this.getScale()

			const sysInfo = uni.getSystemInfoSync()
			console.log(sysInfo);
			const padB = sysInfo.safeAreaInsets.bottom;
			console.log('win height == ' + padB);
			if (padB && padB > 0) {
				this.paddingBottom = padB + 'px'
			} else {
				this.paddingBottom = '0'
			}

			console.log('this bottom padding = ' + this.paddingBottom);

			httpsRequest.getT("app/common/type/919", {}).then(res => {
				if (res.code == 0) {
					const sysInfo = uni.getSystemInfoSync();
					let isIos = sysInfo.platform == 'ios'
					this.isShowMoneyPay = !(res.data.value == '1' && isIos)
				}
			});
		},
		onLoad(e) {
			let that = this
			//是开启整部购买
			this.zhengbu = uni.getStorageSync('zhengbu') ? uni.getStorageSync('zhengbu') : '否'
			//是否开启单集购买
			this.danbu = uni.getStorageSync('danbu') ? uni.getStorageSync('danbu') : '否'
			//获取设备的高度
			uni.getSystemInfo({
				success(res) {
					//计算右侧操作拦的位置
					that.rightTop.top = res.screenHeight - (440 / 2) + 'rpx'
				},
				fail() {
					//如果获取屏幕的高度失败，那么位置默认设置为通用高度630rpx
					that.rightTop.top = '630rpx'
				}
			})
			// 记录跳转过来的视频总id跟单集id
			if (e.id) {
				this.courseId = e.id;
				if (e.courseDetailsId) {
					this.courseDetailsId = e.courseDetailsId;
				}
				this.getMyLoveStatus()
				this.getMoneyList()
				this.getMyMoney()
			}
		},
		methods: {
			/**
			 * 获取金币比例
			 */
			getScale() {
				httpsRequest.getT("app/common/type/914", {}).then(res => {
					if (res.code == 0) {
						this.scale = Number(res.data.value)
					}
				});
			},
			//播放时的回掉
			videoPlay(videoId, courseDetailsId) {
				this.courseDetailsId = courseDetailsId
				if (!this.playFlag) {
					this.playFlag = true
					httpsRequest.getT('app/course/viewCourse', {
						courseId: this.courseId,
						courseDetailsId: courseDetailsId,
						type: 'start'
					}).then(res => {
						console.log('播放开始')
					})
				}

			},
			//播放进度变化回掉
			timeupdate(e) {

				if (e.detail.currentTime > e.detail.duration * 0.9) {
					if (this.playFlag) {
						this.playFlag = false
						httpsRequest.getT('app/course/viewCourse', {
							courseId: this.courseId,
							courseDetailsId: this.courseDetailsId,
							type: 'end'
						}).then(res => {
							console.log('播放结束')
						})
					}
				}

			},
			//选集弹窗的回调
			changeXj(e) {
				if (e.show == false) {
					//关闭弹窗的时候重置scrollIntoViews，防止关闭后第二次点就不能自动滑动到当前集的位置
					this.scrollIntoViews = 'video0'
				}
			},
			//充值成功后关闭弹窗，并购买播放
			paySuccess() {
				//获取一下最新余额
				this.getMyMoney()
				//购买视频
				this.payOrder(this.ordersId, this.payMoney)

			},
			setPayment(name, order) {
				console.log('*-*-*')
				let that = this
				uni.requestPayment({
					provider: name,
					orderInfo: order, //微信、支付宝订单数据
					success: function(res) {
						console.log(res)
						uni.hideLoading();
						uni.showLoading({
							title: '支付成功'
						});
						//支付成功
						that.paySuccess()
					},
					fail: function(err) {
						uni.hideLoading();
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						})
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			isCheckPay(status, name, order) {
				if (status == 0) {
					this.setPayment(name, order);
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '支付信息有误',
						icon: 'none'
					});
				}
			},
			iphonepay() {
				let that = this
				plus.payment.getChannels((res) => {
					let channel = res.find(i => i.id === 'appleiap')
					that.iapChannel = channel ? channel : null
					that.requestOrder()
				})
			},
			requestOrder() {
				let that = this
				console.log(that.productIds)
				// ['xxxxx'] 是平台申请拿到的内购商品的id 
				that.iapChannel.requestOrder(that.productIds, function(event) {
					uni.hideLoading()
					console.log(event)
				}, function(erroemsg) {
					uni.hideLoading()
					uni.showToast({
						title: "获取支付通道失败：" + errormsg.message,
						icon: 'none'
					})
				})
			},
			async topay() {
				let that = this
				uni.showLoading({
					title: '充值中，请勿离开！',
					mask: true
				})
				let productId = that.wallet[that.wallCurr].productId ? that.wallet[that.wallCurr].productId : '';
				plus.payment.request(that.iapChannel, {
					productid: productId,
					optimize: true // 支付时设置 optimize: true  
				}, result => {
					that.getIosSaveMessage(JSON.stringify(result));
					// 支付成功回调
					// console.log("plus.payment.request-success--------------------",JSON.stringify(results));
					uni.showLoading({
						title: '查询结果中，请勿离开！',
						mask: true
					})

				}, e => {
					uni.hideLoading();
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
				});
			},

			async getIosSaveMessage(receipt) {
				let that = this;
				httpsRequest.postT('/app/ios/isoPayApp?receipt=' + receipt + '&ordersId=' + that.iosPayId).then(
					res => {
						uni.hideLoading();
						if (res.status == 0) {
							uni.showToast({
								title: '支付成功',
								duration: 2000,
							})
							//支付成功
							that.paySuccess()
						}
					});
			},
			// 充值
			pay() {
				if (this.checked == false) {
					uni.showToast({
						title: '请阅读并同意《付费须知说明》',
						icon: 'none'
					})
					return
				}
				let that = this
				uni.showLoading({
					title: '支付中...'
				})
				if (this.openWay == 2) {
					// 微信APP支付 根据订单id获取支付信息
					httpsRequest.postT("/app/wxPay/payMoney", {
						classify: 1,
						payClassifyId: this.wallet[this.wallCurr].payClassifyId,
					}).then(ret => {
						this.isCheckPay(ret.code, 'wxpay', JSON.stringify(ret.data));
					});
				} else if (this.openWay == 1) {
					let paytype = 'h5'
					// #ifdef APP
					paytype = 'app'
					// #endif
					// APP支付宝支付
					httpsRequest.getT("/app/wuyou/payOrder/" + this.ordersId + '?payType=' + paytype, {}).then(ret => {
						// plus.runtime.openURL(ret.data.h5Url)
						uni.navigateTo({
							url: '/pages/pays/pays?ordersId=' + this.ordersId + '&url=' + ret.data.h5Url
						});
						// this.isCheckPay(ret.code, 'wxpay', JSON.stringify(ret.data));
					});
				} else if (this.openWay == 3) {
					let userId = uni.getStorageSync('userId');
					let data = {
						payClassifyId: this.wallet[this.wallCurr].payClassifyId,
						userId: userId
					}
					httpsRequest.postT("/app/ios/insertPayMoneyOrders", data).then(res => {
						if (res.code === 0) {
							this.iosPayId = res.data.orderId;
							this.topay();
						} else {
							uni.showToast({
								icon: 'none',
								title: '支付失败!'
							});
						}
					});
				} else if (this.openWay == 4) {
					let userId = uni.getStorageSync('userId');
					let data = {
						// money: this.wallet[this.current].price
						payClassifyId: this.wallet[this.wallCurr].payClassifyId,
						userId: userId
					}
					httpsRequest.postT("/app/invite/inviteMoneyConvertUserMoney", data).then(res => {
						if (res.code === 0) {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '支付成功'
							})
							//支付成功
							that.paySuccess()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							});
						}
					});
				}

			},
			//获取余额
			getMyMoney() {
				if (uni.getStorageSync('token')) {
					httpsRequest.getT('/app/moneyDetails/selectUserMoney').then(res => {
						if (res.code == 0) {
							this.moneyNum = res.data.money
						}
					})
				}

			},
			goWallet(url) {
				uni.navigateTo({
					url: url
				})
			},
			//选择支付类型
			selectWay(item) {
				this.openWay = item.id;
			},
			findMinMaxPricesWithIndexes(array) {
				// 初始化最小和最大价格为无穷大和小于无穷大的值  
				// 同时初始化对应的索引为-1，表示还未找到  
				let minPrice = Infinity;
				let maxPrice = -Infinity;
				let minPriceIndex = -1;
				let maxPriceIndex = -1;

				// 遍历数组中的每个元素  
				for (let i = 0; i < array.length; i++) {
					const currentPrice = array[i].price;

					// 检查当前价格是否比已知的最小价格更小  
					if (currentPrice < minPrice) {
						minPrice = currentPrice;
						minPriceIndex = i;
					}

					// 检查当前价格是否比已知的最大价格更大  
					if (currentPrice > maxPrice) {
						maxPrice = currentPrice;
						maxPriceIndex = i;
					}
				}

				// 返回一个包含最小和最大价格及其索引的对象  
				return {
					minPrice: minPrice,
					minPriceIndex: minPriceIndex,
					maxPrice: maxPrice,
					maxPriceIndex: maxPriceIndex
				};
			},
			/**
			 * 获取充值列表
			 */
			getMoneyList() {
				httpsRequest.getT('/app/payClassify/selectPayClassifyList').then(res => {
					if (res.code == 0) {
						let priceObj = this.findMinMaxPricesWithIndexes(res.data)
						this.wallet = res.data
						this.wallet[priceObj.minPriceIndex].remarks = '特惠'
						this.wallet[priceObj.maxPriceIndex].remarks = '80%用户选择'
						this.productIds = [];
						let arr = []
						res.data.forEach(d => {
							if (d.productId) {
								this.productIds.push(d.productId);
								arr.push(d)
							}
						})
						if (uni.getSystemInfoSync().osName == 'ios') {
							this.wallet = arr
						}
						// #ifdef APP
						this.iphonepay()
						// #endif
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			//关闭支付弹窗
			closePopusPay() {
				this.$refs.popuppay.close()
			},
			//打开支付弹窗
			openPopusPay() {
				this.$refs.popuppay.open('bottom')
			},
			// 获取收藏状态
			getMyLoveStatus() {
				let data = {
					id: this.courseId,
					token: uni.getStorageSync('token')
				}
				httpsRequest.getT('/app/course/selectCourseDetailsById', data).then(res => {
					if (res.code == 0) {
						if (res.data && res.data.isCollect && res.data.isCollect > 0) {
							this.isCollect = true
						} else {
							this.isCollect = false
						}
					}
				})
			},
			//显示/隐藏适配控制器的回调
			controlstoggles(e) {
				this.showControls = e.detail.show
				this.showBack = this.showControls
				console.log(e.detail.show, '显示/隐藏控制栏')
			},
			//打开倍速弹框
			openBs() {
				this.$refs.popupBs.open('bottom')
			},
			//切换倍速
			BsChange(index) {
				this.nowBs = index
				this.videoContext.playbackRate(this.subList[index].num)
				this.$refs.popupBs.close()
				uni.showToast({
					title: '已切换' + this.subList[index].num + '倍播放',
					icon: 'none',
					duration: 2000
				})
			},
			ended() {
				if (this.current == 2) {
					this.current = 0
				} else {
					//拿出当前的courseDetailsId
					let courseDetailsId = this.videoList[this.current].courseDetailsId;
					//拿出当前播放视频的courseDetailsId对应meunList的下标
					let indexs = this.meunList.findIndex(item => item.courseDetailsId === courseDetailsId);
					if (indexs < (this.meunList.length - 1)) { //判断是否是最后一个，如果不是则继续翻下一页
						this.current += 1
					}
				}
			},
			//分享-复制app下载连接
			share() {
				let invitationCode = ''
				let qdCode = ''
				if (uni.getStorageSync('invitationCode')) {
					invitationCode = uni.getStorageSync('invitationCode')
				}
				if (uni.getStorageSync('qdCode')) {
					qdCode = uni.getStorageSync('qdCode')
				}
				let url = config.APIHOST2 + '/pages/login/registerApp?invitation=' + invitationCode + '&qdCode=' + qdCode
				uni.setClipboardData({
					data: url,
					success(res) {
						uni.showToast({
							title: '已复制链接'
						})
					}
				})
			},
			//去开通会员
			goNav(url) {
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: url
					})
				}

			},
			/**
			 * @param {Object} type 类型 
			 * 1:购买整部视频
			 * 2:购买单集视频
			 */
			payVideo(type) {
				if (uni.getStorageSync('token')) {
					this.submitPay(type)
				} else {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}
			},
			//使用金币购买
			submitPay(type) {
				let data = {
					courseId: this.courseId
				}

				data.courseDetailsId = this.videoList[this.current].courseDetailsId
				httpsRequest.getT('/app/order/insertCourseOrders', data).then(res => {
					if (res.code == 0) {
						this.ordersId = res.data.orders.ordersId //记录订单id
						this.payMoney = res.data.orders.payMoney //记录订单价格

						if (type == 1) { //金币
							this.payOrder(res.data.orders.ordersId, res.data.orders.payMoney)
						} else if (type == 2) { //支付宝
							this.closePay() //关闭购买选择弹窗
							this.payPrice = res.data.orders.payMoney //需要支付的价格
							this.openPopusPay() //显示充值弹窗
						}


						// this.payOrder(res.data.orders.ordersId, res.data.orders.payMoney)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			payOrder(orderId, payMoney) {
				let that = this
				httpsRequest.postT("/app/order/payOrders", {
					orderId: orderId,
				}).then(res => {
					if (res.code == 0) {
						uni.hideLoading()
						uni.showToast({
							title: '已成功解锁',
							icon: 'none'
						})
						this.closePopusPay()
						this.closePay()
						that.showPay = false
						that.showMoney = false
						that.noBuyVideoIndex = null

						setTimeout(() => {
							that.getDataList(that.courseId, that.videoList[that.current].courseDetailsId,
								true);
						}, 1000)

					} else { //支付失败（余额不足）
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						that.showPay = true
						that.showMoney = false
					}
				});
			},
			//打开购买弹窗
			openPay() {
				//获取总价跟单集价格
				this.zongPrice = this.info.price
				this.countPrice = this.videoList[this.current].price
				this.$refs.popupPya.open('bottom')
			},
			//关闭购买弹窗
			closePay() {
				this.$refs.popupPya.close()
			},
			//选择集数后在更新剩下的数据
			setVideoList(index) {
				//判断后续是否还有两条视频
				let lengths = this.meunList.length - (index + 1)
				//有最少两条
				if (lengths >= 2) {
					//直接拿两条赋值进去
					this.videoList = [...this.videoList, ...this.meunList.slice(index + 1, index + 3)]
				}
				//只剩一条数据
				if (lengths == 1) {
					//把剩下的一条给放进去
					this.videoList = [
						//选中的那条
						...this.videoList,
						//身下的一条
						this.meunList[this.meunList.length - 1],
						//最后一条则放总数组的第一条
						this.meunList[0]
					]
				}
				//选择的就是最后一条数据
				if (lengths == 0) {
					//后两条拿总数组的前两条就可以了
					this.videoList = [...this.videoList, ...this.meunList.slice(0, 2)]
				}
				//更新视图
				this.$forceUpdate()
			},
			//选择播放
			selectPlay(item, index, type) {
				// 根据选择的courseDetailsId拿到meunList列表中的相同数据的下标
				// const index = this.meunList.findIndex(menu => menu.courseDetailsId === item.courseDetailsId);
				// this.videoList = [this.meunList[index]]
				this.current = index
				if (this.videoList[this.current].videoUrl == '' && this.videoList[this.current].price <= 0 && !type) {
					this.getDataList(this.courseId, this.courseDetailsId, true, 'select')
					return;
				}
				//重新计算一下当前观看的是哪个视频
				this.comNumVideo()
				// 把选择的视频的自动播放设置为true
				this.videoList[this.current].autoPlay = true
				//让当前选择的视频播放
				this.startPlay(this.current)
				//更新视图
				this.$forceUpdate()
				//关闭选择弹窗
				this.closeList()
				//记录当前播放位置
				this.scrollIntoView = 'video' + index
				//插入历史记录
				this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current]
					.courseDetailsId)
				//等视图跟新完了，把之前剩下的数据补进去在$nextTick中处理
				// this.$nextTick(() => {
				// 	this.setVideoList(index)
				// })
			},
			//选集
			openShow() {
				this.comNumVideo()
				this.openList()
				this.$nextTick(() => {
					this.scrollIntoViews = this.scrollIntoView
				})

			},
			//打开选集弹窗
			openList() {
				this.$refs.popup.open('bottom')
			},
			//关闭选集弹窗
			closeList() {
				this.$refs.popup.close()
			},
			//收藏
			shoucang() {
				if (uni.getStorageSync('token')) {
					let data = {
						courseId: this.courseId,
						classify: 1,
						type: this.isCollect == false ? 1 : 0
					}
					httpsRequest.postJson('/app/courseCollect/insertCourseCollect', data).then(res => {
						if (res.code == 0) {
							this.getMyLoveStatus()
						}
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}

			},
			//点赞
			dianzan(item) {
				if (uni.getStorageSync('token')) {
					let data = {
						courseId: item.courseId,
						courseDetailsId: item.courseDetailsId,
						classify: 2,
						type: item.isGood == 0 ? 1 : 0
					};
					httpsRequest.postJson('/app/courseCollect/insertCourseCollect', data).then(res => {
						if (res.code == 0) {
							if (data.type == 1) {
								item.isGood = 1;
								item.goodNum += 1;
							} else {
								item.isGood = 0;
								item.goodNum -= 1;
							}
						}
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}

			},
			//swiper上下切换事件
			change(e) {
				//拿出当前的swiper索引
				let current = Number(e.detail.current);
				//获取当前播放的视频在菜单数组中的位置
				let scrollIndex = this.meunList.findIndex(ite => ite.courseDetailsId == this.videoList[current]
					.courseDetailsId);
				//记录当前播放位置
				this.scrollIntoView = 'video' + scrollIndex;
				//控制播放
				this.startPlay(current);
				//设置轮播图索引
				this.current = current;
				//插入历史记录
				this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current].courseDetailsId);
				// //拿出当前的swiper索引
				// let current = Number(e.detail.current);
				// // 根据courseDetailsId在meunList中找到这个数据的下标
				// let indexs = -1;
				// //考虑向上滑动的时候
				// if (current == 2 && this.current == 0) {
				// 	//向上滑到头的时候先拿第一条数据的courseDetailsId
				// 	let courseDetailsId = this.videoList[0].courseDetailsId;
				// 	indexs = this.meunList.findIndex(item => item.courseDetailsId === courseDetailsId);
				// 	if (indexs != -1) { //找到了，indexs就是对应下标
				// 		//先判断meunList数组剩下的元素是否够三条
				// 		const lengths = (this.meunList.slice(0, indexs)).length;
				// 		if (lengths >= 3) { //够三条
				// 			// 因为轮播图开启了首尾衔接,所以在滑动到尾部重新进入第一页之前替换全部数据为之前的三条
				// 			//因为slice(str,end)，包含str，不包含end，所以拿三条数据则-3
				// 			this.videoList = this.meunList.slice(indexs - 3, indexs);
				// 		} else { //不够三条
				// 			let arr = new Array(3);
				// 			switch (lengths) {
				// 				//只有一条
				// 				case 1:
				// 					//只有一条的时候需要给数组补两条凑够三条，把meunList数组的前两条拿出来补在后面
				// 					arr[2] = this.meunList[indexs - 1]; //把剩下的一条取出来放到要滑动的那一页
				// 					//因为剩下的数据不够了，则拿meunList末尾的两条数据补齐
				// 					//第二个用最后一条数据
				// 					arr[1] = this.meunList[this.meunList.length - 1];
				// 					//第一个用倒数第二条数据
				// 					arr[0] = this.meunList[this.meunList.length - 2];
				// 					//赋值
				// 					this.videoList = arr;
				// 					break;
				// 					//只有二条
				// 				case 2:
				// 					//还剩下两条数据的时候
				// 					//把剩下的倒数第一条取出来放到要滑动的那一页
				// 					arr[2] = this.meunList[indexs - 1];
				// 					//把剩下的最后一条放到第二个元素
				// 					arr[1] = this.meunList[indexs - 2];
				// 					//最后一个元素则由meunList的最后一条补齐
				// 					arr[0] = this.meunList[this.meunList.length - 1];
				// 					//最后赋值
				// 					this.videoList = arr;
				// 					break;
				// 				default:
				// 					//一条都没有的时候 [1,2,3,4,5,6]
				// 					//直接把meunList末尾的三条放入数组即可
				// 					this.videoList = this.meunList.slice(-3);
				// 					break;
				// 			}
				// 		}
				// 	}
				// }
				// //考虑向下滑动
				// if ((current == 0 && this.current == 2) || (current == 0 && this.current ==
				// 		0)) { //是否滑动到第一条，虽然刚进入页面current为0，但是首次不触发
				// 	//拿出当前的courseDetailsId
				// 	let courseDetailsId = this.videoList[2].courseDetailsId;
				// 	indexs = this.meunList.findIndex(item => item.courseDetailsId === courseDetailsId);
				// 	//记录当前数据在meunList中的下标
				// 	if (indexs != -1) { //找到了，indexs就是对应下标
				// 		//先判断meunList数组剩下的元素是否够三条
				// 		const lengths = (this.meunList.slice(indexs + 1, this.meunList.length)).length;
				// 		if (lengths >= 3) { //够三条
				// 			// 因为轮播图开启了首尾衔接,所以在滑动到尾部重新进入第一页之前替换全部数据为之后的三条
				// 			this.videoList = this.meunList.slice(indexs + 1, indexs + 4);
				// 		} else { //不够三条
				// 			let arr = new Array(3);
				// 			switch (lengths) {
				// 				//只有一条
				// 				case 1:
				// 					//只有一条的时候需要给数组补两条凑够三条，把meunList数组的前两条拿出来补在后面
				// 					arr[0] = this.meunList[indexs + 1];
				// 					arr[1] = this.meunList[0];
				// 					arr[2] = this.meunList[1];
				// 					this.videoList = arr;
				// 					break;
				// 				case 2:
				// 					//只有二条
				// 					arr[0] = this.meunList[indexs + 1];
				// 					arr[1] = this.meunList[indexs + 2];
				// 					arr[2] = this.meunList[0];
				// 					this.videoList = arr;
				// 					break;
				// 				default:
				// 					//刚好没有数据了 直接拿meunList的前三条数据
				// 					this.videoList = this.meunList.slice(0, 3);
				// 					break;
				// 			}
				// 		}
				// 	}
				// }

				// //获取当前播放的视频在菜单数组中的位置
				// let scrollIndex = this.meunList.findIndex(ite => ite.courseDetailsId == this.videoList[current]
				// 	.courseDetailsId);
				// //记录当前播放位置
				// this.scrollIntoView = 'video' + scrollIndex;
				// //控制播放
				// this.startPlay(current);
				// //设置轮播图索引
				// this.current = current;
				// //插入历史记录
				// this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current].courseDetailsId);
			},
			//控制播放
			startPlay(current) {
				if (this.videoContext) { //判断之前是否有视频的上下文
					this.videoContext.stop();
					this.videoContext = null;
				}
				let numIdCurr = this.videoList[current].courseDetailsId;
				if (this.videoList[current].videoUrl) { //已经购买可直接播放
					// 播放时记录当前播放的id
					this.videoContextId = 'myVideo' + numIdCurr;
					this.videoContext = uni.createVideoContext(this.videoContextId, this);
					this.$nextTick(() => {
						//播放当前的
						this.videoContext.play();

					})
				} else { //没有视频链接则表示没有权限，需要购买 弹出购买弹窗
					this.openPay()
				}
				this.$forceUpdate();
			},
			//返回
			goBack() {
				uni.navigateBack();
			},
			/**
			 * @param {Number} courseId 总id
			 * @param {Number} courseDetailsId 当前视频id
			 * @param {boolean} type 是购买后返回的还是直接进来的
			 */
			getDataList(courseId, courseDetailsId, type, t) {
				let data = {
					id: courseId,
					token: uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
				};
				httpsRequest.getT('/app/course/selectCourseDetailsById', data).then(res => {
					if (res.code == 0) {
						if (res.data.listsDetail) {
							this.info = res.data;
							this.title = this.info.title;
							let arr = JSON.parse(JSON.stringify(res.data.listsDetail));
							arr.map((item, index) => {
								item.num = index + 1;
								if (item.videoUrl) {
									item.autoPlay = true;
								} else {
									item.autoPlay = false;
								}
								item.viewInfo = 'video' + index;
							});
							//菜单数组
							this.meunList = arr;
							this.videoList = arr
							if (type == true) { //购买视频后返回的
								let courseDetailsId = this.videoList[this.current].courseDetailsId;
								this.meunList.some((item) => {
									if (item.courseDetailsId == courseDetailsId) {
										this.videoList[this.current].videoUrl = item.videoUrl;
										return true;
									}
								})
								this.videoList.map(item => {
									this.meunList.map(ite => {
										if (item.courseDetailsId == ite.courseDetailsId && item
											.courseDetailsId != courseDetailsId) {
											item.videoUrl = ite.videoUrl
										}
									})
								})
							} else { //直接跳转进来的
								let indexs = -1;
								if (courseDetailsId) { //从记录进来的
									this.meunList.map((item, index) => {
										if (item.courseDetailsId == courseDetailsId) {
											indexs = index;
										}
									})
									if (indexs != -1) { //找到了
										this.current = indexs
										// if (Number(indexs + 1) === this.meunList.length) { //最后一条
										// 	if (this.meunList.length == 1) { //只有一条
										// 		this.videoList = this.meunList.slice(0, 3)
										// 	} else if (this.meunList.length == 2) {
										// 		this.videoList = this.meunList.slice(0, 3)
										// 	} else {
										// 		this.videoList = [
										// 			this.meunList[this.meunList.length - 1],
										// 			this.meunList[0],
										// 			this.meunList[1],
										// 		]
										// 	}
										// } else if (Number(indexs) === Number(this.meunList.length - 1)) { //倒数第二条
										// 	if (this.meunList.length == 1) { //只有一条
										// 		this.videoList = this.meunList.slice(0, 3)
										// 	} else if (this.meunList.length == 2) { //有两条的时候
										// 		this.videoList = [
										// 			this.meunList[1],
										// 			this.meunList[0],
										// 		]
										// 	} else {
										// 		this.videoList = [
										// 			this.meunList[this.meunList.length - 2],
										// 			this.meunList[this.meunList.length - 1],
										// 			this.meunList[0],
										// 		]
										// 	}
										// } else {
										// 	//如果不是最后一条，也不是倒数第二条，则从找到的位置开始往后拿三条数据放入数组
										// 	this.videoList = this.meunList.slice(indexs, indexs + 3);
										// }
									} else {
										//没找到直接拿前三条数据即可
										// this.videoList = this.meunList.slice(0, 3);
									}
								} else { //新的视频
									// //视频数组//直接拿前三条
									// this.videoList = this.meunList.slice(0, 3);
									indexs = 0
								}
								//重新计算当前在播放哪个视频
								this.comNumVideo();
								if (indexs != -1 && this.meunList.length > 0) {
									this.$nextTick(() => {
										this.scrollIntoView = 'video' + indexs;
									})

								}
							}
							//判断第一个是否可以播放
							if (this.videoList[this.current].autoPlay) {
								let numIdCurr = this.videoList[this.current].courseDetailsId;
								this.videoContextId = 'myVideo' + numIdCurr;

								this.$nextTick(() => {
									this.videoContext = uni.createVideoContext(this.videoContextId, this);
									this.videoContext.play();
								})

							} else { //不能播放则需要购买
								this.openPay()
							}
							if (t == 'select') {
								this.selectPlay(this.videoList[this.current], this.current, true)
							}
							this.$forceUpdate();
							//插入历史记录
							this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current]
								.courseDetailsId);
						}
					} else {
						uni.showToast({
							title: '加载失败',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack();
						}, 1000)
					}
				})
			},
			//计算正在观看哪个视频
			comNumVideo() {
				let courseDetailsId = this.videoList[this.current].courseDetailsId;
				this.meunList.map((item, index) => {
					if (item.courseDetailsId == courseDetailsId) { //找到了
						this.num = item.num;
					}
				})
			},
			//插入观看记录
			setHistor(courseId, courseDetailsId) {
				if (uni.getStorageSync('token')) {
					let data = {
						courseId: courseId,
						courseDetailsId: courseDetailsId,
						classify: 3,
						type: 1
					};
					httpsRequest.postJson('/app/courseCollect/insertCourseCollect', data).then(res => {})
				}

			},
		}
	}
</script>

<style>
	.popuppay {
		width: 750rpx;
		background-color: #ffffff;
		border-radius: 32rpx 32rpx 0 0;
		padding: 30rpx;
	}

	.popuppay-title {
		width: 690rpx;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.popuppay-title-l {
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
	}

	.popuppay-title-r {
		width: 26rpx;
		height: 26rpx;
	}

	.popuppay-money {
		width: 690rpx;
		margin-top: 30rpx;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.popuppay-money-l {
		flex-direction: row;
		align-items: center;
	}

	.popuppay-money-r {
		flex-direction: row;
		align-items: center;
	}

	.popuppay-money-l-ye {
		color: #353535;
		font-size: 26rpx;
	}

	.popuppay-money-l-jd {
		color: #353535;
		font-size: 26rpx;
		font-weight: bold;
	}

	.popuppay-money-l-mx {
		font-size: 26rpx;
		color: #FF1930;
		margin-left: 10rpx;
	}

	.popuppay-money {
		flex-direction: row;
		align-items: center;
	}

	.popuppay-money-ye {
		color: #353535;
		font-size: 26rpx;
	}

	.popuppay-money-jd {
		color: #ff7581;
		font-size: 26rpx;
	}

	.payLists {
		width: 690rpx;
		height: 400rpx;
		padding-top: 30rpx;
	}

	.popuppay-payList {
		width: 690rpx;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.payList-item {
		width: 330rpx;
		height: 194rpx;
		background: #F5F7FF;
		border-radius: 24rpx;
		margin-bottom: 20rpx;
		position: relative;
		justify-content: center;
	}

	.payList-item-price {
		width: 330rpx;
	}

	.payList-item-prices {
		text-align: center;
		color: #191919;
		font-size: 40rpx;
		font-weight: bold;
	}

	.payList-item-dou {
		width: 330rpx;
	}

	.payList-item-dous {
		text-align: center;
		color: #666666;
		font-size: 26rpx;
	}

	.payList-item-duo {
		width: 330rpx;
	}

	.payList-item-duos {
		text-align: center;
		color: #FF1930;
		font-size: 28rpx;
	}

	.payList-item-hui {
		position: absolute;
		top: -10rpx;
		left: 0;
		background-color: #F6495A;
		border-radius: 16rpx 16rpx 16rpx 0rpx;
		padding: 4rpx 10rpx;
	}

	.payList-item-huis {
		color: #ffffff;
		font-size: 20rpx;
	}

	.activePrice {
		background: #F7D98D !important;

	}

	.activePrice .payList-item-price .payList-item-dou {
		color: #744A0A !important;
	}

	.payType {
		width: 690rpx;

	}

	.payType-item {
		width: 690rpx;
		margin-top: 30rpx;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.payType-item-l {
		flex-direction: row;
		align-items: center;
	}

	.payType-item-l-icon {
		width: 56rpx;
		height: 56rpx;
		margin-right: 20rpx;
	}

	.payType-item-l-txt {
		font-size: 28rpx;
	}

	.tips {
		width: 690rpx;
		margin-top: 20rpx;
	}

	.tips-title {
		width: 690rpx;
	}

	.tips-titles {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}

	.tips-contont {
		width: 686rpx;
	}

	.tips-contonts {
		font-size: 26rpx;
		color: gray;
		margin-top: 10rpx;
	}

	.illustrate {
		width: 690rpx;
		flex-direction: row;
		align-items: center;
		margin-top: 20rpx;
	}

	.illustrate-txt {
		color: #303133;
		font-size: 28rpx;
	}

	.illustrate-txts {
		color: #ff7581;
		font-size: 28rpx;
	}

	.popuppay-btn {
		width: 690rpx;
		height: 98rpx;
		border-radius: 50rpx;
		background-color: #ff7581;
		margin-top: 20rpx;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.popuppay-btn-txt {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: bold;
	}

	.bs {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;

	}

	.bs-title {
		font-size: 24rpx;
		font-weight: bold;
	}

	.bs-se {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #eeeeef;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.bs-se-it {
		font-size: 24rpx;
		width: 100rpx;
		padding: 16rpx 0;
		text-align: center;
	}

	.bsActive {
		background-color: #ffffff;
		border-radius: 6rpx;
	}

	.detail {
		width: 750rpx;
		flex: 1;
		background-color: #000;
	}

	.swipers {
		width: 750rpx;
		flex: 1;
	}

	.swipers-item {
		width: 750rpx;
		flex: 1;
	}

	.swipers-items {
		width: 750rpx;
		flex: 1;
		position: relative;
		background-color: #000;
	}

	.swipers-items-video {
		width: 750rpx;
		flex: 1;
	}

	.swipers-items-imgsbg {
		width: 750rpx;
		flex: 1;
	}

	.swipers-items-back {
		position: absolute;
		left: 40rpx;
		top: 120rpx;
		width: 60rpx;
		height: 60rpx;
		z-index: 999;
	}

	.swipers-items-right {
		position: absolute;
		width: 60rpx;
		top: 100rpx;
		right: 20rpx;
	}

	.swipers-items-right-item {
		width: 60rpx;
		margin-bottom: 40rpx;
	}

	.swipers-items-right-item-img {
		width: 60rpx;
		height: 60rpx;
	}

	.swipers-items-right-item-imgs {
		width: 60rpx;
		height: 60rpx;
	}

	.swipers-items-right-item-txt {
		width: 60rpx;
	}

	.swipers-items-right-item-txts {
		width: 60rpx;
		color: #ffffff;
		font-size: 24rpx;
		text-align: center;
	}

	.swipers-items-btom {
		width: 750rpx;
		position: absolute;
		bottom: 100rpx;
		align-items: center;
	}

	.swipers-items-btom-box {
		width: 710rpx;
	}

	.swipers-items-btom-box-title {
		width: 710rpx;
	}

	.swipers-items-btom-box-titles {
		width: 710rpx;
		color: #ffffff;
		font-size: 30rpx;
	}

	.swipers-items-btom-box-content {
		width: 710rpx;
		margin-top: 10rpx;
	}

	.swipers-items-btom-box-contents {
		width: 710rpx;
		color: #ffffff;
		font-size: 28rpx;
	}

	.swipers-items-btom-box-num {
		width: 710rpx;
		margin-top: 20rpx;
	}

	.swipers-items-btom-box-nums {
		color: #ffffff;
		font-size: 30rpx;
	}

	/* 选集弹窗 */
	.list {
		width: 750rpx;
		align-items: center;
		border-radius: 32rpx 32rpx 0 0;
		background-color: #ffffff;
		/* background-color: #202020; */
	}

	.list-title {
		width: 710rpx;
		margin-top: 30rpx;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.list-title-l {
		flex-direction: row;
		align-items: center;
	}

	.list-title-lIcon {
		width: 40rpx;
		height: 40rpx;
	}

	.list-title-ls {
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
	}

	.list-title-lsn {
		color: #999999;
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.list-title-r {
		width: 30rpx;
		height: 30rpx;
	}

	.list-title-rs {
		width: 26rpx;
		height: 26rpx;
	}

	.list-content {
		width: 710rpx;
		height: 600rpx;
		margin-bottom: 40rpx;
		margin-top: 20rpx;
	}

	.list-contents {
		width: 710rpx;
		height: 600rpx;
	}

	.list-contentss {
		width: 710rpx;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.list-content-item {
		width: 205rpx;
		height: 88rpx;
		margin-bottom: 20rpx;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #F5F7FF;
		border-radius: 12rpx;
		position: relative;
	}

	.list-content-items {
		color: #333333;
		font-size: 26rpx;
	}

	.list-box-item-playing {
		position: absolute;
		width: 32rpx;
		height: 24rpx;
		bottom: 10rpx;
		right: 15rpx;
	}

	.videoListCurr {
		background-color: #ff7581 !important;
		color: #ffffff !important;
	}

	.videoListCurr>.list-content-items {
		color: #ffffff !important;
	}

	.list-box-item-lock {
		width: 38rpx;
		height: 34rpx;
		border-radius: 0rpx 12rpx 0rpx 12rpx;
		background-color: #CCCCCC;
		position: absolute;
		top: 0;
		right: 0;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.list-box-item-lockI {
		width: 18rpx;
		height: 22rpx;
	}



	.pay {
		width: 750rpx;
		align-items: center;
		border-radius: 32rpx 32rpx 0 0;
		background-color: #ffffff;
	}

	.list-title-lss {
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
	}

	.pay-content {
		width: 710rpx;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.pay-content-item {
		width: 710rpx;
		height: 92rpx;
		border-radius: 20rpx;
		background-color: #F2F2F2;
		margin-bottom: 40rpx;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.pay-content-item-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.pay-content-items {
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
	}
</style>