TianHeJianKang/components/DanMu/DanMu.vue

<template>
	<view style="position: relative;width: 750rpx;height: 360rpx;padding-top: 20rpx;">
		<view style="height:350rpx">
			<l-barrage :data="barrageData1">
				<!-- 自定义每条弹幕样式 content 为你传入的数据-->
				<template #default="{content}">
					<view class="" style="height: 60rpx;">
						<view
							style="display: flex;background: rgba(0,0,0,0.2);height: 36rpx;padding: 0 10rpx;line-height: 36rpx;border-radius: 4rpx;">
							<view class="" style="overflow: hidden;color: aliceblue;display: flex;"
								v-if="content.scene==1">
								感恩
								<view class="">
									<image style="width: 32rpx;height: 32rpx;border-radius: 50%;margin-top: 4rpx;"
										:src="content.user_avatar" mode=""></image>
								</view>
								<span style="color: red;">{{content.user_name}}</span>祝福
								<span style="color: #FFC690;">{{content.receive_user_name}}</span>
								<view class="">
									<image style="width: 32rpx;height: 32rpx;border-radius: 50%;margin-top: 4rpx;"
										:src="content.icon_url" mode=""></image>
								</view>x{{content.pay_num}}
							</view>
							<view class="" style="overflow: hidden;color: aliceblue;" v-if="content.scene==3">
								感恩
								<!-- <view class="">
									<image style="width: 32rpx;height: 32rpx;border-radius: 50%;margin-top: 4rpx;" :src="content.avatar" mode=""></image>
								</view> -->
								<span style="color: red;">{{content.user_name}}</span>送出
								<!-- <view class="">
									<image style="width: 32rpx;height: 32rpx;border-radius: 50%;margin-top: 4rpx;"
										src="../../static/hua.png" mode=""></image>
								</view> -->
								🌹x{{content.pay_num}}
							</view>
						</view>
					</view>
					<view class="" style="height: 80rpx;font-size: 36rpx;">
						<view class="" style="overflow: hidden;color: #FFE21D;display: flex;background: rgba(0,0,0,0.2);height: 66rpx;padding: 0 10rpx;line-height: 66rpx;border-radius: 4rpx;font-weight: 600;" v-if="content.scene==2">
							恭喜阳光少年
							<span style="color: #E45050;">{{content.receive_user_name}}</span>
							成为阳光CHO
							，感恩所有为<span style="color: #E45050;">{{content.receive_user_name}}</span>送出的祝福👏🎉  
							<!-- <view class="">
								<image style="width: 32rpx;height: 32rpx;border-radius: 50%;margin-top: 4rpx;"
									:src="content.icon_url" mode=""></image>
							</view>x{{content.pay_num}} -->
						</view>
					</view>
				</template>
			</l-barrage>
		</view>
		<!-- 		<view class="inputs">
			<input v-model="value" />
			<button @click="onFire">发射</button>
		</view> -->
	</view>
</template>

<script setup>
	// 本页面使用第三方插件，文档地址是 https://ext.dcloud.net.cn/plugin?id=11800
	// 文档名称  barrage 弹幕 （HB插件市场搜索）
	import {
		ref
	} from 'vue'
	import {
		HTTP
	} from '@/api/http.js'
	import {
		onShow,
		onHide
	} from '@dcloudio/uni-app'
	let hide = true
	const value = ref('')
	const barrageData1 = ref([])
	let b = 0 //播报哪一条
	const onFire = (e) => {
		if (hide == false) {
			return
		}
		if (barrageData.value.length == 0) {
			return
		}
		// if(b>=barrageData.value.length-2){

		// 	b=0
		// }
		// console.log(b,barrageData.value[b])
		barrageData1.value.push(barrageData.value[b])
		b++
		// console.log(111111)
		if (b >= barrageData.value.length - 1) {
			b = 0
			// barrageData1.value = []
			timeJianGe = getRandomIntInRange()
			time()
		} else {

			timeJianGe = getRandomIntInRange()
			time()
		}
	}
	// 获取播报列表
	const barrageData = ref([
		// 	{
		// 	"user_flora_id": 6,
		// 	"user_id": 1,
		// 	"user_flora_queue_id": 29,
		// 	"pay_num": 1,
		// 	"user_avatar": "https://img2.baidu.com/it/u=1195773901,4039087122&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",
		// 	"user_name": "张三李四",
		// 	"receive_user_name": "刘祉昊",
		// 	"content": "感恩17600525201为阳光少年刘祉昊送上祝福👏👏👏👏👏",
		// 	"flora": "晚香玉",
		// 	"icon_url": "https://img2.baidu.com/it/u=1195773901,4039087122&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",
		// 	"scene": 1
		// }
	])
	// for (let i = 0; i < 200; i++) {//假数据
	// 	barrageData.value.push(barrageData.value[0])
	// // barrageData.value[i].user_name=	maskString(barrageData.value[i].user_name)
	// }

	// 隐藏部分姓名
	function maskString(str) {
		// if (str.length <= 4) {
		// 	// 根据长度不同进行不同的替换
		// 	switch (str.length) {
		// 		case 2:
		// 			return str[0] + "*";
		// 		case 3:
		// 			return str[0] + "*" + str[2];
		// 		case 4:
		// 			return str.slice(0, 2) + "**";
		// 		default:
		// 			return str;
		// 	}
		// } else {
		// 	// 长度超过4个，替换中间的字符
		// 	return str[0] + "**" + str[str.length - 1];
		// }
	}



	const BroadcastIndex = async () => { //获取弹幕列表
		let res = await HTTP.SY.BroadcastIndex({})
		if (res.code == 200) {
			barrageData.value = res.data
			// barrageData.value.push(res.data[0])
			time()
		}
		// console.log(res, '我是真实弹幕啊', barrageData.value)
	}

	// 处理弹幕播报逻辑-----------------------

	let timeJianGe = 200
	const time = () => {
		// console.log(11111111111111)
		let times = setTimeout(() => {
			onFire(b)
			clearInterval(times)
		}, timeJianGe)
	}
	// 返回随机数200-300
	function getRandomIntInRange(min, max) {
		let a = 1500
		let b = 200
		// console.log("1111111111----------")
		if (barrageData.value.length < 10) {
			// console.log("2222222222222222222222222222222222")
			a = 15000
			b = 9000
		}
		if (barrageData.value.length >= 10 && barrageData.value.length < 20) {
			a = 11000
			b = 7000
		}
		if (barrageData.value.length >= 20 && barrageData.value.length < 70) {
			a = 3000
			b = 700
		}
		if (barrageData.value.length >= 70 && barrageData.value.length < 100) {
			a = 2000
			b = 300
		}
		// 生成一个随机整数，并确保其在 [min, max] 范围内
		const range = a - b + 1;
		const array = new Uint32Array(1); // 创建一个长度为 1 的 Uint32Array
		window.crypto.getRandomValues(array); // 填充数组
		return b + (array[0] % range); // 计算随机整数并返回
	}
	// ------------------------------------------------------
	onShow(() => {
		BroadcastIndex()

	})
	onHide(() => { //离开页面时停止循环

		hide = false
	})
</script>

<style lang="scss" scoped>
	// 弹幕
	.daMu {
		position: absolute;
		display: flex;
		background: rgba(0, 0, 0, 0.3);
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;

	}
</style>