Browse Source

视频播放优化等

pansl 1 year ago
parent
commit
d87326e2d3
5 changed files with 378 additions and 11 deletions
  1. 4 0
      common/apis/my.js
  2. 1 1
      common/apis/video.js
  3. 141 4
      pages/client/consume/consume.vue
  4. 70 6
      pages/video/index.nvue
  5. 162 0
      utils/http.js

+ 4 - 0
common/apis/my.js

@@ -4,3 +4,7 @@ import http from "../http.js";
 export const getUserInfo = () => {
 	return http.get('/api/wxapp/userInfo');
 } 
+// 消费记录
+export const getUserConsumeRecord = () => {
+	return http.get('/api/user/consumeRecord');
+} 

+ 1 - 1
common/apis/video.js

@@ -1,4 +1,4 @@
-import http from "../http.js";
+import http from "@/utils/http.js";
 
 // 视频-信息
 export const getVideoInfo = (params) => {

+ 141 - 4
pages/client/consume/consume.vue

@@ -1,22 +1,159 @@
 <template>
 	<view>
-		
+		<view class="integral-log-main">
+			<view class="pd16_15 bd-bottom flex alcenter">
+				<text class="iconfont iconicon_integral_des ft20 cl-main"></text>
+				<text class="ml10 ft16 ftw600 cl-main">消费明细</text>
+			</view>
+			<view class="pd16_15" v-if="listData.length>0">
+				<block v-for="(item,index) in listData" :key="index">
+					<view class="pb16 mb16 bd-bottom flex alcenter space">
+						<view>
+							<view class="ft14 cl-main">{{item.memo}}</view>
+							<view class="mt8 ft12 cl-notice">{{item.createtime}}</view>
+						</view>
+						<view class="ft18 ftw600 cl-main">{{item.jzt}}{{item.score}}</view>
+					</view>
+				</block>
+				<uni-load-more :status="status" :content-text="contentText" />
+			</view>
+
+			<com-empty v-else title="暂无积分记录"></com-empty>
+		</view>
 	</view>
 </template>
 
 <script>
+	import {
+		getUserConsumeRecord
+	} from '@/common/apis/my.js'
 	export default {
 		data() {
 			return {
-				
+				userinfo: [],
+				listData: [],
+				last_id: 0,
+				reload: true,
+				status: 'more',
+				userinfo: [],
+				contentText: {
+					contentdown: '上拉加载更多',
+					contentrefresh: '加载中',
+					contentnomore: '没有数据了'
+				}
 			}
 		},
+		onReachBottom() {
+			this.status = 'more';
+			this.getList();
+		},
+		onLoad() {
+			this.ongrzlTap()
+			this.getList();
+		},
 		methods: {
-			
+			async ongrzlTap() {
+				let data = {};
+				data.token = uni.getStorageSync("userinfo").token;
+				data.uid = uni.getStorageSync("userinfo").id;
+				uni.request({
+					url: this.configs.webUrl + '/api/user/index',
+					data: data,
+					success: res => {
+						if (res.data.code == 1) {
+							let ionfo = res.data.data
+							this.userinfo = ionfo
+						} else {
+							uni.showToast({
+								title: res.data.msg,
+								icon: "none"
+							});
+						}
+					},
+					fail: (data, code) => {
+						//console.log('fail' + JSON.stringify(data));
+					}
+				});
+			},
+			getList() {
+				getUserConsumeRecord().then(res => {
+					console.log(res,'getUserConsumeRecordgetUserConsumeRecordgetUserConsumeRecord')
+				})
+				let data = {
+					//column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
+				};
+				var limit = 10;
+				if (this.last_id > 0) {
+					//说明已有数据,目前处于上拉加载
+					this.status = 'loading';
+					data.offset = this.last_id * limit;
+					data._ = new Date().getTime() + '';
+				}
+				data.limit = limit
+				// data.token = uni.getStorageSync("userinfo").token;
+				// uni.request({
+				// 	url: this.configs.webUrl + '/api/user/userscoreinfo',
+				// 	data: data,
+				// 	success: data => {
+				// 		console.log(data.data)
+				// 		if (data.data.total > 0) {
+				// 			let list = data.data.rows;
+				// 			this.listData = this.reload ? list : this.listData.concat(list);
+				// 			this.reload = false;
+				// 			this.last_id = this.last_id + 1;
+				// 			if (data.data.total < this.last_id * limit) {
+				// 				this.status = '';
+				// 			}
+				// 		} else {
+				// 			this.contentText.contentdown = '没有数据'
+				// 		}
+				// 	},
+				// 	fail: (data, code) => {
+				// 		//console.log('fail' + JSON.stringify(data));
+				// 	}
+				// });
+			},
 		}
 	}
 </script>
 
 <style>
+	.integral-log-header {
+		position: relative;
+		height: 252rpx;
+	}
+
+	.integral-log-header .bg {
+		width: 100%;
+		height: 252rpx;
+	}
 
-</style>
+	.integral-log-header .main {
+		height: 252rpx;
+		width: 100%;
+		position: absolute;
+		left: 0;
+		top: 0;
+	}
+
+	.btn-integral {
+		width: 192rpx;
+		height: 80rpx;
+		background: #FFFFFF;
+		box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
+		border-radius: 40rpx;
+		text-align: center;
+		line-height: 80rpx;
+		color: #6687EF;
+		font-size: 28rpx;
+		font-weight: 500;
+	}
+
+	.integral-log-main {
+		background: #FFFFFF;
+		min-height: 1400rpx;
+		position: relative;
+		margin-top: -32rpx;
+		border-radius: 32rpx 32rpx 0rpx 0rpx;
+	}
+</style>

+ 70 - 6
pages/video/index.nvue

@@ -62,7 +62,7 @@
 				</swiper-item>
 			</block>
 		</swiper>
-		<uni-popup type="bottom" ref="select" style="z-index: 100;">
+		<uni-popup type="bottom" ref="select" style="z-index: 100;" :mask-click="fenji==1">
 			<view v-if="fenji==1" class="pop-my">
 				<view class="ju-top">
 					<view style="display: flex; flex-direction: column; ">
@@ -109,6 +109,20 @@
 			</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;'">
+				<view class="charge-wrapper">
+					<view class="top">
+						<text class="charge-title">充值购买后可继续观看{{topTitle}} </text>
+						<text class="charge-info">为保护创作者权益,当前内容需要付费观看。</text>
+						<view class="charge-coin">
+							<text class="ji">本集:</text>
+							<text class="bi">{{videoInfo.charge_coin}}k币</text>
+						</view>
+					</view>
+					<view class="bottom">
+						<text></text>
+						<text></text>
+					</view>
+				</view>
 			</view>
 		</uni-popup>
 	</view>
@@ -195,7 +209,7 @@
 				}
 			},
 			topTitle() {
-				return `${this.videoInfo.name} 第${this.episode}集`
+				return `${this.videoInfo.name} 第${this.episode}集`
 			}
 		},
 		onReady: function(res) {
@@ -208,7 +222,7 @@
 				video_id: this.video_id
 			}).then(res => {
 				// console.log(res, 'getVideoInfogetVideoInfogetVideoInfo')
-				this.videoInfo = res
+				this.videoInfo = res.data
 			})
 		},
 		onLoad(e) {
@@ -451,12 +465,28 @@
 			 * @originIndex  从源数据的哪个开始显示默认0,如从其他页面跳转进来,要显示第n个,这个参数就是他的下标
 			 */
 			initSwiperData(originIndex) {
+				this.episode = originIndex;
 				this.isqp = false
 				videoEpisodePlay({
 					video_id: this.video_id,
 					sequence: originIndex
 				}).then(res => {
-					this.currentVideoInfo = res
+					if (res.code == 0) {
+						this.currentVideoInfo = res.data
+						this.activeIndex = this.episode;
+					} else if (res.code == 500101) {
+						this.$nextTick(() => {
+							this.$refs.select.open('bottom');
+							// this.currentVideoInfo.video_url = ""
+							this.currentVideoInfo = {}
+							this.fenji = 2
+						})
+					} else {
+						this.$nextTick(() => {
+							this.currentVideoInfo.video_url = ""
+						})
+					}
+
 					console.log(res, 'getVideoEpisodePlaygetVideoEpisodePlay')
 				})
 			},
@@ -467,8 +497,6 @@
 				const {
 					current
 				} = event.detail;
-				this.episode = current + 1;
-				this.activeIndex = this.episode;
 				this.initSwiperData(current + 1)
 			},
 			controlstoggle(e) {
@@ -535,6 +563,42 @@
 </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;

+ 162 - 0
utils/http.js

@@ -0,0 +1,162 @@
+// 引入配置文件
+import config from "@/common/config.js";
+// #ifdef MP-WEIXIN
+import wxApp from "@/common/wecaht.min.app.js"
+import {
+	getToken,
+	clearToken
+} from '@/common/token.js'
+// #endif
+const filterNoToken = ["/api/auth/refreshToken", "/api/auth/login"];
+
+export default {
+	config: {
+		baseUrl: config.apiUrl,
+		header: {
+			'Content-Type': 'application/json;charset=UTF-8',
+		},
+		data: {},
+		method: "GET",
+		dataType: "json",
+	},
+	async request(options = {}) {
+		// 请求拦截器
+		uni.addInterceptor('request', {
+			invoke: (request) => {
+				// 在发送请求之前的处理逻辑,例如添加请求头、请求日志等
+				// request.header = {
+				// 	'Content-Type': 'application/json', // 设置请求头
+				// 	// 在这里可以添加其他自定义请求头
+				// };
+				// console.log('Request:', request);
+				return request;
+			},
+		});
+		// 响应拦截器
+		uni.addInterceptor('response', {
+			invoke: (response) => {
+				// 在接收到响应数据之后的处理逻辑,例如统一处理错误码、响应日志等
+				// console.log('Response:', response);
+				return response;
+			},
+		});
+		options.header = options.header || this.config.header;
+		options.method = options.method || this.config.method;
+		options.dataType = options.dataType || this.config.dataType;
+
+		let version = 'web';
+		// #ifdef MP-WEIXIN  
+		//	微信小程序处理
+		options.header.appid = wxApp.getWXAppId();
+		options.header.source = 'wxapp';
+		// 过滤不需要token的api
+		if (filterNoToken.indexOf(options.url) === -1) {
+			// console.log('getTokenString ',options.url )
+			options.header.Authorization = await (this.getTokenString());
+		}
+		// #endif
+		options.url = this.config.baseUrl + options.url;
+		console.log('options.url ', options.url)
+		return new Promise((resolve, reject) => {
+			options.success = (e) => {
+				console.log(e, 'successsuccesssuccesssuccesssuccess')
+				let res = e.data;
+				if (e.statusCode === 200) {
+					if (res.code == 500201) {
+						// 未登录
+						clearToken();
+						getToken();
+						if (filterNoToken.indexOf(options.url) === -1) {
+							return this.request(options);
+						}
+					} else {
+						if (res.code != 0) {
+							uni.showToast({
+								title: res.msg,
+								duration: 1000,
+								icon: 'none'
+							});
+						}
+					}
+					resolve(res);
+				} else {
+					uni.showToast({
+						title: "网络异常,请稍后再试",
+						duration: 1000,
+						icon: 'none'
+					});
+					reject(new Error('Request failed'));
+				}
+			}
+			options.fail = (err) => {
+				console.log(err)
+				reject(err);
+			}
+			uni.request(options)
+		})
+
+	},
+	get(url, data, options = {}) {
+		options.url = url;
+		options.data = data;
+		options.method = 'GET';
+		return this.request(options);
+	},
+	post(url, data, options = {}) {
+		options.url = url;
+		options.data = data;
+		options.method = 'POST';
+		return this.request(options);
+	},
+
+	// 上传图片
+	upload(url, options = {}) {
+		options.url = this.config.baseUrl + url;
+		options.header = options.header || this.config.header;
+		options.fileType = options.fileType || "image";
+		options.formData = options.formData || {};
+		options.filePath = options.filePath;
+		options.name = options.name;
+		// TODO:token增加等操作
+		if (options.token) {
+			// 验证是否登录
+			if (!this.checkToken(options.checkToken)) return;
+			// 验证权限
+			if (!this.checkAuth(options.checkAuth)) return;
+			options.header.token = User.token;
+		}
+
+		return uni.uploadFile(options);
+	},
+	// 错误处理
+	errorCheck(err, res, errfun = false, resfun = false) {
+		if (err) {
+			typeof errfun === 'function' && errfun();
+			uni.showToast({
+				title: '加载失败',
+				icon: "none"
+			});
+			return false;
+		}
+		if (res.data.errorCode) {
+			typeof errfun === 'function' && resfun();
+			uni.showToast({
+				title: res.data.msg,
+				icon: "none"
+			});
+			return false;
+		}
+		return true;
+	},
+	async getTokenString() {
+		// console.log('getTokenString-----start');
+		await getToken();
+		let token = uni.getStorageSync('token');
+		// token格式化
+		if (token && typeof token === "string") {
+			token = JSON.parse(token);
+		}
+		// console.log('getTokenString--end', token);
+		return token.token;
+	}
+}