中品加油
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

198 lines
5.8 KiB

2 years ago
<template>
<view class="content">
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
<block slot="backText">返回</block>
<block slot="content">认证</block>
</cu-custom>
<view class="padding">
<view class="padding-left padding-bottom-xs">
<text>身份证</text>
</view>
<view class="shadow radius">
<view class="bg-white padding-sm ">
<view class="grid uplaod-container grid-square justify-between ">
<view class="bg-img basis-sm " v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
<image :src="imgList[index]" mode="aspectFill"></image>
<view class="cu-tag bg-blue" @tap.stop="DelImg" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids oil-main-btn-color basis-sm" @tap="ChooseImage" v-if="imgList.length<1">
<text class='cuIcon-cameraadd oil-main-color'></text>
<view class="text-center upload-desc font-12">
身份证人像面
</view>
</view>
<view class="bg-img basis-sm" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
<image :src="imgList[index]" mode="aspectFill"></image>
<view class="cu-tag bg-blue" @tap.stop="DelImg" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids oil-main-btn-color basis-sm" @tap="ChooseImage" v-if="imgList.length<1">
<text class='cuIcon-cameraadd oil-main-color'></text>
<view class="text-center upload-desc font-12">
<text>身份证国徽面</text>
</view>
</view>
</view>
</view>
<view class="cu-form-group">
<view class="title">车牌号</view>
<text v-if="!plateText" @tap="showPlateModal(true,false)" class="cuIcon-right oil-main-btn-color oil-main-color"></text>
<text v-else @tap="showPlateModal(true,false)" class=" oil-main-btn-color oil-main-color plate-name">{{plateText}}</text>
<input v-model="plateNo" :maxlength="6" @tap="showPlateModal(false,true)" read-only adjust-position class="margin-left"
placeholder="车牌号码" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">姓名</view>
<input adjust-position placeholder="两字短标题" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">性别</view>
<input adjust-position placeholder="两字短标题" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">身份证号</view>
<input adjust-position placeholder="两字短标题" name="input"></input>
</view>
<PlateNumberPicker @newPlate="showPlateModal(false,true)" @onDeleteInput="onDeleteInput" :showInputList="showInputList"
:showPlateList="showPlateList" @selectNo="selectNo" @selectName="selectText" @hideModal="showModel=''" :modalName="showModel" />
</view>
</view>
<view class="confirm-btn">
<button class="bg-main-oil margin">确定</button>
</view>
<view class="my-bg">
</view>
</view>
</template>
<script>
import PlateNumberPicker from '@/components/plate-number-picker/plate-number-picker.vue'
export default {
components: {
PlateNumberPicker
},
data() {
return {
showPlateList: true,
showInputList: false,
carNumber: '',
plateNo: '',
plateText: '',
imgList: [],
plateName: '',
showPlateList: true,
showInputList: false,
showModel: ''
}
},
methods: {
text() {
this.carNumber = this.plateText + this.plateNo
this.tsetPlate()
},
tsetPlate() {
this.carNumber = this.plateText + this.plateNo
this.testResult =
/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/
.test(this.carNumber)
},
onDeleteInput() {
this.plateNo = this.plateNo.slice(0, -1)
},
selectText(item) {
this.plateText = item
this.showPlateList = false
this.showInputList = true
this.tsetPlate()
},
selectNo(item) {
if (this.plateNo.length >= 5) {
this.showModel = ''
}
this.plateNo = this.plateNo + item
this.tsetPlate()
},
showPlateModal(val1, val2) {
this.showPlateList = val1
this.showInputList = val2
this.showModel = 'show'
},
ChooseImage() {
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
success: (res) => {
if (this.imgList.length != 0) {
this.imgList = this.imgList.concat(res.tempFilePaths)
} else {
this.imgList = res.tempFilePaths
}
}
});
},
ViewImage(e) {
uni.previewImage({
urls: this.imgList,
current: e.currentTarget.dataset.url
});
},
DelImg(e) {
uni.showModal({
title: '召唤师',
content: '确定要删除这段回忆吗?',
cancelText: '再看看',
confirmText: '再见',
success: res => {
if (res.confirm) {
this.imgList.splice(e.currentTarget.dataset.index, 1)
}
}
})
},
}
}
</script>
<style scoped>
.bg-img {
min-height: 200rpx;
}
.uplaod-container {
min-height: 200upx;
}
.solids {
position: relative;
}
.upload-desc {
position: absolute;
top: 120rpx;
color: #FE0505;
width: 100%;
}
.content {
background-color: #f1f2f7;
min-height: 100%;
}
.plate-name {
display: inline-block;
padding: 0.15rem 0.4rem;
}
.confirm-btn {
background-color: #f1f2f7;
position: absolute;
width: 750upx;
bottom: 200rpx;
}
</style>