v1.1.4

1、前门模块播放/停止按钮逻辑更换
2、抽奖对话框封装为组件形式，临时版本

components/LotteryFormModal.vue

@@ -0,0 +1,292 @@
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['close', 'submit'])
+
+// 表单数据
+const formData = ref({
+  name: '',
+  phone: '',
+  address: '',
+  msg: ''
+})
+
+// 监听 visible 变化，打开时重置表单
+watch(() => props.visible, (newVal) => {
+  if (newVal) {
+    formData.value = {
+      name: '',
+      phone: '',
+      address: '',
+      msg: ''
+    }
+  }
+})
+
+// 关闭页面
+const handleClose = () => {
+  emit('close')
+}
+
+// 提交表单
+const handleSubmit = () => {
+  // 验证表单
+  if (!formData.value.name || !formData.value.phone || !formData.value.address) {
+    uni.showToast({
+      title: '请填写完整信息',
+      icon: 'none',
+      duration: 2000
+    })
+    return
+  }
+  
+  // 验证手机号
+  const phoneRegex = /^1[3-9]\d{9}$/
+  if (!phoneRegex.test(formData.value.phone)) {
+    uni.showToast({
+      title: '请输入正确的手机号',
+      icon: 'none',
+      duration: 2000
+    })
+    return
+  }
+  
+  // 验证留言
+  if (!formData.value.msg || formData.value.msg.trim() === '') {
+    uni.showToast({
+      title: '请输入留言',
+      icon: 'none',
+      duration: 2000
+    })
+    return
+  }
+  
+  // 验证留言长度
+  const msgLength = formData.value.msg.length
+  if (msgLength > 200) {
+    uni.showToast({
+      title: '留言最多200个汉字',
+      icon: 'none',
+      duration: 2000
+    })
+    return
+  }
+  
+  emit('submit', { ...formData.value })
+}
+</script>
+
+<template>
+  <div class="info-page" v-if="visible">
+    <!-- 背景图片 -->
+    <div class="bg-container">
+      <img src="/static/info/info_bg.jpg" class="bg-image" mode="aspectFill" />
+    </div>
+    
+    <!-- 返回按钮 -->
+    <div class="back-btn" @click="handleClose">
+      <img src="/static/images/btn_back.png" class="back-icon" />
+    </div>
+    
+    <!-- 标题 -->
+    <div class="title-container">
+      <img src="/static/info/info_title.png" class="title-image" />
+    </div>
+    
+    <!-- 信息提示 -->
+    <div class="tips-container">
+      <img src="/static/info/info_tips.png" class="tips-image" />
+    </div>
+    
+    <!-- 表单区域 -->
+    <div class="form-container">
+      <div class="form-item">
+        <label class="form-label">姓名：</label>
+        <input 
+          v-model="formData.name" 
+          type="text" 
+          placeholder="请输入您的姓名" 
+          class="form-input"
+        />
+      </div>
+      
+      <div class="form-item">
+        <label class="form-label">联系电话：</label>
+        <input 
+          v-model="formData.phone" 
+          type="tel" 
+          placeholder="请输入您的手机号" 
+          class="form-input"
+        />
+      </div>
+      
+      <div class="form-item">
+        <label class="form-label">联系地址：</label>
+        <input 
+          v-model="formData.address" 
+          type="text" 
+          placeholder="请输入您的邮寄地址" 
+          class="form-input"
+          maxlength="100"
+        />
+      </div>
+      
+      <div class="form-item">
+        <label class="form-label">留言：</label>
+        <textarea 
+          v-model="formData.msg" 
+          placeholder="请输入您的留言" 
+          class="form-textarea"
+          rows="3"
+          maxlength="200"
+        ></textarea>
+        <span class="char-count">{{ formData.msg.length }}/200</span>
+      </div>
+    </div>
+    
+    <!-- 提交按钮 -->
+    <div class="submit-container">
+      <img 
+        src="/static/images/btn_submit.png" 
+        class="submit-btn-image" 
+        @click="handleSubmit"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.info-page {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1000;
+  overflow: hidden;
+}
+
+/* 背景图片 */
+.bg-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.bg-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 返回按钮 */
+.back-btn {
+  position: absolute;
+  top: 60rpx;
+  left: 30rpx;
+  z-index: 10;
+}
+
+.back-icon {
+  width: 68rpx;
+  height: 68rpx;
+}
+
+/* 标题 */
+.title-container {
+  display: flex;
+  justify-content: center;
+  padding-top: 120rpx;
+  margin-bottom: 30rpx;
+}
+
+.title-image {
+  width: 544rpx;
+  height: 213rpx;
+}
+
+/* 信息提示 */
+.tips-container {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 40rpx;
+}
+
+.tips-image {
+  width: 697rpx;
+  height: 258rpx;
+}
+
+/* 表单区域 */
+.form-container {
+  padding: 0 50rpx;
+}
+
+.form-item {
+  margin-bottom: 20rpx;
+  position: relative;
+}
+
+.form-label {
+  display: block;
+  color: #fff;
+  font-size: 28rpx;
+  margin-bottom: 10rpx;
+  font-weight: 500;
+}
+
+.form-input,
+.form-textarea {
+  width: 100%;
+  padding: 20rpx;
+  border: none;
+  border-radius: 10rpx;
+  font-size: 28rpx;
+  background-color: #fff;
+  box-sizing: border-box;
+}
+
+.form-input {
+  height: 80rpx;
+}
+
+.form-textarea {
+  min-height: 120rpx;
+  resize: none;
+}
+
+.char-count {
+  position: absolute;
+  right: 20rpx;
+  bottom: 20rpx;
+  color: #999;
+  font-size: 24rpx;
+}
+
+/* 提交按钮 */
+.submit-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 40rpx;
+}
+
+.submit-btn-image {
+  width: 306rpx;
+  height: 97rpx;
+  cursor: pointer;
+}
+
+.submit-btn-image:active {
+  transform: scale(0.98);
+}
+</style>

components/QianmenScene.vue

@@ -175,7 +175,7 @@ onUnmounted(() => {
     <!-- 音乐控制按钮 -->
     <div class="music-control" @click="toggleMusic">
       <img 
-        src="/static/images/icon_music.png" 
+        :src="isMusicPlaying ? '/static/images/icon_music2.png' : '/static/images/icon_music1.png'" 
         alt="音乐控制" 
         class="music-icon"
         :class="{ 'playing': isMusicPlaying }"

components/SinglePageContainer.vue

@@ -11,6 +11,7 @@ import LongfusiScene from './LongfusiScene.vue'
 import WangfujingScene from './WangfujingScene.vue'
 import ChongwenScene from './ChongwenScene.vue'
 import EndPage from './EndPage.vue'
+import LotteryFormModal from './LotteryFormModal.vue'
 
 const sceneStore = useSceneStore()
 const collectionStore = useCollectionStore()
@@ -41,12 +42,7 @@ const showCoupletDisplay = ref(false)
 const coupletKeyword = ref('')
 // 生成的春联
 const generatedCouplet = ref(null)
-// 抽奖表单数据
+
-const lotteryForm = ref({
-  name: '',
-  phone: '',
-  address: ''
-})
 
 // 推荐关键词
 const recommendedKeywords = ref(['吉祥', '如意', '平安', '健康', '幸福', '快乐', '富贵', '安康'])
@@ -344,29 +340,13 @@ const openLotteryForm = () => {
   showLotteryForm.value = true
 }
 
+// 关闭抽奖留资弹窗
+const closeLotteryForm = () => {
+  showLotteryForm.value = false
+}
+
 // 提交抽奖表单
-const submitLotteryForm = () => {
+const submitLotteryForm = (formData) => {
-  // 验证表单
-  if (!lotteryForm.value.name || !lotteryForm.value.phone || !lotteryForm.value.address) {
-    uni.showToast({
-      title: '请填写完整信息',
-      icon: 'none',
-      duration: 2000
-    })
-    return
-  }
-  
-  // 验证手机号
-  const phoneRegex = /^1[3-9]\d{9}$/
-  if (!phoneRegex.test(lotteryForm.value.phone)) {
-    uni.showToast({
-      title: '请输入正确的手机号',
-      icon: 'none',
-      duration: 2000
-    })
-    return
-  }
-  
   // 模拟提交
   uni.showLoading({
     title: '提交中...',
@@ -380,12 +360,6 @@ const submitLotteryForm = () => {
       duration: 2000
     })
     showLotteryForm.value = false
-    // 重置表单
-    lotteryForm.value = {
-      name: '',
-      phone: '',
-      address: ''
-    }
   }, 1500)
 }
 
@@ -580,33 +554,11 @@ onUnmounted(() => {
       </div> -->
 
     <!-- 抽奖留资弹窗 -->
-    <div class="form-modal" v-if="showLotteryForm">
+    <LotteryFormModal
-      <div class="modal-overlay" @click="showLotteryForm = false"></div>
+      :visible="showLotteryForm"
-      <div class="modal-content">
+      @close="closeLotteryForm"
-        <div class="modal-header">
+      @submit="submitLotteryForm"
-          <h3>参与抽奖</h3>
+    />
-          <button class="close-btn" @click="showLotteryForm = false">×</button>
-        </div>
-        <div class="modal-body">
-          <p class="modal-description">请填写以下信息，参与线下抽奖活动</p>
-          <div class="form-group">
-            <label>姓名</label>
-            <input v-model="lotteryForm.name" type="text" placeholder="请输入您的姓名" class="form-input" />
-          </div>
-          <div class="form-group">
-            <label>联系电话</label>
-            <input v-model="lotteryForm.phone" type="tel" placeholder="请输入您的手机号" class="form-input" />
-          </div>
-          <div class="form-group">
-            <label>邮寄地址</label>
-            <textarea v-model="lotteryForm.address" placeholder="请输入您的邮寄地址" class="form-textarea" rows="3"></textarea>
-          </div>
-          <div class="form-actions">
-            <button class="submit-btn" @click="submitLotteryForm">提交报名</button>
-          </div>
-        </div>
-      </div>
-    </div>
 
     <!-- AI春联生成弹窗 -->
     <div class="form-modal" v-if="showAICoupletForm">