<!-- components/DownloadProgress.vue -->
<template>
  <view v-if="showProgress" class="download-progress-container">
    <text class="progress-text">下载进度: {{ progress }}%</text>
    <view class="progress-bar-container">
      <view class="progress-bar" :style="{ width: progress + '%', backgroundColor: '#2979ff' }"></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0
    },
    showProgress: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.download-progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.progress-text {
  color: #333;
  margin-bottom: 10px;
}

.progress-bar-container {
  width: 80%;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  transition: width 0.3s ease-in-out;
}
</style>

<template>
  <view class="mycontainer">
    <!-- ...其他内容... -->
    <DownloadProgress :progress="downloadProgress" :show-progress="isDownloading" />
    <!-- ...其他内容... -->
  </view>
</template>

<script>
import DownloadProgress from '@/components/DownloadProgress.vue';

export default {
  components: {
    DownloadProgress
  },
  data() {
    return {
      downloadProgress: 0,
      isDownloading: false,
      // ...其他数据...
    };
  },
  methods: {
    // ...其他方法...

    downloadFile(software, downloadUrl) {
      const extension = downloadUrl.substring(downloadUrl.lastIndexOf('.') + 1).toLowerCase();
      const isH5 = process.env.UNI_PLATFORM === 'h5';

      this.isDownloading = true; // 开始下载

      const downloadTask = uni.downloadFile({
        url: downloadUrl,
        success: res => {
          // ...下载成功的处理...
        },
        fail: err => {
          // ...下载失败的处理...
          this.isDownloading = false; // 结束下载
        }
      });

      downloadTask.onProgressUpdate((res) => {
        this.downloadProgress = res.progress; // 更新下载进度
      });
    },

    // ...其他methods方法...
  },
  // ...其他选项...
};
</script>

methods: {
  downloadFile(software, downloadUrl) {
    const extension = downloadUrl.substring(downloadUrl.lastIndexOf('.') + 1).toLowerCase();
    const isH5 = process.env.UNI_PLATFORM === 'h5';

    if (isH5) {
      // H5 平台下载逻辑
    } else {
      switch (extension) {
        case 'apk':
          // APK 文件的下载逻辑
          this.downloadApk(software, downloadUrl);
          break;
        case 'exe':
          // EXE 文件的下载逻辑
          this.downloadExe(software, downloadUrl);
          break;
        // ...其他文件类型...
      }
    }
  },

  downloadApk(software, downloadUrl) {
    // ...APK文件下载逻辑，使用uni.downloadFile...
  },

  downloadExe(software, downloadUrl) {
    // ...EXE文件下载逻辑，可能需要复制链接到剪贴板等...
  },

  // ...其他方法...
}