agreement.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <template>
  2. <view class="agreement-container">
  3. <!-- <view class="agreement-header">
  4. <view class="back-btn" @click="goBack">
  5. <text class="iconfont icon-back">&#xe679;</text>
  6. </view>
  7. <view class="title">用户协议</view>
  8. <view class="placeholder"></view>
  9. </view> -->
  10. <scroll-view scroll-y class="agreement-content">
  11. <!-- <view class="agreement-title">《用户协议》</view> -->
  12. <!-- 使用v-if控制加载状态 -->
  13. <view v-if="loading" class="loading">
  14. <text>加载中...</text>
  15. </view>
  16. <!-- 使用v-else-if显示错误信息 -->
  17. <view v-else-if="error" class="error">
  18. <text>{{errorMsg}}</text>
  19. <button class="retry-btn" @click="fetchAgreement">重新加载</button>
  20. </view>
  21. <!-- 使用v-else和v-html动态渲染协议内容 -->
  22. <rich-text v-else :nodes="agreementContent"></rich-text>
  23. </scroll-view>
  24. </view>
  25. </template>
  26. <script>
  27. import { getUserAgreement } from '@/api/user';
  28. export default {
  29. data() {
  30. return {
  31. agreementContent: '',
  32. loading: true,
  33. error: false,
  34. errorMsg: '加载失败,请重试'
  35. }
  36. },
  37. onLoad() {
  38. this.fetchAgreement();
  39. },
  40. methods: {
  41. goBack() {
  42. uni.navigateBack();
  43. },
  44. fetchAgreement() {
  45. this.loading = true;
  46. this.error = false;
  47. getUserAgreement()
  48. .then(res => {
  49. console.log(res);
  50. this.loading = false;
  51. // 假设API返回的数据中有content字段包含协议内容
  52. this.agreementContent = res.content || '';
  53. console.log(this.agreementContent);
  54. })
  55. .catch(err => {
  56. console.error('获取用户协议失败:', err);
  57. this.error = true;
  58. this.errorMsg = '网络异常,请稍后重试';
  59. })
  60. .finally(() => {
  61. this.loading = false;
  62. });
  63. }
  64. }
  65. }
  66. </script>
  67. <style>
  68. .agreement-container {
  69. /* display: flex;
  70. flex-direction: column; */
  71. height: 100vh;
  72. background-color: #fff;
  73. }
  74. .agreement-header {
  75. display: flex;
  76. align-items: center;
  77. justify-content: space-between;
  78. height: 90rpx;
  79. background-color: #fff;
  80. padding: 0 30rpx;
  81. position: relative;
  82. border-bottom: 1rpx solid #eee;
  83. }
  84. .back-btn {
  85. width: 60rpx;
  86. height: 60rpx;
  87. display: flex;
  88. align-items: center;
  89. justify-content: center;
  90. }
  91. .icon-back {
  92. font-size: 40rpx;
  93. color: #333;
  94. }
  95. .title {
  96. font-size: 34rpx;
  97. font-weight: 500;
  98. color: #333;
  99. }
  100. .placeholder {
  101. width: 60rpx;
  102. }
  103. .agreement-content {
  104. width: 100%;
  105. padding: 20rpx 30rpx;
  106. box-sizing: border-box;
  107. background-color: #fff;
  108. }
  109. .agreement-title {
  110. font-size: 36rpx;
  111. font-weight: bold;
  112. text-align: center;
  113. margin-bottom: 40rpx;
  114. color: #333;
  115. }
  116. .section {
  117. margin-bottom: 30rpx;
  118. }
  119. .section-title {
  120. font-size: 32rpx;
  121. font-weight: 500;
  122. color: #333;
  123. margin-bottom: 20rpx;
  124. }
  125. .section-content {
  126. font-size: 28rpx;
  127. color: #666;
  128. line-height: 1.6;
  129. }
  130. .paragraph {
  131. display: block;
  132. margin-bottom: 20rpx;
  133. text-align: justify;
  134. }
  135. .loading, .error {
  136. display: flex;
  137. flex-direction: column;
  138. align-items: center;
  139. justify-content: center;
  140. padding: 40rpx;
  141. color: #666;
  142. font-size: 28rpx;
  143. }
  144. .error {
  145. color: #ff4d4f;
  146. }
  147. .retry-btn {
  148. margin-top: 20rpx;
  149. padding: 10rpx 30rpx;
  150. background-color: #1890ff;
  151. color: #fff;
  152. border-radius: 8rpx;
  153. font-size: 28rpx;
  154. }
  155. </style>