hldy_xcx/pages/addoldman/oldIDcard.vue

943 lines
24 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="container">
<model :show="show" @close="show=false" :content="content" />
<!-- <view class="title-back">
<view class="left-father" @click="goBack">
<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
<view style="font-size: 30rpx;">长者登记表</view>
</view>
</view> -->
<view class="title-back" :style="{height:`${uni.getStorageSync('moveHeight')+35}px`}">
<view class="left-father" @click="goBack">
<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
<view style="font-size: 30rpx;">长者登记表</view>
</view>
</view>
<view :style="{height:`${uni.getStorageSync('moveHeight') + 30}px`}"></view>
<view class="white-content" v-if="canshow">
<view class="content-title" style="margin: 10rpx 0;display: flex;">
<view class="shu"></view>
<view class="content-weight">监护人信息</view>
</view>
<view class="white-message">
<view>
<view class="one">
<view class="one-left">与长者关系</view>
<input class="one-right" maxlength="10" placeholder="请输入与长者关系" v-model="guanxi" />
</view>
<view class="one">
<view class="one-left">监护人姓名</view>
<input class="one-right" maxlength="5" placeholder="请输入监护人姓名" v-model="form.name" />
</view>
<view class="one">
<view class="one-left">监护人电话</view>
<input class="one-right" maxlength="11" placeholder="请输入监护人电话" v-model="form.tel" />
</view>
<view class="one">
<view class="one-left">身份证号</view>
<input class="one-right" maxlength="18" placeholder="请输入身份证号" v-model="form.idCard" />
</view>
<view class="one">
<view class="one-left">家庭住址</view>
<input class="one-right" maxlength="30" placeholder="请输入家庭住址" v-model="form.homeAddress" />
</view>
<view class="one">
<view class="one-left">工作单位</view>
<input class="one-right" maxlength="40" placeholder="请输入工作单位" v-model="form.workUnit" />
</view>
<!-- <view v-for="(item,index) in antherArray" :key="index" class="one"
@click="openLook(anthertextArray[index])">
<view class="one-left">{{item}}</view>
<view class="one-right">{{anthertextArray[index] ? anthertextArray[index] : "自动获取" }}</view>
</view> -->
</view>
</view>
</view>
<view class="white-content">
<view class="content-title" style="margin: 20rpx 0;">
<view class="shu"></view>
<view class="content-weight">长者身份证</view>
<view style="margin-top: 8rpx;margin-left: 12rpx;;font-size: 23rpx;">(必填)</view>
</view>
<view class="white-photo" @click="selectphoto(0)">
<view class="photo-left">
<view class="photo-weight">人像面</view>
<view class="photo-font">请上传身份证人像面</view>
</view>
<view style="position: relative;">
<image class="photo"
:src="fontphoto ? `${base_url}/sys/common/static/${fontphoto}` : `https://www.focusnu.com/media/directive/index/IDfront.png`" />
<image style="width: 100%;height: 100%;top: 0;left: 0;z-index: 1;position: absolute;"
:src="fontphoto ? `` : `https://www.focusnu.com/media/directive/index/bian.png`" />
<image v-if="!fontphoto"
style="position: absolute;top: 50%;left: 50%;width: 70rpx;height: 60rpx;transform: translate(-50%,-50%);"
src="https://www.focusnu.com/media/directive/index/takephoto.png" />
</view>
</view>
<view class="white-photo" style="margin-top: 30rpx;" @click="selectphoto(1)">
<view class="photo-left">
<view class="photo-weight">国徽面</view>
<view class="photo-font">请上传身份证国徽面</view>
</view>
<view style="position: relative;">
<image class="photo"
:src="endphoto ? `${base_url}/sys/common/static/${endphoto}` : `https://www.focusnu.com/media/directive/index/IDend.png`" />
<image style="width: 100%;height: 100%;top: 0;left: 0;z-index: 1;position: absolute;"
:src="endphoto ? `` : `https://www.focusnu.com/media/directive/index/bian.png`" />
<image v-if="!endphoto"
style="position: absolute;top: 50%;left: 50%;width: 70rpx;height: 60rpx;transform: translate(-50%,-50%);"
src="https://www.focusnu.com/media/directive/index/takephoto.png" />
</view>
</view>
<view class="content-title" style="margin: 20rpx 0;">
<view class="shu"></view>
<view class="content-weight">确认身份证信息</view>
</view>
<view class="white-message">
<view>
<view v-for="(item,index) in nameArray" :key="index" class="one"
@click="openLook(textArray[index])">
<view class="one-left">{{item}}</view>
<view class="one-right">{{textArray[index] ? textArray[index] : "自动获取" }}</view>
</view>
</view>
</view>
</view>
<view class="gray-font">
<view style="color: #333333;">注意事项:</view>
<view style="margin-top: 30rpx;font-size: 28rpx;">
<!-- <view class="line">1.同一个身份证号只能认证一个账号。</view> -->
<view class="line">1.身份证人面像与国徽面应为同一身份证信息,且身份证在有效期内。</view>
<view class="line">2.所有上传照片需清晰且未遮挡,请勿进行美化和修改。</view>
<view class="line">3.所有上传信息均会被妥善保管,不会用于其他商业用途或传输给第三方。</view>
</view>
</view>
<!-- <view style="display: flex;width: 100%;">
<view class="finish-button" @click="next">
确认并继续
</view>
</view> -->
<view style="display: flex;width: 100%;padding: 0 10%;justify-content: space-between;">
<!-- <view class="back-button" @click="goBack">
返回上一步
</view> -->
<view class="finish-button" @click="next">
提交
</view>
</view>
<u-action-sheet :list="bottomlist" @click="photoclick" v-model="bottomshow"></u-action-sheet>
</div>
</template>
<script setup>
import {
ref,
reactive
} from 'vue'
import {
onLoad,
onShow
} from '@dcloudio/uni-app';
import {
base_url
} from '@/request/index.js';
import {
getAccount
} from './api/api.js'
import {
swapLongTerm
} from '@/compontent/public/long.js'
import model from "@/compontent/public/model.vue"
const show = ref(false);
const content = ref("");
const bottomshow = ref(false);
const bottomlist = [{
text: '拍摄图片',
fontSize: 40
}, {
text: '图片预览',
fontSize: 40
}]
const nameArray = ["姓名", "性别", "身份证号码", "民族", "出生日期", "住址", "签发机关", "有效期限"];
const antherArray = ["姓名", "电话", "身份证号", "家庭住址", "工作单位"]
const textArray = reactive(["", "", "", "", "", "", "", ""]);
const anthertextArray = reactive(["", "", "", "", ""]);
const states = ["审核中", "审核未通过", "审核通过"];
const guanxi = ref("");
const form = reactive({
name: "",
idCard: "",
tel: "",
homeAddress: "",
workUnit: ""
})
const fontphoto = ref("");
const endphoto = ref("");
const statesTarget = ref(0);
const shenhe = () => {
if (statesTarget.value == 2) {
statesTarget.value = 0
} else {
statesTarget.value++
}
}
const photoclick = (element) => {
if (element) {
uni.previewImage({
urls: [headImge.value, backImge.value], // 必填,所有要预览的图片地址数组
current: targetphoto.value ? backImge.value : headImge.value, // 可选,当前显示图片的地址,默认是 urls[0]
indicator: 'default', // 可选指示器样式H5/App 有效,值为 'default'(圆点)或 'number'(数字)
longPressActions: { // 可选,仅 App 支持,长按图片时弹出的操作项
itemList: ['保存图片到相册'],
},
});
} else {
getMessage()
}
}
// 本地保存的临时文件路径
const tempImagePath = ref('')
const targetphoto = ref(0)
const selectphoto = (number) => {
if (!uping.value) {
return
}
if (backImge.value && headImge.value) {
targetphoto.value = number
bottomshow.value = true;
} else {
getMessage()
}
}
// 拍照并上传
function getMessage() {
// 使用 UniApp 的 API 调用摄像头
uni.chooseImage({
count: 1,
sourceType: ['album', 'camera'],
success: chooseRes => {
tempImagePath.value = chooseRes.tempFilePaths[0]
// 拍照成功后,调用上传函数
uni.navigateTo({
url: `/compontent/public/camera?url=${chooseRes.tempFilePaths[0]}&type=0`
});
},
fail: err => {
console.error('拍照失败:', err)
}
})
}
const headImge = ref("");
const backImge = ref("");
// 日期转换
function formatChineseDate(chineseDate) {
return chineseDate.replace(/(\d+)年(\d+)月(\d+)日/, (_, y, m, d) => {
return `${y}.${m}.${d}`;
});
}
function toIsoDate(dateStr) {
return dateStr.replace(
/(\d{2,4})\.(\d{1,2})\.(\d{1,2})/,
(_, y, m, d) => {
// 月日补齐两位
const mm = m.padStart(2, '0');
const dd = d.padStart(2, '0');
return `${y}-${mm}-${dd}`;
}
);
}
// 上传图片到服务器
function uploadImage(filePath) {
uping.value = false;
uni.showLoading()
uni.uploadFile({
url: `${base_url}/api/ocr/idCard`, // 替换为您的POST接口地址
filePath,
name: 'file', // 后端接收时的字段名
header: {
'X-Access-Token': uni.getStorageSync('token') || '',
},
formData: {},
success: uploadRes => {
if (!JSON.parse(uploadRes.data).success) {
uni.hideLoading()
uni.showToast({
title: '识别失败',
icon: 'error',
duration: 2000
})
uping.value = true;
return
}
if (JSON.parse(JSON.parse(uploadRes.data).result.data).data.face) {
let father = JSON.parse(JSON.parse(uploadRes.data).result.data).data.face.data;
textArray[0] = father.name;
textArray[1] = father.sex;
textArray[2] = father.idNumber;
textArray[3] = father.ethnicity;
textArray[4] = father.birthDate;
textArray[5] = father.address;
headImge.value = filePath;
savephoto(filePath, 0);
} else if (JSON.parse(JSON.parse(uploadRes.data).result.data).data.back) {
let father = JSON.parse(JSON.parse(uploadRes.data).result.data).data.back.data;
textArray[6] = father.issueAuthority;
textArray[7] = father.validPeriod;
backImge.value = filePath;
savephoto(filePath, 1);
} else {
uni.hideLoading()
uni.showToast({
title: '识别失败',
icon: 'error',
duration: 2000
})
uping.value = true;
}
},
fail: err => {
uni.showToast({
title: '上传出错',
icon: 'error'
})
uni.hideLoading()
}
})
}
const uping = ref(true)
const savephoto = (filePath, type) => {
uni.uploadFile({
url: `${base_url}/sys/common/upload`, // 替换为您的POST接口地址
filePath,
name: 'file', // 后端接收时的字段名
header: {
'X-Access-Token': uni.getStorageSync('token') || '',
},
formData: {
biz: `temp`
},
success: uploadRes => {
if (!type) {
fontphoto.value = JSON.parse(uploadRes.data).message
} else {
endphoto.value = JSON.parse(uploadRes.data).message
}
uni.hideLoading()
if (JSON.parse(uploadRes.data).code == 401) {
uni.uploadFile({
url: `${base_url}/sys/common/upload`, // 替换为您的POST接口地址
filePath,
name: 'file', // 后端接收时的字段名
header: {
'X-Access-Token': uni.getStorageSync('token') || '',
},
formData: {
biz: `temp`
},
success: uploadRes => {
if (!type) {
fontphoto.value = JSON.parse(uploadRes.data).message
} else {
endphoto.value = JSON.parse(uploadRes.data).message
}
uping.value = true;
},
fail: err => {
uni.showToast({
title: '上传出错',
icon: 'error'
})
uni.hideLoading()
}
})
}
uping.value = true;
},
fail: err => {
uni.showToast({
title: '上传出错',
icon: 'error'
})
uni.hideLoading()
}
})
}
function isAtLeastEightChars(str) {
return typeof str === 'string' && str.length >= 12;
}
const openLook = (res) => {
if (isAtLeastEightChars(res)) {
content.value = res;
show.value = true
}
}
function isValid11DigitNumber(val) {
return /^(\d{11})$/.test(val);
}
function isValid18DigitNumber(val) {
return /^(\d{18})$/.test(val);
}
const ukey = ref(
`${uni.getStorageSync('openid') || ''}lrbg${String(Date.now()).slice(-5)}${String(Math.floor(Math.random() * 900) + 100)}`
)
const next = () => {
if (!fontphoto.value) {
uni.showToast({
title: '请上传身份证正面',
icon: 'none'
})
return
} else if (!endphoto.value) {
uni.showToast({
title: '请上传身份证背面',
icon: 'none'
})
return
}
if (canshow.value) {
if (!guanxi.value) {
uni.showToast({
title: '请填写与长者关系',
icon: 'none'
})
return
} else if (!form.name) {
uni.showToast({
title: '请填写监护人姓名',
icon: 'none'
})
return
} else if (!form.tel) {
uni.showToast({
title: '请填写监护人电话',
icon: 'none'
})
return
} else if (!isValid11DigitNumber(form.tel)) {
uni.showToast({
title: '监护人电话格式错误',
icon: 'none'
})
return
} else if (!form.idCard) {
uni.showToast({
title: '请填写身份证号',
icon: 'none'
})
return
} else if (!isValid18DigitNumber(form.idCard)) {
uni.showToast({
title: '身份证号格式错误',
icon: 'none'
})
return
} else if (!form.homeAddress) {
uni.showToast({
title: '请填写家庭住址',
icon: 'none'
})
return
} else if (!form.workUnit) {
uni.showToast({
title: '请填写工作单位',
icon: 'none'
})
return
}
}
const allNonEmpty = textArray.every(item => {
// 如果想忽略前后空格,可用 item.trim() !== ''
return item !== '';
});
if (!uping.value) {
return
}
if (allNonEmpty) {
const range = textArray[7];
const [start, end] = range.split('-');
let data = {}
data.openId = uni.getStorageSync('openid')
// nuId =
data.nuId = uni.getStorageSync('oldman').nuId
data.idCardPositive = fontphoto.value
data.idCardNegative = endphoto.value
data.name = textArray[0]
data.sex = textArray[1]
data.idCard = textArray[2]
data.national = textArray[3]
data.dateOfBirth = textArray[4]
data.houseAddress = textArray[5]
data.issuingAuthority = textArray[6]
data.startTime = start;
data.endTime = end
if (data.endTime == '长期') {
data.endTime = swapLongTerm(end)
}
data.sysOrgCode = uni.getStorageSync('oldman').orgCode
// uni.getStorageSync('oldman').orgCode
let res = form
// return
// console.log("!!!!!!!!!", res)
// data.sys_org_code =
data.guardianName = res.name
data.relationship = guanxi.value
data.guardianIdCard = res.idCard
data.guardianPhone = res.tel
data.guardianHomeAddress = res.homeAddress
data.guardianWorkUnit = res.workUnit
data.guardianOpenId = uni.getStorageSync('openid')
data.guardianId = uni.getStorageSync('allinfo').id
data.modifyType = "zz"
// console.log("?????", data)
if (id.value) {
data.id = id.value
const urlpost = `${payurl.value}/api/elderInfo/updateElderInfo?ukey=${ukey.value}`;
uni.request({
url: urlpost,
method: 'POST',
header: {
'Content-Type': 'application/json',
'X-Access-Token': uni.getStorageSync('token') || '',
},
data: data,
success: (res) => {
// if (r.data.result == '重复提交') {
// return
// }
if (res.data.result == '重复提交') {
uni.showToast({
title: `重复提交`,
icon: 'error'
})
return
}
if (res.data.result == '未做变更') {
uni.showToast({
title: `当前无变更,无需提交`,
icon: 'error'
})
return
}
uni.reLaunch({
url: '/pages/oldmanindex/oldmansuccess?type=1'
})
// console.log("rrrr", r)
},
fail: (e) => {
console.log("????", e)
}
});
} else {
const urlpost = `${payurl.value}/api/elderInfo/addElder?ukey=${ukey.value}`;
uni.request({
url: urlpost,
method: 'POST',
header: {
'Content-Type': 'application/json',
'X-Access-Token': uni.getStorageSync('token') || '',
},
data: data,
success: (r) => {
if (r.data.result == '重复提交') {
return
}
if (r.data.code != 200) {
uni.showToast({
title: r.data.message,
icon: 'none', // 'success' 成功图标,'none' 无图标
duration: 2000 // 显示时长 ms
})
return
}
// return
const connectinon = {
nuId: data.nuId,
openId: uni.getStorageSync('openid'),
elderId: r.data.result,
sysOrgCode: data.sysOrgCode,
}
const urlpost = `${payurl.value}/api/nuBaseInfo/bindNu`;
uni.request({
url: urlpost,
method: 'POST',
header: {
'Content-Type': 'application/json',
'X-Access-Token': uni.getStorageSync('token') || '',
},
data: connectinon,
success: (r) => {
uni.reLaunch({
url: '/pages/oldmanindex/oldmansuccess'
})
// console.log("????", r)
},
fail: (e) => {
// console.log("????", e)
}
});
// console.log("????", r)
},
fail: (e) => {
// console.log("????", e)
}
});
}
// data.guardianDateOfBirth =
// data.id = uni.getStorageSync('specicalid') || ""
// data.birthDate = textArray[4]
// data.idCardAddress = textArray[5]
// data.issuingAuthority = textArray[6]
// data.cardZmPath = fontphoto.value
// data.cardFmPath = endphoto.value
// uni.setStorageSync("backhuancun", data)
// uni.navigateTo({
// url: "/pages/addstaff/bankcard"
// });
} else {
uni.showToast({
title: '请上传清晰的身份证',
icon: 'error'
})
}
}
function formatDateDot(str) {
const [y, m, d] = str.split(" ")[0].split("-");
return `${y}.${m}.${d}`;
}
const goBack = () => {
if (!uping.value) {
return
}
// if (textArray[0]) {
// let data = uni.getStorageSync('backhuancun')
// const range = textArray[7];
// const [start, end] = range.split('-');
// data.startTime = start
// data.endTime = end
// data.name = textArray[0];
// data.sex = textArray[1];
// data.idCard = textArray[2];
// data.national = textArray[3];
// data.birthDate = textArray[4];
// data.idCardAddress = textArray[5];
// data.issuingAuthority = textArray[6];
// data.cardZmPath = fontphoto.value;
// data.cardFmPath = endphoto.value;
// uni.setStorageSync("backhuancun", data)
// // console.log("rightsave")
// }
uni.navigateBack()
}
const payurl = ref("");
const id = ref("")
function formatDatefont(str) {
// 先取出 "1999-09-29"
const [y, m, d] = str.split(" ")[0].split("-");
return `${y}${parseInt(m)}${parseInt(d)}`;
}
const canshow = ref(true);
onLoad(() => {
payurl.value = base_url
// console.log("cccccccccc", textArray[7])
let res = uni.getStorageSync('allinfo')
if (uni.getStorageSync('specicalid')) {
let data = uni.getStorageSync('baddata')
// console.log("????11111111", data)
canshow.value = false;
fontphoto.value = data.idCardPositive
endphoto.value = data.idCardNegative
// console.log("???????????", fontphoto.value, endphoto.value)
textArray[0] = data.name
textArray[1] = data.sex
textArray[2] = data.idCard
textArray[3] = data.national
console.log("????", data.dateOfBirth)
textArray[4] = data.dateOfBirth
textArray[5] = data.houseAddress
textArray[6] = data.issuingAuthority
guanxi.value = data.relationship
data.startTime = data.startTime
data.endTime = data.endTime
id.value = data.id
// data.startTime = start
// data.endTime = end
// console.log("???11111111",data.startTime,data.endTime)
textArray[7] = `${data.startTime}-${swapLongTerm(data.endTime)}`;
// console.log("???111111112222222222",textArray[7] )
// data.guardianName = res.name
// data.relationship = guanxi.value
// data.guardianIdCard = res.idCard
// data.guardianPhone = res.tel
// data.guardianHomeAddress = res.homeAddress
// data.guardianWorkUnit = res.workUnit
// textArray[7] = formatRange(textArray[7])
// console.log("aaaaaaaaaaaaaaaaaa",textArray[7])
// ischange.value = true;
}
})
onShow(() => {
const img = uni.getStorageSync('imgkey0')
if (img) {
uploadImage(img)
uni.removeStorageSync('imgkey0')
}
})
</script>
<style lang="scss" scoped>
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
background-color: #F7F7F7;
position: relative;
.white-content {
width: 90%;
margin-left: 5%;
border-radius: 35rpx;
}
.white-photo {
width: 100%;
height: 300rpx;
border-radius: 35rpx;
background-color: #fff;
justify-content: space-around;
align-items: center;
display: flex;
.photo {
width: 300rpx;
height: 200rpx;
}
}
.white-message {
width: 100%;
margin-top: 20rpx;
padding-top: 20rpx;
padding-bottom: 20rpx;
// margin-bottom: 30rpx;
border-radius: 35rpx;
background-color: #fff;
justify-content: space-around;
display: flex;
flex-direction: column;
.message-title {
width: 100%;
height: 100rpx;
align-items: center;
display: flex;
.message-weight {
font-size: 30rpx;
}
}
.one {
width: 90%;
margin-left: 5%;
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10rpx;
.one-left {
margin-left: 10rpx;
font-size: 30rpx;
}
.one-right {
margin-right: 10rpx;
font-size: 30rpx;
color: #999999;
overflow: hidden;
/* 隐藏超出内容 */
white-space: nowrap;
/* 不换行 */
text-overflow: ellipsis;
max-width: 380rpx;
}
}
}
}
.photo-left {
.photo-weight {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
.photo-font {
font-size: 28rpx;
margin-top: 10rpx;
color: #666;
}
}
.gray-font {
padding: 20rpx 60rpx;
padding-bottom: 35rpx;
color: #999999;
}
// .finish-button {
// display: flex;
// justify-content: center;
// align-items: center;
// width: 80%;
// height: 90rpx;
// margin: 0rpx auto;
// margin-bottom: 80rpx;
// margin-top: 20rpx;
// color: #fff;
// border-radius: 35rpx;
// font-size: 33rpx;
// }
.title-back {
background-color: #EFF6F9;
width: 100%;
height: 70rpx;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #cbd1d2;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
.left-father {
display: flex;
align-items: center;
.back-img {
width: 45rpx;
height: 40rpx;
margin-left: 40rpx;
margin-right: 15rpx;
}
}
.shu {
width: 14rpx;
height: 36rpx;
background-color: #0097FF;
border-radius: 10rpx;
margin: 3rpx 20rpx 0 30rpx;
}
.line {
margin: 10rpx 0;
}
.finish-button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 90rpx;
margin: 0rpx auto;
margin-bottom: 80rpx;
margin-top: 20rpx;
background: linear-gradient(to bottom, #e7f4ff, #c5e5ff);
border: 2rpx solid #9AD1FF;
color: #007CFF;
border-radius: 35rpx;
font-size: 33rpx;
}
.back-button {
display: flex;
justify-content: center;
align-items: center;
width: 44%;
height: 90rpx;
margin-bottom: 80rpx;
border: 2rpx solid #c3cacd;
background: linear-gradient(to bottom, #f3f3f5, #dee4e9);
border-radius: 37rpx;
font-size: 33rpx;
}
.content-title {
display: flex;
align-items: center;
height: 100rpx;
position: relative;
font-weight: 600;
.content-weight {
font-size: 32rpx;
}
.content-img {
position: absolute;
right: 0;
top: 0;
width: 400rpx;
height: 100%;
}
}
</style>