更改协议同意方式

2025-09-04 10:27:03 +08:00
parent fa0ef783e6
commit 181a04639c
3 changed files with 194 additions and 57 deletions
--- 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;
--- 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>
--- 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>