feat(个人中心): 添加生成动态码功能用于绑定汇邦云
新增动态码生成功能,用户可通过点击按钮生成动态码并在企业微信中绑定汇邦云账号。包含以下修改: - 添加动态码生成API调用及相关状态管理 - 实现动态码弹窗展示组件 - 处理生成过程中的错误提示
This commit is contained in:
parent
a0df240aaf
commit
c319a349e8
|
|
@ -1,9 +1,12 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useWxStore } from '@/pinia/stores/wx'
|
||||
import { useAb98UserStore } from '@/pinia/stores/ab98-user'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { toHttpsUrl } from '@/utils'
|
||||
import { generateDynamicCode } from '@/api/users'
|
||||
import { DynamicCodeResponse } from '@/api/users/types'
|
||||
import { useToast } from 'wot-design-uni'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
|
|
@ -23,6 +26,11 @@ const name = computed(() => {
|
|||
|
||||
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(() => {
|
||||
if (ab98User.value && ab98User.value.ab98Balance !== undefined) {
|
||||
return (ab98User.value.ab98Balance / 100).toFixed(2)
|
||||
|
|
@ -72,6 +80,27 @@ const navigateToPage = (pagePath: string, options: { type?: 'navigateTo' | 'swit
|
|||
onMounted(() => {
|
||||
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>
|
||||
|
||||
<template>
|
||||
|
|
@ -135,7 +164,10 @@ onMounted(() => {
|
|||
<wd-icon name="star" size="20px" color="#fff"></wd-icon>
|
||||
<text>我的柜子</text>
|
||||
</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 v-if="wxStore.isCabinetAdmin" class="button-item" @click="navigateToPage('/pages/cabinet/index')">
|
||||
<wd-icon name="tools" size="20px" color="#fff"></wd-icon>
|
||||
|
|
@ -154,6 +186,27 @@ onMounted(() => {
|
|||
<view class="button-placeholder"></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>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue