页面初始化

src/pages/distributor/rule.vue

@@ -1,40 +1,153 @@
 <template>
-  <view class="rule-container">
-    <view class="header">
-      <text class="title">分润规则配置</text>
+  <view class="distributor-rule-container">
+    <!-- 页面标题 -->
+    <view class="page-header">
+      <view class="header-left" @click="goBack">
+        <view class="back-icon">←</view>
+      </view>
+      <view class="header-title">分销规则配置</view>
+      <view class="header-right" @click="saveRule">
+        <view class="save-btn">保存</view>
+      </view>
     </view>
     
-    <view class="form-container">
-      <uni-forms :model="ruleForm" ref="formRef">
-        <uni-forms-item label="分销员ID" required>
-          <uni-easyinput v-model="ruleForm.distributor_id" placeholder="请输入分销员ID" type="number" />
-        </uni-forms-item>
-        
-        <uni-forms-item label="分润比例" required>
-          <uni-easyinput v-model="ruleForm.profit_ratio" placeholder="请输入分润比例（%）" type="number" />
-        </uni-forms-item>
-        
-        <uni-forms-item label="规则名称" required>
-          <uni-easyinput v-model="ruleForm.rule_name" placeholder="请输入规则名称" />
-        </uni-forms-item>
-        
-        <uni-forms-item label="规则描述">
-          <uni-easyinput v-model="ruleForm.rule_desc" placeholder="请输入规则描述" type="textarea" />
-        </uni-forms-item>
-        
-        <uni-forms-item label="生效时间">
-          <uni-datetime-picker v-model="ruleForm.effective_time" type="datetime" placeholder="请选择生效时间" />
-        </uni-forms-item>
-        
-        <uni-forms-item label="失效时间">
-          <uni-datetime-picker v-model="ruleForm.expire_time" type="datetime" placeholder="请选择失效时间" />
-        </uni-forms-item>
-      </uni-forms>
+    <!-- 规则配置 -->
+    <view class="rule-section">
+      <view class="section-title">基本规则</view>
+      <view class="rule-card">
+        <view class="rule-row">
+          <view class="rule-label">分销员申请审核</view>
+          <view class="rule-control">
+            <switch 
+              :checked="ruleForm.needAudit" 
+              @change="onAuditChange"
+              class="switch"
+            />
+          </view>
+        </view>
+        <view class="rule-row">
+          <view class="rule-label">分销员等级制度</view>
+          <view class="rule-control">
+            <switch 
+              :checked="ruleForm.enableLevel" 
+              @change="onLevelChange"
+              class="switch"
+            />
+          </view>
+        </view>
+        <view class="rule-row">
+          <view class="rule-label">分销员自购优惠</view>
+          <view class="rule-control">
+            <switch 
+              :checked="ruleForm.enableSelfBuy" 
+              @change="onSelfBuyChange"
+              class="switch"
+            />
+          </view>
+        </view>
+        <view class="rule-row">
+          <view class="rule-label">分销员邀请奖励</view>
+          <view class="rule-control">
+            <switch 
+              :checked="ruleForm.enableInviteReward" 
+              @change="onInviteRewardChange"
+              class="switch"
+            />
+          </view>
+        </view>
+      </view>
     </view>
     
-    <view class="btn-container">
-      <button class="cancel-btn" @click="handleCancel">取消</button>
-      <button class="submit-btn" @click="handleSubmit">提交</button>
+    <!-- 等级配置 -->
+    <view class="rule-section" v-if="ruleForm.enableLevel">
+      <view class="section-title">等级配置</view>
+      <view class="rule-card">
+        <view class="level-config">
+          <view 
+            v-for="(level, index) in levelList" 
+            :key="index"
+            class="level-item"
+          >
+            <view class="level-header">
+              <view class="level-title">{{ level.name }}</view>
+              <view class="level-condition">
+                <view class="condition-label">升级条件：</view>
+                <view class="condition-value">{{ level.condition }}</view>
+              </view>
+            </view>
+            <view class="level-benefit">
+              <view class="benefit-item">
+                <view class="benefit-label">分销佣金比例：</view>
+                <view class="benefit-value">{{ level.commissionRate }}%</view>
+              </view>
+              <view class="benefit-item">
+                <view class="benefit-label">自购优惠比例：</view>
+                <view class="benefit-value">{{ level.selfBuyRate }}%</view>
+              </view>
+              <view class="benefit-item">
+                <view class="benefit-label">邀请奖励：</view>
+                <view class="benefit-value">¥{{ level.inviteReward.toFixed(2) }}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 佣金规则 -->
+    <view class="rule-section">
+      <view class="section-title">佣金规则</view>
+      <view class="rule-card">
+        <view class="rule-row">
+          <view class="rule-label">佣金计算方式</view>
+          <view class="rule-control">
+            <picker 
+              :range="commissionTypeOptions" 
+              :value="commissionTypeIndex"
+              @change="onCommissionTypeChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ commissionTypeOptions[commissionTypeIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="rule-row">
+          <view class="rule-label">佣金结算周期</view>
+          <view class="rule-control">
+            <picker 
+              :range="settlementCycleOptions" 
+              :value="settlementCycleIndex"
+              @change="onSettlementCycleChange"
+              class="picker"
+            >
+              <view class="picker-text">{{ settlementCycleOptions[settlementCycleIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="rule-row">
+          <view class="rule-label">最低提现金额</view>
+          <view class="rule-control">
+            <input 
+              v-model="ruleForm.minWithdrawAmount" 
+              type="number" 
+              class="form-input"
+              placeholder="请输入最低提现金额"
+            />
+          </view>
+        </view>
+        <view class="rule-row">
+          <view class="rule-label">提现手续费</view>
+          <view class="rule-control">
+            <input 
+              v-model="ruleForm.withdrawFee" 
+              type="number" 
+              class="form-input"
+              placeholder="请输入提现手续费比例"
+            />
+            <view class="input-suffix">%</view>
+          </view>
+        </view>
+      </view>
     </view>
   </view>
 </template>
@@ -42,104 +155,319 @@
 <script setup>
   import { ref, onMounted } from "vue"
 
-  const formRef = ref(null)
-  const distributorId = ref(uni.getStorageSync('__uni_route_query')?.id || '')
-  
+  // 规则表单数据
   const ruleForm = ref({
-    distributor_id: distributorId.value,
-    profit_ratio: '',
-    rule_name: '',
-    rule_desc: '',
-    effective_time: '',
-    expire_time: ''
+    needAudit: true,
+    enableLevel: true,
+    enableSelfBuy: true,
+    enableInviteReward: true,
+    minWithdrawAmount: 100,
+    withdrawFee: 0.5
   })
-
-  // 初始化加载数据
+  
+  // 佣金计算方式选项
+  const commissionTypeOptions = ['按比例', '固定金额']
+  const commissionTypeIndex = ref(0)
+  
+  // 结算周期选项
+  const settlementCycleOptions = ['实时结算', '每日结算', '每周结算', '每月结算']
+  const settlementCycleIndex = ref(3)
+  
+  // 等级配置
+  const levelList = ref([
+    {
+      name: '初级分销员',
+      condition: '邀请1人注册',
+      commissionRate: 10,
+      selfBuyRate: 5,
+      inviteReward: 5
+    },
+    {
+      name: '中级分销员',
+      condition: '邀请5人注册',
+      commissionRate: 15,
+      selfBuyRate: 8,
+      inviteReward: 8
+    },
+    {
+      name: '高级分销员',
+      condition: '邀请10人注册',
+      commissionRate: 20,
+      selfBuyRate: 10,
+      inviteReward: 10
+    }
+  ])
+  
   onMounted(() => {
-    fetchRuleDetail()
+    // 实际项目中应从接口获取规则配置
+    // loadRuleConfig()
   })
-
-  // 获取分润规则详情
-  function fetchRuleDetail() {
-    // 这里应该调用后端API获取数据
-    // 模拟数据
+  
+  // 返回上一页
+  function goBack() {
+    uni.navigateBack({ delta: 1 })
+  }
+  
+  // 保存规则
+  function saveRule() {
+    uni.showLoading({ title: '保存中...' })
+    
     setTimeout(() => {
-      ruleForm.value = {
-        distributor_id: distributorId.value,
-        profit_ratio: '10',
-        rule_name: '默认分润规则',
-        rule_desc: '基础分润规则',
-        effective_time: new Date().toISOString(),
-        expire_time: ''
-      }
-    }, 500)
+      uni.hideLoading()
+      uni.showToast({ 
+        title: '保存成功', 
+        icon: 'success' 
+      })
+      // 实际项目中应调用接口保存规则配置
+      // saveRuleConfig()
+    }, 1500)
   }
-
-  // 取消
-  function handleCancel() {
-    uni.navigateBack()
+  
+  // 审核开关变更
+  function onAuditChange(e) {
+    const value = e.detail.value
+    ruleForm.value.needAudit = value
   }
-
-  // 提交
-  function handleSubmit() {
-    formRef.value.validate().then(() => {
-      // 这里应该调用后端API提交数据
-      uni.showToast({ title: '配置成功' })
-      uni.navigateTo({ url: '/pages/distributor/index' })
-    }).catch(err => {
-      console.log('表单验证失败', err)
-    })
+  
+  // 等级制度开关变更
+  function onLevelChange(e) {
+    const value = e.detail.value
+    ruleForm.value.enableLevel = value
+  }
+  
+  // 自购优惠开关变更
+  function onSelfBuyChange(e) {
+    const value = e.detail.value
+    ruleForm.value.enableSelfBuy = value
+  }
+  
+  // 邀请奖励开关变更
+  function onInviteRewardChange(e) {
+    const value = e.detail.value
+    ruleForm.value.enableInviteReward = value
+  }
+  
+  // 佣金计算方式变更
+  function onCommissionTypeChange(e) {
+    const value = e.detail.value
+    commissionTypeIndex.value = value
+  }
+  
+  // 结算周期变更
+  function onSettlementCycleChange(e) {
+    const value = e.detail.value
+    settlementCycleIndex.value = value
   }
 </script>
 
 <style lang="scss" scoped>
-  .rule-container {
-    padding: 20rpx;
-    background-color: #f5f5f5;
-    min-height: 100vh;
+  /* #ifndef APP-NVUE */
+  page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    height: auto;
+  }
+
+  view {
+    font-size: 14px;
+    line-height: inherit;
+  }
+  /* #endif */
+
+  .distributor-rule-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
   }
   
-  .header {
-    margin-bottom: 20rpx;
-    padding-bottom: 20rpx;
-    border-bottom: 1rpx solid #e5e5e5;
+  /* 页面头部 */
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 120rpx;
+    background-color: #fff;
+    padding: 0 32rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
   }
   
-  .title {
+  .header-left {
+    width: 60rpx;
+  }
+  
+  .back-icon {
+    font-size: 40rpx;
+    color: #303133;
+    cursor: pointer;
+  }
+  
+  .header-title {
     font-size: 32rpx;
     font-weight: bold;
-    color: #333;
+    color: #303133;
   }
   
-  .form-container {
+  .header-right {
+    width: 60rpx;
+    text-align: right;
+  }
+  
+  .save-btn {
+    font-size: 24rpx;
+    color: #409eff;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  
+  /* 规则配置 */
+  .rule-section {
+    padding: 32rpx;
     background-color: #fff;
-    border-radius: 8rpx;
-    padding: 20rpx;
-    margin-bottom: 20rpx;
+    margin: 0 16rpx 16rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
   }
   
-  .btn-container {
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 24rpx;
+    padding-left: 12rpx;
+    border-left: 8rpx solid #409eff;
+    line-height: 1.2;
+  }
+  
+  .rule-card {
+    background-color: #f9f9f9;
+    border-radius: 12rpx;
+    padding: 24rpx;
+  }
+  
+  .rule-row {
     display: flex;
-    gap: 20rpx;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24rpx;
   }
   
-  .cancel-btn {
-    flex: 1;
-    background-color: #909399;
-    color: #fff;
-    border: none;
-    padding: 20rpx;
-    border-radius: 4rpx;
-    font-size: 28rpx;
+  .rule-row:last-child {
+    margin-bottom: 0;
   }
   
-  .submit-btn {
-    flex: 1;
-    background-color: #409eff;
-    color: #fff;
-    border: none;
-    padding: 20rpx;
-    border-radius: 4rpx;
-    font-size: 28rpx;
+  .rule-label {
+    font-size: 24rpx;
+    color: #606266;
+  }
+  
+  .rule-control {
+    position: relative;
+  }
+  
+  .switch {
+    transform: scale(0.8);
+  }
+  
+  .picker {
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    min-width: 200rpx;
+  }
+  
+  .picker-text {
+    font-size: 24rpx;
+    color: #303133;
+  }
+  
+  .form-input {
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+    font-size: 24rpx;
+    color: #303133;
+    min-width: 150rpx;
+  }
+  
+  .input-suffix {
+    position: absolute;
+    right: 32rpx;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 24rpx;
+    color: #606266;
+  }
+  
+  /* 等级配置 */
+  .level-config {
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+  }
+  
+  .level-item {
+    background-color: #fff;
+    border: 1rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
+  
+  .level-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12rpx;
+  }
+  
+  .level-title {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: #303133;
+  }
+  
+  .level-condition {
+    display: flex;
+    align-items: center;
+  }
+  
+  .condition-label {
+    font-size: 18rpx;
+    color: #606266;
+  }
+  
+  .condition-value {
+    font-size: 18rpx;
+    color: #409eff;
+    margin-left: 4rpx;
+  }
+  
+  .level-benefit {
+    display: flex;
+    flex-direction: column;
+    gap: 8rpx;
+  }
+  
+  .benefit-item {
+    display: flex;
+    align-items: center;
+  }
+  
+  .benefit-label {
+    font-size: 18rpx;
+    color: #606266;
+  }
+  
+  .benefit-value {
+    font-size: 18rpx;
+    color: #303133;
+    margin-left: 4rpx;
   }
 </style>