1

jhzh

2026-01-14 fa821ce7a7755dd0e13897cefc57071d4596431b

 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>