dev/dcp-app-gate/pages/service/others/myExportLog.vue

<template>
	<view class="myExportLog">
		<u-navbar :back-icon-color="'#fff'" :is-back="true" :border-bottom="true" :back-text="$t('common.Back')"
			:background="{background:'#1777FE'}" :back-text-style="{color:'#fff'}" :custom-back="back">
			<view class="search-wrap">
				<view>
					<view>
						<view style="display: inline-block;margin-left: 50%;transform: translateX(-146upx)">
							<u-icon name="play-left-fill" size="30" color="#fff" @click="yearChange('sub')"></u-icon>
							<!--							<text  @click="show=true" style="color: #fff;font-size: 34upx;margin: 0 10upx;">{{params.year}}{{$i18n.locale=='zh'?'年':'year'}}</text>-->
							<text @click="show=true"
								style="color: #fff;font-size: 34upx;margin: 0 10upx;">{{params.year}}</text>
							<u-icon name="play-right-fill" size="30" color="#fff" @click="yearChange('add')"></u-icon>
						</view>
					</view>
					<u-popup v-model="show" mode="bottom" :mask-close-able="false">
						<view style="">
							<text style="margin: 30upx;color: #1890FF;float: left;"
								@click="show=false">{{$i18n.locale=='zh'?'取消':'cancel'}}</text>
							<text style="margin: 30upx;color: #1890FF;float: right;"
								@click="btn">{{$i18n.locale=='zh'?'确定':'sure'}}</text>
							<view style="clear: both;"></view>
						</view>
						<view style="height: 600upx">
							<picker-view :indicator-style="'height: 50upx'" :value="[yearList.indexOf(params.year)]"
								@change="bindChange" class="picker-view">
								<picker-view-column>
									<!--									<view class="item" v-for="(item,index) in yearList" :key="index">{{item}}{{$i18n.locale=='zh'?'年':'year'}}</view>-->
									<view class="item" v-for="(item,index) in yearList" :key="index">{{item}}</view>
								</picker-view-column>
							</picker-view>
						</view>
					</u-popup>
				</view>
			</view>
		</u-navbar>
		<view class="log">
			<view style="height: 100%;position: relative;">

				<scroll-view scroll-y="true" class="left" :style="{height:navHeight+'px'}">
					<view v-for="(fItem, fIndex) in 12" :key="fItem+fIndex" class="row"
						:class="[fIndex===isCheckMonth ?'on':'']" @tap="showMonth(fItem,fIndex)">
						<view class="text" style="text-algin:center;">
							<text v-if="$i18n.locale=='zh'">{{ fItem }}月</text>
							<text v-if="$i18n.locale=='en'">{{ monthSimplify(monthList[fIndex]) }}</text>
						</view>
					</view>
				</scroll-view>
				<view class="right">
					<view class="box" v-if="isloading">
						<u-loading :show="true" size="40" type="primary" style="margin-top: 30upx;"></u-loading>
					</view>
					<view class="box" v-else-if="isNoData">
						<text class="text-NoData">{{ i18n('Nodataavailable') }}</text>
					</view>
					<scroll-view scroll-y v-else class="box list" :style="{height:navHeight+'px'}">
						<view class="content">
							<view v-for="(item,index) in dataList" class="oneLog">
								<view class="title">
									<text v-if="$i18n.locale=='zh'" class="text">第{{ item.backup2 }}期</text>
									<text v-if="$i18n.locale=='en'" class="text">No. {{ item.backup2 }}</text>
								</view>
								<view class="time">
									<text class="text">{{ dateFormat(item.time) }}</text>
								</view>
								<view class="download">
									<view class="btn" @click="download(item)">
										<text class="text">
											{{ i18n('resourceDetailsDownload') }}
										</text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import UNavbar from '@/components/uni-nav-bar/uni-nav-bar.vue'

	export default {
		name: "myExportLog",
		components: {
			UNavbar,
		},
		data() {
			return {
				title: '',
				dataList: [],
				params: {
					year: '',
					yearMap: '',
					month: '',
					language: this.$i18n.locale
				},
				isCheckMonth: '',
				isloading: false,
				isNoData: false,
				show: false,
				pH: 0, //窗口高度
				navHeight: 0, //元素的所需高度
				monthList: [
					'January',
					'February',
					'March',
					'April',
					'May',
					'June',
					'July',
					'August',
					'September',
					'October',
					'November',
					'December',
				]
			}
		},
		computed: {
			yearList() {
				let arr = []
				for (let i = 1950; i <= 2050; i++) {
					arr.push(i)
				}
				return arr
			}
		},
		watch: {
			'params.year'() {
				this.getByDate()
			},
			'params.month'() {
				this.getByDate()
			},
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that._data.pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					let titleH = uni.createSelectorQuery().select(".left"); //想要获取高度的元素名（class/id）
					titleH.boundingClientRect(data => {
						let pH = that._data.pH;
						that._data.navHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
					}).exec()
				}
			})
		},
		onLoad(e) {
			let date = new Date()
			this.params.year = date.getFullYear()
			this.params.month = date.getMonth() + 1
			this.isCheckMonth = Number(this.params.month) - 1
			this.params.month = this.appendZero(this.params.month)
		},
		created() {
			this.init();
		},
		onShow() {
			this.token = uni.getStorageSync('Auth-Token') ? 'Bearer ' + uni.getStorageSync('Auth-Token') : '';
			this.userId = uni.getStorageSync('user') ? JSON.parse(uni.getStorageSync('user')).id : '';
			this.init();
		},
		methods: {
			dateFormat(data) {
				return data.replace(/-/g, '/')
			},
			init() {
				this.getByDate()
			},
			bindChange(e) {
				const val = e.detail.value
				this.params.yearMap = this.yearList[val[0]]
			},
			btn() {
				this.params.year = this.params.yearMap;
				this.show = false;
			},
			yearChange(type) {
				let temp = this.params.year;
				if (type === 'sub') {
					if (this.yearList.includes(temp - 1)) {
						this.params.year = this.params.yearMap = temp - 1
					}
				}
				if (type === 'add') {
					if (this.yearList.includes(temp + 1)) {
						this.params.year = this.params.yearMap = temp + 1
					}
				}
			},
			async getByDate() {
				this.isloading = true
				this.isNoData = false
				this.dataList = []
				this.$myRequest({
					url: '/op/fileDownloads/getByDate',
					data: this.params
				}).then(res => {
					if (res.data && Array.isArray(res.data) && res.data.length > 0) {
						this.dataList = res.data
					}
				}).catch(err => {
					console.log(err)
				}).finally(() => {
					this.isloading = false
					if (this.dataList && this.dataList.length === 0) {
						this.isNoData = true
					}
				});
			},
			showMonth(item, index) {
				this.isCheckMonth = index
				this.params.month = this.appendZero(item)
				this.getByDate()
			},
			appendZero(obj) {
				if (obj < 10) {
					return '0' + obj
				} else {
					return obj
				}
			},
			download(item) {
				let _this = this
				let url = item.fileUrl.replace(/(.docx)|(.doc)$/, '.pdf'); // 前端临时修改doc、docx为pdf
				uni.downloadFile({
					url: 'https://m.geidcp.com/api/file' + url, // TODO pub路径重复
					success: (data) => {
						if (data.statusCode === 200) {
							//文件保存到本地
							uni.saveFile({
								tempFilePath: data.tempFilePath,
								success: function(res) {
									let eg = _this.$i18n.locale == 'zh' ? '文件已保存:' :
										'The file is saved:'
									uni.showToast({
										icon: 'none',
										mask: true,
										title: eg + res.savedFilePath, //保存路径
										duration: 3000,
									});
									setTimeout(() => {
										//打开文档查看
										uni.openDocument({
											filePath: res.savedFilePath,
											success: function(res) {
												// console.log('打开文档成功');
											}
										});
									}, 3000)
								}
							});
						} else {
							let eg = _this.$i18n.locale == 'zh' ? '失败请重新下载' : 'Please download again if failed'
							uni.showToast({
								icon: 'none',
								mask: true,
								title: eg,
							});
						}
					},
					fail: (err) => {
						let eg = _this.$i18n.locale == 'zh' ? '失败请重新下载' : 'Please download again if failed'
						uni.showToast({
							icon: 'none',
							mask: true,
							title: eg,
						});
					},
				});
			},
			back() {
				// #ifdef H5
				history.back()
				// #endif
				// #ifndef H5
				uni.navigateBack()
				// #endif
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
			monthSimplify(data) {
				return data.slice(0, 3)
			}
		}
	}
</script>

<style scoped lang="scss">
	uni-page-body {
		padding-top: 0;
	}

	page {
		background: #fff;
		height: 100%;
	}

	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
		color: black;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		//height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.myExportLog {
		height: 100%;
		position: relative;
	}

	.log {
		height: calc(100% - 88upx);

		.left,
		.right {
			position: absolute;
			height: 100%;
			top: 0;
			bottom: 0upx;
		}

		.left {
			width: 24%;
			left: 0upx;
			background: #fff;

		}

		.right {
			width: 76%;
			left: 24%;
			background-color: #f6f7f9;
			margin-left: 0;
			padding: 0 20upx;
		}

		.row {
			width: 100%;
			height: 90upx;
			display: flex;
			align-items: center;

			.text {
				width: 100%;
				position: relative;
				font-size: 28upx;
				display: flex;
				justify-content: center;
				color: #3c3c3c;
				text-align: center;

				.block {
					position: absolute;
					width: 0upx;
					left: 0;
				}
			}

			&.on {
				height: 90upx;
				background-color: #ebeff8;

				.text {
					font-size: 30upx;
					color: #1777fe;

					.block {
						width: 6upx;
						height: 100%;
						left: 10upx;
					}
				}
			}
		}

		.box {
			height: 100%;
			width: 100%;
			text-align: center;
		}

		.list {
			height: 100%;
			width: 100%;
			text-align: center;

			.content {
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}
		}

		.oneLog {
			width: 220upx;
			height: 346upx;
			background: #fff;
			border-radius: 16upx;
			margin: 40upx 0;
			box-shadow: 0 2upx 8upx #cccccc;

			.title {
				width: 100%;
				height: 110upx;
				margin-top: 40upx;
				background: #0965b5;
				text-align: center;

				.text {
					line-height: 110upx;
					color: #fff;
				}
			}

			.time {
				width: 100%;
				height: 100upx;
				text-align: center;

				.text {
					line-height: 100upx;
				}
			}

			.download {
				height: 50upx;
				text-align: center;

				.btn {
					height: 100%;
					display: inline-block;
					padding: 0 36upx;
					background: #1a73e8;
					border-radius: 10upx;

					.text {
						color: #fff;
						line-height: 50upx;
					}
				}
			}
		}
	}
</style>