优化细节

This commit is contained in:
2026-02-06 12:06:33 +08:00
parent b7545173c6
commit d00f0b7412
83 changed files with 3901 additions and 2354 deletions

View File

@@ -0,0 +1,508 @@
<template>
<view class="admin-page">
<view class="content-card">
<view class="tabs-row">
<view
v-for="(tab, index) in tabs"
:key="index"
class="tab-item"
:class="{ active: activeTab === index }"
@click="activeTab = index"
>
<text>{{ tab }}</text>
</view>
</view>
<view class="form-container">
<!-- 分销模式 -->
<view v-if="activeTab === 0" class="form-content">
<view class="form-item">
<text class="label">分销启用:</text>
<radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.statue = e.detail.value">
<label class="radio-label">
<radio value="1" :checked="form.statue === '1'" color="#1890ff" /> 开启
</label>
<label class="radio-label">
<radio value="0" :checked="form.statue === '0'" color="#1890ff" /> 关闭
</label>
</radio-group>
<text class="hint">商城分销功能开启关闭</text>
</view>
<view class="form-item">
<text class="label">分销模式:</text>
<radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.extract_type = e.detail.value">
<label class="radio-label">
<radio value="1" :checked="form.extract_type === '1'" color="#1890ff" /> 指定分销
</label>
<label class="radio-label">
<radio value="2" :checked="form.extract_type === '2'" color="#1890ff" /> 人人分销
</label>
<label class="radio-label">
<radio value="3" :checked="form.extract_type === '3'" color="#1890ff" /> 满额分销
</label>
</radio-group>
<text class="hint">人人分销"默认每个人都可以分销,“指定分销”仅后台手动设置推广员,“满额分销”指用户购买商品满足消费金额后自动开启分销</text>
</view>
<view class="form-item">
<text class="label">分销关系绑定:</text>
<radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.bind_type = e.detail.value">
<label class="radio-label">
<radio value="1" :checked="form.bind_type === '1'" color="#1890ff" /> 所有用户
</label>
<label class="radio-label">
<radio value="2" :checked="form.bind_type === '2'" color="#1890ff" /> 新用户
</label>
</radio-group>
<text class="hint">所有用户”指所有没有上级推广人的用户点击或扫码即绑定分销关系,“新用户”指新注册的用户或首次进入系统的用户才会绑定推广关系</text>
</view>
<view class="form-item">
<text class="label">绑定模式:</text>
<radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.store_brokerage_binding_status = e.detail.value">
<label class="radio-label">
<radio value="1" :checked="form.store_brokerage_binding_status === '1'" color="#1890ff" /> 永久
</label>
<label class="radio-label">
<radio value="2" :checked="form.store_brokerage_binding_status === '2'" color="#1890ff" /> 有效期
</label>
<label class="radio-label">
<radio value="3" :checked="form.store_brokerage_binding_status === '3'" color="#1890ff" /> 临时
</label>
</radio-group>
<text class="hint">永久”一次绑定永久有效,“有效期”绑定后一段时间内有效,“临时”临时有效</text>
</view>
<view class="form-item">
<text class="label">分销海报图:</text>
<view class="poster-upload">
<image class="poster-preview" v-if="form.brokerage_poster_status" :src="form.brokerage_poster_status" mode="aspectFill"></image>
<view v-else class="upload-btn" @click="onUploadPoster">
<text class="plus">+</text>
</view>
</view>
<text class="hint">个人中心分销海报图片建议尺寸600x1000</text>
</view>
<view class="form-item">
<text class="label">分销层级:</text>
<radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.brokerage_level = e.detail.value">
<label class="radio-label">
<radio value="1" :checked="form.brokerage_level === '1'" color="#1890ff" /> 一级分销
</label>
<label class="radio-label">
<radio value="2" :checked="form.brokerage_level === '2'" color="#1890ff" /> 二级分销
</label>
</radio-group>
<text class="hint">分销层级,一级是只返上一层的佣金,二级是返上级 and 上上级的佣金</text>
</view>
<view class="form-item">
<text class="label">事业部开关:</text>
<radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.is_area_manager = e.detail.value">
<label class="radio-label">
<radio value="1" :checked="form.is_area_manager === '1'" color="#1890ff" /> 开启
</label>
<label class="radio-label">
<radio value="0" :checked="form.is_area_manager === '0'" color="#1890ff" /> 关闭
</label>
</radio-group>
<text class="hint">事业部开关,关闭后不计算事业部佣金</text>
</view>
<view class="form-item">
<text class="label">代理商申请开关:</text>
<radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.is_agent_apply = e.detail.value">
<label class="radio-label">
<radio value="1" :checked="form.is_agent_apply === '1'" color="#1890ff" /> 开启
</label>
<label class="radio-label">
<radio value="0" :checked="form.is_agent_apply === '0'" color="#1890ff" /> 关闭
</label>
</radio-group>
<text class="hint">控制移动端我的推广页面的代理商申请按钮是否显示</text>
</view>
<view class="form-item">
<text class="label">佣金悬浮窗开关:</text>
<radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.is_commission_window = e.detail.value">
<label class="radio-label">
<radio value="1" :checked="form.is_commission_window === '1'" color="#1890ff" /> 开启
</label>
<label class="radio-label">
<radio value="0" :checked="form.is_commission_window === '0'" color="#1890ff" /> 关闭
</label>
</radio-group>
<text class="hint">佣金悬浮窗开关,关闭之后,商品详情不显示佣金悬浮窗</text>
</view>
<button class="submit-btn" @click="onSubmit">提交</button>
</view>
<!-- 返佣设置 -->
<view v-if="activeTab === 1" class="form-content">
<view class="form-item">
<text class="label">自购返佣:</text>
<radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.is_self_brokerage = e.detail.value">
<label class="radio-label">
<radio value="1" :checked="form.is_self_brokerage === '1'" color="#1890ff" /> 开启
</label>
<label class="radio-label">
<radio value="0" :checked="form.is_self_brokerage === '0'" color="#1890ff" /> 关闭
</label>
</radio-group>
<text class="hint">是否开启自购返佣(开启:分销员自己购买商品,享受一级返佣,上级享受二级返佣;关闭:分销员自己购买商品没有返佣)</text>
</view>
<view class="form-item">
<text class="label">购买付费会员返佣:</text>
<radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.is_member_brokerage = e.detail.value">
<label class="radio-label">
<radio value="1" :checked="form.is_member_brokerage === '1'" color="#1890ff" /> 开启
</label>
<label class="radio-label">
<radio value="0" :checked="form.is_member_brokerage === '0'" color="#1890ff" /> 关闭
</label>
</radio-group>
<text class="hint">购买付费会员是否按照设置的佣金比例进行返佣</text>
</view>
<view class="form-item">
<text class="label">返佣类型:</text>
<radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.brokerage_type = e.detail.value">
<label class="radio-label">
<radio value="1" :checked="form.brokerage_type === '1'" color="#1890ff" /> 按照商品价格返佣
</label>
<label class="radio-label">
<radio value="2" :checked="form.brokerage_type === '2'" color="#1890ff" /> 按照实际支付价格返佣
</label>
</radio-group>
<text class="hint">选择返佣类型,按照商品价格返佣(按照商品售价计算返佣金额)以及按照实际支付价格返佣(按照商品的实际支付价格计算返佣)</text>
</view>
<view class="form-item">
<text class="label">推广用户返佣:</text>
<radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.is_promoter_brokerage = e.detail.value">
<label class="radio-label">
<radio value="1" :checked="form.is_promoter_brokerage === '1'" color="#1890ff" /> 开启
</label>
<label class="radio-label">
<radio value="0" :checked="form.is_promoter_brokerage === '0'" color="#1890ff" /> 关闭
</label>
</radio-group>
<text class="hint">分销推广用户获取佣金</text>
</view>
<view class="form-item">
<text class="label">推广佣金单价:</text>
<view class="input-with-unit">
<input class="form-input" :value="form.promoter_brokerage_price" @input="(e: UniInputEvent) => form.promoter_brokerage_price = e.detail.value" />
</view>
<text class="hint">分销推广佣金单价(每推广一个用户)</text>
</view>
<view class="form-item">
<text class="label">每日推广佣金上限:</text>
<view class="input-with-unit">
<input class="form-input" :value="form.promoter_brokerage_day_max" @input="(e: UniInputEvent) => form.promoter_brokerage_day_max = e.detail.value" />
</view>
<text class="hint">每日推广佣金上限0:不发佣金;-1:不限制;最好是推广佣金单价的整数倍)</text>
</view>
<view class="form-item">
<text class="label">一级返佣比例:</text>
<view class="input-with-unit">
<input class="form-input" :value="form.store_brokerage_ratio" @input="(e: UniInputEvent) => form.store_brokerage_ratio = e.detail.value" />
</view>
<text class="hint">订单交易成功后给上级返佣的比例0 - 100,例:5 = 反订单商品金额的5%</text>
</view>
<view class="form-item">
<text class="label">二级返佣比例:</text>
<view class="input-with-unit">
<input class="form-input" :value="form.store_brokerage_two_ratio" @input="(e: UniInputEvent) => form.store_brokerage_two_ratio = e.detail.value" />
</view>
<text class="hint">订单交易成功后给上上级返佣的比例0 - 100,例:5 = 反订单商品金额 of 5%</text>
</view>
<view class="form-item">
<text class="label">冻结时间:</text>
<view class="input-with-unit">
<input class="form-input" :value="form.extract_frozen_time" @input="(e: UniInputEvent) => form.extract_frozen_time = e.detail.value" />
</view>
<text class="hint">防止用户退款,佣金被提现了,所以需要设置佣金冻结时间(天)</text>
</view>
<button class="submit-btn" @click="onSubmit">提交</button>
</view>
<!-- 提现设置 -->
<view v-if="activeTab === 2" class="form-content">
<view class="form-item">
<text class="label">提现最低金额:</text>
<input class="form-input" :value="form.user_extract_min_price" @input="(e: UniInputEvent) => form.user_extract_min_price = e.detail.value" />
<text class="hint">用户提现最低金额限制</text>
</view>
<view class="form-item">
<text class="label">提现银行卡:</text>
<textarea class="form-textarea" :value="form.extract_bank_list" @input="(e: UniInputEvent) => form.extract_bank_list = e.detail.value" placeholder="配置提现银行卡类型,每个银行换行"></textarea>
<text class="hint">配置提现银行卡类型,每个银行换行</text>
</view>
<view class="form-item">
<text class="label">提现方式:</text>
<checkbox-group class="checkbox-group" @change="(e: UniCheckboxGroupChangeEvent) => form.extract_type_list = e.detail.value">
<label class="checkbox-label"><checkbox value="bank" :checked="form.extract_type_list.includes('bank')" color="#1890ff" /> 银行卡</label>
<label class="checkbox-label"><checkbox value="wechat" :checked="form.extract_type_list.includes('wechat')" color="#1890ff" /> 微信</label>
<label class="checkbox-label"><checkbox value="alipay" :checked="form.extract_type_list.includes('alipay')" color="#1890ff" /> 支付宝</label>
</checkbox-group>
<text class="hint">开启后用户可以选择该提现方式</text>
</view>
<view class="form-item">
<text class="label">微信提现:</text>
<radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.wechat_extract_type = e.detail.value">
<label class="radio-label">
<radio value="1" :checked="form.wechat_extract_type === '1'" color="#1890ff" /> 手动线下转账
</label>
<label class="radio-label">
<radio value="2" :checked="form.wechat_extract_type === '2'" color="#1890ff" /> 自动转账到零钱
</label>
</radio-group>
<text class="hint">微信提现方式:手动线下转账,自动转账到零钱(需开通商家转账到零钱)</text>
</view>
<view class="form-item">
<text class="label">支付宝提现:</text>
<radio-group class="radio-group" @change="(e: UniRadioGroupChangeEvent) => form.alipay_extract_type = e.detail.value">
<label class="radio-label">
<radio value="1" :checked="form.alipay_extract_type === '1'" color="#1890ff" /> 手动线下转账
</label>
<label class="radio-label">
<radio value="2" :checked="form.alipay_extract_type === '2'" color="#1890ff" /> 自动转账到余额
</label>
</radio-group>
<text class="hint">支付宝提现方式:手动线下转账,自动转账到余额(需开通支付宝转账)</text>
</view>
<view class="form-item">
<text class="label">提现手续费:</text>
<input class="form-input" :value="form.user_extract_fee" @input="(e: UniInputEvent) => form.user_extract_fee = e.detail.value" />
<text class="hint">提现手续费百分比范围0-1000为无提现手续费设置10即收取10%手续费提现100元到账90元10元手续费</text>
</view>
<button class="submit-btn" @click="onSubmit">提交</button>
</view>
</view>
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
const activeTab = ref(0)
const tabs = ['分销模式', '返佣设置', '提现设置']
const form = ref({
// 分销模式
statue: '1',
extract_type: '2',
bind_type: '2',
store_brokerage_binding_status: '1',
brokerage_poster_status: '',
brokerage_level: '2',
is_area_manager: '1',
is_agent_apply: '1',
is_commission_window: '1',
// 返佣设置
is_self_brokerage: '1',
is_member_brokerage: '0',
brokerage_type: '1',
is_promoter_brokerage: '1',
promoter_brokerage_price: '2',
promoter_brokerage_day_max: '-1',
store_brokerage_ratio: '20',
store_brokerage_two_ratio: '2',
extract_frozen_time: '1',
// 提现设置
user_extract_min_price: '1',
extract_bank_list: '中国银行',
extract_type_list: ['bank', 'wechat', 'alipay'],
wechat_extract_type: '1',
alipay_extract_type: '1',
user_extract_fee: '0'
})
function onUploadPoster() {
uni.chooseImage({
count: 1,
success: (res) => {
form.value.brokerage_poster_status = res.tempFilePaths[0]
}
})
}
function onSubmit() {
uni.showToast({ title: '保存成功', icon: 'success' })
}
</script>
<style scoped lang="scss">
.admin-page {
display: flex;
flex-direction: column;
}
.content-card {
background: #fff;
border-radius: 4px;
}
.tabs-row {
display: flex;
flex-direction: row;
padding: 0 24px;
border-bottom: 1px solid #f0f0f0;
}
.tab-item {
padding: 16px 20px;
cursor: pointer;
position: relative;
text { font-size: 15px; color: #666; }
&.active {
text { color: #1890ff; font-weight: 500; }
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: #1890ff;
}
}
}
.form-container {
padding: 32px 24px;
}
.form-item {
margin-bottom: 24px;
display: flex;
flex-direction: column;
}
.label {
font-size: 14px;
color: #333;
margin-bottom: 8px;
font-weight: 500;
}
.radio-group, .checkbox-group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
}
.radio-label, .checkbox-label {
display: flex;
flex-direction: row;
align-items: center;
font-size: 14px;
color: #666;
}
.hint {
font-size: 12px;
color: #999;
margin-top: 8px;
line-height: 1.5;
max-width: 800px;
}
.form-input {
border: 1px solid #d9d9d9;
border-radius: 4px;
height: 36px;
padding: 0 12px;
font-size: 14px;
width: 100%;
max-width: 400px;
}
.form-textarea {
border: 1px solid #d9d9d9;
border-radius: 4px;
padding: 8px 12px;
font-size: 14px;
width: 100%;
max-width: 600px;
height: 120px;
}
.poster-upload {
width: 80px;
height: 80px;
border: 1px dashed #d9d9d9;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: #fafafa;
&:hover {
border-color: #1890ff;
}
}
.poster-preview {
width: 100%;
height: 100%;
border-radius: 4px;
}
.upload-btn {
display: flex;
align-items: center;
justify-content: center;
.plus {
font-size: 24px;
color: #999;
}
}
.input-with-unit {
display: flex;
flex-direction: row;
align-items: center;
}
.submit-btn {
margin-top: 24px;
width: 80px;
height: 36px;
background: #1890ff;
color: #fff;
border-radius: 4px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&:active {
opacity: 0.8;
}
}
</style>