82 lines
2.2 KiB
Plaintext
82 lines
2.2 KiB
Plaintext
<template>
|
||
<hr-page page-bg="#F3F4F6" status-bg="#FFFFFF" nav-title="我的证书" :xloading="true" @right-click="onSort">
|
||
<template v-slot:right>
|
||
<x-icon name="arrow-up-down-line" color="#6B7280" font-size="17"></x-icon>
|
||
</template>
|
||
|
||
<view class="hr-body">
|
||
|
||
<hr-card>
|
||
<view class="hr-row">
|
||
<view class="hr-avt hr-avt-lg hr-avt-grn ct-avt">
|
||
<text>▤</text>
|
||
</view>
|
||
<view class="hr-flex1">
|
||
<text class="ct-title">有效证书 {{ certs.length }} 张</text>
|
||
<text class="ct-sub">其中 1 张将于 2026-10-15 到期</text>
|
||
</view>
|
||
</view>
|
||
</hr-card>
|
||
|
||
<hr-sec title="证书列表"></hr-sec>
|
||
<hr-card variant="list">
|
||
<hr-lrow v-for="(c, i) in certs" :key="i" :icon="c.statusTheme == 'grn' ? '▤' : '!'"
|
||
:theme="c.statusTheme == 'grn' ? 'grn' : 'amb'" :title="c.name"
|
||
:sub="c.gotAt + ' 取得 · ' + (c.statusTheme == 'grn' ? '有效至 ' + c.expireAt : c.expireAt + ' 到期')"
|
||
:value="c.status + ' ›'" :value-theme="c.statusTheme" :value-bold="true"
|
||
:is-last="i == certs.length - 1" @click="onCertClick(c)"></hr-lrow>
|
||
</hr-card>
|
||
|
||
<hr-tip style="margin-top:14px" theme="warn" icon="⚑"
|
||
text="BLS 证书将在 22 天后到期，请完成年度复训后自动续期。"></hr-tip>
|
||
|
||
<view style="height:14px"></view>
|
||
</view>
|
||
</hr-page>
|
||
</template>
|
||
|
||
<script lang="uts" setup>
|
||
import { ref } from 'vue'
|
||
import { certList } from '@/mock/index.uts'
|
||
import { HrCert } from '@/mock/types.uts'
|
||
|
||
/** s13 我的证书 */
|
||
const certs = ref<HrCert[]>(certList)
|
||
|
||
function onCertClick(c : HrCert) : void {
|
||
uni.showModal({
|
||
title: c.name,
|
||
content: `取得时间：${c.gotAt}\n有效期至：${c.expireAt}\n状态：${c.status}`,
|
||
cancelText: '关闭',
|
||
confirmText: '查看证书',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.showToast({ title: '已生成证书图片', icon: 'none' })
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
function onSort() : void {
|
||
uni.showToast({ title: '按取得时间排序', icon: 'none' })
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.ct-avt {
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.ct-title {
|
||
font-size: 31.4rpx;
|
||
font-weight: bold;
|
||
color: #1F2937;
|
||
}
|
||
|
||
.ct-sub {
|
||
font-size: 25.8rpx;
|
||
color: #6B7280;
|
||
margin-top: 8rpx;
|
||
}
|
||
</style>
|