zhywpt-sp/after-sale/rescind-carId/rescind-carId-select.vue

<template>
  <view class="content-wrap">
    <view @click="tabChange(true)">
      <view :class="state.isMyPeopple ? 'big' : 'nomal'"> 本人车辆 </view>
      <view :class="state.isMyPeopple ? 'tip' : ''"> </view>
    </view>
    <view @click="tabChange(false)" style="margin-left: 60rpx" class="">
      <view :class="state.isMyPeopple ? 'nomal' : 'big'"> 他人车辆 </view>
      <view :class="state.isMyPeopple ? '' : 'tip'"> </view>
    </view>
  </view>
  <view v-if="state.isMyPeopple" class="content">
    <view class="item" v-for="(item, i) in list" :key="i">
      <view class="iten-left">
       	<image :src="`${$imgUrl}che.png`" mode=""></image>
        <text>{{ item.name }}</text>
      </view>
      <view class="choose-item" @click="choose(i, item)">
        <view class="active" v-if="flag == i"> </view>
      </view>
    </view>
  </view>

  <view v-else class="content">
    <view class="title"> 车主信息 </view>
    <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.userPosImgUrl"
          class="icon"
          :src="`${$imgUrl}applyCard/renxiang.png`"
        >
        </image>
        <image v-else class="icon" :src="state.form.userPosImgUrl"></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.userNegImgUrl"
          class="icon"
          :src="`${$imgUrl}applyCard/guohui.png`"
        >
        </image>
        <image v-else class="icon" :src="state.form.userNegImgUrl"></image>
      </view>
    </view>

    <view class="shibie-wrapper">
      <view class="title"> 识别内容如下 </view>
      <u-form label-width="200" :model="state.form" ref="uForm">
        <u-form-item label="姓名">
          <u-input v-model="state.form.userName" />
        </u-form-item>

        <u-form-item label="性别">
          <u-input v-model="state.form.gender" type="select" />
        </u-form-item>
        <u-form-item label="身份证号">
          <u-input v-model="state.form.userIdNum" />
        </u-form-item>
        <u-form-item label="证件有效期">
          <u-input v-model="state.form.tmerValidity" type="select" />
        </u-form-item>
        <u-form-item label="地址">
          <u-input v-model="state.form.address" />
        </u-form-item>
      </u-form>
    </view>
    <view style="margin-top: 30rpx" class="title"> 行驶证信息 </view>
    <view class="item-tips">
      <view class="title"> 上传后请核对识别信息 </view>
      <view class="tip"> 如有错误请及时手动修改 </view>
    </view>
    <view class="picture-wrapper" @click="cardDbImageOcr('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.vehPosImgUrl"
          class="icon"
          :src="`${$imgUrl}applyCard/car-zhu.png`"
        >
        </image>
        <image v-else class="icon" :src="state.form.vehPosImgUrl"></image>
      </view>
    </view>
    <view class="picture-wrapper" @click="cardDbImageOcr('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.vehNegImgUrl"
          class="icon"
          :src="`${$imgUrl}applyCard/car-fu.png`"
        >
        </image>
        <image v-else class="icon" :src="state.form.vehNegImgUrl"></image>
      </view>
    </view>
    <view class="shibie-wrapper">
      <view class="title"> 识别内容如下 </view>
      <u-form label-width="200" :model="state.form" ref="uForm">
        <u-form-item label="车牌号">
          <u-input v-model="state.form.vehicleId" />
        </u-form-item>

        <u-form-item label="所有人">
          <u-input v-model="state.form.man" />
        </u-form-item>
        <u-form-item label="车辆类型">
          <u-input v-model="state.form.vehicleType" />
        </u-form-item>
        <u-form-item label="使用性质">
          <u-input v-model="state.form.character" />
        </u-form-item>
        <u-form-item label="车辆识别代码">
          <u-input v-model="state.form.vin" />
        </u-form-item>
        <u-form-item label="发动机号码">
          <u-input v-model="state.form.engineNum" />
        </u-form-item>

        <u-form-item label="注册日期">
          <u-input v-model="state.form.register" />
        </u-form-item>
        <u-form-item label="发证日期">
          <u-input v-model="state.form.issueDate" />
        </u-form-item>
        <u-form-item label="核定载人数">
          <u-input v-model="state.form.approvedCount" />
        </u-form-item>
        <u-form-item label="整备质量">
          <u-input v-model="state.form.maintenaceMass" />
        </u-form-item>
        <u-form-item label="外廓尺寸">
          <u-input v-model="state.form.vehicleDimensions" />
        </u-form-item>
        <u-form-item label="总质量">
          <u-input v-model="state.form.totalMass" />
        </u-form-item>
      </u-form>
    </view>

    <view class="green-tip">
      如识别信息有误，请手动修改，确认无误后，点击下一步！
    </view>

    <view class="action">
      <button type="default" class="button" @click="savaHandle()">
        下一步
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import selectCar from "./select-car.vue";
import { pathToBase64 } from "@/utils/image-tools/index.js";
import { reactive } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
  etcOcrCard,
  etcUserCardInfoSubmit,
  fileUpload,
  etcCarOcrCard,
} from "@/utils/network/api.js";
import { request } from "@/utils/network/request.js";

import { stringToJson } from "@/utils/network/encryption";
import navBar from "../../components/nav-bar/nav-bar2.vue";

// ##################

import { ref } from "vue";
import { navTo } from "../../utils/utils";
const list = reactive([
  {
    name: "A12345",
  },
  {
    name: "B12345",
  },
  {
    name: "C12345",
  },
]);
const flag = ref("0");

const choose = (i, item) => {
  flag.value = i;
  console.log("选择得数据", item);
  navTo("/after-sale/rescind-carId/base-change-people");
};

// ######################

const state = reactive({
  ocrData: {
    name: "",
    gender: "",
    idno: "",
    address: "",
    begindate: "",
    enddate: "",
    tel: "",
    tmerValidity: "",
  },
  form: {
    userName: "", //开户人姓名
    userIdNum: "", //用户证件号码
    userPosImgUrl: "", //身份证正面
    userNegImgUrl: "", //身份证反面
    address: "", //开户人地址
    gender: "",
    tmerValidity: "",
    man: "", //所有人
    character: "", //使用性质
    register: "", //注册日期

    customerId: "", //用户编号
    vehicleId: "", //车牌编号
    issueDate: "", //发证日期
    vehPosImgUrl: "", //行驶证正面
    vehNegImgUrl: "", //行驶证证反面
    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: "5201018892300000001",
  },
  orderId: "",
  isMyPeopple: true,
  buchongData: {
    conmpany: "李某一",
    type: "居民身份证",
    card: "23728347626342332",
    phone: "",
  },
});
const savaHandle = () => {
  navTo("/after-sale/rescind-carId/result");

  // var data = state.form
  // const options = {navTo
  // 	type: 2,
  // 	data: data,
  // 	method: 'POST',
  // 	showLoading: true,
  // }
  // request(etcUserCardInfoSubmit, options).then((res) => {
  // 	const data = stringToJson(res.bizContent);
  // 	uni.navigateTo({
  // 		url: `/pages/applyCard/car-release?orderId=${state.orderId}`
  // 	})
  // })
};
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.proxyUrl = data.data.url;
          });
        })
        .catch((error) => {});
    },
  });
};

//tab切换
const tabChange = (val: any) => {
  if (val) {
    state.isMyPeopple = true;
  } else {
    state.isMyPeopple = false;
  }
  state.form = {
    orderId: state.orderId, //订单ID
    userName: "", //开户人姓名
    userIdType: "101", //用户证件类型 101//身份证
    userIdNum: "", //用户证件号码
    userPosImgUrl: "", //身份证正面
    userNegImgUrl: "", //身份证反面
    tel: "", //开户人手机号
    address: "", //开户人地址
    sceneType: "", //用户协议支撑服务场景（发行服务机构和用户签订的协议）
    channelId: "", //渠道id
    gender: "",
    customerIdVld: "",
    agentName: "",
    agentgender: "",
    agentIdType: "101",
    agentIdNum: "",
    agentPosImgUrl: "",
    agentNegImgUrl: "",
    proxyUrl: "",
    agentAddress: "",
    tmerValidity: "",
  };
};
onLoad((option: any) => {
  state.form.orderId = option.orderId;
  state.orderId = option.orderId;
});

const cardDbImageOcr = (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.man = data.man;
              state.form.vehicleType = data.vehicle;
              state.form.character = data.character;
              state.form.vin = data.vin;
              state.form.engineNum = data.engine;
              state.form.register = data.register;
              state.form.issueDate = data.issue;
              state.form.vehPosImgUrl = 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.vehNegImgUrl = data.imageUrl;
            }
          });
        })
        .catch((error) => {});
    },
  });
};
//orc接口调用
const cardImageOcr = (val: any) => {
  console.log("点击了");
  var imageType = val;
  uni.chooseImage({
    count: 1, //只能选取一张照片
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["camera", "album"], //从相册选择
    success: function (res) {
      console.log(res);
      pathToBase64(res.tempFilePaths[0])
        .then((path) => {
          console.log(path);
          console.log("哈哈哈");
          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(etcOcrCard, options).then((res) => {
            console.log(res);
            const data = stringToJson(res.bizContent);
            if (val === "1") {
              state.form.userName = data.name;
              state.form.gender = data.gender;
              state.form.userIdNum = data.idno;
              state.form.userPosImgUrl = data.imageUrl;
              state.form.address = data.address;
            } else {
              state.form.tmerValidity = data.begindate + "-" + data.enddate;
              state.form.userNegImgUrl = data.imageUrl;
            }
          });
        })
        .catch((error) => {});
    },
  });
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 35rpx;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #000000;
  line-height: 80rpx;
  margin-bottom: 10rpx;
}

.content-wrap {
  position: relative;
  margin-top: 50rpx;
  padding: 0rpx 30rpx;
  display: flex;

  .big {
    font-size: 30rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 24rpx;
  }

  .nomal {
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    line-height: 24rpx;
  }

  .tip {
    margin-top: -5px;
    width: 117rpx;
    height: 16rpx;
    background: #00b38b;
    opacity: 0.3;
  }
}

.content {
  padding: 50rpx 30rpx 50rpx 30rpx;

  .item {
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 130rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
    border-radius: 20rpx;
    margin-bottom: 30rpx;

    .iten-left {
      display: flex;
      align-items: center;

      image {
        width: 150rpx;
        height: 90rpx;
      }

      text {
        margin-left: 20rpx;
        font-size: 32rpx;
        font-family: Noto Sans S Chinese;
        font-weight: 400;
        color: #333333;
      }
    }

    .choose-item {
      width: 44rpx;
      height: 44rpx;
      background: #ffffff;
      border: 2rpx solid #00b38b;
      border-radius: 50%;
      margin-right: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: content-box;
    }

    .active {
      width: 34rpx;
      height: 34rpx;
      background: #00b38b;
      border-radius: 50%;
    }
  }

  .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;
    }
	::v-deep .u-form-item {
		border-bottom: 1rpx solid #DCDCDC;
		padding: 10rpx 0;
	}
  }

  .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>