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

24
src/pages.json
View File

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

2
src/pages/login.vue
View File

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

243
src/pages/work/index.vue
View File

@@ -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>
</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>
<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>
<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>
</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>
<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>
<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;
}
.swiper-box {
height: 150px;
}
.swiper-item {
/* #ifndef APP-NVUE */
.icon-container {
width: 80rpx;
height: 80rpx;
border-radius: 16rpx;
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
height: 300rpx;
line-height: 300rpx;
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) {
.uni-swiper-dot-box {
width: 400px;
/* #ifndef APP-NVUE */
.work-container {
max-width: 800px;
margin: 0 auto;
/* #endif */
margin-top: 8px;
}
.image {
width: 100%;
.swiper-box {
height: 240px;
}
.swiper-item {
height: 240px;
}
.grid-item-box {
padding: 25rpx 0;
}
}
</style>