Files
sexygoat 6bf56a4b4c first
2026-01-22 17:25:30 +08:00

148 lines
3.1 KiB
Vue

<template>
<view class="container">
<view v-if="isBind" class="card flex-col-g20">
<view class="flex-row-g20">
<label for="">手机号:</label>
<up-input placeholder="请输入绑定的手机号" border="surround" v-model="bind.mobile" />
</view>
<view class="flex-row-g20">
<label for="">验证码:</label>
<up-input placeholder="验证码" v-model="bind.code">
<template #suffix>
<up-button @tap="getCode" text="获取验证码" type="success"></up-button>
</template>
</up-input>
</view>
<view class="btn">
<up-button type="primary" @tap="bindPhone">绑定手机号</up-button>
</view>
</view>
<view class="card" v-else>
<up-cell-group>
<up-cell title="绑定手机号" :value="bindInfo.phone"></up-cell>
<up-cell title="绑定时间" :value="bindInfo.bindTime"></up-cell>
<up-cell title="ICCID" :value="bindInfo.iccid"></up-cell>
<up-cell title="状态" :value="bindInfo.status"></up-cell>
</up-cell-group>
<view class="btn mt-30 flex-col-g20">
<up-button type="primary" @tap="changeBind">更换绑定</up-button>
<up-button type="success" @tap="logout">退出</up-button>
</view>
</view>
</view>
</template>
<script setup>
import {
ref,
onMounted,
reactive
} from 'vue'
import {
userStore
} from '@/store/index.js';
let isBind = ref(false)
let bind = reactive({
mobile: "",
code: ""
})
let bindInfo = reactive({
phone: "",
iccid: "",
bindTime: "",
status: 0
})
const changeBind = () => {
isBind.value = true
}
// 获取绑定信息
const getBindInfo = async () => {
const result = await userStore.actions.getDeviceBindPhone()
if (result.myBindRecord.bindPhone) {
isBind.value = false
bindInfo.phone = result.myBindRecord.bindPhone
bindInfo.iccid = result.myBindRecord.iccidMark
bindInfo.bindTime = result.myBindRecord.createDateStr
bindInfo.status = result.myBindRecord.status === 1 ? "已绑定" : "未绑定"
} else {
isBind.value = true
}
}
// 获取验证码
const getCode = async () => {
if (!bind.mobile) {
uni.showToast({
title: "请输入手机号",
icon: "none"
})
return
}
const data = await userStore.actions.getSmsNumber(bind.mobile)
if (data.isSuccess && data?.errorMsg) {
uni.showToast({
title: data.errorMsg,
icon: "none"
})
} else {
uni.showToast({
title: "验证码已发送",
icon: "none"
})
}
}
// 绑定手机号
const bindPhone = async () => {
if (!bind.mobile && !bind.code) {
uni.showToast({
title: "手机号和验证码都不能为空",
icon: "none"
})
return
}
const data = await userStore.actions.bindCardPhone(bind.mobile, bind.code)
if (data.isSuccess && data?.errorMsg) {
uni.showToast({
title: data.errorMsg,
icon: "none"
})
return
} else {
uni.showToast({
title: "绑定成功",
icon: "none"
})
}
setTimeout(() => {
isBind.value = false
getBindInfo()
})
}
// 退出
const logout = async() => {
await userStore.actions.logout()
uni.navigateTo({
url: "/pages/login/login"
})
}
onMounted(() => {
getBindInfo()
})
</script>
<style>
</style>