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.
415 lines
10 KiB
415 lines
10 KiB
<template>
|
|
<view class="content">
|
|
<navbar title="施工确认" leftClick @leftClick="$utils.navigateBack" />
|
|
<view class="cr mt40">
|
|
<!-- 当前工作环境 -->
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">请拍摄当前工作环境</view>
|
|
<view class="re-card-show" @click="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one07.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="(data) => form.workEnvironment = data.ossUrl"
|
|
/>
|
|
<view class="re-card-context">
|
|
需拍摄<label>车辆四周</label>照片，以保证场地满足施工。
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 支腿前方照片 -->
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">请拍摄支腿前方照片</view>
|
|
<view class="re-card-show" @click="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one11.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="(data) => form.frontLeg = data.ossUrl"
|
|
/>
|
|
<view class="re-card-context">
|
|
需拍摄<label>车辆支腿前方</label>照片，以保证车辆交车状况。
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 支腿后方照片 -->
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">请拍摄支腿后方照片</view>
|
|
<view class="re-card-show" @click="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one12.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="(data) => form.backLeg = data.ossUrl"
|
|
/>
|
|
<view class="re-card-context">
|
|
需拍摄<label>车辆支腿后方</label>照片，以保证车辆交车状况。
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 支腿左侧方照片 -->
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">请拍摄支腿左侧方照片</view>
|
|
<view class="re-card-show" @click="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one13.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="(data) => form.leftLeg = data.ossUrl"
|
|
/>
|
|
<view class="re-card-context">
|
|
需拍摄<label>车辆支腿左侧方</label>照片，以保证车辆交车状况。
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 支腿右侧方照片 -->
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">请拍摄支腿右侧方照片</view>
|
|
<view class="re-card-show" @click="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one14.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="(data) => form.rightLeg = data.ossUrl"
|
|
/>
|
|
<view class="re-card-context">
|
|
需拍摄<label>车辆支腿右侧方</label>照片，以保证车辆交车状况。
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 水槽照片 -->
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">请拍摄水槽照片</view>
|
|
<view class="re-card-show" @click="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one05.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="(data) => form.waterTank = data.ossUrl"
|
|
/>
|
|
<view class="re-card-context">
|
|
需拍摄<label>车辆油箱、水箱</label>照片，以保证车辆安全状况。
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 冷却箱 -->
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">请拍摄冷却箱</view>
|
|
<view class="re-card-show" @click="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one07.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="(data) => form.coolingBox = data.ossUrl"
|
|
/>
|
|
<view class="re-card-context">
|
|
需拍摄<label>车辆冷却箱</label>照片，以保证车辆安全状况。
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 液压油位 -->
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">请拍摄液压油位</view>
|
|
<view class="re-card-show" @click="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one06.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="(data) => form.hydraulicOil = data.ossUrl"
|
|
/>
|
|
<view class="re-card-context">
|
|
需拍摄<label>车辆液压油位</label>照片，以保证车辆安全状况。
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 计时开始照片 -->
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">请拍摄计时开始照片</view>
|
|
<view class="re-card-show" @click="clickShowExample('https://relief.oss-cn-hangzhou.aliyuncs.com/one15.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="(data) => form.timingStart = data.ossUrl"
|
|
/>
|
|
<view class="re-card-context">
|
|
需拍摄<label>开始计时的照片</label>以保证您的利益。
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 备注 -->
|
|
<view class="re-card-p32">
|
|
<view class="re-from-label">备注<label>（选填）</label></view>
|
|
<textarea
|
|
class="re-card-textarea"
|
|
placeholder=" 如在施工过程中发现问题，请用文字描述。"
|
|
v-model="form.remark"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部提交按钮 -->
|
|
<view class="re-end-pand">
|
|
<button @click="submitForm">提交保存</button>
|
|
</view>
|
|
|
|
<!-- 示例弹窗 -->
|
|
<show-example
|
|
v-if="showExample"
|
|
:show="showExample"
|
|
:url="exampleUrl"
|
|
@close="showExample = 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: 'UserStep1',
|
|
components: {
|
|
navbar,
|
|
InputImage,
|
|
ShowExample
|
|
},
|
|
data() {
|
|
return {
|
|
orderId: '',
|
|
showExample: false,
|
|
exampleUrl: '',
|
|
form: {
|
|
workEnvironment: '', // 当前工作环境
|
|
frontLeg: '', // 支腿前方照片
|
|
backLeg: '', // 支腿后方照片
|
|
leftLeg: '', // 支腿左侧方照片
|
|
rightLeg: '', // 支腿右侧方照片
|
|
waterTank: '', // 水槽照片
|
|
coolingBox: '', // 冷却箱
|
|
hydraulicOil: '', // 液压油位
|
|
timingStart: '', // 计时开始照片
|
|
remark: '' // 备注
|
|
}
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.id) {
|
|
this.orderId = options.id;
|
|
}
|
|
},
|
|
methods: {
|
|
// 显示示例图片
|
|
clickShowExample(url) {
|
|
this.exampleUrl = url || 'https://relief.oss-cn-hangzhou.aliyuncs.com/yx.jpg';
|
|
this.showExample = true;
|
|
},
|
|
|
|
// 提交表单
|
|
submitForm() {
|
|
// 验证必填项
|
|
const requiredFields = [
|
|
'workEnvironment', 'frontLeg', 'backLeg', 'leftLeg',
|
|
'rightLeg', 'waterTank', 'coolingBox', 'hydraulicOil', 'timingStart'
|
|
];
|
|
|
|
for (let field of requiredFields) {
|
|
if (!this.form[field]) {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '请按照要求拍摄上传照片'
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
|
|
this.doSubmit();
|
|
},
|
|
|
|
// 执行提交
|
|
doSubmit() {
|
|
// 模拟提交数据
|
|
const submitData = {
|
|
id: this.$utils?.generateUUID() || Date.now().toString(),
|
|
status: 1,
|
|
step: 2,
|
|
orderId: this.orderId,
|
|
...this.form
|
|
};
|
|
|
|
console.log('提交数据:', submitData);
|
|
|
|
// 模拟API调用
|
|
uni.showLoading({
|
|
title: '提交中...'
|
|
});
|
|
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
icon: 'success',
|
|
title: '提交成功'
|
|
});
|
|
|
|
setTimeout(() => {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
}, 1500);
|
|
}, 1000);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
page {
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
.content {
|
|
min-height: 100vh;
|
|
background-color: #F5F5F5;
|
|
padding-bottom: 200rpx; // 为底部按钮留出空间
|
|
}
|
|
|
|
.cr {
|
|
min-height: calc(88vh);
|
|
}
|
|
|
|
.mt40 {
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
// 卡片样式
|
|
.re-card-p32 {
|
|
background-color: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
width: calc(690rpx - 64rpx);
|
|
min-height: 120rpx;
|
|
margin: 0 calc(50vw - 690rpx / 2);
|
|
margin-bottom: 30rpx;
|
|
padding: 32rpx;
|
|
position: relative;
|
|
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: 28rpx;
|
|
font-weight: normal;
|
|
letter-spacing: 0px;
|
|
color: #1c1c1c;
|
|
}
|
|
|
|
// 查看示例按钮
|
|
.re-card-show {
|
|
color: #9E9E9E;
|
|
font-size: 24rpx;
|
|
font-weight: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0em;
|
|
padding: 8rpx 16rpx;
|
|
border: 1rpx solid #9E9E9E;
|
|
border-radius: 20rpx;
|
|
background-color: rgba(158, 158, 158, 0.1);
|
|
transition: all 0.3s;
|
|
|
|
&:active {
|
|
background-color: rgba(158, 158, 158, 0.2);
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
|
|
// 说明文字
|
|
.re-card-context {
|
|
font-size: 24rpx;
|
|
font-weight: normal;
|
|
line-height: 36rpx;
|
|
letter-spacing: 0em;
|
|
color: #9E9E9E;
|
|
margin-top: 16rpx;
|
|
|
|
label {
|
|
color: #F40000;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
// 文本域样式
|
|
.re-card-textarea {
|
|
width: 570rpx;
|
|
height: 152rpx;
|
|
border-radius: 8rpx;
|
|
padding: 20rpx;
|
|
background: #EEEEEE;
|
|
font-size: 26rpx;
|
|
line-height: normal;
|
|
letter-spacing: 0em;
|
|
color: #0d0d0d;
|
|
border: none;
|
|
box-sizing: border-box;
|
|
resize: none;
|
|
|
|
&::placeholder {
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
// 底部按钮区域
|
|
.re-end-pand {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100vw;
|
|
height: 88rpx;
|
|
opacity: 1;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
|
|
padding: 30rpx 0;
|
|
padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
|
|
z-index: 100;
|
|
|
|
button {
|
|
width: 620rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
border-radius: 10rpx;
|
|
background: #F40000;
|
|
color: #FFF;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
transition: all 0.2s ease-in-out;
|
|
border: none;
|
|
|
|
&:active {
|
|
transform: translateY(2rpx) translateX(1rpx);
|
|
background: #d63031;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 高亮文字
|
|
.highlight {
|
|
color: #F40000;
|
|
font-weight: 500;
|
|
}
|
|
|
|
// 可选标识
|
|
.optional {
|
|
color: #999;
|
|
font-weight: normal;
|
|
}
|
|
</style>
|