|
|
@@ -1,124 +1,124 @@
|
|
|
-<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.colsePayPassword();
|
|
|
- // 输入.无效
|
|
|
- } 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+<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>{{$t('login.b8')}}</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.colsePayPassword();
|
|
|
+ // 输入.无效
|
|
|
+ } 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
