feat(个人中心): 添加生成动态码功能用于绑定汇邦云

新增动态码生成功能,用户可通过点击按钮生成动态码并在企业微信中绑定汇邦云账号。包含以下修改:
- 添加动态码生成API调用及相关状态管理
- 实现动态码弹窗展示组件
- 处理生成过程中的错误提示
This commit is contained in:
dzq 2025-11-06 17:14:55 +08:00
parent a0df240aaf
commit c319a349e8
1 changed files with 55 additions and 2 deletions

View File

@ -1,9 +1,12 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, onMounted } from 'vue' import { computed, onMounted, ref } from 'vue'
import { useWxStore } from '@/pinia/stores/wx' import { useWxStore } from '@/pinia/stores/wx'
import { useAb98UserStore } from '@/pinia/stores/ab98-user' import { useAb98UserStore } from '@/pinia/stores/ab98-user'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { toHttpsUrl } from '@/utils' import { toHttpsUrl } from '@/utils'
import { generateDynamicCode } from '@/api/users'
import { DynamicCodeResponse } from '@/api/users/types'
import { useToast } from 'wot-design-uni'
definePage({ definePage({
style: { style: {
@ -23,6 +26,11 @@ const name = computed(() => {
const userAvatar = computed(() => face_img.value ? toHttpsUrl(face_img.value) : '/static/favicon.ico') const userAvatar = computed(() => face_img.value ? toHttpsUrl(face_img.value) : '/static/favicon.ico')
//
const dynamicCodeActionSheet = ref<boolean>(false)
const dynamicCodeData = ref<DynamicCodeResponse | null>(null)
const toast = useToast()
const ab98BalanceInYuan = computed(() => { const ab98BalanceInYuan = computed(() => {
if (ab98User.value && ab98User.value.ab98Balance !== undefined) { if (ab98User.value && ab98User.value.ab98Balance !== undefined) {
return (ab98User.value.ab98Balance / 100).toFixed(2) return (ab98User.value.ab98Balance / 100).toFixed(2)
@ -72,6 +80,27 @@ const navigateToPage = (pagePath: string, options: { type?: 'navigateTo' | 'swit
onMounted(() => { onMounted(() => {
wxStore.refreshBalance() wxStore.refreshBalance()
}) })
//
const handleGenerateDynamicCode = async () => {
if (!wxStore.openid) {
toast.show('用户信息异常,请重新登录')
return
}
try {
const res = await generateDynamicCode(wxStore.openid)
if (res && res.code == 0) {
dynamicCodeData.value = res.data
dynamicCodeActionSheet.value = true
} else {
toast.show(res?.msg || '获取动态码失败')
}
} catch (error) {
console.error('获取动态码失败:', error)
toast.show('获取动态码失败')
}
}
</script> </script>
<template> <template>
@ -135,7 +164,10 @@ onMounted(() => {
<wd-icon name="star" size="20px" color="#fff"></wd-icon> <wd-icon name="star" size="20px" color="#fff"></wd-icon>
<text>我的柜子</text> <text>我的柜子</text>
</view> </view>
<view class="button-placeholder"></view> <view class="button-item" @click="handleGenerateDynamicCode">
<wd-icon name="qrcode" size="20px" color="#fff"></wd-icon>
<text>绑定汇邦云</text>
</view>
<view class="button-placeholder"></view> <view class="button-placeholder"></view>
<!-- <view v-if="wxStore.isCabinetAdmin" class="button-item" @click="navigateToPage('/pages/cabinet/index')"> <!-- <view v-if="wxStore.isCabinetAdmin" class="button-item" @click="navigateToPage('/pages/cabinet/index')">
<wd-icon name="tools" size="20px" color="#fff"></wd-icon> <wd-icon name="tools" size="20px" color="#fff"></wd-icon>
@ -154,6 +186,27 @@ onMounted(() => {
<view class="button-placeholder"></view> <view class="button-placeholder"></view>
</view> --> </view> -->
</view> </view>
<!-- 动态码弹窗 -->
<wd-action-sheet
v-model="dynamicCodeActionSheet"
title="动态码"
cancel-text="关闭"
:close-on-click-modal="true"
@close="dynamicCodeActionSheet = false"
>
<view style="padding: 30px 30px 80px 30px; text-align: center;">
<view style="font-size: 24px; font-weight: bold; color: #409EFF; margin-bottom: 8px;">
{{ dynamicCodeData?.dynamicCode || '' }}
</view>
<view style="font-size: 14px; color: #999; margin-top: 8px;">
有效时间{{ dynamicCodeData?.validityMinutes || '0' }} 分钟
</view>
<view style="font-size: 12px; color: #666; margin-top: 16px; padding: 8px 12px; background: #f5f5f5; border-radius: 4px;">
请使用该动态码在企业微信中绑定汇邦云账号
</view>
</view>
</wd-action-sheet>
</view> </view>
</template> </template>