work-order/work-order-uniapp/pages/task/more.vue
2025-07-27 20:34:15 +08:00

212 lines
4.4 KiB
Vue

<template>
<view class="app-container">
<HeaderBar title="完善信息" text-align="center" enable-back />
<view class="form-box">
<!-- 车辆选择 -->
<view class="form-item" @click="openCarList">
<view class="label">车辆</view>
<view class="input">
<template v-if="form.carId">
<view class="car-info">
<view class="name-phone">
<text class="name">{{ form.createName }}</text>
<text class="phone">{{ form.createMobile }}</text>
</view>
<view class="car-no">
<text class="no">{{ form.carNo }}</text>
</view>
</view>
</template>
<template v-else>
<view class="add-placeholder">
<view class="add-content">
<u-icon name="plus" size="40" color="#2979ff"></u-icon>
<text class="add-text">请选择车辆</text>
</view>
</view>
</template>
</view>
</view>
</view>
<button class="submit-btn" @click="submitForm">确认修改</button>
</view>
</template>
<script>
import HeaderBar from '@/components/HeaderBar.vue'
import ImageUpload from '@/components/image-upload/image-upload.vue'
import { appGetTaskDetail, appUpdateTask } from '@/api/app/task'
export default {
name: 'TaskMore',
components: {
HeaderBar,
ImageUpload
},
data() {
return {
taskId: null,
taskTypeList: ['急修', '拖车'],
typeIndex: 0,
form: {
type: "1",
video: '',
createAddressId: '',
createName: '',
createMobile: '',
remark: '',
carId: null,
carNo: null,
createAddress: ''
}
}
},
onLoad(options) {
if (options.id) {
this.taskId = options.id
this.getTaskDetail()
}
},
methods: {
getTaskDetail() {
appGetTaskDetail(this.taskId).then(res => {
if (res.code === 200 && res.data) {
this.form = res.data;
}
})
},
openCarList() {
uni.navigateTo({
url: '/pages/car/index'
})
},
submitForm() {
if (!this.form.carId) {
this.$modal.msgError('请选择车辆')
return
}
this.$modal.loading("提交中")
appUpdateTask(this.form).then(res => {
if (res.code === 200) {
this.$modal.msgSuccess('修改成功')
setTimeout(() => {
uni.navigateBack()
}, 500)
}
})
}
}
}
</script>
<style lang="scss" scoped>
.app-container {
padding-bottom: 180rpx;
}
.form-box {
background: #fff;
border-radius: 20rpx;
padding: 30rpx 20rpx;
margin: 30rpx 20rpx;
}
.form-item {
margin-bottom: 30rpx;
.label {
font-size: 28rpx;
color: #333;
margin-bottom: 10rpx;
.required { color: #f56c6c; font-size: 22rpx; }
.optional { color: #999; font-size: 22rpx; }
}
.input {
background: #f7f8fa;
border-radius: 10rpx;
padding: 20rpx;
font-size: 28rpx;
color: #666;
.car-info {
.name-phone {
margin-bottom: 10rpx;
.name {
font-size: 32rpx;
color: #333;
margin-right: 20rpx;
}
.phone {
font-size: 28rpx;
color: #666;
}
}
.address {
font-size: 28rpx;
color: #666;
margin-bottom: 10rpx;
}
.car-no {
font-size: 28rpx;
color: #666;
.no {
color: #2979ff;
}
}
}
.add-placeholder {
background: #ffffff71;
border: 2rpx dashed #fff;
border-radius: 10rpx;
padding: 40rpx;
text-align: center;
.add-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 10rpx;
.add-text {
font-size: 28rpx;
color: #2979ff;
}
}
}
}
.textarea {
width: 100%;
min-height: 120rpx;
background: #f7f8fa;
border-radius: 10rpx;
padding: 20rpx;
font-size: 28rpx;
color: #666;
resize: none;
border: none;
}
.count {
text-align: right;
color: #bbb;
font-size: 22rpx;
}
}
.submit-btn {
width: 90%;
margin: 40rpx auto 0;
display: block;
background: #2979ff;
color: #fff;
border-radius: 50rpx;
font-size: 32rpx;
height: 90rpx;
line-height: 90rpx;
text-align: center;
border: none;
}
</style>