更新记录

1.1.1（2023-10-13）

U 更新 优化弹出的按钮样式

1.1.0（2023-09-15）

U 更新 去除对cui-button组件的依赖

1.0.0（2023-09-13）

第一个版本

平台兼容性

获取手机号组件(平台、验证码两种获取方式)(弹窗、插槽两种接入方式)

先通过平台接口获取手机，如果不成功的话则自动转成使用验证码获取手机号
也可以直接指定[平台]或者[验证码]方式
提供弹窗、插槽模式(下文称包装器wrapper)两种接入方式，满足各种需求

API接口配置

接口统一写在组件根目录的config.js中，更新时只要不覆盖这个文件即可
其中注释掉的部分是请求后台服务API的示例代码

/**
 * 向后台发送请求，对微信返回的信息进行解密，得到手机号
 * mode选择 [mix,platform]的时候，需要配置这个函数
 */
export function encryptedData(encryptedData, iv) {
    // DailyRemoteResAPI.encryptedData(e.detail.encryptedData, e.detail.iv).then(res => {
    //  console.log('解析完成：', res);
    //  return Promise.resolve({
    //  phoneNumber: res.data.phoneNumber
    //})
    // });
    return Promise.resolve({
        phoneNumber: "12345678910"
    })
}
/**
 * 向后台发送请求，发送短信验证码
 * mode选择 [mix,sms]的时候，需要配置这个函数
 * @param {Object} phoneNumber 手机号
 */
export function sendPhoneCheckSms(phoneNumber) {
    // return DailyRemoteResAPI.sendPhoneCheckSms(phoneNumber).then(res => {
    //  return Promise.resolve({
    //      wait: 60 // 等待时长
    //  })
    // });
    return Promise.resolve({
        wait: 60 // 等待时长
    })
}

/**
 * 向后台发送请求，验证手机号和短信验证码是否匹配有效
 * result选择 [phone] 的时候才需要配置这个函数
 * @param {Object} phoneNumber 手机号
 * @param {Object} code 验证码
 */
export function sendCheckValid(phoneNumber, code) {
    // return DailyRemoteResAPI.sendPhoneCheckSms(phoneNumber, code).then(res => {
    //  return Promise.resolve({
    //      phone: "12345678910", // 手机号
    //      valid: true     
    //  })
    // });
    return Promise.resolve({
        phone: phoneNumber, // 手机号
        valid: true
    })
}

1. Dialog 组件 （弹窗）

基本用法

<view>
    <cui-phonenumber-dialog ref="phonenumberdialog" paddingBottom="92rpx" mode="mix" result="phone" ></cui-phonenumber-dialog>
</view>

export default {
    data() {
        return {
        }
    },
    tapOpenPhoneNumberDialog() {
        this.$refs["phonenumberdialog"].show({
            desc: "用于验证身份唯一"
        }).then(res => {
            console.log("结果！！！", res);
        }, err => {
            console.log("取消")
        });

    }
}

Props

2. Wrapper 组件 （直接给页面表单的输入框进行包装）

基本用法

<view>
    <cui-phonenumber-wrapper ref="cui-phonenumber-wrapper" mode="mix" v-model="formData.phone" :old="oldPhone"
        @onGetEncryptedData="e=>{formData.phone_data = e.encryptedData;formData.phone_iv = e.iv; formData.pccode = null;}">
        <template v-slot:platform>
            <!-- 微信授权手机号，只需处理显示部分 -->
            <view class="section-line">
                <view class="section-line-title">手机</view>
                <view class="section-line-inputText">
                    {{formData.phone||oldPhone||""}}
                </view>
            </view>
        </template>
        <template v-slot:sms>
            <!-- 短信验证码获取手机号，手机号输入框 -->
            <view class="section-line">
                <view class="section-line-title">手机</view>
                <input class="section-line-inputText" name="phone" placeholder="请输入手机号" type="number"
                    :value="formData.phone" @input="e=>formData.phone = e.detail.value">
            </view>
        </template>
        <template v-slot:code>
            <!-- 短信验证码获取手机号，验证码输入框 -->
            <view class="section-line">
                <view class="section-line-title">验证码</view>
                <input class="section-line-inputText" name="pccode" type="number" placeholder="请输入验证码"
                    @input="e=>{formData.code=e.detail.value;formData.phone_data = null;formData.phone_iv = null;}">
            </view>
        </template>
    </cui-phonenumber-wrapper>
</view>

import * as config from "@root/uni_modules/cui-phonenumber-dialog/config.js"

export default {
    data() {
        return {
            oldPhone: "15915913300",
            formData: {
                phone_data: null,
                phone_iv: null,
                phone: null,
                code: null
            },
        }
    },
    tapSubmit() {
        let curMode = this.$refs["cui-phonenumber-wrapper"].getCurMode();
        let infoData = {};
        if (curMode == "sms") {
            if (!config.checkPhoneValid(this.formData.phone)) {
                config.toast('请输入有效手机号')
                return;
            }
            if (this.formData.phone != this.oldPhone) {
                if (!config.checkCodeValid(this.formData.code)) {
                    config.toast('请输入有效验证码')
                    return;
                }
            }
            infoData.phone = this.formData.phone;
            infoData.pccode = this.formData.code;

        } else if (curMode == "platform") {
            if (!this.formData.phone_data || !this.formData.phone_iv) {
                config.toast('请授权获取手机号')
                return;
            }
            infoData.phone_data = this.formData.phone_data;
            infoData.phone_iv = this.formData.phone_iv;
        }

        console.log('准备提交', infoData);

    }
}

Props

API

常见问题

• 无

示例小程序

注意因为没有微信认证和购买短信包，所以示例程序只是展示界面，没有真的获取手机号