ZhHealth/pages/wallet/create.vue

<template>
    <view>
        <!-- 设置钱包密码 -->
        <view class="password">
            <view class="prompt">请设置6位数字密码，建议不要使用连续的数字</view>
            <view class="group">
                <view class="inputs" @click="onShowKet('password')">
                    <block v-if="password.length > 0">
                        <text v-for="item in password.length" :key="item">•</text>
                    </block>
                    <block v-if="keyShow && valKye === 'password'">
                        <text class="flicker-animation">|</text>
                    </block>
                    <block v-else>
                        <text v-if="password.length === 0" class="placeholder">请设置密码</text>
                    </block>
                </view>
                <view class="inputs" :class="{'hide': verify === ''}" @click="onShowKet('verify')">
                    <block v-if="verify.length > 0">
                        <text v-for="item in verify.length" :key="item">•</text>
                    </block>
                    <block v-if="keyShow && valKye === 'verify'">
                        <text class="flicker-animation">|</text>
                    </block>
                    <block v-else>
                        <text v-if="verify.length === 0" class="placeholder">请确认密码</text>
                    </block>
                </view>
            </view>
        </view>
        <!-- key键盘 -->
        <u-keyboard mode="number" random dotDisabled :overlay="false" :show="keyShow" :showCancel="false"
            @change="keyValChange" @backspace="keyValBackspace" @confirm="keyShow = false"></u-keyboard>
        <!-- 按钮 -->
        <view class="buttons">
            <button type="default" form-type="submit" @click="createWallet">确认激活</button>
        </view>
    </view>
</template>

<script>
    import {
        security
    } from '@/apis/interfaces/wallet';
    export default {
        data() {
            return {
                password: '',
                verify: '',
                valKye: '',
                keyShow: false
            };
        },
        methods: {
            // 唤起key
            onShowKet(key) {
                this.valKye = key
                this.keyShow = true
            },
            // 键盘输入
            keyValChange(e) {
                if (this[this.valKye].length >= 6) return
                this[this.valKye] += e
            },
            // 键盘删除
            keyValBackspace(e) {
                if (this[this.valKye].length) this[this.valKye] = this[this.valKye].substr(0, this[this.valKye].length -
                    1)
            },
            // 激活钱包
            createWallet() {
                if (this.password === '' || this.verify === '') {
                    uni.showToast({
                        icon: 'none',
                        title: '请设置密码'
                    });
                    return;
                }
                if (this.password !== this.verify) {
                    uni.showToast({
                        icon: 'none',
                        title: '两次输入密码不一致'
                    });
                    return;
                }

                security({
                    code: Number(this.password)
                }).then(res => {
                    this.$Router.replace({
                        name: 'WalletProperty'
                    })
                }).catch(err => {
                    uni.showToast({
                        icon: 'none',
                        title: err.message
                    });
                });
            }
        }
    };
</script>

<style>
    .flicker-animation {
        animation: flicker .8s infinite;
    }

    @keyframes flicker {
        0% {
            opacity: 0;
        }

        100 {
            opacity: 1;
        }
    }
</style>

<style lang="scss" scoped>
    // 副标题
    .sub-title {
        color: $text-gray;
        text-align: center;
        margin: $margin * 2 $margin;
        font-size: $title-size-m;
    }

    // 设置密码
    .password {
        padding: 0 $padding * 2;

        .prompt {
            margin-top: $margin * 2;
            font-size: $title-size-m;
            color: $main-color;
            text-align: center;
        }

        .group {
            padding-top: $padding;

            .inputs {
                padding: 10rpx $padding + 10;
                margin-top: $margin;
                border-radius: $radius-m;
                background-color: $window-color;
                height: 70rpx;
                line-height: 70rpx;
                font-size: $title-size-lg;
                text-align: center;

                text {
                    padding: 0 10rpx;
                    text-align: center;
                }

                .placeholder {
                    color: $text-gray;
                }
            }
        }
    }

    // 按钮
    .buttons {
        padding: $padding * 2;

        .text {
            text-align: center;
            line-height: 90rpx;
            height: 90rpx;
            margin-bottom: $margin * 2;
            font-size: $title-size-lg;
            color: $main-color;
            font-weight: bold;
        }

        button {
            height: 90rpx;
            line-height: 90rpx;
            background-color: $main-color;
            border-radius: $radius-m;
            color: white;
            font-weight: bold;
            font-size: $title-size;

            &::after {
                display: none;
            }
        }
    }
</style>