更新：游客模式、我的湖分、我的证书

2025-12-09 14:28:02 +08:00
parent 79aa8e3fe6
commit 66b004d6bf
18 changed files with 702 additions and 60 deletions
--- a/pages/user/certificate/index.vue
+++ b/pages/user/certificate/index.vue
@@ -0,0 +1,134 @@
+<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>