Browse Source

feat: 登录页增加数字键盘

test2
xuesinan 4 years ago
parent
commit
ae5f526665
  1. 3
      CHANGELOG.md
  2. 316
      components/master-keyboard/master-keyboard.scss
  3. 312
      components/master-keyboard/master-keyboard.vue
  4. 46
      hooks/user/userMixin.js
  5. 66
      pages/submitLog/submitLog - 副本.vue
  6. 58
      pages/user/login.vue
  7. BIN
      static/icon_delete.png
  8. BIN
      static/icon_down.png

3
CHANGELOG.md

@ -1,4 +1,4 @@
# 1.0.0 (2022-04-28)
# 1.0.0 (2022-05-23)
### 🌟 新功能
范围|描述|commitId
@ -36,6 +36,7 @@
- | 获取交付物信息 | [5ae68e2](https://101.201.226.163:50022/ccsens_tall/TALL-MUI-4/commits/5ae68e2)
- | 获取手机唯一码 | [3f60cf8](https://101.201.226.163:50022/ccsens_tall/TALL-MUI-4/commits/3f60cf8)
- | 将时间轴改成swiper滑动 | [12384f9](https://101.201.226.163:50022/ccsens_tall/TALL-MUI-4/commits/12384f9)
- | 交付物2 | [5f76e78](https://101.201.226.163:50022/ccsens_tall/TALL-MUI-4/commits/5f76e78)
- | 交付物2 | [6b39979](https://101.201.226.163:50022/ccsens_tall/TALL-MUI-4/commits/6b39979)
- | 交付物2 | [51db122](https://101.201.226.163:50022/ccsens_tall/TALL-MUI-4/commits/51db122)
- | 交付物2 | [864b080](https://101.201.226.163:50022/ccsens_tall/TALL-MUI-4/commits/864b080)

316
components/master-keyboard/master-keyboard.scss

@ -0,0 +1,316 @@
.master_wrap{
width: 100%;
background-color: #eee;
position: fixed;
bottom: 0;
left: 0;
padding-top: 10rpx;
padding-bottom: 20rpx;
.down_wrap{
width: 100%;
height: 50rpx;
display: flex;
align-items: center;
justify-content: center;
image{
width: 48rpx;
height: 48rpx;
}
}
.kerboard_number{
width: 100%;
display: flex;
justify-content: space-evenly;
flex-flow: wrap;
.number_item{
width: 30%;
height: 80rpx;
margin-top: 10rpx;
background-color: white;
border-radius: 10rpx;
text-align: center;
line-height: 80rpx;
box-sizing: border-box;
display: block;
}
.number_item_active{
width: 30%;
height: 80rpx;
margin-top: 10rpx;
background-color: #888;
border-radius: 10rpx;
text-align: center;
line-height: 80rpx;
box-sizing: border-box;
display: block;
color: white;
}
.number_empty{
width: 30%;
height: 80rpx;
margin-top: 10rpx;
background-color: white;
border-radius: 10rpx;
text-align: center;
line-height: 80rpx;
box-sizing: border-box;
display: block;
// background-color: #eeeeee;
// width: 30%;
// height: 80rpx;
// margin-top: 10rpx;
// border-radius: 10rpx;
}
.number_empty_active{
background-color: #888;
// background-color: #eeeeee;
}
.number_delete{
width: 30%;
height: 80rpx;
margin-top: 10rpx;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
.delete_img{
width: 65rpx;
height: 64rpx;
}
}
.number_delete_active{
width: 30%;
height: 80rpx;
margin-top: 10rpx;
background-color: #888;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10rpx;
.delete_img{
width: 65rpx;
height: 64rpx;
}
}
}
.keyboard_car{
width: 100%;
display: flex;
flex-direction: column;
position: relative;
.car_down{
position: absolute;
top: 10rpx;
left: 15rpx;
width: 48rpx;
height: 48rpx;
}
.tab_wrap{
height: 65rpx;
margin: 0 auto;
background-color: white;
border-radius: 20rpx;
display: flex;
padding-left: 25rpx;
padding-right: 25rpx;
image{
width: 48rpx;
height: 48rpx;
}
.tab_item{
height: 100%;
text-align: center;
line-height: 65rpx;
font-size: 26rpx;
margin: 0 20rpx;
}
.tab_item_active{
height: 100%;
text-align: center;
line-height: 65rpx;
font-size: 26rpx;
margin: 0 20rpx;
text-decoration: underline;
color: #e64d3a;
}
}
.car_content{
width: 100%;
position: relative;
.car_province{
width: 100%;
display: flex;
justify-content: space-evenly;
flex-flow: wrap;
margin: 0;
.province_item{
width: 9.5%;
height: 80rpx;
margin-top: 10rpx;
background-color: white;
border-radius: 10rpx;
text-align: center;
line-height: 80rpx;
box-sizing: border-box;
display: block;
font-size: 28rpx;
font-weight: 450;
}
.province_item_active{
width: 9.5%;
height: 80rpx;
margin-top: 10rpx;
background-color: #888;
border-radius: 10rpx;
text-align: center;
line-height: 80rpx;
box-sizing: border-box;
display: block;
font-size: 28rpx;
font-weight: 450;
color: white;
}
.province_item_disable{
width: 9.5%;
height: 80rpx;
margin-top: 10rpx;
background-color: #fff;
border-radius: 10rpx;
text-align: center;
line-height: 80rpx;
box-sizing: border-box;
display: block;
font-size: 28rpx;
font-weight: 450;
opacity: 0.5;
}
}
.car_province_1{
width: 100%;
display: flex;
margin: 0;
.province_item1{
margin: 0;
width: 9.5%;
height: 80rpx;
margin-top: 10rpx;
background-color: white;
border-radius: 10rpx;
text-align: center;
line-height: 80rpx;
box-sizing: border-box;
display: block;
font-size: 28rpx;
font-weight: 450;
}
.province_item_active{
width: 9.5%;
height: 80rpx;
margin-top: 10rpx;
background-color: #888;
border-radius: 10rpx;
text-align: center;
line-height: 80rpx;
box-sizing: border-box;
display: block;
font-size: 28rpx;
font-weight: 450;
color: white;
}
.province_item_disable{
width: 9.5%;
height: 80rpx;
margin-top: 10rpx;
background-color: #fff;
border-radius: 10rpx;
text-align: center;
line-height: 80rpx;
box-sizing: border-box;
display: block;
font-size: 28rpx;
font-weight: 450;
opacity: 0.5;
}
}
.car_latter{
width: 100%;
display: flex;
justify-content: space-evenly;
flex-flow: wrap;
.latter_item{
width: 9.5%;
height: 80rpx;
margin-top: 10rpx;
background-color: white;
border-radius: 10rpx;
text-align: center;
line-height: 80rpx;
box-sizing: border-box;
display: block;
font-size: 28rpx;
font-weight: 450;
}
.province_item_active{
width: 9.5%;
height: 80rpx;
margin-top: 10rpx;
background-color: #888;
border-radius: 10rpx;
text-align: center;
line-height: 80rpx;
box-sizing: border-box;
display: block;
font-size: 28rpx;
font-weight: 450;
color: white;
}
.province_item_disable{
width: 9.5%;
height: 80rpx;
margin-top: 10rpx;
background-color: #fff;
border-radius: 10rpx;
text-align: center;
line-height: 80rpx;
box-sizing: border-box;
display: block;
font-size: 28rpx;
font-weight: 450;
opacity: 0.5;
}
}
.car_delete{
width: 15%;
height: 80rpx;
margin-top: 10rpx;
background-color: white;
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
.delete_img{
width: 65rpx;
height: 64rpx;
}
}
.car_delete_active{
width: 15%;
height: 80rpx;
margin-top: 10rpx;
background-color: #e64d3a;
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
.delete_img{
width: 65rpx;
height: 64rpx;
}
}
}
}
}

312
components/master-keyboard/master-keyboard.vue

@ -0,0 +1,312 @@
<template>
<view class="master_wrap" v-show="show" hover-stop-propagation>
<block v-if="keyboardtype == 'number' || keyboardtype == 'digit' || keyboardtype == 'idcard'">
<view class="down_wrap">
<image src="../../static/icon_down.png" @tap.stop="handleCloseKeyboard(false)"></image>
</view>
<view class="kerboard_number">
<view @tap.stop="handleNumberKeyboardClick(item)" :hover-stay-time="100"
:class="item== '-1' ? keyboardtype == 'number' ? 'number_empty' :'number_item' : item=='-2' ? 'number_delete' : 'number_item' "
:hover-class="item== '-1' ? keyboardtype == 'number' ? 'number_empty_active' : 'number_item_active' : item=='-2' ? 'number_delete_active' : 'number_item_active'"
v-for="(item,index) in randomNumberArr" :key="index">
<block v-if="item == '-1'">
<view v-if="keyboardtype == 'number'" @click="toPaste">
粘贴
</view>
<view v-else-if="keyboardtype == 'digit'">
·
</view>
<view v-else-if=" keyboardtype == 'idcard'">
X
</view>
</block>
<block v-else-if="item == '-2'">
<image class="delete_img" src="../../static/icon_delete.png"></image>
</block>
<block v-else>
{{item}}
</block>
</view>
</view>
</block>
<block v-else-if="keyboardtype == 'car'">
<view class="keyboard_car">
<image @tap.stop="handleCloseKeyboard(false)" class="car_down" src="../../static/icon_down.png"></image>
<view class="tab_wrap">
<view @tap.stop="handleCarTabItemClick(index)" :class=" carType === index ?'tab_item_active' : 'tab_item'"
hover-class="tab_item_active" v-for="(item,index) in carTabArr" :key="index">
{{item}}
</view>
</view>
<view class="car_content">
<block v-if="carType === 0">
<view class="car_province">
<view @tap.stop="handleCarKerboardClick(item)"
:class="computedDefaultValueLength ===0 ? 'province_item' :'province_item_disable'"
:hover-class="computedDefaultValueLength ===0 ? 'province_item_active' : 'none'" :hover-stay-time="100"
v-for="(item,index) in sliceProvinceArr" :key="index">
{{item}}
</view>
</view>
<view class="car_province_1">
<view @tap.stop="handleCarKerboardClick(item)"
:class=" (formatCarProvinceFirst(item) === -1 && computedDefaultValueLength ===0 ) ? 'province_item1' :
((newCar && computedDefaultValueLength ===7 && formatCarProvinceFirst(item) !== -1) ||
(!newCar && computedDefaultValueLength ===6 && formatCarProvinceFirst(item) !== -1) ) ? 'province_item1' : 'province_item_disable'"
:hover-class=" (formatCarProvinceFirst(item) === -1 && computedDefaultValueLength ===0) ? 'province_item_active' : 'none'"
:hover-stay-time="100" :style="{'margin-left' : computeItemSpace + '%'}"
v-for="(item,index) in sliceSecondProvinceArr" :key="index">
{{item}}
</view>
</view>
</block>
<block v-else="carType === 1">
<view class="car_latter">
<view @tap.stop="handleCarKerboardClick(item)"
:class=" (computedDefaultValueLength ===1 && formatCarProvinceSecond(item) >-1 || computedDefaultValueLength ===0) ? 'province_item_disable' : 'latter_item'"
:hover-class=" (computedDefaultValueLength ===1 && formatCarProvinceSecond(item) >-1 || computedDefaultValueLength ===0) ? 'none' : 'province_item_active'"
:hover-stay-time="100" v-for="(item,index) in sliceLatterArr" :key="index">
<text>{{item}}</text>
</view>
</view>
<view class="car_province_1">
<view @tap.stop="handleCarKerboardClick(item)"
:class=" (computedDefaultValueLength ===1 && formatCarProvinceSecond(item) >-1 || computedDefaultValueLength ===0) ? 'province_item_disable' : 'province_item1'"
:hover-class=" (computedDefaultValueLength ===1 && formatCarProvinceSecond(item) >-1 || computedDefaultValueLength ===0) ? 'none' : 'province_item_active'"
:hover-stay-time="100" :style="{'margin-left' : computeItemSpace + '%'}"
v-for="(item,index) in sliceSecondLatterArr" :key="index">
{{item}}
</view>
</view>
</block>
<view @tap.stop="handleCarKerboardDeleteClick" class="car_delete" hover-class="car_delete_active"
:hover-stay-time="100" :style="{'top':computeDeleteTop + 'rpx','right' :computeItemSpace + '%' }">
<image class="delete_img" src="../../static/icon_delete.png"></image>
</view>
</view>
</view>
</block>
</view>
</template>
<script>
export default {
name: "master-keyboard",
props: {
keyboardtype: {
type: String,
default: 'number' // number= digit= idcard= car=
},
defaultValue: {
type: String,
default: ''
},
newCar: {
type: Boolean,
default: false
},
randomNumber: {
type: Boolean,
default: false
}
},
data() {
return {
numberArr: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
carProvinceArr: ['京', '津', '渝', '沪', '冀', '晋', '辽', '吉', '黑', '苏', '浙', '皖', '闽', '赣', '鲁', '豫',
'鳄', '湘', '粤', '琼', '川', '贵', '云', '陕', '甘', '青', '蒙', '桂', '宁', '新', '藏', '使',
'领', '警', '学', '港', '澳'
],
carLatterArr: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R',
'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
],
carTabArr: ['省份', '字母'],
carType: 0,
show: false,
};
},
computed: {
sliceProvinceArr: function() {
return this.carProvinceArr.slice(0, 30)
},
sliceSecondProvinceArr: function() {
return this.carProvinceArr.slice(30, this.carProvinceArr.length)
},
sliceLatterArr: function() {
return this.carLatterArr.slice(0, 30)
},
sliceSecondLatterArr: function() {
return this.carLatterArr.slice(30, this.carLatterArr.length)
},
computeDeleteTop: function() {
return 80 * 3 + 10 * 3
},
computeItemSpace: function() {
return (1 - 0.095 * 10) / 11 * 100
},
computedDefaultValueLength: function() {
return this.$props.defaultValue.length
},
randomNumberArr: function() {
// if(this.$props.randomNumber){
// this.numberArr.sort(function() {
// return 0.5 - Math.random()
// })
// }
const size = this.numberArr.length
this.numberArr.splice(size - 1, 0, "-1")
this.numberArr.push("-2")
return this.numberArr
}
},
watch: {
show: function(value) {
}
},
onLoad() {},
methods: {
formatCarProvinceFirst(value) {
const list = ['使', '领', '警', '学', '港', '澳', ]
return list.indexOf(value)
},
formatCarProvinceSecond(value) {
const list = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']
return list.indexOf(value)
},
handleCloseKeyboard() {
this.open(false)
},
open(value) {
this.show = value
},
//tab
handleCarTabItemClick(index) {
this.carType = index
},
//
handleCarKerboardClick(e) {
const keyValue = e
let value = this.$props.defaultValue
if (/^[\u4e00-\u9fa5]*$/.test(value) && value.length >= 2) {
value = ''
}
var pattern = new RegExp("[\u4E00-\u9FA5]+");
var pattern2 = new RegExp("[A-Za-z]+");
var pattern3 = new RegExp("[0-9]+");
if (value.length == 0) {
if (!pattern.test(keyValue) || this.formatCarProvinceFirst(keyValue) !== -1) {
return
}
this.carType = 1
} else if (value.length == 1) {
if (!pattern2.test(keyValue)) {
return
}
} else {
if (value.length === (this.$props.newCar ? 7 : 6) && pattern.test(keyValue) && this
.formatCarProvinceFirst(keyValue) == -1) {
return
}
if (pattern.test(keyValue) && value.length !== (this.$props.newCar ? 7 : 6)) {
return
}
}
if (value.length < 7 && !this.$props.newCar) {
this.$emit('keyboardClick', {
value: value + keyValue
})
}
if (value.length < 8 && this.$props.newCar) {
this.$emit('keyboardClick', {
value: value + keyValue
})
}
},
//
handleCarKerboardDeleteClick() {
let deleteValue = this.$props.defaultValue
if (deleteValue == '' || (/^[\u4e00-\u9fa5]*$/.test(deleteValue) && deleteValue.length !== 1)) {
return
}
if (deleteValue.length > 0) {
let count = deleteValue.length
this.$emit('keyboardClick', {
value: deleteValue.substr(0, count - 1)
})
}
},
//
handleNumberKeyboardClick(e) {
const keyValue = e
if (this.$props.keyboardtype == 'number' || this.$props.keyboardtype == 'digit' || this.$props
.keyboardtype == 'idcard') {
switch (keyValue) {
case '-1':
if (this.$props.keyboardtype == 'number' || this.$props.defaultValue == '') {
return
}
let value = this.$props.defaultValue
if (/^[\u4e00-\u9fa5]*$/.test(value) || value.indexOf('.') > -1 || value.indexOf('X') > -1) {
return
}
if (this.$props.keyboardtype == 'idcard') {
if (value.length === 17) {
this.$emit('keyboardClick', {
value: value + 'X'
})
}
}
if (this.$props.keyboardtype == 'digit') {
this.$emit('keyboardClick', {
value: value + '.'
})
}
break
case '-2':
let deleteValue = this.$props.defaultValue
if (deleteValue == '' || /^[\u4e00-\u9fa5]*$/.test(deleteValue)) {
return
}
if (deleteValue.length > 0) {
let count = deleteValue.length
this.$emit('keyboardClick', {
value: deleteValue.substr(0, count - 1)
})
}
break
default:
let initValue = this.$props.defaultValue
if (/^[\u4e00-\u9fa5]*$/.test(initValue)) {
initValue = ''
}
if (this.$props.keyboardtype == 'idcard') {
if (initValue.length < 18) {
this.$emit('keyboardClick', {
value: initValue + keyValue
})
}
return
}
this.$emit('keyboardClick', {
value: initValue + keyValue
})
break
}
}
},
//
toPaste() {
this.$emit('toPaste')
}
}
}
</script>
<style scoped lang="scss">
@import './master-keyboard.scss';
</style>

46
hooks/user/userMixin.js

@ -147,50 +147,50 @@ export default function userMixin() {
}
// 粘贴
function setCode() {
function setCode(form) {
// 获取粘贴板内容
// 小程序平台
//#ifdef MP-WEIXIN
uni.getClipboardData({
success (res) {
smsCode.value = res.data;
}
success(res) {
form.smsCode = res.data;
},
});
//#endif
// 非小程序平台
//#ifndef MP-WEIXIN
getClipboardContents()
getClipboardContents(form)
//#endif
}
// 非小程序平台粘贴
async function getClipboardContents() {
async function getClipboardContents(form) {
try {
const text = await navigator.clipboard.readText();
smsCode.value = text;
form.smsCode = text;
} catch (err) {
console.error('Failed to read clipboard contents: ', err);
}
}
// 验证信息
function checkRules() {
if (!verifyPhone(phone.value)) {
uni.$ui.showToast('请输入正确的手机号');
return false;
}
if (!smsCode.value) {
uni.$ui.showToast('验证码无效');
return false;
}
// function checkRules() {
// if (!verifyPhone(phone.value)) {
// uni.$ui.showToast('请输入正确的手机号');
// return false;
// }
// if (!smsCode.value) {
// uni.$ui.showToast('验证码无效');
// return false;
// }
if (phone.value === user.value.phone) {
uni.$ui.showToast('新手机号不能与旧手机号相同');
return;
}
return true;
}
// if (phone.value === user.value.phone) {
// uni.$ui.showToast('新手机号不能与旧手机号相同');
// return;
// }
// return true;
// }
/**
* 验证手机号格式
@ -267,7 +267,7 @@ export default function userMixin() {
// interval,
dataObj,
hasvalue,
checkRules,
// checkRules,
setCode,
verifyLoginname,
handleWxLogin

66
pages/submitLog/submitLog - 副本.vue

@ -0,0 +1,66 @@
<template>
<theme class="min-h-full">
<view class="px-3 pt-1" v-if="listRef && listRef.length">
<view class="bg-white my-2 rounded-md p-3 text-gray-400" v-for="item in listRef">
<!-- 插件名称和提交时间显示 -->
<view class="flex justify-between mb-2">
<view class="text-gray-800">{{ deliverName }}</view>
<view class="text-xs">{{ dayjs(+item.submitTime).format('MM-DD HH:mm') }}</view>
</view>
<!-- 提交的链接 -->
<DeliverLink v-if="item.details[0]" :link="item.details[0]" />
<!-- 该插件物的审核人 -->
<view class="mb-1 mt-3">审核人</view>
<view class="flex justify-between mb-2" v-for="checkItem in item.checkerList">
<view>
<view class="mb-1 text-gray-800 font-semibold">
{{ checkItem.checkerName }}
</view>
<view class="mb-1 text-xs">
{{ checkItem.remark }}
</view>
<view class="mb-1 text-xs" v-if="+checkItem.checkTime > 0">
{{ dayjs(+checkItem.checkTime).format('MM-DD HH:mm') }}
</view>
</view>
<view class="text-center text-xs">
<view v-if="checkItem.status == null" class="text-gray-400">待审核</view>
<view v-else-if="checkItem.status === 1">
<view class="text-green-600 mb-1">已通过</view>
<zwp-ring-timing mode="chart" :value="checkItem.score" active-color="#F59E0B" :radius="30" :bar-width="4">
<text class="text-yellow-500 font-medium">{{ checkItem.score }}</text>
</zwp-ring-timing>
</view>
<view class="text-red-600" v-else>已驳回</view>
</view>
</view>
</view>
</view>
<u-empty text="暂无记录" mode="history" style="padding-top: 120rpx" v-else></u-empty>
</theme>
</template>
<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import dayjs from 'dayjs';
const listRef = ref([]);
const deliverName = ref('');
onLoad(options => {
// id
(async function getHistory() {
try {
const param = { deliverId: options.deliverId };
const data = await uni.$u.api.getDeliverHistory(param);
deliverName.value = data.deliverName;
listRef.value = data.deliverRecordList;
} catch (error) {
console.log('error: ', error);
uni.$ui.showToast('获取交付物历史失败');
}
})();
});
</script>

58
pages/user/login.vue

@ -8,17 +8,17 @@
<u-form :model="form" ref="phoneLoginForm" :error-type="['message']">
<u-form-item label="手机号码" prop="phone" label-width="160">
<u-input placeholder="请输入手机号" v-model="form.phone" type="number"></u-input>
<u-input placeholder="请输入手机号" v-model="form.phone" type="number" @click="handleShowKeyboard(1)"></u-input>
</u-form-item>
<u-form-item label="图形验证码" prop="verificationCodeValue" label-width="160">
<u-input placeholder="请输入计算结果" v-model="form.verificationCodeValue" type="number"></u-input>
<u-input placeholder="请输入计算结果" v-model="form.verificationCodeValue" type="number" @click="handleShowKeyboard(2)"></u-input>
<image slot="right" :src="renderData.imageBase64" mode="aspectFit" class="code-image" @click="getImageCode"></image>
</u-form-item>
<u-form-item label="验证码" prop="smsCode" label-width="160">
<u-input @focus="mixinInit.hasvalue(form, renderData)" placeholder="请输入验证码" v-model="form.smsCode" type="text"></u-input>
<!-- <u-button slot="right" type="primary" size="mini" v-show="mixinInit.dataObj.showPaste" @click="mixinInit.setCode" class="u-m-r-20">粘贴</u-button> -->
<u-input @focus="mixinInit.hasvalue(form, renderData)" placeholder="请输入验证码" v-model="form.smsCode" type="number" @click="handleShowKeyboard(3)"></u-input>
<u-button slot="right" type="primary" size="mini" v-show="mixinInit.dataObj.showPaste" @click="toPaste" class="u-m-r-20">粘贴</u-button>
<u-button slot="right" size="mini" v-if="mixinInit.dataObj.showInterval">{{ mixinInit.dataObj.interval }}</u-button>
</u-form-item>
@ -44,6 +44,8 @@
<image src="../../static/weixinIcon.png" mode="" style="width: 85rpx;height: 85rpx;"></image>
</view> -->
</view>
<master-keyboard ref="keyboard" keyboardtype="number" :randomNumber="true" :newCar="false" :defaultValue="title" @keyboardClick="handleClick" @toPaste="toPaste"></master-keyboard>
</template>
<script setup>
@ -56,6 +58,13 @@
const mixinInit = userMixin();
const phoneLoginForm = ref(null);
//
const keyboard = ref(null);
const currIndex = ref(null); //
const title = ref('');
const showKeyboard = ref(false);
const numberArr = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9','0']);
const form = reactive({
phone: '',
verificationCodeValue: '', //
@ -81,6 +90,21 @@
});
}
//
function toPaste() {
uni.getClipboardData({
success(res) {
if (currIndex.value === 1) {
form.phone = res.data;
} else if (currIndex.value === 2) {
form.verificationCodeValue = res.data;
} else if (currIndex.value === 3) {
form.smsCode = res.data;
}
},
});
}
/**
* 登录
*/
@ -141,6 +165,32 @@
url: url
})
}
//
function handleShowKeyboard(index) {
keyboard.value.open(true);
currIndex.value = index;
if (currIndex.value === 1) {
title.value = form.phone;
} else if (currIndex.value === 2) {
title.value = form.verificationCodeValue;
} else if (currIndex.value === 3) {
title.value = form.smsCode;
}
}
function handleClick(e) {
title.value = e.value;
if (currIndex.value === 1) {
form.phone = e.value;
} else if (currIndex.value === 2) {
form.verificationCodeValue = e.value;
} else if (currIndex.value === 3) {
form.smsCode = e.value;
}
}
</script>
<style lang="scss" scoped>

BIN
static/icon_delete.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 944 B

BIN
static/icon_down.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Loading…
Cancel
Save