exam_student/pages/login/Login.vue

<template>
	<view class="container">
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
	<view
		style="background-image:url(../../static/bg1.svg) ;height: 100vh;background-size: cover;background-color: #beb685;">
		<view class="flex-item flex-item-V uni-bg-red">
			<view style="height: 50px;padding: 30px;">
				<view class="title"><strong style="color: #414100 ;">艺术监测考试</strong></view>
			</view>
		</view>
		<view class="flex-item flex-item-V uni-bg-green">
			<view class="uni-flex uni-row">
				<view class="flex-item uni-bg-green">
					<view class="grid-content bg-purple-light" style="margin: auto">
						<form>
							<input class="uni-input" v-model="form.name" type="text" placeholder="  账号" />
							<br />
							<br />
							<button type="primary" @click="submitUser"
								style="width: 400px;font-size: 20px;box-shadow: 2px 2px 5px #aaaaaa;">登 录
							</button>
						</form>
					</view>
				</view>
				<view class="flex-item uni-bg-blue">
				</view>
			</view>
			<uni-card :title="'浏览器下载和音频测试'"
				style="position: fixed;right: 10px;bottom: 10px;background-color: #a4c1bd;width: 280px;height: 180px;border-radius: 25px;padding: 20px;">
				<strong><uni-link href="https://browser.360.cn/" text="360浏览器" color="#780002"></uni-link> /
					<uni-link href="https://www.microsoft.com/zh-cn/edge/download" text="Edge浏览器"
						color="#780002"></uni-link> /
					<uni-link href="https://www.google.cn/intl/zh-CN/chrome/browser-tools/" text="谷歌浏览器"
						color="#780002"></uni-link></strong>
				<view style="width: 95%;height: 60%;background-color: #adab6f;padding: 2%;border-radius: 5px;">
					<slider :value="sliderValue" @change="onSliderChange" max="100" style="width: 85%;" :block-size='15'
						block-color='#A2ABAA' activeColor='#19C590'></slider>
					<button @click="onplay()"
						style="width: 40%;display: inline-block;margin: 0 4% ;padding: 2px;">播放/暂停</button>
					<button @click="stop()"
						style="width: 40%;display: inline-block;margin: 0 4% ;padding: 2px;">结束</button>
				</view>

			</uni-card>
		</view>
	</view>

</template>
<script>
	import {
		getSysLogin,
		minioIP,
		minioPort,
		request,
	} from '../../examJs/examRequest';
	import {
		redirectTo
	} from '../../examJs/examRoute';

	export default {
		data() {
			return {
				form: {
					name: '',
				},
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: '',
				innerAudioContext: null,
				audio: true,
				sliderValue: null,
				intervalIDqw: null,
				intervalIDs: null,
				duration: '',
				currentTime: '',
			}
		},
		methods: {
			messageToggle(type, message) {
				this.msgType = type
				this.messageText = message
				this.$refs.message.open()
			},
			submitUser() {
				if (this.form.name.toString().trim().length === 0) {
					this.messageToggle('error', "账号不能为空")
					return
				}
				getSysLogin({
						captcha: "",
						loginType: 2,
						password: "123456",
						username: this.form.name,
						t: Date.now()
					}).then(data => {

						if (data.data.code === 200) {
							this.messageToggle('success', data.data.message)
							sessionStorage.setItem("token", data.data.result.token)
							let user = JSON.stringify(data.data.result.userInfo)
							sessionStorage.removeItem("user")
							sessionStorage.setItem("user", user)
							this.stop()
							redirectTo('/pages/examPage/examInfo');
						} else {
							this.messageToggle('error', data.data.message)
						}

					})
					.catch(err => {
						this.messageToggle('error', "网络质量不佳，请重试")
					})
			},
			onplay() {
				if (this.audio) {
					this.audio = false
					this.innerAudioContext.play();
					this.intervalIDs = setInterval(() => {
						if (this.innerAudioContext.duration !== 0) {
							// clearInterval(intervalID);
							this.duration = this.formatTime(this.innerAudioContext.duration) // 总时长
							this.currentTime = this.formatTime(this.innerAudioContext.currentTime) // 当前时长
							if (this.currentTime === this.duration) {
								clearInterval(this.intervalIDs);
							}
						}
					}, 500);
					// 启动定时器，每秒更新一次进度条位置
					this.intervalIDqw = setInterval(() => {
						if (this.innerAudioContext.duration > 0) {
							this.sliderValue = (this.innerAudioContext.currentTime / this.innerAudioContext
								.duration) * 100;
						}
					}, 1000)

				} else {
					this.audio = true
					this.innerAudioContext.pause()
					clearInterval(this.intervalIDs);
					clearInterval(this.intervalIDqw);
				}
			},
			stop() {
				this.audio = true
				this.innerAudioContext.stop()
				this.sliderValue = 0
				clearInterval(this.intervalIDs);
				clearInterval(this.intervalIDqw);
			},
			formatTime(seconds) {
				const minutes = Math.floor(seconds / 60);
				const remainingSeconds = Math.floor(seconds % 60);
				return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
			},
			onSliderChange(event) {
				const value = event.detail.value;
				if (this.innerAudioContext && this.innerAudioContext.duration > 0) {
					// 验证 value 是否是有效的百分比值（0-100之间）
					if (isNaN(value) || value < 0 || value > 100) {
						console.error("Invalid value:", value);
						return;
					}

					// 计算新的位置
					const newPosition = (value / 100) * this.innerAudioContext.duration;

					// 验证 newPosition 是否是有效的数字，不是 NaN，并且在有效范围内
					if (!isNaN(newPosition) && newPosition >= 0 && newPosition <= this.innerAudioContext.duration) {
						// 设置音频播放位置
						this.innerAudioContext.seek(newPosition);
						console.log("Seeking to position:", newPosition);
						if (!this.dragging) { // 避免拖动滑块时自动更新
							this.sliderValue = value;
						}
					} else {
						console.error("Invalid newPosition:", newPosition);
					}
				}
			},
			doKey(e) {
				const ev = e || window.event // 获取event对象
				if (ev.keyCode === 13) {
					this.submitUser()
				}
			},

		},
		mounted() {

			if (sessionStorage.getItem("token") !== undefined && sessionStorage.getItem("token") !== null && sessionStorage
				.getItem("token") !== "") {
				redirectTo('/pages/examPage/examInfo');
			}
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.src = 'http://'+minioIP+':'+minioPort+'/exam-bucket/中华人民共和国国歌.mp3';
			document.onkeydown = this.doKey
		}
	}
</script>
<style>
	.uni-input {
		padding-left: 20px;
		border: 1rpx solid #EEEEEE;
		height: 50px;
		box-shadow: 2px 2px 5px #aaaaaa;
		margin: auto;
		margin-top: 25vh;

		color: #000000;
		width: 380px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-family: '微软雅黑', serif;
		font-size: 40px;
		color: #000000;
		width: 600px;
		text-align: center;
		margin: 0 auto 0 auto;
	}
</style>