qiushanhe/ss-tiku-manage-h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

分销员管理

Browse Source
This commit is contained in:
zcx
2026-01-28 16:07:17 +08:00
parent b1843402c0
commit 737f37afdc
7 changed files with 1202 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
src/pages/distributor/add.vue Normal file
View File

@@ -0,0 +1,224 @@
<template>
<view class="add-container">
<!-- 头部 -->
<view class="header">
<uni-icons type="back" size="28" color="#303133" @click="handleCancel" />
<text class="title">新增分销员</text>
<view class="header-right"></view>
</view>
<!-- 表单容器 -->
<view class="form-container">
<uni-forms :model="formData" ref="formRef" labelWidth="100rpx">
<uni-forms-item label="姓名" required name="name">
<uni-easyinput
v-model="formData.name"
placeholder="请输入姓名"
class="form-input"
:focus="true"
/>
</uni-forms-item>
<uni-forms-item label="手机号" required name="phone">
<uni-easyinput
v-model="formData.phone"
placeholder="请输入手机号"
class="form-input"
/>
</uni-forms-item>
<uni-forms-item label="OpenID" required name="openid">
<uni-easyinput
v-model="formData.openid"
placeholder="请输入OpenID"
class="form-input"
/>
</uni-forms-item>
<uni-forms-item label="父ID" required name="parent_id">
<uni-easyinput
v-model="formData.parent_id"
placeholder="请输入父ID"
type="number"
class="form-input"
/>
</uni-forms-item>
<uni-forms-item label="租户ID" required name="tenant_id">
<uni-easyinput
v-model="formData.tenant_id"
placeholder="请输入租户ID"
type="number"
class="form-input"
/>
</uni-forms-item>
<uni-forms-item label="苹果URL" name="applet_url">
<uni-easyinput
v-model="formData.applet_url"
placeholder="请输入苹果URL"
class="form-input"
/>
</uni-forms-item>
<uni-forms-item label="状态" name="is_active">
<uni-data-checkbox
v-model="formData.is_active"
:localdata="statusOptions"
style="width: 100%"
/>
</uni-forms-item>
</uni-forms>
</view>
<!-- 按钮容器 -->
<view class="btn-container">
<button class="cancel-btn" @click="handleCancel">
<uni-icons type="close" size="20" color="#fff" />
<text class="btn-text">取消</text>
</button>
<button class="submit-btn" @click="handleSubmit">
<uni-icons type="checkmark" size="20" color="#fff" />
<text class="btn-text">提交</text>
</button>
</view>
</view>
</template>
<script setup>
import { ref } from "vue"
const formRef = ref(null)
const formData = ref({
name: '',
phone: '',
openid: '',
parent_id: '',
tenant_id: '',
applet_url: '',
is_active: 'Y'
})
const statusOptions = [
{ text: '激活', value: 'Y' },
{ text: '未激活', value: 'N' }
]
// 取消
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>
.add-container {
padding: 20rpx;
background-color: #f5f7fa;
min-height: 100vh;
}
/* 头部样式 */
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24rpx;
padding-bottom: 16rpx;
border-bottom: 2rpx solid #ecf5ff;
}
.title {
font-size: 32rpx;
font-weight: 600;
color: #303133;
}
.header-right {
width: 28px;
}
/* 表单容器样式 */
.form-container {
background-color: #fff;
border-radius: 12rpx;
padding: 24rpx;
margin-bottom: 24rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}
/* 表单输入框样式 */
.form-input {
border-radius: 8rpx !important;
border: 1rpx solid #dcdfe6 !important;
transition: all 0.3s ease !important;
}
.form-input:focus {
border-color: #409eff !important;
box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2) !important;
}
/* 按钮容器样式 */
.btn-container {
display: flex;
gap: 16rpx;
margin-top: 32rpx;
}
.cancel-btn,
.submit-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border: none;
padding: 16rpx 0;
border-radius: 8rpx;
font-size: 28rpx;
transition: all 0.3s ease;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.cancel-btn:active,
.submit-btn:active {
transform: translateY(2rpx);
box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
}
.cancel-btn {
background-color: #909399;
color: #fff;
}
.submit-btn {
background-color: #409eff;
color: #fff;
}
.btn-text {
margin-left: 8rpx;
}
/* 响应式设计 */
@media screen and (max-width: 750rpx) {
.form-container {
padding: 20rpx;
}
.btn-container {
margin-top: 24rpx;
}
}
</style>

248
src/pages/distributor/edit.vue Normal file
View File

@@ -0,0 +1,248 @@
<template>
<view class="edit-container">
<!-- 头部 -->
<view class="header">
<uni-icons type="back" size="28" color="#303133" @click="handleCancel" />
<text class="title">修改分销员</text>
<view class="header-right"></view>
</view>
<!-- 表单容器 -->
<view class="form-container">
<uni-forms :model="formData" ref="formRef" labelWidth="100rpx">
<uni-forms-item label="姓名" required name="name">
<uni-easyinput
v-model="formData.name"
placeholder="请输入姓名"
class="form-input"
/>
</uni-forms-item>
<uni-forms-item label="手机号" required name="phone">
<uni-easyinput
v-model="formData.phone"
placeholder="请输入手机号"
class="form-input"
/>
</uni-forms-item>
<uni-forms-item label="OpenID" required name="openid">
<uni-easyinput
v-model="formData.openid"
placeholder="请输入OpenID"
class="form-input"
/>
</uni-forms-item>
<uni-forms-item label="父ID" required name="parent_id">
<uni-easyinput
v-model="formData.parent_id"
placeholder="请输入父ID"
type="number"
class="form-input"
/>
</uni-forms-item>
<uni-forms-item label="租户ID" required name="tenant_id">
<uni-easyinput
v-model="formData.tenant_id"
placeholder="请输入租户ID"
type="number"
class="form-input"
/>
</uni-forms-item>
<uni-forms-item label="苹果URL" name="applet_url">
<uni-easyinput
v-model="formData.applet_url"
placeholder="请输入苹果URL"
class="form-input"
/>
</uni-forms-item>
<uni-forms-item label="状态" name="is_active">
<uni-data-checkbox
v-model="formData.is_active"
:localdata="statusOptions"
style="width: 100%"
/>
</uni-forms-item>
</uni-forms>
</view>
<!-- 按钮容器 -->
<view class="btn-container">
<button class="cancel-btn" @click="handleCancel">
<uni-icons type="close" size="20" color="#fff" />
<text class="btn-text">取消</text>
</button>
<button class="submit-btn" @click="handleSubmit">
<uni-icons type="checkmark" size="20" color="#fff" />
<text class="btn-text">提交</text>
</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 formData = ref({
id: '',
name: '',
phone: '',
openid: '',
parent_id: '',
tenant_id: '',
applet_url: '',
is_active: 'Y'
})
const statusOptions = [
{ text: '激活', value: 'Y' },
{ text: '未激活', value: 'N' }
]
// 初始化加载数据
onMounted(() => {
fetchDistributorDetail()
})
// 获取分销员详情
function fetchDistributorDetail() {
// 这里应该调用后端API获取数据
// 模拟数据
setTimeout(() => {
formData.value = {
id: distributorId.value,
name: '张三',
phone: '13800138001',
openid: 'openid123456',
parent_id: '0',
tenant_id: '1',
applet_url: 'https://example.com',
is_active: 'Y'
}
}, 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>
.edit-container {
padding: 20rpx;
background-color: #f5f7fa;
min-height: 100vh;
}
/* 头部样式 */
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24rpx;
padding-bottom: 16rpx;
border-bottom: 2rpx solid #ecf5ff;
}
.title {
font-size: 32rpx;
font-weight: 600;
color: #303133;
}
.header-right {
width: 28px;
}
/* 表单容器样式 */
.form-container {
background-color: #fff;
border-radius: 12rpx;
padding: 24rpx;
margin-bottom: 24rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}
/* 表单输入框样式 */
.form-input {
border-radius: 8rpx !important;
border: 1rpx solid #dcdfe6 !important;
transition: all 0.3s ease !important;
}
.form-input:focus {
border-color: #409eff !important;
box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2) !important;
}
/* 按钮容器样式 */
.btn-container {
display: flex;
gap: 16rpx;
margin-top: 32rpx;
}
.cancel-btn,
.submit-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border: none;
padding: 16rpx 0;
border-radius: 8rpx;
font-size: 28rpx;
transition: all 0.3s ease;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.cancel-btn:active,
.submit-btn:active {
transform: translateY(2rpx);
box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
}
.cancel-btn {
background-color: #909399;
color: #fff;
}
.submit-btn {
background-color: #409eff;
color: #fff;
}
.btn-text {
margin-left: 8rpx;
}
/* 响应式设计 */
@media screen and (max-width: 750rpx) {
.form-container {
padding: 20rpx;
}
.btn-container {
margin-top: 24rpx;
}
}
</style>

398
src/pages/distributor/index.vue Normal file
View File

@@ -0,0 +1,398 @@
<template>
<view class="distributor-container">
<!-- 头部 -->
<view class="header">
<text class="title">分销员管理</text>
<button class="add-btn" @click="handleAdd">
<uni-icons type="plus" size="20" color="#fff" />
<text class="add-btn-text">新增分销员</text>
</button>
</view>
<!-- 搜索框 -->
<view class="search-box">
<view class="search-input-wrapper">
<uni-icons type="search" size="20" color="#909399" class="search-icon" />
<input
v-model="searchForm.name"
type="text"
placeholder="请输入分销员姓名"
class="search-input"
/>
</view>
<view class="search-input-wrapper">
<uni-icons type="phone" size="20" color="#909399" class="search-icon" />
<input
v-model="searchForm.phone"
type="text"
placeholder="请输入手机号"
class="search-input"
/>
</view>
<button class="search-btn" @click="handleSearch">
<uni-icons type="search" size="20" color="#fff" />
<text class="search-btn-text">查询</text>
</button>
</view>
<!-- 表格容器 -->
<view class="table-container">
<uni-table :loading="loading" border stripe emptyText="暂无数据">
<uni-tr>
<uni-th width="120">姓名</uni-th>
<uni-th width="150">手机号</uni-th>
<uni-th width="100">总收益</uni-th>
<uni-th width="100">可用收益</uni-th>
<uni-th width="80">状态</uni-th>
<uni-th width="180">操作</uni-th>
</uni-tr>
<uni-tr v-for="item in distributorList" :key="item.id" hover>
<uni-td>{{ item.name }}</uni-td>
<uni-td>{{ item.phone }}</uni-td>
<uni-td>{{ item.total_income }}</uni-td>
<uni-td>{{ item.available_income }}</uni-td>
<uni-td>
<view class="status-badge" :class="item.is_active === 'Y' ? 'active' : 'inactive'">
{{ item.is_active === 'Y' ? '激活' : '未激活' }}
</view>
</uni-td>
<uni-td>
<view class="action-buttons">
<button class="action-btn edit" @click="handleEdit(item)">
<uni-icons type="compose" size="18" color="#409eff" />
<text>修改</text>
</button>
<button class="action-btn delete" @click="handleDelete(item.id)">
<uni-icons type="trash" size="18" color="#f56c6c" />
<text>删除</text>
</button>
<button class="action-btn rule" @click="handleRule(item.id)">
<uni-icons type="settings" size="18" color="#e6a23c" />
<text>分润</text>
</button>
</view>
</uni-td>
</uni-tr>
</uni-table>
</view>
<!-- 分页 -->
<view class="pagination-container">
<uni-pagination
:current="currentPage"
:pageSize="pageSize"
:total="total"
@change="handlePageChange"
show-icon
prev-text="上一页"
next-text="下一页"
/>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from "vue"
const loading = ref(false)
const distributorList = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const searchForm = ref({
name: '',
phone: ''
})
// 初始化加载数据
onMounted(() => {
fetchDistributorList()
})
// 获取分销员列表
function fetchDistributorList() {
loading.value = true
// 这里应该调用后端API获取数据
// 模拟数据
setTimeout(() => {
distributorList.value = [
{
id: 1,
name: '张三',
phone: '13800138001',
total_income: 1000.00,
available_income: 800.00,
is_active: 'Y'
},
{
id: 2,
name: '李四',
phone: '13900139002',
total_income: 2000.00,
available_income: 1500.00,
is_active: 'Y'
}
]
total.value = 2
loading.value = false
}, 500)
}
// 搜索
function handleSearch() {
currentPage.value = 1
fetchDistributorList()
}
// 分页
function handlePageChange(e) {
currentPage.value = e.current
fetchDistributorList()
}
// 新增分销员
function handleAdd() {
// 跳转到新增页面
uni.navigateTo({ url: '/pages/distributor/add' })
}
// 修改分销员
function handleEdit(item) {
// 跳转到修改页面，并传递参数
uni.navigateTo({
url: `/pages/distributor/edit?id=${item.id}`
})
}
// 删除分销员
function handleDelete(id) {
uni.showModal({
title: '提示',
content: '确定要删除该分销员吗？',
success: (res) => {
if (res.confirm) {
// 这里应该调用后端API删除数据
fetchDistributorList()
uni.showToast({ title: '删除成功' })
}
}
})
}
// 配置分润规则
function handleRule(id) {
// 跳转到分润规则配置页面
uni.navigateTo({
url: `/pages/distributor/rule?id=${id}`
})
}
</script>
<style lang="scss" scoped>
.distributor-container {
padding: 20rpx;
background-color: #f5f7fa;
min-height: 100vh;
}
/* 头部样式 */
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24rpx;
padding-bottom: 16rpx;
border-bottom: 2rpx solid #ecf5ff;
}
.title {
font-size: 32rpx;
font-weight: 600;
color: #303133;
}
.add-btn {
display: flex;
align-items: center;
background-color: #409eff;
color: #fff;
border: none;
padding: 12rpx 24rpx;
border-radius: 8rpx;
font-size: 24rpx;
transition: all 0.3s ease;
box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.3);
}
.add-btn:active {
transform: translateY(2rpx);
box-shadow: 0 1rpx 4rpx rgba(64, 158, 255, 0.3);
}
.add-btn-text {
margin-left: 8rpx;
}
/* 搜索框样式 */
.search-box {
display: flex;
margin-bottom: 24rpx;
gap: 16rpx;
align-items: center;
}
.search-input-wrapper {
flex: 1;
display: flex;
align-items: center;
background-color: #fff;
border: 1rpx solid #dcdfe6;
border-radius: 8rpx;
padding: 0 16rpx;
transition: all 0.3s ease;
}
.search-input-wrapper:focus-within {
border-color: #409eff;
box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2);
}
.search-icon {
margin-right: 12rpx;
}
.search-input {
flex: 1;
padding: 16rpx 0;
border: none;
font-size: 24rpx;
color: #303133;
}
.search-input::placeholder {
color: #909399;
}
.search-btn {
display: flex;
align-items: center;
background-color: #67c23a;
color: #fff;
border: none;
padding: 16rpx 24rpx;
border-radius: 8rpx;
font-size: 24rpx;
transition: all 0.3s ease;
box-shadow: 0 2rpx 8rpx rgba(103, 194, 58, 0.3);
}
.search-btn:active {
transform: translateY(2rpx);
box-shadow: 0 1rpx 4rpx rgba(103, 194, 58, 0.3);
}
.search-btn-text {
margin-left: 8rpx;
}
/* 表格容器样式 */
.table-container {
background-color: #fff;
border-radius: 12rpx;
overflow: hidden;
margin-bottom: 24rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}
/* 状态标签样式 */
.status-badge {
display: inline-block;
padding: 4rpx 12rpx;
border-radius: 12rpx;
font-size: 20rpx;
font-weight: 500;
}
.status-badge.active {
background-color: #f0f9eb;
color: #67c23a;
}
.status-badge.inactive {
background-color: #fef0f0;
color: #f56c6c;
}
/* 操作按钮样式 */
.action-buttons {
display: flex;
gap: 8rpx;
align-items: center;
}
.action-btn {
display: flex;
align-items: center;
justify-content: center;
border: none;
padding: 8rpx 12rpx;
border-radius: 6rpx;
font-size: 20rpx;
transition: all 0.3s ease;
}
.action-btn:active {
transform: translateY(1rpx);
}
.action-btn.edit {
background-color: #ecf5ff;
color: #409eff;
}
.action-btn.delete {
background-color: #fef0f0;
color: #f56c6c;
}
.action-btn.rule {
background-color: #fdf6ec;
color: #e6a23c;
}
.action-btn text {
margin-left: 4rpx;
}
/* 分页样式 */
.pagination-container {
display: flex;
justify-content: flex-end;
padding: 16rpx 0;
background-color: #fff;
border-radius: 12rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}
/* 响应式设计 */
@media screen and (max-width: 750rpx) {
.search-box {
flex-direction: column;
align-items: stretch;
}
.search-input-wrapper {
width: 100%;
}
.action-buttons {
flex-wrap: wrap;
}
.action-btn {
flex: 1;
min-width: 80rpx;
}
}
</style>

145
src/pages/distributor/rule.vue Normal file
View File

@@ -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>