You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
639 lines
18 KiB
639 lines
18 KiB
<template>
|
|
<view class="container">
|
|
<view class="header">
|
|
|
|
<!-- 大Tab：维修记录/保养记录 -->
|
|
<view class="main-tabs">
|
|
<view
|
|
class="tab-item"
|
|
:class="{ active: activeMainTab === 'repair' }"
|
|
@click="switchMainTab('repair')"
|
|
>
|
|
<text class="tab-text">维修记录</text>
|
|
<view class="tab-underline" v-if="activeMainTab === 'repair'"></view>
|
|
</view>
|
|
<view
|
|
class="tab-item"
|
|
:class="{ active: activeMainTab === 'maintain' }"
|
|
@click="switchMainTab('maintain')"
|
|
>
|
|
<text class="tab-text">保养记录</text>
|
|
<view class="tab-underline" v-if="activeMainTab === 'maintain'"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 筛选按钮区域 -->
|
|
<view class="picker-buttons">
|
|
<view class="picker-btn" :class="{ active: selectedTime }" @click="showTimePicker" >
|
|
<text class="btn-text">{{ selectedTime || '时间' }}</text>
|
|
<text class="arrow-icon">▼</text>
|
|
</view>
|
|
<view class="picker-btn" :class="{ active: selectedPerson }" @click="showPersonPicker" >
|
|
<text class="btn-text">{{ selectedPerson || '人员' }}</text>
|
|
<text class="arrow-icon">▼</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 时间选择器 -->
|
|
<uv-picker
|
|
ref="timePicker"
|
|
:columns="timeColumns"
|
|
@confirm="onTimeConfirm"
|
|
@cancel="onTimeCancel"
|
|
title="选择时间范围"
|
|
confirmColor="#C70019"
|
|
></uv-picker>
|
|
|
|
<!-- 人员选择器 -->
|
|
<uv-picker
|
|
ref="personPicker"
|
|
:columns="personColumns"
|
|
@confirm="onPersonConfirm"
|
|
@cancel="onPersonCancel"
|
|
title="选择人员"
|
|
confirmColor="#C70019"
|
|
></uv-picker>
|
|
|
|
<!-- 内容区域 -->
|
|
<view class="content-area">
|
|
<!-- 记录item -->
|
|
<view class="record-item" v-for="(record, index) in list" :key="index">
|
|
<!-- 维修记录 -->
|
|
<template v-if="activeMainTab === 'repair'">
|
|
<!-- 基本信息 -->
|
|
<view class="info-row">
|
|
<text class="label">维修人</text>
|
|
<text class="value">{{ record.repairPerson }}</text>
|
|
</view>
|
|
|
|
<view class="info-row">
|
|
<text class="label">联系方式</text>
|
|
<text class="value">{{ record.contactPhone }}</text>
|
|
</view>
|
|
|
|
<view class="info-row">
|
|
<text class="label">维修日期</text>
|
|
<text class="value">{{ record.repairDate }}</text>
|
|
</view>
|
|
|
|
<view class="info-row">
|
|
<text class="label">处理内容</text>
|
|
</view>
|
|
|
|
<!-- 处理内容文本区域 -->
|
|
<view class="content-text">
|
|
<text>{{ record.processContent }}</text>
|
|
</view>
|
|
|
|
<!-- 上传图片 -->
|
|
<view class="info-row" v-if="!record.isCollapsed">
|
|
<text class="label">上传图片</text>
|
|
</view>
|
|
|
|
<view class="image-container" v-if="!record.isCollapsed">
|
|
<image class="uploaded-image" :src="record.uploadImage" mode="aspectFill"></image>
|
|
</view>
|
|
|
|
<!-- 是否产生费用 -->
|
|
<view class="info-row">
|
|
<text class="label">是否产生费用</text>
|
|
<text class="value red-text">{{ record.hasCost }}</text>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 保养记录 -->
|
|
<template v-else>
|
|
<!-- 基本信息 -->
|
|
<view class="info-row">
|
|
<text class="label">保养人</text>
|
|
<text class="value">{{ record.maintainPerson }}</text>
|
|
</view>
|
|
|
|
<view class="info-row">
|
|
<text class="label">保养日期</text>
|
|
<text class="value">{{ record.maintainDate }}</text>
|
|
</view>
|
|
|
|
<view class="info-row">
|
|
<text class="label">保养前状态</text>
|
|
</view>
|
|
|
|
<!-- 保养前状态文本区域 -->
|
|
<view class="content-text">
|
|
<text>{{ record.beforeStatus }}</text>
|
|
</view>
|
|
|
|
<!-- 保养前图片 -->
|
|
<view class="image-container" v-if="!record.isCollapsed">
|
|
<image
|
|
class="uploaded-image"
|
|
v-for="(img, imgIndex) in record.beforeImages"
|
|
:key="imgIndex"
|
|
:src="img"
|
|
mode="aspectFill"
|
|
></image>
|
|
</view>
|
|
|
|
<view class="info-row" v-if="!record.isCollapsed">
|
|
<text class="label">保养后状态</text>
|
|
</view>
|
|
|
|
<!-- 保养后状态文本区域 -->
|
|
<view class="content-text" v-if="!record.isCollapsed">
|
|
<text>{{ record.afterStatus }}</text>
|
|
</view>
|
|
|
|
<!-- 保养后图片 -->
|
|
<view class="image-container" v-if="!record.isCollapsed">
|
|
<image
|
|
class="uploaded-image"
|
|
v-for="(img, imgIndex) in record.afterImages"
|
|
:key="'after-' + imgIndex"
|
|
:src="img"
|
|
mode="aspectFill"
|
|
></image>
|
|
</view>
|
|
|
|
<!-- 是否产生费用 -->
|
|
<view class="info-row" v-if="!record.isCollapsed">
|
|
<text class="label">是否产生费用</text>
|
|
<text class="value red-text">{{ record.hasCost }}</text>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 查看全部按钮（收起状态时显示） -->
|
|
<!-- <view class="view-all-btn" v-if="record.isCollapsed" @click="toggleCollapse(index)">
|
|
<text class="view-all-text">查看全部</text>
|
|
<text class="view-all-icon">▼</text>
|
|
</view> -->
|
|
|
|
<!-- 产生费用 -->
|
|
<view class="info-row" v-if="!record.isCollapsed">
|
|
<text class="label">产生费用</text>
|
|
<text class="value red-text">{{ record.totalCost }}</text>
|
|
</view>
|
|
|
|
<!-- 费用详情表格 -->
|
|
<view class="cost-table" v-if="!record.isCollapsed">
|
|
<view class="table-header">
|
|
<text class="header-cell">费用名称</text>
|
|
<text class="header-cell">数量</text>
|
|
<text class="header-cell">金额</text>
|
|
</view>
|
|
|
|
<view class="table-row" v-for="(item, index) in record.costDetails" :key="index">
|
|
<text class="cell">{{ item.name }}</text>
|
|
<text class="cell">{{ item.quantity }}</text>
|
|
<text class="cell">{{ item.amount }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 维修记录特有字段 -->
|
|
<template v-if="activeMainTab === 'repair'">
|
|
<!-- 问题是否解决 -->
|
|
<view class="info-row" v-if="!record.isCollapsed">
|
|
<text class="label">问题是否解决</text>
|
|
<text class="value red-text">{{ record.isResolved }}</text>
|
|
</view>
|
|
|
|
<!-- 备注 -->
|
|
<view class="info-row" v-if="!record.isCollapsed">
|
|
<text class="label">备注</text>
|
|
</view>
|
|
|
|
<!-- 备注文本区域 -->
|
|
<view class="content-text" v-if="!record.isCollapsed">
|
|
<text>{{ record.remark }}</text>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 保养记录特有字段 -->
|
|
<template v-else>
|
|
<!-- 附件信息 -->
|
|
<view class="info-row" v-if="!record.isCollapsed">
|
|
<text class="label">附件信息</text>
|
|
</view>
|
|
|
|
<!-- 附件信息文本区域 -->
|
|
<view class="content-text" v-if="!record.isCollapsed">
|
|
<text>{{ record.attachmentInfo }}</text>
|
|
</view>
|
|
|
|
<!-- 附件图片 -->
|
|
<view class="image-container" v-if="!record.isCollapsed">
|
|
<image class="uploaded-image" :src="record.attachmentImage" mode="aspectFill"></image>
|
|
</view>
|
|
|
|
<!-- 保养备注 -->
|
|
<view class="info-row" v-if="!record.isCollapsed">
|
|
<text class="label">备注</text>
|
|
</view>
|
|
|
|
<!-- 保养备注文本区域 -->
|
|
<view class="content-text" v-if="!record.isCollapsed">
|
|
<text>{{ record.maintainRemark }}</text>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 收起按钮 -->
|
|
<view class="collapse-btn" @click="toggleCollapse(index)">
|
|
<text class="collapse-text">{{ record.isCollapsed ? '查看全部' : '收起' }}</text>
|
|
<text class="collapse-icon">{{ record.isCollapsed ? '▼' : '▲' }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
activeMainTab: 'repair', // 当前激活的主Tab
|
|
activeFilter: 0, // 当前激活的筛选器
|
|
filterOptions: [
|
|
{ name: '时间' },
|
|
{ name: '人员' }
|
|
],
|
|
selectedTime: '', // 选中的时间
|
|
selectedPerson: '', // 选中的人员
|
|
timeColumns: [
|
|
['今天', '昨天', '本周', '本月', '上月', '自定义']
|
|
],
|
|
personColumns: [
|
|
['张三', '李四', '王五', '赵六', '钱七', '孙八']
|
|
],
|
|
// 维修记录数据
|
|
repairData: [
|
|
{
|
|
repairPerson: '李华',
|
|
contactPhone: '15845623255',
|
|
repairDate: '2025-08-14',
|
|
processContent: '文字内容文字内容文字内容',
|
|
uploadImage: '/static/商城_商品2.png',
|
|
hasCost: '是',
|
|
totalCost: '300.00',
|
|
costDetails: [
|
|
{ name: '天然粘胶剂', quantity: '2', amount: '100.00' },
|
|
{ name: '达玛树脂', quantity: '1', amount: '200.00' }
|
|
],
|
|
isResolved: '是',
|
|
remark: '文字内容',
|
|
isCollapsed: true // 控制收起状态
|
|
},
|
|
{
|
|
repairPerson: '李华',
|
|
contactPhone: '15845623255',
|
|
repairDate: '2025-08-14',
|
|
processContent: '文字内容文字内容文字内容',
|
|
uploadImage: '/static/商城_商品2.png',
|
|
hasCost: '是',
|
|
totalCost: '300.00',
|
|
costDetails: [
|
|
{ name: '天然粘胶剂', quantity: '2', amount: '100.00' },
|
|
{ name: '达玛树脂', quantity: '1', amount: '200.00' }
|
|
],
|
|
isResolved: '是',
|
|
remark: '文字内容',
|
|
isCollapsed: true // 控制收起状态
|
|
},
|
|
],
|
|
// 保养记录数据
|
|
maintainData: [
|
|
{
|
|
maintainPerson: '李华',
|
|
maintainDate: '2025-08-19',
|
|
beforeStatus: '文字内容文字内容文字内容',
|
|
beforeImages: ['/static/商城_商品2.png', '/static/商城_商品2.png'],
|
|
afterStatus: '文字内容文字内容文字内容',
|
|
afterImages: ['/static/商城_商品2.png', '/static/商城_商品2.png'],
|
|
hasCost: '是',
|
|
totalCost: '300.00',
|
|
costDetails: [
|
|
{ name: '天然粘胶剂', quantity: '2', amount: '100.00' },
|
|
{ name: '达玛树脂', quantity: '1', amount: '200.00' }
|
|
],
|
|
attachmentInfo: '附件信息',
|
|
maintainRemark: '文字内容',
|
|
attachmentImage: '/static/商城_商品2.png',
|
|
isCollapsed: true // 控制收起状态
|
|
},
|
|
{
|
|
maintainPerson: '李华',
|
|
maintainDate: '2025-08-19',
|
|
beforeStatus: '文字内容文字内容文字内容',
|
|
beforeImages: ['/static/商城_商品2.png', '/static/商城_商品2.png'],
|
|
afterStatus: '文字内容文字内容文字内容',
|
|
afterImages: ['/static/商城_商品2.png', '/static/商城_商品2.png'],
|
|
hasCost: '是',
|
|
totalCost: '300.00',
|
|
costDetails: [
|
|
{ name: '天然粘胶剂', quantity: '2', amount: '100.00' },
|
|
{ name: '达玛树脂', quantity: '1', amount: '200.00' }
|
|
],
|
|
attachmentInfo: '附件信息',
|
|
maintainRemark: '文字内容',
|
|
attachmentImage: '/static/商城_商品2.png',
|
|
isCollapsed: true // 控制收起状态
|
|
}
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
list() {
|
|
return this.activeMainTab === 'repair' ? this.repairData : this.maintainData
|
|
},
|
|
contentText() {
|
|
const tabText = this.activeMainTab === 'repair' ? '维修' : '保养'
|
|
const filterText = this.filterOptions[this.activeFilter].name
|
|
let selectedText = ''
|
|
|
|
if (this.activeFilter === 0 && this.selectedTime) {
|
|
selectedText = ` - ${this.selectedTime}`
|
|
} else if (this.activeFilter === 1 && this.selectedPerson) {
|
|
selectedText = ` - ${this.selectedPerson}`
|
|
}
|
|
|
|
return `${tabText}记录 - 按${filterText}筛选${selectedText}`
|
|
}
|
|
},
|
|
methods: {
|
|
switchMainTab(tab) {
|
|
this.activeMainTab = tab
|
|
},
|
|
onFilterChange(index) {
|
|
this.activeFilter = index
|
|
// 切换筛选器时清空选择
|
|
this.selectedTime = ''
|
|
this.selectedPerson = ''
|
|
},
|
|
showTimePicker() {
|
|
this.$refs.timePicker.open()
|
|
},
|
|
showPersonPicker() {
|
|
this.$refs.personPicker.open()
|
|
},
|
|
onTimeConfirm(value) {
|
|
this.selectedTime = value.value[0]
|
|
console.log('选择的时间:', value)
|
|
},
|
|
onTimeCancel() {
|
|
console.log('取消选择时间')
|
|
},
|
|
onPersonConfirm(value) {
|
|
this.selectedPerson = value.value[0]
|
|
console.log('选择的人员:', value)
|
|
},
|
|
onPersonCancel() {
|
|
console.log('取消选择人员')
|
|
},
|
|
toggleCollapse(index) {
|
|
if (this.activeMainTab === 'repair') {
|
|
this.repairData[index].isCollapsed = !this.repairData[index].isCollapsed
|
|
console.log('收起/展开费用详情', this.repairData[index].isCollapsed)
|
|
} else {
|
|
this.maintainData[index].isCollapsed = !this.maintainData[index].isCollapsed
|
|
console.log('收起/展开费用详情', this.maintainData[index].isCollapsed)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
.header{
|
|
padding: 16rpx 39rpx 23rpx;
|
|
background: #fff;
|
|
}
|
|
.main-tabs {
|
|
display: flex;
|
|
margin-bottom: 48rpx;
|
|
// border-bottom: 2rpx solid #f0f0f0;
|
|
|
|
.tab-item {
|
|
flex: 1;
|
|
position: relative;
|
|
padding: 13rpx 0;
|
|
text-align: center;
|
|
|
|
.tab-text {
|
|
font-size: 28rpx;
|
|
color: $secondary-text-color;
|
|
font-weight: 400;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
&.active {
|
|
.tab-text {
|
|
color: $primary-color;
|
|
// font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.tab-underline {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60rpx;
|
|
height: 4rpx;
|
|
background-color: $primary-color;
|
|
border-radius: 2rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.filter-section {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.picker-buttons {
|
|
// margin-bottom: 32rpx;
|
|
display: flex;
|
|
gap: 55rpx;
|
|
|
|
.picker-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
color: $primary-text-color;
|
|
&.active {
|
|
color: $primary-color;
|
|
}
|
|
.btn-text {
|
|
font-size: 28rpx;
|
|
// color: $primary-color;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.arrow-icon {
|
|
font-size: 20rpx;
|
|
// color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-area {
|
|
padding: 22rpx 29rpx;
|
|
|
|
.record-item {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 29rpx;
|
|
margin-bottom: 37rpx;
|
|
border-radius: 15rpx;
|
|
box-shadow: 0 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 38rpx;
|
|
|
|
.label {
|
|
font-size: 28rpx;
|
|
color: $primary-text-color;
|
|
// font-weight: 400;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.value {
|
|
font-size: 28rpx;
|
|
color: $primary-text-color;
|
|
text-align: right;
|
|
flex: 1;
|
|
margin-left: 32rpx;
|
|
|
|
&.red-text {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-text {
|
|
background: #f5f5f5;
|
|
border-radius: 15rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
min-height: 120rpx;
|
|
text {
|
|
font-size: 28rpx;
|
|
color: $primary-text-color;
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
|
|
.image-container {
|
|
margin-bottom: 29rpx;
|
|
|
|
.uploaded-image {
|
|
width: 157rpx;
|
|
height: 157rpx;
|
|
// border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
.cost-table {
|
|
margin-bottom: 24rpx;
|
|
|
|
.table-header {
|
|
display: flex;
|
|
// background: #f8f8f8;
|
|
// border-radius: 8rpx 8rpx 0 0;
|
|
padding: 30rpx 0;
|
|
justify-content: space-between;
|
|
.header-cell {
|
|
flex: 1;
|
|
font-size: 30rpx;
|
|
color: $secondary-text-color;
|
|
&:nth-child(1) {
|
|
text-align: left;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
text-align: center;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
text-align: right;
|
|
}
|
|
// font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.table-row {
|
|
display: flex;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
padding: 30rpx 0;
|
|
// justify-content: space-between;
|
|
|
|
|
|
.cell {
|
|
flex: 1;
|
|
font-size: 30rpx;
|
|
color: $primary-text-color;
|
|
|
|
&:nth-child(1) {
|
|
text-align: left;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
text-align: center;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
text-align: right;
|
|
}
|
|
}
|
|
// .cell:first-child {
|
|
// text-align: center;
|
|
// }
|
|
}
|
|
}
|
|
|
|
.view-all-btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 16rpx 0;
|
|
margin-top: 16rpx;
|
|
|
|
.view-all-text {
|
|
font-size: 26rpx;
|
|
color: $primary-color;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.view-all-icon {
|
|
font-size: 20rpx;
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
|
|
.collapse-btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 16rpx 0;
|
|
margin-top: 16rpx;
|
|
|
|
.collapse-text {
|
|
font-size: 26rpx;
|
|
color: $primary-color;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.collapse-icon {
|
|
font-size: 20rpx;
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|