<script setup>
/**
 * 修改手机号
 */
import {
    reactive,
    computed,
} from 'vue'
import {
    useStore
} from 'vuex'
// 获取验证码
import getCode from '@/components/getCode/getCode.vue'
// 工具库
import util from '@/common/js/util.js'
// api
import api from '@/api/index.js'

// 
const store = useStore()
// 表单
const form = reactive({ 
    phoneNumber: '',
    verifyCode: ''
})
// 用户信息
const userinfo = computed(() => {
    let result = store.state.userinfo
    return result
})

// 实名认证
function handleSubmit() {
    const data = {
        ...form
    }

    // 验证
    if (!data.phoneNumber) {
        util.alert('请输入手机号')
        return
    }
    if (!data.verifyCode) {
        util.alert('请输入验证码')
        return
    } 

    api.mine.updatePhone({ data }).then(rs => {
        if (rs.code == 200) {
            util.alert('修改成功')
            util.getUserinfo()
            setTimeout(() => {
                uni.navigateBack()
            }, 500)
            return
        }
        util.alert({
            content: rs.msg,
            showCancel: false,
        })
    })
}
</script>

<template>
    <view class="container">
        <view class="line df aic">
            <view class="key">手机号</view>
            <view class="value">
                <input class="input" type="text" v-model="form.phoneNumber" placeholder="请输入手机号" />
            </view>
        </view>

        <view class="line df aic">
            <view class="key">验证码</view>
            <view class="value">
                <input type="text" v-model="form.verifyCode" placeholder="请输入验证码" class="f1" />
            </view>
            <view class="getCode btn sm ml20 plr20">
                <getCode :phone="form.phoneNumber" />
            </view>
        </view>

        <view class="btn bar lg black mtb60 mlr60" @click="handleSubmit">提交</view>
    </view>
</template>

<style scoped lang="scss">
// 容器
.container {
    padding: 50rpx 30rpx;
    color: #333333;
    font-size: 34rpx;

    .line+.line {
        border-top: 2rpx solid #ddd;
    }

    .line {
        padding: 35rpx 10rpx;
    }

    .key {
        width: 200rpx;
    }

    .value {
        flex: 1;
        font-size: 28rpx;
    }
}

// 获取验证码
.getCode {
    color: #666;
    background-color: #fff;
}
</style>