分销员管理
This commit is contained in:
@@ -83,6 +83,30 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "浏览文本"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/distributor/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "分销员管理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/distributor/add",
|
||||
"style": {
|
||||
"navigationBarTitleText": "新增分销员"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/distributor/edit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "修改分销员"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/distributor/rule",
|
||||
"style": {
|
||||
"navigationBarTitleText": "分润规则配置"
|
||||
}
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
|
||||
224
src/pages/distributor/add.vue
Normal file
224
src/pages/distributor/add.vue
Normal 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
248
src/pages/distributor/edit.vue
Normal 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
398
src/pages/distributor/index.vue
Normal 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
145
src/pages/distributor/rule.vue
Normal 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>
|
||||
@@ -3,7 +3,7 @@
|
||||
<view class="logo-content align-center justify-center flex">
|
||||
<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
|
||||
</image>
|
||||
<text class="title">若依移动端登录</text>
|
||||
<text class="title">寻驾小程序管理</text>
|
||||
</view>
|
||||
<view class="login-form-content">
|
||||
<view class="input-item flex align-center">
|
||||
|
||||
@@ -5,67 +5,53 @@
|
||||
<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
|
||||
<swiper-item v-for="(item, index) in data" :key="index">
|
||||
<view class="swiper-item" @click="clickBannerItem(item)">
|
||||
<image :src="item.image" mode="aspectFill" :draggable="false" />
|
||||
<image :src="item.image" mode="aspectFill" :draggable="false" class="banner-image" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
|
||||
<!-- 宫格组件 -->
|
||||
<uni-section title="系统管理" type="line"></uni-section>
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false" @change="changeGrid">
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="person-filled" size="30"></uni-icons>
|
||||
<view class="grid-title">系统功能</view>
|
||||
<uni-grid :column="4" :showBorder="false">
|
||||
<uni-grid-item @click="goToDistributor">
|
||||
<view class="grid-item-box distributor">
|
||||
<view class="icon-container">
|
||||
<uni-icons type="share" size="36" color="#409eff" />
|
||||
</view>
|
||||
<text class="text">分销员管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item @click="showUnderConstruction">
|
||||
<view class="grid-item-box user">
|
||||
<view class="icon-container">
|
||||
<uni-icons type="person-filled" size="36" color="#67c23a" />
|
||||
</view>
|
||||
<text class="text">用户管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="staff-filled" size="30"></uni-icons>
|
||||
<text class="text">角色管理</text>
|
||||
<uni-grid-item @click="showUnderConstruction">
|
||||
<view class="grid-item-box dept">
|
||||
<view class="icon-container">
|
||||
<uni-icons type="settings-filled" size="36" color="#e6a23c" />
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="color" size="30"></uni-icons>
|
||||
<text class="text">菜单管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="settings-filled" size="30"></uni-icons>
|
||||
<text class="text">部门管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="heart-filled" size="30"></uni-icons>
|
||||
<text class="text">岗位管理</text>
|
||||
<uni-grid-item @click="showUnderConstruction">
|
||||
<view class="grid-item-box notice">
|
||||
<view class="icon-container">
|
||||
<uni-icons type="chat-filled" size="36" color="#f56c6c" />
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="bars" size="30"></uni-icons>
|
||||
<text class="text">字典管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="gear-filled" size="30"></uni-icons>
|
||||
<text class="text">参数设置</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="chat-filled" size="30"></uni-icons>
|
||||
<text class="text">通知公告</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="wallet-filled" size="30"></uni-icons>
|
||||
<uni-grid-item @click="showUnderConstruction">
|
||||
<view class="grid-item-box log">
|
||||
<view class="icon-container">
|
||||
<uni-icons type="wallet-filled" size="36" color="#909399" />
|
||||
</view>
|
||||
<text class="text">日志管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
@@ -90,7 +76,34 @@
|
||||
current.value = e.detail.current
|
||||
}
|
||||
|
||||
function changeGrid(e) {
|
||||
// 跳转到分销员管理页面
|
||||
function goToDistributor() {
|
||||
console.log('准备跳转到分销员管理页面')
|
||||
uni.navigateTo({
|
||||
url: '/pages/distributor/index',
|
||||
success: function() {
|
||||
console.log('跳转成功')
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log('跳转失败：', err)
|
||||
// 尝试使用其他跳转方式
|
||||
uni.redirectTo({
|
||||
url: '/pages/distributor/index',
|
||||
success: function() {
|
||||
console.log('redirectTo跳转成功')
|
||||
},
|
||||
fail: function(err2) {
|
||||
console.log('redirectTo跳转失败：', err2)
|
||||
// 显示错误信息
|
||||
proxy.$modal.showToast('跳转失败，请重试')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 显示建设中提示
|
||||
function showUnderConstruction() {
|
||||
proxy.$modal.showToast('模块建设中~')
|
||||
}
|
||||
</script>
|
||||
@@ -101,7 +114,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
@@ -112,60 +125,128 @@
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
margin-top: 10rpx;
|
||||
.work-container {
|
||||
padding: 20rpx;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 轮播图样式 */
|
||||
.uni-swiper-dot-box {
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: 200px;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
/* 宫格样式 */
|
||||
.grid-body {
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.grid-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
margin-bottom: 20rpx;
|
||||
padding-left: 10rpx;
|
||||
border-left: 6rpx solid #409eff;
|
||||
}
|
||||
|
||||
.grid-item-box {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 15px 0;
|
||||
padding: 20rpx 0;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 8rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.uni-margin-wrap {
|
||||
width: 690rpx;
|
||||
width: 100%;
|
||||
;
|
||||
.grid-item-box:active {
|
||||
transform: translateY(2rpx);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 300rpx;
|
||||
.icon-container {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 15rpx;
|
||||
background-color: #f0f9eb;
|
||||
}
|
||||
|
||||
/* 各模块颜色 */
|
||||
.distributor .icon-container {
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.user .icon-container {
|
||||
background-color: #f0f9eb;
|
||||
}
|
||||
|
||||
.dept .icon-container {
|
||||
background-color: #fdf6ec;
|
||||
}
|
||||
|
||||
.notice .icon-container {
|
||||
background-color: #fef0f0;
|
||||
}
|
||||
|
||||
.log .icon-container {
|
||||
background-color: #f4f4f5;
|
||||
}
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (min-width: 500px) {
|
||||
.work-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: 150px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.uni-swiper-dot-box {
|
||||
width: 400px;
|
||||
/* #ifndef APP-NVUE */
|
||||
margin: 0 auto;
|
||||
/* #endif */
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
.grid-item-box {
|
||||
padding: 25rpx 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user