Compare commits
9 Commits
| Author | SHA1 | Date |
|---|---|---|
qsh
|
a684d255d2 | 5 days ago |
|
qsh
|
70fe0f0c42 | 5 days ago |
|
qsh
|
62896b197d | 5 days ago |
|
qsh
|
9b677ade15 | 6 days ago |
|
qsh
|
4bd08bde70 | 6 days ago |
|
qsh
|
e889c92d35 | 2 weeks ago |
|
qsh
|
7442289a87 | 2 weeks ago |
|
qsh
|
d70a0141cc | 3 months ago |
|
qsh
|
459baca3f8 | 3 months ago |
@ -1,214 +0,0 @@ |
|||||||
<template> |
|
||||||
<view class=""> |
|
||||||
<view class="wp100 bc-fff p14"> |
|
||||||
<view class="title fontColor">第一步 上传学员图像</view> |
|
||||||
<view class="mt15"> |
|
||||||
<!-- <u-upload width="165" height="165" :file-list=" fileList1" multiple :max-count="1" @afterRead="afterRead" @delete="deletePic" /> --> |
|
||||||
<!-- <u-upload ref="uUpload" class="mt25" :size-type="['compressed']" :file-list="fileList1" deletable :multiple="false" :max-count="1" width="165rpx" height="165rpx" @afterRead="afterRead" @delete="deletePic" /> --> |
|
||||||
<view style="width: 320rpx;height:300rpx;background-color: rgb(247, 255, 255);border-radius: 20rpx;"> |
|
||||||
<view style="width: 320rpx;height:240rpx;" class="flex jc-c ai-c"> |
|
||||||
<image v-if="fileList&&fileList.length" style="width: 240rpx;height: 240rpx;" :src="fileList[0].url"> |
|
||||||
</image> |
|
||||||
<u-avatar v-else class="br-p50 overflow-h" :size="64" mp-avatar shape="circle"></u-avatar> |
|
||||||
</view> |
|
||||||
<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="1" width="150" |
|
||||||
height="150"> |
|
||||||
<view |
|
||||||
style="width: 320rpx;height:60rpx;line-height:60rpx;background-color: #05C341;border-radius: 0 0 20rpx 20rpx;" |
|
||||||
class="text-center cor-fff"> |
|
||||||
点击 |
|
||||||
</view> |
|
||||||
</u-upload> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
<view class="mt20"> |
|
||||||
<view class="title fontColor">第二步 核实后再提交</view> |
|
||||||
<u--form labelPosition="left" labelWidth="80" :model="form" :rules="rules" ref="form1"> |
|
||||||
<u-form-item label="姓名" :required="true" prop="idCardName" borderBottom ref="item1"> |
|
||||||
<u--input v-model="form.idCardName" border="none"></u--input> |
|
||||||
</u-form-item> |
|
||||||
<u-form-item label="身份证号" :required="true" prop="sfzmhm" borderBottom ref="item2"> |
|
||||||
<u--input v-model="form.sfzmhm" border="none"></u--input> |
|
||||||
</u-form-item> |
|
||||||
</u--form> |
|
||||||
</view> |
|
||||||
<view style="margin-top: 20px;"> |
|
||||||
<u-button type="primary" :style="{width: '100%',borderRadius:'40rpx',backgroundColor:'#05C341'}" :disabled="saving" text="提交" |
|
||||||
@click="submit" /> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import storage from '@/jtools/storage'; |
|
||||||
import { |
|
||||||
addInfo, |
|
||||||
} from '@/jtools/api/index'; |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
const shenfenzhen = (rule, value, callback) => { |
|
||||||
/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value) ? callback() : callback( |
|
||||||
new Error('请输入正确的身份证号')) |
|
||||||
} |
|
||||||
return { |
|
||||||
form: { |
|
||||||
idCardName: '', |
|
||||||
sfzmhm: '' |
|
||||||
}, |
|
||||||
driverLicenseImg:'', |
|
||||||
fileList:[], |
|
||||||
fileList1: [], |
|
||||||
uploadList: [], |
|
||||||
saving: false, |
|
||||||
rules: { |
|
||||||
idCardName: [{ |
|
||||||
required: true, |
|
||||||
message: '请输入姓名', |
|
||||||
trigger: ['blur', 'change'] |
|
||||||
}], |
|
||||||
sfzmhm: [{ |
|
||||||
required: true, |
|
||||||
message: '请输入身份证号', |
|
||||||
trigger: ['blur', 'change'] |
|
||||||
},{ |
|
||||||
// 自定义验证函数，见上说明 |
|
||||||
validator: shenfenzhen, |
|
||||||
message: '身份证号码不正确', |
|
||||||
// 触发器可以同时用blur和change |
|
||||||
trigger: ['change', 'blur'], |
|
||||||
}] |
|
||||||
} |
|
||||||
}; |
|
||||||
}, |
|
||||||
onReady() { |
|
||||||
this.$refs.form1.setRules(this.rules); |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
// 删除图片 |
|
||||||
deletePic(event) { |
|
||||||
this.fileList1.splice(event.index, 1); |
|
||||||
this.uploadList.splice(event.index, 1); |
|
||||||
}, |
|
||||||
// 新增图片 |
|
||||||
async afterRead(event) { |
|
||||||
let imageInfoObj = await uni.getImageInfo({src: event.file[0].url}) |
|
||||||
console.log(imageInfoObj); |
|
||||||
if(imageInfoObj.width!=720&&imageInfoObj.height!=720){ |
|
||||||
uni.showToast({ |
|
||||||
icon:'error', |
|
||||||
title:'证件照尺寸有误' |
|
||||||
}) |
|
||||||
this.fileList=[] |
|
||||||
return false |
|
||||||
} |
|
||||||
this.driverLicenseImg = this.urlTobase64(event.file[0].url) |
|
||||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式 |
|
||||||
const lists = [].concat(event.file); |
|
||||||
this.fileList=lists |
|
||||||
this.fileList1 = []; |
|
||||||
uni.showToast({ |
|
||||||
title:'上传成功！' |
|
||||||
}) |
|
||||||
}, |
|
||||||
uploadFilePromise(url) { |
|
||||||
this.saving = true; |
|
||||||
return new Promise((resolve, reject) => { |
|
||||||
uni.uploadFile({ |
|
||||||
url: process.env.VUE_APP_BASE_API + 'mongodb/uploadFile', // 仅为示例，非真实的接口地址 |
|
||||||
filePath: url, |
|
||||||
name: 'file', |
|
||||||
success: (res) => { |
|
||||||
// setTimeout(() => { |
|
||||||
resolve(JSON.parse(res.data).data); |
|
||||||
// }, 100); |
|
||||||
this.saving = false; |
|
||||||
}, |
|
||||||
fail: () => { |
|
||||||
resolve(null); |
|
||||||
this.saving = false; |
|
||||||
} |
|
||||||
}); |
|
||||||
}); |
|
||||||
}, |
|
||||||
// 提交 |
|
||||||
submit() { |
|
||||||
this.$refs.form1.validate().then((valid) => { |
|
||||||
if (valid) { |
|
||||||
const param={ |
|
||||||
driverLicenseImg:this.driverLicenseImg, |
|
||||||
...this.form, |
|
||||||
schoolOrgCode:'340103000700', |
|
||||||
operater:'1d08daf852cf4ee28f67cb583f538cbf' |
|
||||||
} |
|
||||||
addInfo(param).then(resp=>{ |
|
||||||
uni.showToast({ |
|
||||||
title:"提交成功！", |
|
||||||
duration:2000, |
|
||||||
}) |
|
||||||
setTimeout(()=>{ |
|
||||||
uni.navigateBack() |
|
||||||
},1000) |
|
||||||
}) |
|
||||||
} else { |
|
||||||
console.log('验证失败'); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
}, |
|
||||||
urlTobase64(url){ |
|
||||||
let base64='' |
|
||||||
console.log(url); |
|
||||||
return new Promise((resolve, reject) => { |
|
||||||
uni.getFileSystemManager().readFile({ |
|
||||||
filePath: url, //选择图片返回的相对路径 |
|
||||||
encoding: 'base64', //编码格式 |
|
||||||
success: res => { //成功的回调 |
|
||||||
console.log(res); |
|
||||||
base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦 |
|
||||||
resolve(base64); |
|
||||||
},fail: (e) => { |
|
||||||
console.log("图片转换失败"); |
|
||||||
reject(e) |
|
||||||
} |
|
||||||
}) |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
.upload-img { |
|
||||||
width: 165rpx; |
|
||||||
height: 165rpx; |
|
||||||
border: 1px dashed #c4c4c4; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.fontColor { |
|
||||||
color: #383838; |
|
||||||
font-weight: 400; |
|
||||||
} |
|
||||||
|
|
||||||
::v-deep .u-textarea__count { |
|
||||||
background-color: #f9faf9 !important; |
|
||||||
} |
|
||||||
|
|
||||||
::v-deep .u-upload__button>.u-icon>.u-icon__icon { |
|
||||||
font-size: 90rpx !important; |
|
||||||
} |
|
||||||
|
|
||||||
::v-deep .u-button--square { |
|
||||||
border-radius: 40rpx !important; |
|
||||||
} |
|
||||||
::v-deep .u-button--primary{ |
|
||||||
background-color: #05C341 !important; |
|
||||||
border-color: #05C341 !important; |
|
||||||
} |
|
||||||
</style> |
|
||||||
Loading…
Reference in new issue