|
|
@@ -1,3 +1,4 @@
|
|
|
+<<<<<<< HEAD
|
|
|
<template>
|
|
|
<view class="page">
|
|
|
<view>
|
|
|
@@ -121,4 +122,128 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+=======
|
|
|
+<template>
|
|
|
+ <view class="page">
|
|
|
+ <view>
|
|
|
+ <view class="pay-title">
|
|
|
+ <text>{{$t('enter.b3')}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="pay-password">
|
|
|
+ <view class="list" v-for="item in 6">
|
|
|
+ <text v-show="passwordArr.length >= item">●</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <navigator url="/pages/user/set/transaction">
|
|
|
+ <view class="hint">
|
|
|
+ <text>忘记支付密码？</text>
|
|
|
+ </view>
|
|
|
+ </navigator>
|
|
|
+ </view>
|
|
|
+ <cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo" :viewShow="true"></cc-defineKeyboard>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ passwordArr: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$refs.CodeKeyboard.show();
|
|
|
+ },
|
|
|
+ // 关闭循环
|
|
|
+ methods: {
|
|
|
+ // 点击触发支付事件
|
|
|
+ KeyInfo(val) {
|
|
|
+ console.log(val);
|
|
|
+ let arr = this.passwordArr;
|
|
|
+ if (val.index >= 6) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 判断是否输入的是删除键
|
|
|
+ if (val.keyCode === 8) {
|
|
|
+ // 删除最后一位
|
|
|
+ arr.splice(val.index + 1, 1)
|
|
|
+ }
|
|
|
+ // 判断是否输入的是取消案件
|
|
|
+ else if (val.keyCode == 190) {
|
|
|
+ this.$emit('colse')
|
|
|
+ } else {
|
|
|
+ arr.push(val.key);
|
|
|
+ }
|
|
|
+ // 开始交易
|
|
|
+ if (arr.length == 6) {
|
|
|
+ this.$emit('commit',this.passwordArr.join(''))
|
|
|
+ //初始化对象
|
|
|
+ this.passwordArr = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ $base: orangered; // 基础颜色
|
|
|
+
|
|
|
+ .page {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+
|
|
|
+ .pay-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 200rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #555555;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pay-password {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 90%;
|
|
|
+ height: 80rpx;
|
|
|
+ margin: 20rpx auto;
|
|
|
+ border: 2rpx solid $base;
|
|
|
+
|
|
|
+ .list {
|
|
|
+ color: #555555;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 16.666%;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2rpx solid #EEEEEE;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list:nth-child(6) {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .hint {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: $base;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+>>>>>>> cd56a2501e4a2e019ed53530932cbf49bad77dd5
|
|
|
</style>
|
