H5_module/martial/file/index.vue

<template>
	<view>
		<view class="top-fixed" :style="'height:'+systems.barHeight+'rpx;'">
			<view :style="'height: '+systems.ktxStatusHeight+'rpx;'"></view>
			<view class="ddflex">
				<view class="back ddflex"
					:style="'height: '+systems.navigationHeight+'rpx;line-height: '+systems.navigationHeight+'rpx;'"
					@click="toBack">
					<image src="../static/images/back_black.png" mode="aspectFit"></image>
				</view>
				<view class="fflex" style="text-align: center;margin-left: rpx;"></view>
			</view>
		</view>
		<view :style="'height:'+systems.barHeight+'rpx;'"></view>
		<view class="ceng" v-if="isShowAdd" @click="isShowAdd = false"></view>
		
		<view class="file-box">
			<image class="file-icon" src="../static/images/m_pdf.png" mode="widthFix"></image>
			<view class="file-title">{{detaile.params&&detaile.params.brief?JSON.parse(detaile.params.brief).title:detaile.brief}}</view>
			<view class="file-size">文件大小:{{detaile.params&&detaile.params.brief?(JSON.parse(detaile.params.brief).size/1024/1024).toFixed(2)+'MB':'未知'}}</view>
			<view class="file-down" @click="downloadFile(detaile.brief)">下载文档</view>
		</view>
		<view class="bottom-fixed" v-if="cardInfo">
			<view class="ddflex card-box" @click="jumpUrl('/card/index/index?cardId='+cardInfo.id)">
				<image class="card-header" :src="cardInfo.imageMap?cardInfo.imageMap:'../../static/pages/images/userimg.png'"></image>
				<view class="fflex">
					<view class="card-name">{{cardInfo.realName}}</view>
					<view class="card-phone">{{cardInfo.phone}}</view>
				</view>
				<view class="card-line"></view>
				<view class="card-btn">联系TA</view>
			</view>
		</view>
		
		
		<!-- #ifdef H5 -->
		<view class="share-pop" @click="hideSharePop" v-if="isShowSharePop">
			<image src="../static/images/fx-tip1.png"></image>
		</view>
		<wx-share ref="wxshare" />
		<!-- #endif -->
		
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	const api = require('../../utils/api.js');

	export default {
		components: {},
		props: {},
		data() {
			return {
				picUrlss: req.public.picUrls,
				systems: {},
				isTop: 0,
				isShowAdd: false,

				code: '',
				rootCode: '',
				detaile: {},
				
				isShowShare: false,
				bottomPositon: '-100%',
				
				cardInfo:'',
				
				hideShare: true,
				isShowSharePop: false,
			}
		},
		async onLoad(options) {
			this.options = options
			if (options.appId) req.setStorage('appId', options.appId);
			if (options.x_code_id){
				options = await this.loadCodeParams(options.x_code_id)
			}
			this.PAGE_DATA_INIT_FN({
				BIND_ID:this.options.code
			})
			await req.silenceLogin();
			this.code = options.code;
			this.rootCode = options.rootCode
			await this.getDetail();
			if(this.options.userId)
				this.getCardInfo()
		},
		onShow() {
			if(this.options.userId)
				this.getCardInfo()
		},
		onShareAppMessage: async function(options) {
			var content = await this.onShareMessage();
			this.SEND_SHARE_FN()
			return content;
		},
		onReady() {
			// #ifdef H5
			var that = this;
			//初始化分享内容
			setTimeout(async function() {
				var shareContent = await that.onShareMessage();
				if (shareContent) {
					shareContent.path = window.location.origin + shareContent.path;
				}
				that.$refs.wxshare.init(shareContent);
			}, 4 * 1000);
			// #endif
		},
		methods: {
			toBack() {
				let pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack()
				}else{
					uni.switchTab({
						url:'/pages/tabBar/index'
					})
				}
			},
			async onShareMessage(options) {
				let isSolution = '';
				let path = '';
				// #ifndef H5
				isSolution = req.env[req.env.NODE_ENV].isSolution;
				// #endif
				// #ifdef H5
				isSolution = false;
				// #endif
				let userInfo = req.getStorage('userInfo');
				if (isSolution) {
					path = '/share/home/index?appId=' + req.getStorage('appId') + '&userId=' + req.getStorage(
						'userInfo').id;
				} else {
					let page = getCurrentPages()
					let pageCurrent = page[page.length-1]
					path = pageCurrent.route+'?code=' + this.code + '&rootCode=' + this.rootCode + '&isShare=' + true + '&appId=' + req
						.getStorage('appId');
					// console.log(!req.getStorage('userInfo').id);
					if (!userInfo.id) {} else {
						path += '&userId=' + userInfo.id;
					}
					path = this.SHARE_BEHAVIOR_FN({path:path,sendShare:false}).path
				}
				console.log({
					title: this.detaile.title,
					imageUrl: this.detaile.pic,
					path: path
				})
				return {
					title: this.detaile.title,
					imageUrl: this.detaile.pic,
					path: path
				};
			},
			showShare() {
				// console.log(11111,this.hideShare)
				// #ifdef H5 
				this.hideShare = false;
				this.showSharePop();
				console.log('引导分享==')
				// #endif
			},
			showSharePop() {
				this.isShowSharePop = true;
			},
			hideSharePop() {
				this.isShowSharePop = false;
			},
			closePop(){
				this.isShowAdd = false
			},
			jumpUrl(url){
				this.isShowAdd = false
				uni.navigateTo({
					url:url
				})
			},
			getDetail() {
				let that = this;
				let apiUrl = '/api/v3/material/library/detail';
				return new Promise((resolve, reject) => {
					req.getRequest(apiUrl, {
						code: that.code
					}, res => {
						that.detaile = res;
						// #ifdef APP-PLUS
						// that.downloadFile(that.detaile.brief)
						// #endif
						resolve();
					}, true);
				})
			},
			downloadFile(url) {
				let that = this
				uni.showLoading({
					title:'加载中'
				})
				// #ifdef APP-PLUS
				uni.downloadFile({
					url: url,
					success: function(res) {
						uni.hideLoading()
						let filepathss = res.tempFilePath
						filepathss = plus.io.convertLocalFileSystemURL(res.tempFilePath);
						uni.openDocument({
							filePath: filepathss,
							showMenu: false,
							success: function() {
								console.log("打开文档成功");
							},
							fail: function(err) {
								uni.showToast({
									title: '暂不支持此类型',
									duration: 2000,
									icon: "none",
								});
							}
						})
					},
					fail: function(res) {
						uni.hideLoading()
						console.log(res); //失败
					}
				});
				// #endif
				// #ifdef H5
				that.downloadByFileid(that.detaile.brief)
				// #endif
			},
			downloadByFileid(url){
			  const filePath = url;
			  const tempLink = document.createElement("a");
			  tempLink.style.display = "none";
			  tempLink.href = filePath;
			  tempLink.setAttribute("download", this.detaile.params.brief);
			  tempLink.setAttribute("target", "_blank");
			  document.body.appendChild(tempLink);
			  tempLink.click();
			  document.body.removeChild(tempLink);
			  uni.hideLoading()
			},
			showShare(){
				console.log('点击显示分享')
				this.isShowShare = true
				this.bottomPositon = 0
				this.$forceUpdate()
			},
			hideShare(){
				this.isShowShare = false
				this.bottomPositon = '-100%'
			},
			loadCodeParams(scene) {
				let _ts = this;
			
				return new Promise((resolve, reject) => {
					let form = {
						scene: scene
					};
					if (!scene) {
						resolve();
						return false;
					}
			
			
					req.getRequest('/api/code/params', form, data => {
						let res = JSON.parse(data.scene)
						for(let key in res){
							this.options[key] = res[key]
						}
						resolve(res);
					});
				});
			},
			getCardInfo() {
				var url = '';
				var dataP = {};
				url = '/api/v3/visiting/card/user';
				dataP.userId = this.options.userId;
				req.getRequest(url, dataP, data => {
					this.cardInfo = data;
				}, false);
			},
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.systems.barHeight) {
				this.isTop = 1;
			} else {
				this.isTop = 0;
			}
		}
	}
</script>

<style>
	@import "./index.css";
</style>