Skip to content

T
train_vue
Commit 8e7ca8f1 authored by 不吃草的咩's avatar 不吃草的咩
Browse files
Options

增加身份验证，图片格式大小验证

parent a73e8c10
Hide whitespace changes
Inline Side-by-side
Showing with 477 additions and 18 deletions
app.json
View file @ 8e7ca8f1
......@@ -7,7 +7,8 @@
"pages/demo/wallpaper/wallpaper",
"pages/demo/login/login",
"pages/demo/set/set",
"pages/signup/signup"
"pages/signup/signup",
"pages/uploadcard/uploadcard"
],
"subpackages": [
{
......@@ -123,7 +124,12 @@
"van-cell-group": "/vantPackage/cell-group/index",
"van-popup": "/vantPackage/popup/index",
"van-picker": "/vantPackage/picker/index",
"van-field": "/vantPackage/field/index"
"van-field": "/vantPackage/field/index",
"van-row": "/vantPackage/row/index",
"van-col": "/vantPackage/col/index",
"van-nav-bar": "/vantPackage/nav-bar/index",
"van-toast": "/vantPackage/toast/index"
},
"tabBar": {
"color": "#aaaaaa",
......
pages/document/subsign/subsign.js
View file @ 8e7ca8f1
......@@ -7,17 +7,27 @@ Page({
data: {
isShow:false,
isShowStudy:false,
isShowHomework:false,
isShowZige:false,
isShowPeixun:false,
fromDate:{
username:'', //姓名
gender:'', //性别
card:'', //身份证号
studyhigh:'', //文化程度
phone:'', //手机号
company:'' //单位名称
company:'', //单位名称
homework:'', //作业类别
zige:'', //资格类型
peixun:'', //培训类型
beizhu:'' //备注
},
popup:{
genderText:'请选择性别',
studyText:'请选择您的文化程度',
genderText:'点击选择性别',
studyText:'点击选择您的文化程度',
homeworkText:'点击选择作业类别',
zigeTypeText:'点击选择资格类型',
peixunTypeText:'点击选择培训类型',
},
columns: [
{ text: '男', type:0 },
......@@ -30,6 +40,22 @@ Page({
{text:'专科',index:3},
{text:'本科',index:4},
{text:'研究生及以上',index:5},
],
columnsHomework:[
{text:'电工作业',index:0},
{text:'焊接与热切割作业',index:1},
{text:'高处作业',index:2},
{text:'制冷与空调作业',index:3},
{text:'金属与非金属矿山作业',index:4},
{text:'危险化学品作业',index:5},
],
columnsZige:[
{text:'职业资格',index:0}
],
columnsPeixun:[
{text:'新办',index:0},
{text:'复审',index:1},
{text:'换证',index:2},
]
},
......@@ -39,19 +65,50 @@ Page({
onDisplayStudy(){
this.setData({isShowStudy:true})
},
onDisplayHomework(){
this.setData({isShowHomework:true})
},
onDisplayZigeType(){
this.setData({isShowZige:true})
},
onDisplayPeixunType(){
this.setData({isShowPeixun:true})
},
onClose() {
this.setData({ isShow: false });
},
onCloseStudy(){
this.setData({isShowStudy:false})
},
onCloseHomework(){
this.setData({isShowHomework:false})
},
onCloseZige(){
this.setData({isShowZige:false})
},
onClosePeixun(){
this.setData({isShowPeixun:false})
},
onConfirm(event){
const { picker, value, index } = event.detail;
this.setData({["fromDate.gender"]:value.type,["popup.genderText"]:value.text,isShow:false})
},
onConfirmStudy(event){
const { picker, value, index } = event.detail;
this.setData({["fromDate.studyhigh"]:value.type,["popup.studyText"]:value.text,isShowStudy:false})
this.setData({["fromDate.studyhigh"]:value.index,["popup.studyText"]:value.text,isShowStudy:false})
},
onConfirmHomework(event){
const { picker, value, index } = event.detail;
this.setData({["fromDate.homework"]:value.index,["popup.homeworkText"]:value.text,isShowHomework:false})
},
onConfirmPeixun(event){
const { picker, value, index } = event.detail;
this.setData({["fromDate.peixun"]:value.index,["popup.peixunTypeText"]:value.text,isShowPeixun:false})
},
onConfirmZige(event){
const { picker, value, index } = event.detail;
this.setData({["fromDate.zige"]:value.index,["popup.zigeTypeText"]:value.text,isShowZige:false})
},
/**
* 生命周期函数--监听页面加载
......
pages/document/subsign/subsign.scss
View file @ 8e7ca8f1
.box{
width: 96%;
width: 100%;
margin: 2% auto 0;
.field-index--van-field{
padding: 0;
}
.txt{
font-size: 22rpx;
font-family: Arial, Helvetica, sans-serif;
color: black;
font-weight: 600;
.req{
font-weight: initial;
color: red;
}
}
}
.placeholder,.van-field__placeholder,.van-field__control{
font-size: 22rpx !important;
color: #cdced1 !important ;
}
.price{
width: 96%;
margin:2% auto 0;
box-sizing: border-box;
text-align: right;
.tit{
font-family:Arial, Helvetica, sans-serif;
font-size: 22rpx;
color: black;
text-align: right;
padding-right: 20rpx;
}
.pri{
font-size: 22rpx;
font-family: Arial, Helvetica, sans-serif;
color: brown;
}
}
\ No newline at end of file
pages/document/subsign/subsign.wxml
View file @ 8e7ca8f1
......@@ -6,24 +6,57 @@
<view class="box">
<van-cell-group>
<van-cell center>
<view slot="title"><text>*</text><text>姓名</text></view>
<van-field model:value="{{ fromDate.username }}" placeholder="请输入用户名" input-align="right" border="{{ false }}" />
<view slot="title" class="txt"><text class="req">* </text><text>姓名</text></view>
<van-field model:value="{{ fromDate.username }}" placeholder-style="place" custom-style="placeholder" placeholder="请输入用户名" input-align="right" border="{{ false }}" />
</van-cell>
<van-cell center is-link value="{{popup.genderText}}" bind:click="onDisplay">
<view slot="title"><text>*</text><text>性别</text></view>
<van-cell center value="{{popup.genderText}}" bind:click="onDisplay" value-class="placeholder">
<view slot="title" class="txt"><text class="req">* </text><text>性别</text></view>
</van-cell>
<van-cell center>
<view slot="title"><text>*</text><text>身份证号</text></view>
<van-field model:value="{{ fromDate.card }}" placeholder="请输入您的身份证号" input-align="right" border="{{ false }}" />
<view slot="title" class="txt"><text class="req">* </text><text>身份证号</text></view>
<van-field model:value="{{ fromDate.card }}" placeholder="请输入您的身份证号" input-align="right" border="{{ false }}" />
</van-cell>
<van-cell center is-link value="{{popup.studyText}}" bind:click="onDisplayStudy">
<view slot="title"><text>文化程度</text></view>
<van-cell center value="{{popup.studyText}}" bind:click="onDisplayStudy" value-class="placeholder">
<view slot="title" class="txt"><text>文化程度</text></view>
</van-cell>
<van-cell center>
<view slot="title"><text>*</text><text>手机号</text></view>
<van-field model:value="{{ fromDate.phone }}" placeholder="请输入您的手机号" input-align="right" border="{{ false }}" />
<view slot="title" class="txt"><text class="req">* </text><text>手机号</text></view>
<van-field model:value="{{ fromDate.phone }}" placeholder="请输入您的手机号" input-align="right" border="{{ false }}" />
</van-cell>
<van-cell center>
<view slot="title" class="txt"><text>单位名称</text></view>
<van-field model:value="{{ fromDate.company }}" placeholder="请输入您的单位名称" input-align="right" border="{{ false }}" />
</van-cell>
</van-cell-group>
</view>
<view class="box">
<van-cell-group>
<van-cell center value="{{popup.homeworkText}}" bind:click="onDisplayHomework" value-class="placeholder">
<view slot="title" class="txt"><text class="req">* </text><text>作业类别</text></view>
</van-cell>
<van-cell center value="{{popup.zigeTypeText}}" bind:click="onDisplayZigeType" value-class="placeholder">
<view slot="title" class="txt"><text class="req">* </text><text>资格类型</text></view>
</van-cell>
<van-cell center value="{{popup.peixunTypeText}}" bind:click="onDisplayPeixunType" value-class="placeholder">
<view slot="title" class="txt"><text class="req">* </text><text>培训类型</text></view>
</van-cell>
<van-cell center>
<view slot="title" class="txt"><text>留言</text></view>
<van-field placeholder-style="placeholder"
value="{{ fromDate.beizhu }}"
type="textarea"
show-word-limit
placeholder="请输入备注信息"
autosize
input-align="right"
maxlength="100"
border="{{ false }}"
/>
</van-cell>
</van-cell-group>
<view class="price"><text class="tit">培训费用</text><text class="pri">¥812元</text></view>
<view class="price"><text class="tit">审核后需支付费用</text><text class="pri">¥812元</text></view>
<view class="price"><van-button type="default" block color="#1989fa">下一步，上传资料</van-button></view>
</view>
</ui-sys>
<van-popup show="{{ isShow }}" bind:close="onClose" position="bottom" round>
......@@ -31,4 +64,16 @@
</van-popup>
<van-popup show="{{ isShowStudy }}" bind:close="onCloseStudy" position="bottom" round>
<van-picker columns="{{ columnsStudy }}" bind:cancel="onCloseStudy" bind:confirm="onConfirmStudy" show-toolbar />
</van-popup>
<!-- 作业类别 -->
<van-popup show="{{ isShowHomework }}" bind:close="onCloseHomework" position="bottom" round>
<van-picker columns="{{ columnsHomework }}" bind:cancel="onCloseHomework" bind:confirm="onConfirmHomework" show-toolbar />
</van-popup>
<!-- 资格类型 -->
<van-popup show="{{ isShowZige }}" bind:close="onCloseZige" position="bottom" round>
<van-picker columns="{{ columnsZige }}" bind:cancel="onCloseZige" bind:confirm="onConfirmZige" show-toolbar />
</van-popup>
<!-- 培训类型 -->
<van-popup show="{{ isShowStudy }}" bind:close="onClosePeixun" position="bottom" round>
<van-picker columns="{{ columnsPeixun }}" bind:cancel="onClosePeixun" bind:confirm="onConfirmPeixun" show-toolbar />
</van-popup>
\ No newline at end of file
pages/signup/signup.wxml
View file @ 8e7ca8f1
......@@ -4,7 +4,7 @@
<text slot="center">{{isperson}}</text>
</ui-navbar>
<ui-modal show="{{true}}" showCancel="{{false}}" title="报名需知">
<scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view id="demo1" class="scroll-view-item">
<text>特种作业人员操作证办理办事指南
一、特种作业操作证的办理
......
pages/uploadcard/uploadcard.js 0 → 100644
View file @ 8e7ca8f1
// pages/uploadcard/uploadcard.js
import Toast from '../../vantPackage/toast/toast';
Page({
/**
* 页面的初始数据
*/
data: {
fileList:{
positive:[], //正面照
emblem:[], //国徽面
face:[], //上半身人脸
diploma:[] //毕业证
},
},
onClickLeft(){
wx.navigateBack({
delta: 1,
})
},
beforeRead(event){
const { file, callback } = event.detail;
let imageType = file.url.split('.');
if((imageType[imageType.length-1] !== 'jpg') && (imageType[imageType.length-1] !== 'jpeg') && (imageType[imageType.length-1] !== 'png')){
Toast.fail({
message: '上传失败，请上传图片',
forbidClick: true,
});
callback(false);
}else if(file.size > 1000000){
Toast.fail({
message: '图片大小超过限制，请重新上传',
forbidClick: true,
});
callback(false);
}else{
callback(true);
};
},
afterReadPositive(event){
const { file } = event.detail;
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
wx.uploadFile({
url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
filePath: file.url,
name: 'file',
timeout:30000,
formData: { user: 'test' },
success(res) {
const { positive = [] } = this.data.fileList;
positive.push({ ...file, url: res.data });
this.setData({["fileList.positive"]:positive});
},
fail(){
Toast.fail({
message: '上传失败，请重新上传',
forbidClick: true,
});
}
});
},
afterReadEmblem(event){
const { file } = event.detail;
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
wx.uploadFile({
url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
filePath: file.url,
name: 'file',
formData: { user: 'test' },
success(res) {
const { emblem = [] } = this.data.fileList;
emblem.push({ ...file, url: res.data });
this.setData({["fileList.emblem"]:emblem});
},
fail(){
Toast.fail({
message: '上传失败，请重新上传',
forbidClick: true,
});
}
});
},
afterReadFace(event){
const { file } = event.detail;
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
wx.uploadFile({
url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
filePath: file.url,
name: 'file',
formData: { user: 'test' },
success(res) {
const { face = [] } = this.data.fileList;
face.push({ ...file, url: res.data });
this.setData({["fileList.face"]:face});
},
fail(){
Toast.fail({
message: '上传失败，请重新上传',
forbidClick: true,
});
}
});
},
afterRead(event) {
const { file } = event.detail;
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
wx.uploadFile({
url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
filePath: file.url,
name: 'file',
formData: { user: 'test' },
success(res) {
// 上传完成需要更新 fileList
const { diploma = [] } = this.data.fileList;
diploma.push({ ...file, url: res.data });
this.setData({ ["fileList.diploma"]:diploma});
},
fail(){
Toast.fail({
message: '上传失败，请重新上传',
forbidClick: true,
});
}
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const { diploma = [] } = this.data.fileList;
console.log(diploma);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
pages/uploadcard/uploadcard.json 0 → 100644
View file @ 8e7ca8f1
{
"usingComponents": {
"van-uploader": "/vantPackage/uploader/index"
}
}
\ No newline at end of file
pages/uploadcard/uploadcard.scss 0 → 100644
View file @ 8e7ca8f1
.box{
width: 100%;
margin-top: 2%;
box-sizing: border-box;
background-color: #fff;
padding: 2% 4%;
.card-flex{
width: 100%;
height: 150rpx;
margin-top: 20rpx;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
.uploadimg{
width: 26%;
height: 100%;
}
.txtdetail{
width: 72%;
height: 100%;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
// justify-content: space-between;
view{
width: 100%;
height: 35rpx;
text{
font-size: 18rpx;
font-family: Arial, Helvetica, sans-serif;
}
}
.te{
height: 40rpx;
text{
font-size: 19rpx;
color: black;
}
}
.one{
height: 40rpx;
line-height: 40rpx;
text{
font-size: 24rpx;
color: #ee0a24;
}
}
.two{
height: 70rpx;
text{
font-size: 22rpx;
color: #1989fa;
}
}
}
}
.subbtn{
width: 98%;
margin: 80rpx auto 0;
}
}
.van-nav-bar{
padding-top: 0px !important;
}
.van-uploader{
width: 100%;
height: 100%;
.van-uploader__wrapper{
width: 100%;
height: 100%;
}
}
.van-uploader__upload{
width: 100% !important;
height: 100% !important;
}
\ No newline at end of file
pages/uploadcard/uploadcard.wxml 0 → 100644
View file @ 8e7ca8f1
<!-- 上传身份信息 -->
<!-- 个人&&企业报名 -->
<ui-sys>
<ui-navbar isSlot>
<view style="width: 100%;height: 100%;">
<van-nav-bar
title="上传资料证件"
left-text="返回"
left-arrow
border="{{false}}"
bind:click-left="onClickLeft"
/>
</view>
</ui-navbar>
<view class="box">
<view class="card-flex">
<view class="uploadimg"><van-uploader max-size="1000000" max-count="1" upload-text="上传图片" file-list="{{ fileList.positive }}" bind:after-read="afterReadPositive" use-before-read bind:before-read="beforeRead"/></view>
<view class="txtdetail">
<view class="one"><text>身份证正面照，务必保持清晰</text></view>
<view class="two"><text>注意:拍完整不能斜着拍，和复印效果一样</text></view>
<view class="te"><text>文件大小不能超过1MB，且仅支持上传png,jpg,jpeg文件格式</text></view>
</view>
</view>
<view class="card-flex">
<view class="uploadimg"><van-uploader max-size="1000000" max-count="1" upload-text="上传图片" file-list="{{ fileList.emblem }}" bind:after-read="afterReadEmblem" use-before-read bind:before-read="beforeRead"/></view>
<view class="txtdetail">
<view class="one"><text>身份证反面照，务必保持清晰</text></view>
<view class="two"><text>注意:拍完整不能斜着拍，和复印效果一样</text></view>
<view class="te"><text>文件大小不能超过1MB，且仅支持上传png,jpg,jpeg文件格式</text></view>
</view>
</view>
<view class="card-flex">
<view class="uploadimg"><van-uploader max-size="1000000" max-count="1" upload-text="上传图片" file-list="{{ fileList.face }}" bind:after-read="afterReadFace" use-before-read bind:before-read="beforeRead"/></view>
<view class="txtdetail">
<view class="one"><text>上半身照，务必保持清晰</text></view>
<view class="two"><text>注意:需手持身份证件，保证证件清晰</text></view>
<view class="te"><text>文件大小不能超过1MB，且仅支持上传png,jpg,jpeg文件格式</text></view>
</view>
</view>
<view class="card-flex">
<view class="uploadimg"><van-uploader max-size="1000000" max-count="1" upload-text="上传图片" file-list="{{ fileList.diploma }}" bind:after-read="afterRead" use-before-read bind:before-read="beforeRead"/></view>
<view class="txtdetail">
<view class="one"><text>毕业证书照或户口本现实学历页，务必保持清晰</text></view>
<view class="two"><text>注意:拍完整不能斜着拍，和复印效果一样</text></view>
<view class="te"><text>文件大小不能超过1MB，且仅支持上传png,jpg,jpeg文件格式</text></view>
</view>
</view>
<view class="subbtn">
<van-button type="primary" block color="#1989fa">提交资料</van-button>
</view>
</view>
<van-toast id="van-toast" />
</ui-sys>
\ No newline at end of file
pages/uploadcard/uploadcard.wxss 0 → 100644
View file @ 8e7ca8f1
/* pages/uploadcard/uploadcard.wxss */
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment