@@ -1047,7 +1047,12 @@ | |||
"navigationBarTitleText": "设置-车辆信息-行驶证" | |||
} | |||
}, | |||
{ | |||
"path": "setting/car-information/car-create", | |||
"style": { | |||
"navigationBarTitleText": "设置-车辆信息-添加" | |||
} | |||
}, | |||
{ | |||
"path": "setting/car-information/car-change", | |||
"style": { |
@@ -19,7 +19,7 @@ | |||
<image v-else class="icon" :src="state.form.drivingPermitPos"></image> | |||
</view> | |||
</view> | |||
<view class="picture-wrapper" @click="cardImageOcr('2')"> | |||
<view class="picture-wrapper" @click="cardImageOcr('2')"> | |||
<view class="bg"> | |||
<view class=""> | |||
<view class="name"> 行驶证副页 </view> | |||
@@ -52,18 +52,18 @@ | |||
<view class=""> | |||
<u-form label-width="200" :model="state.form" ref="uForm"> | |||
<u-form-item label="车牌号"> | |||
<u-input inputAlign="right" v-model="state.form.vehicleId" /> | |||
<u-input inputAlign="right" v-model="state.form.vehicleId" disabled="true" /> | |||
</u-form-item> | |||
<u-form-item label="所有人"> | |||
<u-input inputAlign="right" v-model="state.form.man" /> | |||
<u-form-item label="车主姓名"> | |||
<u-input inputAlign="right" v-model="state.form.ownerName" /> | |||
</u-form-item> | |||
<u-form-item label="车辆类型"> | |||
<u-input inputAlign="right" v-model="state.form.vehicleType" /> | |||
</u-form-item> | |||
<u-form-item label="使用性质"> | |||
<u-input inputAlign="right" v-model="state.form.character" /> | |||
</u-form-item> | |||
<!-- <u-form-item label="使用性质"> | |||
<u-input inputAlign="right" v-model="state.form.useCharacter" /> | |||
</u-form-item> --> | |||
<u-form-item label="车辆识别代号"> | |||
<u-input inputAlign="right" v-model="state.form.vin" /> | |||
</u-form-item> | |||
@@ -72,7 +72,7 @@ | |||
</u-form-item> | |||
<u-form-item label="注册日期"> | |||
<u-input inputAlign="right" v-model="state.form.register" /> | |||
<u-input inputAlign="right" v-model="state.form.registerDate" /> | |||
</u-form-item> | |||
<u-form-item label="发证日期"> | |||
<u-input inputAlign="right" v-model="state.form.issueDate" /> | |||
@@ -89,10 +89,10 @@ | |||
<u-form-item label="总质量"> | |||
<u-input inputAlign="right" v-model="state.form.totalMass" /> | |||
</u-form-item> | |||
<u-form-item label="车辆用户类型"> | |||
<u-input @click="state.actionSheetShow = true" inputAlign="right" | |||
v-model="state.form.useUserTypeName" type="select" /> | |||
</u-form-item> | |||
<!-- <u-form-item label="车牌颜色"> | |||
<u-input inputAlign="right" | |||
v-model="state.showCaridCorlor" type="select" disabled="ture" /> | |||
</u-form-item> --> | |||
</u-form> | |||
</view> | |||
</view> | |||
@@ -118,11 +118,14 @@ | |||
import { | |||
pathToBase64 | |||
} from "@/utils/util/imageTool.js"; | |||
import { | |||
getItem | |||
} from "@/utils/storage.ts" | |||
import { | |||
etcCarCardInfoSubmit, | |||
etcCarOcrCard, | |||
fileUpload, | |||
changecarInfo, | |||
changeCarInfo, | |||
} from "@/utils/network/api.js"; | |||
import { | |||
request | |||
@@ -136,7 +139,12 @@ | |||
onShow | |||
} from "@dcloudio/uni-app"; | |||
let cacachCarid='' | |||
// 修改 | |||
const savaHandle = () => { | |||
state.form.vehicleId=cacachCarid | |||
var data = state.form; | |||
console.log(data, "##########"); | |||
const options = { | |||
@@ -145,20 +153,35 @@ | |||
method: "POST", | |||
showLoading: true, | |||
}; | |||
request(changecarInfo, options).then((res) => { | |||
request(changeCarInfo, options).then((res) => { | |||
const data = stringToJson(res.bizContent); | |||
console.log(data) | |||
uni.navigateTo({ | |||
// url: `/pages/applyCard/release-products?orderId=${state.orderId}`, | |||
}); | |||
if (data.info == '成功.') { | |||
uni.reLaunch({ | |||
url: "/personal-center/setting/car-information/car-manage" | |||
}) | |||
} | |||
}); | |||
}; | |||
const selectConfirm = (item: any) => { | |||
item.map((val, index) => { | |||
state.form.useUserType = val.value; | |||
state.form.useUserTypeName = val.label; | |||
}); | |||
// item.map((val, index) => { | |||
// state.form.useUserType = val.value; | |||
// state.form.useUserTypeName = val.label; | |||
// }); | |||
console.log(item); | |||
if (state.form.vehicleId) { | |||
state.showCaridCorlor=item[0].label | |||
state.carIdcorlorCode= item[0].value | |||
console.log(state.form); | |||
} else { | |||
uni.showToast({ | |||
title: '请先填写车牌号', | |||
icon: 'none' | |||
}) | |||
} | |||
}; | |||
const cardFileImageUpdate = () => { | |||
@@ -193,27 +216,51 @@ | |||
const state = reactive({ | |||
actionSheetShow: false, | |||
actionSheetList: [{ | |||
label: "普通车", | |||
label: "蓝色", | |||
value: 0, | |||
}, { | |||
label: "黄色", | |||
value: 1, | |||
}, | |||
{ | |||
label: "黑色", | |||
value: 2, | |||
}, | |||
{ | |||
label: "白色", | |||
value: 3, | |||
}, | |||
{ | |||
label: "渐变绿色", | |||
value: 4, | |||
}, | |||
{ | |||
label: "黄绿双拼色", | |||
value: 5, | |||
}, | |||
{ | |||
label: "蓝白渐变色", | |||
value: 6, | |||
}, | |||
{ | |||
label: "道路运输证经营范围仅有“货物专用运输(集装箱) ”的牵引车办理J类型集装箱", | |||
value: 24, | |||
label: "未确定", | |||
value: 9, | |||
}, | |||
{ | |||
label: "道路运输证经营范围不含“货物专用运输(集装箱)”的牵引车", | |||
value: 27, | |||
label: "绿色", | |||
value: 11, | |||
}, | |||
{ | |||
label: '道路运输证经营范围除“货物专用运输 (集装 箱)"外,还有“普通货运”等其他项目的牵引车办理J2类型集装箱', | |||
value: 28, | |||
label: "红色", | |||
value: 12, | |||
}, | |||
], | |||
showCaridCorlor: '', | |||
carIdcorlorCode:'', | |||
form: { | |||
openId: 'ef0bf3bc54df4b09ae6ee3ff1cbc6f9d', //用户标识. | |||
orderId: "", //订单ID | |||
man: "", //所有人 | |||
character: "", //使用性质 | |||
openId: getItem('openId'), //用户标识. | |||
// man: "", //所有人 | |||
// character: "", //使用性质 | |||
register: "", //注册日期 | |||
customerId: "", //用户编号 . | |||
vehicleId: "", //车牌编号 . | |||
@@ -262,7 +309,25 @@ | |||
isMyPeopple: true, | |||
}); | |||
onLoad((option: any) => { | |||
state.form.orderId = option.orderId; | |||
// state.form.orderId = option.orderId; | |||
console.log(JSON.parse(option.data),"RRRRRRRRRRRRRRRRRRR"); | |||
let data=JSON.parse(option.data) | |||
cacachCarid=data.vehicleId | |||
state.form.drivingPermitPos=data.drivingPermitPos | |||
state.form.drivingPermitNeg=data.drivingPermitNeg | |||
state.form.vehBodyUrl=data.vehBodyUrl | |||
state.form.vehicleId=data.vehiclePlate | |||
state.form.vehicleType=data.vehicleType | |||
// state.form.useCharacter=data.useCharacter | |||
state.form.vin=data.vin | |||
state.form.ownerName=data.ownerName | |||
state.form.engineNum=data.engineNum | |||
state.form.registerDate=data.registerDate | |||
state.form.issueDate=data.issueDate | |||
state.form.approvedCount=data.approvedCount | |||
state.form.maintenaceMass=data.maintenaceMass | |||
state.form.vehicleDimensions=data.vehicleDimensions | |||
state.form.totalMass=data.totalMass | |||
}); | |||
//orc接口调用 | |||
const cardImageOcr = (val: any) => { | |||
@@ -292,13 +357,13 @@ | |||
const data = stringToJson(res.bizContent); | |||
console.log(data); | |||
if (val === "1") { | |||
state.form.vehicleId = data.plate_a; | |||
state.form.man = data.man; | |||
// state.form.vehicleId = data.plate_a; | |||
state.form.ownerName = data.man; | |||
state.form.vehicleType = data.vehicle; | |||
state.form.character = data.character; | |||
// state.form.useCharacter = data.character; | |||
state.form.vin = data.vin; | |||
state.form.engineNum = data.engine; | |||
state.form.register = data.register; | |||
state.form.registerDate = data.register; | |||
state.form.issueDate = data.issue; | |||
state.form.drivingPermitPos = data.imageUrl; | |||
state.form.vehicleModel = data.model; |
@@ -0,0 +1,516 @@ | |||
<template> | |||
<view class="content"> | |||
<view class="item-tips"> | |||
<view class="title"> 上传后请核对识别信息 </view> | |||
<view class="tip"> 如有错误请及时手动修改 </view> | |||
</view> | |||
<view class="picture-wrapper" @click="cardImageOcr('1')"> | |||
<view class="bg"> | |||
<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.drivingPermitPos" class="icon" :src="`${$imgUrl}applyCard/car-zhu.png`"> | |||
</image> | |||
<image v-else class="icon" :src="state.form.drivingPermitPos"></image> | |||
</view> | |||
</view> | |||
<view class="picture-wrapper" @click="cardImageOcr('2')"> | |||
<view class="bg"> | |||
<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.drivingPermitNeg" class="icon" :src="`${$imgUrl}applyCard/car-fu.png`"> | |||
</image> | |||
<image v-else class="icon" :src="state.form.drivingPermitNeg"></image> | |||
</view> | |||
</view> | |||
<view class="picture-wrapper" @click="cardFileImageUpdate()"> | |||
<view class="bg"> | |||
<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.vehBodyUrl" class="icon" :src="`${$imgUrl}applyCard/chetou.png`"> | |||
</image> | |||
<image v-else class="icon" :src="state.form.vehBodyUrl"></image> | |||
</view> | |||
</view> | |||
<view class="shibie-wrapper"> | |||
<view class="title"> 识别内容如下 </view> | |||
<view class=""> | |||
<u-form label-width="200" :model="state.form" ref="uForm"> | |||
<u-form-item label="车牌号"> | |||
<u-input inputAlign="right" v-model="state.form.vehicleId" /> | |||
</u-form-item> | |||
<u-form-item label="车主姓名"> | |||
<u-input inputAlign="right" v-model="state.form.ownerName" /> | |||
</u-form-item> | |||
<u-form-item label="车辆类型"> | |||
<u-input inputAlign="right" v-model="state.form.vehicleType" /> | |||
</u-form-item> | |||
<!-- <u-form-item label="使用性质"> | |||
<u-input inputAlign="right" v-model="state.form.useCharacter" /> | |||
</u-form-item> --> | |||
<u-form-item label="车辆识别代号"> | |||
<u-input inputAlign="right" v-model="state.form.vin" /> | |||
</u-form-item> | |||
<u-form-item label="发动机号码"> | |||
<u-input inputAlign="right" v-model="state.form.engineNum" /> | |||
</u-form-item> | |||
<u-form-item label="注册日期"> | |||
<u-input inputAlign="right" v-model="state.form.registerDate" /> | |||
</u-form-item> | |||
<u-form-item label="发证日期"> | |||
<u-input inputAlign="right" v-model="state.form.issueDate" /> | |||
</u-form-item> | |||
<u-form-item label="核定载人数"> | |||
<u-input inputAlign="right" v-model="state.form.approvedCount" /> | |||
</u-form-item> | |||
<u-form-item label="整备质量"> | |||
<u-input inputAlign="right" v-model="state.form.maintenaceMass" /> | |||
</u-form-item> | |||
<u-form-item label="外廊尺寸"> | |||
<u-input inputAlign="right" v-model="state.form.vehicleDimensions" /> | |||
</u-form-item> | |||
<u-form-item label="总质量"> | |||
<u-input inputAlign="right" v-model="state.form.totalMass" /> | |||
</u-form-item> | |||
<u-form-item label="车牌颜色"> | |||
<u-input @click="state.actionSheetShow = true" inputAlign="right" | |||
v-model="state.showCaridCorlor" type="select" /> | |||
</u-form-item> | |||
</u-form> | |||
</view> | |||
</view> | |||
<view class="green-tip"> | |||
如识别信息有误,请手动修改,确认无误后,点击下一步! | |||
</view> | |||
<view class="action"> | |||
<button type="default" class="button" @click="savaHandle()"> | |||
下一步 | |||
</button> | |||
</view> | |||
<u-select v-model="state.actionSheetShow" :list="state.actionSheetList" @confirm="selectConfirm"></u-select> | |||
</view> | |||
</template> | |||
<script setup lang="ts"> | |||
import { | |||
reactive | |||
} from "vue"; | |||
import navBgCar from "./components/nav-bg-car3"; | |||
import navBar from "../../components/nav-bar/nav-bar2.vue"; | |||
import { | |||
pathToBase64 | |||
} from "@/utils/util/imageTool.js"; | |||
import { | |||
getItem | |||
} from "@/utils/storage.ts" | |||
import { | |||
etcCarCardInfoSubmit, | |||
etcCarOcrCard, | |||
fileUpload, | |||
createCarInfo, | |||
} from "@/utils/network/api.js"; | |||
import { | |||
request | |||
} from "@/utils/network/request.js"; | |||
import { | |||
stringToJson | |||
} from "@/utils/network/encryption"; | |||
import { | |||
onLoad, | |||
onShow | |||
} from "@dcloudio/uni-app"; | |||
const savaHandle = () => { | |||
state.form.vehicleId=state.form.vehicleId+'_'+state.carIdcorlorCode | |||
var data = state.form; | |||
console.log(data, "##########"); | |||
const options = { | |||
type: 2, | |||
data: data, | |||
method: "POST", | |||
showLoading: true, | |||
}; | |||
request(createCarInfo, options).then((res) => { | |||
const data = stringToJson(res.bizContent); | |||
console.log(data) | |||
if (data.info == '成功.') { | |||
uni.reLaunch({ | |||
url: "/personal-center/setting/car-information/car-manage" | |||
}) | |||
} | |||
}); | |||
}; | |||
const selectConfirm = (item: any) => { | |||
// item.map((val, index) => { | |||
// state.form.useUserType = val.value; | |||
// state.form.useUserTypeName = val.label; | |||
// }); | |||
console.log(item); | |||
if (state.form.vehicleId) { | |||
state.showCaridCorlor=item[0].label | |||
state.carIdcorlorCode= item[0].value | |||
console.log(state.form); | |||
} else { | |||
uni.showToast({ | |||
title: '请先填写车牌号', | |||
icon: 'none' | |||
}) | |||
} | |||
}; | |||
const cardFileImageUpdate = () => { | |||
uni.chooseImage({ | |||
count: 1, //只能选取一张照片 | |||
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有 | |||
sourceType: ["camera", "album"], //从相册选择 | |||
success: function(res) { | |||
pathToBase64(res.tempFilePaths[0]) | |||
.then((path) => { | |||
var data = { | |||
fileBase64: path, | |||
}; | |||
const options = { | |||
type: 2, | |||
data: data, | |||
method: "POST", | |||
showLoading: true, | |||
}; | |||
request(fileUpload, options).then((res) => { | |||
const data = stringToJson(res.bizContent); | |||
console.log(data); | |||
state.form.vehBodyUrl = data.data.url; | |||
}); | |||
}) | |||
.catch((error) => {}); | |||
}, | |||
}); | |||
}; | |||
const state = reactive({ | |||
actionSheetShow: false, | |||
actionSheetList: [{ | |||
label: "蓝色", | |||
value: 0, | |||
}, { | |||
label: "黄色", | |||
value: 1, | |||
}, | |||
{ | |||
label: "黑色", | |||
value: 2, | |||
}, | |||
{ | |||
label: "白色", | |||
value: 3, | |||
}, | |||
{ | |||
label: "渐变绿色", | |||
value: 4, | |||
}, | |||
{ | |||
label: "黄绿双拼色", | |||
value: 5, | |||
}, | |||
{ | |||
label: "蓝白渐变色", | |||
value: 6, | |||
}, | |||
{ | |||
label: "未确定", | |||
value: 9, | |||
}, | |||
{ | |||
label: "绿色", | |||
value: 11, | |||
}, | |||
{ | |||
label: "红色", | |||
value: 12, | |||
}, | |||
], | |||
showCaridCorlor: '', | |||
carIdcorlorCode:'', | |||
form: { | |||
openId: getItem('openId'), //用户标识. | |||
// man: "", //所有人 | |||
// character: "", //使用性质 | |||
register: "", //注册日期 | |||
customerId: "", //用户编号 . | |||
vehicleId: "", //车牌编号 . | |||
issueDate: "", //发证日期 . | |||
drivingPermitPos: "", //行驶证正面 . | |||
drivingPermitNeg: "", //行驶证证反面 . | |||
type: "0", //0,客车 1.货车 . | |||
useUserType: 0, //车辆用户类型 . | |||
// useUserTypeName: "普通车", | |||
vehicleSign: 2, //前/后装标识 . | |||
vin: "", //车辆识别代号 . | |||
engineNum: "", //发动机号码 . | |||
vehicleType: "", //车辆类型 . | |||
vehicleModel: "", //行驶证品牌型号 . | |||
approvedCount: undefined, //核定人数 . | |||
totalMass: undefined, //总质量 . | |||
maintenaceMass: undefined, //整备质量. | |||
permittedWeight: "", //核定载质量 . | |||
vehicleDimensions: "", //车辆尺寸 . | |||
permittedTowWeight: "", //准牵引总质量 . | |||
axleCount: "", //车轴数 . | |||
ownerName: "", //车主姓名 | |||
ownerIdType: "", //车主证件类型 | |||
ownerIdNum: "", //车主证件号码 | |||
ownPosImgUrl: "", //车主证件正面图片 | |||
ownNegImgUrl: "", //车主证件反面图片 | |||
agreementId: "", //签约编号 | |||
channelId: "", //编号渠道 | |||
scenePayType: "", // | |||
transportIdNum: "", //道路运输证编号 | |||
licenseIdNum: "", //经营许可证编号 | |||
vehBodyUrl: "", //车身照片 | |||
proxyUrl: "", //委托书地址, | |||
emergencyFlag: '', //应急车辆标识 0-非应急车辆 1-应急车辆 | |||
contacts: '', //指定联系人列表 | |||
ownerAddress: '', //所有人联系地址 | |||
axisType: '', //轴型 | |||
ownerTel: '', //所有人联系方式 | |||
axleDistance: '', //轴距 | |||
testRecord: '', //检验记录 | |||
fileNum: '', //档案编号 | |||
useCharacter: '', //车辆使用性质 | |||
registerDate: '' //注册日期 | |||
}, | |||
orderId: "", | |||
isMyPeopple: true, | |||
}); | |||
onLoad((option: any) => { | |||
state.form.orderId = option.orderId; | |||
}); | |||
//orc接口调用 | |||
const cardImageOcr = (val: any) => { | |||
var imageType = val; | |||
uni.chooseImage({ | |||
count: 1, //只能选取一张照片 | |||
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有 | |||
sourceType: ["camera", "album"], //从相册选择 | |||
success: function(res) { | |||
pathToBase64(res.tempFilePaths[0]) | |||
.then((path) => { | |||
var data = { | |||
source: "1", | |||
agencyId: "52010106004", | |||
imageType: imageType, | |||
fileName: res.tempFilePaths[0], | |||
imageBase64: path, | |||
}; | |||
const options = { | |||
type: 2, | |||
data: data, | |||
method: "POST", | |||
showLoading: true, | |||
}; | |||
request(etcCarOcrCard, options).then((res) => { | |||
const data = stringToJson(res.bizContent); | |||
console.log(data); | |||
if (val === "1") { | |||
state.form.vehicleId = data.plate_a; | |||
state.form.ownerName = data.man; | |||
state.form.vehicleType = data.vehicle; | |||
// state.form.useCharacter = data.character; | |||
state.form.vin = data.vin; | |||
state.form.engineNum = data.engine; | |||
state.form.registerDate = data.register; | |||
state.form.issueDate = data.issue; | |||
state.form.drivingPermitPos = data.imageUrl; | |||
state.form.vehicleModel = data.model; | |||
} else { | |||
state.form.approvedCount = parseFloat(data.apc); | |||
state.form.maintenaceMass = parseFloat(data.unladen); | |||
state.form.vehicleDimensions = data.overall; | |||
state.form.totalMass = parseFloat(data.gross); | |||
state.form.drivingPermitNeg = data.imageUrl; | |||
} | |||
}); | |||
}) | |||
.catch((error) => {}); | |||
}, | |||
}); | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.content { | |||
position: relative; | |||
// margin-top: -50rpx; | |||
padding: 0rpx 30rpx; | |||
position: relative; | |||
.img-pos { | |||
position: absolute; | |||
left: 270rpx; | |||
top: -38rpx; | |||
right: 50rpx; | |||
.img-flex { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
.car-img { | |||
width: 86rpx; | |||
height: 42rpx; | |||
} | |||
.flag-img { | |||
width: 30rpx; | |||
height: 35rpx; | |||
} | |||
} | |||
} | |||
.action { | |||
padding-left: 20rpx; | |||
padding-right: 20rpx; | |||
padding-bottom: 30rpx; | |||
.button { | |||
height: 80rpx; | |||
background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%); | |||
border-radius: 40rpx; | |||
font-size: 32rpx; | |||
font-weight: 400; | |||
color: #ffffff; | |||
line-height: 80rpx; | |||
} | |||
} | |||
.item-tips { | |||
.title { | |||
font-size: 30rpx; | |||
font-family: Microsoft YaHei; | |||
font-weight: 400; | |||
color: #000000; | |||
line-height: 24rpx; | |||
} | |||
.tip { | |||
margin-top: 16rpx; | |||
font-size: 24rpx; | |||
font-family: Microsoft YaHei; | |||
font-weight: 400; | |||
color: #999999; | |||
line-height: 24rpx; | |||
} | |||
} | |||
.picture-wrapper { | |||
margin-top: 40rpx; | |||
.bg { | |||
background: #ffffff; | |||
box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8); | |||
border-radius: 20rpx; | |||
padding: 40rpx; | |||
display: flex; | |||
// align-items: center; | |||
justify-content: space-between; | |||
.name { | |||
font-size: 34rpx; | |||
font-family: Microsoft YaHei; | |||
font-weight: 400; | |||
color: #000000; | |||
line-height: 34rpx; | |||
} | |||
.value { | |||
margin-top: 20rpx; | |||
font-size: 24rpx; | |||
font-family: Microsoft YaHei; | |||
font-weight: 400; | |||
color: #999999; | |||
line-height: 24rpx; | |||
} | |||
.tip { | |||
margin-top: 20rpx; | |||
text-align: center; | |||
width: 110rpx; | |||
height: 40rpx; | |||
background: rgba(33, 190, 177, 0.2); | |||
border-radius: 6rpx; | |||
.tip-value { | |||
font-size: 20rpx; | |||
font-family: Microsoft YaHei; | |||
font-weight: 400; | |||
color: #0a8f8a; | |||
line-height: 40rpx; | |||
opacity: 1; | |||
} | |||
} | |||
} | |||
.icon { | |||
width: 294rpx; | |||
height: 188rpx; | |||
} | |||
} | |||
.shibie-wrapper { | |||
margin-top: 60rpx; | |||
.title { | |||
font-size: 30rpx; | |||
font-family: Microsoft YaHei; | |||
font-weight: 400; | |||
color: #000000; | |||
line-height: 30rpx; | |||
} | |||
} | |||
.buchong-wrapper { | |||
margin-top: 60rpx; | |||
.title { | |||
font-size: 30rpx; | |||
font-family: Microsoft YaHei; | |||
font-weight: 400; | |||
color: #000000; | |||
line-height: 30rpx; | |||
} | |||
} | |||
.green-tip { | |||
margin-top: 50rpx; | |||
font-size: 24rpx; | |||
font-family: Microsoft YaHei; | |||
font-weight: 400; | |||
color: #00b38b; | |||
line-height: 24rpx; | |||
margin-bottom: 60rpx; | |||
} | |||
} | |||
</style> |
@@ -1,31 +1,70 @@ | |||
<template> | |||
<view class="main" :style="{height: height+'px'}"> | |||
<view class="item-row"> | |||
<view class="item-left"> | |||
<view class="title">行驶证正面</view> | |||
<view class="desc">补传行驶证正面</view> | |||
<view class="flag"><text>拍摄示例</text> </view> | |||
<view class="createbox"> | |||
<view class="createBtn" @click="toPage"> | |||
添加 | |||
</view> | |||
<view class="item-right" @click="chooseImage(1)"> | |||
<view class="empty-node"></view> | |||
<image :src="state.headstockImg ?? defHeadstockImg" :data-url="state.headstockImg ?? defHeadstockImg"> | |||
</image> | |||
</view> | |||
<view class="listbox"> | |||
<view class="item-row" v-for="(item,i) in state.listArr" :key="i"> | |||
<view class="item-left"> | |||
<view class="title">车牌号</view> | |||
<view class="desc">{{item.vehiclePlate}}</view> | |||
<!-- <view class="title">OBU序列号</view> | |||
<view class="desc">520111111111111111</view> --> | |||
<!-- <view class="flag"><text>拍摄示例</text> </view> --> | |||
</view> | |||
<view class="item-right"> | |||
<view class="flag"><text>{{item.status}}</text> </view> | |||
<!-- <view class="title"> | |||
车牌号:{{item.vehiclePlate}} | |||
</view> --> | |||
<view class="btns" v-if="item.status=='未使用'"> | |||
<view class="edit" @click="edit(item)">编辑</view> | |||
<view class="del" @click="del(item.vehicleId)">删除</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<view class="item-row"> | |||
<!-- <view class="item-row"> | |||
<view class="item-left"> | |||
<view class="title">ETC卡号</view> | |||
<view class="desc">520111111111111111</view> | |||
<view class="title">OBU序列号</view> | |||
<view class="desc">520111111111111111</view> | |||
</view> | |||
<view class="item-right"> | |||
<view class="flag"><text>未使用</text> </view> | |||
<view class="title"> | |||
车牌号:贵Z111111 | |||
</view> | |||
<view class="btns"> | |||
<view class="edit">编辑</view> | |||
<view class="del">删除</view> | |||
</view> | |||
</view> | |||
</view> --> | |||
<!-- <view class="item-row"> | |||
<view class="item-left"> | |||
<view class="title">行驶证副面</view> | |||
<view class="desc">补传行驶证副面</view> | |||
<view class="flag"><text>拍摄示例</text> </view> | |||
</view> | |||
<view class="item-right" @click="chooseImage(2)"> | |||
<view class="item-right"> | |||
<view class="empty-node"></view> | |||
<image :src="state.installImg ?? defInstallImg"></image> | |||
</view> | |||
</view> | |||
<view class="btn"> | |||
</view> --> | |||
<!-- <view class="btn"> | |||
<submit-button @submit="saveHandle" title="保存"></submit-button> | |||
</view> | |||
</view> --> | |||
</view> | |||
</template> | |||
@@ -40,40 +79,138 @@ | |||
import { | |||
fileURL | |||
} from "@/datas/fileURL.js"; | |||
import { | |||
pathToBase64 | |||
} from "@/utils/util/imageTool.js"; | |||
import { | |||
getItem | |||
} from "@/utils/storage.ts" | |||
import { | |||
selectCarInfo, | |||
delCarInfo | |||
} from "@/utils/network/api.js"; | |||
import { | |||
request | |||
} from "@/utils/network/request.js"; | |||
import { | |||
stringToJson | |||
} from "@/utils/network/encryption"; | |||
import { | |||
onLoad, | |||
onShow | |||
} from "@dcloudio/uni-app"; | |||
const height = uni.getSystemInfoSync().windowHeight | |||
const defHeadstockImg = `${fileURL}image/applyCard/car-zhu.png`; | |||
const defInstallImg = `${fileURL}image/applyCard/car-fu.png`; | |||
const toPage = () => { | |||
navTo('/personal-center/setting/car-information/car-create') | |||
} | |||
const data = reactive({ | |||
openId: getItem('openId'), | |||
vehicleId: '' | |||
}) | |||
const state = reactive({ | |||
headstockImg: null, | |||
installImg: null | |||
}); | |||
//选择图片 | |||
const chooseImage = (type: number) => { | |||
uni.chooseImage({ | |||
count: 1, | |||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 | |||
//sourceType: ['album','camera'], | |||
listArr: [] | |||
}) | |||
// 获取列表数据 | |||
const getDataList = () => { | |||
const options = { | |||
type: 2, | |||
data: data, | |||
method: "POST", | |||
showLoading: true, | |||
}; | |||
request(selectCarInfo, options).then((res) => { | |||
const data = stringToJson(res.bizContent); | |||
console.log(data) | |||
state.listArr = data.vehicleManages | |||
}); | |||
} | |||
// 删除 | |||
const del = (id) => { | |||
wx.showModal({ | |||
title: '提示', | |||
content: '是否删除该条车辆信息', | |||
success: function(res) { | |||
console.log(res.tempFilePaths); | |||
if (type === 1) { | |||
state.headstockImg = res.tempFilePaths[0]; | |||
} else { | |||
state.installImg = res.tempFilePaths[0]; | |||
if (res.confirm) { | |||
console.log('用户点击确定'); | |||
let data = { | |||
vehicleId: id, | |||
openId: getItem('openId') | |||
} | |||
const options = { | |||
type: 2, | |||
data: data, | |||
method: "POST", | |||
showLoading: true, | |||
}; | |||
request(delCarInfo, options).then((res) => { | |||
const data = stringToJson(res.bizContent); | |||
console.log(data) | |||
state.listArr = data.vehicleManages | |||
if (data.info == '成功.') { | |||
uni.showToast({ | |||
title: "删除成功", | |||
icon: "none" | |||
}) | |||
getDataList() | |||
} | |||
}); | |||
} else if (res.cancel) { | |||
console.log('用户点击取消'); | |||
} | |||
} | |||
}); | |||
} | |||
//下一步 | |||
const saveHandle = () => { | |||
if (!state.headstockImg || !state.installImg) { | |||
msg('请按照要求上传图片!'); | |||
return; | |||
} | |||
msg('保存成功') | |||
// 编辑 | |||
const edit=(item) => { | |||
let data=JSON.stringify(item) | |||
navTo(`/personal-center/setting/car-information/car-change?data=${data}`) | |||
} | |||
onShow(() => { | |||
getDataList() | |||
}) | |||
// //选择图片 | |||
// const chooseImage = (type: number) => { | |||
// uni.chooseImage({ | |||
// count: 1, | |||
// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 | |||
// //sourceType: ['album','camera'], | |||
// success: function(res) { | |||
// console.log(res.tempFilePaths); | |||
// if (type === 1) { | |||
// state.headstockImg = res.tempFilePaths[0]; | |||
// } else { | |||
// state.installImg = res.tempFilePaths[0]; | |||
// } | |||
// } | |||
// }); | |||
// } | |||
// //下一步 | |||
// const saveHandle = () => { | |||
// if (!state.headstockImg || !state.installImg) { | |||
// msg('请按照要求上传图片!'); | |||
// return; | |||
// } | |||
// msg('保存成功') | |||
// } | |||
</script> | |||
<style> | |||
@@ -85,111 +222,178 @@ | |||
.main { | |||
overflow: hidden; | |||
.item-row { | |||
.createbox { | |||
justify-content: flex-end; | |||
display: flex; | |||
justify-content: space-between; | |||
margin-top: 30rpx; | |||
background: white; | |||
padding: 30rpx; | |||
border-radius: 20rpx; | |||
box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8); | |||
margin: 30rpx; | |||
.item-left { | |||
.title { | |||
font-size: 34rpx; | |||
color: #333; | |||
font-weight: bold; | |||
} | |||
.desc { | |||
font-size: 24rpx; | |||
color: #999; | |||
margin: 10rpx 0; | |||
} | |||
padding: 0rpx 30rpx; | |||
margin-top: 20rpx; | |||
.flag { | |||
width: 110rpx; | |||
height: 45rpx; | |||
line-height: 42rpx; | |||
color: #0A8F8A; | |||
margin-top: 16rpx; | |||
border-radius: 6rpx; | |||
text-align: center; | |||
font-size: 20rpx; | |||
background: #D9F8F1; | |||
} | |||
.createBtn { | |||
padding: 6rpx 27rpx; | |||
border: 1rpx solid #0A8F8A; | |||
border-radius: 10rpx; | |||
font-size: 30rpx; | |||
background: #D9F8F1; | |||
} | |||
} | |||
.item-right { | |||
width: 295rpx; | |||
height: 188rpx; | |||
position: relative; | |||
.listbox { | |||
overflow: auto; | |||
height: calc(100vh - 90rpx); | |||
image { | |||
position: relative; | |||
z-index: 10; | |||
width: 100%; | |||
height: 188rpx; | |||
} | |||
.item-row { | |||
display: flex; | |||
justify-content: space-between; | |||
margin-top: 30rpx; | |||
background: white; | |||
padding: 30rpx; | |||
border-radius: 20rpx; | |||
box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8); | |||
margin: 30rpx; | |||
&::before { | |||
content: ''; | |||
position: absolute; | |||
width: 22rpx; | |||
height: 22rpx; | |||
border: 4rpx solid #21BEB1; | |||
border-bottom: none; | |||
border-right: none; | |||
z-index: 0; | |||
left: -4rpx; | |||
top: -4rpx; | |||
} | |||
.item-left { | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
&::after { | |||
content: ''; | |||
position: absolute; | |||
width: 22rpx; | |||
height: 22rpx; | |||
border: 4rpx solid #21BEB1; | |||
border-top: none; | |||
border-right: none; | |||
z-index: 0; | |||
left: -4rpx; | |||
bottom: -4rpx; | |||
.title { | |||
font-size: 34rpx; | |||
color: #333; | |||
font-weight: bold; | |||
} | |||
.desc { | |||
font-size: 24rpx; | |||
color: #999; | |||
margin: 10rpx 0; | |||
} | |||
.flag { | |||
width: 110rpx; | |||
height: 45rpx; | |||
line-height: 42rpx; | |||
color: #0A8F8A; | |||
margin-top: 16rpx; | |||
border-radius: 6rpx; | |||
text-align: center; | |||
font-size: 20rpx; | |||
background: #D9F8F1; | |||
} | |||
} | |||
} | |||
.empty-node { | |||
position: absolute; | |||
z-index: 0; | |||
width: 100%; | |||
height: 100%; | |||
.item-right { | |||
width: 295rpx; | |||
// height: 188rpx; | |||
position: relative; | |||
&::before { | |||
content: ''; | |||
position: absolute; | |||
width: 22rpx; | |||
height: 22rpx; | |||
border: 4rpx solid #21BEB1; | |||
border-left: none; | |||
border-bottom: none; | |||
z-index: 0; | |||
right: -4rpx; | |||
top: -4rpx; | |||
image { | |||
position: relative; | |||
z-index: 10; | |||
width: 100%; | |||
height: 188rpx; | |||
} | |||
// &::before { | |||
// content: ''; | |||
// position: absolute; | |||
// width: 22rpx; | |||
// height: 22rpx; | |||
// border: 4rpx solid #21BEB1; | |||
// border-bottom: none; | |||
// border-right: none; | |||
// z-index: 0; | |||
// left: -4rpx; | |||
// top: -4rpx; | |||
// } | |||
// &::after { | |||
// content: ''; | |||
// position: absolute; | |||
// width: 22rpx; | |||
// height: 22rpx; | |||
// border: 4rpx solid #21BEB1; | |||
// border-top: none; | |||
// border-right: none; | |||
// z-index: 0; | |||
// left: -4rpx; | |||
// bottom: -4rpx; | |||
// } | |||
.flag { | |||
width: 110rpx; | |||
height: 45rpx; | |||
line-height: 42rpx; | |||
color: #0A8F8A; | |||
margin-top: 16rpx; | |||
border-radius: 6rpx; | |||
text-align: center; | |||
font-size: 20rpx; | |||
background: #D9F8F1; | |||
position: relative; | |||
right: -180rpx; | |||
} | |||
.title { | |||
text-align: right; | |||
margin: 20rpx 0; | |||
font-size: 28rpx; | |||
} | |||
.btns { | |||
display: flex; | |||
justify-content: space-around; | |||
align-items: center; | |||
margin-top: 20rpx; | |||
.edit { | |||
padding: 6rpx 27rpx; | |||
border: 1rpx solid #0A8F8A; | |||
border-radius: 30rpx; | |||
font-size: 30rpx; | |||
} | |||
.del { | |||
padding: 6rpx 27rpx; | |||
border: 1rpx solid red; | |||
border-radius: 30rpx; | |||
font-size: 30rpx; | |||
} | |||
} | |||
} | |||
&::after { | |||
content: ''; | |||
.empty-node { | |||
position: absolute; | |||
width: 22rpx; | |||
height: 22rpx; | |||
border: 4rpx solid #21BEB1; | |||
border-top: none; | |||
border-left: none; | |||
z-index: 0; | |||
right: -4rpx; | |||
bottom: -4rpx; | |||
width: 100%; | |||
height: 100%; | |||
&::before { | |||
content: ''; | |||
position: absolute; | |||
width: 22rpx; | |||
height: 22rpx; | |||
border: 4rpx solid #21BEB1; | |||
border-left: none; | |||
border-bottom: none; | |||
z-index: 0; | |||
right: -4rpx; | |||
top: -4rpx; | |||
} | |||
&::after { | |||
content: ''; | |||
position: absolute; | |||
width: 22rpx; | |||
height: 22rpx; | |||
border: 4rpx solid #21BEB1; | |||
border-top: none; | |||
border-left: none; | |||
z-index: 0; | |||
right: -4rpx; | |||
bottom: -4rpx; | |||
} | |||
} | |||
} | |||
} |
@@ -88,7 +88,10 @@ export const orderEvaluateTag = '170'; //获取服务评价标签 | |||
//个人中心 | |||
export const changePassword = "94"; //重置密码 | |||
export const changePhone = "220"; //修改手机号 | |||
export const changecarInfo = "1029"; //车辆管理信息修改 | |||
export const changeCarInfo = "1029"; //车辆管理信息修改 | |||
export const createCarInfo = "1028"; //车辆管理信息添加 | |||
export const selectCarInfo = "1030"; //车辆管理信息查询 | |||
export const delCarInfo = "1031"; //车辆管理信息删除 | |||
export const infoQuery= "935"; //8.212.文本信息查询接口 | |||
@@ -35,8 +35,8 @@ export function request(code, options = {}) { | |||
} | |||
//Url 地址 | |||
//options.url = envs[process.env.NODE_ENV].baseUrl || '' + options.url | |||
// options.url = 'http://192.168.100.63:8087/ifzt/api/interfaceMidGroundIn' | |||
options.url = 'http://222.85.144.89:19002/ifzt/api/interfaceMidGroundIn' | |||
options.url = 'http://192.168.100.63:8087/ifzt/api/interfaceMidGroundIn' | |||
// options.url = 'http://222.85.144.89:19002/ifzt/api/interfaceMidGroundIn' | |||
//判断baseUri是否为空 | |||
if (options.baseUrl) { | |||
options.url = options.baseUrl |