|
@@ -0,0 +1,347 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="certification-service">
|
|
|
|
|
+ <scroll-view scroll-y class="certification-service__scroll">
|
|
|
|
|
+ <view class="info-card">
|
|
|
|
|
+ <view class="card-title">账户信息</view>
|
|
|
|
|
+
|
|
|
|
|
+ <view v-for="item in accountItems" :key="item.label" class="info-row">
|
|
|
|
|
+ <text class="info-row__label">{{ item.label }}</text>
|
|
|
|
|
+ <text class="info-row__value">{{ item.value || '-' }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="info-card">
|
|
|
|
|
+ <view class="card-header">
|
|
|
|
|
+ <view class="card-title">身份信息</view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="card-actions">
|
|
|
|
|
+ <view :class="['status-tag', identityStatusClass]">
|
|
|
|
|
+ {{ identityStatusText }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <button class="action-btn" :class="identityStatusClass" @click="handleGoIdentityAuth">
|
|
|
|
|
+ {{ isIdentityVerified ? '更新' : '编辑并认证' }}
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="id-card-image-list">
|
|
|
|
|
+ <view v-for="item in idCardImageList" :key="item.label" class="id-card-image">
|
|
|
|
|
+ <image v-if="item.url" class="id-card-image__img" :src="item.url" mode="aspectFill" />
|
|
|
|
|
+
|
|
|
|
|
+ <view v-else class="id-card-image__empty">
|
|
|
|
|
+ {{ item.label }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view v-for="item in identityItems" :key="item.label" class="info-row">
|
|
|
|
|
+ <text class="info-row__label">{{ item.label }}</text>
|
|
|
|
|
+ <text class="info-row__value">{{ item.value || '-' }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="info-card">
|
|
|
|
|
+ <view class="card-header">
|
|
|
|
|
+ <view class="card-title">银行卡信息</view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="card-actions">
|
|
|
|
|
+ <view :class="['status-tag', bankStatusClass]">
|
|
|
|
|
+ {{ bankStatusText }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <button class="action-btn" :class="bankStatusClass" @click="handleGoBankAuth">
|
|
|
|
|
+ {{ isBankVerified ? '更新' : '编辑并认证' }}
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view v-for="item in bankItems" :key="item.label" class="info-row">
|
|
|
|
|
+ <text class="info-row__label">{{ item.label }}</text>
|
|
|
|
|
+ <text class="info-row__value">{{ item.value || '-' }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </scroll-view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script setup lang="ts">
|
|
|
|
|
+import { computed, ref } from 'vue'
|
|
|
|
|
+
|
|
|
|
|
+import { onShow } from '@dcloudio/uni-app'
|
|
|
|
|
+
|
|
|
|
|
+import { getAuthInfoApi } from '@/services/modules/auth'
|
|
|
|
|
+import type { GetAuthInfoResponse } from '@/services/modules/auth/type'
|
|
|
|
|
+
|
|
|
|
|
+import { useUserStore } from '@/stores/modules/user'
|
|
|
|
|
+
|
|
|
|
|
+const AUTH_SUCCESS_STATUS = 1
|
|
|
|
|
+
|
|
|
|
|
+const IDENTITY_AUTH_URL = '/pages-sub-verify/auth/identity'
|
|
|
|
|
+const BANK_AUTH_URL = '/pages-sub-verify/auth/bank'
|
|
|
|
|
+
|
|
|
|
|
+const userStore = useUserStore()
|
|
|
|
|
+
|
|
|
|
|
+const authInfo = ref<GetAuthInfoResponse | null>(null)
|
|
|
|
|
+
|
|
|
|
|
+const currentUserInfo = computed(() => userStore.currentUserInfo)
|
|
|
|
|
+
|
|
|
|
|
+const idCardInfo = computed(() => authInfo.value?.idCardInfo ?? null)
|
|
|
|
|
+const faceAuthInfo = computed(() => authInfo.value?.faceAuthInfo ?? null)
|
|
|
|
|
+const bankAccountInfo = computed(() => authInfo.value?.bankAccountInfo ?? null)
|
|
|
|
|
+
|
|
|
|
|
+const isIdentityVerified = computed(() => faceAuthInfo.value?.authStatus === AUTH_SUCCESS_STATUS)
|
|
|
|
|
+const isBankVerified = computed(() => bankAccountInfo.value?.authStatus === AUTH_SUCCESS_STATUS)
|
|
|
|
|
+
|
|
|
|
|
+const identityStatusClass = computed(() =>
|
|
|
|
|
+ isIdentityVerified.value ? 'is-verified' : 'is-unverified'
|
|
|
|
|
+)
|
|
|
|
|
+const bankStatusClass = computed(() => (isBankVerified.value ? 'is-verified' : 'is-unverified'))
|
|
|
|
|
+
|
|
|
|
|
+const identityStatusText = computed(() => (isIdentityVerified.value ? '已认证' : '未认证'))
|
|
|
|
|
+const bankStatusText = computed(() => (isBankVerified.value ? '已认证' : '未认证'))
|
|
|
|
|
+
|
|
|
|
|
+const accountItems = computed(() => [
|
|
|
|
|
+ {
|
|
|
|
|
+ label: '姓名',
|
|
|
|
|
+ value: currentUserInfo.value?.realname ?? authInfo.value?.name ?? '',
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ label: '手机号码',
|
|
|
|
|
+ value: currentUserInfo.value?.phone ?? authInfo.value?.loginAuthInfo?.phone ?? '',
|
|
|
|
|
+ },
|
|
|
|
|
+])
|
|
|
|
|
+
|
|
|
|
|
+const identityItems = computed(() => [
|
|
|
|
|
+ {
|
|
|
|
|
+ label: '姓名',
|
|
|
|
|
+ value: idCardInfo.value?.name ?? authInfo.value?.name ?? '',
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ label: '身份证号',
|
|
|
|
|
+ value: idCardInfo.value?.idCardNumber ?? authInfo.value?.idCardNumber ?? '',
|
|
|
|
|
+ },
|
|
|
|
|
+])
|
|
|
|
|
+
|
|
|
|
|
+const bankItems = computed(() => [
|
|
|
|
|
+ {
|
|
|
|
|
+ label: '银行卡号',
|
|
|
|
|
+ value: bankAccountInfo.value?.bankCardNumber ?? '',
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ label: '开户行',
|
|
|
|
|
+ value: bankAccountInfo.value?.bankName ?? '',
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ label: '预留手机',
|
|
|
|
|
+ value: bankAccountInfo.value?.bankPhone ?? '',
|
|
|
|
|
+ },
|
|
|
|
|
+])
|
|
|
|
|
+
|
|
|
|
|
+const idCardImageList = computed(() => [
|
|
|
|
|
+ {
|
|
|
|
|
+ label: '身份证正面',
|
|
|
|
|
+ url: idCardInfo.value?.idCardImgFront ?? '',
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ label: '身份证反面',
|
|
|
|
|
+ url: idCardInfo.value?.idCardImgEnd ?? '',
|
|
|
|
|
+ },
|
|
|
|
|
+])
|
|
|
|
|
+
|
|
|
|
|
+const handleGoIdentityAuth = () => {
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: IDENTITY_AUTH_URL,
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const handleGoBankAuth = () => {
|
|
|
|
|
+ if (!isIdentityVerified.value) {
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: '请先完成身份信息认证',
|
|
|
|
|
+ icon: 'none',
|
|
|
|
|
+ duration: 3000,
|
|
|
|
|
+ })
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: BANK_AUTH_URL,
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const getAuthInfo = async () => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const res = await getAuthInfoApi()
|
|
|
|
|
+ authInfo.value = res?.data ?? null
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ authInfo.value = null
|
|
|
|
|
+
|
|
|
|
|
+ console.error('获取认证信息失败', error)
|
|
|
|
|
+
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: '获取认证信息失败',
|
|
|
|
|
+ icon: 'none',
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+onShow(() => {
|
|
|
|
|
+ getAuthInfo()
|
|
|
|
|
+})
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
|
+.certification-service {
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
+ background: #f5f5f5;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.certification-service__scroll {
|
|
|
|
|
+ height: 100vh;
|
|
|
|
|
+ padding: 20rpx;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.info-card {
|
|
|
|
|
+ margin-bottom: 24rpx;
|
|
|
|
|
+ padding: 0 32rpx;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ border-radius: 18rpx;
|
|
|
|
|
+ background: #ffffff;
|
|
|
|
|
+ box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.04);
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.card-title {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ min-height: 88rpx;
|
|
|
|
|
+ color: #333333;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ line-height: 1.4;
|
|
|
|
|
+ border-bottom: 1rpx solid #eeeeee;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.card-header {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ min-height: 88rpx;
|
|
|
|
|
+ border-bottom: 1rpx solid #eeeeee;
|
|
|
|
|
+
|
|
|
|
|
+ .card-title {
|
|
|
|
|
+ min-height: auto;
|
|
|
|
|
+ border-bottom: none;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.card-actions {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 14rpx;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.status-tag {
|
|
|
|
|
+ height: 42rpx;
|
|
|
|
|
+ padding: 0 16rpx;
|
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ line-height: 42rpx;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+
|
|
|
|
|
+ &.is-verified {
|
|
|
|
|
+ background: #e8f5e9;
|
|
|
|
|
+ color: #4caf50;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.is-unverified {
|
|
|
|
|
+ background: #fef0f0;
|
|
|
|
|
+ color: #f56c6c;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.action-btn {
|
|
|
|
|
+ height: 56rpx;
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ padding: 0 28rpx;
|
|
|
|
|
+ border-radius: 28rpx;
|
|
|
|
|
+ background: #ffffff;
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ line-height: 56rpx;
|
|
|
|
|
+
|
|
|
|
|
+ &::after {
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.is-verified {
|
|
|
|
|
+ border: 1rpx solid #faad14;
|
|
|
|
|
+ color: #faad14;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.is-unverified {
|
|
|
|
|
+ border: 1rpx solid #1890ff;
|
|
|
|
|
+ color: #1890ff;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.info-row {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ min-height: 96rpx;
|
|
|
|
|
+ border-bottom: 1rpx solid #eeeeee;
|
|
|
|
|
+
|
|
|
|
|
+ &:last-child {
|
|
|
|
|
+ border-bottom: none;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.info-row__label {
|
|
|
|
|
+ width: 200rpx;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ color: #666666;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.info-row__value {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ color: #333333;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ line-height: 1.5;
|
|
|
|
|
+ text-align: right;
|
|
|
|
|
+ word-break: break-all;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.id-card-image-list {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
|
|
+ gap: 24rpx;
|
|
|
|
|
+ padding: 24rpx 0;
|
|
|
|
|
+ border-bottom: 1rpx solid #eeeeee;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.id-card-image {
|
|
|
|
|
+ height: 210rpx;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ border: 1rpx solid #eeeeee;
|
|
|
|
|
+ border-radius: 12rpx;
|
|
|
|
|
+ background: #f7f7f7;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.id-card-image__img {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.id-card-image__empty {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ color: #999999;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|