我的订单+我的

mixins/barrage.js

@@ -0,0 +1,217 @@
+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;