分销员管理

src/pages/distributor/rule.vue

@@ -0,0 +1,145 @@
+<template>
+  <view class="rule-container">
+    <view class="header">
+      <text class="title">分润规则配置</text>
+    </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>
+    
+    <view class="btn-container">
+      <button class="cancel-btn" @click="handleCancel">取消</button>
+      <button class="submit-btn" @click="handleSubmit">提交</button>
+    </view>
+  </view>
+</template>
+
+<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: ''
+  })
+
+  // 初始化加载数据
+  onMounted(() => {
+    fetchRuleDetail()
+  })
+
+  // 获取分润规则详情
+  function fetchRuleDetail() {
+    // 这里应该调用后端API获取数据
+    // 模拟数据
+    setTimeout(() => {
+      ruleForm.value = {
+        distributor_id: distributorId.value,
+        profit_ratio: '10',
+        rule_name: '默认分润规则',
+        rule_desc: '基础分润规则',
+        effective_time: new Date().toISOString(),
+        expire_time: ''
+      }
+    }, 500)
+  }
+
+  // 取消
+  function handleCancel() {
+    uni.navigateBack()
+  }
+
+  // 提交
+  function handleSubmit() {
+    formRef.value.validate().then(() => {
+      // 这里应该调用后端API提交数据
+      uni.showToast({ title: '配置成功' })
+      uni.navigateTo({ url: '/pages/distributor/index' })
+    }).catch(err => {
+      console.log('表单验证失败', err)
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  .rule-container {
+    padding: 20rpx;
+    background-color: #f5f5f5;
+    min-height: 100vh;
+  }
+  
+  .header {
+    margin-bottom: 20rpx;
+    padding-bottom: 20rpx;
+    border-bottom: 1rpx solid #e5e5e5;
+  }
+  
+  .title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333;
+  }
+  
+  .form-container {
+    background-color: #fff;
+    border-radius: 8rpx;
+    padding: 20rpx;
+    margin-bottom: 20rpx;
+  }
+  
+  .btn-container {
+    display: flex;
+    gap: 20rpx;
+  }
+  
+  .cancel-btn {
+    flex: 1;
+    background-color: #909399;
+    color: #fff;
+    border: none;
+    padding: 20rpx;
+    border-radius: 4rpx;
+    font-size: 28rpx;
+  }
+  
+  .submit-btn {
+    flex: 1;
+    background-color: #409eff;
+    color: #fff;
+    border: none;
+    padding: 20rpx;
+    border-radius: 4rpx;
+    font-size: 28rpx;
+  }
+</style>