Sprinkler-app/page_user/manual.vue

<template>
	<view class="page">
		<u-navbar :is-back="true" title="说明书" title-color="#000" :border-bottom="false" :background="true" id="navbar">
		</u-navbar>

		<view class="" style="padding: 20rpx;height: 88vh;overflow: scroll;" v-html="cont">
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deviceId: '',
				isLoading: false,
				manualUrl: '',
				manualImages: [],
				cont:''
			}
		},
		onLoad(option) {
			console.log(option,'4545;lkl');
			this.deviceId = option.deviceId
			this.fetchManual()
		},
		methods: {
			isImageUrl(url) {
				if (!url) return false
				const lower = String(url).toLowerCase()
				return (
					['.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp', '.svg'].some(ext => lower.includes(ext)) ||
					['image/png', 'image/jpeg', 'image/jpg', 'image/webp', 'image/gif', 'image/bmp', 'image/svg+xml'].some(mime => lower.includes(mime))
				)
			},
			previewImage(url) {
				if (!url) return
				uni.previewImage({
					urls: [url],
					current: url
				})
			},

			fetchManual() {
				let device = Number(this.deviceId)
				this.$u.get(`/device/device/getManual/${device}`).then(res => {
						if (res && res.code == 200) {
							// const payload = res.data
							// const extracted = this.extractManual(payload)
							// this.manualImages = extracted.images
							// this.manualUrl = extracted.url
							this.cont = res.msg
						} else {
							uni.showToast({
								title: (res && (res.msg || res.message)) || '获取说明书失败',
								icon: 'none',
								duration: 5000
							})
						}
					})
					.catch(() => {
						uni.showToast({
							title: '请求失败',
							icon: 'none',
							duration: 2000
						})
					})
					.finally(() => {
						this.isLoading = false
					})
			},

			extractManual(payload) {
				// 说明书接口返回字段可能不同，这里做了少量兼容：
				// - 图片数组（images / imageUrls / imgList / manualImages 等）
				// - 单个 URL（url / manualUrl / fileUrl 等）
				const candidates = []

				const pushIfUrl = (v) => {
					if (typeof v === 'string' && v.trim()) candidates.push(v.trim())
				}

				const extractFrom = (obj) => {
					if (!obj) return
					if (typeof obj === 'string') {
						pushIfUrl(obj)
						return
					}
					if (Array.isArray(obj)) {
						obj.forEach(item => extractFrom(item))
						return
					}
					if (typeof obj === 'object') {
						;['images', 'imageUrls', 'imgUrls', 'imgList', 'manualImages', 'manualImageUrls', 'imgList'].forEach(key => {
							if (Array.isArray(obj[key])) obj[key].forEach(item => extractFrom(item))
						})

						;['manualUrl', 'url', 'fileUrl', 'file', 'link', 'uri', 'manualFileUrl', 'manual_file_url'].forEach(key => {
							if (obj[key]) pushIfUrl(obj[key])
						})

						// 递归兼容：有些接口会包一层 data
						if (obj.data) extractFrom(obj.data)
						if (obj.result) extractFrom(obj.result)
					}
				}

				extractFrom(payload)

				// 分离：图片 vs 其他 URL
				const images = candidates.filter(u => this.isImageUrl(u))
				const url = candidates.find(u => !this.isImageUrl(u)) || images[0] || ''

				return { images, url }
			}
		}
	}
</script>

<style lang="less">
	.page {
		min-height: 100vh;
		background: #fff;
	}

	.content {
		padding: 20rpx 20rpx 0 20rpx;
	}

	.gallery {
		width: 100%;
	}

	.slide {
		width: 100%;
		min-height: 600rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.manual-img {
		width: 100%;
		max-height: 920rpx;
	}

	.manual-img-single {
		width: 100%;
		max-height: 920rpx;
		display: block;
	}

	.empty {
		padding: 200rpx 0;
		text-align: center;
		color: #999;
		font-size: 28rpx;
	}
</style>