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.
383 lines
9.2 KiB
383 lines
9.2 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/one19.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="(data) => form.timingEnd = 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/one17.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="(data) => form.materialCleaning = 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/one19.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="(data) => form.vehicleBody = 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/one01.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="(data) => form.dashboard = data.ossUrl"
|
|
/>
|
|
<view class="re-card-context">
|
|
需拍摄<label>仪表盘</label>照片，<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/one16.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="(data) => form.signedOrder = data.ossUrl"
|
|
/>
|
|
<view class="re-card-context">
|
|
需拍摄<label>签单</label>照片，尽量保证<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/one16.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="(data) => form.supplementTicket = 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/one18.png')">查看示例</view>
|
|
</view>
|
|
<input-image
|
|
:height="456"
|
|
@uploadSuccess="(data) => form.vehicleHandover = 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: 'UserStep2',
|
|
components: {
|
|
navbar,
|
|
InputImage,
|
|
ShowExample
|
|
},
|
|
data() {
|
|
return {
|
|
orderId: '',
|
|
showExample: false,
|
|
exampleUrl: '',
|
|
form: {
|
|
timingEnd: '', // 计时结束照片
|
|
materialCleaning: '', // 抖料清洗照片
|
|
vehicleBody: '', // 车身照片
|
|
dashboard: '', // 仪表盘照片
|
|
signedOrder: '', // 签单照片
|
|
supplementTicket: '', // 补方小票照片
|
|
vehicleHandover: '', // 车辆入库交车照片
|
|
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 = [
|
|
'timingEnd', 'materialCleaning', 'vehicleBody', 'dashboard',
|
|
'signedOrder', 'supplementTicket', 'vehicleHandover'
|
|
];
|
|
|
|
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: 2,
|
|
step: 3,
|
|
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>
|