qiubinghui
/
zhywpt-sp
關注 1
收藏 0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

个人用户信息变更对接

yxb
zengyuehua 2 年之前
父節點
a6e1bfa7d3
當前提交
8740a8236c
共有 5 個檔案被更改，包括 391 行新增 和 173 行删除
分割檢視 顯示文件統計
  1. 2
    2
      datas/fileURL.js
  2. 375
    155
      personal-center/setting/personal-information/user-card.vue
  3. 9
    12
      personal-center/setting/personal-information/user-change.vue
  4. 1
    0
      utils/network/api.js
  5. 4
    4
      utils/util/fileData.js

+ 2
- 2
datas/fileURL.js 查看文件

@@ -1,4 +1,4 @@
// export const fileURL = 'http://47.94.96.52/'
export const fileURL = 'http://222.85.144.89:19002/default-bucket/'
// export const fileURL = 'http://222.85.144.89:19002/default-bucket/'
export const downloadFileURL = 'http://192.168.100.63:8087/user-export-excel/'
// export const fileURL = 'http://192.168.100.63:8087/default-bucket/'
export const fileURL = 'http://192.168.100.63:8087/default-bucket/'

+ 375
- 155
personal-center/setting/personal-information/user-card.vue 查看文件

@@ -1,42 +1,115 @@
<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="content">
<view class="item-tips">
<view class="title"> 上传后请核对识别信息 </view>
<view class="tip"> 如有错误请及时手动修改 </view>
</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 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>
<view class="item-row">
<view class="item-left">
<view class="title">身份证国徽面</view>
<view class="desc">补传身份证国徽面</view>
<view class="flag"><text>拍摄示例</text> </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="item-right" @click="chooseImage(2)">
<view class="empty-node"></view>
<image :src="state.installImg ?? defInstallImg"></image>
<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.customerName" placeholder='请输入姓名' />
</u-form-item>
<!--
<u-form-item label="性别">
<u-input placeholder='请选择性别' v-model="state.form.gender" @click="userGenderAction()"
type="select" />
</u-form-item> -->
<!-- <u-form-item label="身份证号">
<u-input placeholder='请输入身份证' type="idcard" v-model="state.form.userIdNum" />
</u-form-item> -->
<u-form-item label="地址">
<u-input placeholder='请输入地址' height='38' type='textarea' :autoHeight='true'
v-model="state.form.address" />
</u-form-item>
<!-- <u-form-item label="证件有效期">
<u-input v-model="state.form.begindate" type="select" />
</u-form-item> -->
<u-form-item label="手机号" class="phoneBox">
<u-input placeholder='手机号' type="number" v-model="state.form.tel" />
<u-button type="success" size="mini" @click="getCode" v-if="waitTime==0">获取验证码</u-button>
<text class="btn" v-else>{{waitTime}}后重试</text>
</u-form-item>
<u-form-item label="验证码">
<u-input placeholder='如果修改手机号请输入验证码' type="number" v-model="state.form.newMobileCode" />
</u-form-item>
</u-form>
</view>

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

<view class="action">
<button type="default" class="button" @click="savaHandle()">
下一步
</button>
</view>
</view>
<view class="btn">
<submit-button @submit="saveHandle" title="保存"></submit-button>
</view>
</view>
</template>

<script lang="ts" setup>
import {
reactive
pathToBase64
} from "@/utils/image-tools/index.js";
import {
getItem
} from "@/utils/storage.ts"
import {
reactive,
ref
} from "vue";
import {
msg,
navTo
} from '@/utils/utils';
checkStr
} from "@/utils/utils";
import {
onLoad,
onShow
} from "@dcloudio/uni-app";
import {
etcOcrCard,
userInfoChange,
sendCode
} from "@/utils/network/api.js";

import {
request
} from "@/utils/network/request.js";

import {
stringToJson
} from "@/utils/network/encryption.js";
import {
fileURL
} from "@/datas/fileURL.js";
@@ -44,36 +117,174 @@
const defHeadstockImg = `${fileURL}image/applyCard/renxiang.png`;
const defInstallImg = `${fileURL}image/applyCard/guohui.png`;

// const state = reactive({
// headstockImg: null,
// installImg: null，
// });
const state = reactive({
headstockImg: null,
installImg: null
});
genderList: [{
value: '男',
label: '男'
},
{
value: '女',
label: '女'
}
],
codeTips: "获取验证码",
form: {
// orderId: "", //订单ID
customerId: '', //用户编号
customerName: "", //开户人姓名
openId: getItem('openId'),
// userIdType: "101", //用户证件类型 101//身份证
// userIdNum: "", //用户证件号码
userPosImgUrl: "", //身份证正面
userNegImgUrl: "", //身份证反面
tel: "", //开户人手机号
address: "", //开户人地址
newMobileCode: "" //手机号验证码
// sceneType: "", //用户协议支撑服务场景（发行服务机构和用户签订的协议）
// channelId: "", //渠道id
// gender: "",
// customerIdVld: "",
// agentName: "",
// agentGender: "",
// agentTel: '',
// agentPhone: "",
// agentIdType: "101",
// agentIdNum: "",
// agentPosImgUrl: "",
// agentNegImgUrl: "",
// proxyUrl: "",
// agentAddress: "",
// agentIdVld: '',
}
})


const getCode = () => {
console.log(123);
if (state.form.tel) {
sendCodeApi()
codeInterval()
} else {
uni.showToast({
title: '请输入手机号',
icon: 'none'
});
}

}
let waitTime = ref(0)
//倒计时函数
const codeInterval = () => {
waitTime.value = 60
let timer = setInterval(() => {
if (waitTime.value == 1) {
clearInterval(timer)
}
waitTime.value -= 1
}, 1000)
}

// 发送验证码
const sendCodeApi = (type) => {
//参数说明
let options = {
type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
data: {
mobile: state.form.tel
}, //请求参数
method: "POST", //提交方式(默认POST)
showLoading: true, //是否显示加载中(默认显示)
};

//调用方式
request(sendCode, options)
.then((res) => {
let data = stringToJson(res.bizContent)
console.log(data, "#################");
if (data.info == "成功.") {
console.log('######################CCCCCCCCCCCCCCCCC');
}
})
.catch((err) => {
console.log(err);
});
}


//选择图片
const chooseImage = (type: number) => {
//orc接口调用
const cardImageOcr = (val: any) => {
console.log("点击了");
var imageType = val;
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
//sourceType: ['album','camera'],
count: 1, //只能选取一张照片
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
sourceType: ["camera", "album"], //从相册选择
success: function(res) {
console.log(res.tempFilePaths);
if (type === 1) {
state.headstockImg = res.tempFilePaths[0];
} else {
state.installImg = res.tempFilePaths[0];
}
}
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) => {
// const data = stringToJson(res.bizContent);
const data = JSON.parse(res.bizContent)
if (val === "1") {
state.form.customerName = data.name;
state.form.userPosImgUrl = data.imageUrl;
state.form.address = data.address;
} else {
state.form.customerIdVld = data.enddate;
state.form.userNegImgUrl = data.imageUrl;
}
});
})
.catch((error) => {});
},
});
}
};

//下一步
const saveHandle = () => {
if (!state.headstockImg || !state.installImg) {
msg('请按照要求上传图片！');
return;
}
msg('保存成功')
const savaHandle = () => {
console.log(state.form);
const options = {
type: 2,
data: state.form,
method: "POST",
showLoading: true,
};
request(userInfoChange, options).then((res) => {
// const data = stringToJson(res.bizContent);
const data = JSON.parse(res.bizContent)
console.log(data);
uni.navigateBack({
delta: 1
});
});
}

onLoad((options) => {
console.log(options.customerId);
state.form.customerId = options.customerId
})
</script>

<style>
@@ -83,139 +294,148 @@
</style>
<style lang="scss" scoped>
.main {
overflow: hidden;

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

.item-left {
.title {
font-size: 34rpx;
color: #333;
font-weight: bold;
// overflow: hidden;

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

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

.desc {
font-size: 24rpx;
color: #999;
margin: 10rpx 0;
.item-tips {
.title {
font-size: 30rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
line-height: 24rpx;
}

.flag {
width: 110rpx;
height: 45rpx;
line-height: 42rpx;
color: #0A8F8A;
.tip {
margin-top: 16rpx;
border-radius: 6rpx;
text-align: center;
font-size: 20rpx;
background: #D9F8F1;
font-size: 24rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #999999;
line-height: 24rpx;
}
}

.item-right {
width: 295rpx;
height: 188rpx;
position: relative;
.picture-wrapper {
margin-top: 40rpx;

image {
position: relative;
z-index: 10;
width: 100%;
height: 188rpx;
}
.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;

&::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;
.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;
}
}
}

&::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;
.icon {
width: 294rpx;
height: 188rpx;
}
}

.empty-node {
position: absolute;
z-index: 0;
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;
.shibie-wrapper {
margin-top: 60rpx;

.title {
font-size: 30rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
line-height: 30rpx;
}

&::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;
.phoneBox {
::v-deep .u-form-item--right__content__slot {
display: flex;

.btn {
flex: 1;
background: transparent;
font-size: 30rpx;
color: #15E5C1;
z-index: 999;

}
}
}
}
}

.hint {
display: flex;
flex-direction: row;
justify-content: center;
font-size: 26rpx;
color: #666666;
padding: 0px 30rpx;
margin-top: 60rpx;

.icon {
width: 36rpx;
height: 36rpx;
margin-right: 10rpx;
}
.buchong-wrapper {
margin-top: 60rpx;

view {
width: calc(100% - 36rpx);
.title {
font-size: 30rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
line-height: 30rpx;
}
}
}

.btn {
margin: 470rpx 40rpx 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>

+ 9
- 12
personal-center/setting/personal-information/user-change.vue 查看文件

@@ -21,17 +21,18 @@
</u-field>
</view>

<view class="subBtn">
<!-- <submit-button title="提交绑定" form-type="submit" @submit="formSubmit">
</submit-button> -->
</view>
<!-- <view class="subBtn">
<submit-button title="去修改" form-type="submit" @submit="formSubmit">
</submit-button>
</view> -->
</template>
<script setup lang="ts">
import {
reactive
} from "vue";
import {
msg
msg,
navTo
} from "@/utils/utils";
import {
stringToJson
@@ -60,12 +61,7 @@
tel:''

},
buchongData: {
'conmpany': '李某一',
'type': '居民身份证',
'card': '23728347626342332',
'phone': ''
},
customerId:''
})

const getUserinfo = () => {
@@ -81,6 +77,7 @@
state.ocrData.name=data.list[0].customerName
state.ocrData.userCardId=data.list[0].customerIdNum
state.ocrData.tel=data.list[0].tel
state.customerId=data.list[0].customerId
});
}

@@ -91,7 +88,7 @@
}

const formSubmit = () => {
msg('提交绑定')
navTo(`/personal-center/setting/personal-information/user-card?customerId=${state.customerId}`)
};
onLoad(()=>{

+ 1
- 0
utils/network/api.js 查看文件

@@ -95,6 +95,7 @@ export const selectCarInfo = "1030"; //车辆管理信息查询
export const delCarInfo = "1031"; //车辆管理信息删除
export const infoQuery= "935"; //8.212.文本信息查询接口
export const userInfoQuery= "510"; //-用户信息变更查询接口
export const userInfoChange= "520"; //-用户信息变更查询接口

+ 4
- 4
utils/util/fileData.js 查看文件

@@ -1,7 +1,7 @@
// import {
// TextEncoder,
// TextDecoder
// } from "text-decoding";
import {
TextEncoder,
TextDecoder
} from "text-decoding";


export function IntegerToHexString(num, nLen) {

Write Preview
Loading…
取消
儲存