pull/24/head
parent
d88f92a893
commit
135bcc71ee
@ -0,0 +1,217 @@ |
|||||||
|
<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" /> --> |
||||||
|
<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="1" width="150" |
||||||
|
height="150"> |
||||||
|
<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="fileList1&&fileList1.length" style="width: 240rpx;height: 240rpx;" :src="fileList1[0].url"> |
||||||
|
</image> |
||||||
|
<u-avatar v-else class="br-p50 overflow-h" :size="64" mp-avatar shape="circle"></u-avatar> |
||||||
|
</view> |
||||||
|
<view |
||||||
|
style="width: 320rpx;height:60rpx;line-height:60rpx;background-color: #3C9CFF;border-radius: 0 0 20rpx 20rpx;" |
||||||
|
class="text-center cor-fff"> |
||||||
|
点击 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</u-upload> |
||||||
|
</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="name" borderBottom ref="item1"> |
||||||
|
<u--input v-model="form.name" border="none"></u--input> |
||||||
|
</u-form-item> |
||||||
|
<u-form-item label="身份证号" :required="true" prop="idNum" borderBottom ref="item2"> |
||||||
|
<u--input v-model="form.idNum" border="none"></u--input> |
||||||
|
</u-form-item> |
||||||
|
</u--form> |
||||||
|
</view> |
||||||
|
<view style="margin-top: 20px;"> |
||||||
|
<u-button type="primary" :style="{width: '100%',borderRadius:'40rpx'}" :disabled="saving" text="提交" |
||||||
|
@click="submit" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import storage from '@/jtools/storage'; |
||||||
|
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: { |
||||||
|
name: '', |
||||||
|
idNum: '' |
||||||
|
}, |
||||||
|
fileList1: [], |
||||||
|
uploadList: [], |
||||||
|
saving: false, |
||||||
|
rules: { |
||||||
|
name: [{ |
||||||
|
required: true, |
||||||
|
message: '请输入姓名', |
||||||
|
trigger: ['blur', 'change'] |
||||||
|
}], |
||||||
|
idNum: [{ |
||||||
|
required: true, |
||||||
|
message: '请输入身份证号', |
||||||
|
trigger: ['blur', 'change'] |
||||||
|
},{ |
||||||
|
// 自定义验证函数,见上说明 |
||||||
|
validator: shenfenzhen, |
||||||
|
message: '身份证号码不正确', |
||||||
|
// 触发器可以同时用blur和change |
||||||
|
trigger: ['change', 'blur'], |
||||||
|
}] |
||||||
|
} |
||||||
|
}; |
||||||
|
}, |
||||||
|
onReady() { |
||||||
|
console.log(storage.get('photoForm')); |
||||||
|
if(storage.get('photoForm')){ |
||||||
|
this.fileList1=storage.get('photoForm').file |
||||||
|
this.form={ |
||||||
|
name: storage.get('photoForm').name, |
||||||
|
idNum: storage.get('photoForm').idNum |
||||||
|
} |
||||||
|
} |
||||||
|
this.$refs.form1.setRules(this.rules); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 删除图片 |
||||||
|
deletePic(event) { |
||||||
|
this.fileList1.splice(event.index, 1); |
||||||
|
this.uploadList.splice(event.index, 1); |
||||||
|
}, |
||||||
|
// 新增图片 |
||||||
|
async afterRead(event) { |
||||||
|
// this.compressImage(event.file); |
||||||
|
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式 |
||||||
|
const lists = [].concat(event.file); |
||||||
|
this.fileList1 = lists; |
||||||
|
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={ |
||||||
|
file:this.fileList1, |
||||||
|
...this.form |
||||||
|
} |
||||||
|
storage.set('photoForm',param) |
||||||
|
uni.showToast({ |
||||||
|
title:"提交成功!", |
||||||
|
duration:2000, |
||||||
|
}) |
||||||
|
setTimeout(()=>{ |
||||||
|
uni.navigateBack() |
||||||
|
},1000) |
||||||
|
} else { |
||||||
|
console.log('验证失败'); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
}, |
||||||
|
async compressImage(image) { |
||||||
|
const img = new Image(); |
||||||
|
img.src = image.url; |
||||||
|
|
||||||
|
img.onload = async () => { |
||||||
|
const canvas = document.createElement('canvas'); // 创建Canvas对象(画布) |
||||||
|
const context = canvas.getContext('2d'); |
||||||
|
// 默认按比例压缩 |
||||||
|
const cw = img.width; |
||||||
|
const ch = img.height; |
||||||
|
let w = img.width; |
||||||
|
let h = img.height; |
||||||
|
canvas.width = w; |
||||||
|
canvas.height = h; |
||||||
|
if (cw > 400 && cw > ch) { |
||||||
|
w = 400; |
||||||
|
h = (400 * ch) / cw; |
||||||
|
canvas.width = w; |
||||||
|
canvas.height = h; |
||||||
|
} |
||||||
|
if (ch > 400 && ch > cw) { |
||||||
|
h = 400; |
||||||
|
w = (400 * cw) / ch; |
||||||
|
canvas.width = w; |
||||||
|
canvas.height = h; |
||||||
|
} |
||||||
|
// 生成canvas |
||||||
|
let base64; |
||||||
|
// 创建属性节点 |
||||||
|
context.clearRect(0, 0, 0, w, h); |
||||||
|
context.drawImage(img, 0, 0, w, h); |
||||||
|
if (image.size > 2000000) { |
||||||
|
// 如果图片超过2m,则进行压缩 |
||||||
|
base64 = canvas.toDataURL(image['type'], 0.5); |
||||||
|
} |
||||||
|
const result = await this.uploadFilePromise(base64 || image.url); |
||||||
|
this.uploadList.push(result); |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</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; |
||||||
|
} |
||||||
|
</style> |
After Width: | Height: | Size: 3.6 KiB |
After Width: | Height: | Size: 3.5 KiB |
After Width: | Height: | Size: 3.9 KiB |
Loading…
Reference in new issue