Skip to content

C
CFFP-HB
Commit 4ab9eb24 by kyle
Options

学习认证列表以及认证详情页面

parent 79643adf
Showing with 296 additions and 10 deletions
App.vue
......@@ -36,6 +36,7 @@
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.container{
background-color: #FBFBFB;
......
api/api.ts
......@@ -40,6 +40,14 @@ export default {
// 讲师信息查询
lecturerQuery(params){
return request(`${apiURL}/college/lecturerQuery`, "POST", params)
},
// 学习认证列表
querySignupList(params){
return request(`${cffpURL}/signup/querySignupList`, "POST", params)
},
// 个人认证列表
userCertificateList(params){
return request(`${cffpURL}/signup/userCertificateList`, "POST", params)
}
}
pages.json
......@@ -70,6 +70,14 @@
"enablePullDownRefresh": false
}
},{
"path" : "pages/certifyDetail/certifyDetail",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"tabBar": {
......
pages/certifyDetail/certifyDetail.vue 0 → 100644
<template>
<view class="container">
<view class="certifyIntro">
CFFP是国内含金量较高的理财师认证之一，在银行、保险、证券、基金、财富管理公司等金融行业享有盛誉。 CFFP金融理财师证书是金融行业、尤其是银行招聘是最为看重的证书，同时也是转岗晋升的重要条件。近年来，由于全球金融的迅速发展，对CFFP的需求越来越多，以及取得CFFP证书后的高薪和令人尊敬的工作。
</view>
<view class="certifySignInfo">
<ul>
<li><text>报名时间：</text><text></text></li>
<li><text>考试费用：</text><text></text></li>
<li><text>培训费用：</text><text></text></li>
<li><text>培训课程：</text><text></text></li>
<li><text>培训方式：</text><text></text></li>
<li><text>考试方式：</text><text></text></li>
<li><text>及格分数：</text><text></text></li>
</ul>
<view class="eqrocdeContent">
<img src="" alt="" srcset="">
<text>请扫二维码进群学习~</text>
</view>
</view>
<!-- 荣誉证书 -->
<view class="certifyImgBox">
<h3>荣誉证书</h3>
<img src="" alt="" srcset="">
</view>
<!-- 考试计划 -->
<view class="examPlanning">
<h3>考试计划</h3>
<view class="content">
<h4>Ⅰ.考核类型</h4>
<view>理论考试：客观+主观题</view>
<h4>Ⅱ.考试内容</h4>
<view>考核内容包括：保险，财会，基金，信托</view>
<h4>Ⅲ.得分说明</h4>
<view>总分：客观题得分+主观题得分</view>
</view>
</view>
<!-- 考试认证流程 -->
<view class="examProcessContainer">
<h3>考试认证流程</h3>
<ul>
<li>
<view>
<img src="../../static/certifyProcess/onlineSign.png" alt="" srcset="">
</view>
<view>
<h4>线上报名</h4>
<view>点击右下方“立即报名”，提交信息，选择时间 并缴费后即可完成报名。</view>
</view>
</li>
<li>
<view>
<img src="../../static/certifyProcess/onlineExam.png" alt="" srcset="">
</view>
<view>
<h4>线上考试</h4>
<view>考试必须在电脑端进行，通过浏览器访问考试链 接进行考试。电脑须配置摄像头设备用于考前人 脸和身份验证、考中监考等。考试前请确认设备 网络、摄像头可正常运行！</view>
</view>
</li>
<li>
<view>
<img src="../../static/certifyProcess/getCertify.png" alt="" srcset="">
</view>
<view>
<h4>获得证书</h4>
<view>考试分及格后，即可获得证书</view>
</view>
</li>
<li>
<view>
<img src="../../static/certifyProcess/feedback.png" alt="" srcset="">
</view>
<view>
<h4>填写反馈</h4>
<view>培训完成后，请填写培训反馈，考试质量进行评估。</view>
</view>
</li>
</ul>
<!-- 报名按钮区域 -->
<view class="signBtnContent">
<view class="consultBtn">咨询客服</view>
<view class="signBtn">立即报名</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.container{
.certifyIntro{
padding: 20rpx 30rpx;
text-indent: 60rpx;
line-height: 1.5;
border-bottom: 1px solid #e4e4e4;
background-color: #fff;
}
.certifySignInfo{
padding: 20rpx 30rpx;
line-height: 2;
background-color: #fff;
margin-bottom: 10rpx;
}
.certifyImgBox,.examPlanning,.examProcessContainer{
padding: 20rpx 30rpx;
margin-bottom: 10rpx;
background-color: #fff;
}
.examPlanning{
h3{
font-size: 32rpx;
margin-bottom: 30rpx;
}
.content{
h4{
margin-bottom: 10rpx;
color: #333;
margin-left: 24rpx;
}
view{
margin-bottom: 20rpx;
margin-left: 65rpx;
color: #666;
}
}
}
.certifyImgBox{
h3{
font-size: 32rpx;
margin-bottom: 30rpx;
}
}
.examProcessContainer{
h3{
font-size: 32rpx;
margin-bottom: 30rpx;
}
li{
margin-bottom: 20rpx;
display: flex;
view{
img{
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
h4{
color: #333;
margin-bottom: 10rpx;
}
view{
color: #666;
}
}
}
}
.signBtnContent{
margin-top: 30rpx;
display: flex;
justify-content: space-around;
width: 100%;
.consultBtn{
display:flex;
justify-content: center;
align-items: center;
background-color: #EAEFFF;
color: #3671F4;
border-radius: 80rpx;
width: 40%;
height: 90rpx;
}
.signBtn{
display:flex;
justify-content: center;
align-items: center;
background-color: #3671F4;
color: #fff;
border-radius: 80rpx;
width: 40%;
height: 90rpx;
}
}
}
</style>
pages/myCertify/myCertify.vue
......@@ -8,34 +8,88 @@
<!-- tab内容 -->
<view class="tabContent">
<!-- 报名项目 -->
<view class="signListsBox">
<view class="signItem">
<view class="seriesNo">1</view>
<view class="certifyInfo">
<text>报名时间：2022。09.04</text>
<view>
<text>认证方向：CFFP高级认证</text>
<i class="iconfont icon-youjiantou"></i>
<view class="signItemsInfoBox" v-if="tabType===1">
<view class="signListsBox" v-if="signupInfos.length>0">
<view class="signItem" v-for="item in signupInfos" :key="item.cerNo">
<view class="seriesNo">{{item.cerNo}}</view>
<view class="certifyInfo">
<text>报名时间：{{item.signupDate}}</text>
<view>
<text>认证方向：{{item.cerName}}</text>
<i class="iconfont icon-youjiantou"></i>
</view>
</view>
</view>
</view>
<!-- 没有报名项目 -->
<view class="noSign" v-if="signupInfos.length==0">
<h4>暂没有报名项目！</h4>
</view>
</view>
<view class="getCertifyListsBox" v-if="tabType===2">
<view class="certifyListContent" v-if="userCertificates.length>0">
<view class="certifyInfoItem" v-for="item in userCertificates" :key="item.cerNo">
<h4>{{item.cerName}}</h4>
<view class="certifyImgBox">
<img :src="item.cerUrl" alt="" srcset="">
<view>认证编号：{{item.authenticationCode}}</view>
<view>有效期至：{{item.endDate}}</view>
</view>
</view>
</view>
<!-- 没有证书 -->
<view class="noSign" v-if="userCertificates.length==0">
<h4>暂没有取得证书！</h4>
</view>
</view>
</view>
</view>
</template>
<script>
import api from "../../api/api";
export default {
data() {
return {
tabType:1
tabType:1,
signupInfos:[],
userCertificates:[]
};
},
methods:{
switchTab(type){
this.tabType = type;
if(type===1){
this.querySignupList();
}else{
this.userCertificateList();
}
},
}
querySignupList(){
api.querySignupList({user_id:1}).then(res=>{
console.log(res);
if(res['success']){
this.signupInfos = res['data']['signupInfos']
}
})
},
userCertificateList(){
const param = {
queryType:1,
userId:1
}
api.userCertificateList(param).then(res=>{
console.log(res);
if(res['success']){
this.userCertificates = res['data']['userCertificates']
}
})
}
},
onLoad(){
this.querySignupList();
},
}
</script>
......@@ -93,6 +147,25 @@
}
}
.noSign{
text-align: center;
margin-top: 10%;
}
.getCertifyListsBox{
.certifyInfoItem{
background-color: #fff;
margin-bottom: 10rpx;
padding: 20rpx 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
img{
max-width: 60%;
height: auto;
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment