163 lines
3.6 KiB
Vue
163 lines
3.6 KiB
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>
|
||
|