Browse Source

上传修改

master
前端-胡立永 2 months ago
parent
commit
a3f02749cb
7 changed files with 347 additions and 28 deletions
  1. BIN
      pages_order/static/postConsult/1.png
  2. BIN
      pages_order/static/postConsult/2.png
  3. BIN
      pages_order/static/postConsult/3.png
  4. BIN
      pages_order/static/postConsult/4.png
  5. BIN
      pages_order/static/postConsult/5.png
  6. BIN
      pages_order/static/postConsult/6.png
  7. +347
    -28
      pages_order/work/postConsult.vue

BIN
pages_order/static/postConsult/1.png View File

Before After
Width: 156  |  Height: 110  |  Size: 17 KiB

BIN
pages_order/static/postConsult/2.png View File

Before After
Width: 170  |  Height: 92  |  Size: 25 KiB

BIN
pages_order/static/postConsult/3.png View File

Before After
Width: 172  |  Height: 90  |  Size: 26 KiB

BIN
pages_order/static/postConsult/4.png View File

Before After
Width: 110  |  Height: 148  |  Size: 30 KiB

BIN
pages_order/static/postConsult/5.png View File

Before After
Width: 135  |  Height: 92  |  Size: 3.7 KiB

BIN
pages_order/static/postConsult/6.png View File

Before After
Width: 172  |  Height: 118  |  Size: 4.6 KiB

+ 347
- 28
pages_order/work/postConsult.vue View File

@ -7,7 +7,7 @@
/> />
<view class="form"> <view class="form">
<view class="form-item">
<!-- <view class="form-item">
<view class="title"> <view class="title">
请提交所需要的相对于的材料 请提交所需要的相对于的材料
</view> </view>
@ -40,7 +40,282 @@
style="text-align: center;padding: 20rpx 0;"> style="text-align: center;padding: 20rpx 0;">
(确保文字清晰可辨避免遮挡不全反光) (确保文字清晰可辨避免遮挡不全反光)
</view> </view>
</view> -->
<!-- <view class="form-item">
<view class="label">
头像
</view>
<view class="input">
<image src="../static/postConsult/4.png" mode="aspectFill"></image>
</view>
<view class="icon">
<uv-icon
name="arrow-right"
size="30rpx"
></uv-icon>
</view>
</view> -->
<view class="form-item">
<view class="label">
真实姓名
</view>
<view class="input">
<input type="text"
placeholder="请输入真实姓名"
v-model="form.name"/>
</view>
</view>
<view class="form-item">
<view class="label">
绑定手机号
</view>
<view class="input">
<input type="text"
placeholder="请输入手机号"
v-model="form.phone"/>
</view>
</view>
<view class="form-item">
<view class="label">
身份证号码
</view>
<view class="input">
<input type="text"
placeholder="请输入身份证号码"
v-model="form.phone"/>
</view>
</view>
<view class="form-item">
<view class="label">
工作单位
</view>
<view class="input">
<input type="text"
placeholder="请输入工作单位"
v-model="form.phone"/>
</view>
</view>
<view class="form-item">
<view class="label required">
个人信息<text>用于下载学时证明考试使用</text>
</view>
</view>
<view class="form-item">
<view class="label required">
个人免冠照<text>白底彩照1张</text>
</view>
<view class="input">
<uv-upload
:fileList="fileList"
name="fileList"
:maxCount="1"
width="120rpx"
height="120rpx"
multiple
@afterRead="afterRead"
@delete="deleteImage">
<view class="upload">
<image src="../static/postConsult/4.png"
mode="aspectFit"
style="width: 120rpx;height: 120rpx;" />
</view>
</uv-upload>
</view>
<view class="icon">
<uv-icon
name="arrow-right"
size="30rpx"
></uv-icon>
</view>
</view>
<view class="form-item">
<view class="label required">
身份证正面
</view>
<view class="input">
<uv-upload
:fileList="fileFrontList"
name="fileFrontList"
:maxCount="1"
width="120rpx"
height="120rpx"
multiple
@afterRead="afterRead"
@delete="deleteImage">
<view class="upload">
<image src="../static/postConsult/2.png"
mode="aspectFit"
style="width: 120rpx;height: 120rpx;" />
</view>
</uv-upload>
</view>
<view class="icon">
<uv-icon
name="arrow-right"
size="30rpx"
></uv-icon>
</view>
</view>
<!-- 身份证反面 -->
<view class="form-item">
<view class="label required">
身份证反面
</view>
<view class="input">
<uv-upload
:fileList="fileReverseList"
name="fileReverseList"
:maxCount="1"
width="120rpx"
height="120rpx"
multiple
@afterRead="afterRead"
@delete="deleteImage">
<view class="upload">
<image src="../static/postConsult/3.png"
mode="aspectFit"
style="width: 120rpx;height: 120rpx;" />
</view>
</uv-upload>
</view>
<view class="icon">
<uv-icon
name="arrow-right"
size="30rpx"
></uv-icon>
</view>
</view>
<!-- 申请表电子表格 -->
<view class="form-item">
<view class="label required">
申请表电子表格<text>申请表电子表格填写完打印出来本人签字及日期单位右边加盖公章1份</text>
</view>
<view class="input">
<uv-upload
:fileList="fileReverseList"
name="fileReverseList"
:maxCount="1"
width="120rpx"
height="120rpx"
multiple
@afterRead="afterRead"
@delete="deleteImage">
<view class="upload">
<image src="../static/postConsult/1.png"
mode="aspectFit"
style="width: 120rpx;height: 120rpx;" />
</view>
</uv-upload>
</view>
<view class="icon">
<uv-icon
name="arrow-right"
size="30rpx"
></uv-icon>
</view>
</view> </view>
<!-- 初中以上学历证书 -->
<view class="form-item">
<view class="label required">
初中以上学历证书<text>或户口本本人那页复印件1份)</text>
</view>
<view class="input">
<uv-upload
:fileList="fileEducationalList"
name="fileEducationalList"
:maxCount="1"
width="120rpx"
height="120rpx"
multiple
@afterRead="afterRead"
@delete="deleteImage">
<view class="upload">
<image src="../static/postConsult/5.png"
mode="aspectFit"
style="width: 120rpx;height: 120rpx;" />
</view>
</uv-upload>
</view>
<view class="icon">
<uv-icon
name="arrow-right"
size="30rpx"
></uv-icon>
</view>
</view>
<!-- 营业执照复印件1份 -->
<view class="form-item">
<view class="label required">
营业执照复印件1份
</view>
<view class="input">
<uv-upload
:fileList="fileBusinessList"
name="fileBusinessList"
:maxCount="1"
width="120rpx"
height="120rpx"
multiple
@afterRead="afterRead"
@delete="deleteImage">
<view class="upload">
<image src="../static/postConsult/6.png"
mode="aspectFit"
style="width: 120rpx;height: 120rpx;" />
</view>
</uv-upload>
</view>
<view class="icon">
<uv-icon
name="arrow-right"
size="30rpx"
></uv-icon>
</view>
</view>
<!-- 个人健康书面承诺 -->
<view class="form-item">
<view class="label required">
个人健康书面承诺1份
</view>
<view class="input">
<uv-upload
:fileList="filePromiseList"
name="filePromiseList"
:maxCount="1"
width="120rpx"
height="120rpx"
multiple
@afterRead="afterRead"
@delete="deleteImage">
<view class="upload">
<image src="../static/auth/cart.png"
mode="aspectFit"
style="width: 120rpx;height: 120rpx;" />
</view>
</uv-upload>
</view>
<view class="icon">
<uv-icon
name="arrow-right"
size="30rpx"
></uv-icon>
</view>
</view>
</view> </view>
<view class="uni-color-btn"> <view class="uni-color-btn">
@ -71,11 +346,33 @@
}, },
data() { data() {
return { return {
form : {
name : ''
},
fileList : [],//
fileFrontList : [],//
fileReverseList : [],//
fileApplicationList : [],//
fileEducationalList : [],//
fileBusinessList : [],//1
filePromiseList : [],//1
} }
}, },
methods: { methods: {
deleteImage(e){
this[e.name].splice(e.index, 1)
},
afterRead(e){
let self = this
e.file.forEach(file => {
self.$Oss.ossUpload(file.url).then(url => {
self[e.name].push({
url
})
})
})
},
} }
} }
</script> </script>
@ -83,44 +380,66 @@
<style scoped lang="scss"> <style scoped lang="scss">
.page{ .page{
min-height: 100vh; min-height: 100vh;
background-color: #fff;
.required::before{
content: '*';
color: #f00;
}
.form-item{ .form-item{
padding: 30rpx 0;
display: flex;
align-items: center;
border-bottom: 1rpx solid #00000009;
font-size: 28rpx;
.label{ .label{
padding: 20rpx 0;
}
.form-input{
border: 1px solid $uni-color;
background: rgba($uni-color, 0.1);
padding: 10rpx 20rpx;
font-size: 28rpx;
font-weight: 600;
margin-right: 50rpx;
text{
font-size: 24rpx;
font-weight: 500;
}
} }
.title{
font-weight: 900;
margin-top: 50rpx;
padding: 10rpx 0;
.input{
margin-left: auto;
flex-shrink: 0;
image{
}
input{
text-align: right;
}
} }
.tips{
font-size: 26rpx;
color: #777;
padding-bottom: 20rpx;
.icon{
margin-left: 10rpx;
} }
} }
.tips{
font-size: 26rpx;
color: #777;
padding-bottom: 20rpx;
}
.form { .form {
padding: 30rpx;
padding: 0 30rpx;
background-color: #fff;
margin: 20rpx;
border-radius: 20rpx;
.upload{ .upload{
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 690rpx;
// width: 690rpx;
width: 120rpx;
height: 120rpx;
border-radius: 50%;
overflow: hidden;
background-color: #f3f3f3; background-color: #f3f3f3;
border-radius: 10rpx; border-radius: 10rpx;
.btn-add{
margin: auto;
padding: 10rpx 20rpx;
background-color: $uni-color;
color: #fff;
border-radius: 10rpx;
}
// .btn-add{
// margin: auto;
// padding: 10rpx 20rpx;
// background-color: $uni-color;
// color: #fff;
// border-radius: 10rpx;
// }
} }
} }
} }


Loading…
Cancel
Save