|
|
|
@ -6,12 +6,26 @@ |
|
|
|
</view> |
|
|
|
<view class="form-group"> |
|
|
|
<view class="form-item"> |
|
|
|
<input type="text" v-model="rname" class="form-item--input" placeholder="请输入手机号持有人姓名"/> |
|
|
|
<input type="text" v-model="rname" class="form-item--input" @focus="fcevt()" placeholder="请输入手机号持有人姓名"/> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="form-item"> |
|
|
|
<input type="text" v-model="rid" maxlength="18" class="form-item--input" placeholder="请输入手机号持有人身份证号"/> |
|
|
|
<input type="text" v-model="rid" maxlength="18" class="form-item--input" @focus="fcevt()" placeholder="请输入手机号持有人身份证号"/> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 图片列表 --> |
|
|
|
<view class="image-list"> |
|
|
|
<view class="image-preview"> |
|
|
|
<text class="image-delete iconfont icon-shanchu" @click="deleteImage(index, imageIndex)"></text> |
|
|
|
<image class="image" mode="aspectFill" ></image> |
|
|
|
</view> |
|
|
|
<view class="image-picker" > |
|
|
|
<text class="choose-icon iconfont icon-camera"></text> |
|
|
|
<text class="choose-text">上传图片</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
<view class="gtbtnzone"> |
|
|
|
@ -21,16 +35,22 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import * as UploadApi from '@/api/upload' |
|
|
|
import * as Verify from '@/utils/verify' |
|
|
|
import store from '@/store' |
|
|
|
|
|
|
|
// 最大图片数量 |
|
|
|
const maxImageLength = 2 |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
//姓名 |
|
|
|
rname:"方哲宇", |
|
|
|
rname:"", |
|
|
|
// 身份证 |
|
|
|
rid:"440923195801215174", |
|
|
|
rid:"", |
|
|
|
// 图片列表 |
|
|
|
imageList: [], |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
@ -43,7 +63,7 @@ |
|
|
|
this.$navTo("pages/verfiy/choosedev"); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
//todo |
|
|
|
formValidationName(str){ |
|
|
|
if(Verify.isEmpty(str)){ |
|
|
|
@ -64,8 +84,67 @@ |
|
|
|
return false |
|
|
|
} |
|
|
|
return true |
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// 选择图片 |
|
|
|
chooseImage(index) { |
|
|
|
const app = this |
|
|
|
const oldImageList = app.imageList |
|
|
|
// 选择图片 |
|
|
|
uni.chooseImage({ |
|
|
|
count: maxImageLength - oldImageList.length, |
|
|
|
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 |
|
|
|
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 |
|
|
|
success({ tempFiles }) { |
|
|
|
// tempFiles = [{path:'xxx', size:100}] |
|
|
|
app.imageList = oldImageList.concat(tempFiles) |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 删除图片 |
|
|
|
deleteImage(index, imageIndex) { |
|
|
|
this.imageList.splice(imageIndex, 1) |
|
|
|
}, |
|
|
|
// 统计图片数量 |
|
|
|
getImagesLength() { |
|
|
|
const { formData } = this |
|
|
|
let imagesLength = 0 |
|
|
|
formData.forEach(item => { |
|
|
|
if (item.content.trim()) { |
|
|
|
imagesLength += item.imageList.length |
|
|
|
} |
|
|
|
}) |
|
|
|
return imagesLength |
|
|
|
}, |
|
|
|
|
|
|
|
// 上传图片 |
|
|
|
uploadFile() { |
|
|
|
const app = this |
|
|
|
const { formData } = app |
|
|
|
// 整理上传文件路径 |
|
|
|
const files = [] |
|
|
|
formData.forEach((item, index) => { |
|
|
|
if (item.content.trim() && item.imageList.length) { |
|
|
|
const images = item.imageList.map(image => image) |
|
|
|
files.push({ formDataIndex: index, images }) |
|
|
|
} |
|
|
|
}) |
|
|
|
// 批量上传 |
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
Promise.all(files.map((file, index) => { |
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
UploadApi.image(file.images) |
|
|
|
.then(fileIds => { |
|
|
|
app.uploaded = fileIds |
|
|
|
resolve(fileIds) |
|
|
|
}) |
|
|
|
.catch(reject) |
|
|
|
}) |
|
|
|
})) |
|
|
|
.then(resolve, reject) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -113,6 +192,76 @@ |
|
|
|
height: 100%; |
|
|
|
background-color: #F8F8F8; |
|
|
|
} |
|
|
|
|
|
|
|
.image-list { |
|
|
|
padding: 0 20rpx; |
|
|
|
margin-top: 20rpx; |
|
|
|
margin-bottom: -20rpx; |
|
|
|
|
|
|
|
&:after { |
|
|
|
clear: both; |
|
|
|
content: " "; |
|
|
|
display: table; |
|
|
|
} |
|
|
|
|
|
|
|
.image { |
|
|
|
display: block; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.image-picker, |
|
|
|
.image-preview { |
|
|
|
width: 184rpx; |
|
|
|
height: 184rpx; |
|
|
|
margin-right: 30rpx; |
|
|
|
margin-bottom: 30rpx; |
|
|
|
float: left; |
|
|
|
|
|
|
|
&:nth-child(3n+0) { |
|
|
|
margin-right: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.image-picker { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
border: 1rpx dashed #ccc; |
|
|
|
color: #ccc; |
|
|
|
|
|
|
|
.choose-icon { |
|
|
|
font-size: 48rpx; |
|
|
|
margin-bottom: 6rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.choose-text { |
|
|
|
font-size: 24rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.image-preview { |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.image-delete { |
|
|
|
position: absolute; |
|
|
|
top: -15rpx; |
|
|
|
right: -15rpx; |
|
|
|
height: 42rpx; |
|
|
|
width: 42rpx; |
|
|
|
line-height: 42rpx; |
|
|
|
background: rgba(0, 0, 0, 0.64); |
|
|
|
border-radius: 50%; |
|
|
|
color: #fff; |
|
|
|
font-weight: bolder; |
|
|
|
font-size: 22rpx; |
|
|
|
z-index: 10; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
453530270@qq.com
2 years ago