ChuangHengWx/pagesHome/components/report/receiveList.vue

<template>
	<view class="rbox">
		<u-list @scrolltolower="scrolltolower" height="100%">
			<u-list-item v-for="(item, index) in list" :key="item.id">
				<view class="rbox-item">
					<view class="rbox-item-top adfac">
						<view class="rbox-item-top-type">{{typeCfg[item.type]||'个人版'}}</view>
						<view class="rbox-item-top-title">{{item.reportName||''}}</view>
					</view>
					<view class="rbox-item-p adf">
						<view class="rbox-item-p-left">团队名称：</view>
						<view class="rbox-item-p-right">{{item.teamName||''}}</view>
					</view>
					<view class="rbox-item-p adf">
						<view class="rbox-item-p-left">发送教练：</view>
						<view class="rbox-item-p-right">{{item.coachName||''}}</view>
					</view>
					<view class="rbox-item-p adf">
						<view class="rbox-item-p-left">报告时间：</view>
						<view class="rbox-item-p-right">{{item.createDate||''}}</view>
					</view>
					<image class="rbox-item-ask" :src="imgBase+'report_ask.png'" @click="askReport(item)"></image>
					<view class="rbox-item-bottom adfacjb">
						<view class="gbox-item-bottom-left adfac"></view>
						<view class="rbox-item-bottom-right" @click="reviewReport(item)">查看报告</view>
					</view>
				</view>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	import { getPlatformInfo } from '@/utils/platform.js'; 
	export default {
		props:{
			list:{
				typeof:Array,
				default:[]
			}
		},
		data(){
			return {
				typeCfg:{
					1:'个人版',
					2:'团队版',
					0:'团队PRO版'
				},
			}
		},
		methods:{
			scrolltolower(){
				this.$emit('scrolltolower')
			},
			reviewReport(item){
				// uni.navigateTo({
				// 	url:`/pagesHome/reportDetail?pdfUrl=${item.fileUrl}&reportId=${item.reportId}&fileName=${this.typeCfg[item.type]||'个人版'}-${item.reportName}`
				// })
				// wx.downloadFile({
				//   url:item.fileUrl,
				//   success: function (res) {
				//     const filePath = res.tempFilePath
				//     wx.openDocument({
				//       filePath: filePath
				//     })
				//   }
				// })
				
				const { isPC, isMobile, platform } = getPlatformInfo();
				if (isPC) {
					this.$showModal('请在手机端该微信小程序中查看报告')
				} else if (isMobile||platform==='devtools') {
					if(!item.fileUrl) return this.$showToast('报告pdf为空，请稍后再试。')
					this.openPdf(item.fileUrl)
					// uni.navigateTo({
					// 	url:'/pages/webView?src='+item.fileUrl
					// })
				}
			},
			async openPdf(pdfUrl) {
			  try {
				// 1. 显示加载提示
				uni.showLoading({ title: '加载中...' });
				// 2. 先下载PDF文件到本地（解决安卓直接预览网络文件慢的问题）
				const downloadRes = await uni.downloadFile({
				  url: pdfUrl,
				  // 可选：设置超时时间，避免长时间等待
				  timeout: 30000
				});
				
				const dres = downloadRes[1]||null;
				
				if (dres.statusCode !== 200) {
				  uni.hideLoading();
				  uni.showToast({ title: '文件下载失败', icon: 'none' });
				  return;
				}
		
				// 3. 用微信原生API打开本地PDF
				const openRes = await uni.openDocument({
				  filePath: dres.tempFilePath,
				  fileType: 'pdf',
				  showMenu: true // 允许用户转发/保存等
				});
		
				uni.hideLoading();
			  } catch (error) {
				uni.hideLoading();
				uni.showToast({ title: '加载失败，请重试', icon: 'none' });
			  }
			},
			askReport(item){
				uni.navigateTo({
					url:`/pages/reportAsk?pdfUrl=${item.fileUrl}&fileName=${this.typeCfg[item.type]||'个人版'}-${item.reportName}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.rbox{
		height: 100%;
		&-item{
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 40rpx 24rpx 10rpx;
			position: relative;
			&-top{
				&-type{
					padding: 2rpx 13rpx;
					background: #FFF7DC;
					border-radius: 6rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #BA9B31;
					line-height: 33rpx;
				}
				&-title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #002846;
					line-height: 32rpx;
					text-indent: 17rpx;
				}
			}
			&-p{
				margin-top: 36rpx;
				&>view{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #667E90;
					line-height: 24rpx;
				}
				&-left{
					width: 134rpx;
				}
				&-right{
					width: calc(100% - 134rpx);
				}
			}
			&-ask{
				width: 64rpx;
				height: 64rpx;
				position: absolute;
				right: 24rpx;
				top: 180rpx;
			}
			&-bottom{
				margin-top: 30rpx;
				border-top: 1rpx solid #EFEFEF;
				padding-top: 18rpx;
				&-left{
					&>view{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #667E90;
						line-height: 24rpx;
					}
				}
				&-right{
					padding: 17rpx 20rpx;
					background: linear-gradient( 90deg, #33A7A7 0%, #4DB2B2 100%);
					border-radius: 30rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 26rpx;
					letter-spacing: 2rpx;
				}
			}
			&-btn{
				padding: 17rpx 20rpx;
				background: linear-gradient( 90deg, #33A7A7 0%, #4DB2B2 100%);
				border-radius: 30rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 26rpx;
				letter-spacing: 2rpx;
				position: absolute;
				bottom: 40rpx;
				right: 24rpx;
				&.ask{
					right: 180rpx;
				}
			}
		}
	}
</style>