jiuyiUniapp/jiuyi2/pages/mine/setting/updatePhoneNum.vue

118 lines
2.3 KiB
Vue

<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>