diyici
This commit is contained in:
dt_2916866708
6
uni_modules/vehicle-code/changelog.md
Normal file
6
uni_modules/vehicle-code/changelog.md
Normal file
@@ -0,0 +1,6 @@
|
||||
## 1.0.2（2022-08-31）
|
||||
无
|
||||
## 1.0.1（2022-08-31）
|
||||
暂无
|
||||
## 1.0.0（2022-08-31）
|
||||
发布版本1.0.0
|
||||
@@ -0,0 +1,416 @@
|
||||
<template>
|
||||
<uni-popup id="popupV" ref="popupV" type="share" :maskClick="mask">
|
||||
<view class="uni-flex uni-column">
|
||||
<view class="layer">
|
||||
<view class="nums">
|
||||
<text class="nums-l">{{title}}</text>
|
||||
<text class="closes myicon icon-closes" @click.stop="$refs.popupV.close()"></text>
|
||||
</view>
|
||||
<view class="row b-b">
|
||||
<text class="spot"></text>
|
||||
<view class="cart-num" :class="{cartdef:cartindex == index,marginR:index===1,
|
||||
gua:cartData[index].name==='挂'}"
|
||||
@click="checkcart(item,index)" v-for="(item,index) in cartlength" :key="index">
|
||||
{{cartData[index].name}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="model-div" v-for="(item,index) in popupList" :key="index"
|
||||
@click.stop="checkdata(item,index)">
|
||||
{{item}}
|
||||
</view>
|
||||
<view class="model-btn">
|
||||
<text class="qx sy" @click.stop="$refs.popupV.close()">取消</text>
|
||||
<text class="qd sy" @click.stop="confirm">确定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let cardList = [
|
||||
"京", "津", "冀", "晋", "蒙", "辽", "吉", "黑",
|
||||
"沪", "苏", "浙", "皖", "闽", "赣", "鲁", "豫",
|
||||
"湘", "鄂", "粤", "桂", "琼", "渝", "川", "黔",
|
||||
"滇", "藏", "陕", "甘", "青", "宁", "贵", "台",
|
||||
"港", "澳", "新"
|
||||
];
|
||||
|
||||
export default {
|
||||
props:{
|
||||
// length: {
|
||||
// type: [Array, String, Number,Boolean],
|
||||
// default: 7
|
||||
// },
|
||||
title: {
|
||||
type: [Array, String, Number,Boolean],
|
||||
default: '车牌号'
|
||||
},
|
||||
mask: {
|
||||
type: [Array, String, Number,Boolean],
|
||||
default: false
|
||||
},
|
||||
codeList: {
|
||||
type: Array,
|
||||
default: function(){
|
||||
return cardList;
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
urls: '',
|
||||
cartinfo: {
|
||||
token: '',
|
||||
name: '',
|
||||
tel: '',
|
||||
color: '',
|
||||
code: '',
|
||||
default: 0
|
||||
},
|
||||
disabled: false,
|
||||
cartindex: '',
|
||||
popupList: [],
|
||||
letternumList: [],
|
||||
letterList: [],
|
||||
colorList: [],
|
||||
numbList: [],
|
||||
cardList: [],
|
||||
specClass: 'none',
|
||||
cartlength: [],
|
||||
cartData: [],
|
||||
cartcode: '',
|
||||
colorindex: 0,
|
||||
wzfrom:{},
|
||||
length:7,
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
mounted(){
|
||||
this.letterData();
|
||||
},
|
||||
watch:{},
|
||||
methods: {
|
||||
/* 字母,数字,车牌号前缀 */
|
||||
letterData() {
|
||||
let arry = [];
|
||||
for (let i = 0; i < 26; i++) {
|
||||
// console.log(String.fromCharCode(65+i));//输出A-Z 26个大写字母
|
||||
this.letterList.push(String.fromCharCode(65 + i));
|
||||
arry.push(String.fromCharCode(65 + i));
|
||||
}
|
||||
for (let i = 0; i < 10; i++) {
|
||||
// console.log(String.fromCharCode(65+i));//输出A-Z 26个大写字母
|
||||
this.numbList.push(i.toString());
|
||||
arry.push(i.toString());
|
||||
}
|
||||
this.cardList = this.codeList;
|
||||
this.colorList = ["红色", "白色", "黑色", "黄色", "银色", "紫色", "绿色", "棕色", "粉色", "橙色", "灰色", "深蓝色", "其他"];
|
||||
|
||||
this.letternumList = arry;
|
||||
|
||||
this.cartlength.length = this.length;
|
||||
// console.log(this.cartlength);
|
||||
this.intDatas([],this.cartlength.length);
|
||||
// console.log(arry);//数字+字母
|
||||
// console.log(this.numbList);//数字
|
||||
// console.log(this.letterList);//字母
|
||||
// console.log(this.cardList);//省开头
|
||||
},
|
||||
/* 车牌号校验 */
|
||||
isLicenseNo(str) {
|
||||
// let res = /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][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挂学警港澳使领]))$/;
|
||||
// return res.test(str);
|
||||
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(str);
|
||||
},
|
||||
// 选择自动切换下一项
|
||||
checkdata(item, index) {
|
||||
if (this.colorindex == 99) {
|
||||
this.cartinfo.color = item;
|
||||
this.toggleSpec(-1);
|
||||
} else {
|
||||
let cartindex = this.cartindex;
|
||||
if ((cartindex + 1) === this.cartlength.length) {
|
||||
this.cartData[cartindex].name = item;
|
||||
this.toggleSpec(-1);
|
||||
} else {
|
||||
this.cartData[cartindex].name = item;
|
||||
cartindex += 1;
|
||||
}
|
||||
let num = cartindex;
|
||||
// console.log(JSON.stringify(this.cartData))
|
||||
// console.log(num)
|
||||
if(this.cartData[num].name==='挂')return
|
||||
this.cartindex = cartindex;
|
||||
this.togList(num);
|
||||
}
|
||||
|
||||
},
|
||||
togList(index) {
|
||||
// console.log(index)
|
||||
this.colorindex = index;
|
||||
if (index == 0) {
|
||||
this.popupList = this.cardList;
|
||||
}
|
||||
if (index == 1) {
|
||||
this.popupList = this.letterList;
|
||||
}
|
||||
if (index == 99) {
|
||||
this.popupList = this.colorList;
|
||||
}
|
||||
if (index != 1 && index != 0 && index != 99) {
|
||||
this.popupList = this.letternumList;
|
||||
}
|
||||
},
|
||||
//弹窗开关
|
||||
toggleSpec(index) {
|
||||
if (this.specClass === 'show') {
|
||||
this.specClass = 'hide';
|
||||
setTimeout(() => {
|
||||
this.specClass = 'none';
|
||||
}, 250);
|
||||
} else if (this.specClass === 'none') {
|
||||
this.specClass = 'show';
|
||||
}
|
||||
if (index == -1) {} else {
|
||||
this.togList(index);
|
||||
}
|
||||
// console.log(JSON.stringify(this.popupList))
|
||||
},
|
||||
intDatas(data,index){
|
||||
for (let i = 0; index > i; i++) {
|
||||
this.cartData.push({
|
||||
name: ''
|
||||
});
|
||||
}
|
||||
// console.log(this.cartData)
|
||||
},
|
||||
//选择
|
||||
checkcart(row, index) {
|
||||
if(!this.isLicenseNo(row)&&row){
|
||||
uni.showToast({
|
||||
title:'车牌号有误',
|
||||
icon:'error',
|
||||
})
|
||||
}
|
||||
if(row){
|
||||
if(row.length>0){
|
||||
this.cartData = [];
|
||||
let length = this.length;
|
||||
for(let i=0;length>i;i++){
|
||||
this.cartData.push({
|
||||
name: row[i]
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log(row, index,this.cartData[index].name)
|
||||
if(!row&&index===6&&this.cartData[index].name==='挂')return
|
||||
this.cartindex = index;
|
||||
this.toggleSpec(index);
|
||||
|
||||
this.$refs.popupV.open()
|
||||
},
|
||||
//提交
|
||||
confirm() {
|
||||
this.cartcode = '';
|
||||
this.cartData.forEach((item, index) => {
|
||||
this.cartcode += item.name;
|
||||
})
|
||||
// console.log(this.cartData)
|
||||
// console.log(this.cartlength)
|
||||
this.cartinfo.code = this.cartcode;
|
||||
// console.log(this.cartcode)
|
||||
// console.log(this.cartinfo)
|
||||
if(this.isLicenseNo(this.cartinfo.code)){
|
||||
this.$set(this.wzfrom,'num',this.cartinfo.code)
|
||||
this.$emit('changes',this.cartinfo.code);
|
||||
this.$refs.popupV.close()
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:'请正确选择车牌号',
|
||||
icon:'error',
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page{
|
||||
.layer {
|
||||
// position: fixed;
|
||||
// z-index: 99;
|
||||
// bottom: 0;
|
||||
width: 97.5%;
|
||||
min-height: 10vh;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
background-color: #FFFFFF;
|
||||
padding: 10rpx 10rpx 10rpx 14rpx;
|
||||
|
||||
.nums {
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
|
||||
.nums-l {
|
||||
margin-left: 40rpx;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.closes {
|
||||
float: right;
|
||||
margin-right: 40rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.model-btn {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
margin: 5rpx;
|
||||
text-align: center;
|
||||
float: right;
|
||||
font-size: 34rpx;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border-top: 1rpx solid #F0F0F0;
|
||||
|
||||
.sy {
|
||||
padding: 16rpx 18%;
|
||||
margin: 0 15rpx;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.qx {
|
||||
background: linear-gradient(to left, #D4D4D4, #F0F0F0);
|
||||
color: #676767;
|
||||
}
|
||||
|
||||
.qd {
|
||||
background: linear-gradient(to left, #226AFF, #0097FF);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.model-div {
|
||||
width: 11.2%;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
background: #F5F5F5;
|
||||
margin: 5rpx;
|
||||
// border-radius: 20rpx;
|
||||
float: left;
|
||||
text-align: center;
|
||||
|
||||
&:active {
|
||||
background-color: #CCCCCC;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 0 0rpx;
|
||||
height: 120rpx;
|
||||
background: #fff;
|
||||
.gua{
|
||||
background: #F0F0F0;
|
||||
}
|
||||
.cart-num {
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
width: 10.3%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
margin: 0 10rpx;
|
||||
border: 1rpx solid #D3D3D3;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.cartdef {
|
||||
border: 3rpx #226AFF solid;
|
||||
}
|
||||
|
||||
.marginR {
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
|
||||
.spot {
|
||||
position: absolute;
|
||||
left: 208rpx;
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
color: #999;
|
||||
background: #999;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.mgleft {
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
|
||||
.icon-dhb {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.tit {
|
||||
flex-shrink: 0;
|
||||
width: 120upx;
|
||||
font-size: 30upx;
|
||||
color: #676767;
|
||||
}
|
||||
|
||||
.color {
|
||||
width: 150rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
height: 110rpx;
|
||||
line-height: 110rpx;
|
||||
|
||||
.label-txt {
|
||||
position: relative;
|
||||
bottom: 2rpx;
|
||||
margin-left: 20rpx;
|
||||
border: 1rpx #333333 solid;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 50rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.check {
|
||||
border: 1rpx $lxyy-color solid;
|
||||
color: $lxyy-color;
|
||||
}
|
||||
}
|
||||
|
||||
.label-duo {
|
||||
position: relative;
|
||||
bottom: 4rpx;
|
||||
margin-left: 30rpx;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
font-size: 30upx;
|
||||
color: $font-color-dark;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.icon-shouhuodizhi {
|
||||
font-size: 36upx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
81
uni_modules/vehicle-code/package.json
Normal file
81
uni_modules/vehicle-code/package.json
Normal file
@@ -0,0 +1,81 @@
|
||||
{
|
||||
"id": "vehicle-code",
|
||||
"displayName": "vehicle-code车牌号选择面板【移动端】",
|
||||
"version": "1.0.2",
|
||||
"description": "vehicle-code车牌号选择面板【移动端】",
|
||||
"keywords": [
|
||||
"vehicle-code"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "",
|
||||
"type": "uniapp-template-page"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "u",
|
||||
"vue3": "u"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "u",
|
||||
"Android Browser": "u",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "u"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "y",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
44
uni_modules/vehicle-code/readme.md
Normal file
44
uni_modules/vehicle-code/readme.md
Normal file
@@ -0,0 +1,44 @@
|
||||
## 功能介绍
|
||||
- 简洁的车牌号选择组件（适用于 `移动端`）
|
||||
|
||||
## 使用方法
|
||||
- `uni_modules` 方式
|
||||
1. 点击右上角的 `使用 HBuilder X 导入插件` 按钮直接导入项目或点击 `下载插件 ZIP` 按钮下载插件包并解压到项目的 `uni_modules/vehicle-code` 目录下
|
||||
2. 在需要使用页面的 `(n)vue` 文件中添加
|
||||
```html
|
||||
<!-- 不需要引入，可直接使用 -->
|
||||
<vehicle-code ref="child" @changes="confirms" :codeList="cardList"/>
|
||||
<!-- 按钮触发 -->
|
||||
<!-- vehicleCode:车牌号（可选项） -->
|
||||
<!-- index:指定选中下标高亮 -->
|
||||
<button type="primary" @click="$refs.child.checkcart(vehicleCode, index)"></button>
|
||||
```
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cardList:[],
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
confirms(e){
|
||||
//e 获取返回车牌号
|
||||
},
|
||||
}
|
||||
}
|
||||
```
|
||||
3. 需要更新版本时在 `HBuilder X` 中右键 `uni_modules/vehicle-code` 目录选择 `从插件市场更新` 即可
|
||||
|
||||
## 组件属性
|
||||
|
||||
| 属性 | 类型 | 默认值 | 说明 |
|
||||
|:---:|:---:|:---:|---|
|
||||
| title | String | '例如：车牌号' | 弹框标题 |
|
||||
| mask | Boolean | false | 蒙板点击是否关闭弹窗 |
|
||||
| codeList | Array | [] | 默认35个省车牌号（新增台） |
|
||||
|
||||
## 组件事件
|
||||
|
||||
| 名称 | 触发时机 |
|
||||
|:---:|---|
|
||||
| changes | 确认选择车牌后触发 |
|
||||
Reference in New Issue
Block a user