短剧播放器02：如何购买并解锁剧集

从何后台获取到可播放的剧集后，解下来需要解决用户在点击未解锁剧集时，如何解锁剧集的问题！
uniApp前端微短剧项目开源分享
开源地址：git开源下载地址

一、前言：官方文档

1.当用户切换到未购买的付费剧集时，会触发 onCheckIsCanPlay(func)注册的func回调函数。开发者需要在此回调函数中判断用户是否有足够的金币来播放该剧集。

2.如果用户有足够的金币，开发者可以进行扣币操作，并调用 PlayletManager 的 isCanPlay({ data, serialNo }) 函数，让播放器继续播放。其中，data 是加密后的数据，和 setCanPlaySerialList 的 data 参数定义一样。

3.如果用户没有足够的金币来播放剧集，则调用 PlayletManager 的 isCanPlay({ data, serialNo }) 函数，将 status 设置为 2（表示无法解锁）。此时，播放器会显示相应的 UI，提示用户需要充值才能继续观看。

二、实现

1、实现思路

1. 需要知道解锁的剧目ID和剧集ID，可以通过调用pm.getInfo()进行获取
2. 拿到剧目ID和剧集ID之后，需要将需要解锁的剧集ID发送给后端，我们是不能跳集解锁的，所以我们采取的方式是获取到后台加密后的播放结束剧集编号，比如设置的是1-5集免费，那么需要解锁的就是第6集，以此类推，拿到end_serial_no+1之后就是我们需要解锁的剧集
3. 调用购买剧集的接口，判断当前用户余额是否充足，如果是则购买成功自动解锁播放剧集。反之购买失败，这个时候可以自动弹出充值弹窗，用户选择充值解锁或开通VIP会员

2、代码示例

onCheckIsCanPlay(param) {
		const pm = this.pm
		const {
			dramaId,
			serialNo
		} = this.pm.getInfo()
		// TODO: 碰到不可以解锁的剧集，会触发此事件，这里可以进行扣币解锁逻辑，如果用户无足够的币，可调用下面的this.isCanPlay设置
		// 获取需要解锁的剧集ID
		this.getEncryptData({
			serialNo: serialNo,
		}).then(res => {
			// encryptedData是后台加密后的数据，具体实现见下面的加密章节
			this.pm.isCanPlay({
				data: res.encryptedData,
				serialNo: serialNo,
			})
			// 从加密的数据中获取可以播放结束剧集ID，在这个基础上加1后就是要解锁的剧集，这样可以实现不管用户点击的是
			const seriesSeries = parseInt(res.end_serial_no) + 1;
			// 这里做了个判断，如果用户点击了大于需要解锁的剧集则会弹出提示
			if (seriesSeries < parseInt(serialNo)) {
				uni.showToast({
					title: '请先解锁第' + seriesSeries + '集',
					icon: 'success',
					duration: 2000
				});
				return
			}
			if (serialNo >= seriesSeries) {
				// 调用购买剧集接口
				uni.request({
					url: MYurl + '/api/wxApi/buyDramaSeries',
					method: 'POST',
					header: {
						'content-type': 'application/json', // 添加 content-type
						"X-Tenant-Id": uni.getStorageSync('tenantId')
					},
					data: {
						memberId: uni.getStorageSync('id'), //用户ID
						dramaId: dramaId, //剧集ID
						sysOrgCode: uni.getStorageSync('sysOrgCode'), //部门ID
						tenantId: uni.getStorageSync('tenantId'), //租户ID
						seriesSeries: seriesSeries, //解锁的剧集ID
						unlockState: false //剧集是否解锁状态
					},
					success: (res) => {
						// 如果余额充足,则提示购买成功
						if (res.data.code !== 600) {
							if (res.data.message != '') {
								uni.showToast({
									title: res.data.message,
									icon: 'success',
									duration: 1200,
								});
							}
							this.getEncryptData({
								serialNo: serialNo,
							}).then(res => {
								// 购买成功之后重新获取后台加密后的数据
								this.pm.isCanPlay({
									data: res.encryptedData,
									serialNo: serialNo,
								})
							})
						} else {
							if (res.data.message != '') {
								uni.showToast({
									title: res.data.message,
									icon: 'success',
									duration: 2000,
								});
							}
							// 如果购买失败调用showChargeDialog弹出充值弹窗即可，这里需要先注册下showChargeDialog
							pm.showChargeDialog()
						}
					}
				})
			}
		})
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

3、注意事项

1、用户有两个方式会触发这个事件，一是用户在刷视频上划的时候，如果该剧集未解锁，则会触发，二是点击选集在点击未解锁的剧集的时候会触发
2、短剧这一块一向非常严格，所以还是建议用户消费完了之后给出消费金额的提示
3、解锁剧集支付使用的是虚拟支付，前提的是接通了虚拟支付，余额建议走自己的后台系统，会方便得多

体验可查看下方盼盼短剧，如果有不足或疑惑的地方欢迎大家一起讨论！后续将继续更新短剧播放器以及虚拟支付相关问题！