jiuyiUniapp/jiuyi2/components/index/disc.vue

<script setup>
	/**
	 * 有效读秒唱片
	 */

	import {
		computed,
		onMounted,
		reactive,
		ref
	} from 'vue';

	// 唱片旋转角度
	const rotate = ref(0)
	// 唱片计时器
	const timer = ref(null)
	// 周时长 单位s
	const limitTime = ref(5)
	// 步长 单位s
	const step = ref(0.05)
	// 播放状态
	const playState = ref(false)

	// 唱片样式
	const discStyle = computed(() => {
		let result = {
			transform: `rotate(${rotate.value}deg)`,
		}
		return result
	})
	// 用户信息
	const userinfo = computed(() => {
		let result = uni.$store.state.userinfo
		return result
	})

	onMounted(() => {})

	// 播放
	function play() {
		if (playState.value) return
		timer.value = setInterval(() => {
			if (rotate.value >= 360) {
				rotate.value = 0
			}

			rotate.value += (360 / limitTime.value) * (step.value / 1)
		}, step.value * 1000)
		playState.value = true
	}

	// 暂停
	function pause() {
		if (!playState.value) return
		clearInterval(timer.value)
		timer.value = null
		playState.value = false
	}

	// 点击唱片
	function handleDisc() {
		uni.navigateTo({
			url: '/pages/index/durian'
		})
	}

	defineExpose({
		play,
		pause,
	})
</script>

<template>
	<!-- cd唱片 -->
	<view class="discBox">
		<view class="disc fmid" :style="discStyle" @click="handleDisc">
			<image class="image wh100 cir" :src="userinfo.avatar" mode="aspectFill" />
		</view>
	</view>
</template>

<style lang="scss" scoped>
	// 唱片
	.discBox {
		align-items: flex-end;
		justify-content: flex-end;

		// 唱片
		.disc {
			width: 110rpx;
			height: 110rpx;

			.image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				box-shadow: 0 0 10rpx rgba(255, 255, 0, .8);
			}
		}
	}
</style>