509 lines
20 KiB
Plaintext
509 lines
20 KiB
Plaintext
<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-100，0为无提现手续费，例：设置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>
|