crmcard/pages/file/fileDetail.vue

<template>
	<view class="fileDetail">
		<uni-menubar title="文件详情" />
		<view class="" v-if="detail">
			<tm-sheet>
				<tm-images v-if="detail.thumb" :src="detail.thumb"></tm-images>
				<view class="detailTitle">文件详情</view>
				<view class="detailRow">
					<view class="detailLeft">文件名称</view>
					<view class="detailRight">{{detail.name}}</view>
				</view>
				<view class="detailRow">
					<view class="detailLeft">文件类型</view>
					<view class="detailRight">{{detail.ext}}</view>
				</view>
				<view class="detailRow">
					<view class="detailLeft">文件大小</view>
					<view class="detailRight">{{detail.size}}</view>
				</view>
				<view class="detailRow">
					<view class="detailLeft">上传时间</view>
					<view class="detailRight">{{detail.update_time}}</view>
				</view>
				<view class="detailTitle">文件操作</view>
				<view>
					<tm-row>
						<tm-col :grid="3" v-if="detail.is_edit">
							<tm-button theme="blue" size="m" @click="editClick">更新</tm-button>
						</tm-col>
						<tm-col :grid="3">
							<tm-button theme="blue" size="m" @click="lookFile">查看</tm-button>
						</tm-col>
						<tm-col :grid="3" v-if="detail.is_edit">
							<tm-button theme="blue" size="m" @click="removeDialog = true">删除</tm-button>
						</tm-col>
						<tm-col :grid="3">
							<tm-button theme="blue" size="m" @click="download">下载</tm-button>
						</tm-col>
					</tm-row>
				</view>
			</tm-sheet>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="shareBtn" v-if="detail.card_id == userInfo.card_id">
			<tm-button openType="share" block theme="blue">分享</tm-button>
		</view>
		<tm-dialog v-model="removeDialog" confirmColor="blue" @confirm="remove" content="您确定删除?"></tm-dialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {},
				iOS: false,
				removeDialog: false,
				fileId: "",
				card_id:""
			}
		},
		onLoad(option) {
			if (option)
			this.card_id = option.card_id
			this.$tm.vx.commit('card/cardId', option.card_id)
			this.fileId = option.fileId
			this.$tm.request.post('file/detail', {
				id: this.fileId
			}).then(res => {
				this.detail = res.data
				this.$point.point(5,this.fileId,this.card_id)
			})

		},
		onShareAppMessage(res) {
			return {
				title: this.detail.name + '.' + this.detail.ext,
				path: '/pages/file/fileDetail?fileId=' +this.fileId+'&card_id='+this.card_id,
				success:()=>{
					this.$point.point(6, this.fileId, this.card_id)
				}
			}
		},
		methods: {
			download() {
				let that = this
				const downloadTask = uni.downloadFile({
					url: that.detail.path,
					success: (data) => {
						if (data.statusCode === 200) {
							uni.saveFile({ //文件保存到本地
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '文件已保存!',
										duration: 3000,
									});
									that.$point.point(7, that.fileId, that.card_id)
								}
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载',
						});
					},
				});
				downloadTask.onProgressUpdate((res) => {
					if (res.progress < 101) {
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '当前下载' + res.progress + '%',
						});
					} else {
						downloadTask.abort() // 取消下载任务
					}

				})


			},
			lookFile() {
				let that = this
				wx.downloadFile({
					// 示例 url，并非真实存在
					url: that.detail.path,
					success: function(res) {
						const filePath = res.tempFilePath
						wx.openDocument({
							filePath: filePath,
							success: function(res) {
								if(that.detail.card_id !== that.userInfo.card_id){
									that.$point.point(5, that.detail.id, that.userInfo.card_id)
								}
							}
						})
					}
				})
			},
			remove() {
				let params = {
					isdel: true,
					id: this.detail.id,
					name: this.detail.name,
					pid: this.detail.pid,
					path: this.detail.path
				}
				this.$tm.request.post('file/update', params).then(res => {
					uni.showToast({
						title: "删除成功",
						icon: "success",
						duration: 1000
					})
					setTimeout(() => {
						uni.navigateBack({
							success: () => {
								uni.$emit('refresh')
							}
						})
					}, 1000)
				})
			},
			editClick() {
				uni.navigateTo({
					url: '/pages/file/uploadFile?id=' + this.detail.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shareBtn {
		width: 100%;
		padding: 15rpx 20rpx;
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
	}

	.detailTitle {
		font-size: 34rpx;
		font-weight: bolder;
		color: #2196F3;
		margin: 40rpx 0;
	}

	.detailRow {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: "#eeeeee";
		font-size: 28rpx;
		margin-top: 40rpx;

		.detailLeft {
			width: 30%;
		}

		.detailRight {
			flex: 1;
		}
	}
</style>