处理附件渲染失败问题

pages-biz/notice/noticeDetail.vue

@@ -7,9 +7,19 @@
 			:show-with-animation="true"
 			:selectable="true"></u-parse>
 		</view>
-		<u-swiper :list="imgList" @change="change"></u-swiper>
-		<view v-for="(item,index) in attachments" :key="index">
-		  <text @click="download(item)">{{ item.fileName }}</text>
+		<u-swiper :list="imgList" v-if="imgList.length"></u-swiper>
+		<view class="attachment-section" v-if="attachmentList.length">
+			<view class="section-title">
+				<text class="title-icon">📎</text>
+				<text>附件下载</text>
+			</view>
+			<view class="attachment-item" v-for="(item,index) in attachmentList" :key="index" @tap="download(item)">
+				<view class="file-info">
+					<text class="file-icon">📄</text>
+					<text class="file-name">{{ item.fileName || '附件' + (index + 1) }}</text>
+				</view>
+				<text class="download-btn">下载</text>
+			</view>
 		</view>
 	</view>
 </template>
@@ -32,27 +42,30 @@
 		onShow(){
 			this.recordView(this.id)
 		},
+		computed: {
+			attachmentList() {
+				return this.attachments || []
+			}
+		},
 		methods:{
 			recordView(assetId) {
 				let token = this.$getToken()
-				let userInfo = 	uni.getStorageSync('userInfo')
-				if(token){
+				let userInfo = uni.getStorageSync('userInfo')
+				if (!token) {
 					return
 				}
-				if (token) {
-					let url = "/potential/add";
-					this.$u.get(url, {
-						assetId: this.id,
-						assetsName: '查看公告' + this.title,
-						userType: userInfo.userType
-					}, {
-						'WT': this.$getToken()
-					}).then(obj => {
+				let url = "/potential/add";
+				this.$u.get(url, {
+					assetId: this.id,
+					assetsName: '查看公告' + this.title,
+					userType: userInfo.userType
+				}, {
+					'WT': token
+				}).then(() => {
 
-					}).catch(err => {
-						console.log("记录客户浏览记录失败", err)
-					})
-				}
+				}).catch(err => {
+					console.log("记录客户浏览记录失败", err)
+				})
 			},
 			getDetail(){
 				this.$u.get(`/notice/detail?id=${this.id}`,{},{}).then(res=>{
@@ -65,18 +78,56 @@
 								_this.imgList.push(_this.$config.staticUrl + img)
 							})
 						}
-						this.attachments = res.data.attachments;
+						if(res.data.attachments) {
+							this.attachments = res.data.attachments;
+						}
 						this.recordView(this.id)
 					}
 				})
 			},
 			download(item){
+				const url = this.$config.staticUrl + item.fileUrl
+				console.log('下载地址:', url)
+				uni.showLoading({ title: '下载中...' })
 				uni.downloadFile({
-				  url: this.$config.staticUrl + item.fileUrl,
+				  url: url,
 				  success(res) {
-				    uni.openDocument({
-				      filePath: res.tempFilePath
-				    })
+				    console.log('下载结果:', res)
+				    uni.hideLoading()
+				    if (res.statusCode === 200) {
+				      // 保存文件到本地
+				      uni.saveFile({
+				        tempFilePath: res.tempFilePath,
+				        success(saveRes) {
+				          uni.showModal({
+				            title: '下载成功',
+				            content: '文件已保存，是否打开？',
+				            success(modalRes) {
+				              if (modalRes.confirm) {
+				                uni.openDocument({
+				                  filePath: saveRes.savedFilePath,
+				                  fail(err) {
+				                    console.log('打开文件失败:', err)
+				                    uni.showToast({ title: '无法打开此类型文件', icon: 'none' })
+				                  }
+				                })
+				              }
+				            }
+				          })
+				        },
+				        fail(err) {
+				          console.log('保存文件失败:', err)
+				          uni.showToast({ title: '保存失败', icon: 'none' })
+				        }
+				      })
+				    } else {
+				      uni.showToast({ title: '下载失败', icon: 'none' })
+				    }
+				  },
+				  fail(err) {
+				    console.log('下载失败:', err)
+				    uni.hideLoading()
+				    uni.showToast({ title: '下载失败', icon: 'none' })
 				  }
 				})
 			}
@@ -98,5 +149,72 @@
 		line-height: 1.8;
 		white-space: pre-wrap !important;
 	}
+
+	.attachment-section {
+		margin: 20rpx 24rpx;
+		padding: 24rpx;
+		background-color: #f8f9fa;
+		border-radius: 16rpx;
+	}
+
+	.section-title {
+		display: flex;
+		align-items: center;
+		margin-bottom: 20rpx;
+		font-size: 30rpx;
+		font-weight: 600;
+		color: #333;
+	}
+
+	.title-icon {
+		margin-right: 10rpx;
+	}
+
+	.attachment-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 20rpx 24rpx;
+		margin-bottom: 16rpx;
+		background-color: #fff;
+		border-radius: 12rpx;
+		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		&:active {
+			background-color: #f0f0f0;
+		}
+	}
+
+	.file-info {
+		display: flex;
+		align-items: center;
+		flex: 1;
+	}
+
+	.file-icon {
+		margin-right: 16rpx;
+		font-size: 36rpx;
+	}
+
+	.file-name {
+		font-size: 28rpx;
+		color: #333;
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.download-btn {
+		padding: 10rpx 24rpx;
+		font-size: 24rpx;
+		color: #fff;
+		background-color: #e74c3c;
+		border-radius: 8rpx;
+	}
 </style>