RentWeAppFront/pages-biz/notice/noticeDetail.vue

<template>
	<view>
		<u-navbar :is-back="true" :title="title" :border-bottom="false"></u-navbar>
		<view class="u-content">
			<u-parse :html="content"
			:autosetTitle="true"
			:show-with-animation="true"
			:selectable="true"></u-parse>
		</view>
		<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>

<script>
	export default {
		data() {
			return {
				id:null,
				title:'资讯',
				content: ``,
				imgList:[],
				attachments:[]
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getDetail()
		},
		onShow(){
			this.recordView(this.id)
		},
		computed: {
			attachmentList() {
				return this.attachments || []
			}
		},
		methods:{
			recordView(assetId) {
				let token = this.$getToken()
				let userInfo = uni.getStorageSync('userInfo')
				if (!token) {
					return
				}
				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)
				})
			},
			getDetail(){
				this.$u.get(`/notice/detail?id=${this.id}`,{},{}).then(res=>{
					if(res.flag) {
						this.title = res.data.noticeTitle;
						this.content = res.data.noticeContent;
						if(res.data.imgs) {
							const _this = this;
							res.data.imgs.forEach(img=>{
								_this.imgList.push(_this.$config.staticUrl + img)
							})
						}
						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: url,
				  success(res) {
				    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' })
				  }
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.u-content{
		margin:0 10rpx;
		padding: 24rpx;
		font-size: 34rpx;
		color: $u-main-color;
		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>