业务代理商页面动态渲染-代理协议

api/agents.js

@@ -1,5 +1,5 @@
 import { post } from '@/utils/request'
-import { get } from '../utils/request'
+import { get, request } from '../utils/request'
 
 /**
  * 代理商相关API接口
@@ -30,15 +30,17 @@ export function getAgentApplicationStatus(phone) {
 
 /**
  * 获取代理商协议
- * @returns {Promise} 返回协议内容
+ * @returns {Promise} 返回隐私政策数据
  */
 export function getAgentAgreement() {
-  return (
-    get('/app/article/getNew'),
-    {
-      type: 3, // 3表示代理商协议
-    }
-  )
+  return request({
+    url: '/app/article/getNew',
+    method: 'GET',
+    params: {
+      appId: '1',
+      type: '3', // 2:隐私政策
+    },
+  })
 }
 
 /**

pages/agents/agents.vue

@@ -85,6 +85,22 @@
         </view>
       </view>
     </view>
+
+    <!-- 代理商协议模态框 -->
+    <view v-if="showAgreementModal" class="agreement-modal-overlay" @click="hideAgreement">
+      <view class="agreement-modal" @click.stop>
+        <view class="agreement-modal-header">
+          <text class="agreement-modal-title">代理商协议</text>
+          <text class="agreement-modal-close" @click="hideAgreement">×</text>
+        </view>
+        <scroll-view class="agreement-modal-content" scroll-y>
+          <rich-text :nodes="agreementContent"></rich-text>
+        </scroll-view>
+        <view class="agreement-modal-footer">
+          <button class="agreement-modal-btn" @click="hideAgreement">我知道了</button>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -128,6 +144,7 @@ export default {
       submitting: false,
       serviceAreas: [],
       agreementContent: '',
+      showAgreementModal: false,
       // 区域ID映射
       areaIdMap: {},
     }
@@ -221,12 +238,12 @@ export default {
 
     // 显示代理商协议
     showAgreement() {
-      uni.showModal({
-        title: '代理商协议',
-        content: this.agreementContent,
-        showCancel: false,
-        confirmText: '我知道了',
-      })
+      this.showAgreementModal = true
+    },
+
+    // 隐藏代理商协议
+    hideAgreement() {
+      this.showAgreementModal = false
     },
 
     // 验证表单数据
@@ -539,4 +556,83 @@ export default {
     }
   }
 }
+
+// 代理商协议模态框样式
+.agreement-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.agreement-modal {
+  width: 90%;
+  max-width: 600rpx;
+  max-height: 80%;
+  background: #ffffff;
+  border-radius: 20rpx;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.agreement-modal-header {
+  padding: 30rpx;
+  border-bottom: 1rpx solid #e8e8e8;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #f8f8f8;
+
+  .agreement-modal-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333;
+  }
+
+  .agreement-modal-close {
+    font-size: 40rpx;
+    color: #999;
+    cursor: pointer;
+    padding: 10rpx;
+  }
+}
+
+.agreement-modal-content {
+  flex: 1;
+  padding:50rpx;
+  max-width: 500rpx;
+  max-height: 600rpx;
+  overflow-y: auto;
+}
+
+.agreement-modal-footer {
+  padding: 30rpx;
+  border-top: 1rpx solid #e8e8e8;
+  background: #f8f8f8;
+
+  .agreement-modal-btn {
+    width: 100%;
+    height: 80rpx;
+    background: #f15a04;
+    color: #ffffff;
+    border: none;
+    border-radius: 12rpx;
+    font-size: 28rpx;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:active {
+      transform: scale(0.98);
+    }
+  }
+}
 </style>