feat(用户中心): 添加代绑汇邦云功能

- 新增 BindHBYCloud 组件用于处理汇邦云账号绑定
- 在个人中心页面添加绑定入口按钮
- 实现动态码、姓名和身份证号的表单验证
- 处理绑定成功/失败后的反馈和状态重置
This commit is contained in:
dzq 2025-11-06 17:13:36 +08:00
parent f3b55de67d
commit 77ff54efa3
2 changed files with 131 additions and 2 deletions

View File

@ -0,0 +1,109 @@
<script setup lang="ts">
import { ref } from 'vue'
import { bindWxMpUser } from '@/common/apis/ab98'
import { showLoadingToast, showSuccessToast, showFailToast } from 'vant'
interface Props {
show: boolean
}
const props = defineProps<Props>()
const emit = defineEmits<{
(e: 'update:show', value: boolean): void
(e: 'success'): void
}>()
const formData = ref({
dynamicCode: '',
name: '',
idNum: ''
})
const loading = ref(false)
const handleClose = () => {
emit('update:show', false)
}
const handleSubmit = async () => {
if (!formData.value.dynamicCode || !formData.value.name || !formData.value.idNum) {
showFailToast('请填写完整信息')
return
}
loading.value = true
showLoadingToast({
message: '绑定中...',
forbidClick: true
})
try {
await bindWxMpUser({
dynamicCode: formData.value.dynamicCode,
name: formData.value.name,
idNum: formData.value.idNum
})
showSuccessToast('绑定成功')
emit('success')
handleClose()
//
formData.value = {
dynamicCode: '',
name: '',
idNum: ''
}
} catch (error) {
console.error('绑定失败:', error)
showFailToast('绑定失败,请检查信息是否正确')
} finally {
loading.value = false
}
}
</script>
<template>
<van-dialog
:show="props.show"
title="代绑汇邦云"
show-cancel-button
confirm-button-text="绑定"
cancel-button-text="取消"
:before-close="handleClose"
@confirm="handleSubmit"
>
<div class="bind-form p-4">
<van-form>
<van-cell-group inset>
<van-field
v-model="formData.dynamicCode"
label="动态码"
placeholder="请输入动态码"
required
/>
<van-field
v-model="formData.name"
label="姓名"
placeholder="请输入姓名"
required
/>
<van-field
v-model="formData.idNum"
label="身份证号"
placeholder="请输入身份证号"
required
/>
</van-cell-group>
</van-form>
</div>
</van-dialog>
</template>
<style lang="scss" scoped>
.bind-form {
max-height: 400px;
overflow-y: auto;
}
</style>

View File

@ -4,7 +4,8 @@ import { useWxStore } from '@/pinia/stores/wx'
import { useAb98UserStore } from '@/pinia/stores/ab98-user'
import { storeToRefs } from 'pinia'
import { publicPath } from "@/common/utils/path"
import { showConfirmDialog } from 'vant';
import { showConfirmDialog } from 'vant'
import BindHBYCloud from '@/common/components/BindHBYCloud.vue'
const router = useRouter();
const route = useRoute();
@ -39,6 +40,13 @@ const handleLogout = () => {
});
};
const showBindDialog = ref(false);
const handleBindSuccess = () => {
//
console.log('绑定汇邦云成功');
};
wxStore.refreshBalance();
</script>
@ -107,6 +115,12 @@ wxStore.refreshBalance();
<span>我的柜子</span>
</div>
</van-col>
<van-col span="8">
<div class="custom-btn" @click="showBindDialog = true">
<van-icon name="friends-o" size="20px" />
<span>代绑汇邦云</span>
</div>
</van-col>
<!-- <van-col span="6">
<div v-if="wxStore.isCabinetAdmin" class="custom-btn" @click="router.push('/manage/goods')">
<van-icon name="comment-o" size="20px" />
@ -131,9 +145,15 @@ wxStore.refreshBalance();
<span>耗材核销</span>
</div>
</van-col>
<van-col span="8"></van-col>
<!-- <van-col span="8"></van-col> -->
</van-row>
</div>
<!-- 代绑汇邦云弹窗 -->
<BindHBYCloud
v-model:show="showBindDialog"
@success="handleBindSuccess"
/>
</template>
<style lang="scss" scoped>