veterans_H5/h5_web/pages/recruitStudents/recruitStudents.vue

<!-- 招生简章 -->
<template>
	<view class="recruit">

		<!-- 导航栏 -->
		<u-navbar title="" :background="background" title-color="#fff" back-icon-color="#fff">
			<view class="navbar-right" slot="right" @click="downloadFile(info)" v-if="info.regulation_file">
				<u-image src="../../static/img/attachment.png" width="26" height="28" />
				<text>下载附件</text>
			</view>
		</u-navbar>

		<view class="recruit-content">
			<view class="recruit-content-name">{{ info.schoolName }}</view>
			<view class="recruit-content-box">
				<u-parse :html="info.content"></u-parse>
			</view>
		</view>
		<u-popup v-model="show" mode="center" :mask-close-able="false" border-radius="20" :closeable="closeable" width="300rpx" height="300rpx">
			<view class="progress">
				<u-circle-progress type="primary" :percent="downloadProgress" duration="100">
					<view>{{ downloadProgress }}%</view>
				</u-circle-progress>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#496857'
				},
				info: {
					schoolName: '',
					content: '',
					regulation_file: ''
				},
				downloadProgress: 0,
				show: false,
				closeable: false
			}
		},
		onLoad(page) {
			if (page.id) {
				this.info.schoolName = page.name;
				this.getSchoolIntroduction(page.id);
			}
		},
		methods: {
			/**
			 * @param {Object} id
			 */
			getSchoolIntroduction(id) {
				this.$u.api.school.getSchoolIntroduction({ id }).then(res => {
					if (res.code === 200) {
						this.info.content = res.data.regulation
						this.info.regulation_file = res.data.regulation_file
					}
				})
			},
			downloadFile(info) {
				this.show = true
				this.closeable = false
				const downloadTask = uni.downloadFile({
					url: info.regulation_file,
					success: (e) => {
						if (e.statusCode === 200) {
							console.log('下载成功', e.tempFilePaths)
							this.closeable = true
						}
					},
					fail: (err) => {
						console.log(err)
					}
				});
				downloadTask.onProgressUpdate((res) => {
					console.log('下载进度' + res.progress);
					this.downloadProgress = res.progress
					console.log('已经下载的数据长度' + res.totalBytesWritten);
					console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './recruitStudents.scss';
</style>