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.
201 lines
6.0 KiB
201 lines
6.0 KiB
<template>
|
|
<view class="content">
|
|
|
|
<view class="cr mt40">
|
|
|
|
<view class="re-card-p32">
|
|
<view class="flex-sb m10">
|
|
<view class="re-from-label">车辆类型</view>
|
|
<picker class="flex re-from-label" style="color: #9E9E9E;" :range="types" @change="typeSelect(car, $event)">
|
|
<span v-if="!car.type">请选择</span>
|
|
<view style="color: #0d0d0d;" v-if="car.type">{{ car.type }}</view>
|
|
<uni-icons v-if="!car.type" type="down" size="28rpx" color="#9E9E9E"></uni-icons>
|
|
</picker>
|
|
</view>
|
|
<view class="flex-sb">
|
|
<view class="re-from-label">设备轴数</view>
|
|
<picker class="flex re-from-label" style="color: #9E9E9E;" :range="mis" @change="miSelect(car, $event)">
|
|
<span v-if="!car.mi">请选择</span>
|
|
<view style="color: #0d0d0d;" v-if="car.mi">{{ car.mi }}</view>
|
|
<uni-icons v-if="!car.mi" type="down" size="28rpx" color="#9E9E9E"></uni-icons>
|
|
</picker>
|
|
</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/car1.png')">查看示例</view>
|
|
</view>
|
|
<input-image @success="(url) => car.carimage = url" :height="456"/>
|
|
<view class="re-card-context">
|
|
请在<span>支腿收起状态下，在左前方45度角</span>进行拍摄
|
|
</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/car2.png')">查看示例</view>
|
|
</view>
|
|
<input-image @success="(url) => car.xszaimage = url" :height="342"/>
|
|
<input-image @success="(url) => car.xszbimage = url" :height="342"/>
|
|
<view class="re-card-context">
|
|
<p>中华人民共和国机动车<span>行驶证</span>正反面</p>
|
|
<p>拍摄时确保行驶证<span>边框完整，字迹清晰，亮度均匀，无遮挡涂鸦。</span></p>
|
|
</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/car4.png')">查看示例</view>
|
|
</view>
|
|
<input-image @success="(url) => car.jqximage = url" :height="800"/>
|
|
<view class="re-card-context">
|
|
<p>您需要提供有效期内<span>《机动车交通事故责任强制保险单》</span>的纸质保单正面或电子保单截图。</p>
|
|
<p>上传时需确保截图内包含<span>车牌号、车架号、以及有效期</span>等关键信息</p>
|
|
</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/car5.png')">查看示例</view>
|
|
</view>
|
|
<input-image @success="(url) => car.syximage = url" :height="800"/>
|
|
<view class="re-card-context">
|
|
<p>您需要提供有效期内<span>《机动车商业保险保险单》</span>的纸质保单正面或电子保单截图。</p>
|
|
<p>上传时需确保截图内包含<span>车牌号、车架号、以及有效期</span>等关键信息</p>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="re-end-pand">
|
|
<button @click="clickSaveAndBack">上传保存</button>
|
|
</view>
|
|
|
|
<show-example ref="showe" :show="show" :url="url" @close="show=false"/>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import InputImage from "/components/input-image.vue"
|
|
import ShowExample from "/components/show-example.vue"
|
|
export default {
|
|
components: {
|
|
InputImage,
|
|
ShowExample
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
url: "",
|
|
idx: "",
|
|
car: {
|
|
carimage:"",
|
|
xszaimage:"",
|
|
xszbimage:"",
|
|
jqximage:"",
|
|
syximage:""
|
|
},
|
|
mis: [],
|
|
mia: [{mi: '43米', price: '1.2'}],
|
|
types: ['泵车','搅拌车'],
|
|
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.loadmi()
|
|
},
|
|
methods: {
|
|
loadmi(){
|
|
this.mis = []
|
|
this.$httpGet("/api/mis", {}, (res) => {
|
|
if(res.data){
|
|
this.mia = this.$utils.toArray(res.data)
|
|
this.mia.forEach(ele => {
|
|
this.mis.push(ele.mi)
|
|
})
|
|
}
|
|
})
|
|
},
|
|
miSelect(car, event){
|
|
car.mi = this.mis[event.detail.value]
|
|
},
|
|
typeSelect(car, event){
|
|
car.type = this.types[event.detail.value]
|
|
},
|
|
clickShowExample(url){
|
|
if(url){
|
|
this.url = url
|
|
} else {
|
|
this.url = "https://relief.oss-cn-hangzhou.aliyuncs.com/yx.jpg"
|
|
}
|
|
this.show = true
|
|
},
|
|
clickSaveAndBack(){
|
|
if(!this.car.carimage){
|
|
uni.showToast({ icon: "none", title: "车辆照片缺失" })
|
|
return
|
|
}
|
|
if(!this.car.xszaimage || !this.car.xszbimage){
|
|
uni.showToast({ icon: "none", title: "行驶证照片缺失" })
|
|
return
|
|
}
|
|
if(!this.car.jqximage){
|
|
uni.showToast({ icon: "none", title: "交强险照片缺失" })
|
|
return
|
|
}
|
|
if(!this.car.syximage){
|
|
uni.showToast({ icon: "none", title: "商业险照片缺失" })
|
|
return
|
|
}
|
|
this.clickSubmit()
|
|
},
|
|
clickSubmit(){
|
|
let car = this.car
|
|
car.id = this.$utils.generateUUID()
|
|
car.enterId = uni.getStorageSync("enter_id")
|
|
car.status = 0
|
|
car.mi = "2轴泵车"
|
|
car.type = "泵车"
|
|
car.area = uni.getStorageSync("area")
|
|
this.$httpPost("/api/register/car", car, (resp) => {
|
|
uni.showToast({
|
|
icon:'none', title:"保存成功"
|
|
})
|
|
uni.navigateBack({ delta: 1 })
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
</style>
|