wui-components-v2 1.1.70 → 1.1.72

package/components/audio-play/audio-play.vue

@@ -1,220 +1,220 @@
-<script setup lang="ts">
-import { computed, defineEmits, defineExpose, defineOptions, defineProps, ref, watch } from 'vue'
-import { useManualTheme } from '../../composables/useManualTheme'
-
-defineOptions({
-  name: 'AudioPlay',
-})
-const props = defineProps({
-  src: {
-    type: String,
-    required: true,
-  },
-  autoplay: {
-    type: Boolean,
-    default: false,
-  },
-})
-const emit = defineEmits(['play', 'pause'])
-const { primary } = useManualTheme()
-const innerAudioContext = ref<UniApp.InnerAudioContext | null>(null)
-const isPlaying = ref(false)
-const currentTime = ref(0)
-const duration = ref(0)
-
-// 计算进度百分比
-const progressPercent = computed(() => {
-  return duration.value > 0 ? (currentTime.value / duration.value) * 100 : 0
-})
-
-// 格式化时间显示
-function formatTime(seconds: any) {
-  if (Number.isNaN(seconds))
-    return '00:00'
-  const mins = Math.floor(seconds / 60)
-  const secs = Math.floor(seconds % 60)
-  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
-}
-
-// 初始化音频
-function initAudio() {
-  innerAudioContext.value = uni.createInnerAudioContext()
-  innerAudioContext.value.src = props.src
-  innerAudioContext.value.autoplay = props.autoplay
-
-  innerAudioContext.value.onPlay(() => {
-    isPlaying.value = true
-    emit('play')
-  })
-
-  innerAudioContext.value.onPause(() => {
-    isPlaying.value = false
-    emit('pause')
-  })
-
-  innerAudioContext.value.onTimeUpdate(() => {
-    currentTime.value = innerAudioContext.value?.currentTime || 0
-    duration.value = innerAudioContext.value?.duration || 0
-  })
-
-  innerAudioContext.value.onError((err) => {
-    isPlaying.value = false
-    console.error('播放错误:', err)
-  })
-
-  innerAudioContext.value.onEnded(() => {
-    isPlaying.value = false // 更新状态
-    currentTime.value = 0 // 重置进度
-    // emit('ended');          // 通知父组件
-  })
-}
-
-// 播放控制
-function play() {
-  if (!innerAudioContext.value)
-    initAudio()
-  innerAudioContext.value?.play()
-}
-
-function pause() {
-  if (innerAudioContext.value) {
-    innerAudioContext.value.pause()
-  }
-}
-
-function togglePlay() {
-  if (isPlaying.value) {
-    pause()
-  }
-  else {
-    play()
-  }
-}
-
-// 监听src变化
-watch(() => props.src, (newVal) => {
-  if (innerAudioContext.value) {
-    innerAudioContext.value.src = newVal
-  }
-  else {
-    initAudio()
-  }
-})
-
-// 暴露方法
-defineExpose({
-  play,
-  pause,
-  isPlaying,
-})
-
-// 初始化
-initAudio()
-</script>
-
-<template>
-  <view class="mini-audio-player">
-    <!-- 播放/暂停按钮 -->
-    <button class="mini-play-btn" :style="{ background: primary }" @click="togglePlay">
-      <wd-icon v-if="isPlaying" name="pause" size="22px" color="#fff" />
-      <wd-icon v-else name="play" size="22px" color="#fff" />
-    </button>
-
-    <!-- 时间显示 -->
-    <text class="time-display">
-      {{ formatTime(currentTime) }}
-    </text>
-
-    <!-- 迷你进度条 -->
-    <view class="mini-progress">
-      <view class="mini-progress-bar" :style="{ width: `${progressPercent}%`, background: primary }" />
-    </view>
-
-    <!-- 总时间 -->
-    <text class="time-display">
-      {{ formatTime(duration) }}
-    </text>
-  </view>
-</template>
-
-<style scoped>
-.mini-audio-player {
-    display: flex;
-    align-items: center;
-    height: 36px;
-    background-color: #f5f5f5;
-    border-radius: 18px;
-    padding: 0 5px;
-    width: 180px;
-}
-
-.mini-play-btn {
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    background: #1890ff;
-    border: none;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 8px;
-}
-
-.mini-icon {
-    width: 12px;
-    height: 12px;
-    position: relative;
-    margin-left: 1px;
-}
-
-.mini-icon::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    border-top: 6px solid transparent;
-    border-bottom: 6px solid transparent;
-    border-left: 10px solid white;
-}
-
-.mini-icon.playing::before,
-.mini-icon.playing::after {
-    content: '';
-    position: absolute;
-    width: 3px;
-    height: 12px;
-    background: white;
-}
-
-.mini-icon.playing::before {
-    left: 3px;
-}
-
-.mini-icon.playing::after {
-    left: 8px;
-}
-
-.mini-progress {
-    flex: 1;
-    height: 3px;
-    background: #d9d9d9;
-    border-radius: 2px;
-    overflow: hidden;
-    margin: 0 8px;
-}
-
-.mini-progress-bar {
-    height: 100%;
-    background: #1890ff;
-    transition: width 0.3s ease;
-}
-
-.time-display {
-    font-size: 10px;
-    color: #666;
-    min-width: 32px;
-    text-align: center;
-    font-family: monospace;
-}
-</style>
+<script setup lang="ts">
+import { computed, defineEmits, defineExpose, defineOptions, defineProps, ref, watch } from 'vue'
+import { useManualTheme } from '../../composables/useManualTheme'
+
+defineOptions({
+  name: 'AudioPlay',
+})
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+  autoplay: {
+    type: Boolean,
+    default: false,
+  },
+})
+const emit = defineEmits(['play', 'pause'])
+const { primary } = useManualTheme()
+const innerAudioContext = ref<UniApp.InnerAudioContext | null>(null)
+const isPlaying = ref(false)
+const currentTime = ref(0)
+const duration = ref(0)
+
+// 计算进度百分比
+const progressPercent = computed(() => {
+  return duration.value > 0 ? (currentTime.value / duration.value) * 100 : 0
+})
+
+// 格式化时间显示
+function formatTime(seconds: any) {
+  if (Number.isNaN(seconds))
+    return '00:00'
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+}
+
+// 初始化音频
+function initAudio() {
+  innerAudioContext.value = uni.createInnerAudioContext()
+  innerAudioContext.value.src = props.src
+  innerAudioContext.value.autoplay = props.autoplay
+
+  innerAudioContext.value.onPlay(() => {
+    isPlaying.value = true
+    emit('play')
+  })
+
+  innerAudioContext.value.onPause(() => {
+    isPlaying.value = false
+    emit('pause')
+  })
+
+  innerAudioContext.value.onTimeUpdate(() => {
+    currentTime.value = innerAudioContext.value?.currentTime || 0
+    duration.value = innerAudioContext.value?.duration || 0
+  })
+
+  innerAudioContext.value.onError((err) => {
+    isPlaying.value = false
+    console.error('播放错误:', err)
+  })
+
+  innerAudioContext.value.onEnded(() => {
+    isPlaying.value = false // 更新状态
+    currentTime.value = 0 // 重置进度
+    // emit('ended');          // 通知父组件
+  })
+}
+
+// 播放控制
+function play() {
+  if (!innerAudioContext.value)
+    initAudio()
+  innerAudioContext.value?.play()
+}
+
+function pause() {
+  if (innerAudioContext.value) {
+    innerAudioContext.value.pause()
+  }
+}
+
+function togglePlay() {
+  if (isPlaying.value) {
+    pause()
+  }
+  else {
+    play()
+  }
+}
+
+// 监听src变化
+watch(() => props.src, (newVal) => {
+  if (innerAudioContext.value) {
+    innerAudioContext.value.src = newVal
+  }
+  else {
+    initAudio()
+  }
+})
+
+// 暴露方法
+defineExpose({
+  play,
+  pause,
+  isPlaying,
+})
+
+// 初始化
+initAudio()
+</script>
+
+<template>
+  <view class="mini-audio-player">
+    <!-- 播放/暂停按钮 -->
+    <button class="mini-play-btn" :style="{ background: primary }" @click="togglePlay">
+      <wd-icon v-if="isPlaying" name="pause" size="22px" color="#fff" />
+      <wd-icon v-else name="play" size="22px" color="#fff" />
+    </button>
+
+    <!-- 时间显示 -->
+    <text class="time-display">
+      {{ formatTime(currentTime) }}
+    </text>
+
+    <!-- 迷你进度条 -->
+    <view class="mini-progress">
+      <view class="mini-progress-bar" :style="{ width: `${progressPercent}%`, background: primary }" />
+    </view>
+
+    <!-- 总时间 -->
+    <text class="time-display">
+      {{ formatTime(duration) }}
+    </text>
+  </view>
+</template>
+
+<style scoped>
+.mini-audio-player {
+    display: flex;
+    align-items: center;
+    height: 36px;
+    background-color: #f5f5f5;
+    border-radius: 18px;
+    padding: 0 5px;
+    width: 180px;
+}
+
+.mini-play-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: #1890ff;
+    border: none;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+}
+
+.mini-icon {
+    width: 12px;
+    height: 12px;
+    position: relative;
+    margin-left: 1px;
+}
+
+.mini-icon::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+    border-left: 10px solid white;
+}
+
+.mini-icon.playing::before,
+.mini-icon.playing::after {
+    content: '';
+    position: absolute;
+    width: 3px;
+    height: 12px;
+    background: white;
+}
+
+.mini-icon.playing::before {
+    left: 3px;
+}
+
+.mini-icon.playing::after {
+    left: 8px;
+}
+
+.mini-progress {
+    flex: 1;
+    height: 3px;
+    background: #d9d9d9;
+    border-radius: 2px;
+    overflow: hidden;
+    margin: 0 8px;
+}
+
+.mini-progress-bar {
+    height: 100%;
+    background: #1890ff;
+    transition: width 0.3s ease;
+}
+
+.time-display {
+    font-size: 10px;
+    color: #666;
+    min-width: 32px;
+    text-align: center;
+    font-family: monospace;
+}
+</style>

package/components/batch-upload-file/batch-upload-file.vue

@@ -1,75 +1,75 @@
-<script lang="ts" setup>
-import { defineEmits, defineOptions, onBeforeMount, ref } from 'vue'
-
-defineOptions({
-  name: 'BatchUploadFile',
-})
-const emit = defineEmits(['handleFileChange'])
-const fileTypes = [
-  {
-    label: '照片',
-    value: 'image',
-  },
-  {
-    label: '视频',
-    value: 'video',
-  },
-  // {
-  //   label: '文件',
-  //   value: 'file',
-  // },
-]
-const fileType = ref<any>('image')
-const show = ref(false)
-const action = ref('')
-const hydrocarbonProgramToken = ref('')
-const token = ref('')
-onBeforeMount(() => {
-  action.value = uni.getStorageSync('BASE_URL')
-  hydrocarbonProgramToken.value = uni.getStorageSync('HYDROCARBON_PROGRAM_TOKEN')
-  token.value = uni.getStorageSync('TOKEN')
-})
-function handleFileChange(e: any) {
-  console.log(e, '文件上传成功')
-  show.value = false
-  emit('handleFileChange', e)
-}
-function handleChange(e: any) {
-  console.log(e, '文件触发')
-}
-</script>
-
-<template>
-  <wd-popup v-model="show" custom-style="border-radius:32rpx;" @close="show = false">
-    <view class="p-3">
-      <wd-radio-group v-model="fileType" shape="dot">
-        <wd-radio v-for="item in fileTypes" :key="item.value" :value="item.value">
-          {{ item.label }}
-        </wd-radio>
-      </wd-radio-group>
-      <wd-upload
-        custom-class="custom-upload"
-        :multiple="true" :accept="fileType"
-        :header="{ 'hydrocarbon-program-token': hydrocarbonProgramToken, 'hydrocarbon-token': token }"
-        :action="`${action}/v3/upload`"
-        @success="(e) => { handleFileChange(e) }"
-        @change="(e) => { handleChange(e) }"
-      >
-        <view class="p-t-3">
-          <wd-button size="small" type="info" block class="w-200px">
-            确定
-          </wd-button>
-        </view>
-      </wd-upload>
-    </view>
-  </wd-popup>
-  <wd-button size="small" type="info" @click="show = true">
-    批量上传
-  </wd-button>
-</template>
-
-<style scoped>
-:deep(.custom-upload .wd-upload__preview) {
-  display: none !important;
-}
-</style>
+<script lang="ts" setup>
+import { defineEmits, defineOptions, onBeforeMount, ref } from 'vue'
+
+defineOptions({
+  name: 'BatchUploadFile',
+})
+const emit = defineEmits(['handleFileChange'])
+const fileTypes = [
+  {
+    label: '照片',
+    value: 'image',
+  },
+  {
+    label: '视频',
+    value: 'video',
+  },
+  // {
+  //   label: '文件',
+  //   value: 'file',
+  // },
+]
+const fileType = ref<any>('image')
+const show = ref(false)
+const action = ref('')
+const hydrocarbonProgramToken = ref('')
+const token = ref('')
+onBeforeMount(() => {
+  action.value = uni.getStorageSync('BASE_URL')
+  hydrocarbonProgramToken.value = uni.getStorageSync('HYDROCARBON_PROGRAM_TOKEN')
+  token.value = uni.getStorageSync('TOKEN')
+})
+function handleFileChange(e: any) {
+  console.log(e, '文件上传成功')
+  show.value = false
+  emit('handleFileChange', e)
+}
+function handleChange(e: any) {
+  console.log(e, '文件触发')
+}
+</script>
+
+<template>
+  <wd-popup v-model="show" custom-style="border-radius:32rpx;" @close="show = false">
+    <view class="p-3">
+      <wd-radio-group v-model="fileType" shape="dot">
+        <wd-radio v-for="item in fileTypes" :key="item.value" :value="item.value">
+          {{ item.label }}
+        </wd-radio>
+      </wd-radio-group>
+      <wd-upload
+        custom-class="custom-upload"
+        :multiple="true" :accept="fileType"
+        :header="{ 'hydrocarbon-program-token': hydrocarbonProgramToken, 'hydrocarbon-token': token }"
+        :action="`${action}/v3/upload`"
+        @success="(e) => { handleFileChange(e) }"
+        @change="(e) => { handleChange(e) }"
+      >
+        <view class="p-t-3">
+          <wd-button size="small" type="info" block class="w-200px">
+            确定
+          </wd-button>
+        </view>
+      </wd-upload>
+    </view>
+  </wd-popup>
+  <wd-button size="small" type="info" @click="show = true">
+    批量上传
+  </wd-button>
+</template>
+
+<style scoped>
+:deep(.custom-upload .wd-upload__preview) {
+  display: none !important;
+}
+</style>