caoliancun/MP-XiaoXing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

123

Browse Source
This commit is contained in:
caolc
2023-02-07 14:39:12 +08:00
parent 0e0012880f
commit ce2d0cefd6
75 changed files with 13116 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
Financial/components/plateNumber.vue Normal file
View File

@@ -0,0 +1,300 @@
<template>
<view class="plateNumber_body">
<view @click="open" :style="{color:administrative?'#000000':''}" class="plateNumber_select">
<!-- <uni-data-select placeholder='行政' class="uni_data_select" :clear="false" v-model="value" :localdata="range"
@change="change"></uni-data-select> -->
<text > {{administrative?administrative:'行政'}} </text>
</view>
<view class="cutApart"></view>
<view class="plateNumber_input">
<input placeholder="请输入车牌号码" v-model="plateNumber" />
</view>
<uni-popup :isTouchmove='false' ref="popup" type="bottom" background-color="#fff">
<view style="height:35vh; display: flex;flex-direction: column; padding-bottom: env(safe-area-inset-bottom); border-radius: 20px;">
<!-- <picker-view :value="seleIndex" @change="pickerChange"
@pickstart='pickstart' @pickend='pickendFn' style="flex: 1;">
<picker-view-column>
<view style="display: flex;align-items: center;justify-content: center;"
v-for="(item,index) in range" :key="index">{{ item.text}}</view>
</picker-view-column>
</picker-view> -->
<view class="administrative_container" >
<view :style="{color:divIndex === index?'#ffffff':'',backgroundColor:divIndex === index?'#FF6700':''}" @click="divIndex = index" class="administrative_item" v-for="(item,index) in range" :key="index">{{ item.text}}</view>
</view>
<button :disabled="pickerOpen" :loading='pickerOpen' @click="buttenFn" class="butten" >
<text>{{pickerOpen?'':'确定'}}</text>
</button>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
options: {
styleIsolation: 'shared', // 解除样式隔离
},
data() {
return {
divIndex:'',
administrative :'',
seleIndex: [0],
pickerOpen:false,
value: '',
plateNumber: '',
range: [{
value: 0,
text: "京"
},
{
value: 1,
text: "津"
},
{
value: 2,
text: "沪"
},
{
value: 3,
text: "渝"
},
{
value: 4,
text: "冀"
},
{
value: 5,
text: "豫"
},
{
value: 6,
text: "云"
},
{
value: 7,
text: "辽"
},
{
value: 8,
text: "黑"
},
{
value: 9,
text: "湘"
},
{
value: 10,
text: "皖"
},
{
value: 11,
text: "鲁"
},
{
value: 12,
text: "新"
},
{
value: 13,
text: "苏"
},
{
value: 14,
text: "浙"
},
{
value: 15,
text: "赣"
},
{
value: 16,
text: "鄂"
},
{
value: 17,
text: "桂"
},
{
value: 18,
text: "甘"
},
{
value: 19,
text: "晋"
},
{
value: 20,
text: "蒙"
},
{
value: 21,
text: "陕"
},
{
value: 22,
text: "吉"
},
{
value: 23,
text: "闽"
},
{
value: 24,
text: "贵"
},
{
value: 25,
text: "粤"
},
{
value: 26,
text: "青"
},
{
value: 27,
text: "藏"
},
{
value: 28,
text: "川"
},
{
value: 29,
text: "宁"
},
{
value: 30,
text: "琼"
},
],
};
},
methods: {
buttenFn(){
console.log()
this.value = this.divIndex;
this.administrative = `${ this.range[this.value].text }`;
this.$refs.popup.close()
},
open(){
this.$refs.popup.open('bottom')
},
pickerChange(e) {
this.seleIndex = e.detail.value;
console.log(e)
},
pickstart(){
this.pickerOpen = true
},
pickendFn(){
this.pickerOpen = false
},
checkFn(e, value) {
switch (e) {
case 'name':
return /(^[\u4e00-\u9fa5]{1}[\u4e00-\u9fa5\.·。]{0,18}[\u4e00-\u9fa5]{1}$)|(^[a-zA-Z]{1}[a-zA-Z\s]{0,18}[a-zA-Z]{1}$)/
.test(value);
case 'plateNumber':
return /(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/
.test(value)
case 'phone':
return /^1[3456789]\d{9}$/.test(value);
case 'replacePhone':
return /^1[3456789]\d{9}$/.test(value);
}
},
plateNumberCallBack() {
if(this.value!==''){
const plateNumber = `${ this.range[this.value].text }${this.plateNumber}`
console.log(plateNumber,'plateNumber')
if (this.checkFn('plateNumber', plateNumber)) {
return plateNumber
} else {
throw Error('输入车牌号');
}
}else{
throw Error('选择车牌归属地');
}
},
change(e) {
console.log("e:", e);
},
},
};
</script>
<style>
.administrative_item{
background-color: #F0F0F0;
width: 140rpx;
height: 60rpx;
color: #000000;
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
margin-left: 20rpx;
margin-bottom: 10rpx;
}
.administrative_container{
width: calc((160rpx * 4) );
display: flex;
flex-wrap: wrap;
height: calc(100% - 60rpx);
overflow: auto;
position: relative;
margin: 0 auto;
padding: 20rpx 0;
overflow-y: scroll !important;
}
.butten{
background-color: #FF6700;
color: #FFFFFF;
font-size: 24rpx;
width: 235rpx;
margin-top: 20rpx;
height: 60rpx !important;
}
.plateNumber_input {
flex: 1;
padding: 0 10rpx;
box-sizing: border-box;
}
.uni-select__input-box {
text-align: center;
}
.cutApart {
height: 70%;
width: 1px;
background-color: #BBBBBB;
}
.uni-select {
border: 0px;
border-radius: 0px;
}
.plateNumber_select {
width: 100rpx;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #6a6a6a;
}
.plateNumber_body {
height: 80rpx;
width: 360rpx;
border-radius: 10px;
background: #FFFFFF;
border-radius: 10px;
display: flex;
align-items: center;
}
</style>