veterans_H5/h5_web/pages/skillsTraining/achievementCertificate/achievementCertificate.vue

<!-- 成绩和证书 -->
<template>
	<view class="achievement">
		<!-- 导航栏 -->
		<u-navbar back-icon-color="#fff" title="成绩与证书" title-color="#fff" :background="{ backgroundColor: '#3D5D4C' }">
			<view class="navbar-right" slot="right" @click="jumpPage('/pages/skillsTraining/addAchievementCertificate/addAchievementCertificate')">
				<u-icon name="plus" color="#fff"></u-icon>
				<text>录入</text>
			</view>
		</u-navbar>
		<!-- 证书列表 -->
		<view class="achievement-content">
			<view class="achievement-content-list">
				<view class="achievement-content-list-item" v-for="(item, index) in certificateList" :key="index" :class="index % 2 === 0 ? 'bg1' : 'bg2'" @click="jumpPage('pages/skillsTraining/certificateDetails/certificateDetails', { id: item.id })">
					<view class="title">
						<view>{{ item.name }}</view>
						<view class="delete-btn" @click="deleteItem(item)">删除</view>
					</view>
					<view class="result">
						成绩 <text>{{ item.achievement }}分</text>（满分{{ item.total }}分）
					</view>
					<view class="time">
						通过时间：{{ item.passTime }}
					</view>
					<view class="con">
						{{ item.getCon }}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 删除提示弹框 -->
		<u-modal v-model="deleteTips" content="您确认要删除该证书吗?" :show-cancel-button="true" @confirm="deleteConfirm"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				certificateList: [
					{ id: 1, name: '国家计算机二级考试', achievement: 99, total: 100, passTime: '2021-10-12', getCon: '获得证书：国家计算机二级考试' },
					{ id: 3, name: '国家高新技术普及考试', achievement: 80, total: 100, passTime: '2021-11-12', getCon: '获得证书：国家高新技术普及考试' },
					{ id: 2, name: '国家计算机二级考试', achievement: 79, total: 100, passTime: '2021-12-12', getCon: '获得证书：国家计算机二级考试' },
					{ id: 4, name: '国家计算机二级考试', achievement: 89, total: 100, passTime: '2022-10-12', getCon: '获得证书：国家计算机二级考试' }
				],
				deleteTips: false
			}
		},
		methods: {
			/**
			 * 删除证书
			 * @param {Object} item
			 */
			deleteItem(item) {
				this.deleteTips = true
			},
			/**
			 * 删除确认
			 */
			deleteConfirm() {
				this.deleteTips = false
			},
			/**
			 * 跳转到指定页面
			 * @param {Object} url
			 * @param {Object} params
			 */
			jumpPage(url, params) {
				this.$u.route({url, params});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './achievementCertificate.scss';
</style>