20240517

components/barrage/ControlBar.nvue

@@ -0,0 +1,103 @@
+<template>
+	<view class="barrage-control-bar">
+		<view class="left">
+			<template v-if="barrageOpen">
+				<image
+				class="btn"
+				src="@/static/barrage/open@2x.png"
+				@click="handleToggleBarrageOpen"></image>
+				<image
+				v-if="settingBarrageMode"
+				class="btn space"
+				src="@/static/barrage/setting_active@2x.png"
+				@click="handleToggleBarrageSetting"></image>
+				<image
+				v-else
+				class="btn space"
+				src="@/static/barrage/setting_gray@2x.png"
+				@click="handleToggleBarrageSetting"></image>
+			</template>
+			<image
+			v-else
+			class="btn"
+			src="@/static/barrage/close_gray@2x.png"
+			@click="handleToggleBarrageOpen"></image>
+		</view>
+		<view
+		v-if="barrageOpen"
+		class="right"
+		@click="handleToggleFixedFooter">
+			<text class="text">{{ placeHolderText }}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'BarrageControlBar',
+		props: {
+			barrageOpen: {
+				type: Boolean,
+				default: true
+			},
+			settingBarrageMode: {
+				type: Boolean,
+				default: false
+			},
+			barrageSendDisabled: {
+				type: Boolean
+			},
+			barrageSendDisabledTime: {
+				type: Number
+			}
+		},
+		computed: {
+			placeHolderText () {
+				return this.barrageSendDisabled ? this.barrageSendDisabledTime + 's' : '点我发弹幕';
+			}
+		},
+		methods: {
+			handleToggleBarrageOpen () {
+				this.$emit('handleToggleBarrageOpen');
+			},
+			handleToggleBarrageSetting () {
+				this.$emit('handleToggleBarrageSetting');
+			},
+			handleToggleFixedFooter () {
+				this.$emit('handleToggleFixedFooter');
+			}
+		}
+	}
+</script>
+
+<style lang="stylus" scoped>
+	.barrage-control-bar
+		flex-direction: row
+		padding: 10rpx 30rpx
+		background-color: #FFF
+		.left
+			flex-direction: row
+			align-items: center
+			padding: 0 20rpx
+			background-color: #F5F5F5
+			border-radius: 30rpx
+			border 1rpx solid #DDDDDD
+			.btn
+				width: 60rpx
+				height: 60rpx
+				&.space
+					margin-left: 40rpx
+		.right
+			flex 1
+			flex-direction: row
+			align-items: center
+			margin-left: 20rpx
+			padding: 0 30rpx
+			background-color: #F5F5F5
+			border-radius: 30rpx
+			border 1rpx solid #DDDDDD
+			.text
+				font-size: 26rpx
+				line-height: 26rpx
+				color #999
+</style>