caoliancun/zhongpin_Phase-II_MP_WX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

12121

Browse Source
This commit is contained in:
caolc
2023-05-08 10:53:14 +08:00
commit 7d7462ff25
203 changed files with 38885 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
BagAuth/pages/authentication/authForm/authForm.vue Normal file
View File

@@ -0,0 +1,197 @@
<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>