Просмотр исходного кода

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

PIWALIN 1 неделя назад
Родитель
Сommit
7097dbc95b

+ 18 - 7
src/pages/music/component/musicPlayback.vue

@@ -44,11 +44,19 @@
         </view>
         <!-- 进度条时间 -->
         <view class="progress-container">
-          <view class="progress-bar">
-            <view class="progress-current"></view>
-          </view>
+          <!-- <view class="progress-bar"> -->
+          <!-- <view class="progress-current"></view> -->
+          <input
+            type="range"
+            v-model="currentTime"
+            :max="duration"
+            step="0.1"
+            @input="onSliderChange"
+            class="slider"
+          />
+          <!-- </view> -->
           <view class="time-info">
-            <text class="current-time">00:00</text>
+            <text class="current-time">{{ audio.startTime }}</text>
             <text class="total-time">{{ song.duration }}</text>
           </view>
         </view>
@@ -112,7 +120,8 @@
   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 isPlaying = ref(true) // 用来标识播放状态
+  const currentTime = ref(0)
   const audio = uni.createInnerAudioContext()
   audio.autoplay = true
   onLoad((query) => {
@@ -131,7 +140,9 @@
   // 循环播放
   const palyCycleBtn = () => {
     audio.loop = true
-    console.log('循环播放', audio.loop)
+    audio.autoplay = true
+    audio.src = audioSrc.value
+    isPlaying.value = true
   }
   // 上一曲
   const previousSongBtn = () => {
@@ -146,12 +157,12 @@
     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(audio.currentTime)
   }
 </script>
 

+ 1 - 1
src/pages/music/component/musicRecommend.vue

@@ -25,7 +25,7 @@
       <view class="currently-playing-left">
         <view class="play-circle" @click="palyBtn">
           <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>
+          <image v-else class="palyIcon" src="/src/static/icon/fi-rr-pause.svg"></image>
         </view>
         <text class="text-paly">继续播放: {{ songTitle }}</text>
       </view>

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

@@ -47,6 +47,7 @@
     margin-bottom: 24rpx;
     text-align: center;
     font-size: 24rpx;
+    color: #666;
   }
 
   .message-card {

+ 7 - 9
src/pages/myUser/component/setFocus.vue

@@ -12,14 +12,7 @@
       <view class="section" @click="nicknameBtn">
         <view class="section-left">更换手机号码</view>
         <view class="nickname">
-          <view class="phone">
-            <wd-input
-              type="text"
-              v-model="phoneValue"
-              placeholder="请输入用户名"
-              @change="handleChange"
-            />
-          </view>
+          <view @click="phoneBtn" class="phone">1985258225</view>
           <view>
             <image style="width: 48rpx; height: 48rpx" src="/src/static/icon/chevron-right.svg" />
           </view>
@@ -40,7 +33,12 @@
   import { useMessage } from 'wot-design-uni'
   const phoneValue = ref('')
   const message = useMessage()
-
+  const phoneBtn = () => {
+    console.log('更换手机号')
+    uni.navigateTo({
+      url: '/pages/myUser/component/replacePhone',
+    })
+  }
   const cleanBtn = () => {
     console.log('清楚缓存')
   }

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

@@ -117,6 +117,7 @@
   }
 
   .label {
+    color: #333;
     height: 60rpx;
     font-size: 32rpx;
     font-style: normal;
@@ -153,6 +154,7 @@
   .gender {
     padding: 10rpx 0px;
     font-size: 28rpx;
+    color: #333;
   }
   ::v-deep .wd-picker__cell {
     padding: 12rpx 0px;

+ 2 - 2
src/pages/myUser/myuser.vue

@@ -124,7 +124,7 @@
 
   .user-id {
     margin-top: 0.75rem;
-    color: #4b5563;
+    color: #333;
   }
 
   .menu-list {
@@ -143,6 +143,6 @@
   .menu-label {
     flex: 1;
     margin-left: 0.75rem;
-    color: #374151;
+    color: #333;
   }
 </style>