2025-05-12 10:05:01 +08:00

1824 lines
58 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="main">
<div class="topMessage">
<div class="messageTitle">请输入您的车牌号</div>
<div class="messageList">
<div class="messageText">
1您授权的车牌信息安全将被严格保证并限于您授权的用途
</div>
<div class="messageText">21个车牌号仅允许被1个账号绑定</div>
</div>
<image
class="carLogo"
src="https://eshangtech.com/wanmeiyizhanImg/home/carLogoBg.png"
/>
</div>
<!-- 输入车牌号的框 -->
<div class="codeBox">
<div class="input-box">
<div
:class="haveCode ? 'input-f cccBg' : 'input-f'"
v-for="(item, i) in normalLen"
:key="i"
@tap="focusInput(i)"
>
<div calss="show-input">{{ saveCarText[i] }}</div>
</div>
<div class="input-f lastBox" @tap="handleChangeCarType">
<div calss="show-input">
<span class="text-sm">{{ newEnergy ? "新能源" : "" }}</span>
</div>
</div>
</div>
</div>
<div class="bindTypeBox" v-if="!haveCode">
<span class="bindTrain" @click="handleChangeBindType">{{
bindCarType === 1 ? "绑定货车" : "绑定轿车"
}}</span>
</div>
<!-- 货车的内容 -->
<view v-if="bindCarType === 2">
<div class="bindPopup">
<div class="fileItem">
<div class="itemTitle">身份证<span style="color: red">*</span></div>
<div class="uploadImgBox" v-if="bindCarType === 2">
<div
class="submitImgBox"
v-if="!codeImgObj.frontIDCard"
@click="submitImg('1', '1')"
>
<image class="addIcon" src="/static/home/addImageIcon.svg" />
<span class="submitText">请上传身份证人像面</span>
</div>
<div class="imgItem" v-else>
<image
:src="codeImgObj.frontIDCard"
@click="submitImg('1', '1')"
mode="aspectFill"
/>
</div>
<!-- <div class="imgItem" v-for="(item, index) in IDCardImgList" :key="index">
<image :src="item" @click="showImg2(index, IDCardImgList)" mode="aspectFill" />
<div class="closeBox" @click.stop="deleteImgFuncResponse(IDCardImgList, index)" v-if="!haveCode">
<image class="closeIcon" src="/static/home/closeIcon.svg" />
</div>
</div> -->
<div
class="submitImgBox"
v-if="!codeImgObj.reverseIDcard"
@click="submitImg('1', '2')"
>
<image class="addIcon" src="/static/home/addImageIcon.svg" />
<span class="submitText">请上传身份证国徽面</span>
</div>
<div class="imgItem" v-else>
<image
:src="codeImgObj.reverseIDcard"
@click="submitImg('1', '2')"
mode="aspectFill"
/>
</div>
</div>
</div>
<div class="fileItem">
<div class="itemTitle">驾驶证</div>
<div class="uploadImgBox" v-if="bindCarType === 2">
<div
class="submitImgBox"
v-if="!codeImgObj.frontDriverCard"
@click="submitImg('2', '1')"
>
<image class="addIcon" src="/static/home/addImageIcon.svg" />
<span class="submitText"
><span style="color: red">*</span>请上传驾驶证主页</span
>
</div>
<div class="imgItem" v-else>
<image
:src="codeImgObj.frontDriverCard"
@click="submitImg('2', '1')"
mode="aspectFill"
/>
</div>
<div
class="submitImgBox"
v-if="!codeImgObj.reverseDriverCard"
@click="submitImg('2', '2')"
>
<image class="addIcon" src="/static/home/addImageIcon.svg" />
<span class="submitText">请上传驾驶证副页</span>
</div>
<div class="imgItem" v-else>
<image
:src="codeImgObj.reverseDriverCard"
@click="submitImg('2', '2')"
mode="aspectFill"
/>
</div>
<!-- <div class="imgItem" v-for="(item, index) in driverLicenseList" :key="index">
<image :src="item" @click="showImg2(index, driverLicenseList)" mode="aspectFill" />
<div class="closeBox" @click.stop="deleteImgFuncResponse(driverLicenseList, index)" v-if="!haveCode">
<image class="closeIcon" src="/static/home/closeIcon.svg" />
</div>
</div> -->
</div>
</div>
<div class="fileItem">
<div class="itemTitle">行驶证</div>
<div class="uploadImgBox" v-if="bindCarType === 2">
<div
class="submitImgBox"
v-if="!codeImgObj.frontLicenseCard"
@click="submitImg('3', '1')"
>
<image class="addIcon" src="/static/home/addImageIcon.svg" />
<span class="submitText"
><span style="color: red">*</span>请上传行驶证主页</span
>
</div>
<div class="imgItem" v-else>
<image
:src="codeImgObj.frontLicenseCard"
@click="submitImg('3', '1')"
mode="aspectFill"
/>
</div>
<div
class="submitImgBox"
v-if="!codeImgObj.reverseLicenseCard"
@click="submitImg('3', '2')"
>
<image class="addIcon" src="/static/home/addImageIcon.svg" />
<span class="submitText">请上传行驶证副页</span>
</div>
<div class="imgItem" v-else>
<image
:src="codeImgObj.reverseLicenseCard"
@click="submitImg('3', '2')"
mode="aspectFill"
/>
</div>
<!-- <div class="imgItem" v-for="(item, index) in drivingLicenseList" :key="index">
<image :src="item" @click="showImg2(index, drivingLicenseList)" mode="aspectFill" />
<div class="closeBox" @click.stop="deleteImgFuncResponse(drivingLicenseList, index)" v-if="!haveCode">
<image class="closeIcon" src="/static/home/closeIcon.svg" />
</div>
</div> -->
</div>
</div>
</div>
</view>
<!-- 确认绑定按钮 -->
<div class="confirmBox" @click="handleConfirmCode" v-if="!haveCode">
确认绑定
</div>
<!-- 取消绑定 -->
<div class="cancelBox" @click="handleCancelCode" v-if="haveCode">
解绑车辆
</div>
<!-- 货车司机 -->
<!-- <div class="confirmBox" style="margin-top: 26rpx" @click="handleBindTruck">
绑定货车
</div> -->
<!-- <uni-popup
ref="popup"
:show="showPopup"
:safe-area="false"
@close="handleClosePopup"
@maskClick="handleClosePopup"
>
<div class="bindPopup">
<div class="fileItem">
<div class="itemTitle">身份证<span style="color: red">*</span></div>
<div class="uploadImgBox">
<div class="submitImgBox" @click="submitImg('1')">
<image class="addIcon" src="/static/home/addImageIcon.svg" />
</div>
<div
class="imgItem"
v-for="(item, index) in IDCardImgList"
:key="index"
>
<image
:src="item"
@click="showImg2(index, IDCardImgList)"
mode="aspectFill"
/>
<div class="closeBox" @click.stop="deleteImgFunc(item, index)">
<image class="closeIcon" src="/static/home/closeIcon.svg" />
</div>
</div>
</div>
</div>
</div>
</uni-popup> -->
<div>
<keyboard
:isShow="isShow"
:keyBoardType="defaultKeyWordType"
@inputchange="inputChange"
@delete="delValue"
@ok="confirmboard"
/>
</div>
<div class="page-body" v-if="false">
<div v-show="!isLoading && cards.length > 0">
<div class="title">已绑车辆</div>
<swiper scroll-x="true" class="banner">
<swiper-item v-for="(item, o) in cards" :key="o" class="car-card">
<div class="car-card">
<image
src="https://eshangtech.com/wanmeiyizhanImg/car-card.png"
mode="acspetFit"
/>
<text class="card-title">{{ item.License_Plate }}</text>
</div>
</swiper-item>
<swiper-item class="car-card">
<div class="car-card-add"></div>
</swiper-item>
</swiper>
</div>
<div v-show="!isLoading && cards.length == 0">
<image
src="https://eshangtech.com/wanmeiyizhanImg/car.png"
mode="acspetFit"
class="pic-image"
></image>
<div class="tip-text">暂无绑定车辆</div>
<div class="add-car" @tap="toAdd">
<van-icon name="plus" size="32" color="#B0B0B0" />
<span class="">添加车辆</span>
</div>
</div>
</div>
<CustomLoading
:visible="isLoading"
v-if="isLoading"
@update:visible="(val) => (isLoading = val)"
/>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import keyboard from "../../../components/keyboard.vue";
import CustomLoading from "../../../components/customLoading.vue";
export default {
data() {
return {
cards: [],
isLoading: true,
normalLen: 7,
nowIndex: -1,
isShow: false,
saveCarText: ["皖", "A", "", "", "", "", "", ""],
newEnergy: true, // 是否是新能源
haveCode: false, // 判断是否已经有了code
defaultKeyWordType: 1, // 默认的键盘类型 1是 省份 2是 车牌号
showPopup: false,
IDCardImgList: [], // 身份证 上传的图片
driverLicenseList: [], // 驾驶证 上传的图片
drivingLicenseList: [], // 行驶证 上传的图片
bindCarType: 1, // 绑定车的类型 1 轿车 2 货车
isLoading: false,
codeInfo: {
cardInfoCode: {
STAFF_ID: "",
}, // 身份证的数据
drivingInfo: {
STAFF_ID: "",
}, // 驾驶证的数据
vehicleInfo: {
STAFF_ID: "",
}, // 行驶证的数据
},
codeImgObj: {
frontIDCard: "", // 身份证正面
reverseIDcard: "", // 身份证反面
frontDriverCard: "", // 驾驶证正面
reverseDriverCard: "", // 驾驶证反面
frontLicenseCard: "", // 行驶证正面
reverseLicenseCard: "", // 行驶证反面
}, // 三证的图片数据
};
},
computed: {
...mapGetters({
user: "user",
}),
},
components: {
keyboard,
CustomLoading,
},
methods: {
// 修改绑定类型
handleChangeBindType() {
if (this.bindCarType === 1) {
this.bindCarType = 2;
} else {
this.bindCarType = 1;
}
},
// 绑定货车
handleBindTruck() {
this.handleOpenDetail();
},
// 关闭悬浮框 货车的
handleClosePopup() {
this.$refs.popup.close();
},
// 打开悬浮框 货车的
handleOpenDetail() {
this.$refs.popup.open("bottom");
},
showImg2(index, imgList) {
uni.previewImage({
urls: imgList,
current: index,
loop: true,
indicator: "number",
});
},
// 删除答案里面的图片
deleteImgFuncResponse(item, index) {
item = item.splice(index, 1);
this.$forceUpdate();
},
submitImg(type, frontOrBack) {
// type 1 为身份证 2 为驾驶证 3 为行驶证
// frontOrBack 1 为正面 2 为反面
if (this.haveCode) {
let imgList = [];
if (type === "1") {
if (frontOrBack === "1") {
imgList = [this.codeImgObj.frontIDCard];
} else {
imgList = [this.codeImgObj.reverseIDcard];
}
} else if (type === "2") {
if (frontOrBack === "1") {
imgList = [this.codeImgObj.frontDriverCard];
} else {
imgList = [this.codeImgObj.reverseDriverCard];
}
} else if (type === "3") {
if (frontOrBack === "1") {
imgList = [this.codeImgObj.frontLicenseCard];
} else {
imgList = [this.codeImgObj.reverseLicenseCard];
}
}
uni.previewImage({
urls: imgList,
current: 0,
loop: true,
indicator: "number",
});
} else {
let _this = this;
uni.chooseImage({
count: 9, //默认9
sizeType: ["original", "compressed"],
sourceType: ["camera"],
// "album",
success: function (rs) {
let quality = 100;
if (rs.tempFiles[0].size > 1024 * 200) {
quality = ((1024 * 200) / rs.tempFiles[0].size) * 100;
}
if (quality < 100 && rs.tempFiles[0].path.indexOf(".jpg") > -1) {
uni.compressImage({
src: rs.tempFilePaths[0], // 图片路径
quality: quality, // 压缩质量
success(res) {
let data = {};
if (res.data) {
data = JSON.parse(res.data);
}
// uni.showLoading({
// title: "图片上传中...",
// });
_this.isLoading = true;
uni.uploadFile({
// url: "https://user.eshangtech.com/Coop.Merchant/Handler/handler_ajax.ashx?action_type=UploadFile&folder=MBWA",
// url: "https://es.robot-z.cn/oss/upload",
url: "https://es.eshangtech.com/oss/upload",
filePath: res.tempFilePath,
header: {
"Content-Type": "multipart/form-data",
},
formData: {},
fileType: "image",
name: "file",
async success(res) {
let data = {};
if (res.data) {
data = JSON.parse(res.data);
}
// uni.hideLoading();
_this.isLoading = false;
if (type === "1") {
const res = await _this.handleIdentification(
`https://es.eshangtech.com/${data.data.path}`,
1,
frontOrBack
);
if (res) {
if (frontOrBack === "1") {
_this.codeImgObj.frontIDCard = `https://es.eshangtech.com/${data.data.path}`;
} else {
_this.codeImgObj.reverseIDcard = `https://es.eshangtech.com/${data.data.path}`;
}
// // 身份证的数组
// _this.IDCardImgList.push(
// `https://es.eshangtech.com/${data.data.path}`
// );
}
} else if (type === "2") {
const res = await _this.handleIdentification(
`https://es.eshangtech.com/${data.data.path}`,
2,
frontOrBack
);
if (res) {
if (frontOrBack === "1") {
_this.codeImgObj.frontDriverCard = `https://es.eshangtech.com/${data.data.path}`;
} else {
_this.codeImgObj.reverseDriverCard = `https://es.eshangtech.com/${data.data.path}`;
}
// 驾驶证的图片
// _this.driverLicenseList.push(
// `https://es.eshangtech.com/${data.data.path}`
// );
}
} else if (type === "3") {
const res = await _this.handleIdentification(
`https://es.eshangtech.com/${data.data.path}`,
3,
frontOrBack
);
if (res) {
if (frontOrBack === "1") {
_this.codeImgObj.frontLicenseCard = `https://es.eshangtech.com/${data.data.path}`;
} else {
_this.codeImgObj.reverseLicenseCard = `https://es.eshangtech.com/${data.data.path}`;
}
// 行驶证图片
// _this.drivingLicenseList.push(
// `https://es.eshangtech.com/${data.data.path}`
// );
}
}
// _this.$forceUpdate();
},
fail(error) {
_this.noPost = true;
},
});
},
fail(error) {
_this.noPost = true;
},
});
} else {
_this.isLoading = true;
// uni.showLoading({
// title: "图片上传中...",
// });
uni.uploadFile({
// url: "https://user.eshangtech.com/Coop.Merchant/Handler/handler_ajax.ashx?action_type=UploadFile&folder=MBWA",
// url: "https://es.robot-z.cn/oss/upload",
url: "https://es.eshangtech.com/oss/upload",
filePath: rs.tempFilePaths[0],
fileType: "image",
header: {
"Content-Type": "multipart/form-data",
},
name: "file",
async success(res) {
let data = {};
if (res.data) {
data = JSON.parse(res.data);
}
// uni.hideLoading();
_this.isLoading = false;
if (type === "1") {
const res = await _this.handleIdentification(
`https://es.eshangtech.com/${data.data.path}`,
1,
frontOrBack
);
if (res) {
if (frontOrBack === "1") {
_this.codeImgObj.frontIDCard = `https://es.eshangtech.com/${data.data.path}`;
} else {
_this.codeImgObj.reverseIDcard = `https://es.eshangtech.com/${data.data.path}`;
}
// // 身份证的数组
// _this.IDCardImgList.push(
// `https://es.eshangtech.com/${data.data.path}`
// );
}
} else if (type === "2") {
const res = await _this.handleIdentification(
`https://es.eshangtech.com/${data.data.path}`,
2,
frontOrBack
);
if (res) {
if (frontOrBack === "1") {
_this.codeImgObj.frontDriverCard = `https://es.eshangtech.com/${data.data.path}`;
} else {
_this.codeImgObj.reverseDriverCard = `https://es.eshangtech.com/${data.data.path}`;
}
// // 驾驶证的图片
// _this.driverLicenseList.push(
// `https://es.eshangtech.com/${data.data.path}`
// );
}
} else if (type === "3") {
const res = await _this.handleIdentification(
`https://es.eshangtech.com/${data.data.path}`,
3,
frontOrBack
);
if (res) {
if (frontOrBack === "1") {
_this.codeImgObj.frontLicenseCard = `https://es.eshangtech.com/${data.data.path}`;
} else {
_this.codeImgObj.reverseLicenseCard = `https://es.eshangtech.com/${data.data.path}`;
}
// // 行驶证图片
// _this.drivingLicenseList.push(
// `https://es.eshangtech.com/${data.data.path}`
// );
}
}
// _this.$forceUpdate();
},
fail(error) {
_this.noPost = true;
},
});
}
},
fail: function (err) {},
});
}
},
// 根据车辆类型返回需要的准驾车型
getRequiredLicenseTypes(vehicleType) {
if (!vehicleType) return [];
if (
vehicleType.includes("小型") &&
(vehicleType.includes("轿车") || vehicleType.includes("客车"))
) {
return ["C1", "C2"];
} else if (
vehicleType.includes("微型货车") ||
vehicleType.includes("微型封闭式货车") ||
vehicleType.includes("轻型货车") ||
vehicleType.includes("轻型封闭式货车")
) {
return ["C1"]; // 轻微型货车 C1可以开
} else if (
vehicleType.includes("中型货车") ||
vehicleType.includes("中型封闭式货车")
) {
return ["B2"];
} else if (
vehicleType.includes("重型货车") ||
vehicleType.includes("重型封闭式货车")
) {
return ["B2"];
} else if (vehicleType.includes("牵引车")) {
return ["A2"];
} else if (vehicleType.includes("中型客车")) {
return ["B1"];
} else if (
vehicleType.includes("大型客车") ||
vehicleType.includes("重型客车")
) {
return ["A1"];
} else if (vehicleType.includes("半挂")) {
return ["A2"];
} else {
return []; // 无法判断的车辆类型,默认放过
}
},
// 证件识别
async handleIdentification(url, type, frontOrBack) {
this.isLoading = true;
// type 1 身份证 2 驾驶证 3 行驶证
// frontOrBack 1 为正面 2 为反面
console.log("frontOrBack", frontOrBack);
const req = {
imageUrl: url,
};
let data = {};
if (type === 1) {
data = await this.$api.$get("/MemberIdentify/RecognizeIdCard", req);
} else if (type === 2) {
data = await this.$api.$get("/MemberIdentify/RecognizeDriving", req);
} else if (type === 3) {
data = await this.$api.$get("/MemberIdentify/RecognizeVehicle", req);
}
if (data.Result_Code !== 100) {
uni.showToast({
title: `${
type === 1
? "身份证"
: type === 2
? "驾驶证"
: type === 3
? "行驶证"
: ""
}识别失败!请重新上传`,
icon: "none",
});
this.isLoading = false;
return false;
}
let obj = JSON.parse(data.Result_Data);
let infoObj = {};
if (type === 1) {
console.log("this.codeInfo.cardInfoCode", this.codeInfo.cardInfoCode);
if (frontOrBack === "1") {
if (obj.data.face) {
infoObj = obj.data.face.data;
this.codeInfo.cardInfoCode = {
...this.codeInfo.cardInfoCode,
MEMBERSHIP_ID: this.user.MEMBERSHIP_ID, // 会员内码 ,
IDCARDINFO_NAME: infoObj.name || "", // 身份证人名
IDCARDINFO_CODE: infoObj.idNumber || "", // 证件号码
GENDER:
infoObj.sex === "男" ? 1 : infoObj.sex === "女" ? "2" : "0", //性别 男1 女2
NATIONALITY: infoObj.ethnicity || "", //名族
BIRTH_DATE: infoObj.birthDate || "", //证件生日
IDCARDINFO_ADDRESS: infoObj.address || "", //证件地址
STAFF_ID: "",
STAFF_NAME: this.user.MEMBERSHIP_NAME, //
IDCARDINFO_STATE: 1,
OPERATE_DATE: this.$moment.now().format("YYYY-MM-DD HH:mm:ss"),
};
} else {
uni.showToast({
title: "身份证识别失败,请重新上传!",
icon: "none",
});
this.isLoading = false;
return false;
}
} else {
if (obj.data.back) {
infoObj = obj.data.back.data;
let [start, end] = ["", ""];
if (infoObj.validPeriod) {
[start, end] = infoObj.validPeriod.split("-");
}
start = start.replace(/\./g, "-");
end = end.replace(/\./g, "-");
this.codeInfo.cardInfoCode = {
...this.codeInfo.cardInfoCode,
ISSUE_DATE: start || "",
EXPIRE_DATE: end || "",
ISSUE_AUTHORITY: infoObj.issueAuthority || "",
};
} else {
uni.showToast({
title: "身份证识别失败,请重新上传!",
icon: "none",
});
this.isLoading = false;
return false;
}
}
} else if (type === 2) {
if (frontOrBack === "1") {
if (obj.data.face) {
infoObj = obj.data.face.data;
let [start, end] = ["", ""];
if (infoObj.validPeriod) {
[start, end] = infoObj.validPeriod.split("至");
}
this.codeInfo.drivingInfo = {
...this.codeInfo.drivingInfo,
MEMBERSHIP_ID: this.user.MEMBERSHIP_ID, // 会员内码
// LICENSE_NUMBER: infoObj.licenseNumber, // 驾驶证号
IDCARDINFO_NAME: infoObj.name, // 证件姓名
IDCARDINFO_CODE: infoObj.licenseNumber, // 关联身份证号
LICENSE_TYPE: infoObj.approvedType, // 准驾车型
VALID_FROM: start, // 有效期起始日
VALID_TO: end, // 有效期截止日
ISSUE_DATE: infoObj.initialIssueDate, // 发证日期
DRIVERLICENSE_STATE: 1, // 状态(正常/吊销/过期)
STAFF_ID: "", //
STAFF_NAME: this.user.MEMBERSHIP_NAME, //
OPERATE_DATE: this.$moment.now().format("YYYY-MM-DD HH:mm:ss"), //
};
} else {
uni.showToast({
title: "驾驶证识别失败,请重新上传!",
icon: "none",
});
this.isLoading = false;
return false;
}
} else {
if (obj.data.back) {
infoObj = obj.data.back.data;
this.codeInfo.drivingInfo = {
...this.codeInfo.drivingInfo,
LICENSE_NUMBER: infoObj.licenseNumber,
RECORD: infoObj.record,
RECORD_NUMBER: infoObj.recordNumber,
};
} else {
uni.showToast({
title: "驾驶证识别失败,请重新上传!",
icon: "none",
});
_this.isLoading = false;
return false;
}
}
} else if (type === 3) {
if (frontOrBack === "1") {
if (obj.data.face) {
infoObj = obj.data.face.data;
this.codeInfo.vehicleInfo = {
...this.codeInfo.vehicleInfo,
MEMBERSHIP_ID: this.user.MEMBERSHIP_ID, //
PLATE_NUMBER: infoObj.licensePlateNumber, // 车牌号
VEHICLE_TYPE: infoObj.vehicleType, // 车辆类型(如轿车/货车)
// IDCARDINFO_CODE: "string",// 所有人身份证号
IDCARDINFO_ADDRESS: infoObj.address, // 所有人住址
VEHICLELICENSE_VIN: infoObj.vinCode, // 车辆识别代号(车架号)
ENGINE_NUMBER: infoObj.engineNumber, // 发动机号
REGISTER_DATE: infoObj.registrationDate, // 注册日期
INSPECT_DATE: infoObj.inspectionRecord, // 检验有效期
STAFF_ID: 0, //
STAFF_NAME: "", //
VEHICLELICENSE_STATE: 1,
OPERATE_DATE: this.$moment.now().format("YYYY-MM-DD HH:mm:ss"), //
VEHICLELICENSE_DESC: "", //
ISSUEAUTHORITY: infoObj.issueAuthority, // 签发机关
MODAL: infoObj.model, // 品牌类型
OWNER: infoObj.owner, // 所有人名称
ISSUEDATE: infoObj.issueDate, // 发证日期
USE_NATURE: infoObj.useNature, // 使用性质
};
} else {
uni.showToast({
title: "行驶证识别失败,请重新上传!",
icon: "none",
});
this.isLoading = false;
return false;
}
} else {
if (obj.data.back) {
infoObj = obj.data.back.data;
this.codeInfo.vehicleInfo = {
...this.codeInfo.vehicleInfo,
...infoObj,
};
} else {
uni.showToast({
title: "行驶证识别失败,请重新上传!",
icon: "none",
});
this.isLoading = false;
return false;
}
}
}
this.isLoading = false;
return true;
// 到这里说明已经拿到了 识别到的数据了 然后去调用一下 存储的接口
// 三证分别是三个不同的接口
// let codeInfo = {}
// if (type === 1) {
// // 存储身份证的识别信息
// const req = {
// MEMBERSHIP_ID: this.user.MEMBERSHIP_ID, // 会员内码 ,
// IDCARDINFO_NAME: infoObj.name, // 身份证人名
// IDCARDINFO_CODE: infoObj.idNumber, // 证件号码
// GENDER: infoObj.sex === '男' ? 1 : infoObj.sex === '女' ? '2' : '0',//性别 男1 女2
// NATIONALITY: infoObj.ethnicity,//名族
// BIRTH_DATE: infoObj.birthDate,//证件生日
// IDCARDINFO_ADDRESS: infoObj.address,//证件地址
// ISSUE_DATE: ,//签发日期
// EXPIRE_DATE: "",//失效日期
// STAFF_ID: "",
// ISSUE_AUTHORITY: "",//签发机关
// STAFF_NAME: this.user.MEMBERSHIP_NAME,//
// OPERATE_DATE: this.$moment.now().format("YYYY-MM-DD HH:mm:ss"),//
// }
// codeInfo = await this.$api.$post(
// "/EShangApiMain/Member/SynchroIDCARDINFO",
// req
// );
// } else if (type === 2) {
// // 存储驾驶证的识别信息
// const req = {
// DRIVERLICENSE_ID: 0,
// MEMBERSHIP_ID: 0,// 会员内码
// LICENSE_NUMBER: "string", // 驾驶证号
// IDCARDINFO_NAME: "string",// 关联身份证号
// IDCARDINFO_CODE: "string",// 证件姓名
// LICENSE_TYPE: "string",// 准驾车型
// VALID_FROM: "string",// 有效期起始日
// VALID_TO: "string",// 有效期截止日
// ISSUE_DATE: "string",// 发证日期
// DRIVERLICENSE_STATUS: "string",// 状态(正常/吊销/过期)
// STAFF_ID: 0,//
// STAFF_NAME: "",//
// OPERATE_DATE: this.$moment.now().format("YYYY-MM-DD HH:mm:ss"),//
// DRIVERLICENSE_DESC: ""//
// }
// } else if (type === 3) {
// // 存储行驶证的识别信息
// const req = {
// VEHICLELICENSE_ID: 0, //
// MEMBERSHIP_ID: 0,//
// PLATE_NUMBER: "string",// 车牌号
// VEHICLE_TYPE: "string",// 车辆类型(如轿车/货车)
// IDCARDINFO_CODE: "string",// 所有人身份证号
// IDCARDINFO_ADDRESS: "string",// 所有人住址
// VEHICLELICENSE_VIN: "string",// 车辆识别代号(车架号)
// ENGINE_NUMBER: "string",// 发动机号
// REGISTER_DATE: "string",// 注册日期
// INSPECT_DATE: "string",// 检验有效期
// STAFF_ID: 0,//
// STAFF_NAME: "",//
// OPERATE_DATE: this.$moment.now().format("YYYY-MM-DD HH:mm:ss"),//
// VEHICLELICENSE_DESC: ""//
// }
// }
// 前面前端调用的 有签名的方法问题
// const config = {
// accessKeyId: 'LTAI5tCyuvisosdGk8sCbuhZ', // 替换为你的AK
// accessKeySecret: 'NhnqXZGE8pN1jFNnQL6BJDJQGPBaJY', // 替换为你的SK
// endpoint: 'ocr-api.cn-hangzhou.aliyuncs.com', // 服务端点
// apiVersion: '2019-12-30', // API版本
// action: 'RecognizeVehicleLicense' // 行驶证识别接口
// };
// const businessRes = await new Promise((resolve, reject) => {
// uni.request({
// url: `https://api.aliyun.com/api/auth/product/openAPIRequest`,
// method: "POST",
// data: {
// action: "RecognizeDrivingLicense",
// params: {
// Url: url
// }
// },
// success(res) {
// resolve(res);
// },
// });
// });
// console.log('businessResbusinessResbusinessResbusinessResbusinessResbusinessResbusinessResbusinessRes', businessRes);
},
// 确认绑定
async handleConfirmCode() {
console.log("this.saveCarText", this.saveCarText);
let _this = this;
let carText = _this.saveCarText.join("");
if (carText.length < 7) {
uni.showModal({
title: "温馨提示",
content: "请您完善车牌号再提交",
cancelColor: "#000000",
confirmText: "确定",
confirmColor: "#3CC51F",
success: (result) => {
if (result.confirm) {
}
},
});
return;
} else {
let reg =
/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/;
const careg = reg.test(carText);
if (!careg) {
uni.showModal({
title: "温馨提示",
content: "请输入正确车牌号",
showCancel: false,
});
return;
}
}
let isOk = true;
if (this.bindCarType === 2) {
// 暂时把非身份证的副页 都设置为不必填
if (!this.codeImgObj.frontIDCard || !this.codeImgObj.reverseIDcard) {
uni.showModal({
title: "温馨提示",
content: "请上传身份证!",
showCancel: false,
});
return;
}
if (!this.codeImgObj.frontDriverCard) {
// || !this.codeImgObj.reverseDriverCard
uni.showModal({
title: "温馨提示",
content: "请上传身份证!",
showCancel: false,
});
return;
}
if (!this.codeImgObj.frontLicenseCard) {
// || !this.codeImgObj.reverseLicenseCard
uni.showModal({
title: "温馨提示",
content: "请上传身份证!",
showCancel: false,
});
return;
}
// // 判断身份证和驾驶证 身份证号、名字 是否一致
// if (this.codeInfo.cardInfoCode.IDCARDINFO_CODE && this.codeInfo.drivingInfo.LICENSE_NUMBER && this.codeInfo.drivingInfo.LICENSE_NUMBER === this.codeInfo.cardInfoCode.IDCARDINFO_CODE ||
// this.codeInfo.cardInfoCode.IDCARDINFO_NAME && this.codeInfo.drivingInfo.IDCARDINFO_CODE && this.codeInfo.drivingInfo.IDCARDINFO_CODE === this.codeInfo.cardInfoCode.IDCARDINFO_NAME) {
// } else {
// uni.showModal({
// title: "温馨提示",
// content: "驾驶证和身份证信息不一致,请重新上传",
// showCancel: false,
// });
// return false;
// }
// // 比较 驾驶证的准驾车型 和 行驶证的车辆类型 是否一致
// const vehicleType = this.codeInfo.vehicleInfo.VEHICLE_TYPE || '';
// const approvedType = this.codeInfo.drivingInfo.LICENSE_TYPE || '';
// const requiredLicenseTypes = this.getRequiredLicenseTypes(vehicleType);
// if (requiredLicenseTypes && requiredLicenseTypes.length > 0) {
// if (!requiredLicenseTypes.includes(approvedType)) {
// uni.showModal({
// title: "温馨提示",
// content: `驾驶证准驾车型(${approvedType})不符合驾驶车辆(${vehicleType})的要求`,
// showCancel: false,
// });
// return false;
// }
// } else {
// uni.showModal({
// title: "温馨提示",
// content: `未知车型!`,
// showCancel: false,
// });
// return false;
// }
if (
this.codeInfo.vehicleInfo.PLATE_NUMBER !==
this.saveCarText.toString().replace(/,/g, "")
) {
uni.showModal({
title: "温馨提示",
content: `行驶证车牌号与绑定车牌号不一致!`,
showCancel: false,
});
return false;
}
// if (!(this.IDCardImgList && this.IDCardImgList.length > 0)) {
// uni.showModal({
// title: "温馨提示",
// content: "请上传身份证!",
// showCancel: false,
// });
// return;
// }
// if (!(this.driverLicenseList && this.driverLicenseList.length > 0)) {
// uni.showModal({
// title: "温馨提示",
// content: "请上传驾驶证!",
// showCancel: false,
// });
// return;
// }
// if (!(this.drivingLicenseList && this.drivingLicenseList.length > 0)) {
// uni.showModal({
// title: "温馨提示",
// content: "请上传行驶证!",
// showCancel: false,
// });
// return;
// }
this.isLoading = true;
console.log("this.codeInfothis.codeInfothis.codeInfo", this.codeInfo);
isOk = await this.handleSaveAllCarInfo();
} else {
let code = this.saveCarText.toString().replace(/,/g, "");
const vehicleInfo = await this.$api.$post(
"/EShangApiMain/Member/SynchroVEHICLELICENSE",
{
PLATE_NUMBER: code,
STAFF_NAME: "", //
VEHICLELICENSE_STATE: 1,
OPERATE_DATE: this.$moment.now().format("YYYY-MM-DD HH:mm:ss"), //
}
);
if (vehicleInfo.Result_Code !== 100) {
uni.showToast({
title: "存储失败!",
icon: "none",
});
isOk = false;
return false;
}
}
// 图片的上传对象格式
// let imgObj = {
// IDCardImgList: _this.IDCardImgList,
// driverLicenseList: _this.driverLicenseList,
// drivingLicenseList: _this.drivingLicenseList,
// };
let imgObj = this.codeImgObj;
this.isLoading = true;
if (isOk) {
_this.$api
.getCoop({
action_type: "BindVehicle",
LicensePlate: carText,
VehicleType: _this.newEnergy ? "新能源" : "",
ImageInfo: _this.bindCarType === 2 ? JSON.stringify(imgObj) : "",
})
.then((res) => {
console.log("res", res);
if (res.Result_Code === 100) {
uni.showModal({
content: res.Result_Desc,
cancelColor: "#000000",
showCancel: false,
confirmText: "确定",
confirmColor: "#3CC51F",
success: (result) => {
_this.isShow = false;
_this.getList();
_this.handleSearchCurrentList();
},
});
} else {
uni.showModal({
title: "温馨提示",
content: res.Result_Desc,
cancelColor: "#000000",
confirmText: "确定",
confirmColor: "#3CC51F",
success: (result) => {
if (result.confirm) {
}
},
});
}
});
}
this.isLoading = false;
},
// 一次性存储三份数据
async handleSaveAllCarInfo() {
const data = await this.$api.$post(
"/EShangApiMain/Member/SyncMemberLicense",
{
idcardinfoModel: this.codeInfo.cardInfoCode,
driverlicenseModel: this.codeInfo.drivingInfo,
vehiclelicenseModel: this.codeInfo.vehicleInfo,
}
);
if (data.Result_Code !== 100) {
uni.showToast({
title: `${data.Result_Desc}`,
icon: "none",
});
return false;
}
return true;
// const codeCarInfo = await this.$api.$post(
// "/EShangApiMain/Member/SynchroIDCARDINFO",
// this.codeInfo.cardInfoCode
// );
// console.log('codeCarInfo', codeCarInfo);
// if (codeCarInfo.Result_Code !== 100) {
// uni.showToast({
// title: "身份证信息有误,请重新上传图片!",
// icon: 'none'
// })
// return false
// }
// const drivingInfo = await this.$api.$post(
// "/EShangApiMain/Member/SynchroDRIVERLICENSE",
// this.codeInfo.drivingInfo
// );
// if (drivingInfo.Result_Code !== 100) {
// uni.showToast({
// title: "驾驶证信息有误,请重新上传图片!",
// icon: 'none'
// })
// return false
// }
// const vehicleInfo = await this.$api.$post(
// "/EShangApiMain/Member/SynchroVEHICLELICENSE",
// this.codeInfo.vehicleInfo
// );
// if (vehicleInfo.Result_Code !== 100) {
// uni.showToast({
// title: "行驶证信息有误,请重新上传图片!",
// icon: 'none'
// })
// return false
// }
// return true
},
// 一次性查当前的用户的三证id
async handleSearchCurrentList() {
const codeCarInfo = await this.$api.$post(
"/EShangApiMain/Member/GetIDCARDINFOList",
{
SearchParameter: {
MEMBERSHIP_ID: this.user.MEMBERSHIP_ID,
IDCARDINFO_STATE: 1,
},
PageIndex: 1,
PageSize: 10,
}
);
console.log("codeCarInfo", codeCarInfo);
const drivingInfo = await this.$api.$post(
"/EShangApiMain/Member/GetDRIVERLICENSEList",
{
SearchParameter: {
MEMBERSHIP_ID: this.user.MEMBERSHIP_ID,
DRIVERLICENSE_STATE: 1,
},
PageIndex: 1,
PageSize: 10,
}
);
console.log("drivingInfo", drivingInfo);
const vehicleInfo = await this.$api.$post(
"/EShangApiMain/Member/GetVEHICLELICENSEList",
{
SearchParameter: {
MEMBERSHIP_ID: this.user.MEMBERSHIP_ID,
VEHICLELICENSE_STATE: 1,
},
PageIndex: 1,
PageSize: 10,
}
);
console.log("vehicleInfo", vehicleInfo);
this.codeInfo = {
cardInfoCode:
codeCarInfo.Result_Data.List &&
codeCarInfo.Result_Data.List.length > 0
? codeCarInfo.Result_Data.List[0]
: { STAFF_ID: "" },
drivingInfo:
drivingInfo.Result_Data.List &&
drivingInfo.Result_Data.List.length > 0
? drivingInfo.Result_Data.List[0]
: { STAFF_ID: "" },
vehicleInfo:
vehicleInfo.Result_Data.List &&
vehicleInfo.Result_Data.List.length > 0
? vehicleInfo.Result_Data.List[0]
: { STAFF_ID: "" },
};
console.log("this.codeInfo", this.codeInfo);
},
// 一次性解绑当前三证
async handleDeleteCurrent() {
console.log("this.codeInfo", this.codeInfo);
console.log(
"this.codeInfo.cardInfoCode.IDCARDINFO_ID",
this.codeInfo.cardInfoCode.IDCARDINFO_ID
);
const codeCarInfo = await this.$api.$get(
"/EShangApiMain/Member/DeleteIDCARDINFO",
{
IDCARDINFOId: this.codeInfo.cardInfoCode.IDCARDINFO_ID,
}
);
if (codeCarInfo.Result_Code !== 100) {
uni.showToast({
title: "删除失败!",
icon: "none",
});
return false;
}
console.log(
"this.codeInfo.drivingInfo.DRIVERLICENSE_ID",
this.codeInfo.drivingInfo.DRIVERLICENSE_ID
);
const drivingInfo = await this.$api.$get(
"/EShangApiMain/Member/DeleteDRIVERLICENSE",
{
DRIVERLICENSEId: this.codeInfo.drivingInfo.DRIVERLICENSE_ID,
}
);
if (drivingInfo.Result_Code !== 100) {
uni.showToast({
title: "删除失败!",
icon: "none",
});
return false;
}
console.log(
"this.codeInfo.vehicleInfo.VEHICLELICENSE_ID",
this.codeInfo.vehicleInfo.VEHICLELICENSE_ID
);
const vehicleInfo = await this.$api.$get(
"/EShangApiMain/Member/DeleteVEHICLELICENSE",
{
VEHICLELICENSEId: this.codeInfo.vehicleInfo.VEHICLELICENSE_ID,
}
);
if (vehicleInfo.Result_Code !== 100) {
uni.showToast({
title: "删除失败!",
icon: "none",
});
return false;
}
return true;
},
// 改变车的能源类型
handleChangeCarType() {
if (this.haveCode) {
uni.showToast({
title: "已有关联车辆!如需修改请先解绑",
icon: "none",
duration: 2000,
});
return;
} else {
this.newEnergy = !this.newEnergy;
}
},
inputChange(value) {
let index = this.nowIndex;
this.saveCarText[index] = value;
let next = index + 1;
if (next < 7) {
this.nowIndex = next;
}
this.$forceUpdate();
},
delValue() {
let index = this.nowIndex;
this.saveCarText[index] = "";
let next = index - 1;
if (next > -1) {
this.nowIndex = next;
}
this.$forceUpdate();
},
confirmboard() {
this.isShow = false;
},
focusInput(value) {
// 判断第一个 有没有值 有值了的话 就显示数字键盘 没值的话 就显示中文键盘
if (value === 0) {
this.defaultKeyWordType = 1;
} else {
this.defaultKeyWordType = 2;
}
if (this.haveCode) {
uni.showToast({
title: "已有关联车辆!如需修改请先解绑",
icon: "none",
duration: 2000,
});
return;
}
this.isShow = true;
this.nowIndex = value;
},
// 取消绑定
async handleCancelCode() {
let _this = this;
let data = false;
if (this.bindCarType === 2) {
this.isLoading = true;
// 删除三个
data = await this.handleDeleteCurrent();
} else {
data = true;
}
if (data) {
if (_this.cards && _this.cards.length > 0) {
let obj = _this.cards[0];
uni.showModal({
title: "确认取消绑定?",
content: "取消绑定后将无法恢复",
success: function (res) {
if (res.confirm) {
this.isLoading = true;
_this.$api
.getCoop({
action_type: "UnbindVehicle",
MEMBERSHIPVEHICLE_ID: obj.MEMBERSHIPVEHICLE_ID,
LicensePlate: obj.License_Plate,
// Membership_Id: _this.user.MEMBERSHIP_ID,
})
.then((res) => {
_this.isLoading = false;
if (res.Result_Code === 100) {
// _this.IDCardImgList = [];
// _this.driverLicenseList = [];
// _this.drivingLicenseList = [];
_this.codeImgObj = {
frontIDCard: "", // 身份证正面
reverseIDcard: "", // 身份证反面
frontDriverCard: "", // 驾驶证正面
reverseDriverCard: "", // 驾驶证反面
frontLicenseCard: "", // 行驶证正面
reverseLicenseCard: "", // 行驶证反面
};
uni.showModal({
content: res.Result_Desc,
cancelColor: "#000000",
showCancel: false,
confirmText: "确定",
confirmColor: "#3CC51F",
success: (result) => {
_this.isShow = false;
_this.getList();
},
});
}
});
}
},
});
} else {
uni.showToast({
title: "暂无关联车辆!",
icon: "none",
duration: 2000,
});
_this.isLoading = false;
}
}
},
getList() {
let _this = this;
// uni.showLoading({ title: "加载中" });
_this.isLoading = true;
this.$api
.getCoop({
action_type: "GetVehicleList",
})
.then((res) => {
_this.isLoading = false;
_this.cards = res.Result_Data.List;
if (_this.cards && _this.cards.length > 0) {
let obj = _this.cards[0];
let code = obj.License_Plate;
if (obj.ImageInfo) {
let imgObj = JSON.parse(obj.ImageInfo);
_this.codeImgObj = imgObj;
_this.bindCarType = 2;
console.log("codeImgObj", _this.codeImgObj);
// _this.IDCardImgList = imgObj.IDCardImgList;
// _this.driverLicenseList = imgObj.driverLicenseList;
// _this.drivingLicenseList = imgObj.drivingLicenseList;
}
_this.saveCarText = code.split("");
_this.haveCode = true;
} else {
_this.saveCarText = ["皖", "A", "", "", "", "", "", ""];
_this.haveCode = false;
}
// uni.hideLoading();
_this.isLoading = false;
});
},
toAdd() {
uni.navigateTo({ url: "/pages/homeFn/bindingCar/index" });
},
},
onShow() {},
async onLoad() {
this.isLoading = true;
this.getList();
await this.handleSearchCurrentList();
this.$utils.addUserBehaviorNew();
},
};
</script>
<style lang="less" scoped>
.main {
width: 100%;
min-height: 100vh;
background: #f5f5f5;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.topMessage {
width: 100%;
height: 292rpx;
background: linear-gradient(270deg, #727377 0%, #424448 100%);
box-sizing: border-box;
padding: 48rpx 32rpx;
position: relative;
.messageTitle {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 32rpx;
color: #ffffff;
line-height: 44rpx;
text-align: left;
font-style: normal;
}
.messageList {
width: 100%;
margin-top: 16rpx;
.messageText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #b8b7b4;
line-height: 36rpx;
text-align: left;
font-style: normal;
margin-bottom: 4rpx;
}
}
.carLogo {
position: absolute;
right: 12rpx;
bottom: 0;
width: 240rpx;
height: 240rpx;
opacity: 0.8;
}
}
.codeBox {
width: calc(100% - 64rpx);
height: 152rpx;
background: #ffffff;
border-radius: 6rpx;
margin-left: 32rpx;
transform: translateY(-60rpx);
box-sizing: border-box;
padding: 40rpx 26rpx;
.input-box {
display: flex;
align-items: center;
margin-top: 24rpx;
.input-f {
text-align: center;
width: 72rpx;
height: 72rpx;
box-sizing: border-box;
border-radius: 5rpx;
line-height: 72rpx;
position: relative;
border: 1rpx solid #e7e7e6;
display: flex;
align-items: center;
justify-content: center;
margin-right: 8rpx;
.show-input {
font-size: 34rpx;
}
.text-sm {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 20rpx;
color: #716f69;
line-height: 28rpx;
text-align: left;
font-style: normal;
}
.text-tip-btn {
text-align: center;
width: 74rpx;
height: 74rpx;
border: 1rpx dashed #ededed;
border-radius: 5rpx;
background: #f8f8f8;
line-height: 70rpx;
}
}
.cccBg {
background: #f5f6f7;
}
.lastBox {
background: #f5f6f7;
border-radius: 2rpx;
border: 1rpx dashed #e7e7e6 !important;
}
.input-f:nth-last-child(1) {
margin-right: 0;
}
}
}
.confirmBox {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 32rpx;
height: 88rpx;
color: #ffffff;
line-height: 44rpx;
text-align: center;
font-style: normal;
width: calc(100% - 64rpx);
margin-left: 32rpx;
background: #ba922f;
border-radius: 6rpx;
display: flex;
align-items: center;
justify-content: center;
}
.cancelBox {
font-family: "PingFangSC";
font-weight: 400;
font-size: 32rpx;
height: 88rpx;
color: #b8b7b4;
line-height: 44rpx;
text-align: center;
font-style: normal;
width: calc(100% - 64rpx);
margin-left: 32rpx;
background: #ffffff;
border-radius: 6rpx;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #b8b7b4;
margin-top: 24rpx;
}
.bindPopup {
width: 100%;
box-sizing: border-box;
padding: 0 32rpx;
border-top-left-radius: 32rpx;
border-top-right-radius: 32rpx;
padding-bottom: env(safe-area-inset-bottom);
.fileItem {
margin-bottom: 24rpx;
.itemTitle {
font-family: "PingFangSC";
font-weight: 400;
font-size: 32rpx;
line-height: 44rpx;
text-align: left;
font-style: normal;
margin-bottom: 16rpx;
}
.uploadImgBox {
width: 100%;
margin-top: 16rpx;
display: flex;
align-items: center;
flex-wrap: wrap;
.submitImgBox {
width: 200rpx;
height: 200rpx;
background: #fff;
border-radius: 8rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-right: 32rpx;
.addIcon {
width: 40rpx;
height: 40rpx;
color: #b4b5ba;
margin-bottom: 24rpx;
}
.submitText {
font-size: 22rpx;
color: #b4b5ba;
}
}
.imgItem {
width: 200rpx;
height: 200rpx;
margin-right: 32rpx;
position: relative;
border-radius: 8rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
.closeBox {
width: 32rpx;
height: 32rpx;
border-radius: 0rpx 8rpx 0rpx 8rpx;
background: rgba(6, 10, 25, 0.5);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
.closeIcon {
width: 24rpx;
height: 24rpx;
}
}
}
}
}
}
.bindTypeBox {
width: 100%;
box-sizing: border-box;
padding: 0 32rpx;
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 8px;
.bindTrain {
font-family: "PingFangSC";
font-weight: 400;
font-size: 30rpx;
line-height: 36rpx;
color: #ba922f;
text-align: left;
font-style: normal;
}
}
}
page {
background: #fff;
}
.title {
color: #333333;
padding-bottom: 36rpx;
padding-left: 28rpx;
padding-top: 43rpx;
}
.banner {
height: 500rpx;
}
.car-card-add {
width: 502rpx;
height: 246rpx;
background: #ffffff;
border-radius: 8rpx;
box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(221, 221, 221, 0.48);
}
.car-card {
position: relative;
padding-left: 35rpx;
padding-top: 33rpx;
width: 534rpx !important;
height: 285rpx;
// margin-left 26rpx
image {
width: 534rpx;
height: 285rpx;
position: absolute;
z-index: -1;
left: 0;
top: 0;
}
.card-title {
background: linear-gradient(#f3e6dd, #e5ba9f);
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
font-size: 36rpx;
font-weight: bolder;
}
}
.pic-image {
width: 482rpx;
height: 281rpx;
margin-left: 128rpx;
margin-right: 140rpx;
margin-top: 138rpx;
margin-bottom: 54rpx;
}
.tip-text {
text-align: center;
}
.add-car {
color: #b0b0b0;
width: 504rpx;
height: 145rpx;
background: #f8f8f8;
border: 1rpx dashed #c3c3c3;
border-radius: 5rpx;
display: flex;
align-items: center;
flex-direction: column;
margin: 83rpx auto;
font-size: 24rpx;
justify-content: center;
line-height: 1.5;
}
</style>