From fa821ce7a7755dd0e13897cefc57071d4596431b Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Wed, 14 Jan 2026 17:51:42 +0800
Subject: [PATCH] 1
---
src/page/user/agreement.vue | 137 ++++++++++++++++++++++++++++++++++++---------
1 files changed, 110 insertions(+), 27 deletions(-)
diff --git a/src/page/user/agreement.vue b/src/page/user/agreement.vue
index c31a494..dc6d02d 100644
--- a/src/page/user/agreement.vue
+++ b/src/page/user/agreement.vue
@@ -5,57 +5,140 @@
<router-link to="" slot="left">
<mt-button @click="goBack" icon="back"></mt-button>
</router-link>
- <!-- <mt-button icon="more" slot="right"></mt-button> -->
</mt-header>
</div>
- <div style="margin:12px 20px;">
- <div class="risk_text">
- <p v-for="item in siteInfo.tradeAgreeText.split('。')" :key="item">{{item}}。</p>
+ <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 {siteInfo: {}}
+ return {
+ loading: true,
+ error: null,
+ imageUrls: []
+ }
},
mounted () {
- this.getInfoSite()
+ this.loadPdf()
},
methods: {
goBack () {
this.$router.back(-1)
},
- async getInfoSite () {
- // 获取网站信息
- let result = await api.getInfoSite()
+ async loadPdf () {
+ this.loading = true
+ this.error = null
+ try {
+ const result = await api.viewAgreementPdf()
if (result.status === 0) {
- this.siteInfo = result.data
+ // 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.$message.error(result.msg)
+ 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>
- h1 {
- font-size: 0.25rem;
- text-align: center;
- }
+.wrapper {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ background: #f5f5f5;
+}
- h4 {
- font-size: 13px;
- line-height: 25px;
- margin: 25px 0;
- }
+.header {
+ flex-shrink: 0;
+}
- p {
- font-size: 12px;
- line-height: 25px;
- text-indent: 2em;
- }
+.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>
--
Gitblit v1.9.3