ss-tiku-manage-h5/src/pages/distributor/rule.vue

<template>
  <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="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="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>

<script setup>
  import { ref, onMounted } from "vue"

  // 规则表单数据
  const ruleForm = ref({
    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(() => {
    // 实际项目中应从接口获取规则配置
    // loadRuleConfig()
  })
  
  // 返回上一页
  function goBack() {
    uni.navigateBack({ delta: 1 })
  }
  
  // 保存规则
  function saveRule() {
    uni.showLoading({ title: '保存中...' })
    
    setTimeout(() => {
      uni.hideLoading()
      uni.showToast({ 
        title: '保存成功', 
        icon: 'success' 
      })
      // 实际项目中应调用接口保存规则配置
      // saveRuleConfig()
    }, 1500)
  }
  
  // 审核开关变更
  function onAuditChange(e) {
    const value = e.detail.value
    ruleForm.value.needAudit = value
  }
  
  // 等级制度开关变更
  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>
  /* #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;
  }
  
  /* 页面头部 */
  .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);
  }
  
  .header-left {
    width: 60rpx;
  }
  
  .back-icon {
    font-size: 40rpx;
    color: #303133;
    cursor: pointer;
  }
  
  .header-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #303133;
  }
  
  .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;
    margin: 0 16rpx 16rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  }
  
  .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;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
  }
  
  .rule-row:last-child {
    margin-bottom: 0;
  }
  
  .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;
  }
  
  /* 平板和大屏响应式 */
  @media screen and (min-width: 768px) {
    .distributor-rule-container {
      max-width: 900px;
      margin: 0 auto;
      width: 100%;
    }
    
    .rule-section {
      margin: 0 32rpx 24rpx;
      padding: 40rpx;
    }
    
    .section-title {
      font-size: 36rpx;
      margin-bottom: 32rpx;
    }
    
    .rule-card {
      padding: 32rpx;
    }
    
    .rule-row {
      margin-bottom: 32rpx;
    }
    
    .rule-label {
      font-size: 26rpx;
    }
    
    .switch {
      transform: scale(1);
    }
    
    .picker {
      min-width: 250rpx;
      padding: 20rpx;
    }
    
    .picker-text {
      font-size: 26rpx;
    }
    
    .form-input {
      min-width: 200rpx;
      padding: 20rpx;
      font-size: 26rpx;
    }
    
    .input-suffix {
      font-size: 26rpx;
      right: 40rpx;
    }
    
    .level-item {
      padding: 24rpx;
    }
    
    .level-title {
      font-size: 28rpx;
    }
    
    .condition-label,
    .benefit-label {
      font-size: 20rpx;
    }
    
    .condition-value,
    .benefit-value {
      font-size: 20rpx;
    }
    
    .save-btn {
      font-size: 28rpx;
    }
  }
  
  /* 大屏设备响应式 */
  @media screen and (min-width: 1024px) {
    .distributor-rule-container {
      max-width: 1000px;
    }
    
    .section-title {
      font-size: 40rpx;
    }
    
    .rule-label {
      font-size: 28rpx;
    }
    
    .picker {
      min-width: 300rpx;
    }
    
    .picker-text {
      font-size: 28rpx;
    }
    
    .form-input {
      min-width: 250rpx;
      font-size: 28rpx;
    }
    
    .input-suffix {
      font-size: 28rpx;
    }
    
    .level-title {
      font-size: 32rpx;
    }
    
    .condition-label,
    .benefit-label {
      font-size: 22rpx;
    }
    
    .condition-value,
    .benefit-value {
      font-size: 22rpx;
    }
  }
</style>