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.
439 lines
11 KiB
439 lines
11 KiB
<template>
|
|
<view class="page">
|
|
<!-- 导航栏 -->
|
|
<navbar title="接车确认" :leftClick="true" @leftClick="goBack" />
|
|
|
|
<view class="content">
|
|
<view class="cr mt40">
|
|
<!-- 仪表盘照片 -->
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">请拍摄仪表盘照片</view>
|
|
<view class="re-card-show" @tap="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one01.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="handleImageUpload('a', $event)"
|
|
/>
|
|
<view class="re-card-context">
|
|
请拍摄车辆启动后的仪表 确保柴油油位照片，<text class="highlight">机油压力水温和故障预警，照片清晰无倾斜</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 车身前方照片 -->
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">请拍摄车身前方照片</view>
|
|
<view class="re-card-show" @tap="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one02.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="handleImageUpload('b', $event)"
|
|
/>
|
|
<view class="re-card-context">
|
|
需拍摄<text class="highlight">车辆前方</text>照片，以保证车辆交车状况。
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 车身后方照片 -->
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">请拍摄车身后方照片</view>
|
|
<view class="re-card-show" @tap="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one08.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="handleImageUpload('c', $event)"
|
|
/>
|
|
<view class="re-card-context">
|
|
需拍摄<text class="highlight">车辆后方</text>照片，以保证车辆交车状况。
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 车身左侧方照片 -->
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">请拍摄车身左侧方照片</view>
|
|
<view class="re-card-show" @tap="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one04.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="handleImageUpload('d', $event)"
|
|
/>
|
|
<view class="re-card-context">
|
|
需拍摄<text class="highlight">车辆左侧方</text>照片，以保证车辆交车状况。
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 车身右侧方照片 -->
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">请拍摄车身右侧方照片</view>
|
|
<view class="re-card-show" @tap="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one03.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="handleImageUpload('e', $event)"
|
|
/>
|
|
<view class="re-card-context">
|
|
需拍摄<text class="highlight">车辆右侧方</text>照片，以保证车辆交车状况。
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 当前工作环境 -->
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">请拍摄当前工作环境</view>
|
|
<view class="re-card-show" @tap="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one07.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="handleImageUpload('f', $event)"
|
|
/>
|
|
<view class="re-card-context">
|
|
需拍摄<text class="highlight">车辆四周</text>照片，以保证平台任务相符。
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 水槽照片 -->
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">请拍摄水槽照片</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="handleImageUpload('g', $event)"
|
|
/>
|
|
<view class="re-card-context">
|
|
需拍摄<text class="highlight">车辆水槽</text>照片，以保证水位能满足车辆降温。
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 液压油位照片 -->
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">请拍摄液压油位照片</view>
|
|
<view class="re-card-show" @tap="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one06.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="handleImageUpload('h', $event)"
|
|
/>
|
|
<view class="re-card-context">
|
|
需拍摄<text class="highlight">车辆液压油位</text>照片，以保证油位满足正常施工。
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 备注 -->
|
|
<view class="re-card-p32">
|
|
<view class="re-from-label">备注<text class="optional">（选填）</text></view>
|
|
<textarea
|
|
class="re-card-textarea"
|
|
placeholder="如在施工过程中发现问题，请用文字描述。"
|
|
v-model="form.remark"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提交按钮 -->
|
|
<view class="re-end-pand">
|
|
<button @tap="clickSaveAndBack">提交保存</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 示例弹窗 -->
|
|
<show-example
|
|
:show="show"
|
|
:url="url"
|
|
@close="show = false"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navbar from '@/components/base/navbar.vue'
|
|
import inputImage from '@/components/base/input-image.vue'
|
|
import showExample from '@/components/base/show-example.vue'
|
|
|
|
export default {
|
|
name: 'UserStep0',
|
|
components: {
|
|
navbar,
|
|
inputImage,
|
|
showExample
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
url: '',
|
|
orderId: '',
|
|
form: {
|
|
a: '', // 仪表盘照片
|
|
b: '', // 车身前方照片
|
|
c: '', // 车身后方照片
|
|
d: '', // 车身左侧方照片
|
|
e: '', // 车身右侧方照片
|
|
f: '', // 当前工作环境
|
|
g: '', // 水槽照片
|
|
h: '', // 液压油位照片
|
|
i: '', // 预留字段
|
|
j: '', // 预留字段
|
|
k: '', // 预留字段
|
|
remark: '' // 备注
|
|
}
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.id) {
|
|
this.orderId = options.id
|
|
}
|
|
},
|
|
methods: {
|
|
// 返回上一页
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
|
|
// 显示示例图片
|
|
clickShowExample(url) {
|
|
if (url) {
|
|
this.url = url
|
|
} else {
|
|
this.url = 'https://relief.oss-cn-hangzhou.aliyuncs.com/yx.jpg'
|
|
}
|
|
this.show = true
|
|
},
|
|
|
|
// 处理图片上传成功
|
|
handleImageUpload(field, event) {
|
|
console.log('图片上传成功:', field, event)
|
|
// event 包含 { localPath, ossUrl }
|
|
if (event && event.ossUrl) {
|
|
this.form[field] = event.ossUrl
|
|
} else if (event && event.localPath) {
|
|
// 如果没有OSS地址，使用本地路径（开发模式）
|
|
this.form[field] = event.localPath
|
|
}
|
|
},
|
|
|
|
// 提交保存
|
|
clickSaveAndBack() {
|
|
// 验证必填字段
|
|
if (!this.form.a || !this.form.b || !this.form.c || !this.form.d ||
|
|
!this.form.e || !this.form.f || !this.form.g || !this.form.h) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '请按照要求拍摄上传照片'
|
|
})
|
|
return
|
|
}
|
|
this.doSubmit()
|
|
},
|
|
|
|
// 执行提交
|
|
doSubmit() {
|
|
// 模拟数据提交
|
|
const submitData = {
|
|
id: this.$utils?.generateUUID?.() || Date.now().toString(),
|
|
status: 1,
|
|
step: 1,
|
|
orderId: this.orderId,
|
|
...this.form
|
|
}
|
|
|
|
console.log('提交数据:', submitData)
|
|
|
|
// 模拟提交成功
|
|
uni.showToast({
|
|
icon: 'success',
|
|
title: '提交成功'
|
|
})
|
|
|
|
setTimeout(() => {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}, 1500)
|
|
|
|
// 实际项目中的API调用示例：
|
|
// this.$httpPost('/api/order/image', submitData, (res) => {
|
|
// console.log('[/order/image]', res)
|
|
// if (res.data && res.data > 0) {
|
|
// this.$httpPost('/api/order/status', submitData, (res2) => {
|
|
// console.log('[/order/status]', res2)
|
|
// if (res2.data) {
|
|
// uni.showToast({ icon: 'success', title: '提交成功' })
|
|
// setTimeout(() => {
|
|
// uni.navigateBack({ delta: 1 })
|
|
// }, 1500)
|
|
// }
|
|
// })
|
|
// } else {
|
|
// uni.showModal({
|
|
// title: '提交失败',
|
|
// content: `本次提交失败，您可以停留在本页面，稍后再次尝试提交，错误码[${res.data}]`
|
|
// })
|
|
// }
|
|
// })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page {
|
|
background-color: #F5F5F5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.content {
|
|
padding-bottom: 120rpx; // 为底部按钮留出空间
|
|
}
|
|
|
|
.cr {
|
|
min-height: calc(88vh);
|
|
}
|
|
|
|
.mt40 {
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
// 卡片样式
|
|
.re-card-p32 {
|
|
padding: 32rpx;
|
|
margin: 0 32rpx 32rpx 32rpx;
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
// 弹性布局
|
|
.flex-sb {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
// 标签样式
|
|
.re-from-label {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
line-height: 44rpx;
|
|
}
|
|
|
|
// 查看示例按钮
|
|
.re-card-show {
|
|
font-size: 26rpx;
|
|
color: #007AFF;
|
|
padding: 8rpx 16rpx;
|
|
border: 1rpx solid #007AFF;
|
|
border-radius: 20rpx;
|
|
background-color: rgba(0, 122, 255, 0.1);
|
|
}
|
|
|
|
// 说明文字
|
|
.re-card-context {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
line-height: 36rpx;
|
|
margin-top: 16rpx;
|
|
padding: 16rpx;
|
|
background-color: #f8f9fa;
|
|
border-radius: 8rpx;
|
|
border-left: 4rpx solid #007AFF;
|
|
}
|
|
|
|
// 高亮文字
|
|
.highlight {
|
|
color: #F40000;
|
|
font-weight: 500;
|
|
}
|
|
|
|
// 可选标识
|
|
.optional {
|
|
color: #999;
|
|
font-weight: normal;
|
|
}
|
|
|
|
// 文本域样式
|
|
.re-card-textarea {
|
|
width: 100%;
|
|
min-height: 120rpx;
|
|
padding: 20rpx;
|
|
border: 1rpx solid #e0e0e0;
|
|
border-radius: 8rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
background-color: #fafafa;
|
|
margin-top: 16rpx;
|
|
box-sizing: border-box;
|
|
resize: none;
|
|
|
|
&::placeholder {
|
|
color: #999;
|
|
}
|
|
|
|
&:focus {
|
|
border-color: #007AFF;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
// 底部按钮区域
|
|
.re-end-pand {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 24rpx 32rpx;
|
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
|
background-color: #fff;
|
|
border-top: 1rpx solid #e0e0e0;
|
|
z-index: 100;
|
|
|
|
button {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
border: none;
|
|
border-radius: 44rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: translateY(2rpx);
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.4);
|
|
}
|
|
|
|
&::after {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 单选框样式覆盖
|
|
/deep/ uni-radio .uni-radio-input {
|
|
background-color: #F40000 !important;
|
|
border-color: #F40000 !important;
|
|
}
|
|
|
|
/deep/ uni-radio .uni-radio-input:empty {
|
|
background-color: #ffffff !important;
|
|
border-color: #d1d1d1 !important;
|
|
}
|
|
|
|
// 车辆图标
|
|
.re-from-car {
|
|
width: 72rpx;
|
|
height: 60rpx;
|
|
margin: 0 16rpx -20rpx 0;
|
|
}
|
|
</style>
|