308 lines
6.0 KiB
Vue
308 lines
6.0 KiB
Vue
<template>
|
|
<view class="mark" :class="[show_key ? '' : 'hidden']">
|
|
<view class="kong"></view>
|
|
<!-- 信息框 -->
|
|
<view class="msg">
|
|
<!-- 关闭按钮 -->
|
|
<view class="img iconfont icon-guanbi" @tap="closeFuc">
|
|
</view>
|
|
<view class="title">
|
|
请输入支付密码
|
|
</view>
|
|
<view class="subTitle" v-show="show_subTitle">
|
|
付款{{price}}
|
|
</view>
|
|
<view class="pswBox">
|
|
<view v-for="(item,index) in 6" :key="index" class="content_item">{{password[index] ? '●' : ''}}</view>
|
|
</view>
|
|
<view class="forget" @tap="forgetFuc">找回密码</view>
|
|
</view>
|
|
<!-- 数字键盘 -->
|
|
<view class="numeric">
|
|
<!-- 正常模式 -->
|
|
<view class="num" v-if="mix" v-for="(item,index) in num1" :key="index" :class="item == 10 ? 'amend1' : item == 12 ? 'amend3 haiyuefont haiyue-guanbi2' : ''" @tap="press({num:item})">
|
|
{{item == 10 ? '' : item == 11 ? '0' : item == 12 ? '': item}}
|
|
</view>
|
|
<!-- 混淆模式 -->
|
|
<view class="num" v-else v-for="(item,index) in num" :key="index" :class="item == 10 ? 'amend1' : item == 12 ? 'amend3 haiyuefont haiyue-guanbi2' : ''" @tap="press({num:item})">
|
|
{{item == 10 ? '' : item == 11 ? '0' : item == 12 ? '': item}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props:{
|
|
show_key:{
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
price:String,
|
|
show_subTitle:{
|
|
default:true
|
|
},
|
|
mix:{
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
num:[], // 乱序
|
|
num1:[1,2,3,4,5,6,7,8,9,10,11,12],// 顺序
|
|
password:"",
|
|
}
|
|
},
|
|
created() {
|
|
// 打乱数组
|
|
this.num = this.randomArray([1,2,3,4,5,6,7,8,9,11]);
|
|
this.num.splice(9, 0, 10);
|
|
this.num.splice(11, 0, 12);
|
|
console.log(this.num);
|
|
console.log(this.key_words);
|
|
},
|
|
methods:{
|
|
// 数组混淆
|
|
randomArray(arr){
|
|
return arr.sort(() => Math.random() -0.5);
|
|
},
|
|
press (obj) {
|
|
console.log(obj);
|
|
let num = obj.num
|
|
if (obj.num == 10) {
|
|
console.log('我是10我什么都不干')
|
|
} else if (obj.num == 12) {
|
|
this.password = this.password.slice(0,this.password.length-1);
|
|
} else if (obj.num == 11) {
|
|
num = '0'
|
|
this.password += num;
|
|
} else {
|
|
this.password += num;
|
|
}
|
|
if (this.password.length == 6) {
|
|
this.$emit('pay',{password:this.password})
|
|
this.password = "";
|
|
// uni.showModal({
|
|
// title:'密码',
|
|
// content:this.password,
|
|
// success: () => {
|
|
// this.password = "";
|
|
// }
|
|
// })
|
|
}
|
|
},
|
|
// 关闭支付页面
|
|
closeFuc () {
|
|
this.$emit("closeFuc",false)
|
|
},
|
|
// 找回密码
|
|
forgetFuc () {
|
|
uni.navigateTo({
|
|
url:'/pages/users/user_pay_pwd/index'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.mark{
|
|
width: 750rpx;
|
|
background: rgba(0,0,0,0.7);
|
|
padding: 0 0 700rpx 0;
|
|
position: fixed;
|
|
top: 0rpx;
|
|
left: 0rpx;
|
|
z-index: 99;
|
|
}
|
|
.hidden{
|
|
display: none;
|
|
}
|
|
.kong{
|
|
width: 750rpx;
|
|
height: 250rpx;
|
|
}
|
|
.msg{
|
|
width: 550rpx;
|
|
height: 450rpx;
|
|
background: rgba(255,255,255,1);
|
|
border-radius: 20rpx;
|
|
margin: 0 auto;
|
|
animation: msgBox .2s linear;
|
|
}
|
|
@keyframes msgBox{
|
|
0%{
|
|
transform:translateY(50%);
|
|
opacity: 0;
|
|
}
|
|
50%{
|
|
transform:translateY(25%);
|
|
opacity: 0.5;
|
|
}
|
|
100%{
|
|
transform:translateY(0%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes numBox{
|
|
0%{
|
|
transform:translateY(50%);
|
|
opacity: 0;
|
|
}
|
|
50%{
|
|
transform:translateY(25%);
|
|
opacity: 0.5;
|
|
}
|
|
100%{
|
|
transform:translateY(0%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.msg>.img{
|
|
padding: 20rpx 0 0 20rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
.msg>.title{
|
|
width: 100%;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
text-align: center;
|
|
}
|
|
.msg>.subTitle{
|
|
width: 100%;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
text-align: center;
|
|
}
|
|
.pswBox{
|
|
width: 80%;
|
|
height: 80rpx;
|
|
margin: 50rpx auto 0;
|
|
display: flex;
|
|
}
|
|
.content_item{
|
|
flex: 2;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
border: 1rpx solid #D6D6D6;
|
|
border-right: 0rpx solid;
|
|
}
|
|
.content_item:nth-child(1){
|
|
border-radius: 10rpx 0 0 10rpx;
|
|
}
|
|
.content_item:nth-child(6){
|
|
border-right: 1rpx solid #D6D6D6;
|
|
border-radius: 0 10rpx 10rpx 0;
|
|
}
|
|
/* .numeric{
|
|
width: 750rpx;
|
|
height: 470rpx;
|
|
border: 1rpx solid;
|
|
display: flex;
|
|
position: fixed;
|
|
z-index: 98;
|
|
bottom: 0rpx;
|
|
background-color: #CCCFD6;
|
|
animation: msgBox .2s linear;
|
|
}
|
|
.num{
|
|
width: 225rpx;
|
|
height: 90rpx;
|
|
font-size: 42rpx;
|
|
font-weight: 500;
|
|
line-height: 90rpx;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
margin: 12rpx 12rpx 0 12rpx;
|
|
display: inline-block;
|
|
border: 1rpx solid #999999;
|
|
border-radius: 10rpx;
|
|
background-color: #FFFFFF;
|
|
position: relative;
|
|
z-index: 99;
|
|
} */
|
|
.numeric{
|
|
height: 480rpx;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background: #EBEBEB;
|
|
display: flex;
|
|
justify-content: center;
|
|
z-index: 2;
|
|
flex-wrap: wrap;
|
|
animation: msgBox .2s linear;
|
|
}
|
|
.num{
|
|
box-sizing: border-box;
|
|
width: 250rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #fff;
|
|
font-size: 40rpx;
|
|
color: #333;
|
|
height: 120rpx;
|
|
border: 1rpx solid #F2F2F2;
|
|
border-top:none;
|
|
border-left:none;
|
|
}
|
|
.numColor{
|
|
background: #FF0000;
|
|
}
|
|
.forget{
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #3D84EA;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
}
|
|
.amend1{
|
|
border: 1rpx solid #CCCFD6;
|
|
background-color: #CCCFD6;
|
|
}
|
|
.amend3{
|
|
font-size: 40rpx;
|
|
border: 1rpx solid #CCCFD6;
|
|
background-color: #CCCFD6;
|
|
}
|
|
/* .amend11{
|
|
position: absolute;
|
|
top: 313rpx;
|
|
left: 0rpx;
|
|
background-color: #CCCFD6;
|
|
border: 1rpx solid #FF0000;
|
|
}
|
|
.amend1{
|
|
height: 100rpx !important;
|
|
position: absolute;
|
|
top: 306rpx;
|
|
left: 0rpx;
|
|
z-index: 99;
|
|
background-color: #CCCFD6;
|
|
border: 2rpx solid #CCCFD6;
|
|
}
|
|
.amend2{
|
|
position: absolute;
|
|
top: 306rpx;
|
|
left: 250rpx;
|
|
z-index: 99;
|
|
}
|
|
.amend3{
|
|
position: absolute;
|
|
top: 306rpx;
|
|
left: 500rpx;
|
|
z-index: 99;
|
|
font-size: 60rpx;
|
|
border: 0rpx;
|
|
background-color: #CCCFD6;
|
|
} */
|
|
|
|
</style> |