first

pages/bind/bind.vue

@@ -0,0 +1,148 @@
+<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>