162 lines
5.0 KiB
Vue
162 lines
5.0 KiB
Vue
<template>
|
||
<view class="data_common_warp">
|
||
<view class="ID_card_title">上传证件照</view>
|
||
<view class="ID_card_msg">（请务必上传本人证件照，生活照、艺术照将会被驳回）</view>
|
||
<view class="ID_card_upload">
|
||
<view class="upload_item" @click="phoneFun('Z')">
|
||
<up-image :src="fileListZ && Object.keys(fileListZ).length !==0 ? fileListZ.accessUrl : '/static/common/ID_rx.png'" width="100%" height="90" bgColor="#f1f6ff00"></up-image>
|
||
<view class="upload_msg">点击上传身份证人像面</view>
|
||
</view>
|
||
<view class="upload_item" @click="phoneFun('F')">
|
||
<up-image :src="fileListF && Object.keys(fileListF).length !==0 ? fileListF.accessUrl : '/static/common/ID_gq.png'" width="100%" height="90" bgColor="#f1f6ff00"></up-image>
|
||
<view class="upload_msg">点击上传身份国旗面</view>
|
||
</view>
|
||
</view>
|
||
<view class="ID_card_upload_templ">
|
||
<view class="templ_title">上传标准</view>
|
||
<view class="templ_img_list">
|
||
<view class="templ_img_item" v-for="item in uploadTemplList" :key="item.id">
|
||
<up-image :src="item.url" width="100%" height="50" bgColor="#f1f6ff00"></up-image>
|
||
<view class="templ_img_item_msg">
|
||
<up-image :src="item.isOk ? '/static/common/ID_ok_1.png' :'/static/common/ID_error.png'" width="10" height="10" bgColor="#f1f6ff00"></up-image>
|
||
<view class="templ_img_item_msg_title">{{item.title}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import { uploadImage,uploadImg } from '@/api/common.js';
|
||
import { IMG_TYPE } from '@/utils/enumUtils.js';
|
||
import { BASE_URL,Authorization } from '@/utils/config.js';
|
||
import {getStorageFun,TOKEN_NAME} from '@/utils/auth.js';
|
||
|
||
export default {
|
||
name:"common_card",
|
||
data() {
|
||
return {
|
||
uploadTemplList:[
|
||
{
|
||
id:1,
|
||
title:"标准",
|
||
isOk:true,
|
||
url:"/static/common/ID_ok.png",
|
||
},{
|
||
id:2,
|
||
title:"边框缺失",
|
||
isOk:false,
|
||
url:"/static/common/ID_error_1.png",
|
||
},{
|
||
id:3,
|
||
title:"照片模糊",
|
||
isOk:false,
|
||
url:"/static/common/ID_error_2.png",
|
||
},{
|
||
id:4,
|
||
title:"闪光强烈",
|
||
isOk:false,
|
||
url:"/static/common/ID_error_3.png",
|
||
}
|
||
],
|
||
fileListZ:{},// 身份正面照
|
||
fileListF:{},// 身份反面照片
|
||
};
|
||
},
|
||
methods: {
|
||
deletePic(event){
|
||
this.fileListZ.splice(event.index, 1);
|
||
},
|
||
phoneFun(type){
|
||
let that = this;
|
||
/*#ifdef MP*/
|
||
uni.chooseMedia({
|
||
count: 1, // 默认为1，摄像头拍照为1，录像为10，录音为1
|
||
mediaType: ['image'], // 可以指定是摄像头还是录像，这里两者都支持
|
||
sourceType: ['camera'], // 可以指定来源是相册还是相机，这里只选相机
|
||
camera: 'back', // 可以指定使用前置还是后置摄像头，默认后置
|
||
success: (imgRes) => {
|
||
// 成功则返回文件的本地临时文件路径
|
||
const filePath = imgRes.tempFiles[0].tempFilePath; // 获取文件路径
|
||
that.uploadFile(filePath,type);
|
||
},
|
||
fail: (err) => {
|
||
// 处理错误
|
||
console.error(err);
|
||
}
|
||
});
|
||
/*#endif*/
|
||
/*#ifdef APP-PLUS*/
|
||
uni.chooseImage({
|
||
count: 1, // 默认9，设置图片的数量
|
||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||
success: function (res) {
|
||
// 成功选择图片后
|
||
const filePath = res.tempFilePaths[0]; // 获取文件路径
|
||
that.uploadFile(filePath,type);
|
||
}
|
||
});
|
||
/*#endif*/
|
||
|
||
},
|
||
uploadFile(url,type){
|
||
uni.showLoading({
|
||
title: '图片上传中...',
|
||
})
|
||
const that = this;
|
||
const token = getStorageFun(TOKEN_NAME); // 获取token, 根据实际情况调整获取方式
|
||
// 成功则返回文件的本地临时文件路径
|
||
uni.uploadFile({
|
||
url: BASE_URL+uploadImg, // 替换为你的上传接口URL
|
||
filePath:url,
|
||
name: 'file',
|
||
formData: {
|
||
'type': IMG_TYPE.COMMON,
|
||
},
|
||
header:{
|
||
"Authorization":Authorization,
|
||
'HSM-AUTH': token ? token : '',
|
||
},
|
||
success: (uploadFileRes) => {
|
||
const data = JSON.parse(uploadFileRes.data);
|
||
if(data.bizcode === 100){
|
||
if(type === "Z"){
|
||
that.fileListZ =data.data;
|
||
this.$emit("valueFunc", "Z", data.data.dbUrl);
|
||
}else if(type === "F"){
|
||
that.fileListF=data.data;
|
||
this.$emit("valueFunc", "F", data.data.dbUrl);
|
||
}
|
||
}else{
|
||
uni.showToast({
|
||
title: '图片上传失败',
|
||
icon: 'none',
|
||
mask: true,
|
||
duration:3000,
|
||
})
|
||
}
|
||
},
|
||
fail: (uploadFileErr) => {
|
||
uni.showToast({
|
||
title: '图片上传失败',
|
||
icon: 'none',
|
||
mask: true,
|
||
duration:3000,
|
||
})
|
||
},
|
||
complete: (res) => {
|
||
// 请求完成以后做一些事情
|
||
uni.hideLoading();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style> |