提交
This commit is contained in:
@@ -1,42 +1,222 @@
|
||||
<template>
|
||||
<view class="p15 bc-f5">
|
||||
<view class="br8 bc-fff p15lr">
|
||||
<view class="flex ai-c bb1" style="height: 110rpx;">
|
||||
<view class="title">体检结果</view>
|
||||
<view class="ml30 fs14 cor-333 fl1">通过</view>
|
||||
</view>
|
||||
<view class="flex ai-c" style="height: 110rpx;">
|
||||
<view class="title">体检时间</view>
|
||||
<view class="ml30 fs14 cor-333 fl1">2023-08-10 14:35:23</view>
|
||||
</view>
|
||||
<view class="flex ai-fs" style="height: 110rpx;">
|
||||
<view class="title">体检时间</view>
|
||||
<image class="ml30" src="/static/image/mine/tijian.png" style="width: 333rpx;" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<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="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',backgroundColor:'#05C341'}" :disabled="saving" text="提交"
|
||||
@click="submit" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
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: ''
|
||||
},
|
||||
fileList:[],
|
||||
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() {
|
||||
if(storage.get('photoForm')){
|
||||
this.fileList=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.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={
|
||||
file:this.fileList,
|
||||
...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>
|
||||
.title {
|
||||
width: 120rpx;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
.bb1 {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
.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>
|
||||
Reference in New Issue
Block a user