uniapp下载时显示进度条

<template>
  <view>




    <button type="default" @click="ceshi">测试下载时显示进度条</button>
    <u-modal :show="show" title="下载中" ref="uModal" :asyncClose="true" :showConfirmButton="false">
      <u-line-progress :percentage="pg" activeColor="#ff0000"></u-line-progress>
    </u-modal>
  </view>
</template>

<script>
  let this2
  export default {
    data() {
      return {
        zj: [],
        pg: 0,
        show: false,
      }
    },
    onLoad() {
      this2 = this
    },
    methods: {
      ceshi() {
        uni.showModal({
          title: 'xxxAPP 更新',
          content: "XXXX",
          success: function(res) {
            if (res.confirm) {
              this2.show = true
              const downloadTask = uni.downloadFile({
                url: 'http://xxxx.apk',
                success: (res) => {
                  if (res.statusCode === 200) {
                    this2.show = false;
                    plus.runtime.install(res.tempFilePath, {
                      force: true
                    }, function() {
                      plus.runtime.restart();
                    }, function(e) {
                      console.log("failed: " + e.message);
                    });
                  }
                },
                fail(f) {
                  console.log("=========下载====f====", f)
                }
              });
              downloadTask.onProgressUpdate((res) => {
                console.log("========下载========", res.progress)
                this2.pg = res.progress
              });
            } else if (res.cancel) {
              console.log("取消更新")
            }
          }
        });

      },
    }
  }
</script>

<style lang="scss">

</style>