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', { id })">
				<u-icon name="plus" color="#fff"></u-icon>
				<text>录入</text>
			</view>
		</u-navbar>
		<!-- 证书列表 -->
		<view class="achievement-content">
			<view class="achievement-content-list" v-if="certificateList.length">
				<view class="achievement-content-list-item" v-for="(item, index) in certificateList" :key="index"
					:class="index % 2 === 0 ? 'bg1' : 'bg2'"
					@click="viewItem(item)">
					<view class="title">
						<view>{{ item.examName }}</view>
						<view class="delete-btn" @click.stop="deleteItem(item)">删除</view>
					</view>
					<view class="result">
						成绩 <text>{{ item.score }}分</text>（满分{{ item.fullScore }}分）
					</view>
					<view class="time">
						通过时间：{{ item.passDate }}
					</view>
					<view class="time">
						证书等级：{{ getCertificateGradeName(item.grade) || '无' }}
					</view>
					<view class="con">
						证书名称：{{ item.certificateName }}
					</view>
				</view>
			</view>
			<view v-else>
				<u-empty text="暂无证书" mode="list" margin-top="300"></u-empty>
			</view>
		</view>

		<!-- 删除提示弹框 -->
		<u-modal v-model="deleteTips" content="您确认要删除该证书吗?" :show-cancel-button="true" @confirm="deleteConfirm">
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				certificateList: [],
				deleteTips: false,
				curItem: '',
				gradeList: []
			}
		},
		onLoad(page) {
			if (page.id) {
				this.id = page.id;
			}
		},
		onShow() {
			this.getCertificateGrade();
			if (this.id) {
				this.getCertificateList(this.id);
			}
		},
		methods: {
			/**
			 * 获取证书等级
			 */
			getCertificateGrade() {
				this.$u.api.getDictdataUrl({ key:'certificate_grade' }).then(res=>{
					if(res.code == 200){						
						this.gradeList = res.data.map(item => {
							return {
								...item,
								value: item.text
							}
						});
					}
				});
			},
			/**
			 * 获取证书等级名称
			 * @param {Object} value
			 */
			getCertificateGradeName(value) {
				let name;
				this.gradeList.forEach(item => {
					if (item.value == value) {
						name = item.label
					}
				})
				return name;
			},
			/**
			 * 获取证书列表
			 */
			getCertificateList(id) {
				this.$u.api.skillTraining.getCertificateListApi({
					id
				}).then(res => {
					if (res.code === 200) {
						this.certificateList = res.data;
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				})
			},
			/**
			 * 删除证书
			 * @param {Object} item
			 */
			deleteItem(item) {
				this.deleteTips = true;
				this.curItem = item;
			},
			viewItem(item) {
				if (item.imgUrl) {
					uni.previewImage({
						current: 0,
						urls: item.imgUrl.split(','),
						indicator: 'number'
					})
				} else {
					this.$refs.uToast.show({
						title: '该证书无相片!',
						type: 'info'
					})
				}
			},
			/**
			 * 删除确认
			 */
			deleteConfirm() {
				this.deleteTips = false
				this.$u.api.skillTraining.deleteCertificateApi({
					id: this.curItem.id
				}).then(res => {
					if (res.code === 200) {
						this.$refs.uToast.show({
							title: '删除成功!',
							type: 'success'
						})
						this.getCertificateList(this.id);
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				})
			},
			/**
			 * 跳转到指定页面
			 * @param {Object} url
			 * @param {Object} params
			 */
			jumpPage(url, params) {
				this.$u.route({
					url,
					params
				});
			}
		}
	}
</script>

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