证书和成绩

h5_web/App.vue

@@ -15,4 +15,7 @@
 <style lang="scss">
 	/*每个页面公共css */
 	@import "uview-ui/index.scss";
+	#achievement .u-form-item--right__content__slot {
+		display: block;
+	}
 </style>

h5_web/pages.json

@@ -512,6 +512,32 @@
 				"navigationBarTextStyle": "white"
 			}
 
+		}, {
+			"path": "pages/skillsTraining/achievementCertificate/achievementCertificate",
+			"style": {
+				"navigationBarTitleText": "成绩和证书",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
+		}, {
+			"path": "pages/skillsTraining/addAchievementCertificate/addAchievementCertificate",
+			"style": {
+				"navigationBarTitleText": "录入成绩与证书",
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#3D5D4C",
+				"navigationBarTextStyle": "white"
+			}
+
+		}, {
+			"path": "pages/skillsTraining/certificateDetails/certificateDetails",
+			"style": {
+				"navigationBarTitleText": "证书详情",
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#3D5D4C",
+				"navigationBarTextStyle": "white"
+			}
+
 		}
 	],
 	"globalStyle": {

h5_web/pages/mine/skillsTraining/skillsTrainingDetails/skillsTrainingDetails.vue

@@ -31,7 +31,7 @@
 			</view>
 			<view class="details-content-course">
 				<view class="details-content-course-btn">
-					<view class="item">
+					<view class="item" @click="jumpPage('/pages/skillsTraining/achievementCertificate/achievementCertificate')">
 						<view>
 							<u-image src="../../../../static/img/certificate-icon.png" mode="aspectFill" width="40" height="50"></u-image>
 						</view>

h5_web/pages/mycode/mycode.vue

@@ -136,7 +136,7 @@
 							{
 								required: true,
 								message: '请选择就业状态',
-								trigger: ['change', 'blur']
+								trigger: ['change']
 							}
 						],
 						salaryRangeName: [
@@ -154,11 +154,9 @@
 					salaryRangeIndex: []
 				}
 			},
-			onLoad(page) {
+			onShow() {
 				this.getSalaryRange();
 				this.getEmploymentStatus();
-			},
-			onShow() {
 				this.getmemberinfo();
 			},
 			filters: {
@@ -178,6 +176,12 @@
 					this.$u.api.getmemberinfo().then(res => {
 						if (res.code == 200) {
 							this.memberinfo = res.data;
+							if (res.data.isShowButton) {
+								this.isHeaderShow = true
+								this.viewDetails()
+							} else {
+								this.isHeaderShow = false
+							}
 							if (this.memberinfo.auditStatus !== 2) {
 								this.memberinfo.id = null;
 								this.$refs.qrcode._clearCode();
@@ -186,20 +190,14 @@
 									this.$refs.qrcode._makeCode();
 								}, 300)
 							}
-							this.conditionForm.jobStatus = res.data.jobStatus;
-							this.conditionForm.salaryRange = res.data.salaryRange;
+							// this.conditionForm.jobStatus = res.data.jobStatus;
+							// this.conditionForm.salaryRange = res.data.salaryRange;
 							this.salaryRangeList.forEach((item, index) => {
 								if (res.data.salaryRange === item.value) {
 									this.salaryRangeIndex = [index]
 									this.conditionForm.salaryRangeName = item.label
 								}
 							})
-							if (res.data.isShowButton) {
-								this.isHeaderShow = true
-								this.viewDetails()
-							} else {
-								this.isHeaderShow = false
-							}
 						} else {
 							uni.showToast({
 								icon: 'none',
@@ -224,7 +222,7 @@
 					this.updateShow = true
 					setTimeout(() => {
 						this.$refs.conditionForm.setRules(this.conditionFormRules);
-					}, 200)
+					}, 0)
 				},
 				/**
 				 * 就业状态

h5_web/pages/notification/notification.vue

@@ -8,7 +8,7 @@
 		>
 			<!-- 选项卡 -->
 			<view class="notice-tab" slot="top">
-				<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="tabChange" bg-color="#f2f2f2" inactive-color="#000000" active-color="#709078" :bold="false" bar-width="40" bar-height="6" :active-item-style="{color: '#000000'}"></u-tabs>
+				<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="tabChange" bg-color="#f2f2f2" inactive-color="#000000" active-color="#709078" :bold="false" bar-width="40" bar-height="6" :active-item-style="{color: '#000000'}" is-scroll=""></u-tabs>
 			</view>
 			
 			<view class="notice-list">

h5_web/pages/skillsTraining/achievementCertificate/achievementCertificate.scss

@@ -0,0 +1,63 @@
+/*  成绩和证书  */
+.navbar-right {
+	font-size: 26rpx;
+	color: #fff;
+	padding-right: 30rpx;
+}
+.achievement {
+	padding: 32rpx 30rpx;
+	font-family: 'PingFangSC-Medium, PingFang SC';
+	
+	&-content {
+		
+		&-list {
+			
+			&-item {
+				padding: 30rpx 32rpx;
+				border-radius: 16rpx;
+				margin-bottom: 20rpx;
+				color: rgba($color: #fff, $alpha: 0.8);
+				font-size: 24rpx;
+				line-height: 40rpx;
+				
+				.title {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					font-size: 40rpx;
+					font-weight: bold;
+					color: #fff;
+					.delete-btn {
+						background: rgba(255, 255, 255, 0.7);
+						color: #FE5862;
+						font-weight: 400;
+						padding: 4rpx 22rpx;
+						font-size: 22rpx;
+						border-radius: 20rpx;
+					}
+				}
+				.result {
+					font-size: 26rpx;
+					font-weight: 500;
+					margin: 10rpx 0 6rpx;
+					text {
+						font-size: 30rpx;
+						margin-left: 10rpx;
+					}
+				}
+			}
+			.bg1 {
+				background: url(../../../static/img/certificate-bg-1.png);
+				background-size: 100% 100%;
+				background-position: center center;
+				background-repeat: no-repeat;
+			}
+			.bg2 {
+				background: url(../../../static/img/certificate-bg-2.png);
+				background-size: 100% 100%;
+				background-position: center center;
+				background-repeat: no-repeat;
+			}
+		}
+	}
+}

h5_web/pages/skillsTraining/achievementCertificate/achievementCertificate.vue

@@ -0,0 +1,78 @@
+<!-- 成绩和证书 -->
+<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>

h5_web/pages/skillsTraining/addAchievementCertificate/addAchievementCertificate.scss

@@ -0,0 +1,50 @@
+/*  录入成绩和证书  */
+.achievement {
+	padding: 20rpx 30rpx;
+	
+	&-form {
+		
+		&-result {
+			display: flex;
+			justify-content: space-between;
+			
+			.item {
+				width: calc(50% - 20rpx);
+			}
+		}
+		
+		.upload-button {
+			border: solid 1px #BABABA;
+			width: 184rpx;
+			height: 184rpx;
+			text-align: center;
+			color: #4B4B4B;
+			font-size: 22rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			&-icon {
+				width: 62rpx;
+				height: 64rpx;
+				margin: 46rpx auto 0;
+			}
+		}
+		.tips {
+			font-size: 20rpx;
+			color: #5F5F5F;
+			margin-top: 10rpx;
+		}
+	}
+	
+	&-submit {
+		width: calc(100% - 60rpx);
+		height: 80rpx;
+		line-height: 80rpx;
+		text-align: center;
+		background-color: #709078;
+		color: #fff;
+		font-size: 30rpx;
+		position: fixed;
+		bottom: 64rpx;
+	}
+}

h5_web/pages/skillsTraining/addAchievementCertificate/addAchievementCertificate.vue

@@ -0,0 +1,98 @@
+<!-- 录入成绩和证书 -->
+<template>
+	<view class="achievement" id="achievement">
+		<u-form :model="form" ref="uForm" class="achievement-form">
+			<u-form-item label="考试名称:" label-position="top" :required="true">
+				<u-input v-model="form.teamName" placeholder="请输入内容" />
+			</u-form-item>
+			<u-form-item label="成绩:" label-position="top" :required="true">
+				<view class="achievement-form-result">
+					<u-form-item label="得分" label-width="70" class="item" :border-bottom="false">
+						<u-input v-model="form.score" border type="number" placeholder="得分" />
+					</u-form-item>
+					<u-form-item label="满分" label-width="70" class="item" :border-bottom="false">
+						<u-input v-model="form.fullScore" border type="number" placeholder="满分" />
+					</u-form-item>
+				</view>
+			</u-form-item>
+			<u-form-item label="通过日期:" label-position="top" :required="true">
+				<u-input v-model="form.passedDate" placeholder="选择通过日期" type="select" @click="dateShow = true" border />
+			</u-form-item>
+			<u-form-item label="上传证书:" label-position="top" :border-bottom="false">
+				<u-form-item label="证书名称" label-width="140" :border-bottom="false">
+					<u-input v-model="form.certName" placeholder="请输入内容" border />
+				</u-form-item>
+				<u-form-item label="证书相片" label-width="140" :border-bottom="false">
+					<u-upload :action="upload.action" :custom-btn="true" :limitType="['png', 'jpg']" :max-count="2" @on-success="uploadSuccess" @on-remove="uploadRemove">
+						<view class="upload-button" slot="addBtn">
+							<view class="upload-button-icon">
+								<u-image src="../../../static/img/upload-add.png" mode="aspectFill" width="62"
+									height="64" />
+							</view>
+							<view>上传相片</view>
+						</view>
+					</u-upload>
+					<view class="tips">支持jpg.png格式</view>
+				</u-form-item>
+			</u-form-item>
+		</u-form>
+		<view class="achievement-submit">提交</view>
+		<u-calendar v-model="dateShow" mode="date" @change="dateChange"></u-calendar>
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				form: {
+					teamName: '',
+					score: '',
+					fullScore: '',
+					passedDate: '',
+					certName: '',
+					picList: []
+				},
+				dateShow: false,
+				upload: {
+					action: this.config.uploadUrl
+				}
+			}
+		},
+		methods: {
+			/**
+			 * 日历选择器选中触发
+			 * @param {Object} e
+			 */
+			dateChange(e) {
+				this.form.passedDate = e.result;
+			},
+			/**
+			 * 图片上传成功触发
+			 * @param {Object} res
+			 */
+			uploadSuccess(res) {
+				if (res.code === 200) {
+					this.form.picList.push(res.data.url)
+				} else {
+					this.$refs.uToast.show({
+						title: res.msg,
+						type: 'error'
+					})
+				}
+			},
+			/**
+			 * 移除图片下标
+			 * @param {Object} index
+			 */
+			uploadRemove(index) {
+				this.form.picList.splice(index, 1)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './addAchievementCertificate.scss';
+</style>

h5_web/pages/skillsTraining/certificateDetails/certificateDetails.vue

@@ -0,0 +1,23 @@
+<!-- 证书详情 -->
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>