<template>
|
<div class="wrapper">
|
<div class="header">
|
<mt-header :title="$t('jy220')">
|
<router-link to="" slot="left">
|
<mt-button @click="goBack" icon="back"></mt-button>
|
</router-link>
|
</mt-header>
|
</div>
|
<div class="agreement-content">
|
<div v-if="loading" class="loading-container">
|
<div class="loading-spinner"></div>
|
<p>加载中...</p>
|
</div>
|
<div v-else-if="error" class="error-container">
|
<p>{{ error }}</p>
|
<button @click="loadPdf" class="retry-btn">重试</button>
|
</div>
|
<div v-else class="pdf-wrapper">
|
<ImageViewer :imageUrls="imageUrls" v-if="imageUrls && imageUrls.length > 0" />
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import * as api from '@/axios/api'
|
import ImageViewer from '@/components/ImageViewer.vue'
|
|
export default {
|
components: {
|
ImageViewer
|
},
|
data () {
|
return {
|
loading: true,
|
error: null,
|
imageUrls: []
|
}
|
},
|
mounted () {
|
this.loadPdf()
|
},
|
methods: {
|
goBack () {
|
this.$router.back(-1)
|
},
|
async loadPdf () {
|
this.loading = true
|
this.error = null
|
try {
|
const result = await api.viewAgreementPdf()
|
if (result.status === 0) {
|
// result.data 现在是图片数组
|
if (Array.isArray(result.data) && result.data.length > 0) {
|
const APIUrl = require('@/axios/api.url').default
|
this.imageUrls = result.data.map(url => {
|
if (!url.startsWith('http')) {
|
return APIUrl.baseURL + (url.startsWith('/') ? url : '/' + url)
|
}
|
return url
|
})
|
this.loading = false
|
} else {
|
this.error = '未返回图片数据'
|
this.loading = false
|
}
|
} else {
|
this.error = result.msg || '加载合同失败'
|
this.loading = false
|
}
|
} catch (e) {
|
console.error('加载PDF失败:', e)
|
this.error = e.message || '加载失败，请稍后重试'
|
this.loading = false
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="css" scoped>
|
.wrapper {
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
background: #f5f5f5;
|
}
|
|
.header {
|
flex-shrink: 0;
|
}
|
|
.agreement-content {
|
flex: 1;
|
overflow: hidden;
|
position: relative;
|
}
|
|
.loading-container,
|
.error-container {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
height: 100%;
|
color: #666;
|
}
|
|
.loading-spinner {
|
width: 40px;
|
height: 40px;
|
border: 4px solid #f3f3f3;
|
border-top: 4px solid #f11514;
|
border-radius: 50%;
|
animation: spin 1s linear infinite;
|
margin-bottom: 15px;
|
}
|
|
@keyframes spin {
|
0% { transform: rotate(0deg); }
|
100% { transform: rotate(360deg); }
|
}
|
|
.error-container {
|
color: #f56c6c;
|
padding: 20px;
|
text-align: center;
|
}
|
|
.retry-btn {
|
margin-top: 15px;
|
padding: 10px 20px;
|
background: linear-gradient(-55deg, rgb(241, 22, 20), rgb(240, 40, 37));
|
color: #fff;
|
border: none;
|
border-radius: 5px;
|
font-size: 14px;
|
cursor: pointer;
|
}
|
|
.pdf-wrapper {
|
height: 100%;
|
width: 100%;
|
}
|
</style>
|
