zhywpt-sp/subpackage/after-sale/to-bookkeeping-card/base-change-people.vue

<template>
  <view class="content">
    <view class="item-tips">
      <view class="picture-wrapper" @click="IdentityByOrc(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
            class="icon"
            :src="`${$imgUrl}applyCard/renxiang.png`"
            v-if="!state.imageUrl"
          ></image>
          <image class="icon" :src="state.imageUrl" v-else></image>
        </view>
      </view>
      <view class="picture-wrapper" @click="IdentityByOrc(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
            class="icon"
            :src="`${$imgUrl}applyCard/guohui.png`"
            v-if="!state.imageUrl2"
          ></image>
          <image class="icon" :src="state.imageUrl2" v-else></image>
        </view>
      </view>
    </view>
    <view class="shibie-wrapper">
      <view class="title"> 个人信息 </view>
      <view class="">
        <u-field
          required
          labelWidth="200"
          v-model="state.ocrData.name"
          input-align="right"
          label="姓名"
        >
        </u-field>
        <u-field
          required
          labelWidth="200"
          v-model="state.ocrData.gender"
          input-align="right"
          label="性别"
        >
        </u-field>
        <u-field
          required
          labelWidth="200"
          v-model="state.ocrData.idno"
          input-align="right"
          label="证件号"
        >
        </u-field>
        <u-field
          required
          labelWidth="200"
          v-model="state.ocrData.address"
          input-align="right"
          label="地址"
        >
        </u-field>
        <u-field
          required
          labelWidth="200"
          v-model="state.ocrData.termValidity"
          input-align="right"
          label="证件有效期"
        >
        </u-field>
        <u-field
          required
          labelWidth="200"
          v-model="state.ocrData.phone"
          input-align="right"
          label="联系方式"
        >
        </u-field>
      </view>
    </view>

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

<script setup lang="ts">
import { reactive } from "vue";
import { navTo } from "@/utils/utils";
import { etcOcrCard } from "@/utils/network/api.js";
import { pathToBase64 } from "@/utils/util/imageTool.js";
import { stringToJson } from "@/utils/network/encryption";
import { request } from "@/utils/network/request.js";
const savaHandle = () => {
  console.log("执行点击事件");
  navTo("/subpackage/after-sale/to-bookkeeping-card/car-change");
  // uni.navigateTo({
  // 	url: '/pages/applyCard/car-release'
  // })
};
const tabChange = (val) => {
  if (val) {
    state.isMyPeopple = true;
  } else {
    state.isMyPeopple = false;
  }
};

const state = reactive({
  ocrData: {
    name: "",
    gender: "",
    idno: "",
    address: "",
    phone: "18225525252",
    termValidity: "",
  },
  isMyPeopple: true,
  buchongData: {
    conmpany: "李某一",
    type: "居民身份证",
    card: "23728347626342332",
    phone: "",
  },
  imageUrl: "",
  imageUrl2: "",
});

//orc身份证
const IdentityByOrc = (imageType) => {
  uni.chooseImage({
    count: 1, //只能选取一张照片
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["camera", "album"], //从相册选择
    success: function (res) {
      if (imageType == 1) {
        state.imageUrl = res.tempFilePaths[0];
      } else {
        state.imageUrl2 = res.tempFilePaths[0];
      }
      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(etcOcrCard, options).then((res) => {
            const data = stringToJson(res.bizContent);
            console.log(data);
            if (imageType == 1) {
              state.ocrData.name = data.name;
              state.ocrData.gender = data.gender;
              state.ocrData.idno = data.idno;
              state.ocrData.address = data.address;
            } else {
              state.ocrData.termValidity = data.begindate + "-" + data.enddate;
            }
          });
        })
        .catch((error) => {});
    },
  });
};
</script>

<style lang="scss" scoped>
.content {
  padding: 50rpx 30rpx 50rpx 30rpx;

  .action {
    margin-top: 60rpx;
    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-flex {
		width: 100%;
	}
	
	::v-deep .u-field {
		border-bottom: 1rpx solid #DCDCDC;
	}
  }

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