admin/smartDriveEEUniApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构前端代码架构， 完善我的内容区

Browse Source
This commit is contained in:
zhonghua1
2026-01-11 12:11:01 +08:00
parent 1908ae0b2c
commit 3b169467ac
8 changed files with 989 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
pages/ucenter/components/DeviceBindPopup.vue Normal file
View File

@@ -0,0 +1,187 @@
<template>
<uni-popup ref="deviceBindPopup" type="dialog">
<view class="device-bind-dialog">
<view class="device-bind-title">设备绑定</view>
<view class="device-bind-field">
<text class="device-bind-label">设备编号</text>
<uni-easyinput v-model="deviceBindForm.deviceCode" placeholder="请输入设备编号" />
</view>
<view class="device-bind-field">
<text class="device-bind-label">家长电话</text>
<uni-easyinput v-model="deviceBindForm.salesPhone" placeholder="请输入销售电话" type="number" />
</view>
<view class="device-bind-field">
<text class="device-bind-label">所属门店</text>
<uni-easyinput v-model="deviceBindForm.dealershipName" placeholder="请输入所属门店" />
</view>
<view class="device-bind-actions">
<button class="dialog-btn cancel" @click="closeDeviceBindDialog">取消</button>
<button class="dialog-btn confirm" :disabled="deviceBindSubmitting" @click="submitDeviceBind">
{{ deviceBindSubmitting ? '提交中...' : '提交' }}
</button>
</view>
</view>
</uni-popup>
</template>
<script>
import { post } from '@/common/request.js'
export default {
name: 'DeviceBindPopup',
data() {
return {
deviceBindForm: {
deviceCode: '',
salesPhone: '',
dealershipName: ''
},
deviceBindSubmitting: false
}
},
methods: {
/**
* 打开设备绑定弹窗
*/
open() {
this.deviceBindForm = {
deviceCode: '',
salesPhone: '',
dealershipName: ''
}
if (this.$refs.deviceBindPopup) {
this.$refs.deviceBindPopup.open()
}
},
/**
* 关闭设备绑定弹窗
*/
close() {
if (this.$refs.deviceBindPopup) {
this.$refs.deviceBindPopup.close()
}
},
/**
* 关闭设备绑定弹窗（内部方法）
*/
closeDeviceBindDialog() {
this.close()
},
/**
* 提交设备绑定
*/
async submitDeviceBind() {
if (this.deviceBindSubmitting) return
const { deviceCode, salesPhone, dealershipName } = this.deviceBindForm
// 验证设备编号
if (!deviceCode || !deviceCode.trim()) {
return uni.showToast({
title: '请输入设备编号',
icon: 'none'
})
}
this.deviceBindSubmitting = true
try {
// 构建请求参数
const requestData = {
deviceCode: deviceCode.trim(),
salesPhone: salesPhone ? salesPhone.trim() : '',
dealershipName: dealershipName ? dealershipName.trim() : '',
bindStatus: true
}
// 调用后端接口
const res = await post('/api/deviceManagement/add', requestData)
// 检查响应状态
if (res.statusCode === 200 && res.data && res.data.success) {
this.close()
uni.showToast({
title: res.data.message || '设备绑定成功',
icon: 'success'
})
// 触发成功事件，通知父组件刷新
this.$emit('success')
} else {
// 处理失败情况
const errorMessage = res.data?.message || '设备绑定失败，请稍后重试'
uni.showToast({
title: errorMessage,
icon: 'none'
})
}
} catch (e) {
console.error('设备绑定失败:', e)
const errorMessage = e?.data?.message || e?.message || '设备绑定失败，请稍后重试'
uni.showToast({
title: errorMessage,
icon: 'none'
})
} finally {
this.deviceBindSubmitting = false
}
}
}
}
</script>
<style lang="scss" scoped>
.device-bind-dialog {
padding: 40rpx 30rpx 30rpx;
background-color: #FFFFFF;
border-radius: 16rpx;
width: 600rpx;
}
.device-bind-title {
font-size: 34rpx;
font-weight: bold;
text-align: center;
margin-bottom: 30rpx;
}
.device-bind-field {
margin-bottom: 20rpx;
}
.device-bind-label {
display: block;
font-size: 26rpx;
color: #666666;
margin-bottom: 10rpx;
}
.device-bind-actions {
margin-top: 20rpx;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.dialog-btn {
min-width: 140rpx;
height: 70rpx;
line-height: 70rpx;
font-size: 28rpx;
border-radius: 8rpx;
padding: 0 24rpx;
}
.dialog-btn.cancel {
background-color: #f5f5f5;
color: #333333;
margin-right: 20rpx;
}
.dialog-btn.confirm {
background-color: #007AFF;
color: #FFFFFF;
}
.dialog-btn:after {
border: none;
}
</style>

519
pages/ucenter/components/DeviceListPopup.vue Normal file
View File

@@ -0,0 +1,519 @@
<template>
<uni-popup ref="deviceListPopup" type="bottom" :safe-area="false">
<view class="device-list-popup">
<!-- 顶部标题栏 -->
<view class="popup-header">
<text class="popup-title">设备列表</text>
<view class="popup-close" @click="close">
<uni-icons type="close" size="20" color="#666" />
</view>
</view>
<!-- 设备列表内容 -->
<scroll-view
class="device-list-content"
scroll-y
@scrolltolower="onScrollToLower"
>
<!-- 顶部工具栏：总数 + 搜索条件 + 刷新 -->
<view class="device-toolbar">
<text class="toolbar-total">{{ filteredDeviceList.length }}台</text>
<view class="toolbar-filters">
<!-- 状态筛选 -->
<picker
class="status-picker"
mode="selector"
:range="statusOptions"
:value="statusIndex"
@change="onStatusChange"
>
<view class="status-picker-inner">
<text class="status-label">状态</text>
<text class="status-value">{{ statusOptions[statusIndex] }}</text>
<uni-icons type="down" size="14" color="#999" />
</view>
</picker>
<!-- 设备编号 -->
<input
class="toolbar-input"
v-model="queryDeviceCode"
placeholder="设备编号"
placeholder-style="color:#B0B0B0"
confirm-type="search"
@confirm="onSearch"
/>
<!-- 电话 -->
<input
class="toolbar-input"
v-model="queryPhone"
placeholder="电话"
placeholder-style="color:#B0B0B0"
confirm-type="search"
@confirm="onSearch"
/>
</view>
<view class="toolbar-actions">
<view class="toolbar-btn" @click="onRefresh">
<uni-icons type="refresh" size="18" color="#2A68FF" />
<text>刷新</text>
</view>
</view>
</view>
<!-- 设备卡片列表 -->
<view
class="device-card"
v-for="(item, index) in filteredDeviceList"
:key="item.id || index"
>
<view class="card-header">
<text class="device-code">{{ item.deviceCode || '未填写设备编号' }}</text>
<view
class="bind-tag"
:class="item.bindStatus ? 'bind-tag--on' : 'bind-tag--off'"
>
<text>{{ item.bindStatus ? '已绑定' : '未绑定' }}</text>
</view>
</view>
<view class="card-body">
<view class="card-row">
<text class="card-label">家长电话</text>
<text class="card-value">{{ item.salesPhone || '-' }}</text>
</view>
<view class="card-row">
<text class="card-label">所属门店</text>
<text class="card-value">{{ item.dealershipName || '-' }}</text>
</view>
<view class="card-row">
<text class="card-label">创建时间</text>
<text class="card-value">{{ item.createTime || '-' }}</text>
</view>
</view>
</view>
<!-- 空状态 -->
<view v-if="!loading && deviceList.length === 0" class="empty-box">
<text class="empty-text">暂无设备记录</text>
</view>
<!-- 底部加载/无更多提示 -->
<view v-if="deviceList.length > 0" class="empty-box">
<text class="empty-text" v-if="loading">加载中...</text>
<text class="empty-text" v-else-if="noMore">没有更多了</text>
</view>
</scroll-view>
</view>
</uni-popup>
</template>
<script>
import { get } from '@/common/request.js';
export default {
name: 'DeviceListPopup',
data() {
return {
statusOptions: ['全部状态', '已绑定', '未绑定'],
statusIndex: 0,
queryDeviceCode: '',
queryPhone: '',
deviceList: [],
page: {
current: 1,
size: 10,
},
loading: false,
total: 0,
noMore: false,
};
},
computed: {
// 根据筛选条件过滤设备列表
filteredDeviceList() {
return this.deviceList.filter((item) => {
// 状态筛选
if (this.statusIndex === 1 && !item.bindStatus) return false; // 只看已绑定
if (this.statusIndex === 2 && item.bindStatus) return false; // 只看未绑定
// 设备编号模糊匹配
if (
this.queryDeviceCode &&
!(item.deviceCode || '').includes(this.queryDeviceCode.trim())
) {
return false;
}
// 电话模糊匹配
if (
this.queryPhone &&
!(item.salesPhone || '').includes(this.queryPhone.trim())
) {
return false;
}
return true;
});
},
},
methods: {
/**
* 打开设备列表弹窗
*/
open() {
if (this.$refs.deviceListPopup) {
this.$refs.deviceListPopup.open();
// 打开时重新加载数据
this.fetchDeviceList(true);
}
},
/**
* 关闭设备列表弹窗
*/
close() {
if (this.$refs.deviceListPopup) {
this.$refs.deviceListPopup.close();
}
},
// 将 LocalDateTime 字符串格式化为 YYYY-MM-DD HH:mm:ss
formatDateTime(value) {
if (!value) return '-';
try {
const date = new Date(value);
if (Number.isNaN(date.getTime())) return value;
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
} catch (e) {
console.warn('格式化时间失败:', e, value);
return value;
}
},
buildQueryParams() {
const params = {
current: this.page.current,
size: this.page.size,
};
const trimmedDeviceCode = this.queryDeviceCode && this.queryDeviceCode.trim();
const trimmedPhone = this.queryPhone && this.queryPhone.trim();
if (trimmedDeviceCode) {
params.deviceCode = trimmedDeviceCode;
}
if (trimmedPhone) {
params.salesPhone = trimmedPhone;
}
// 绑定状态：0=全部，1=已绑定(true)，2=未绑定(false)
if (this.statusIndex === 1) {
params.bindStatus = true;
} else if (this.statusIndex === 2) {
params.bindStatus = false;
}
// 目前门店筛选暂未在前端提供控件，如后续有需求可在此添加 dealershipId
return params;
},
async fetchDeviceList(reset = false) {
if (this.loading) return;
this.loading = true;
if (reset) {
this.page.current = 1;
this.noMore = false;
}
try {
const queryParams = this.buildQueryParams();
const res = await get('/api/deviceManagement/list', queryParams);
if (res.statusCode === 200 && res.data && res.data.success) {
const records = Array.isArray(res.data.data) ? res.data.data : [];
const mapped = records.map((item) => ({
id: item.id,
deviceCode: item.deviceCode,
salesPhone: item.salesPhone,
dealershipName: item.dealershipName,
bindStatus: item.bindStatus,
createTime: this.formatDateTime(item.createTime),
}));
if (reset) {
this.deviceList = mapped;
} else {
this.deviceList = [...this.deviceList, ...mapped];
}
// 保存分页信息
if (typeof res.data.current === 'number') {
this.page.current = res.data.current;
}
if (typeof res.data.size === 'number') {
this.page.size = res.data.size;
}
if (typeof res.data.total === 'number') {
this.total = res.data.total;
}
// 判断是否还有更多数据
const pages =
typeof res.data.pages === 'number'
? res.data.pages
: Math.ceil((this.total || 0) / this.page.size);
this.noMore = pages > 0 && this.page.current >= pages;
} else {
this.deviceList = [];
uni.showToast({
title: (res.data && res.data.message) || '获取设备列表失败',
icon: 'none',
});
}
} catch (error) {
console.error('获取设备列表失败:', error);
if (reset) {
this.deviceList = [];
}
let msg = '获取设备列表失败，请稍后重试';
if (error.errMsg && error.errMsg.includes('timeout')) {
msg = '请求超时，请检查网络后重试';
}
uni.showToast({
title: msg,
icon: 'none',
});
} finally {
this.loading = false;
}
},
// 滚动到底部时加载更多
onScrollToLower() {
if (this.loading || this.noMore) return;
// 下一页
this.page.current += 1;
this.fetchDeviceList(false);
},
onStatusChange(e) {
this.statusIndex = Number(e.detail.value || 0);
this.onSearch();
},
onSearch() {
// 根据筛选条件重新从后端分页接口拉取列表
this.fetchDeviceList(true);
},
async onRefresh() {
await this.fetchDeviceList(true);
uni.showToast({
title: '刷新成功',
icon: 'none',
});
},
},
};
</script>
<style lang="scss" scoped>
.device-list-popup {
background-color: #f5f5f5;
border-radius: 24rpx 24rpx 0 0;
max-height: 80vh;
display: flex;
flex-direction: column;
}
.popup-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx 32rpx;
background-color: #ffffff;
border-bottom: 1px solid #e0e0e0;
border-radius: 24rpx 24rpx 0 0;
}
.popup-title {
font-size: 36rpx;
font-weight: 600;
color: #333;
}
.popup-close {
padding: 8rpx;
display: flex;
align-items: center;
justify-content: center;
}
.device-list-content {
flex: 1;
padding: 16rpx;
box-sizing: border-box;
}
.device-toolbar {
display: flex;
align-items: center;
padding: 12rpx 12rpx;
margin-bottom: 24rpx;
background-color: #f8f8fa;
border-radius: 8rpx;
border: 1px solid #efeff2;
}
.toolbar-total {
font-size: 24rpx;
color: #666;
margin-right: 12rpx;
flex-shrink: 0;
}
.toolbar-filters {
flex: 1;
display: flex;
align-items: center;
gap: 8rpx;
overflow: hidden;
}
.status-picker {
flex-shrink: 0;
}
.status-picker-inner {
flex-direction: row;
display: flex;
align-items: center;
padding: 0 12rpx;
height: 56rpx;
border-radius: 999rpx;
background-color: #ffffff;
border: 1px solid #d6e3ff;
}
.status-label {
font-size: 24rpx;
color: #666;
margin-right: 6rpx;
}
.status-value {
font-size: 24rpx;
color: #333;
margin-right: 4rpx;
}
.toolbar-input {
flex: 1;
min-width: 120rpx;
height: 56rpx;
line-height: 56rpx;
background-color: #f5f6fa;
border-radius: 8rpx;
padding: 0 12rpx;
font-size: 24rpx;
box-sizing: border-box;
}
.toolbar-actions {
margin-left: auto;
display: flex;
align-items: center;
}
.toolbar-btn {
display: flex;
align-items: center;
padding: 0 16rpx;
height: 56rpx;
border-radius: 28rpx;
background-color: #ffffff;
border: 1px solid #d6e3ff;
}
.toolbar-btn text {
margin-left: 6rpx;
font-size: 24rpx;
color: #2a68ff;
}
.device-card {
background-color: #ffffff;
border-radius: 16rpx;
padding: 24rpx 24rpx 20rpx;
margin-bottom: 16rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16rpx;
}
.device-code {
font-size: 30rpx;
font-weight: 600;
color: #333;
}
.bind-tag {
min-width: 104rpx;
padding: 6rpx 16rpx;
border-radius: 999rpx;
font-size: 22rpx;
text-align: center;
}
.bind-tag--on {
background-color: #e6f6ec;
color: #2e7d32;
}
.bind-tag--off {
background-color: #fff4e5;
color: #ff9800;
}
.card-body {
border-top: 1px solid #f0f0f0;
padding-top: 16rpx;
}
.card-row {
display: flex;
align-items: center;
margin-bottom: 8rpx;
}
.card-label {
width: 160rpx;
font-size: 24rpx;
color: #999;
}
.card-value {
font-size: 26rpx;
color: #333;
}
.empty-box {
padding: 80rpx 0;
text-align: center;
}
.empty-text {
font-size: 26rpx;
color: #999;
}
</style>

171
pages/ucenter/ucenter.vue
View File

@@ -35,7 +35,19 @@
<uni-grid class="grid" :column="4" :showBorder="false" :square="true">
<uni-grid-item class="item" v-for="(item,index) in gridList" @click.native="tapGrid(index)" :key="index">
<uni-icons class="icon" color="#007AFF" :type="item.icon" size="26"></uni-icons>
<text class="text">{{item.text}}</text>
<view v-if="index === 0" class="device-text-wrapper">
<text class="device-label">设备总数</text>
<text class="device-count">{{totalDevices}}</text>
</view>
<view v-else-if="index === 1" class="device-text-wrapper">
<text class="device-label">人员总数</text>
<text class="device-count">{{totalSales}}</text>
</view>
<view v-else-if="index === 2" class="device-text-wrapper">
<text class="device-label">项目总数</text>
<text class="device-count">{{totalProjects}}</text>
</view>
<text v-else class="text">{{item.text}}</text>
</uni-grid-item>
</uni-grid>
<uni-list class="center-list" v-for="(sublist , index) in ucenterList" :key="index">
@@ -51,6 +63,12 @@
</uni-list-item>
</uni-list>
<!-- 设备绑定弹窗 -->
<device-bind-popup ref="deviceBindPopup" @success="onDeviceBindSuccess"></device-bind-popup>
<!-- 设备列表弹窗 -->
<device-list-popup ref="deviceListPopup"></device-list-popup>
<!-- 修改密码弹窗 -->
<uni-popup ref="changePwdPopup" type="dialog">
<view class="change-pwd-dialog">
@@ -93,8 +111,14 @@
store,
mutations
} from '@/uni_modules/uni-id-pages/common/store.js'
import { put } from '@/common/request.js'
import { put, get } from '@/common/request.js'
import DeviceBindPopup from './components/DeviceBindPopup.vue'
import DeviceListPopup from './components/DeviceListPopup.vue'
export default {
components: {
DeviceBindPopup,
DeviceListPopup
},
// #ifdef APP
onBackPress({from}) {
if(from=='backbutton'){
@@ -109,17 +133,20 @@
return {
tenantId: '',
loginUserInfo: {},
totalDevices: 0,
totalSales: 0,
totalProjects: 0,
gridList: [{
"text": this.$t('mine.showText'),
"icon": "chat"
"text": "设备总数",
"icon": "gear"
},
{
"text": this.$t('mine.showText'),
"icon": "cloud-upload"
"text": "人员总数",
"icon": "person-filled"
},
{
"text": this.$t('mine.showText'),
"icon": "contact"
"text": "项目总数",
"icon": "list"
},
{
"text": '修改密码',
@@ -142,25 +169,13 @@
},
// #endif
{
"title": this.$t('mine.signIn'),
"to": '/pages/reception/reception',
"title": "设备绑定",
"event": 'openDeviceBind',
"icon": "compose"
},
// #ifdef APP-PLUS
{
"title": this.$t('mine.toEvaluate'),
"event": 'gotoMarket',
"icon": "star"
},
//#endif
{
"title":this.$t('mine.readArticles'),
"to": '/pages/customer/customer',
"icon": "flag"
},
{
"title": this.$t('mine.myScore'),
"to": '/pages/team/team',
"title": "设备列表",
"event": 'openDeviceList',
"icon": "paperplane"
}
// #ifdef APP
@@ -172,10 +187,6 @@
// #endif
],
[{
"title": this.$t('mine.feedback'),
"to": '/pages/champion/champion',
"icon": "help"
}, {
"title": this.$t('mine.settings'),
"to": '/pages/ucenter/settings/settings',
"icon": "gear"
@@ -216,6 +227,12 @@
onShow() {
// 每次显示页面时更新租户信息和登录人信息
this.loadUserInfo()
// 加载设备统计信息
this.loadDeviceStatistics()
// 加载销售（人员）统计信息
this.loadSalesStatistics()
// 加载项目统计信息
this.loadProjectStatistics()
},
computed: {
userInfo() {
@@ -254,6 +271,60 @@
console.error('加载用户信息失败:', e)
}
},
/**
* 加载设备统计信息
*/
async loadDeviceStatistics() {
try {
const res = await get('/api/deviceManagement/statistics')
if (res.statusCode === 200 && res.data && res.data.success) {
this.totalDevices = res.data.data?.totalDevices || 0
} else {
console.error('获取设备统计信息失败:', res.data?.message || '未知错误')
this.totalDevices = 0
}
} catch (e) {
console.error('获取设备统计信息异常:', e)
this.totalDevices = 0
}
},
/**
* 加载销售（人员）统计信息
*/
async loadSalesStatistics() {
try {
const res = await get('/api/salesManagement/statistics')
if (res.statusCode === 200 && res.data && res.data.success) {
this.totalSales = res.data.data?.totalSales || 0
} else {
console.error('获取销售统计信息失败:', res.data?.message || '未知错误')
this.totalSales = 0
}
} catch (e) {
console.error('获取销售统计信息异常:', e)
this.totalSales = 0
}
},
/**
* 加载项目统计信息
*/
async loadProjectStatistics() {
try {
const res = await get('/api/projectManagement/statistics')
if (res.statusCode === 200 && res.data && res.data.success) {
this.totalProjects = res.data.data?.totalProjects || 0
} else {
console.error('获取项目统计信息失败:', res.data?.message || '未知错误')
this.totalProjects = 0
}
} catch (e) {
console.error('获取项目统计信息异常:', e)
this.totalProjects = 0
}
},
toSettings() {
uni.navigateTo({
url: "/pages/ucenter/settings/settings"
@@ -447,6 +518,29 @@
})
// #endif
},
/**
* 打开设备绑定弹窗
*/
openDeviceBind() {
if (this.$refs.deviceBindPopup) {
this.$refs.deviceBindPopup.open()
}
},
/**
* 设备绑定成功回调
*/
onDeviceBindSuccess() {
// 刷新设备统计信息
this.loadDeviceStatistics()
},
/**
* 打开设备列表弹窗
*/
openDeviceList() {
if (this.$refs.deviceListPopup) {
this.$refs.deviceListPopup.open()
}
},
/**
* 打开修改密码弹窗
*/
@@ -678,6 +772,27 @@
align-items: center;
}
.device-text-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.device-label {
font-size: 14px;
color: #817f82;
line-height: 20px;
margin-bottom: 2px;
}
.device-count {
font-size: 18px;
font-weight: bold;
color: #007AFF;
line-height: 22px;
}
/*修改边线粗细示例*/
/* #ifndef APP-NVUE */