From 181a04639c7672efbcff6b4498a62dfe9598c3ea Mon Sep 17 00:00:00 2001
From: dzl <786316265@qq.com>
Date: Thu, 4 Sep 2025 10:27:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E5=8D=8F=E8=AE=AE=E5=90=8C?=
 =?UTF-8?q?=E6=84=8F=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Matching.vue  |  65 ++++++++---------------
 src/views/MyProfile.vue | 115 ++++++++++++++++++++++++++++++++++++----
 src/views/Register.vue  |  71 ++++++++++++++++++++++---
 3 files changed, 194 insertions(+), 57 deletions(-)

diff --git a/src/views/Matching.vue b/src/views/Matching.vue
index 0d58767..93b2d6c 100644
--- a/src/views/Matching.vue
+++ b/src/views/Matching.vue
@@ -52,7 +52,7 @@
                 :min="3000"
                 :max="50000"
                 step="100"
-                placeholder="请输入3000-50000之间的金额"
+                placeholder="请输入3000-50000之间的融豆"
               >
                 <template #prepend><img src='/imgs/profile/rongdou.png' alt="融豆" class="bean-image"></template>
               </el-input>
@@ -62,10 +62,6 @@
             <span class="label">分配规则:</span>
             <span class="value">{{ getLargeMatchingRule() }}</span>
           </div>
-          <div class="info-item">
-            <span class="label">预计笔数:</span>
-            <span class="value">{{ getLargeMatchingCount() }}笔</span>
-          </div>
         </div>
         
         <button 
@@ -80,7 +76,7 @@
         <div v-if="matchingType === 'small'" class="tips">
           <p>• 系统将为您匹配3-4笔订单，总获取5000融豆</p>
           <p>• 优先匹配拥有融豆并自愿出售的用户</p>
-          <!-- <p>• 每笔金额随机分配，确保货款循环</p> -->
+          <!-- <p>• 每笔融豆随机分配，确保货款循环</p> -->
         </div>
         
         <!-- 定量获取提示 -->
@@ -111,8 +107,8 @@
             </div>
             <div class="allocation-details">
               <p>转账给: <strong>{{ allocation.to_user_real_name }}</strong></p>
-              <p>金额: <strong class="amount">¥{{ allocation.amount }}</strong></p>
-              <p>总金额: ¥{{ allocation.total_amount }}</p>
+              <p>融豆: <strong class="amount">¥{{ allocation.amount }}</strong></p>
+              <p>总融豆: ¥{{ allocation.total_amount }}</p>
               <p class="deadline-info">
                 转账时效: 
                 <span :class="['time-left', allocation.time_status]">
@@ -156,7 +152,7 @@
             <span :class="['status', order.status]">{{ getStatusText(order.status) }}</span>
           </div>
           <div class="order-info">
-            <p>金额: ¥{{ order.amount }}</p>
+            <p>融豆: ¥{{ order.amount }}</p>
             <p>发起人: {{ order.initiator_real_name }}</p>
             <p v-if="!order.is_system_reverse">轮次: {{ order.cycle_count + 1 }}/{{ order.max_cycles }}</p>
             <p v-if="order.is_system_reverse" class="system-note">系统自动发起，向负余额用户补充货款</p>
@@ -180,7 +176,7 @@
         <div class="modal-body" v-if="selectedOrder">
           <div class="order-summary">
             <p><strong>状态:</strong> {{ getStatusText(selectedOrder.order.status) }}</p>
-            <p><strong>金额:</strong> ¥{{ selectedOrder.order.amount }}</p>
+            <p><strong>融豆:</strong> ¥{{ selectedOrder.order.amount }}</p>
             <p><strong>发起人:</strong> {{ selectedOrder.order.initiator_real_name }}</p>
             <p><strong>轮次:</strong> {{ selectedOrder.order.cycle_count + 1 }}/{{ selectedOrder.order.max_cycles }}</p>
           </div>
@@ -240,7 +236,7 @@
         <div class="transfer-info">
           <h4>转账信息</h4>
           <p><strong>收款人:</strong> {{ transferDialog.toUser.to_user_real_name }}</p>
-          <p><strong>转账金额:</strong> ¥{{ transferDialog.amount }}</p>
+          <p><strong>转账融豆:</strong> ¥{{ transferDialog.amount }}</p>
         </div>
 
         <!-- 收款码展示 -->
@@ -306,7 +302,7 @@
         <div class="transfer-form">
           <h4>转账确认</h4>
           <el-form label-width="100px">
-            <el-form-item label="转账金额">
+            <el-form-item label="转账融豆">
               <el-input 
                 v-model="transferDialog.actualAmount" 
                 readonly
@@ -439,7 +435,7 @@ export default {
       showOrderDetail: false,
       selectedOrder: null,
       matchingType: 'small', // 匹配类型：small(小额) 或 large(大额)
-      customAmount: '', // 定量获取自定义金额
+      customAmount: '', // 定量获取自定义融豆
       transferDialog: {
         visible: false,
         allocationId: null,
@@ -540,12 +536,10 @@ export default {
           confirmMessage = '确定要开始小额匹配吗？\n\n匹配成功后将生成3-4笔转账分配。'
         } else {
           if (!this.isValidCustomAmount) {
-            this.$message.error('请输入有效的匹配金额（3000-50000元）')
+            this.$message.error('请输入有效的匹配融豆（3000-50000元）')
             return
           }
           const amount = parseFloat(this.customAmount)
-          const count = this.getLargeMatchingCount()
-          confirmMessage = `确定要开始定量获取吗？\n\n匹配金额：${amount}元\n将生成${count}笔转账分配`
         }
         
         // 二次确认对话框
@@ -563,7 +557,7 @@ export default {
           matchingType: this.matchingType
         }
         
-        // 如果是定量获取，添加自定义金额
+        // 如果是定量获取，添加自定义融豆
         if (this.matchingType === 'large') {
           requestData.customAmount = parseFloat(this.customAmount)
         }
@@ -572,7 +566,7 @@ export default {
         
         const successMessage = this.matchingType === 'small' 
           ? '小额匹配成功！已为您生成3笔转账分配'
-          : `定量获取成功！已为您生成${this.getLargeMatchingCount()}笔转账分配`
+          : `定量获取成功！已为您生成笔转账分配`
         
         this.$message.success(successMessage)
         await this.loadData()
@@ -608,7 +602,7 @@ export default {
     /**
      * 确认分配并创建转账记录
      * @param {number} allocationId - 分配ID
-     * @param {number} expectedAmount - 预期转账金额
+     * @param {number} expectedAmount - 预期转账融豆
      */
     async confirmAllocation(allocationId, expectedAmount) {
       try {
@@ -709,9 +703,9 @@ export default {
     },
     
     /**
-     * 格式化金额显示，确保数字安全
-     * @param {number|string|null|undefined} amount - 金额值
-     * @returns {string} 格式化后的金额字符串
+     * 格式化融豆显示，确保数字安全
+     * @param {number|string|null|undefined} amount - 融豆值
+     * @returns {string} 格式化后的融豆字符串
      */
     formatAmount(amount) {
       const num = parseFloat(amount)
@@ -725,13 +719,13 @@ export default {
     getLargeMatchingRule() {
       const amount = parseFloat(this.customAmount) || 0
       if (amount <= 0) {
-        return '请输入金额'
+        return '请输入融豆'
       } else if (amount < 3000) {
-        return '金额不能少于3000元'
+        return '融豆不能少于3000元'
       } else if (amount > 50000) {
-        return '金额不能超过50000元'
+        return '融豆不能超过50000元'
       } else if (amount <= 15000) {
-        return '分成多笔随机金额'
+        return '分成多笔随机融豆'
       } else {
         return '随机分拆，每笔100-10000元'
       }
@@ -741,19 +735,6 @@ export default {
      * 获取定量获取的预计笔数
      * @returns {string} 预计笔数描述
      */
-    getLargeMatchingCount() {
-      const amount = parseFloat(this.customAmount) || 0
-      if (amount <= 0 || amount < 5000 || amount > 50000) {
-        return '0'
-      } else if (amount <= 15000) {
-        return '3'
-      } else {
-        // 15000以上随机分拆，估算笔数范围
-        const minCount = Math.ceil(amount / 10000) // 按最大单笔10000计算最少笔数
-        const maxCount = Math.floor(amount / 100) // 按最小单笔100计算最多笔数
-        return `${minCount}-${Math.min(maxCount, 10)}` // 限制最大显示笔数为10
-      }
-    },
 
     /**
      * 关闭转账弹窗
@@ -925,8 +906,8 @@ export default {
 
   computed: {
     /**
-     * 验证自定义金额是否有效
-     * @returns {boolean} 金额是否有效
+     * 验证自定义融豆是否有效
+     * @returns {boolean} 融豆是否有效
      */
     isValidCustomAmount() {
       const amount = parseFloat(this.customAmount)
@@ -1449,7 +1430,7 @@ export default {
   transform: translateY(0);
 }
 
-/* 自定义金额输入框样式 */
+/* 自定义融豆输入框样式 */
 .custom-amount-input {
   flex: 1;
   margin-left: 10px;
diff --git a/src/views/MyProfile.vue b/src/views/MyProfile.vue
index 5dd4560..bfb225c 100644
--- a/src/views/MyProfile.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/Register.vue b/src/views/Register.vue
index 01820a4..e5fc346 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -136,16 +136,31 @@
           </el-form-item>
           
           <el-form-item prop="agreement">
-            <el-checkbox v-model="registerForm.agreement">
+            <el-checkbox 
+              v-model="registerForm.agreement"
+              @change="handleAgreementChange"
+            >
               我已阅读并同意
-              <el-link type="primary" @click="showAgreement">
+              <el-link 
+                type="primary" 
+                @click="showAgreement"
+                :class="{ 'viewed': agreementViewed }"
+              >
                 《用户协议》
               </el-link>
               和
-              <el-link type="primary" @click="showPrivacy">
+              <el-link 
+                type="primary" 
+                @click="showPrivacy"
+                :class="{ 'viewed': privacyViewed }"
+              >
                 《隐私政策》
               </el-link>
             </el-checkbox>
+            <div v-if="!canCheckAgreement" class="agreement-hint">
+              <el-icon><InfoFilled /></el-icon>
+              <span>请先点击查看用户协议和隐私政策</span>
+            </div>
           </el-form-item>
           
           <el-form-item>
@@ -205,7 +220,7 @@ import { ref, reactive, computed, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { User, Lock, Message, Edit, ChatDotRound, CreditCard, Location } from '@element-plus/icons-vue'
+import { User, Lock, Message, Edit, ChatDotRound, CreditCard, Location, InfoFilled } from '@element-plus/icons-vue'
 import Captcha from '@/components/Captcha.vue'
 
 const router = useRouter()
@@ -230,6 +245,11 @@ const registerForm = reactive({
   agreement: false
 })
 
+// 协议查看状态
+const agreementViewed = ref(false)
+const privacyViewed = ref(false)
+const canCheckAgreement = computed(() => agreementViewed.value && privacyViewed.value)
+
 // 短信验证码相关状态
 const sendingSMS = ref(false)
 const smsCountdown = ref(0)
@@ -484,7 +504,10 @@ const showAgreement = () => {
       dangerouslyUseHTMLString: true,
       customClass: 'agreement-dialog'
     }
-  )
+  ).then(() => {
+    agreementViewed.value = true
+    ElMessage.success('已查看用户协议')
+  })
 }
 
 // 显示隐私政策
@@ -504,7 +527,20 @@ const showPrivacy = () => {
       dangerouslyUseHTMLString: true,
       customClass: 'privacy-dialog'
     }
-  )
+  ).then(() => {
+    privacyViewed.value = true
+    ElMessage.success('已查看隐私政策')
+  })
+}
+
+// 处理协议勾选
+const handleAgreementChange = (value) => {
+  if (value && !canCheckAgreement.value) {
+    registerForm.agreement = false
+    ElMessage.warning('请先查看用户协议和隐私政策后再勾选')
+    return false
+  }
+  return true
 }
 
 // 图片上传成功处理
@@ -835,4 +871,27 @@ onMounted(() => {
   opacity: 0.6;
   cursor: not-allowed;
 }
+
+/* 协议相关样式 */
+.agreement-hint {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+  font-size: 12px;
+  color: #e6a23c;
+}
+
+.agreement-hint .el-icon {
+  font-size: 14px;
+}
+
+:deep(.el-link.viewed) {
+  color: #67c23a !important;
+  font-weight: 500;
+}
+
+:deep(.el-link.viewed:hover) {
+  color: #529b2e !important;
+}
 </style>
\ No newline at end of file