596 lines
13 KiB
Vue
596 lines
13 KiB
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> |