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.
318 lines
7.0 KiB
318 lines
7.0 KiB
<template>
|
|
|
|
<view>
|
|
|
|
<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 class="cr mt40" v-if="status===1">
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">仪表盘照片</view>
|
|
</view>
|
|
<image :src="froma.a" height="456"></image>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">车身前后左右</view>
|
|
</view>
|
|
<image :url="froma.b" height="456"/>
|
|
<image :url="froma.c" height="456"/>
|
|
<image :url="froma.d" height="456"/>
|
|
<image :url="froma.e" height="456"/>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">当前工作环境</view>
|
|
</view>
|
|
<image :url="froma.f" height="456"/>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">水槽照片</view>
|
|
</view>
|
|
<image :url="froma.g" height="456"/>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">水槽照片</view>
|
|
</view>
|
|
<image :url="froma.h" height="456"/>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">现场视频</view>
|
|
</view>
|
|
<video :url="froma.i" height="456"/>
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="re-from-label">备注</view>
|
|
<textarea v-model="froma.remark" class="re-card-textarea inpit" placeholder=" 请在此处备注您的疑问或者特殊情况。"/>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="cr mt40" v-if="status===2">
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">当前工作环境</view>
|
|
</view>
|
|
<image :src="fromb.a" />
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">支腿照片</view>
|
|
</view>
|
|
<image :src="fromb.b" />
|
|
<image :src="fromb.c" />
|
|
<image :src="fromb.d" />
|
|
<image :src="fromb.e" />
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">水槽照片</view>
|
|
</view>
|
|
<image :src="fromb.f" />
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">冷却箱</view>
|
|
</view>
|
|
<image :src="fromb.g" />
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">液压油位</view>
|
|
</view>
|
|
<image :src="fromb.h" />
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">计时开始照片</view>
|
|
</view>
|
|
<image :src="fromb.i" />
|
|
</view>
|
|
|
|
|
|
<view class="re-card-p32">
|
|
<view class="re-from-label">备注</view>
|
|
<textarea v-model="fromb.remark" class="re-card-textarea inpit" placeholder=" 请在此处备注您的疑问或者特殊情况。"/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cr mt40" v-if="status===3">
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">计时结束照片</view>
|
|
</view>
|
|
<image :src="fromc.a" />
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">抖料清洗照片</view>
|
|
</view>
|
|
<image :src="fromc.b" />
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">车身照片</view>
|
|
</view>
|
|
<image :src="fromc.c" />
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">仪表盘照片</view>
|
|
</view>
|
|
<image :src="fromc.d" />
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">签单照片</view>
|
|
</view>
|
|
<image :src="fromc.e" />
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">补方小票照片</view>
|
|
</view>
|
|
<image :src="fromc.f" />
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">车辆入库交车照片</view>
|
|
</view>
|
|
<image :src="fromc.g" />
|
|
</view>
|
|
|
|
<view class="re-card-p32">
|
|
<view class="re-from-label">备注</view>
|
|
<textarea v-model="fromc.remark" class="re-card-textarea inpit" placeholder=" 请在此处备注您的疑问或者特殊情况。"/>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
url: "",
|
|
orderId: "",
|
|
step: 8,
|
|
status: 0,
|
|
froma: {
|
|
a:"",
|
|
remark: ""
|
|
},
|
|
fromb: {
|
|
a:"",
|
|
remark: ""
|
|
},
|
|
fromc: {
|
|
a:"",
|
|
remark: ""
|
|
},
|
|
}
|
|
},
|
|
onLoad(opn) {
|
|
this.orderId = opn.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(){
|
|
const _this = this;
|
|
const params = {orderId: this.orderId, step: this.status}
|
|
this.$httpGet("/api/order/get/step", params, function(res) {
|
|
if(res.data){
|
|
if(_this.status===1){
|
|
_this.froma = res.data
|
|
} else if(_this.status===2){
|
|
_this.fromb = res.data
|
|
} else if(_this.status===3){
|
|
_this.fromc = res.data
|
|
}
|
|
}
|
|
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
.cr {
|
|
min-height: calc(88vh);
|
|
}
|
|
|
|
/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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.item-tab view{
|
|
width: 33%;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
letter-spacing: -0.16px;
|
|
color: #152748;
|
|
background-color: transparent;
|
|
z-index: 1;
|
|
}
|
|
.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;
|
|
}
|
|
</style>
|