sociology_app/mixins/barrage.js

import Barrage from '@/components/barrage/barrage.vue';
import BarrageControlBar from '@/components/barrage/ControlBar.nvue';
import BarrageInput from '@/components/barrage/BarrageInput.nvue';
import BarrageSettingLayer from '@/components/barrage/SettingLayer.nvue';

const colors = ['#FFFFFF','#999999', '#E6151E', '#9D22B1', '#3D50B6', '#03A9F4', '#009688', '#259B24', '#8BC34A'];

const barrage = {
	data () {
		return {
			barrageOpen: false, // 是否开启弹幕
			barrageList: [] ,// 弹幕数据列表
			pickColorMode: false, // 是否展示弹幕颜色设置视图
			settingBarrageMode: false, // 是否展示弹幕设置浮层
			activeColorIndex: 0, // 当前激活弹幕颜色序号
			barrageColors: colors, // 颜色列表
			showFixedFooter: false, //是否展示吸底输入框组件、颜色设置组件
			barrageInputValue: '', // 输入框value
			barrageOpacity: 100 ,// 弹幕不透明度
			barrageFontSize: 28, // 弹幕字号
			barrageSpeed: 10000, // 弹幕速度
			barrageArea: 100 ,// 弹幕显示区域
			barrageTimer: null ,// 发送弹幕倒计时
			barrageSendDisabled: false, // 禁止发送弹幕
			barrageSendDisabledTime: 5, // 禁止发送时间
		}
	},
	computed: {
		barrageColor () {
			return `0x${colors[this.activeColorIndex].substr(1).toLocaleLowerCase()}`
		}
	},
	components: {
		Barrage,
		BarrageControlBar,
		BarrageInput,
		BarrageSettingLayer
	},
	methods: {
		initBarrage () {
			try {
				this.$refs.CCView.barrageInit();
			} catch (e) {
				console.log(e);
			}
		},
		setBarrageVideoId (id) {
			try {
				this.$refs.CCView.setBarrageVideoId(id);
			} catch (e) {
				console.log(e);
			}			
		},
		postBarrageTime (time) {
			// time 秒
			// console.log('postBarrageTime params', time);
			try {
				this.$refs.CCView.associationWithTimeDidChange(time);
			} catch (e) {
				console.log(e);
			}
		},
		sendBarrage (params) {
			try {
				this.$refs.CCView.sendBarrageWithBarrage(params);
			} catch (e) {
				console.log(e);
			}
		},
		handleBarrageSend (content) {
			let params = {
				content,
				fc: this.barrageColor, // 颜色
				pt: this.currentTime * 1000 // 弹幕时间点 毫秒
			}
			this.barrageInputValue = content;
			console.log(params);
			this.handleToggleFixedFooter();
			if (this.barrageInputValue == '') {
				uni.showToast({
					icon: "none",
					title: '请输入内容'
				})
				return;
			}
			// 发送
			this.sendBarrage(params);
		},
		barrageSendCountDown () {
			if (this.barrageSendDisabledTime === 0) {
				this.barrageSendDisabled = false;
				this.barrageSendDisabledTime = 5;
				this.barrageTimer = null;
				return;
			}
			this.barrageSendDisabled = true;
			this.barrageTimer = setTimeout(() => {
				this.barrageSendDisabledTime--;
				this.barrageSendCountDown()
			}, 1000)
		},
		onBarrageError (e) {
			console.log('onBarrageError:', e);
		},
		onBarrageList (e) {
			// console.log('onBarrageList:', e);
			try {
				this.barrageList = e.detail && e.detail.barrageList;
			} catch (e) {
				console.log(e)
			}
		},
		onSendBarrageSuccess (e) {
			console.log('onSendBarrageSuccess:', e);
			uni.showToast({
				title: '发送成功',
				icon: 'none'
			})
			this.$refs.Barrage.add({
				content: this.barrageInputValue,
				fc: this.barrageColor,
				pt: this.currentTime * 1000,
				self: true
			});
			// 清空输入框内容
			this.barrageInputValue = '';
			this.$refs.barrageInput.cleanTextAction();
			// 开启输入倒计时
			this.barrageSendCountDown();
		},
		onSendBarrageError (e) {
			console.log('onSendBarrageError:', e);
			uni.showToast({
				title: '发送失败',
				icon: 'none'
			})
		},
		handleToggleBarrageOpen () {
			this.barrageOpen = !this.barrageOpen;
		},
		handleColorPick (index) {
			this.activeColorIndex = index;
		},
		handleToggleFixedFooter () {
			if (this.barrageSendDisabled) return;
			// this.showFixedFooter = !this.showFixedFooter
			if (this.settingBarrageMode) this.settingBarrageMode = false;
			if (!this.showFixedFooter) {
				this.showFixedFooter = true;
				this.toggleKeyBoard('focus');
			} else {
				this.toggleKeyBoard('blur', () => {
					this.showFixedFooter = false;
				});
			}
		},
		toggleKeyBoard (action, callback) {
			this.$nextTick(() => {
				if (action === 'focus') {
					setTimeout(() => {
						this.$refs.barrageInput.focusAction();
					}, 300)
				}
				if (action === 'blur') {
					this.$refs.barrageInput.blurAction();
				}
				setTimeout(() => {
					if (callback) {
						callback();
					}
				}, 300)
			})
		},
		togglePickColorMode () {
			this.pickColorMode = !this.pickColorMode;
			this.$nextTick(() => {
				if (this.pickColorMode)
					this.$refs.barrageInput.blurAction();
				else {
					this.$refs.barrageInput.focusAction();
				}
			})
		},
		handleToggleBarrageSetting () {
			this.settingBarrageMode = !this.settingBarrageMode
			this.isControlBarShow = !this.settingBarrageMode
			if (this.showFixedFooter) this.showFixedFooter = false;
			this.toggleKeyBoard();
		},
		handleFocus () {
			this.pickColorMode = false;
		},
		handleBlur () {
			// ...
		},
		handleSetBarrageOpacity (value) {
			this.barrageOpacity = value;
		},
		handleSetBarrageFontSize (value) {
			this.barrageFontSize = value;
		},
		handleSetBarrageSpeed (value) {
			this.barrageSpeed = value;
		},
		handleSetBarrageArea (value) {
			this.barrageArea = value;
		},
		resetBarrageList () {
			this.barrageList = [];
			if (this.$refs.barrage) {
				this.$refs.barrage.clean();
			}
		}
	}
}

export default barrage;