更改协议同意方式

src/views/MyProfile.vue

@@ -68,15 +68,23 @@
             <div class="balance-value">{{ Math.abs(accountInfo.balance) }}</div>
           </div>
         </div>
-        <el-checkbox 
-          v-model="accountInfo.is_distribute" 
-          @change="handleDistributeChange"
-          class="distribute-checkbox"
-          :true-label="true"
-          :false-label="false"
-        >
-          默认自动匹配
-        </el-checkbox>
+        <div class="agreement-section">
+          <el-checkbox 
+            v-model="accountInfo.is_distribute" 
+            @change="handleDistributeChange"
+            class="distribute-checkbox"
+            :true-label="true"
+            :false-label="false"
+          >
+            自愿委托出售
+          </el-checkbox>
+          <el-link 
+            type="primary" 
+            @click="showAgreement"
+          >
+            《委托出售协议》
+          </el-link>
+        </div>
       </div>
     </div>
 
@@ -200,6 +208,41 @@ export default {
     // 处理默认自动匹配状态变化
     const handleDistributeChange = async (value) => {
       try {
+        // 检查是否为第一次勾选
+        const isFirstTimeCheck = localStorage.getItem('hasCheckedDistribute') !== 'true';
+        
+        // 如果是第一次勾选且为开启状态，强制显示协议
+        if (value && isFirstTimeCheck) {
+          try {
+            await ElMessageBox.alert(
+              `<div style="text-align: left; line-height: 1.6;">
+                <h3>委托出售协议</h3>
+                <p>1. 委托方同意将其持有的融豆委托给平台进行出售。</p>
+                <p>2. 平台将根据市场情况和委托方的要求进行出售操作。</p>
+                <p>3. 委托方有权随时撤销委托，但已进行的交易不可撤销。</p>
+                <p>4. 出售所得资金将按约定时间结算给委托方。</p>
+                <p>5. 平台收取合理的服务费用，具体标准详见费率说明。</p>
+                <p>6. 双方应遵守相关法律法规，确保交易合法合规。</p>
+              </div>`,
+              '委托出售协议',
+              {
+                confirmButtonText: '我已了解并同意',
+                dangerouslyUseHTMLString: true,
+                customClass: 'agreement-dialog',
+                showCancelButton: false,
+                closeOnClickModal: false,
+                closeOnPressEscape: false
+              }
+            );
+            // 用户同意协议后，标记为已勾选过
+            localStorage.setItem('hasCheckedDistribute', 'true');
+          } catch (error) {
+            // 用户关闭协议弹窗，恢复原状态
+            accountInfo.value.is_distribute = false;
+            return;
+          }
+        }
+        
         const action = value ? '开启' : '关闭';
         await ElMessageBox.confirm(
           `确定要${action}默认自动匹配功能吗？`,
@@ -217,6 +260,10 @@ export default {
         
         if (response.data.success) {
           ElMessage.success('默认自动匹配状态更新成功');
+          // 如果是关闭状态，不需要标记为已勾选过
+          if (value) {
+            localStorage.setItem('hasCheckedDistribute', 'true');
+          }
         } else {
           // 如果更新失败，恢复原状态
           accountInfo.value.is_distribute = !value;
@@ -336,6 +383,27 @@ export default {
       }
     };
 
+    // 显示委托出售协议
+    const showAgreement = () => {
+      ElMessageBox.alert(
+        `<div style="text-align: left; line-height: 1.6;">
+          <h3>委托出售协议</h3>
+          <p>1. 委托方同意将其持有的融豆委托给平台进行出售。</p>
+          <p>2. 平台将根据市场情况和委托方的要求进行出售操作。</p>
+          <p>3. 委托方有权随时撤销委托，但已进行的交易不可撤销。</p>
+          <p>4. 出售所得资金将按约定时间结算给委托方。</p>
+          <p>5. 平台收取合理的服务费用，具体标准详见费率说明。</p>
+          <p>6. 双方应遵守相关法律法规，确保交易合法合规。</p>
+        </div>`,
+        '委托出售协议',
+        {
+          confirmButtonText: '我已了解',
+          dangerouslyUseHTMLString: true,
+          customClass: 'agreement-dialog'
+        }
+      );
+    };
+
     onMounted(() => {
       // 初始化时从store中获取头像
       if (userStore.user?.avatar) {
@@ -358,6 +426,7 @@ export default {
       confirmAvatarUpload,
       handleLogout,
       handleDistributeChange,
+      showAgreement,
       userStore,
       getImageUrl
     };
@@ -549,6 +618,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   height: 100%;
+  flex-wrap: nowrap;
 }
 
 .balance-item {
@@ -741,4 +811,31 @@ export default {
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   white-space: nowrap; /* 防止文本换行 */
 }
+
+/* 协议区域样式 */
+.agreement-section {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+/* 委托出售协议链接样式 */
+.agreement-section :deep(.el-link) {
+  color: #ffcc40 !important;
+  font-weight: 500;
+}
+
+.agreement-section :deep(.el-link:hover) {
+  color: #40ffe6 !important;
+}
+
+/* 协议对话框样式 */
+:deep(.agreement-dialog) {
+  .el-message-box__content {
+    max-height: 400px;
+    overflow-y: auto;
+  }
+}
 </style>