完成发现，个人中心
This commit is contained in:
cbb
2
uni_modules/uu-pwdModal/changelog.md
Normal file
2
uni_modules/uu-pwdModal/changelog.md
Normal file
@@ -0,0 +1,2 @@
|
||||
## 1.0.0（2024-12-01）
|
||||
无，请自行翻阅代码查看记录，易上手
|
||||
181
uni_modules/uu-pwdModal/components/uu-pwdModal/uu-pwdModal.vue
Normal file
181
uni_modules/uu-pwdModal/components/uu-pwdModal/uu-pwdModal.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-popup ref="popup" type="bottom">
|
||||
<view class="modal">
|
||||
<view class="title">
|
||||
请输入支付密码
|
||||
<view class="close" @click="close">
|
||||
<uni-icons type="closeempty" size="20"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="input">
|
||||
<view
|
||||
class="row"
|
||||
v-for="i in 6"
|
||||
:class="current == i ? 'active' : ''"
|
||||
>
|
||||
<view class="pwd" v-if="current > i"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tip" @click="forgetPwd">忘记密码？</view>
|
||||
|
||||
<view class="keyboard">
|
||||
<view
|
||||
class="row"
|
||||
v-for="i in key"
|
||||
:key="i"
|
||||
:class="{ 'no-i': i === -2 }"
|
||||
@click="i !== -2 && input(i)"
|
||||
>
|
||||
<uni-icons
|
||||
v-if="i == -1"
|
||||
type="closeempty"
|
||||
size="24"
|
||||
></uni-icons>
|
||||
<text v-if="i != -1">
|
||||
{{ i >= 0 ? i : '' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view></view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 1,
|
||||
key: [1, 2, 3, 4, 5, 6, 7, 8, 9, -2, 0, -1],
|
||||
value: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
forgetPwd() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/myInfo/changePayPwd'
|
||||
})
|
||||
},
|
||||
open() {
|
||||
this.$refs.popup.open()
|
||||
this.value = []
|
||||
this.current = 1
|
||||
},
|
||||
close() {
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
input(n) {
|
||||
if (this.value.length < 6 && n >= 0) {
|
||||
this.current++
|
||||
this.value.push(n)
|
||||
if (this.value.length == 6) {
|
||||
const v = [...this.value]
|
||||
this.value = []
|
||||
console.log(this.value)
|
||||
this.$emit('success', v)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (n == -1 && this.current > 1) {
|
||||
this.current--
|
||||
this.value.pop()
|
||||
return
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.$refs.popup.open()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.modal {
|
||||
width: 750rpx;
|
||||
background-color: white;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
margin-bottom: 50px;
|
||||
width: 100%;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-column-gap: 20rpx;
|
||||
|
||||
.row {
|
||||
background: #f7f7f7;
|
||||
border-radius: 5px;
|
||||
height: 90rpx;
|
||||
border: 1px solid #efefef;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.pwd {
|
||||
background-color: black;
|
||||
width: 30rpx;
|
||||
border-radius: 50%;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 1px solid #2667ff;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
text-align: center;
|
||||
color: #2667ff;
|
||||
font-size: 15px;
|
||||
margin-top: 80rpx;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.keyboard {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(4, 1fr);
|
||||
grid-gap: 20rpx;
|
||||
color: #545454;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
border-radius: 10rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
height: 100rpx;
|
||||
background: #f4f4f4;
|
||||
|
||||
&:hover {
|
||||
background: #e1e1e1;
|
||||
}
|
||||
}
|
||||
|
||||
.no-i {
|
||||
background: #ffffff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
83
uni_modules/uu-pwdModal/package.json
Normal file
83
uni_modules/uu-pwdModal/package.json
Normal file
@@ -0,0 +1,83 @@
|
||||
{
|
||||
"id": "uu-pwdModal",
|
||||
"displayName": "uu-pwdModal",
|
||||
"version": "1.0.0",
|
||||
"description": "支付密码弹窗",
|
||||
"keywords": [
|
||||
"支付,弹窗,密码"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据，一个支付密码的弹窗，内置忘记密码跳转功能，忘记密码页面需要自行修改",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "u",
|
||||
"app-uvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "u",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "u",
|
||||
"QQ浏览器(Android)": "u"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "u",
|
||||
"Edge": "y",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "u",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1
uni_modules/uu-pwdModal/readme.md
Normal file
1
uni_modules/uu-pwdModal/readme.md
Normal file
@@ -0,0 +1 @@
|
||||
# uu-pwdModal
|
||||
Reference in New Issue
Block a user