feat(用户中心): 添加代绑汇邦云功能
- 新增 BindHBYCloud 组件用于处理汇邦云账号绑定 - 在个人中心页面添加绑定入口按钮 - 实现动态码、姓名和身份证号的表单验证 - 处理绑定成功/失败后的反馈和状态重置
This commit is contained in:
parent
f3b55de67d
commit
77ff54efa3
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue