uniapp 支付前增加支付密码

去支付前先检查用户是否填写过手机号

• 如果未填写提示用户去填写
• 如果已填写提示用户输入

payment-password-popup

<template>
    <view>
        <view class="common-popup">
            <uni-popup ref="notice" :mask-click="false">
                <view class="common-popup-content flex-column-center">
                    <view class="common-popup-top">
                        提示
                    </view>
                    <view class="desc">
                        为了您的资金安全请设置支付密码
                    </view>
                    <view class="btns">
                        <button class="btn" type="primary" @click="gotoPage">
                            设置支付密码
                        </button>
                    </view>
                </view>
                <image class="common-popup-close" :src="关闭图片"
                    @click="$refs.notice.close()"></image>
            </uni-popup>
        </view>
        <view class="common-popup">
            <uni-popup ref="password" :mask-click="false">
                <view class="common-popup-content password-popup">
                    <view class="common-popup-top">
                        请输入支付密码
                    </view>
                    <image class="common-popup-close" :src="关闭图片"
                        @click="$refs.password.close()"></image>
                    <view class="money" v-if="!isfree">
                        ￥{{money}}
                    </view>
                    <view class="money" v-else>
                        ￥{{0}}
                    </view>
                    <verification-code-style2 ref="verificationCodeStyle2" :ciphertextSty="2" latticeBg='#E0EBCD'
                        :latticeSize="75" @inputVerificationChange="inputVerificationChange"></verification-code-style2>
                    <view class="fail" v-if="isFail">请输入正确的支付密码</view>
                </view>
            </uni-popup>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['money', 'path','isfree'],
        data() {
            return {
                isFail: false
            }
        },
        methods: {
            init() {
                this.isFail = false
                this.getInfo()
            },
            getInfo() {
                this.$api.sendRequest({
                    url: 'xxx',
                    data: {},
                    success: res => {
                        if (200 === res.code) {
                            if (res.data.pay_password) this.$refs.password.open()  // 如果有密码打开输入密码弹窗
                            else this.$refs.notice.open()  // 如果没有密码提示前往设置密码
                        }
                    }
                });
            },
            inputVerificationChange(val) {
                if (6 === val.length) {
                    // 校验密码
                    this.$api.sendRequest({
                        url: 'xxx',
                        data: {
                            pay_password: val
                        },
                        success: res => {
                            if (200 === res.code) {
                                this.isFail = false
                                this.$refs.password.close()
                                this.$emit('submit')
                            } else {
                                this.isFail = true
                                this.$refs.verificationCodeStyle2.cleanVal()
                                uni.$showMsg(res.msg)
                            }
                        }
                    });
                }
            },
            gotoPage() {
                this.$refs.notice.close()
                // 前往设置密码
                uni.redirectTo({
                    url:'xxx?path'+this.path
                });
            }
        }
    }
</script>

<style lang="scss">
    // 公共弹窗样式
    .common-popup{
        ::v-deep .uni-popup__wrapper-box {
            background: #fff !important;
        }
        position: relative;

        &-close {
            width: 37rpx;
            height: 37rpx;
            position: absolute;
            top: 25rpx;
            right: 30rpx;
        }

        &-top{
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            color: #fff;
            font-size: 32rpx;
            font-weight: bold;
            text-align: center;
            background-color:#047758;
            border-radius: 25rpx 25rpx 0 0;
        }

        &-content {
            padding-bottom: 40rpx;

            .desc {
                margin: 50rpx;
                text-align: center;
            }

            .btns {
                width: 70%;
            }

            @mixin btn {
                color: #fff;
                height: 70rpx;
                line-height: 70rpx;
                border-radius: 35rpx;
            }

            .btn {
                @include btn;
            }

            .btn1 {
                @include btn;
                width: 45%;
                background-color: #909090;
            }

            .btn2 {
                @include btn;
                width: 45%;
                background-color:#8DB95F;
            }
        }
    }
 
    .flex-column-center {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }   
    
    .password-popup {
        .money {
            font-size: 46rpx;
            text-align: center;
            margin: 30rpx 0;
        }

        .fail {
            text-align: center;
            color: #750D0D;
            font-size: 22rpx;
            margin-top: 15rpx;
        }
    }
</style>

verification-code-style2

<template>
    <view class="acqui_verification_code">
        <view class="verification_code_continor">
            <view v-for="(item, index) in latticeNum" :key="index" class="verification_code_item"
                :style="latticeSty(index)" @tap="latticeFoc(index)">
                <template v-if="inputValues[index]">
                    <view v-if="ciphertextSty == 1" class="point"></view>
                    <template v-else>
                        {{ ciphertextSty == 2 ? '*' : inputValues[index] }}
                    </template>
                </template>
            </view>
        </view>
        <div class="input_info"><input class="input" :type="inputType" v-model="inputValues" focus
                :maxlength="latticeNum" @input="inputVal" @blur="blur" @focus="focus" /></div>
    </view>
</template>

<script>
    export default {
        props: {
            // 输入框框框的个数
            latticeNum: {
                type: Number,
                default: 6
            },
            // 输入框框框大小
            latticeSize: {
                type: Number,
                default: 96
            },
            latticeBg: {
                type: String,
                default: '#8E8170'
            },
            // 选中的样式
            borderCheckStyle: {
                type: String,
                default: 'border: 1px solid #8DB95F !important;background:#E0EBCD'
            },
            // input类型
            inputType: {
                type: String,
                default: 'number'
            },
            // 失去焦点后是否继续显示，当前所对焦的输入框（样式）
            blurShow: {
                type: Boolean,
                default: false
            },
            // 密文样式  1 圆点样式    2 星号 *  样式   默认为0   无密文
            ciphertextSty: {
                type: Number,
                default: 0
            },
            // 是否允许修改/填写某一个框框的值
            updateOne: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                inputValues: '', //输入的值
                blurShowLocal: true
            };
        },
        mounted() {
            this.blurShowLocal = this.blurShow;
        },
        methods: {
            latticeSty(index) {
                let str = this.blurShowLocal && (this.inputValues.length == index || (this.inputValues.length == this
                        .latticeNum && index == this.latticeNum - 1)) ? this.borderCheckStyle :
                    `background:${this.latticeBg};border:1px solid ${this.latticeBg}`
                str += `;width:${this.latticeSize}rpx;height:${this.latticeSize}rpx;`
                return str
            },
            // 获取输入框的值
            getValue() {
                return this.inputValues
            },
            /**
             * 输入框值改变
             */
            inputVal(e) {
                if (this.inputValues.length > this.latticeNum) this.inputValues = this.inputValues.slice(0, this
                    .latticeNum)
                else this.$emit('inputVerificationChange', this.inputValues);
            },
            // 设置验证码的值
            /**
             * verificationCodeValue
             */
            setVerificationCode(verificationCodeValue) {
                if (!verificationCodeValue) return
                this.inputValues = verificationCodeValue;
            },
            /**
             * 清空验证码的值
             */
            cleanVal() {
                this.inputValues = '';
            },
            latticeFoc(index) {},
            blur() {
                !this.blurShow ? (this.blurShowLocal = false) : '';
            },
            focus() {
                !this.blurShow ? (this.blurShowLocal = true) : '';
            }
        }
    };
</script>

<style lang="less">
    .acqui_verification_code {
        position: relative;

        .verification_code_continor {
            display: flex;
            justify-content: center;
            text-align: center;

            .verification_code_item {
                width: 60rpx;
                height: 60rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 16rpx;
                font-size: 50rpx;
            }

            .verification_code_item:not(:first-child) {
                margin-left: 20rpx;
            }

            .point {
                width: 10rpx;
                height: 10rpx;
                background-color: black;
                border-radius: 200px;
            }
        }

        .input_info {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 8;
            display: flex;
            justify-content: center;
            opacity: 0;

            .input {
                width: 100%;
                height: 100%;
            }
        }
    }
</style>

支付密码插件：ext.dcloud.net.cn/plugin?id=3…

使用：

<payment-password-popup ref="payment" :path="selectPath" money="190" @submit="pay"></payment-password-popup>

this.$refs.payment.init()