134 lines
3.5 KiB
Vue
134 lines
3.5 KiB
Vue
<template>
|
||
<view class="certificate-page">
|
||
<nav-bar :title="$t('user.certificate')"></nav-bar>
|
||
<view v-if="certificateList.length > 0">
|
||
<view style="margin: 10rpx;" >【共{{certificateList.length}}个证书】</view>
|
||
<view class="certificate-list" v-for="(item,index) in certificateList" :key="index">
|
||
<view class="certificate-list-row">
|
||
<h3>证书编号：{{item.bh}}</h3>
|
||
<text style="font-size: 26rpx; color: #999;">获得时间：{{item.time}}</text>
|
||
</view>
|
||
<view class="certificate-certificate">
|
||
<view class="img" v-for="(i,index) in item.certificateUrl" :key="index">
|
||
<image @click="preveImg(i.url)" :src="i.url" mode="heightFix"></image>
|
||
</view>
|
||
<view class="certificate-detailed" @click="detailed(item)">详细信息</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else><wd-divider>您还未获得证书</wd-divider></view>
|
||
</view>
|
||
<wd-popup v-model="detailedState" position="bottom" :closeable="true">
|
||
<view class="detailed">
|
||
<view class="detailed-text">
|
||
证书详情
|
||
</view>
|
||
<view class="detailed-row">证书类型：<text class="text">{{detailedData.a}}</text></view>
|
||
<view class="detailed-row">获得时间：<text class="text">{{detailedData.time}}</text></view>
|
||
<view class="detailed-row">获得途径：<text class="text">{{detailedData.b}}</text></view>
|
||
</view>
|
||
</wd-popup>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { useI18n } from 'vue-i18n'
|
||
|
||
const { t } = useI18n()
|
||
const detailedState = ref(false)
|
||
const detailedData = ref({})
|
||
|
||
// 模拟的 certificateList 数据
|
||
const certificateList = ref([
|
||
{ a: 'ZH', b: '吴门', bh: 1, time: '2025-6-20', certificateUrl: "https://ehh-private-01.oss-cn-beijing.aliyuncs.com/certificate/ca2140c3-d212-4d4e-9203-ddc161d50470.jpg,https://ehh-private-01.oss-cn-beijing.aliyuncs.com/certificate/18a7ea22-b75a-4ef6-9109-f448f45e424f.jpg" },
|
||
{ bh: 2, time: '2025-6-22', certificateUrl: "https://ehh-private-01.oss-cn-beijing.aliyuncs.com/certificate/ca2140c3-d212-4d4e-9203-ddc161d50470.jpg,https://ehh-private-01.oss-cn-beijing.aliyuncs.com/certificate/18a7ea22-b75a-4ef6-9109-f448f45e424f.jpg" }
|
||
]);
|
||
|
||
// 重新获取数据
|
||
certificateList.value = certificateList.value.map(item => {
|
||
return { ...item, certificateUrl: item.certificateUrl.split(',').map(url => ({ url })) };
|
||
});
|
||
|
||
/**
|
||
* 查看证书详情信息
|
||
*/
|
||
const detailed = (item) => {
|
||
detailedState.value = true
|
||
detailedData.value = item
|
||
}
|
||
|
||
/**
|
||
* 查看照片
|
||
*/
|
||
const preveImg = (url : any) => {
|
||
uni.previewImage({
|
||
urls: [url],
|
||
current: 0
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.certificate-page {
|
||
min-height: 100vh;
|
||
background-color: #f7faf9;
|
||
}
|
||
|
||
.certificate-list {
|
||
background: #fff;
|
||
border-radius: 15rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
margin: 20rpx;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.certificate-list-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.certificate-certificate {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-top: 20rpx;
|
||
|
||
.img {
|
||
width: 36%;
|
||
overflow: hidden;
|
||
height: 300rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.certificate-detailed {
|
||
color: #55aaff;
|
||
border: #55aaff 1px solid;
|
||
padding: 10rpx 20rpx;
|
||
border-radius: 15rpx;
|
||
}
|
||
}
|
||
|
||
.detailed {
|
||
padding: 20rpx;
|
||
|
||
.detailed-text {
|
||
text-align: center;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.detailed-row {
|
||
color: #999;
|
||
margin: 20rpx 0;
|
||
font-size: 26rpx;
|
||
|
||
.text {
|
||
color: #000;
|
||
}
|
||
}
|
||
}
|
||
</style> |