换皮test1.3

音频动效的添加

pages/nearbystores/index.vue

@@ -18,11 +18,22 @@
 				</view>
 			</view>
 		</view>
-		<!-- 右侧图标 -->
+		<!-- 音频与VR图标 -->
 		<view class="tubiao">
 			<view class="">
-				<image v-if="pageConfig.topIcons.leftIcon.hidden" :src="pageConfig.topIcons.leftIcon.img" mode=""></image>
-				<image :src="pageConfig.topIcons.rightIcon.img" mode=""></image>
+				<image 
+					v-if="pageConfig.topIcons.leftIcon.hidden" 
+					:src="pageConfig.topIcons.leftIcon.img" 
+					mode=""
+					@click="playAudio"
+					:class="{ 'playing': isAudioPlaying }"
+				></image>
+				<image 
+					:src="pageConfig.topIcons.rightIcon.img" 
+					mode=""
+					@click="stopAudio"
+					:class="{ 'stopped': !isAudioPlaying }"
+				></image>
 			</view>
 			<view class="tubiao-item">
 				<image :src="pageConfig.topIcons.bottomIcon.img" mode=""></image>
@@ -377,6 +388,82 @@ import { getArticleById } from "../../api/article/article.js";
 						icon: 'none'
 					});
 				}
+			},
+			
+			/**
+			 * 播放音频
+			 */
+			playAudio() {
+				if (!this.templeData.audioUrl) {
+					uni.showToast({
+						title: '暂无音频资源',
+						icon: 'none'
+					});
+					return;
+				}
+				
+				try {
+					// 如果已经在播放，先停止
+					if (this.audioContext) {
+						this.stopAudio();
+					}
+					
+					// 创建音频上下文
+					this.audioContext = uni.createInnerAudioContext();
+					this.audioContext.src = this.templeData.audioUrl;
+					this.audioContext.loop = true; // 循环播放
+					
+					// 监听播放状态
+					this.audioContext.onPlay(() => {
+						console.log('音频开始播放');
+						this.isAudioPlaying = true;
+						uni.showToast({
+							title: '音频已开启',
+							icon: 'none'
+						});
+					});
+					
+					this.audioContext.onError((err) => {
+						console.error('音频播放错误:', err);
+						this.isAudioPlaying = false;
+						uni.showToast({
+							title: '音频播放失败',
+							icon: 'none'
+						});
+					});
+					
+					this.audioContext.onEnded(() => {
+						console.log('音频播放结束');
+						this.isAudioPlaying = false;
+					});
+					
+					// 开始播放
+					this.audioContext.play();
+					
+				} catch (error) {
+					console.error('音频播放失败:', error);
+					this.isAudioPlaying = false;
+					uni.showToast({
+						title: '音频播放失败',
+						icon: 'none'
+					});
+				}
+			},
+			
+			/**
+			 * 停止音频
+			 */
+			stopAudio() {
+				if (this.audioContext) {
+					this.audioContext.stop();
+					this.audioContext.destroy();
+					this.audioContext = null;
+				}
+				this.isAudioPlaying = false;
+				uni.showToast({
+					title: '音频已关闭',
+					icon: 'none'
+				});
 			}
 		}
 	}
@@ -537,11 +624,39 @@ import { getArticleById } from "../../api/article/article.js";
 		padding: 0 30rpx;
 		box-sizing: border-box;
 		justify-content: space-between;
-		image{
-			width: 82rpx;
-			height: 82rpx;
-			display: block;
-			margin-top: 50rpx;
+		view {
+			image{
+				width: 82rpx;
+				height: 82rpx;
+				display: block;
+				margin-top: 50rpx;
+				transition: all 0.3s ease;
+				
+				&:active {
+					transform: scale(0.9);
+					opacity: 0.8;
+				}
+				
+				&.playing {
+					animation: pulse 2s infinite;
+				}
+				
+				&.stopped {
+					opacity: 0.6;
+				}
+			}
+		}
+	}
+	
+	@keyframes pulse {
+		0% {
+			transform: scale(1);
+		}
+		50% {
+			transform: scale(1.1);
+		}
+		100% {
+			transform: scale(1);
 		}
 	}
 	.announcement {