Browse Source

feat:静态页面修改 音乐页面修改

PIWALIN 1 tuần trước cách đây
mục cha
commit
d8a0bacc26

+ 20 - 11
src/pages/music/component/musicPlayback.vue

@@ -111,8 +111,15 @@
 <script setup>
   import { ref } from 'vue'
   const song = ref({})
+  const audioSrc = ref('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3') // 替换为你的音频文件路径
   const isPlaying = ref(false) // 用来标识播放状态
-
+  const audio = uni.createInnerAudioContext()
+  audio.autoplay = true
+  onLoad((query) => {
+    if (query.songDate) {
+      song.value = JSON.parse(decodeURIComponent(query.songDate))
+    }
+  })
   //   实现返回逻辑
   const goBack = () => {
     uni.navigateBack()
@@ -123,7 +130,8 @@
   }
   // 循环播放
   const palyCycleBtn = () => {
-    console.log('循环播放')
+    audio.loop = true
+    console.log('循环播放', audio.loop)
   }
   // 上一曲
   const previousSongBtn = () => {
@@ -135,15 +143,16 @@
   }
   // 实现播放/暂停切换逻辑
   const togglePlayPause = () => {
+    if (isPlaying.value) {
+      audio.autoplay = true
+      audio.src = audioSrc.value
+      console.log('innerAudioContext0', audio)
+    } else {
+      audio.autoplay = false
+      audio.src = audioSrc.value
+    }
     isPlaying.value = !isPlaying.value
-    console.log('控制播放')
   }
-
-  onLoad((query) => {
-    if (query.songDate) {
-      song.value = JSON.parse(decodeURIComponent(query.songDate))
-    }
-  })
 </script>
 
 <style scoped lang="scss">
@@ -187,7 +196,7 @@
 
   .song-title {
     margin: 0;
-    font-size: 1.5rem;
+    font-size: 40rpx;
     font-weight: 500;
     color: #333;
   }
@@ -218,7 +227,7 @@
   .time-info {
     display: flex;
     justify-content: space-between;
-    font-size: 0.875rem;
+    font-size: 24rpx;
     color: #666;
   }
   //   <!-- 上一曲下一曲播放 -->

+ 10 - 2
src/pages/music/component/musicRecommend.vue

@@ -27,7 +27,7 @@
           <image v-if="isRePaly" class="palyIcon" src="/src/static/icon/fi-rr-play.svg"></image>
           <image v-else class="imgIcon" src="/src/static/icon/fi-rr-pause.svg"></image>
         </view>
-        <text class="text-gray">继续播放: {{ songTitle }}</text>
+        <text class="text-paly">继续播放: {{ songTitle }}</text>
       </view>
       <view style="display: flex; gap: 80rpx">
         <image
@@ -169,6 +169,14 @@
 
   .text-gray {
     padding-left: 25rpx;
+    font-size: 32rpx;
+    color: #333;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .text-paly {
+    padding-left: 25rpx;
     font-size: 24rpx;
     color: #333;
     overflow: hidden;
@@ -180,7 +188,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 16rpx 32rpx;
+    padding: 0rpx 32rpx;
     background: #fff;
     border-bottom: 2rpx solid #f0f0f0;
     .currently-playing-left {

+ 5 - 5
src/pages/music/music.vue

@@ -47,17 +47,17 @@
   .wd-search {
     width: 100%;
   }
+  .music-recommend {
+    overflow: auto;
+    height: calc(100vh - 320rpx);
+    background: #f2f2f2;
+  }
   ::v-deep .wd-search__block {
     border-radius: 50px;
   }
   ::v-deep .wd-search__input {
     height: 42px;
   }
-  .music-recommend {
-    overflow: auto;
-    height: calc(100vh - 320rpx);
-    background: #f2f2f2;
-  }
   ::v-deep .wd-tabs__line {
     background: #f88842;
   }

+ 10 - 35
src/pages/myUser/component/babyInformation.vue

@@ -21,21 +21,19 @@
       <view class="card-container" @click="photoBtn">
         <view class="info-profile"><image :src="camera" /></view>
         <view class="info-camera">
-          <!-- <image src="/src/static/icon/camera.svg" /> -->
+          <image src="/src/static/icon/camera.svg" />
         </view>
       </view>
       <view class="card-item">
         <!-- 昵称 -->
-        <view class="section">
-          <view class="section-left">
-            <view class="label">宝宝昵称</view>
-            <view class="nickname">
-              <wd-input v-model="nicknameValue" placeholder="请输入昵称" />
-            </view>
-          </view>
-        </view>
+        <ItemForm label="宝宝昵称" :required="true">
+          <template #default>
+            <wd-input v-model="nicknameValue" placeholder="请输入昵称" />
+          </template>
+        </ItemForm>
+
         <!-- 性别 -->
-        <ItemForm label="宝宝性别">
+        <ItemForm label="宝宝性别" :required="true">
           <template #default>
             <pickerUser
               :columns="columns"
@@ -46,7 +44,7 @@
           </template>
         </ItemForm>
         <!-- 生日 -->
-        <ItemForm label="宝宝生日">
+        <ItemForm label="宝宝生日" :required="true">
           <template #default>
             <wd-datetime-picker type="date" v-model="datetimeValue" @confirm="handleTimes" />
           </template>
@@ -69,7 +67,7 @@
       <wd-button @click="addBaby">保存</wd-button>
     </view>
     <view class="baby-Bottom" v-else>
-      <wd-button @click="startBtn">开始育</wd-button>
+      <wd-button @click="startBtn">开始育</wd-button>
     </view>
     <wd-message-box />
   </view>
@@ -198,29 +196,6 @@
   }
   .card-item {
     background: #fff;
-    .section {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 12rpx 32rpx 32rpx 32rpx;
-      border-bottom: 1px solid #f1f5f9;
-    }
-    .section-left {
-      width: 100%;
-      height: 120rpx;
-    }
-
-    .label {
-      height: 60rpx;
-      font-size: 1rem;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 48rpx;
-    }
-    .nickname {
-      height: 60rpx;
-      font-size: 28rpx;
-    }
   }
   .baby-Bottom {
     display: flex;

+ 2 - 0
src/pages/myUser/component/messageCenter.vue

@@ -46,6 +46,7 @@
   .message-time {
     margin-bottom: 24rpx;
     text-align: center;
+    font-size: 24rpx;
   }
 
   .message-card {
@@ -60,6 +61,7 @@
     align-items: center;
     min-height: 70rpx;
     border-bottom: 2rpx solid #f2f2f2;
+    font-weight: 600;
   }
 
   .message-text {

BIN
src/static/Song.mp3