<template>
  <view class="agreement-container">
    <!-- <view class="agreement-header">
      <view class="back-btn" @click="goBack">
        <text class="iconfont icon-back">&#xe679;</text>
      </view>
      <view class="title">用户协议</view>
      <view class="placeholder"></view>
    </view> -->
    
    <scroll-view scroll-y class="agreement-content">
     <!--  <view class="agreement-title">《用户协议》</view> -->
      
      <!-- 使用v-if控制加载状态 -->
      <view v-if="loading" class="loading">
        <text>加载中...</text>
      </view>
      
      <!-- 使用v-else-if显示错误信息 -->
      <view v-else-if="error" class="error">
        <text>{{errorMsg}}</text>
        <button class="retry-btn" @click="fetchAgreement">重新加载</button>
      </view>
      
      <!-- 使用v-else和v-html动态渲染协议内容 -->
      <rich-text v-else :nodes="agreementContent"></rich-text>
    </scroll-view>
  </view>
</template>

<script>
import { getUserAgreement } from '@/api/user';
export default {
  data() {
    return {
      agreementContent: '',
      loading: true,
      error: false,
      errorMsg: '加载失败，请重试'
    }
  },
  onLoad() {
    this.fetchAgreement();
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    fetchAgreement() {
      this.loading = true;
      this.error = false;
      
      getUserAgreement()
        .then(res => {
          console.log(res);
          this.loading = false;
            // 假设API返回的数据中有content字段包含协议内容
            this.agreementContent = res.content || '';
            console.log(this.agreementContent);
         
        })
        .catch(err => {
          console.error('获取用户协议失败:', err);
          this.error = true;
          this.errorMsg = '网络异常，请稍后重试';
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
}
</script>

<style>
.agreement-container {
  /* display: flex;
  flex-direction: column; */
  height: 100vh;
  background-color: #fff;
}

.agreement-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  background-color: #fff;
  padding: 0 30rpx;
  position: relative;
  border-bottom: 1rpx solid #eee;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-back {
  font-size: 40rpx;
  color: #333;
}

.title {
  font-size: 34rpx;
  font-weight: 500;
  color: #333;
}

.placeholder {
  width: 60rpx;
}

.agreement-content {
  width: 100%;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  background-color: #fff;
}

.agreement-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
  color: #333;
}

.section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 20rpx;
}

.section-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.paragraph {
  display: block;
  margin-bottom: 20rpx;
  text-align: justify;
}

.loading, .error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  color: #666;
  font-size: 28rpx;
}

.error {
  color: #ff4d4f;
}

.retry-btn {
  margin-top: 20rpx;
  padding: 10rpx 30rpx;
  background-color: #1890ff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
}
</style> 