qiubinghui
/
zhywpt-sp
Seguir 1
Destacar 0
Fork 0
Código Incidencias 0 Peticiones pull 0 Lanzamientos 0 Wiki Actividad
Explorar el Código

车辆信息变更

修改样式逻辑
yangteng hace 1 mes
padre
925372283b
commit
6bba9a3b81
Se han modificado 1 ficheros con 168 adiciones y 80 borrados
Dividir vista Mostrar estadísticas de diff
  1. 168
    80
      subpackage/personal-center/vehicle-change/vehicle-change-cheliangmsg-write.vue

+ 168
- 80
subpackage/personal-center/vehicle-change/vehicle-change-cheliangmsg-write.vue Ver fichero

@@ -2,29 +2,13 @@
<view class="bg">
<view class="title_wrap"><text class="title">变更基本信息</text></view>
<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
<u-form-item label="旧车牌号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
<u-form-item label="车牌号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
borderBottom>
<u-input v-model="state.form.vehiclePlateColorStr" input-align='right'disabled/>
<u-input v-model="state.form.vehiclePlate" input-align='right'disabled/>
</u-form-item>
<u-form-item label="旧车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
<u-form-item label="车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
borderBottom>
<u-input v-model="state.form.vehiclePlateColorStr" input-align='right'disabled/>
</u-form-item>
<u-form-item label="新车牌号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
borderBottom>
<u-input v-model="state.form.vehiclePlateColorStr" input-align='right'disabled/>
</u-form-item>
<u-form-item label="新车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
borderBottom>
<u-input v-model="state.form.vehiclePlateColorStr" input-align='right'disabled/>
</u-form-item>
<u-form-item label="OBU卡号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
borderBottom>
<u-input v-model="state.form.customerName" inputAlign="right" disabled/>
</u-form-item>
<u-form-item label="ETC卡号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
borderBottom>
<u-input v-model="state.form.customerTel" inputAlign="right" disabled/>
<view class="showworld">{{getCodeName('VEHICLE_COLOR_TYPE',state.form.vehiclePlateColor)}}</view>
</u-form-item>
<view class="picture-wrapper" @click="takePhotoMode('3')">
<view class="bg1">
@@ -62,60 +46,7 @@
</u-form>
</view>
<view class="bg">
<view class="title"> 经办人信息 </view>
<view class="picture-wrapper" @click="takePhotoMode('1',false)">
<view class="bg1">
<view class="">
<view class="name"> 经办人身份证人像面 </view>
<view class="value"> 上传身份证的人像面 </view>
<view class="tip">
<view class="tip-value"> 拍摄规范 </view>
</view>
</view>
<image v-if="!state.form.userImagesUrl1" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
</image>
<image v-else class="icon" :src="strReplace(state.form.userImagesUrl1)"
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
</view>
</view>
<view class="picture-wrapper" @click="takePhotoMode('2',false)">
<view class="bg1">
<view class="">
<view class="name"> 经办人身份证国徽面 </view>
<view class="value"> 上传身份证的国徽面 </view>
<view class="tip">
<view class="tip-value"> 拍摄规范 </view>
</view>
</view>
<image v-if="!state.form.userImagesUrl2" class="icon" :src="`${$imgUrl}issuance/sff.png`"
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
</image>
<image v-else class="icon" :src="strReplace(state.form.userImagesUrl2)"
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
</view>
</view>
<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
<u-form-item label="经办人姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
<u-input v-model="state.form.name" placeholder='经办人姓名'
maxlength="20" inputAlign="right"/>
</u-form-item>
<u-form-item label="经办人证件类型" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
<u-input placeholder='请输入证件号码' type="idcard" v-model="state.form.customerIdNum1"
maxlength="18" inputAlign="right"/>
</u-form-item>
<u-form-item label="经办人证号号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
<u-input placeholder='请输入证件号码' type="idcard" v-model="state.form.customerIdNum"
maxlength="18" inputAlign="right"/>
</u-form-item>
<u-form-item label="部门" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
<u-input placeholder='请输入部门' type="number" v-model="state.form.part"
maxlength="11" inputAlign="right"/>
</u-form-item>
</u-form>
</view>
<view class="bg">
<view class="title_wrap"><text class="title">车辆信息</text></view>
<view class="title_wrap"><text class="title">以下信息选择性修改/填写</text></view>
<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
<u-form-item label="车辆所有人信息" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
borderBottom>
@@ -230,7 +161,6 @@
<view class="tip">
<view class="tip-value"> 拍摄规范 </view>
</view>
<!-- <view class="down" @click="downAuthD">模板下载</view> -->
</view>
<image v-if="!state.form.vehBodyUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
@@ -240,6 +170,7 @@
</view>
</view>
</view>

<view class="bg">
<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
<u-form-item label="手机号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
@@ -263,16 +194,28 @@
</view>
<!-- 选择车牌颜色 -->
<u-select v-model="show1" :list="state.colorRange" @confirm="changeColor"></u-select>
<view class="choice-takePhoto-wrap" v-if="state.isTakePhotoModeShow" @click="cancle">
<view class="choice-takePhoto">
<view @click.stop="takePhoto(state.choiceIndex)" style="border-radius: 20rpx 20rpx 0 0;">拍照</view>
<view @click.stop="xiangce(state.choiceIndex)">从手机相册选择</view>
<view @click.stop="cancle">取消</view>
</view>
</view>
<viewfinder v-if="state.phoneType" :phoneType="state.phoneType" :images="state.images" :showStartPhoto="state.showImg"
@confirmReturn="confirmReturn" @camera="camera"></viewfinder>
</template>

<script setup lang="ts">
import { navTo,uploadFile,strReplace,msg} from "@/utils/utils";
import { navTo,uploadFile,strReplace,msg,checkStr,chooseImageCompress} from "@/utils/utils";
import { reactive,ref } from "vue";
import carNumberInput from "@/components/car-number-input/car-number-input.vue";
import { onLoad } from "@dcloudio/uni-app";
import { getItem } from "@/utils/storage.ts"
import {selfServiceView,selfServiceUserUpload,newMobileSmsCode} from "@/utils/network/api.js";
import {newMobileSmsCode,vehicleLicenseOcr} from "@/utils/network/api.js";
import {requestNew} from "@/utils/network/request.js";
import {
getCodeName
} from "@/datas/queryKey.js";
const labelStyle = {
color: "#004576",
fontSize: "28rpx",
@@ -311,7 +254,7 @@ import {requestNew} from "@/utils/network/request.js";
vin:"",
engineNum:"",
vehBodyUrl:"",
isVehiclePlateChange:"",//是否车牌变更 否_0,是_1
},
colorRange: [],
questionTypeRange:[
@@ -325,8 +268,15 @@ import {requestNew} from "@/utils/network/request.js";
isTakePhotoModeShow: false, //选择拍照方式是否出来
choiceIndex: 1, // 1 身份证正面 2 身份证反面
ownerInfo:false,//非本人 个人 车主信息true ==== 本人 个人 false
phoneType: 0, // 1 身份证正面 2 身份证反面 3行驶证正面 4行驶证反面
images: '',
showImg: true,
})
onLoad((option : any) => {
state.form.isVehiclePlateChange=option.isVehiclePlateChange
state.form.vehiclePlate=option.vehicleId.split("_")[0]
state.form.vehiclePlateColor=option.vehicleId.split("_")[1]
let getColor = getItem('key')['VEHICLE_COLOR_TYPE'];
for (var k = 0; k < getColor.length; k++) {
let obj = {};
@@ -422,6 +372,103 @@ import {requestNew} from "@/utils/network/request.js";
console.log(err);
});
}
const cancle = () => {
state.isTakePhotoModeShow = false
}
const takePhoto = (val) => {
console.log("拍照", val)
state.phoneType = val;
state.showImg = true;
}
const xiangce = (val) => {
console.log("val", val)
if (state.choiceIndex == 3) {
var imageType = 1;
} else {
var imageType = 2;
}
chooseImageCompress((res) => {
state.images = res.tempFilePath ? res.tempFilePath : res.tempFilePaths[0]
state.showImg = false
state.phoneType = state.choiceIndex
state.isTakePhotoModeShow = false
})
}
const confirmReturn = (val) => {
if (state.choiceIndex == 3) {
var imageType = 1;
} else {
var imageType = 2;
}
state.phoneType = 0
state.isTakePhotoModeShow = false
uploadFile(val.tempImagePath, imageType, vehicleLicenseOcr).then((data) => {
console.log('输出内容=====================', state.choiceIndex)
if (state.choiceIndex == "3") {
if (data.plate_a.length > 8) {
state.form.vehiclePlate = data.plate_a.substring(0, 8);
} else {
state.form.vehiclePlate = data.plate_a;
}
state.form.ownerName = data.man;
state.form.vehicleType = data.vehicle;
state.form.character = data.character;
state.form.vin = data.vin;
state.form.engineNum = data.engine;
state.form.registerDate = data.register;
state.form.issueDate = data.issue;
state.form.vehPosImgUrl = data.imageUrl;
state.form.vehicleModel = data.model;
console.log("走不是牵引车的", data.vehicle.indexOf('牵引车'), data.vehicle)
if (data.vehicle.indexOf('牵引车') > 0) {
console.log("是牵引车的")
qian()
} else {
console.log("走不是牵引车的")
notQian()
}
} else {
state.form.approvedCount = data.apc;
state.form.approvedCountShow = data.apc;
state.form.maintenaceMass = data.unladen;
state.form.maintenaceMassShow = data.unladen;
// 91接口差
// // #ifdef MP-WEIXIN
// state.form.vehicleDimensions = data.overall.replaceAll("×", "X");
// // #endif
// // #ifdef MP-ALIPAY
// state.form.vehicleDimensions = data.overall.replace(/×/g, "X");
// // #endif
// let arr = data.overall.split("×");
// #ifdef MP-WEIXIN
state.form.vehicleDimensions = data.overall.replaceAll("x", "X");
// #endif
// #ifdef MP-ALIPAY
state.form.vehicleDimensions = data.overall.replace(/x/g, "X");
// #endif
let arr = state.form.vehicleDimensions.split("X");
state.outlineL = arr[0]; //外廓 长
state.outlineW = arr[1]; //外廓 宽
state.outlineH = arr[2].substring(0, arr[2].length - 2); //外廓 高
state.form.totalMass = data.gross ? data.gross : 0;
state.form.totalMassShow = data.gross ? data.gross : 0;
console.log("state.form.totalMassShow", state.form.totalMassShow)
state.form.vehNegImgUrl = data.imageUrl;
state.form.permittedWeight = data.alc ? data.alc : 0;
state.form.permittedTowWeight = data.towing ? data.towing : 0;
console.log('=====================', state.form.vehNegImgUrl, state)
}
state.isTakePhotoModeShow = false
})
console.log("图片地址val", val.tempImagePath)
}
const camera = () => {
state.phoneType = 0
}
</script>

<style lang="scss" scoped>
@@ -489,7 +536,6 @@ import {requestNew} from "@/utils/network/request.js";
border-radius: 10rpx;
padding: 40rpx 30rpx;
display: flex;
// align-items: center;
justify-content: space-between;
.name {
@@ -549,5 +595,47 @@ import {requestNew} from "@/utils/network/request.js";
line-height: 60rpx;
margin-left: 20rpx;
}
.showworld{
display: flex;
justify-content: flex-end;
}
.choice-takePhoto-wrap {
width: 100%;
height: 100vh;
background-color: rgba(127, 127, 127, 0.2);
position: fixed;
left: 0;
top: 0;
z-index: 11111;
.choice-takePhoto {
position: absolute;
bottom: 0;
background-color: white;
width: 100%;
border-radius: 20rpx 20rpx 0 0;
}
.choice-takePhoto>view:first-child {
text-align: center;
height: 80rpx;
line-height: 80rpx;
border-bottom: 1rpx solid rgba(127, 127, 127, 0.3);
background-color: white;
}
.choice-takePhoto>view:last-child {
text-align: center;
height: 80rpx;
line-height: 80rpx;
border-top: 6rpx solid rgba(127, 127, 127, 0.1);
background-color: white;
}
.choice-takePhoto>view {
text-align: center;
height: 80rpx;
line-height: 80rpx;
background-color: white;
}
}
</style>

Escribir Vista previa
Cargando…
Cancelar
Guardar