shangfutong-ui/jeepay-ui-uapp-cashier/pageMember/memberInfo/components/BindPhone.vue

<template>
    <uni-popup ref="popup" type="bottom" :safe-area="false">
        <view class="sms-wrapper" :style="{ '--v-primary': calcThemeColor() }">
            <view class="s-title">绑定手机号</view>
            <view class="phone-input">
                <image src="/static/vipImg/phone.svg"></image>
                <input type="number" maxlength="11" style="background: transparent;" v-model="vdata.phoneNumber"
                    placeholder="请输入手机号">
            </view>
            <view class="code-wrapper">
                <view class="code-input">
                    <image src="/static/vipImg/secure-icon.svg"></image>
                    <input type="number" maxlength="6" style="background: transparent;" v-model="vdata.code"
                        placeholder="请输入验证码">
                </view>
                <view class="send-sms" hover-class="hover-but" hover-stay-time="200" @tap="sendSMS"
                    v-if="vdata.timeNumber <= 0">
                    发送短信
                </view>
                <view class="send-sms" style="color: #ff624fff;font-size: 26rpx;" v-else>{{ vdata.timeNumber }}S后可重新发送
                </view>
            </view>
            <view class="confirm-but" hover-class="hover-but" hover-stay-time="200" @tap="confirm">确认绑定</view>
        </view>
    </uni-popup>
</template>

<script setup>
import { ref, reactive } from "vue"
import { $apiMembers } from "@/http/apiMember"
// import { Base64 } from 'js-base64'
import storageManage from '@/util/storageManage.js'
import appConfig from "@/config/appConfig"
import { calcThemeColor } from "@/util/member.js"
const emits = defineEmits('success')
const vdata = reactive({
    timeNumber: 0
})
const popup = ref(null)
const open = () => popup.value.open()
const close = () => popup.value.close()
const sendSMS = () => {
    uni.showLoading({
        title: '请稍等',
        mask: true
    })
    validate().then(res => {
        $apiMembers({
            method: 'mbr.tel.send.sms.code',
            mbrTel: Base64.encode(vdata.phoneNumber)
        }).then(res => {
            tips('验证码发送成功')
            countDown()
            uni.hideLoading()
        })
    })
}
const confirm = () => {
    validate(true).then(res => {
        $apiMembers({
            method: 'mbr.tel.bind',
            mbrTel: Base64.encode(vdata.phoneNumber),
            code: Base64.encode(vdata.code),
            channelUesrId: Base64.encode(appConfig.channelUserId)
        }).then(({
            bizData
        }) => {
            storageManage.iToken(bizData)
            emits('success', bizData)
            uni.$emit('updateMemberInfos')
            tips('绑定成功')
            close()
        })
    })
}

function validate (code) {
    return new Promise((res, rej) => {
        if (!vdata.phoneNumber) return rej(tips('请输入手机号'))
        if (vdata.phoneNumber.length < 11) return rej(tips('手机号格式不正确'))
        if (code) {
            if (!vdata.code) return rej(tips('请输入验证码'))
            if (vdata.code.length < 6) return rej(tips('验证码格式不正确'))
        }
        res()
    })
}

function tips (text) {
    uni.showToast({ title: text, icon: 'none', mask: true })
}

function countDown () {
    vdata.timeNumber = 60
    let inter = setInterval(() => {
        vdata.timeNumber--
        if (vdata.timeNumber <= 0) {
            clearInterval(inter)
        }
    }, 1000)
}

defineExpose({
    open,
    close
})
</script>

<style lang="scss" scoped>
.sms-wrapper {
    margin-top: 100rpx;
    width: 100vw;
    height: 900rpx;
    min-height: 500rpx;
    background-color: #fff;
    border-radius: 50rpx 50rpx 0 0;
    border: .1rpx solid #fff;
    box-sizing: border-box;
    padding: 50rpx;

    .s-title {
        color: #4d4d4dff;
        font-size: 30rpx;
        font-weight: 500;
    }

    .code-input,
    .phone-input {
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        margin-top: 40rpx;
        height: 110rpx;
        border-radius: 20rpx;
        background: #f7f7f7ff;

        image {
            width: 36rpx;
            height: 36rpx;
        }

        input {
            margin-left: 10rpx;
        }
    }

    .phone-input {
        display: flex;
        align-items: center;

        input {
            margin-left: 20rpx;
        }
    }


    .code-input {
        justify-content: space-between;
        margin-top: 30rpx;

        input {
            margin-left: 10rpx;
        }
    }
}

.confirm-but {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 200rpx 0 50rpx;
    height: 110rpx;
    background: linear-gradient(270deg, #ff6756ff 0%, #f99364ff 100%);
    color: #fff;
    border-radius: 20rpx;
}

.code-wrapper {
    display: flex;
    align-items: center;
}

.send-sms {
    margin-left: 20rpx;
    transform: translateY(20rpx);
    color: var(--v-primary);
    font-size: 32rpx;
    white-space: nowrap;
}

.hover-but {
    opacity: .5;
}
</style>