药品说明书 支持语音播报 双指缩放字体大小

<template>
	<view @touchstart="onTouchStart" @touchmove="onTouchMove"  :style="{ fontSize: fontSize + 'px' }">
		<view class="content">

			<view class="text-area">
				<text class="title">西洛他唑片</text>
			</view>
			<text class="title2">请仔细阅读说明书并在医师指导下使用</text>
			<text class="title2">警示语</text>
		</view>
		<view  class="listText" v-for="(item,index) in list"
			:key="index">
			<view>
				<view style="font-weight: bolder;display: flex;">[{{item.name}}]
					<u-icon @click="togglePlay(item.url,item.id)"
						:name=" (id==item.id&&isPlaying) ?'volume-fill':'volume'"></u-icon>
				</view>
				<rich-text class="desc" :nodes="item.value" :style="{ fontSize: fontSize + 'px' }"></rich-text>
			</view>

		</view>
		<u-button @click="openvice"> {{isPlayingSUM?"暂停1":'播放'}} </u-button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				audio: null,
				sumUrl: null,
				audioSUM: null,
				id: '',
				fontSize: 16, // 默认字体大小
				currentIndex: 0,
				currentSrc: '',
				title: 'Hello',
				list: [{
						id: 1,
						name: '药品名称',
						value: "西洛他唑片",
						url: 'http://192.168.3.156:22223/api/file-download?name=chinese_xiaosong_common.wav&dir=D%3A%5Copt%5Cout&code='

					},
					{
						id: 2,
						name: '选项二禁用',
						value: "西洛他唑",
						url: 'https://guoyaoyun.obs.cn-east-3.myhuaweicloud.com/chinese_huaxiaodong_common-%E5%8F%AF%E4%BB%A5%E7%94%A8.wav'

					},
					{
						id: 3,
						name: '性状', //开启后文字不显示
						value: "白色片。",
						url: 'http://192.168.3.156:22223/api/file-download?name=chinese_huaxiaoliang_common.wav&dir=D%3A%5Copt%5Cout&code='
					},
					{
						id: 4,
						name: '适应症', //开启后文字不显示
						value: "脑梗塞复发",
						url: 'https://guoyaoyun.obs.cn-east-3.myhuaweicloud.com/chinese_huaxiaodong_common-%E5%8F%AF%E4%BB%A5%E7%94%A8.wav'

					}, {
						id: 5,
						name: '性状', //开启后文字不显示
						value: "白色片。",
						url: 'http://192.168.3.156:22223/api/file-download?name=chinese_xiaowen_common.wav&dir=D%3A%5Copt%5Cout&code='
					}
				],
				isPlaying: false,
				isPlayingSUM: false
			}
		},
		onLoad() {
			this.audio = wx.createInnerAudioContext()
			this.audio.onPlay(() => {

				this.isPlaying = true
			});
			this.audio.onPause(() => {
				this.isPlaying = false
			});
			this.audio.onEnded(() => {
				this.isPlaying = false
			});

			this.audio.onError((err) => {
				console.error('音频播放失败', err);
			});



			this.audioSUM = wx.createInnerAudioContext()
			this.audioSUM.onEnded(() => {
				this.playNextAudio();
			});

			this.audioSUM.onError((err) => {
				console.error('音频播放失败', err);
				this.playNextAudio(); // 跳过当前音频，播放下一个
			});
		},
		methods: {
			togglePlay(url, id) {

				if (this.isPlaying && this.currentSrc === url) {
					this.audio.pause();

				} else {
					// 如果是新音频，更新音频源并播放
					if (this.currentSrc !== url) {
						this.audio.stop();
						this.audio.src = url;
						this.currentSrc = url; // 更新当前播放的音频 URL
						this.id = id; // 更新当前播放的音频 URL
					}
					this.audio.play(); // 开始播放
				}
			},
			openvice() {
				this.sumUrl = this.list.map((e) => e.url)
				if (this.isPlayingSUM) {
					this.audioSUM.pause();
					this.isPlayingSUM = false
				} else {
					if (this.currentIndex != this.sumUrl.length && this.currentIndex > 0) {
						this.audioSUM.play();
						this.isPlayingSUM = true


					} else {
						this.currentIndex = 0
						this.isPlayingSUM = true
						this.playNextAudio();
					}

				}
			},
			playNextAudio() {
				// 检查是否还有音频需要播放
				if (!this.isPlayingSUM || this.currentIndex >= this.sumUrl.length) {
					this.isPlayingSUM = false
					console.log('所有音频播放完成');
					return;
				}
				// 设置音频 URL 并播放
				this.audioSUM.src = this.sumUrl[this.currentIndex];
				this.audioSUM.play();
				console.log(`正在播放第 ${this.currentIndex + 1} 个音频`);
				this.currentIndex = this.currentIndex + 1

			},
			// 计算两指之间的距离
			getDistance(touch1, touch2) {
				const dx = touch2.clientX - touch1.clientX;
				const dy = touch2.clientY - touch1.clientY;
				return Math.sqrt(dx * dx + dy * dy);
			},
			// 记录初始双指距离
			onTouchStart(e) {
				if (e.touches.length === 2) {
					const [touch1, touch2] = e.touches;
					this.initialDistance = this.getDistance(touch1, touch2);
				}
			},
			// 根据缩放比例调整字体大小
			onTouchMove(e) {
				if (e.touches.length === 2) {
					const [touch1, touch2] = e.touches;
					const currentDistance = this.getDistance(touch1, touch2);

					if (this.initialDistance) {
						// 计算缩放比例
						const scale = currentDistance / this.initialDistance;

						// 计算新的字体大小，并限制范围
						let newFontSize = this.fontSize * scale;
						newFontSize = Math.max(10, Math.min(50, newFontSize));

						// 更新字体大小
						this.fontSize = newFontSize;
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.listText {
		padding: 20rpx;

		.desc {
			padding: 10rpx 30rpx;
		}
	}

	.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-size: 36rpx;
		color: #000000;
		font-weight: bolder;
		margin: 10px;
	}

	.title2 {
		font-size: 22rpx;
		color: #000000;
		font-weight: bolder;
		margin: 5px;
	}
</style>