工单大厅
This commit is contained in:
@@ -68,6 +68,12 @@ export default {
|
|||||||
.w-full {
|
.w-full {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.overflow-hidden {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.overflow-auto {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
/* 自定义导航栏专用 */
|
/* 自定义导航栏专用 */
|
||||||
.custom-header {
|
.custom-header {
|
||||||
height: calc(var(--status-bar-height) + 88rpx);
|
height: calc(var(--status-bar-height) + 88rpx);
|
||||||
@@ -98,5 +104,18 @@ export default {
|
|||||||
padding-bottom: constant(safe-area-inset-bottom);
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
}
|
}
|
||||||
|
.page_padding {
|
||||||
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
max-height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
/* 1 电表 2水表 */
|
/* 1 电表 2水表 */
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
200
wuye-manager-uniapp/components/navbar/navbar.vue
Normal file
200
wuye-manager-uniapp/components/navbar/navbar.vue
Normal file
@@ -0,0 +1,200 @@
|
|||||||
|
<template>
|
||||||
|
<!--
|
||||||
|
外层容器:默认为空壳,仅用于包裹
|
||||||
|
如果开启 placeholder,则通过 style 撑开高度
|
||||||
|
-->
|
||||||
|
<view
|
||||||
|
class="nav-wrapper"
|
||||||
|
:style="{
|
||||||
|
background: props.bgColor
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<!-- 【占位层】:只在开启 placeholder 时渲染,纯粹为了撑高度 -->
|
||||||
|
<view
|
||||||
|
v-if="placeholder"
|
||||||
|
class="nav-placeholder"
|
||||||
|
:style="{ height: totalNavHeight + 'px' }"
|
||||||
|
></view>
|
||||||
|
|
||||||
|
<!-- 【功能层】:Fixed 定位,脱离文档流,永远显示在最上层 -->
|
||||||
|
<view class="nav-fixed-layer" :style="fixedLayerStyle">
|
||||||
|
<!-- 状态栏区域(用于沉浸式背景填充) -->
|
||||||
|
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||||
|
|
||||||
|
<!-- 导航栏主体 -->
|
||||||
|
<view class="nav-main" :style="{ height: navBarHeight + 'px' }">
|
||||||
|
<!-- 左侧 -->
|
||||||
|
<view class="nav-left" :style="{ width: leftWidth + 'px' }">
|
||||||
|
<slot name="left">
|
||||||
|
<view class="back-btn" @click="goBack" v-if="showBack">
|
||||||
|
<uni-icons type="left" size="20" color="inherit"></uni-icons>
|
||||||
|
<text v-if="backText" class="back-text">{{ backText }}</text>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 中间 -->
|
||||||
|
<view class="nav-center">
|
||||||
|
<slot name="center">
|
||||||
|
<text class="nav-title" :style="{ color: titleColor }">{{ title }}</text>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 右侧 -->
|
||||||
|
<view class="nav-right" :style="{ width: rightWidth + 'px' }">
|
||||||
|
<slot name="right"></slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed, onMounted } from 'vue'
|
||||||
|
|
||||||
|
// --- Props ---
|
||||||
|
interface Props {
|
||||||
|
title?: string
|
||||||
|
bgColor?: string
|
||||||
|
titleColor?: string
|
||||||
|
showBack?: boolean
|
||||||
|
backText?: string
|
||||||
|
placeholder?: boolean // 是否开启“占位层”
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
title: '标题',
|
||||||
|
bgColor: 'transparent',
|
||||||
|
titleColor: '#333333',
|
||||||
|
showBack: true,
|
||||||
|
backText: '',
|
||||||
|
placeholder: true // 默认开启占位,防止遮挡
|
||||||
|
})
|
||||||
|
|
||||||
|
// --- 状态 ---
|
||||||
|
const statusBarHeight = ref(0)
|
||||||
|
const navBarHeight = ref(44)
|
||||||
|
const capsuleHeight = ref(0)
|
||||||
|
|
||||||
|
// --- 计算属性 ---
|
||||||
|
const totalNavHeight = computed(() => statusBarHeight.value + navBarHeight.value)
|
||||||
|
|
||||||
|
// 2. 功能层样式:Fixed 定位,负责视觉展示
|
||||||
|
const fixedLayerStyle = computed(() => ({
|
||||||
|
backgroundColor: props.bgColor,
|
||||||
|
zIndex: 9999
|
||||||
|
}))
|
||||||
|
|
||||||
|
const leftWidth = computed(() => {
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
return capsuleHeight.value || 40
|
||||||
|
// #endif
|
||||||
|
// #ifndef MP-WEIXIN
|
||||||
|
return 40
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
const rightWidth = computed(() => leftWidth.value)
|
||||||
|
|
||||||
|
// --- 生命周期 ---
|
||||||
|
onMounted(() => {
|
||||||
|
initNavBar()
|
||||||
|
})
|
||||||
|
|
||||||
|
// --- 方法 ---
|
||||||
|
const initNavBar = () => {
|
||||||
|
const windowInfo = uni.getWindowInfo()
|
||||||
|
statusBarHeight.value = windowInfo.statusBarHeight || 0
|
||||||
|
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
const menuInfo = uni.getMenuButtonBoundingClientRect()
|
||||||
|
if (menuInfo.top && menuInfo.height) {
|
||||||
|
const gap = menuInfo.top - statusBarHeight.value
|
||||||
|
navBarHeight.value = (gap > 0 ? gap : 4) * 2 + menuInfo.height
|
||||||
|
capsuleHeight.value = menuInfo.height
|
||||||
|
} else {
|
||||||
|
navBarHeight.value = 44
|
||||||
|
capsuleHeight.value = 0
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef MP-WEIXIN
|
||||||
|
navBarHeight.value = 44
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 【外层容器】:文档流中的普通盒子 */
|
||||||
|
.nav-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
/* 这里不设置 position,让它老老实实在文档流里呆着 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 【占位层】:看不见摸不着,只有高度 */
|
||||||
|
.nav-placeholder {
|
||||||
|
width: 100%;
|
||||||
|
/* 仅通过 height 撑开父容器 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 【功能层】:脱离文档流,悬浮在页面上方 */
|
||||||
|
.nav-fixed-layer {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* 视觉上的背景色在这里 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-bar {
|
||||||
|
width: 100%;
|
||||||
|
pointer-events: none; /* 防止拦截点击 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-main {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-left,
|
||||||
|
.nav-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-center {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-left: 4rpx;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -9,7 +9,7 @@
|
|||||||
active: item.value === activeValue
|
active: item.value === activeValue
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
{{ item.name }}
|
{{ item[props.options.label] }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -20,15 +20,19 @@ import { ref } from 'vue'
|
|||||||
type tabslistType = { name: string; value: number }
|
type tabslistType = { name: string; value: number }
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
tabslist: tabslistType[]
|
tabslist: tabslistType[]
|
||||||
|
options: {
|
||||||
|
label: 'name'
|
||||||
|
value: 'value'
|
||||||
|
}
|
||||||
}>()
|
}>()
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
update: [value: number]
|
update: [value: number]
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const activeValue = ref(0)
|
const activeValue = ref(props.tabslist[0].value)
|
||||||
const handleTabs = (row: tabslistType) => {
|
const handleTabs = (row: tabslistType) => {
|
||||||
activeValue.value = row.value
|
activeValue.value = row[props.options.value]
|
||||||
emit('update', row.value)
|
emit('update', row[props.options.value])
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
442
wuye-manager-uniapp/pageSubPack/ticket/hall.vue
Normal file
442
wuye-manager-uniapp/pageSubPack/ticket/hall.vue
Normal file
@@ -0,0 +1,442 @@
|
|||||||
|
<template>
|
||||||
|
<view class="report-record-page page_padding">
|
||||||
|
<!-- 顶部导航栏 -->
|
||||||
|
<NavBar title="工单大厅"></NavBar>
|
||||||
|
<view class="hall_body flex-1 flex flex-col">
|
||||||
|
<!-- 状态筛选标签 -->
|
||||||
|
<TabsComponents
|
||||||
|
:tabslist="statusTabs"
|
||||||
|
:options="{ label: 'label', value: 'value' }"
|
||||||
|
@update="switchStatus"
|
||||||
|
></TabsComponents>
|
||||||
|
|
||||||
|
<!-- 类型筛选标签 -->
|
||||||
|
<view class="type-tabs">
|
||||||
|
<view
|
||||||
|
v-for="item in typeTabs"
|
||||||
|
:key="item.value"
|
||||||
|
class="type-tab-item"
|
||||||
|
:class="{ active: activeType === item.value }"
|
||||||
|
@tap="switchType(item.value)"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 上报记录列表 -->
|
||||||
|
<scroll-view
|
||||||
|
class="record-list flex-1"
|
||||||
|
scroll-y
|
||||||
|
:style="{ height: `calc(100vh - ${navHeight + statusTabHeight + typeTabHeight}px)` }"
|
||||||
|
>
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<view v-if="filteredRecords.length === 0" class="empty-state">
|
||||||
|
<uni-icons type="empty" size="60" color="#ccc"></uni-icons>
|
||||||
|
<text class="empty-text">暂无上报记录</text>
|
||||||
|
</view>
|
||||||
|
<!-- 记录卡片 -->
|
||||||
|
<view v-for="record in filteredRecords" :key="record.id" class="record-card">
|
||||||
|
<!-- 标题 + 状态标签 -->
|
||||||
|
<view class="card-header">
|
||||||
|
<text class="card-title">{{ record.title }}</text>
|
||||||
|
<view class="status-tag" :class="record.status">
|
||||||
|
{{ getStatusText(record.status) }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 类型标签 -->
|
||||||
|
<view class="tag-group">
|
||||||
|
<view class="tag-item">{{ record.reportType }}</view>
|
||||||
|
<view class="tag-item">{{ record.category }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 内容 -->
|
||||||
|
<view class="card-content">
|
||||||
|
{{ record.content }}
|
||||||
|
</view>
|
||||||
|
<!-- 工单图片 -->
|
||||||
|
<view class="card-image">
|
||||||
|
<image
|
||||||
|
v-for="(item, index) in record.images"
|
||||||
|
:key="index"
|
||||||
|
:src="item"
|
||||||
|
class="images"
|
||||||
|
mode="scaleToFill"
|
||||||
|
@tap="handlePrivew(record.images)"
|
||||||
|
></image>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部信息 -->
|
||||||
|
<view class="card-footer">
|
||||||
|
<text class="create-time">{{ record.createTime }}</text>
|
||||||
|
<text v-if="record.repairStatus === 1" class="repairman"
|
||||||
|
>维修师傅:{{ record.repairman }}</text
|
||||||
|
>
|
||||||
|
<view class="share" v-if="record.repairStatus === 0">
|
||||||
|
<text>分配</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import { onReady } from '@dcloudio/uni-app'
|
||||||
|
import TabsComponents from '@/components/tabs/tabs.vue'
|
||||||
|
import NavBar from '@/components/navbar/navbar.vue'
|
||||||
|
|
||||||
|
// 导航栏/标签高度(适配不同设备)
|
||||||
|
const navHeight = ref(44)
|
||||||
|
const statusTabHeight = ref(88)
|
||||||
|
const typeTabHeight = ref(88)
|
||||||
|
|
||||||
|
// 筛选状态
|
||||||
|
const activeStatus = ref('all') // 全部/待分配/待解决/已完成
|
||||||
|
const activeType = ref('all') // 全部/公共报修/个人报修
|
||||||
|
|
||||||
|
// 状态筛选选项
|
||||||
|
const statusTabs = ref([
|
||||||
|
{ label: '全部', value: 'all' },
|
||||||
|
{ label: '待分配', value: 'pending' },
|
||||||
|
{ label: '待解决', value: 'processing' },
|
||||||
|
{ label: '已完成', value: 'completed' }
|
||||||
|
])
|
||||||
|
|
||||||
|
// 类型筛选选项
|
||||||
|
const typeTabs = ref([
|
||||||
|
{ label: '全部', value: 'all' },
|
||||||
|
{ label: '公共报修', value: 'public' },
|
||||||
|
{ label: '个人报修', value: 'private' }
|
||||||
|
])
|
||||||
|
|
||||||
|
// 模拟上报记录数据(实际项目替换为接口请求)
|
||||||
|
const reportRecords = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '标题巴拉巴拉巴拉',
|
||||||
|
status: 'pending', // pending/processing/completed
|
||||||
|
reportType: '公共报修',
|
||||||
|
category: '路灯',
|
||||||
|
content: '1栋楼下道路路灯不亮,并且有的亮度不够,请物业公司及时更换,防止发生意外事故。',
|
||||||
|
createTime: '2026-08-01 10:05:46',
|
||||||
|
repairman: '',
|
||||||
|
images: [
|
||||||
|
'https://picsum.photos/93',
|
||||||
|
'https://picsum.photos/93',
|
||||||
|
'https://picsum.photos/93',
|
||||||
|
'https://picsum.photos/93',
|
||||||
|
'https://picsum.photos/93'
|
||||||
|
],
|
||||||
|
repairStatus: 0 // 0 待分配,1待解决 2已完成
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: '标题巴拉巴拉巴拉',
|
||||||
|
status: 'processing',
|
||||||
|
reportType: '公共报修',
|
||||||
|
category: '路灯',
|
||||||
|
content: '1栋楼下道路路灯不亮,并且有的亮度不够,请物业公司及时更换,防止发生意外事故。',
|
||||||
|
createTime: '2026-08-01 10:05:46',
|
||||||
|
repairman: '张三',
|
||||||
|
images: ['https://picsum.photos/93', 'https://picsum.photos/93', 'https://picsum.photos/93'],
|
||||||
|
repairStatus: 1 // 0 待分配,1待解决 2已完成
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: '标题巴拉巴拉巴拉',
|
||||||
|
status: 'completed',
|
||||||
|
reportType: '公共报修',
|
||||||
|
category: '路灯',
|
||||||
|
content: '1栋楼下道路路灯不亮,并且有的亮度不够,请物业公司及时更换,防止发生意外事故。',
|
||||||
|
createTime: '2026-08-01 10:05:46',
|
||||||
|
images: ['https://picsum.photos/93', 'https://picsum.photos/93', 'https://picsum.photos/93'],
|
||||||
|
repairman: '张三',
|
||||||
|
repairStatus: 2 // 0 待分配,1待解决 2已完成
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
// 筛选后的记录
|
||||||
|
const filteredRecords = computed(() => {
|
||||||
|
return reportRecords.value.filter(record => {
|
||||||
|
// 状态筛选
|
||||||
|
const statusMatch = activeStatus.value === 'all' || record.status === activeStatus.value
|
||||||
|
// 类型筛选
|
||||||
|
const typeMatch =
|
||||||
|
activeType.value === 'all' ||
|
||||||
|
record.reportType === typeTabs.value.find(item => item.value === activeType.value)?.label
|
||||||
|
return statusMatch && typeMatch
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// 切换状态(全部/待分配/待解决/已完成)筛选
|
||||||
|
const switchStatus = value => {
|
||||||
|
activeStatus.value = value
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换类型(公共/个人)筛选
|
||||||
|
const switchType = value => {
|
||||||
|
activeType.value = value
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取状态文本
|
||||||
|
const getStatusText = status => {
|
||||||
|
const statusMap = {
|
||||||
|
pending: '待分配',
|
||||||
|
processing: '待解决',
|
||||||
|
completed: '已完成'
|
||||||
|
}
|
||||||
|
return statusMap[status] || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面渲染完成后适配高度
|
||||||
|
onReady(() => {
|
||||||
|
// 可根据实际设备调整高度
|
||||||
|
uni.getSystemInfo({
|
||||||
|
success: res => {
|
||||||
|
if (res.platform === 'ios') {
|
||||||
|
navHeight.value = 44
|
||||||
|
} else {
|
||||||
|
navHeight.value = 48
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
/* 预览图片 */
|
||||||
|
function handlePrivew(imgs) {
|
||||||
|
// if (imgs.length > 0) {
|
||||||
|
// uni.previewImage({
|
||||||
|
// urls: imgs,
|
||||||
|
// success(e) {
|
||||||
|
// console.log(JSON.stringify(e))
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.report-record-page {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
max-height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: linear-gradient(225deg, #e2f0ff 0%, #f9f9f9 50.71%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hall_body {
|
||||||
|
padding: 0 40rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
/* 状态筛选标签 */
|
||||||
|
.status-tabs {
|
||||||
|
display: flex;
|
||||||
|
/* background-color: #fff; */
|
||||||
|
padding: 0 40rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tab-item {
|
||||||
|
/* flex: 1; */
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin-right: 60rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #666;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 88rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tab-item.active {
|
||||||
|
color: #4d5dfa;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tab-item.active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 80rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
background: linear-gradient(to bottom, #4d5dfa, #bac0fa);
|
||||||
|
border-radius: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 类型筛选标签 */
|
||||||
|
.type-tabs {
|
||||||
|
display: flex;
|
||||||
|
height: 48rpx;
|
||||||
|
/* background-color: #fff; */
|
||||||
|
margin: 20rpx 0;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-tab-item {
|
||||||
|
width: 142rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
border: 2rpx solid #999999;
|
||||||
|
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 48rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-tab-item.active {
|
||||||
|
color: #4d5dfa;
|
||||||
|
border: 2rpx solid #4d5dfa;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 记录列表 */
|
||||||
|
.record-list {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 空状态 */
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 100rpx 0;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 记录卡片 */
|
||||||
|
.record-card {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 34rpx 32rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
margin-right: 20rpx;
|
||||||
|
font-weight: 450;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #222222;
|
||||||
|
line-height: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 状态标签 */
|
||||||
|
.status-tag {
|
||||||
|
width: 82rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tag.pending {
|
||||||
|
background-color: #e34d59; /* 待分配-红色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tag.processing {
|
||||||
|
background-color: #09c2bd; /* 待解决-绿色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tag.completed {
|
||||||
|
background-color: #4d5dfa; /* 已完成-蓝色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 类型标签组 */
|
||||||
|
.tag-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-item {
|
||||||
|
width: 112rpx;
|
||||||
|
height: 42rpx;
|
||||||
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||||
|
border: 1rpx solid #999999;
|
||||||
|
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 42rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 内容 */
|
||||||
|
.card-content {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
font-weight: 450;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 40rpx;
|
||||||
|
letter-spacing: 2rpx;
|
||||||
|
}
|
||||||
|
/* 图片 */
|
||||||
|
.card-image {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 20rpx;
|
||||||
|
min-width: 186rpx;
|
||||||
|
min-height: 104rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
.images {
|
||||||
|
width: 186rpx;
|
||||||
|
height: 104rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部信息 */
|
||||||
|
.card-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.share {
|
||||||
|
width: 127rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
background: #4d5dfa;
|
||||||
|
border-radius: 22rpx;
|
||||||
|
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 44rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.repairman {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
224
wuye-manager-uniapp/pageSubPack/ticket/shareUser.vue
Normal file
224
wuye-manager-uniapp/pageSubPack/ticket/shareUser.vue
Normal file
@@ -0,0 +1,224 @@
|
|||||||
|
<template>
|
||||||
|
<view class="page_padding shareUser">
|
||||||
|
<view class="shareBody flex flex-col flex-1 overflow-hidden">
|
||||||
|
<!-- 搜索 -->
|
||||||
|
<view class="search_box">
|
||||||
|
<view
|
||||||
|
@click="handleClick"
|
||||||
|
class="search_view flex-center"
|
||||||
|
v-if="!queryParmas.value.trim() && Searching"
|
||||||
|
>
|
||||||
|
<uni-icons type="search" size="34rpx" color="rgba(0,0,0,0.26)"></uni-icons>
|
||||||
|
<text>请输入关键字进行搜索</text>
|
||||||
|
</view>
|
||||||
|
<uni-easyinput
|
||||||
|
@blur="handleInput"
|
||||||
|
@change="handleSearch"
|
||||||
|
:focus="true"
|
||||||
|
ref="inputRef"
|
||||||
|
v-model="queryParmas.value"
|
||||||
|
v-else
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<!-- 已经选择人数 -->
|
||||||
|
<view class="checkoutedUser_box">
|
||||||
|
<text>已选(1/1)</text>
|
||||||
|
<text>潘霞通</text>
|
||||||
|
</view>
|
||||||
|
<!-- srcoll -->
|
||||||
|
<scroll-view scroll-y="true" class="flex-1 overflow-auto">
|
||||||
|
<radio-group @change="radioChange">
|
||||||
|
<label v-for="(item, index) in searchlist" :key="index">
|
||||||
|
<view
|
||||||
|
class="item flex items-center justify-between"
|
||||||
|
:class="{
|
||||||
|
active: checkoutUserid === item.id
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<view class="">
|
||||||
|
<view class="info">
|
||||||
|
<text>姓名:</text>
|
||||||
|
<text>{{ item.name }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info">
|
||||||
|
<text>角色:</text>
|
||||||
|
<text>{{ item.roleName }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info">
|
||||||
|
<text>手机号码:</text>
|
||||||
|
<text>{{ item.phone }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<radio color="#4d5dfa" :value="item.id" />
|
||||||
|
</view>
|
||||||
|
</label>
|
||||||
|
</radio-group>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
<!-- submit -->
|
||||||
|
<view class="action_btn" @tap="handleSelecthouse">
|
||||||
|
<text>确定派单</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import navBar from '@/components/navbar/navbar.vue'
|
||||||
|
const Searching = ref(true)
|
||||||
|
const queryParmas = ref({
|
||||||
|
value: ''
|
||||||
|
})
|
||||||
|
/** 点击时切换到input,并聚焦 */
|
||||||
|
function handleClick() {
|
||||||
|
Searching.value = false
|
||||||
|
}
|
||||||
|
/** 判断 失去焦点时 切换回 view */
|
||||||
|
function handleInput() {
|
||||||
|
if (queryParmas.value.value.trim()) {
|
||||||
|
Searching.value = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function handleSearch() {
|
||||||
|
console.log('search')
|
||||||
|
}
|
||||||
|
// -----------------------------------------
|
||||||
|
/* 选择列表 */
|
||||||
|
const searchlist = ref([
|
||||||
|
{
|
||||||
|
name: '张三',
|
||||||
|
roleName: '维修人员',
|
||||||
|
phone: '19578012123',
|
||||||
|
id: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '张三',
|
||||||
|
roleName: '维修人员',
|
||||||
|
phone: '19578012123',
|
||||||
|
id: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '张三',
|
||||||
|
roleName: '维修人员',
|
||||||
|
phone: '19578012123',
|
||||||
|
id: 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '张三',
|
||||||
|
roleName: '维修人员',
|
||||||
|
phone: '19578012123',
|
||||||
|
id: 4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '张三',
|
||||||
|
roleName: '维修人员',
|
||||||
|
phone: '19578012123',
|
||||||
|
id: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '张三',
|
||||||
|
roleName: '维修人员',
|
||||||
|
phone: '19578012123',
|
||||||
|
id: 6
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '张三',
|
||||||
|
roleName: '维修人员',
|
||||||
|
phone: '19578012123',
|
||||||
|
id: 7
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '张三',
|
||||||
|
roleName: '维修人员',
|
||||||
|
phone: '19578012123',
|
||||||
|
id: 8
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const checkoutUserid = ref(null)
|
||||||
|
function radioChange(val) {
|
||||||
|
checkoutUserid.value = Number(val.detail.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确定派单 */
|
||||||
|
function handleSelecthouse() {
|
||||||
|
// api
|
||||||
|
// 3. 返回上一页
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.shareUser {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
|
||||||
|
.shareBody {
|
||||||
|
padding: 0 40rpx;
|
||||||
|
|
||||||
|
.search_box {
|
||||||
|
height: 80rpx;
|
||||||
|
.search_view {
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
background: #f3f3f3;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: rgba(0, 0, 0, 0.26);
|
||||||
|
line-height: 48rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择人数
|
||||||
|
.checkoutedUser_box {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
}
|
||||||
|
// 角色列表
|
||||||
|
.item {
|
||||||
|
height: 170rpx;
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1rpx solid transparent;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding-left: 26rpx;
|
||||||
|
padding-right: 32rpx;
|
||||||
|
.info {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
&:deep(radio) {
|
||||||
|
transform: scale(0.68);
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
background: #f5faff;
|
||||||
|
border: 1rpx solid #4d5dfa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确定派单
|
||||||
|
.action_btn {
|
||||||
|
width: 670rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
background: #4d5dfa;
|
||||||
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -138,6 +138,23 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"root": "pageSubPack/ticket",
|
||||||
|
"pages": [{
|
||||||
|
"path": "hall",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "工单大厅",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "shareUser",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "分配派单"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"root": "pageSubPack/oneClickOpen",
|
"root": "pageSubPack/oneClickOpen",
|
||||||
"pages": [{
|
"pages": [{
|
||||||
|
|||||||
Reference in New Issue
Block a user