zhywpt-sp/subpackage/applyCard/car-release.vue

<template>
  <navBar title="行驶证信息上传" :scrollTop="scrollTop"></navBar>
  <navBgCar></navBgCar>
  <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.vehPosImgUrl"
          class="icon"
          :src="`${$imgUrl}applyCard/car-zhu.png`"
        >
        </image>
        <image
          v-else
          class="icon"
          :src="strReplace(state.form.vehPosImgUrl)"
        ></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.vehNegImgUrl"
          class="icon"
          :src="`${$imgUrl}applyCard/car-fu.png`"
        >
        </image>
        <image
          v-else
          class="icon"
          :src="strReplace(state.form.vehNegImgUrl)"
        ></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="strReplace(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" placeholder='请输入车牌号' v-model="state.form.vehicleIdNum" /> -->
            <car-number-input
              @numberInputResult="carNumber"
              :defaultStr="state.form.vehicleIdNum"
            ></car-number-input>
          </u-form-item>

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

          <u-form-item label="注册日期">
            <u-input
              inputAlign="right"
              placeholder="请输入注册日期"
              v-model="state.form.register"
            />
          </u-form-item>
          <u-form-item label="发证日期">
            <u-input
              inputAlign="right"
              placeholder="请输入发证日期"
              v-model="state.form.issueDate"
            />
          </u-form-item>
          <u-form-item label="核定载人数">
            <u-input
              inputAlign="right"
              placeholder="请输入核定载人数"
              v-model="state.form.approvedCount"
            />
          </u-form-item>
          <u-form-item label="整备质量">
            <u-input
              inputAlign="right"
              placeholder="请输入整备质量"
              v-model="state.form.maintenaceMass"
            />
          </u-form-item>
          <!-- <u-form-item label="外廊尺寸">
						<u-input inputAlign="right" placeholder='请输入外廊尺寸' v-model="state.form.vehicleDimensions" />
					</u-form-item> -->
          <veiw class="form-item">
            <label>外廊尺寸</label>
            <view class="input-box">
              <text class="sub-label">长</text>
              <input v-model="state.outlineL" @input="outlineInput" />
              <text class="sub-text">X</text>
              <text class="sub-label">宽</text>
              <input v-model="state.outlineW" @input="outlineInput" />
              <text class="sub-text">X</text>
              <text class="sub-label">长</text>
              <input v-model="state.outlineH" @input="outlineInput" />
              <text class="sub-text">mm</text>
            </view>
          </veiw>
          <u-form-item label="总质量">
            <u-input
              inputAlign="right"
              placeholder="请输入总质量"
              v-model="state.form.totalMass"
            />
          </u-form-item>
          <u-form-item label="车辆用户类型">
            <u-input
              @click="state.actionSheetShow = true"
              placeholder="请输入车辆用户类型"
              inputAlign="right"
              v-model="state.form.useUserTypeName"
              height="38"
              type="textarea"
              :autoHeight="true"
            />
          </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> -->
    <u-action-sheet
      @click="selectConfirm"
      :list="state.actionSheetList"
      v-model="state.actionSheetShow"
    >
    </u-action-sheet>

    <u-popup mode="bottom" v-model="state.show">
      <view
        v-if="state.data.transferLogs && state.data.transferLogs.length"
        class=""
      >
        <view class="bettwen-center">
          <view style="padding: 20rpx" class="title"> 选择卡签 </view>
          <view class="goto"> 直接跳过，不使用此套卡签 </view>
        </view>
        <view
          @click="guohuAction(item)"
          class="card"
          v-for="(item, index) in state.data.transferLogs"
          :key="index"
          style="margin-top: 30rpx; margin-bottom: 30rpx"
        >
          <view v-if="item.status === 'WAITING'" class="card-left">
            <image :src="`${$imgUrl}card2.png`" mode=""></image>
            <view class="card-center">
              <view class="flex">
                <view class=""> 卡号： </view>
                <view class="card-center-head">
                  {{ item.cardId }}
                </view>
              </view>
              <view style="margin-top: 10rpx" class="flex">
                <view class=""> OBU编号： </view>
                <view class="card-center-head">
                  {{ item.obuId }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import navBgCar from "./components/nav-bg-car4";
import navBar from "@/components/nav-bar/nav-bar2.vue";
import carNumberInput from "@/components/car-number-input/car-number-input.vue";
import { pathToBase64 } from "@/utils/util/imageTool.js";
import {
  etcCarCardInfoSubmit,
  etcCarOcrCard,
  fileUpload,
  queryGuoHuJianCe,
  queryGuoHuCaoZuo,
} from "@/utils/network/api.js";
import { request } from "@/utils/network/request.js";

import { stringToJson } from "@/utils/network/encryption";
import { onLoad, onPageScroll } from "@dcloudio/uni-app";
import { getObuStatus } from "@/datas/obuStatus.js";

import { getEtcCardStatus } from "@/datas/etcCardStatus.js";
import { getItem } from "@/utils/storage";

const scrollTop = ref(0);

//监听页面滚动
onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
});

//车牌号输入
const carNumber = (val: any) => {
  state.form.vehicleIdNum = val.trim();
};

//提交车辆信息
const savaHandle = () => {
  state.form.vehicleId =
    state.form.vehicleIdNum + "_" + state.vehiclePlateColor;
  const options = {
    type: 2,
    data: state.form,
    method: "POST",
    showLoading: true,
  };
  request(etcCarCardInfoSubmit, options)
    .then((res) => {
      const data = stringToJson(res.bizContent);
      queryGuoHuJianCeAction().then((value) => {
        if (value.transferLogs && value.transferLogs.length > 0) {
          state.data.transferLogs = value.transferLogs;
          state.show = true;
        } else {
          if (state.type == 1 || state.type == "1") {
            uni.redirectTo({
              url: `/subpackage/applyCard/addAddress?orderId=${
                state.form.orderId
              }&clientFee=${getItem("clientFee")}&&id=${getItem("productId")}`,
            });
          } else {
            uni.redirectTo({
              // url: `/subpackage/applyCard/choice-product?orderId=${state.form.orderId}`,
              url: `/subpackage/applyCard/release-products?orderId=${
                state.form.orderId
              }&clientFee=${getItem("clientFee")}&&id=${getItem("productId")}`,
            });
          }
        }
      });
    })
    .catch((res) => {
      console.log(res);
    });
};

const selectConfirm = (index: any) => {
  console.log(index);
  state.form.useUserType = state.actionSheetList[index].value;
  state.form.useUserTypeName = state.actionSheetList[index].text;
};

//车头照图片上传
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({
  data: {
    transferLogs: [],
  },
  actionSheetShow: false,
  actionSheetList: [
    {
      text: "普通车",
      value: 0,
    },
    {
      text: "道路运输证经营范围仅有“货物专用运输(集装箱) ”的牵引车办理J类型集装箱",
      value: 24,
    },
    {
      text: "道路运输证经营范围不含“货物专用运输(集装箱)”的牵引车",
      value: 27,
    },
    {
      text: '道路运输证经营范围除“货物专用运输 (集装 箱)"外，还有“普通货运”等其他项目的牵引车办理J2类型集装箱',
      value: 28,
    },
  ],
  form: {
    orderId: "", //订单ID
    man: "", //所有人
    character: "", //使用性质
    register: "", //注册日期

    customerId: "", //用户编号
    vehicleId: "",
    vehicleIdNum: "", //车牌编号
    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", //编号渠道
    scenePayType: "", //
    transportIdNum: "", //道路运输证编号
    licenseIdNum: "", //经营许可证编号
    vehBodyUrl: "", //车身照片
    proxyUrl: "", //委托书地址
  },
  vehiclePlateColor: undefined,
  orderId: "",
  type: undefined, //标记来源是否登录 1为未登录数据 - 需要新增地址
  show: false,
  isMyPeopple: true,
  outlineL: "",
  outlineW: "",
  outlineH: "",
});
onLoad((option: any) => {
  state.form.orderId = option.orderId;
  state.type = option.type;
  state.vehiclePlateColor = option.vehiclePlateColor;
});

//外廓尺寸输入框
const outlineInput = (e) => {
  state.form.vehicleDimensions =
    state.outlineL + "X" + state.outlineW + "X" + state.outlineH + "mm";
};

//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.vehicleIdNum = 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.replaceAll("x", "X");
              let arr = data.overall.split("x");
              state.outlineL = arr[0]; //外廓 长
              state.outlineW = arr[1]; //外廓 宽
              state.outlineH = arr[2].substring(0, arr[2].length - 2); //外廓 高
              state.form.totalMass = parseFloat(data.gross);
              state.form.vehNegImgUrl = data.imageUrl;
            }
          });
        })
        .catch((error) => {});
    },
  });
};

//过户检测
const queryGuoHuJianCeAction = () => {
  var data = {
    orderId: state.form.orderId,
  };
  const options = {
    type: 2,
    data: data,
    method: "POST",
    showLoading: true,
  };

  return new Promise(async (resolve, reject) => {
    const res = await request(queryGuoHuJianCe, options);
    const data = stringToJson(res.bizContent);
    resolve(data);
  }).catch((error) => {
    reject(error);
  });
};

//过户操作
const guohuAction = (val) => {
  var data = {
    orderId: state.form.orderId,
    serviceType: "USE",
    obuId: val.obuId,
    cardId: val.cardId,
  };
  const options = {
    type: 2,
    data: data,
    method: "POST",
    showLoading: true,
  };

  return new Promise(async (resolve, reject) => {
    const res = await request(queryGuoHuCaoZuo, options);
    const data = stringToJson(res.bizContent);
    state.show = false;
    uni.navigateTo({
      url: `/subpackage/applyCard/choice-product?orderId=${state.form.orderId}`,
    });
  }).catch((error) => {
    reject(error);
  });
};

//替换图片地址
const strReplace = (str: string) => {
  return str.replace("192.168.101.145:9000", "222.85.144.89:19002");
};
</script>

<style lang="scss" scoped>
.goto {
  margin-right: 20rpx;
  padding: 10rpx;
  color: #00b38b;
  border: 1rpx solid #00b38b;
  border-radius: 20rpx;
}

.flex {
  display: flex;
  align-items: center;
}

.bettwen-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card {
  margin: 20rpx;
  height: 150rpx;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
  border-radius: 20rpx;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;

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

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

    .card-center {
      margin-left: 30rpx;

      .card-center-head {
        font-size: 32rpx;
        font-family: Noto Sans S Chinese;
        font-weight: 400;
        color: #333333;
      }

      .tips {
        font-size: 26rpx;
        font-family: Noto Sans S Chinese;
        font-weight: 400;
        color: #666666;

        .tips-card {
          width: 70rpx;
          height: 40rpx;
          background: #d3f2ef;
          border-radius: 6rpx;
          font-size: 20rpx;
          font-family: Noto Sans S Chinese;
          font-weight: 400;
          color: #0a8f8a;
          padding: 5rpx 10rpx;
          margin-left: 20rpx;
        }
      }
    }
  }

  .choose-item {
    margin-right: 20rpx;
    width: 50rpx;
    height: 50rpx;
    border: 1rpx solid #00b38b;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

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

.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;
  }
}
.form-item {
  display: flex;
  font-size: 28rpx;
  justify-content: space-between;
  align-items: center;
}
.form-item label {
}
.form-item .input-box {
  display: flex;
  align-items: center;
}
.form-item .input-box input {
  width: 90rpx;
  background: #f1f1f1;
  border-radius: 8rpx;
  padding: 0 5rpx;
}
.form-item .sub-text {
  color: #808080;
  padding-left: 10rpx;
}
.form-item .sub-label {
  padding: 0 10rpx;
}
</style>