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.
1060 lines
28 KiB
1060 lines
28 KiB
<template>
|
|
<view class="maintain-submit">
|
|
<!-- 修改状态 -->
|
|
<view class="status-item">
|
|
<!-- 维修状态和状态选择 -->
|
|
<view class="status-row">
|
|
<text class="status-label">维修状态</text>
|
|
<view class="status-select" @click="showStatusPicker">
|
|
<text class="status-value" :class="{ placeholder: !selectedStatus }">{{ selectedStatus || '故障中' }}</text>
|
|
<uv-icon name="arrow-down" size="18" color="#000"></uv-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 修改状态按钮 -->
|
|
<button class="status-btn" :class="{ active: statusType === 'modify' }" @click="modifyStatus">
|
|
<text class="status-text">修改状态</text>
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 保修基本信息 -->
|
|
<view class="repair-info">
|
|
<view class="info-header">
|
|
<view class="red-line"></view>
|
|
<text class="info-title">报修基本信息</text>
|
|
</view>
|
|
|
|
<!-- 报修日期 -->
|
|
<view class="form-item">
|
|
<text class="label">报修日期</text>
|
|
<text class="value">{{ repairData.malfunctionDate }}</text>
|
|
</view>
|
|
|
|
<!-- 故障紧急程度 -->
|
|
<view class="form-item">
|
|
<text class="label">故障紧急程度</text>
|
|
<text class="value">{{ repairData.urgency === '1' ? '紧急' : '一般' }}</text>
|
|
</view>
|
|
|
|
<!-- 故障情况描述 -->
|
|
<view class="form-item">
|
|
<text class="label">故障情况描述</text>
|
|
</view>
|
|
|
|
<!-- 故障情况描述文本区域 -->
|
|
<view class="content-text">
|
|
<uv-textarea
|
|
v-model="repairData.malfunctionDesc"
|
|
placeholder="展品故障描述"
|
|
:maxlength="200"
|
|
:show-confirm-bar="false"
|
|
height="60"
|
|
border="none"
|
|
disabled
|
|
:textStyle="{ color: '#000' }"
|
|
:custom-style="{ backgroundColor: '#f5f5f5' }"
|
|
></uv-textarea>
|
|
</view>
|
|
|
|
<!-- 故障图片 -->
|
|
<view class="form-item" v-if="!isCollapsed">
|
|
<text class="label">故障图片</text>
|
|
</view>
|
|
|
|
<view class="image-container" v-if="!isCollapsed">
|
|
<image
|
|
class="uploaded-image"
|
|
v-for="(img, index) in getImageList(repairData.malfunctionImage)"
|
|
:key="index"
|
|
:src="img.trim()"
|
|
mode="aspectFill"
|
|
@click="previewImage(img.trim())"
|
|
></image>
|
|
</view>
|
|
|
|
<!-- 故障首次发生时间 -->
|
|
<view class="form-item" v-if="!isCollapsed">
|
|
<text class="label">故障首次发生时间</text>
|
|
<text class="value">{{ repairData.firstDate }}</text>
|
|
</view>
|
|
|
|
<!-- 发生频率 -->
|
|
<view class="form-item" v-if="!isCollapsed">
|
|
<text class="label">发生频率</text>
|
|
<text class="value red-text">{{ repairData.frequency === '1' ? '间歇性问题' : '持续性问题' }}</text>
|
|
</view>
|
|
|
|
<!-- 故障发生频率的触发条件 -->
|
|
<view class="content-text" v-if="!isCollapsed">
|
|
<uv-textarea
|
|
v-model="repairData.reason"
|
|
placeholder="故障发生频率的触发条件"
|
|
:maxlength="200"
|
|
:show-confirm-bar="false"
|
|
height="60"
|
|
border="none"
|
|
disabled
|
|
:textStyle="{ color: '#000' }"
|
|
:custom-style="{ backgroundColor: '#f5f5f5' }"
|
|
></uv-textarea>
|
|
</view>
|
|
|
|
|
|
<!-- 是否影响使用 -->
|
|
<view class="form-item" v-if="!isCollapsed">
|
|
<text class="label">是否影响使用</text>
|
|
<text class="value red-text">{{ repairData.isAffectUse === '1' ? '是' : '否' }}</text>
|
|
</view>
|
|
|
|
<!-- 是否采取临时措施 -->
|
|
<view class="form-item" v-if="!isCollapsed">
|
|
<text class="label">是否采取临时措施</text>
|
|
<text class="value red-text">{{ repairData.isMeasure === '1' ? '是' : '否' }}</text>
|
|
</view>
|
|
|
|
<!-- 如有采取临时措施请填写措施说明 -->
|
|
<view class="content-text" v-if="!isCollapsed">
|
|
<uv-textarea
|
|
v-model="repairData.measureDesc"
|
|
placeholder="如果有采取临时措施请填写措施说明"
|
|
:maxlength="200"
|
|
:show-confirm-bar="false"
|
|
height="60"
|
|
border="none"
|
|
disabled
|
|
:textStyle="{ color: '#000' }"
|
|
:custom-style="{ backgroundColor: '#f5f5f5' }"
|
|
></uv-textarea>
|
|
</view>
|
|
|
|
<!-- 是否影响体验 -->
|
|
<view class="form-item" v-if="!isCollapsed">
|
|
<text class="label">是否影响体验</text>
|
|
<text class="value red-text">{{ repairData.isAffectExperience === '1' ? '是' : '否' }}</text>
|
|
</view>
|
|
|
|
<view class="form-item" v-if="!isCollapsed">
|
|
<text class="label">备注</text>
|
|
</view>
|
|
<!-- 备注 -->
|
|
<view class="content-text" v-if="!isCollapsed">
|
|
|
|
<uv-textarea
|
|
v-model="repairData.remark"
|
|
placeholder="备注"
|
|
:maxlength="200"
|
|
:show-confirm-bar="false"
|
|
height="60"
|
|
border="none"
|
|
disabled
|
|
:textStyle="{ color: '#000' }"
|
|
:custom-style="{ backgroundColor: '#f5f5f5' }"
|
|
></uv-textarea>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 查看全部/收起按钮 -->
|
|
<view class="collapse-btn" @click="toggleCollapse">
|
|
<text class="collapse-text">{{ isCollapsed ? '查看全部' : '收起' }}</text>
|
|
<text class="collapse-icon">{{ isCollapsed ? '▼' : '▲' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 处理内容 -->
|
|
<view class="process-content">
|
|
<view class="info-header">
|
|
<view class="red-line"></view>
|
|
<text class="info-title">处理内容</text>
|
|
</view>
|
|
|
|
<!-- 维修人 -->
|
|
<view class="form-item">
|
|
<text class="label">维修人</text>
|
|
<view class="input-area" >
|
|
<input
|
|
v-model="processData.repairName"
|
|
placeholder="请填写"
|
|
class="input-field"
|
|
ref="maintainerInput"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 联系方式 -->
|
|
<view class="form-item">
|
|
<text class="label">联系方式</text>
|
|
<view class="input-area" >
|
|
<input
|
|
v-model="processData.phone"
|
|
placeholder="请填写"
|
|
class="input-field"
|
|
ref="maintainerInput"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 维修日期 -->
|
|
<view class="form-item" @click="showDatePicker">
|
|
<text class="label">维修日期</text>
|
|
<view class="select-area">
|
|
<text class="value" :class="{ placeholder: !processData.repairDate }">{{ processData.repairDate || '请选择' }}</text>
|
|
<uv-icon name="arrow-down" size="18" color="#000"></uv-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 处理内容 -->
|
|
<view class="form-item">
|
|
<text class="label">处理内容</text>
|
|
</view>
|
|
<view class="textarea-container">
|
|
<uv-textarea
|
|
v-model="processData.content"
|
|
placeholder="请输入处理内容"
|
|
:maxlength="200"
|
|
:show-confirm-bar="false"
|
|
height="60"
|
|
border="none"
|
|
:textStyle="{ color: '#000' }"
|
|
:custom-style="{ backgroundColor: '#f5f5f5' }"
|
|
></uv-textarea>
|
|
</view>
|
|
|
|
<!-- 上传图片 -->
|
|
<view class="form-item">
|
|
<text class="label">上传图片</text>
|
|
</view>
|
|
<view class="image-upload">
|
|
<view v-for="(img, index) in getImageList(processData.image)" :key="index" class="image-item">
|
|
<image :src="img.trim()" mode="aspectFill" @click="previewImage(img.trim())"></image>
|
|
<view class="delete-btn" @click="deleteImage(index)">
|
|
<uv-icon name="close" size="12" color="#fff"></uv-icon>
|
|
</view>
|
|
</view>
|
|
<view class="upload-btn" @click="uploadImage">
|
|
<uv-icon name="camera" size="34" color="#C70019"></uv-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 是否产生费用 -->
|
|
<view class="form-item">
|
|
<text class="label">是否产生费用</text>
|
|
<view class="radio-options">
|
|
<view
|
|
class="radio-item"
|
|
:class="{ active: processData.isExpend === '1' }"
|
|
@click="selectCost('1')"
|
|
>
|
|
<view class="radio-dot" :class="{ active: processData.isExpend === '1' }"></view>
|
|
<text :class="{ active: processData.isExpend === '1' }">是</text>
|
|
</view>
|
|
<view
|
|
class="radio-item"
|
|
:class="{ active: processData.isExpend === '0' }"
|
|
@click="selectCost('0')"
|
|
>
|
|
<view class="radio-dot" :class="{ active: processData.isExpend === '0' }"></view>
|
|
<text :class="{ active: processData.isExpend === '0' }">否</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 产生费用 -->
|
|
<view class="form-item" v-if="processData.isExpend === '1'">
|
|
<text class="label">产生费用</text>
|
|
<view class="input-area" >
|
|
<input
|
|
v-model="amount"
|
|
placeholder="请输入费用"
|
|
disabled
|
|
class="input-field"
|
|
ref="maintainerInput"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 费用详情表格 -->
|
|
<view class="cost-table" v-if="processData.isExpend === '1'">
|
|
<view class="table-header">
|
|
<text class="header-cell">费用名称</text>
|
|
<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 processData.costDetails" :key="index">
|
|
<view class="cell-input">
|
|
<uv-input
|
|
v-model="item.name"
|
|
placeholder="费用名称"
|
|
border="none"
|
|
:custom-style="{ backgroundColor: 'transparent', fontSize: '28rpx' }"
|
|
></uv-input>
|
|
</view>
|
|
<view class="cell-input">
|
|
<uv-input
|
|
v-model="item.quantity"
|
|
placeholder="数量"
|
|
border="none"
|
|
:custom-style="{ backgroundColor: 'transparent', fontSize: '28rpx' }"
|
|
></uv-input>
|
|
</view>
|
|
<view class="cell-input">
|
|
<uv-input
|
|
v-model="item.amount"
|
|
placeholder="金额"
|
|
border="none"
|
|
:custom-style="{ backgroundColor: 'transparent', fontSize: '28rpx' }"
|
|
></uv-input>
|
|
</view>
|
|
<view class="cell-action">
|
|
<view class="action-btn delete-btn" @click="deleteCostItem(index)" v-if="processData.costDetails.length > 1">
|
|
<uv-icon name="close" size="14" color="#fff"></uv-icon>
|
|
</view>
|
|
<view class="action-btn add-btn" @click="addCostItem" v-if="index === processData.costDetails.length - 1">
|
|
<uv-icon name="plus" size="14" color="#fff"></uv-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 问题是否解决 -->
|
|
<view class="form-item">
|
|
<text class="label">问题是否解决</text>
|
|
<view class="radio-options">
|
|
<view
|
|
class="radio-item"
|
|
:class="{ active: processData.isFix === '1' }"
|
|
@click="selectResolved('1')"
|
|
>
|
|
<view class="radio-dot" :class="{ active: processData.isFix === '1' }"></view>
|
|
<text :class="{ active: processData.isFix === '1' }">是</text>
|
|
</view>
|
|
<view
|
|
class="radio-item"
|
|
:class="{ active: processData.isFix === '0' }"
|
|
@click="selectResolved('0')"
|
|
>
|
|
<view class="radio-dot" :class="{ active: processData.isFix === '0' }"></view>
|
|
<text :class="{ active: processData.isFix === '0' }">否</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 备注 -->
|
|
<view class="form-item">
|
|
<text class="label">备注</text>
|
|
</view>
|
|
<view class="textarea-container">
|
|
<uv-textarea
|
|
v-model="processData.remark"
|
|
placeholder="备注"
|
|
:maxlength="200"
|
|
:show-confirm-bar="false"
|
|
height="60"
|
|
border="none"
|
|
:custom-style="{ backgroundColor: '#f5f5f5' }"
|
|
></uv-textarea>
|
|
</view>
|
|
|
|
<!-- 立即维修按钮 -->
|
|
<view class="repair-btn-container">
|
|
<uv-button
|
|
type="primary"
|
|
text="立即维修"
|
|
:custom-style="{ backgroundColor: '#C70019', borderRadius: '25px' }"
|
|
@click="startRepair"
|
|
></uv-button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 日期选择器 -->
|
|
<uv-datetime-picker
|
|
confirm-color="#C70019"
|
|
ref="datePicker"
|
|
v-model="timeValue"
|
|
mode="date"
|
|
@confirm="confirmDate"
|
|
></uv-datetime-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
timeValue: Number(new Date()),
|
|
statusType: 'modify',
|
|
selectedStatus: '故障中',
|
|
isCollapsed: true,
|
|
id: '',
|
|
showpieceId: '',
|
|
// 映射表
|
|
statusMap: {
|
|
'故障中': '0',
|
|
'维修中': '1',
|
|
'已解决': '2'
|
|
},
|
|
// 要有一个相反的引射表
|
|
reverseStatusMap: {
|
|
'0': '故障中',
|
|
'1': '维修中',
|
|
'2': '已解决'
|
|
},
|
|
// 报修基本信息（只读）
|
|
repairData: {
|
|
malfunctionDate: '2025-08-28', // 从接口 malfunctionDate 字段获取
|
|
urgency: '0', // 从接口 urgency 字段映射：0-一般，1-紧急，2-非常紧急
|
|
malfunctionDesc: '故障描述', // 从接口 malfunctionDesc 字段获取
|
|
malfunctionImage: '', // 从接口 malfunctionImage 字段获取（字符串格式，多张图片用逗号分隔）
|
|
firstDate: '2025-08-27', // 从接口 firstDate 字段获取
|
|
frequency: '0', // 从接口 frequency 字段映射：0-偶发性，1-持续性
|
|
reason: '发生频率触发条件', // 从接口 reason 字段获取
|
|
isAffectUse: '0', // 从接口 isAffectUse 字段映射：0-否，1-是
|
|
isMeasure: '0', // 从接口 isMeasure 字段映射：0-否，1-是
|
|
measureDesc: '措施说明', // 从接口 measureDesc 字段获取
|
|
isAffectExperience: '0', // 从接口 isAffectExperience 字段映射：0-否，1-是
|
|
remark: '备注', // 从接口 remark 字段获取
|
|
status: '0', // 从接口 status 字段获取
|
|
},
|
|
|
|
// 处理内容（可编辑）
|
|
processData: {
|
|
repairName: '',
|
|
phone: '',
|
|
repairDate: '',
|
|
content: '',
|
|
image: '',
|
|
isExpend: '0',
|
|
costDetails: [
|
|
{ name: '', quantity: '', amount: '' }
|
|
],
|
|
isFix: '0',
|
|
remark: ''
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
// 计算总金额
|
|
amount() {
|
|
return this.processData.costDetails.reduce((sum, item) => {
|
|
return sum + (Number(item.quantity) * parseFloat(item.amount || 0))
|
|
}, 0)
|
|
}
|
|
},
|
|
async onShow(){
|
|
await this.getRepairDetail()
|
|
},
|
|
onLoad(args){
|
|
this.id = args.id
|
|
this.showpieceId = args.showpieceId
|
|
},
|
|
methods: {
|
|
// 修改状态
|
|
async modifyStatus(){
|
|
const res = await this.$api.exhibit.updateMalfunction({
|
|
id: this.id,
|
|
status: this.statusMap[this.selectedStatus]
|
|
})
|
|
if (res.code === 200) {
|
|
uni.showToast({
|
|
title: '修改成功',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
},
|
|
|
|
// 获取报修详情
|
|
async getRepairDetail() {
|
|
const queryRes = await this.$api.exhibit.queryMalfunctionById({
|
|
malfunctionId: this.id
|
|
})
|
|
if (queryRes.code === 200) {
|
|
this.repairData = queryRes.result
|
|
// 状态字段反引射表
|
|
this.selectedStatus = this.reverseStatusMap[this.repairData.status]
|
|
}
|
|
},
|
|
|
|
// 立即维修
|
|
async startRepair() {
|
|
// 验证必填项
|
|
if (!this.processData.repairName) {
|
|
uni.showToast({
|
|
title: '请输入维修人',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (!this.processData.phone) {
|
|
uni.showToast({
|
|
title: '请输入联系方式',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (!this.processData.repairDate) {
|
|
uni.showToast({
|
|
title: '请选择维修日期',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (!this.processData.content) {
|
|
uni.showToast({
|
|
title: '请输入处理内容',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (this.processData.isFix === null) {
|
|
uni.showToast({
|
|
title: '请选择问题是否解决',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (this.processData.isExpend === '1') {
|
|
// 如果总金额为0则没有消费信息
|
|
if (!this.amount) {
|
|
uni.showToast({
|
|
title: '请添加费用明细',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
}else {
|
|
|
|
}
|
|
const tempData = {...this.processData}
|
|
delete tempData.costDetails
|
|
const tempDataList = [...this.processData.costDetails]
|
|
if (this.processData.isExpend === '1') {
|
|
tempData.expenseList = tempDataList.map(item => `${item.name},${item.quantity},${item.amount}`).join(';')
|
|
}else {
|
|
delete tempData.expenseList
|
|
}
|
|
const submitRes = await this.$api.exhibit.addRepair({
|
|
id: this.showpieceId,
|
|
...tempData,
|
|
amount: this.amount
|
|
})
|
|
|
|
if (submitRes.code === 200) {
|
|
uni.showToast({
|
|
title: submitRes.message,
|
|
icon: 'none'
|
|
})
|
|
setTimeout(() => {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}, 400)
|
|
}else {
|
|
uni.showToast({
|
|
title: submitRes.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
|
|
// 获取图片列表
|
|
getImageList(imageStr) {
|
|
if (!imageStr || typeof imageStr !== 'string') {
|
|
return []
|
|
}
|
|
return imageStr.split(',').filter(img => img && img.trim())
|
|
},
|
|
// 切换折叠状态
|
|
toggleCollapse() {
|
|
this.isCollapsed = !this.isCollapsed
|
|
},
|
|
|
|
// 预览图片
|
|
previewImage(img) {
|
|
uni.previewImage({
|
|
urls: [img],
|
|
current: img
|
|
})
|
|
},
|
|
|
|
// 显示日期选择器
|
|
showDatePicker() {
|
|
this.$refs.datePicker.open()
|
|
},
|
|
|
|
// 确认日期
|
|
confirmDate(e) {
|
|
this.processData.repairDate = this.$utils.formatTime(e.value)
|
|
},
|
|
|
|
// 上传图片
|
|
async uploadImage() {
|
|
try {
|
|
const result = await this.$utils.chooseAndUpload()
|
|
if (result && result.success) {
|
|
console.log(result);
|
|
|
|
// 将新图片URL添加到字符串中
|
|
if (this.processData.image) {
|
|
this.processData.image += ',' + result.url
|
|
} else {
|
|
this.processData.image = result.url
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('图片上传失败:', error)
|
|
uni.showToast({
|
|
title: '图片上传失败',
|
|
icon: 'error'
|
|
})
|
|
}
|
|
},
|
|
|
|
// 删除图片
|
|
deleteImage(index) {
|
|
const imageList = this.getImageList(this.processData.image)
|
|
imageList.splice(index, 1)
|
|
this.processData.image = imageList.join(',')
|
|
},
|
|
|
|
// 选择是否产生费用
|
|
selectCost(value) {
|
|
this.processData.isExpend = value
|
|
if (!value) {
|
|
this.processData.amount = 0
|
|
this.processData.costDetails = [{ name: '', quantity: '', amount: '' }]
|
|
}
|
|
},
|
|
|
|
// 添加费用项
|
|
addCostItem() {
|
|
this.processData.costDetails.push({ name: '', quantity: '', amount: '' })
|
|
},
|
|
|
|
// 删除费用项
|
|
deleteCostItem(index) {
|
|
this.processData.costDetails.splice(index, 1)
|
|
},
|
|
|
|
// 选择问题是否解决
|
|
selectResolved(value) {
|
|
this.processData.isFix = value
|
|
},
|
|
|
|
// 显示状态选择器
|
|
showStatusPicker() {
|
|
uni.showActionSheet({
|
|
itemList: ['故障中', '维修中', '已解决'],
|
|
success: (res) => {
|
|
const statusList = ['故障中', '维修中', '已解决']
|
|
this.selectedStatus = statusList[res.tapIndex]
|
|
}
|
|
})
|
|
},
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.maintain-submit {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
padding-bottom: 200rpx;
|
|
}
|
|
|
|
// 修改状态
|
|
.status-item {
|
|
margin: 18rpx;
|
|
background: #ffffff;
|
|
border-radius: 15rpx;
|
|
box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
|
|
padding: 20rpx 40rpx;
|
|
|
|
.status-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 24rpx;
|
|
|
|
.status-label {
|
|
font-size: 30rpx;
|
|
color: $primary-text-color;
|
|
// font-weight: bold;
|
|
}
|
|
|
|
.status-select {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 23rpx;
|
|
padding: 12rpx 24rpx;
|
|
// background-color: #f5f5f5;
|
|
border-radius: 8rpx;
|
|
// min-width: 200rpx;
|
|
justify-content: space-between;
|
|
|
|
.status-value {
|
|
font-size: 28rpx;
|
|
color: $primary-text-color;
|
|
|
|
&.placeholder {
|
|
color: $secondary-text-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.status-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// padding: 16rpx 32rpx;
|
|
// border: 2rpx solid #ddd;
|
|
border-radius: full;
|
|
background-color: #fff;
|
|
width: 419rpx;
|
|
height: 78rpx;
|
|
border-radius: 39rpx;
|
|
&.active {
|
|
border-color: $primary-color;
|
|
background-color: $primary-color;
|
|
|
|
.status-text {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.status-text {
|
|
font-size: 30rpx;
|
|
color: $secondary-text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 报修基本信息和处理内容通用样式
|
|
.repair-info, .process-content {
|
|
margin: 18rpx;
|
|
background: #ffffff;
|
|
border-radius: 15rpx;
|
|
box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
|
|
padding: 30rpx;
|
|
|
|
.info-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 40rpx;
|
|
|
|
.red-line {
|
|
width: 9rpx;
|
|
height: 33rpx;
|
|
background-color: $primary-color;
|
|
margin-right: 7rpx;
|
|
border-radius: 5rpx;
|
|
}
|
|
|
|
.info-title {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: $primary-text-color;
|
|
}
|
|
}
|
|
|
|
.form-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 18rpx 0;
|
|
border-bottom: 2rpx solid #f0f0f0;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.input-area {
|
|
flex: 1;
|
|
// background-color: #f5f5f5;
|
|
border-radius: 8rpx;
|
|
padding: 2rpx 24rpx;
|
|
margin-left: 24rpx;
|
|
|
|
.input-field {
|
|
width: 100%;
|
|
font-size: 30rpx;
|
|
color: $primary-text-color;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
text-align: right;
|
|
|
|
&::placeholder {
|
|
color: $secondary-text-color;
|
|
}
|
|
}
|
|
}
|
|
.label {
|
|
font-size: 30rpx;
|
|
color: $primary-text-color;
|
|
flex-shrink: 0;
|
|
|
|
&.active {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.value {
|
|
font-size: 30rpx;
|
|
color: $primary-text-color;
|
|
|
|
&.placeholder {
|
|
color: $secondary-text-color;
|
|
}
|
|
|
|
&.red-text {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
|
|
.select-area {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
}
|
|
}
|
|
|
|
.content-text {
|
|
// padding: 16rpx 0;
|
|
margin-bottom: 16rpx;
|
|
|
|
text {
|
|
font-size: 30rpx;
|
|
color: $secondary-text-color;
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
|
|
.image-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 24rpx;
|
|
margin: 16rpx 0;
|
|
|
|
.uploaded-image {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
// border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
.collapse-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16rpx;
|
|
padding: 30rpx 0 0;
|
|
margin-top: 16rpx;
|
|
border-top: 2rpx solid #f0f0f0;
|
|
|
|
.collapse-text {
|
|
font-size: 28rpx;
|
|
color: $primary-color;
|
|
}
|
|
|
|
.collapse-icon {
|
|
font-size: 24rpx;
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 处理内容特有样式
|
|
.process-content {
|
|
|
|
|
|
|
|
|
|
.textarea-container {
|
|
margin: 16rpx 0;
|
|
background-color: #f5f5f5;
|
|
border-radius: 8rpx;
|
|
padding: 8rpx 16rpx;
|
|
}
|
|
|
|
.image-upload {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 24rpx;
|
|
margin: 16rpx 0;
|
|
|
|
.upload-btn {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border: 2rpx dashed $primary-color;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.image-item {
|
|
position: relative;
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.delete-btn {
|
|
position: absolute;
|
|
top: -12rpx;
|
|
right: -12rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background-color: #ff4757;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.radio-options {
|
|
display: flex;
|
|
gap: 80rpx;
|
|
|
|
.radio-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
|
|
.radio-dot {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
border: 4rpx solid #ddd;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
|
|
&.active {
|
|
border-color: $primary-color;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
background-color: $primary-color;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
text {
|
|
font-size: 30rpx;
|
|
color: $secondary-text-color;
|
|
|
|
&.active {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 费用表格样式
|
|
.cost-table {
|
|
margin: 16rpx 0;
|
|
border: 2rpx solid #f0f0f0;
|
|
border-radius: 8rpx;
|
|
overflow: hidden;
|
|
|
|
.table-header {
|
|
display: flex;
|
|
background-color: #f8f8f8;
|
|
|
|
.header-cell {
|
|
flex: 1;
|
|
padding: 24rpx 16rpx;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: $primary-text-color;
|
|
text-align: left;
|
|
border-right: 2rpx solid #f0f0f0;
|
|
|
|
&:first-child {
|
|
flex: 2;
|
|
text-align: left;
|
|
}
|
|
|
|
&:last-child {
|
|
border-right: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-row {
|
|
display: flex;
|
|
border-top: 2rpx solid #f0f0f0;
|
|
|
|
.cell-input {
|
|
flex: 1;
|
|
padding: 8rpx;
|
|
border-right: 2rpx solid #f0f0f0;
|
|
|
|
&:first-child {
|
|
flex: 2;
|
|
}
|
|
|
|
&:last-child {
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
.cell-action {
|
|
width: 120rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8rpx;
|
|
padding: 8rpx;
|
|
|
|
.action-btn {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
padding: 4rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&.add-btn {
|
|
background-color: #1a9c10;
|
|
}
|
|
|
|
&.delete-btn {
|
|
background-color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 立即维修按钮
|
|
.repair-btn-container {
|
|
margin-top: 40rpx;
|
|
padding-top: 32rpx;
|
|
border-top: 2rpx solid #f0f0f0;
|
|
}
|
|
}
|
|
</style>
|