视频优化

pages/video/index.nvue

@@ -64,7 +64,7 @@
 			</block>
 		</swiper>
 		<uni-popup type="bottom" ref="select" style="z-index: 100;" :mask-click="true">
-			<view v-if="fenji==1" class="pop-my">
+			<view v-if="fenji==1" class="pop-my" style=" border-top-left-radius: 10px; border-top-right-radius: 10px;">
 				<view class="ju-top">
 					<view style="display: flex; flex-direction: column; ">
 						<view style="display: flex; flex-direction: column;">
@@ -110,7 +110,7 @@
 				</scroll-view>
 			</view>
 			<view v-if="fenji==2"
-				:style="'width: '+ windowWidth +'px;height:500px;  background-color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
+				:style="'width: '+ windowWidth +'px;height:70vh;  background-color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
 				<view class="charge-wrapper">
 					<view class="top">
 						<text class="charge-title">充值购买后可继续观看{{topTitle}} </text>
@@ -119,38 +119,55 @@
 							<text class="ji">本集:</text>
 							<text class="bi">{{videoInfo.charge_coin}}k币</text>
 						</view>
-					</view>
-					<view class="ft14" style="display: flex;flex-direction: row;justify-content: flex-start;padding: 0 20px;">账户余额<text class="ft14" style="color: #FF9800;">{{user_info.total_coin}}</text>K币</view>
-					<scroll-view class="scroll-charge" :scroll-y="true" :scroll-top="scrollTop">
-					<view class="pay-box">
-						<block  v-for="(item,key) in payOptions" :key="key">
-							<view  v-if="item.type =='COIN'" @click="selectPayItem(item)" :class="item.id == pay_select_id ?'pay-select' :'' " class="box pay-box-items" >
-								<view style="height: 20px;align-self: flex-end;"><text class="ft12 top-lab" v-if="item.tip_text">{{item.tip_text}}</text></view>
-								<text class="ft18 pay-box-items-txt" style="color: #FF9800;">{{item.price}}元</text>
-								<view class="ft14 pay-box-items-txt" style="flex-direction: row;">{{item.price_text}} <text class="ft14" style="color: #FF9800;">+{{item.given}}K币</text> </view>
-								<view class="ft14 pay-box-items-txt" style="flex-direction: row;justify-content: space-between;" :class=" item.id == pay_select_id ?'select-text' :'given-txt'">{{item.given_amount}} <text v-if="item.id == pay_select_id" class="ft14">&#10003;️</text></view>
-							</view>
-							<view  v-else @click="selectPayItem(item)" :class="item.id == pay_select_id ?'pay-select' :'' " class="box pay-box-items" >
-								<view style="height: 20px;align-self: flex-end;"><text class="ft12 top-lab" v-if="item.tip_text">{{item.tip_text}}</text></view>
-								<view class="vip-center">
-									<view class="">
-										<text class="ft18 pay-box-items-txt" style="color: #FF9800;">{{item.price}}元</text>
-										<view class="ft14 pay-box-items-txt">{{item.price_text}}</text></view>
-									</view>
-									<image class="vip-level-icon" src="/static/icon/vip.png"></image> 
-								</view>
-								<view class="ft14 pay-box-items-txt" style="flex-direction: row;justify-content: space-between;" :class=" item.id == pay_select_id ?'select-text' :'given-txt'">{{item.given_amount}} <text v-if="item.id == pay_select_id" class="ft14">&#10003;️</text></view>
-							</view>
-						</block>
-					</view>
-					<view class="ft14" style="margin: 10px 0; padding: 0 20px;">付费须知</view>
-					<view class="ft14" style="padding: 0 20px;" >
-						<text class="ft12">1、虚拟商品，一经购买不得退换</text>
-						<text class="ft12">2、充值后K币可能有延迟，1小时未到账请在“我的”页面联系客服</text>
-						<text class="ft12">3、未满18岁的未成年需要在监护人陪同下购买并观看短剧剧</text>
-						<text class="ft12">4、购买成功后，“K币”仅在本小程序中使用</text>
-						<text class="ft12">5、购买成功后可在”我的”页面订单中心进行查看</text>
-					</view>
+					</view>
+					<view class="ft14"
+						style="display: flex;flex-direction: row;justify-content: flex-start;padding: 0 20px;">账户余额<text
+							class="ft14" style="color: #FF9800;">{{user_info.total_coin}}</text>K币</view>
+					<scroll-view class="scroll-charge" :scroll-y="true" :scroll-top="scrollTop">
+						<view class="pay-box">
+							<block v-for="(item,key) in payOptions" :key="key">
+								<view v-if="item.type =='COIN'" @click="selectPayItem(item)"
+									:class="item.id == pay_select_id ?'pay-select' :'' " class="box pay-box-items">
+									<view style="height: 20px;align-self: flex-end;"><text class="ft12 top-lab"
+											v-if="item.tip_text">{{item.tip_text}}</text></view>
+									<text class="ft18 pay-box-items-txt" style="color: #FF9800;">{{item.price}}元</text>
+									<view class="ft14 pay-box-items-txt" style="flex-direction: row;">
+										{{item.price_text}} <text class="ft14"
+											style="color: #FF9800;">+{{item.given}}K币</text> </view>
+									<view class="ft14 pay-box-items-txt"
+										style="flex-direction: row;justify-content: space-between;"
+										:class=" item.id == pay_select_id ?'select-text' :'given-txt'">
+										{{item.given_amount}} <text v-if="item.id == pay_select_id"
+											class="ft14">&#10003;️</text></view>
+								</view>
+								<view v-else @click="selectPayItem(item)"
+									:class="item.id == pay_select_id ?'pay-select' :'' " class="box pay-box-items">
+									<view style="height: 20px;align-self: flex-end;"><text class="ft12 top-lab"
+											v-if="item.tip_text">{{item.tip_text}}</text></view>
+									<view class="vip-center">
+										<view class="">
+											<text class="ft18 pay-box-items-txt"
+												style="color: #FF9800;">{{item.price}}元</text>
+											<view class="ft14 pay-box-items-txt">{{item.price_text}}</text></view>
+										</view>
+										<image class="vip-level-icon" src="/static/icon/vip.png"></image>
+									</view>
+									<view class="ft14 pay-box-items-txt"
+										style="flex-direction: row;justify-content: space-between;"
+										:class=" item.id == pay_select_id ?'select-text' :'given-txt'">
+										{{item.given_amount}} <text v-if="item.id == pay_select_id"
+											class="ft14">&#10003;️</text></view>
+								</view>
+							</block>
+						</view>
+						<view class="ft14" style="margin: 10px 0; padding: 0 20px;">付费须知</view>
+						<view class="ft14" style="padding: 0 20px;">
+							<text class="ft12">1、虚拟商品，一经购买不得退换</text>
+							<text class="ft12">2、充值后K币可能有延迟，1小时未到账请在“我的”页面联系客服</text>
+							<text class="ft12">3、未满18岁的未成年需要在监护人陪同下购买并观看短剧剧</text>
+							<text class="ft12">4、购买成功后，“K币”仅在本小程序中使用</text>
+							<text class="ft12">5、购买成功后可在”我的”页面订单中心进行查看</text>
+						</view>
 					</scroll-view>
 				</view>
 			</view>
@@ -210,8 +227,8 @@
 					strShareImageUrl: ""
 				},
 				isShow: true,
-				fenji: 2,
-				pay_select_id:0,
+				fenji: 2,
+				pay_select_id: 0,
 				controls: true,
 				windowWidth: 0,
 				windowHeight: 0,
@@ -420,45 +437,46 @@
 			},
 			async getPayInfo(originIndex) {
 				this.user_info = await getUserInfo();
-				this.payOptions = await getOptions();
-				this.payOptions.forEach((item, index) => {
-					if (item.is_default == 1) {
-						this.pay_select_id = item.id;
-					}
+				this.payOptions = await getOptions();
+				this.payOptions.forEach((item, index) => {
+					if (item.is_default == 1) {
+						this.pay_select_id = item.id;
+					}
 				})
 				this.payVideoInfo = {
 					video_id: this.video_id,
 					video_series_sequence: originIndex
-				};
-				
-
-			},async selectPayItem(item){
-				this.pay_select_id = item.id;
-				let params  = {
-					video_id: this.payVideoInfo.video_id,
-					video_series_sequence: this.payVideoInfo,
-					pay_proudct_id :item.id
-				}
-				let res = await getPayInfo(params);
-				if(res){
-					uni.requestPayment({
-					    "provider": "wxpay", 
-					    "orderInfo":res,
-					    success(res) {
-							uni.showToast({
-								title: '支付成功',
-								duration: 1000,
-								icon: 'none'
-							});
-							console.log('success:' + JSON.stringify(res));
-						},
-					    fail(e) {
-							return false;
-							console.log('success:' + JSON.stringify(e));
-						}
-					})
-				}
-				
+				};
+
+
+			},
+			async selectPayItem(item) {
+				this.pay_select_id = item.id;
+				let params = {
+					video_id: this.payVideoInfo.video_id,
+					video_series_sequence: this.payVideoInfo,
+					pay_proudct_id: item.id
+				}
+				let res = await getPayInfo(params);
+				if (res) {
+					uni.requestPayment({
+						"provider": "wxpay",
+						"orderInfo": res,
+						success(res) {
+							uni.showToast({
+								title: '支付成功',
+								duration: 1000,
+								icon: 'none'
+							});
+							console.log('success:' + JSON.stringify(res));
+						},
+						fail(e) {
+							return false;
+							console.log('success:' + JSON.stringify(e));
+						}
+					})
+				}
+
 			},
 			playTest(item) {
 				console.log(item)
@@ -563,13 +581,13 @@
 						console.log(this.currentVideoInfo, 'res.code == 500101res.code == 500101')
 						this.currentVideoInfo.video_url = ""
 						this.isShow = false
-						this.isqp = true
-						this.videoContext.stop()
+						this.isqp = false
 						this.fenji = 2
 						this.getPayInfo(originIndex);
 						this.$refs.select.open('bottom');
 						// this.currentVideoInfo = {}
 					} else {
+						this.isqp = false
 						this.currentVideoInfo.video_url = ""
 						this.isShow = false
 					}
@@ -594,280 +612,290 @@
 		},
 	};
 </script>
-
-<style lang="scss" scoped>
-.vip-center{
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: center;
-	}
-	.vip-level-icon{
-		margin-right: 10rpx;
-		width: 80px;
-		height: 30px;
-	}
-	.pay-box {
-		background-color: #fff;
-		display: flex;
-		justify-content: space-between;
-		flex-direction: row;
-		padding: 0 20px;
-		flex-wrap: wrap;
-	}
-	.top-lab{
-		width: 40px;
-		text-align: center;
-		background-color:  #ff5722;
-		color: #fff;
-		float: right;
-		border-top: none;
-		border-radius: 10px;
-	}
-	.pay-box-items {
-		margin-top: 10px;
-		width: 48%;
-		flex-direction: column;
-		border-radius:10px;
-		line-height: 25px;
-		overflow: hidden;
-	}
-	.pay-box-items-txt{
-		padding: 1rpx 13px;
-	}
-	.pay-box-items view text {
-		line-height: 25px;
-	}
-	.pay-select{
-		border: solid 1px #ff5722;
-	}
-	.select-text{
-		background-color:  #ff5722;
-		color: #fff;
-		height: 30px;
-		border-radius: 0rpx  0rpx 10rpx 10rpx;
-	}
-	.given-txt{
-		height: 30px;
-		border-top: solid 1rpx #9e9e9e1f;
-	}
-	.content {
-		background: #000000;
-	}
-
-	.userInfo {
-		position: absolute;
-		z-index: 99;
-		bottom: 30%;
-		right: 10px;
-		width: 100rpx;
-		text-align: center;
-		flex-direction: column;
-
-	}
-
-	.contentcd {
-		background-color: rgba(255, 255, 255, .3);
-		width: 720rpx;
-		z-index: 99;
-		position: absolute;
-		bottom: 70rpx;
-		left: 50%;
-		transform: translateX(-50%);
-		padding: 15rpx;
-		border-radius: 8px;
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-start;
-		align-items: center;
-		color: #ffffff;
-		margin: 0 auto;
-	}
-
-	.userName {
-		color: #fff;
-		font-size: 30rpx;
-		color: #ffffff;
-		margin: 0 6rpx;
-	}
-
-	.tsvideo {
-		animation: showDivAni 2s 1;
-	}
-
-	@keyframes showDivAni {
-		0% {
-			opacity: 0;
-		}
-
-		100% {
-			opacity: 1;
-		}
-	}
-</style>
-
-<style lang="scss" scoped>
-	.charge-wrapper {
-		margin-top: 15px;
-		width: 100%;
-
-		.top {
-			width: 100%;
-			display: flex;
-			align-items: center;
-
-			.charge-title {
-				font-size: 18px;
-				font-weight: bold;
-			}
-
-			.charge-info {
-				font-size: 15px;
-				color: #868686;
-				margin: 8px 0;
-			}
-
-			.charge-coin {
-				display: flex;
-				flex-direction: row;
-
-				.ji {
-					font-size: 18px;
-				}
-
-				.bi {
-					font-size: 18px;
-					color: $accent-color;
-				}
-			}
-		}
-	}
-
-	.down {
-		display: flex;
-		flex-direction: row;
-		width: 60px;
-		height: 30px;
-		margin-top: 5px;
-		position: absolute;
-		right: 0px;
-		top: 50%;
-		transform: translateY(-50%);
-
-		.down-text {
-			font-size: 16px;
-			color: #000;
-		}
-
-		.down-img {
-			width: 35rpx;
-			height: 35rpx;
-			object-fit: contain;
-		}
-	}
-
-	.ju-top {
-
-		// background-color: ;
-		.ju-top-title {
-			font-size: 16px;
-			font-weight: bold;
-			color: #000;
-			margin-top: 9px;
-			height: 22px;
-			margin-left: 20px;
-			// width: '+ (windowWidth*0.6) +' px;
-			overflow: hidden;
-		}
-
-		.ju-top-update {
-			font-size: 12px;
-			color: #000;
-			margin-top: 9px;
-			height: 22px;
-			margin-left: 20px;
-		}
-	}
-
-	.pop-my {
-		background-color: #FFFFFF;
-	}
-
-	.scroll-my {
-		height: fit-content;
-	}
-
-	.scroll-charge {
-		height: 55vh;
-	}
-
-	.ju-wrapper {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		align-items: center;
-		justify-content: start;
-		width: 100%;
-		height: 100%;
-		background-color: #FFFFFF;
-		// margin: 6rpx;
-
-		.ju-content.active {
-			background-color: #ff7f02;
-		}
-
-		.ju-content {
-			flex-grow: 1;
-			position: relative;
-			border-radius: 12rpx;
-			background-color: #f6f6f6;
-			width: 31%;
-			height: 25rpx;
-			align-items: center;
-			justify-content: center;
-			padding: 45rpx 68rpx;
-			margin: 6rpx;
-
-			.lock-wrapper,
-			.lock-wrapper-no {
-				position: absolute;
-				width: 100%;
-				height: 100%;
-				border-radius: 12rpx;
-				background-color: rgba(0, 0, 0, .3);
-
-				.lock-img {
-					position: absolute;
-					left: 3rpx;
-					top: 50%;
-					transform: translateY(-50%);
-					width: 50rpx;
-					height: 50rpx;
-					margin-left: 20rpx;
-				}
-
-				.update-title {
-					width: fit-content;
-					height: fit-content;
-					border-radius: 8rpx;
-					font-size: 10px;
-					padding: 6rpx;
-					background-color: #868686;
-					color: #fff;
-				}
-			}
-
-			.lock-wrapper-no {
-				background-color: #f6f6f6;
-			}
-
-			.title {
-				font-size: 16px;
-			}
-		}
-	}
-
-	.utabs-top /deep/ .u-tabs {
-		align-items: flex-start;
-	}
+
+<style lang="scss" scoped>
+	.vip-center {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.vip-level-icon {
+		margin-right: 10rpx;
+		width: 80px;
+		height: 30px;
+	}
+
+	.pay-box {
+		background-color: #fff;
+		display: flex;
+		justify-content: space-between;
+		flex-direction: row;
+		padding: 0 20px;
+		flex-wrap: wrap;
+	}
+
+	.top-lab {
+		width: 40px;
+		text-align: center;
+		background-color: #ff5722;
+		color: #fff;
+		float: right;
+		border-top: none;
+		border-radius: 10px;
+	}
+
+	.pay-box-items {
+		margin-top: 10px;
+		width: 48%;
+		flex-direction: column;
+		border-radius: 10px;
+		line-height: 25px;
+		overflow: hidden;
+	}
+
+	.pay-box-items-txt {
+		padding: 1rpx 13px;
+	}
+
+	.pay-box-items view text {
+		line-height: 25px;
+	}
+
+	.pay-select {
+		border: solid 1px #ff5722;
+	}
+
+	.select-text {
+		background-color: #ff5722;
+		color: #fff;
+		height: 30px;
+		border-radius: 0rpx 0rpx 10rpx 10rpx;
+	}
+
+	.given-txt {
+		height: 30px;
+		border-top: solid 1rpx #9e9e9e1f;
+	}
+
+	.content {
+		background: #000000;
+	}
+
+	.userInfo {
+		position: absolute;
+		z-index: 99;
+		bottom: 30%;
+		right: 10px;
+		width: 100rpx;
+		text-align: center;
+		flex-direction: column;
+
+	}
+
+	.contentcd {
+		background-color: rgba(255, 255, 255, .3);
+		width: 720rpx;
+		z-index: 99;
+		position: absolute;
+		bottom: 70rpx;
+		left: 50%;
+		transform: translateX(-50%);
+		padding: 15rpx;
+		border-radius: 8px;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+		color: #ffffff;
+		margin: 0 auto;
+	}
+
+	.userName {
+		color: #fff;
+		font-size: 30rpx;
+		color: #ffffff;
+		margin: 0 6rpx;
+	}
+
+	.tsvideo {
+		animation: showDivAni 2s 1;
+	}
+
+	@keyframes showDivAni {
+		0% {
+			opacity: 0;
+		}
+
+		100% {
+			opacity: 1;
+		}
+	}
+</style>
+
+<style lang="scss" scoped>
+	.charge-wrapper {
+		margin-top: 15px;
+		width: 100%;
+
+		.top {
+			width: 100%;
+			display: flex;
+			align-items: center;
+
+			.charge-title {
+				font-size: 18px;
+				font-weight: bold;
+			}
+
+			.charge-info {
+				font-size: 15px;
+				color: #868686;
+				margin: 8px 0;
+			}
+
+			.charge-coin {
+				display: flex;
+				flex-direction: row;
+
+				.ji {
+					font-size: 18px;
+				}
+
+				.bi {
+					font-size: 18px;
+					color: $accent-color;
+				}
+			}
+		}
+	}
+
+	.down {
+		display: flex;
+		flex-direction: row;
+		width: 60px;
+		height: 30px;
+		margin-top: 5px;
+		position: absolute;
+		right: 0px;
+		top: 50%;
+		transform: translateY(-50%);
+
+		.down-text {
+			font-size: 16px;
+			color: #000;
+		}
+
+		.down-img {
+			width: 35rpx;
+			height: 35rpx;
+			object-fit: contain;
+		}
+	}
+
+	.ju-top {
+
+		// background-color: ;
+		.ju-top-title {
+			font-size: 16px;
+			font-weight: bold;
+			color: #000;
+			margin-top: 9px;
+			height: 22px;
+			margin-left: 20px;
+			// width: '+ (windowWidth*0.6) +' px;
+			overflow: hidden;
+		}
+
+		.ju-top-update {
+			font-size: 12px;
+			color: #000;
+			margin-top: 9px;
+			height: 22px;
+			margin-left: 20px;
+		}
+	}
+
+	.pop-my {
+		background-color: #FFFFFF;
+	}
+
+	.scroll-my {
+		height: fit-content;
+	}
+
+	.scroll-charge {
+		height: 50vh;
+	}
+
+	.ju-wrapper {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: start;
+		width: 100%;
+		height: 100%;
+		background-color: #FFFFFF;
+		// margin: 6rpx;
+
+		.ju-content.active {
+			background-color: #ff7f02;
+		}
+
+		.ju-content {
+			flex-grow: 1;
+			position: relative;
+			border-radius: 12rpx;
+			background-color: #f6f6f6;
+			width: 31%;
+			height: 25rpx;
+			align-items: center;
+			justify-content: center;
+			padding: 45rpx 68rpx;
+			margin: 6rpx;
+
+			.lock-wrapper,
+			.lock-wrapper-no {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				border-radius: 12rpx;
+				background-color: rgba(0, 0, 0, .3);
+
+				.lock-img {
+					position: absolute;
+					left: 3rpx;
+					top: 50%;
+					transform: translateY(-50%);
+					width: 50rpx;
+					height: 50rpx;
+					margin-left: 20rpx;
+				}
+
+				.update-title {
+					width: fit-content;
+					height: fit-content;
+					border-radius: 8rpx;
+					font-size: 10px;
+					padding: 6rpx;
+					background-color: #868686;
+					color: #fff;
+				}
+			}
+
+			.lock-wrapper-no {
+				background-color: #f6f6f6;
+			}
+
+			.title {
+				font-size: 16px;
+			}
+		}
+	}
+
+	.utabs-top /deep/ .u-tabs {
+		align-items: flex-start;
+	}
 </style>