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.
486 lines
13 KiB
486 lines
13 KiB
<template>
|
|
<view>
|
|
<navbar title="进度详情" leftClick @leftClick="$utils.navigateBack" />
|
|
|
|
<!-- 步骤切换头部 -->
|
|
<view class="head flex-sb">
|
|
<view class="items">
|
|
<view class="item-tab flex">
|
|
<view @click="clickTabOne">施工前</view>
|
|
<view @click="clickTabTwo">施工中</view>
|
|
<view @click="clickTabThr">施工后</view>
|
|
</view>
|
|
<view class="item-active" :style="{ '--step': step + 'rpx' }"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 内容区域 -->
|
|
<view class="content">
|
|
<!-- 施工前 -->
|
|
<view v-if="status === 1" class="cr mt40">
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">仪表盘照片</view>
|
|
</view>
|
|
<image v-if="froma.a" :src="froma.a" mode="widthFix" class="step-image" />
|
|
<view v-else class="no-image">暂无图片</view>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">车身前后左右</view>
|
|
</view>
|
|
<image v-if="froma.b" :src="froma.b" mode="widthFix" class="step-image" />
|
|
<image v-if="froma.c" :src="froma.c" mode="widthFix" class="step-image" />
|
|
<image v-if="froma.d" :src="froma.d" mode="widthFix" class="step-image" />
|
|
<image v-if="froma.e" :src="froma.e" mode="widthFix" class="step-image" />
|
|
<view v-if="!froma.b && !froma.c && !froma.d && !froma.e" class="no-image">暂无图片</view>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">当前工作环境</view>
|
|
</view>
|
|
<image v-if="froma.f" :src="froma.f" mode="widthFix" class="step-image" />
|
|
<view v-else class="no-image">暂无图片</view>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">水槽照片</view>
|
|
</view>
|
|
<image v-if="froma.g" :src="froma.g" mode="widthFix" class="step-image" />
|
|
<view v-else class="no-image">暂无图片</view>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">现场视频</view>
|
|
</view>
|
|
<video v-if="froma.h" :src="froma.h" class="step-video" controls />
|
|
<view v-else class="no-image">暂无视频</view>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="re-from-label">备注</view>
|
|
<textarea
|
|
class="re-card-textarea"
|
|
placeholder=" 请在此处备注您的疑问或者特殊情况。"
|
|
v-model="froma.remark"
|
|
readonly
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 施工中 -->
|
|
<view v-if="status === 2" class="cr mt40">
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">当前工作环境</view>
|
|
</view>
|
|
<image v-if="fromb.a" :src="fromb.a" mode="widthFix" class="step-image" />
|
|
<view v-else class="no-image">暂无图片</view>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">支腿照片</view>
|
|
</view>
|
|
<image v-if="fromb.b" :src="fromb.b" mode="widthFix" class="step-image" />
|
|
<image v-if="fromb.c" :src="fromb.c" mode="widthFix" class="step-image" />
|
|
<image v-if="fromb.d" :src="fromb.d" mode="widthFix" class="step-image" />
|
|
<image v-if="fromb.e" :src="fromb.e" mode="widthFix" class="step-image" />
|
|
<view v-if="!fromb.b && !fromb.c && !fromb.d && !fromb.e" class="no-image">暂无图片</view>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">水槽照片</view>
|
|
</view>
|
|
<image v-if="fromb.f" :src="fromb.f" mode="widthFix" class="step-image" />
|
|
<view v-else class="no-image">暂无图片</view>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">冷却箱</view>
|
|
</view>
|
|
<image v-if="fromb.g" :src="fromb.g" mode="widthFix" class="step-image" />
|
|
<view v-else class="no-image">暂无图片</view>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">计时开始照片</view>
|
|
</view>
|
|
<image v-if="fromb.h" :src="fromb.h" mode="widthFix" class="step-image" />
|
|
<view v-else class="no-image">暂无图片</view>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="re-from-label">备注</view>
|
|
<textarea
|
|
class="re-card-textarea"
|
|
placeholder=" 请在此处备注您的疑问或者特殊情况。"
|
|
v-model="fromb.remark"
|
|
readonly
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 施工后 -->
|
|
<view v-if="status === 3" class="cr mt40">
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">计时结束照片</view>
|
|
</view>
|
|
<image v-if="fromc.a" :src="fromc.a" mode="widthFix" class="step-image" />
|
|
<view v-else class="no-image">暂无图片</view>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">抖料清洗照片</view>
|
|
</view>
|
|
<image v-if="fromc.b" :src="fromc.b" mode="widthFix" class="step-image" />
|
|
<view v-else class="no-image">暂无图片</view>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">车身照片</view>
|
|
</view>
|
|
<image v-if="fromc.c" :src="fromc.c" mode="widthFix" class="step-image" />
|
|
<view v-else class="no-image">暂无图片</view>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">仪表盘照片</view>
|
|
</view>
|
|
<image v-if="fromc.d" :src="fromc.d" mode="widthFix" class="step-image" />
|
|
<view v-else class="no-image">暂无图片</view>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">补方小票照片</view>
|
|
</view>
|
|
<image v-if="fromc.e" :src="fromc.e" mode="widthFix" class="step-image" />
|
|
<view v-else class="no-image">暂无图片</view>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">车辆入库交车照片</view>
|
|
</view>
|
|
<image v-if="fromc.f" :src="fromc.f" mode="widthFix" class="step-image" />
|
|
<view v-else class="no-image">暂无图片</view>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="re-from-label">备注</view>
|
|
<textarea
|
|
class="re-card-textarea"
|
|
placeholder=" 请在此处备注您的疑问或者特殊情况。"
|
|
v-model="fromc.remark"
|
|
readonly
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navbar from '@/components/base/navbar.vue'
|
|
|
|
export default {
|
|
name: 'UserSteps',
|
|
components: {
|
|
navbar
|
|
},
|
|
data() {
|
|
return {
|
|
orderId: '',
|
|
step: 8, // 步骤指示器位置
|
|
status: 1, // 当前状态：1-施工前，2-施工中，3-施工后
|
|
// 施工前数据
|
|
froma: {
|
|
a: '', // 仪表盘照片
|
|
b: '', // 车身前
|
|
c: '', // 车身后
|
|
d: '', // 车身左
|
|
e: '', // 车身右
|
|
f: '', // 当前工作环境
|
|
g: '', // 水槽照片
|
|
h: '', // 现场视频
|
|
remark: '' // 备注
|
|
},
|
|
// 施工中数据
|
|
fromb: {
|
|
a: '', // 当前工作环境
|
|
b: '', // 支腿前
|
|
c: '', // 支腿后
|
|
d: '', // 支腿左
|
|
e: '', // 支腿右
|
|
f: '', // 水槽照片
|
|
g: '', // 冷却箱
|
|
h: '', // 计时开始照片
|
|
remark: '' // 备注
|
|
},
|
|
// 施工后数据
|
|
fromc: {
|
|
a: '', // 计时结束照片
|
|
b: '', // 抖料清洗照片
|
|
c: '', // 车身照片
|
|
d: '', // 仪表盘照片
|
|
e: '', // 补方小票照片
|
|
f: '', // 车辆入库交车照片
|
|
remark: '' // 备注
|
|
}
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.id) {
|
|
this.orderId = options.id;
|
|
}
|
|
},
|
|
onShow() {
|
|
this.clickTabOne();
|
|
},
|
|
methods: {
|
|
// 点击施工前标签
|
|
clickTabOne() {
|
|
this.step = 8;
|
|
this.status = 1;
|
|
this.loadList();
|
|
},
|
|
|
|
// 点击施工中标签
|
|
clickTabTwo() {
|
|
this.step = 221;
|
|
this.status = 2;
|
|
this.loadList();
|
|
},
|
|
|
|
// 点击施工后标签
|
|
clickTabThr() {
|
|
this.step = 432;
|
|
this.status = 3;
|
|
this.loadList();
|
|
},
|
|
|
|
// 加载数据
|
|
loadList() {
|
|
// 模拟加载数据
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
});
|
|
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
|
|
// 模拟数据
|
|
if (this.status === 1) {
|
|
this.froma = {
|
|
a: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one01.png',
|
|
b: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one02.png',
|
|
c: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one03.png',
|
|
d: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one04.png',
|
|
e: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one05.png',
|
|
f: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one06.png',
|
|
g: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one07.png',
|
|
h: '',
|
|
remark: '施工前检查完成，设备状态良好。'
|
|
};
|
|
} else if (this.status === 2) {
|
|
this.fromb = {
|
|
a: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one08.png',
|
|
b: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one11.png',
|
|
c: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one12.png',
|
|
d: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one13.png',
|
|
e: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one14.png',
|
|
f: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one05.png',
|
|
g: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one07.png',
|
|
h: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one15.png',
|
|
remark: '施工中，设备运行正常。'
|
|
};
|
|
} else if (this.status === 3) {
|
|
this.fromc = {
|
|
a: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one19.png',
|
|
b: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one17.png',
|
|
c: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one19.png',
|
|
d: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one01.png',
|
|
e: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one16.png',
|
|
f: 'https://relief.oss-cn-hangzhou.aliyuncs.com/one18.png',
|
|
remark: '施工完成，设备清洗完毕，交车状态良好。'
|
|
};
|
|
}
|
|
}, 1000);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
page {
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
.content {
|
|
min-height: 100vh;
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
.cr {
|
|
min-height: calc(88vh);
|
|
}
|
|
|
|
.mt40 {
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
// 头部样式
|
|
.head {
|
|
height: 68rpx;
|
|
padding: 10rpx 40rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.items {
|
|
width: 687rpx;
|
|
height: 52rpx;
|
|
padding: 8rpx 8rpx;
|
|
border-radius: 34rpx;
|
|
background-color: #f2f4f9;
|
|
position: relative;
|
|
}
|
|
|
|
.item-tab {
|
|
line-height: 52rpx;
|
|
background-color: transparent;
|
|
|
|
view {
|
|
width: 33%;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
font-weight: normal;
|
|
letter-spacing: -0.16px;
|
|
color: #152748;
|
|
background-color: transparent;
|
|
z-index: 1;
|
|
position: relative;
|
|
transition: color 0.3s;
|
|
|
|
&:active {
|
|
color: #007AFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-active {
|
|
width: 229rpx;
|
|
height: 52rpx;
|
|
border-radius: 26rpx;
|
|
background-color: #ffffff;
|
|
position: absolute;
|
|
left: var(--step);
|
|
top: 8rpx;
|
|
transition: .3s ease-in;
|
|
z-index: 0;
|
|
}
|
|
|
|
// 弹性布局
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-sb {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
// 卡片样式
|
|
.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);
|
|
}
|
|
|
|
// 标签样式
|
|
.re-from-label {
|
|
font-size: 28rpx;
|
|
font-weight: normal;
|
|
letter-spacing: 0px;
|
|
color: #1c1c1c;
|
|
}
|
|
|
|
// 图片样式
|
|
.step-image {
|
|
width: 100%;
|
|
max-width: 626rpx;
|
|
border-radius: 16rpx;
|
|
margin: 15rpx auto;
|
|
display: block;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
// 视频样式
|
|
.step-video {
|
|
width: 100%;
|
|
max-width: 626rpx;
|
|
height: 342rpx;
|
|
border-radius: 16rpx;
|
|
margin: 15rpx auto;
|
|
display: block;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
// 无图片提示
|
|
.no-image {
|
|
width: 100%;
|
|
height: 200rpx;
|
|
line-height: 200rpx;
|
|
text-align: center;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
background-color: #f8f9fa;
|
|
border: 2rpx dashed #ddd;
|
|
border-radius: 16rpx;
|
|
margin: 15rpx auto;
|
|
}
|
|
|
|
// 文本域样式
|
|
.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;
|
|
}
|
|
|
|
&[readonly] {
|
|
background-color: #f5f5f5;
|
|
color: #666;
|
|
}
|
|
}
|
|
</style>
|