提交 a1b41e2a authored 作者: 王鹏飞's avatar 王鹏飞

chore: update

上级 bd1671bc
...@@ -12,37 +12,37 @@ export function getArticle(params) { ...@@ -12,37 +12,37 @@ export function getArticle(params) {
export function getArticleDetail(id) { export function getArticleDetail(id) {
return httpRequest.get(`/api/microservices/api/article/${id}/info`) return httpRequest.get(`/api/microservices/api/article/${id}/info`)
} }
export function formCommit(data) {
return httpRequest.post('/api/microservices/api/v3/apply/teacher-form', data)
}
// 获取轮播 // 获取轮播
export function getBanner(params) { export function getBanner(params) {
return httpRequest.get('/api/microservices/api/carousel/list', { params }) return httpRequest.get('/api/microservices/api/carousel/list', { params })
} }
// 发送验证码 // 发送验证码
export function sendCheckedCode(data) { export function sendCode(data) {
return httpRequest.post('/api/usercenter/user/send-code', data) return httpRequest.post('/api/usercenter/user/send-code', data)
} }
// 注册 // 注册
export function register(data) { export function register(data) {
return httpRequest.post('/api/usercenter/user/register', data) return httpRequest.post('/api/usercenter/user/register', data)
} }
// 注册 // 注册并登录
export function register2(data) { export function registerAndLogin(data) {
return httpRequest.post('/api/usercenter/user/register-and-login-by-mobile', data) return httpRequest.post('/api/usercenter/user/register-and-login-by-mobile', data)
} }
// 获取用户信息 // 获取用户信息
export function getUserInfo() { export function getUser() {
return httpRequest.get('/api/passport/account/get-user-info') return httpRequest.get('/api/passport/account/get-user-info')
} }
// 表单回显 // 提交报名信息
export const getFormDetail = (params) => { export function submitForm(data) {
return httpRequest.get('/api/microservices/api/v3/apply/teacher-form-detail', { params }) return httpRequest.post('/api/microservices/api/v3/apply/student-form', data)
} }
// 获取报名信息
// 下单 export function getFormDetail(params) {
export function getOrder(data) { return httpRequest.get('/api/microservices/api/v3/apply/student-form-detail', { params })
return httpRequest.post('/api/microservices/api/v3/apply/unified-order', data) }
// 创建订单
export function createOrder(data) {
return httpRequest.post('/api/microservices/api/v3/apply/student-unified-order', data)
} }
// 查看订单状态 // 查看订单状态
export function checkPay(id) { export function checkPay(id) {
...@@ -50,20 +50,17 @@ export function checkPay(id) { ...@@ -50,20 +50,17 @@ export function checkPay(id) {
} }
// 支付完成通知 // 支付完成通知
export function payEnd(data) { export function payEnd(data) {
return httpRequest.post('/api/microservices/api/v3/apply/pay-end', data) return httpRequest.post('/api/microservices/api/v3/apply/student-pay-end', data)
} }
// 更新用户信息 // 更新用户信息
export function updateUserInfo(data) { export function updateUser(data) {
return httpRequest.post('/api/usercenter/user/update-user', data) return httpRequest.post('/api/usercenter/user/update-user', data)
} }
// 获取证书 // 获取证书
export function getCard(params) { export function getCertCard(params) {
return httpRequest.get('/api/cert/api/v1/cert/detail', { params }) return httpRequest.get('/api/cert/api/v1/cert/detail', { params })
} }
// 提交留咨信息
/** export function submitApplicationForm(data) {
* 提交留咨信息
*/
export function postNes(data) {
return httpRequest.post('/api/enrollment/v1.0/applications', data) return httpRequest.post('/api/enrollment/v1.0/applications', data)
} }
<template>
<el-button v-bind="$attrs" :disabled="currentDisabled" @click="start">{{ currentValue }}</el-button>
</template>
<script>
export default {
name: 'Countdown',
props: {
step: { type: Number, default: 1000 },
disabled: { type: Boolean, default: false },
seconds: { type: Number, default: 60 },
defaultValue: { type: String, default: '获取验证码' },
},
data() {
return {
currentDisabled: false,
currentSeconds: 0,
timer: null,
}
},
watch: {
disabled: {
immediate: true,
handler(value) {
this.currentDisabled = value
},
},
},
computed: {
currentValue() {
const longTime = this.seconds - this.currentSeconds
return longTime < this.seconds ? `${longTime}秒后重发` : this.defaultValue
},
},
methods: {
genTimer() {
this.clearTimer()
this.timer = setInterval(() => {
this.currentSeconds++
if (this.currentSeconds === this.seconds) {
this.stop()
}
}, this.step)
},
clearTimer() {
this.timer && clearInterval(this.timer)
},
start() {
this.currentDisabled = true
this.genTimer()
this.$emit('start')
},
stop() {
this.clearTimer()
this.currentSeconds = 0
this.currentDisabled = false
this.$emit('stop')
},
},
}
</script>
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
<template v-if="Object.values(user).length"> <template v-if="Object.values(user).length">
<div class="login-name"> <div class="login-name">
<span class="name">{{ user.realname || user.username }}</span> <span class="name">{{ user.realname || user.username }}</span>
&nbsp;&nbsp;
<span @click="handleLogout">退出</span> <span @click="handleLogout">退出</span>
</div> </div>
</template> </template>
...@@ -45,7 +46,7 @@ export default { ...@@ -45,7 +46,7 @@ export default {
{ name: '首页', path: '/index' }, { name: '首页', path: '/index' },
{ name: '通知公告', path: '/news' }, { name: '通知公告', path: '/news' },
{ name: '商务数据分析技术-智能数据分析与实战应用', path: '/product' }, { name: '商务数据分析技术-智能数据分析与实战应用', path: '/product' },
{ name: '技能培训', path: '/teacher' }, { name: '技能培训', path: '/train' },
// { name: '教科研服务', path: '/service' }, // { name: '教科研服务', path: '/service' },
{ name: '认证中心', path: '/attestation' }, { name: '认证中心', path: '/attestation' },
], ],
......
<template>
<div class="reg-form-box">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm forms">
<el-form-item label="学校" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择学校" class="width100">
<el-option label="学校一" value="shanghai"></el-option>
<el-option label="学校二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="ruleForm.name" placeholder="请输入您的姓名"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="ruleForm.phone" placeholder="请输入您的手机号"></el-input>
</el-form-item>
<el-form-item label="验证码" prop="code">
<el-input v-model="ruleForm.phone" placeholder="请输入您的手机号"></el-input>
</el-form-item>
<el-form-item label="身份证号" prop="codeId">
<el-input v-model="ruleForm.codeId" placeholder="请输入您的身份证号"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" placeholder="请输入您的密码"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" placeholder="请输入您的密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')" class="sub-btn">立即注册</el-button>
<!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
const checkPhone = (rule, value, callback) => {
const reg = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/
if (!reg.test(value)) {
return callback(new Error())
}
}
const checkCodeId = (rule, value, callback) => {
const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
if (!reg.test(value)) {
return callback(new Error())
}
}
const validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码!'))
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass')
}
callback()
}
}
const validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}
return {
ruleForm: {
name: '',
region: '',
phone: '',
codeId: '',
delivery: false,
type: [],
checkPass: '',
pass: '',
code: ''
},
rules: {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
region: [{ required: true, message: '请选择学校', trigger: 'change' }],
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ required: true, message: '手机号不正确', validator: checkPhone, trigger: 'blur' }
],
code: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ validator: validatePass, trigger: 'blur' }
],
codeId: [
{ required: true, message: '请输入身份证号', trigger: 'blur' },
{ required: true, message: '身份证号不正确', validator: checkCodeId, trigger: 'blur' }
],
pass: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ validator: validatePass2, trigger: 'blur' }
]
}
}
},
methods: {
isRules(n) {
console.log(n)
},
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert('submit!')
} else {
console.log('error submit!!')
return false
}
})
},
resetForm(formName) {
this.$refs[formName].resetFields()
}
}
}
</script>
<style lang="scss" scoped>
.reg-form-box {
width: 380px;
margin: 0 auto;
padding: 24px 0;
.width100 {
width: 100%;
}
}
::v-deep {
.forms {
i {
font-size: 20px;
}
input {
border-radius: 4px;
}
}
}
.sub-btn {
width: 270px;
height: 40px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #c01540 100%);
border-radius: 4px;
}
</style>
...@@ -42,9 +42,9 @@ export default { ...@@ -42,9 +42,9 @@ export default {
}, },
methods: { methods: {
// 获取证书列表 // 获取证书列表
handleGetCard() { handlegetCertCard() {
const params = { project_prefix: 'x1' } const params = { project_prefix: 'x1' }
api.getCard(params).then((res) => { api.getCertCard(params).then((res) => {
this.cardList = res.data?.list this.cardList = res.data?.list
}) })
}, },
...@@ -59,7 +59,7 @@ export default { ...@@ -59,7 +59,7 @@ export default {
}, },
mounted() { mounted() {
// 获取证书 // 获取证书
this.handleGetCard() this.handlegetCertCard()
}, },
} }
</script> </script>
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
</template> </template>
<script> <script>
import { postNes } from '@/api/article' import { submitApplicationForm } from '@/api/article'
export default { export default {
components: {}, components: {},
data() { data() {
...@@ -66,7 +66,7 @@ export default { ...@@ -66,7 +66,7 @@ export default {
} }
} }
this.form = Object.assign(this.form, { comment: `#咨询产品:${this.f1};#院校名称:${this.f2};#院系:${this.f3}` }) this.form = Object.assign(this.form, { comment: `#咨询产品:${this.f1};#院校名称:${this.f2};#院系:${this.f3}` })
postNes(this.form) submitApplicationForm(this.form)
.then((res) => { .then((res) => {
if (res && res.status === 200) { if (res && res.status === 200) {
this.$message({ this.$message({
......
<template>
<div class="book-detail-box content-max-width">
<!-- <breadcrumb class="content-max-width crumb" :data="crumbData"/> -->
<div class="bool-det-top">
<div class="item-box">
<img src="https://zws-imgs-pub.ezijing.com/static/public/7c63bd40600a040f867fe4db9014fb7c.png" />
<div class="right-content">
<div class="title">《金融产品数字化营销职业技能等级认证教材》(初级)</div>
<div class="des-box">
<p>
<span>教材简介:</span
><i
>本系列教材紧跟金融各行业数字化转型和职业教育的人才培养发展的需求,随行业的数字化转型、数字化营销工具和专业升级等情况及时动态更新。教材设置了思维导图、学习目标、案例实践、问题思考等板块,以职业技能等级标准为依据,结合行业企业用人技能要求的紧迫程度,设计教材内容和框架体系。确定教材各案例实践涵盖的职业技能等级工作任务与就业面向相匹配,以真实案例实践为驱动,促进学生深刻掌握先进技术能力。</i
>
</p>
<p class="align-r"><span>定价:</span><i>¥39</i></p>
<p class="align-r cen"><span>数量:</span><input type="text" /></p>
<div class="buy-btn">购买</div>
</div>
</div>
</div>
<div class="v-code-box" v-if="false">
<div class="block"></div>
<div class="text">手机扫码浏览</div>
</div>
</div>
<div class="book-det-bottom">
<div class="fix-left">
<div class="material">
<div class="title">教材介绍</div>
<div class="content">
本系列教材紧跟金融各行业数字化转型和职业教育的人才培养发展的需求,随行业的数字化转型、数字化营销工具和专业升级等情况及时动态更新。教材设置了思维导图、学习目标、案例实践、问题思考等板块,以职业技能等级标准为依据,结合行业企业用人技能要求的紧迫程度,设计教材内容和框架体系。确定教材各案例实践涵盖的职业技能等级工作任务与就业面向相匹配,以真实案例实践为驱动,促进学生深刻掌握先进技术能力。
</div>
<div class="info">
<p><span>作者:</span>赵瑾龙</p>
<p><span>出版时间:</span>2020.10.10</p>
<p><span>ISBN:</span>2020.10.19—2020.11.20</p>
<p><span>发行日期:</span>2020.20.20</p>
</div>
</div>
<div class="catalog">
<div class="title">目录</div>
<ul>
<li>
<div class="chapter">第一章</div>
<!-- @click="goChapter" -->
<div class="node">第一节</div>
</li>
<li>
<div class="chapter">第一章</div>
<div class="node">第一节</div>
</li>
<li>
<div class="chapter">第一章</div>
<div class="node">第一节</div>
</li>
</ul>
</div>
</div>
<div class="author">
<div class="title">作者</div>
<div class="item">
<div class="info-box">
<img src="https://zws-imgs-pub.ezijing.com/static/public/f064b2cb83039e1d4754993167d73864.png" />
<div class="info">
<div class="name">赵瑾龙</div>
<div class="xx">研究院</div>
</div>
</div>
<div class="intr">
<div class="name">简介:</div>
<div class="text">
赵瑾龙先生是中国人民银行研究生部经济学博士,现任香港致富证券有限公司首席经济学家,兼任研究院院长、清华大学五道口金融学院硕士生导师、紫荆-印第安纳大学kelley商学院金融学硕士项目责任教授,他主要研究方向是宏观经济、货币政策和投资策略。
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import breadcrumb from '@/components/breadcrumb.vue'
export default {
components: {
breadcrumb,
},
data() {
return {
crumbData: [
{
path: '/',
name: '首页',
},
{
path: '/textBook',
name: '教材中心',
},
{
name: '金融数字化营销',
},
],
}
},
methods: {
goChapter() {
this.$router.push({
path: '/textBook/chapter',
})
},
},
}
</script>
<style lang="scss" scoped>
.content-max-width {
width: 1200px;
margin: 0 auto;
}
.buy-btn {
width: 150px;
height: 36px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #c01540 100%);
border-radius: 4px;
text-align: center;
font-size: 14px;
color: #ffffff;
line-height: 36px;
margin-top: 16px;
cursor: pointer;
}
.book-det-bottom {
display: flex;
.catalog {
.title {
font-size: 18px;
font-weight: bold;
color: #c80046;
line-height: 25px;
margin-bottom: 24px;
}
ul {
li {
width: 729px;
padding: 16px 0;
border-top: 1px solid #eee;
.chapter {
font-size: 18px;
font-weight: bofld;
color: #262626;
line-height: 25px;
}
.node {
font-size: 14px;
color: #7d7d7d;
line-height: 20px;
margin-top: 12px;
cursor: pointer;
}
}
}
}
.author {
margin-left: auto;
.title {
font-size: 18px;
font-weight: bold;
color: #c80046;
line-height: 25px;
margin-bottom: 24px;
}
.item {
width: 280px;
border-top: 1px solid #eee;
margin-top: 24px;
.info-box {
padding-top: 16px;
display: flex;
align-items: center;
img {
width: 80px;
height: 80px;
}
.info {
margin-left: 16px;
.name {
font-size: 18px;
font-weight: bold;
color: #2b2b2b;
line-height: 25px;
}
.xx {
font-size: 14px;
color: #888888;
line-height: 20px;
margin-top: 12px;
}
}
}
.intr {
margin-top: 16px;
display: flex;
.name {
font-size: 14px;
font-weight: bold;
color: #262626;
line-height: 20px;
white-space: nowrap;
}
.text {
font-size: 14px;
color: #7d7d7d;
line-height: 20px;
}
}
}
}
}
.bool-det-top {
display: flex;
padding-top: 24px;
}
.book-detail-box {
.v-code-box {
width: 136px;
margin-left: 24px;
// margin-top: 24px;
.block {
width: 136px;
height: 136px;
background: #d8d8d8;
border: 1px solid #979797;
}
.text {
font-size: 14px;
color: #222222;
line-height: 20px;
margin-top: 8px;
text-align: center;
}
}
.item-box {
// padding: 24px 0;
// border-bottom: 1px solid #eee;
display: flex;
img {
width: 258px;
height: 143px;
display: block;
}
.right-content {
margin-left: 24px;
.title {
font-size: 18px;
font-weight: bold;
color: #c01540;
line-height: 25px;
}
.des-box {
// width: 523px;
margin-top: 24px;
p {
input {
width: 70px;
height: 40px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
padding-left: 10px;
}
// text-align: right;
font-size: 14px;
color: #666666;
line-height: 20px;
margin-bottom: 8px;
display: flex;
&.cen {
align-items: center;
}
&.align-r {
text-align: right;
}
span {
width: 70px;
font-size: 14px;
font-weight: bold;
color: #222222;
line-height: 20px;
white-space: nowrap;
}
i {
width: 523px;
font-style: normal;
font-size: 14px;
color: #717171;
line-height: 20px;
text-align: left;
}
}
}
.detail-btn {
color: #fff;
text-align: center;
line-height: 36px;
width: 96px;
height: 36px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #c01540 100%);
border-radius: 4px;
margin-top: 16px;
}
}
}
}
.crumb {
padding-top: 24px;
}
.material {
width: 729px;
margin: 56px 0 30px;
.title {
line-height: 57px;
border-bottom: 1px solid #ddd;
font-size: 18px;
font-weight: bold;
color: #c80046;
}
.content {
font-size: 14px;
color: #717171;
line-height: 20px;
margin-top: 16px;
}
.info {
margin-top: 16px;
font-size: 14px;
color: #262626;
line-height: 20px;
p {
margin-bottom: 14px;
}
span {
font-weight: bold;
}
}
}
</style>
<template>
<div>
<img src="https://webapp-pub.ezijing.com/project/x-new/ser-banner.png" class="banner" />
<section class="section">
<h1 class="pt-100">教材中心</h1>
<p class="describe">
“金融产品数字化营销职业技能等级证书”的系列教材,由紫荆教育组织国内数字化营销理论研究的顶级院校学者教授,以及金融行业龙头机构的资深专家和一线实践精英携手编著,具有理论扎实、观点前沿、讲解详实、案例丰富、流程科学、实操精准的特点,在国内金融产品数字化营销领域,尚属首创。<br />
项目导学:以思维导图的形式勾勒出本项目的核心知识点,便于学生整体把握项目的主要知识内容和学习要求。<br />
学习目标:明确给出任务的知识目标和能力目标,便于学生对照检查学习效果。<br />
任务导入:基于工作领域职业能力分析,精心设计典型工作任务,明确提出任务要求,引导学生开展典型、真实的职业实践。<br />
任务实施:以任务为导向,以工作过程为主线,设计完成典型工作任务的业务“流程图”。<br />
知识链接:围绕学习目标,针对“任务实施”所需知识,以“必需、够用”为原则,选取核心知识点。<br />
项目测评:依据金融产品数字化营销职业技能等级标准实务考核要求,设计重要知识点测评试题,方便学生及时检验项目实务知识学习效果。
</p>
<img
src="https://webapp-pub.ezijing.com/project/x-new/ser-img1.png"
style="display: block; width: 908px; margin: 0 auto 80px" />
<img src="https://webapp-pub.ezijing.com/project/x-new/ser-img2.png" />
<h1 class="pt-80">课程中心</h1>
<p class="describe">
信息化、数字化教学资源是促进书证融通的重要因素之一,紫荆教育信息化、数字化资源立足“辅教辅学”的功能定位,遵循“一体化设计、结构化课程、颗粒化资源”的建构逻辑完成资源整合,通过提供教学视频、PPT、课程大纲、题库、试卷、实践案例等,使教师教学准备工作更加便利化,帮助教师“好上课”;
通过符合学生年龄特点、兴趣爱好的图文、音频等资源,引发学生学习兴趣,帮助老师将重难点课程内容化抽象为形象,通过项目、任务激发学生学习动机,使得被动接受的学生主动获取知识,从而引发学生自主学习能力、自主探索能力,提升课堂实施的有效性,帮助教师“上好课”。
</p>
<div class="card-list">
<div class="card-list_item">
<div class="item-title">线上课程研发</div>
<div class="item-con1">课程内容设置<br />课程师资匹配<br />课程制作方案</div>
</div>
<div class="card-list_item">
<div class="item-title">课程制作</div>
<div class="item-con2">
<p>
课程录制&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;课程剪辑<br />
课程编辑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;课程成片
</p>
<div class="tips">(课程录制,满足各种需求。不同形式拥有专属的场地)</div>
</div>
</div>
<div class="card-list_item">
<div class="item-title">线下课程开发</div>
<div class="item-con2">
<p>
教学设计&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;教务计划<br />
实施执行方案
</p>
<div class="tips">(全国三大教学基地,10多间不同需求的教室与会议室)</div>
</div>
</div>
</div>
<h1 class="pt-100">双创中心</h1>
<p class="describe">
紫荆教育融合校企资源,打造与传统教学模式不同的创新能力培养体系,从而促进教育体系的改革创新,并联合院校申报双创项目。
双创项目建设包括创新训练项目、创业训练项目和创业实践项目三类。
</p>
<div class="card-center">
<div class="card-center_item">
<img src="https://webapp-pub.ezijing.com/project/x-new/ser-img3.png" />
<div class="item-con">
<h2>创新训练项目</h2>
<p>
在校生个人或团队在导师指导下,自主完成创新性研究项目设计、研究项目实施、研究报告撰写、成果(学术)交流等工作。
</p>
</div>
</div>
<div class="card-center_item">
<div class="item-con">
<h2>创业训练项目</h2>
<p>在校生团队在导师指导下,完成商业计划书编制、可行性研究、企业模拟运行、创业报告撰写等工作。</p>
</div>
<img style="margin-top: 53px" src="https://webapp-pub.ezijing.com/project/x-new/ser-img4.png" />
</div>
<div class="card-center_item">
<img src="https://webapp-pub.ezijing.com/project/x-new/ser-img5.png" />
<div class="item-con">
<h2>创业实践项目</h2>
<p>
学生团队在学校导师和企业导师共同指导下,基于前期创新创业训练项目的成果,开发具有市场前景的创新性产品或者服务,开展创业实践活动。
</p>
</div>
</div>
</div>
<h1 class="pt-100">科研中心</h1>
<p class="describe">
在科研创新方面紫荆教育和学校共同成立“科研创新”专家组,由教科研专家、行业/企业资深人士、学校骨干教师等组成,专门承接教育科研项目的选题、申报,研究与实施等。
</p>
<img style="margin-bottom: 100px" src="https://webapp-pub.ezijing.com/project/x-new/ser-foot.png" />
</section>
</div>
</template>
<script>
export default {
components: {},
data() {
return {}
},
methods: {},
}
</script>
<style lang="scss" scoped>
.section {
width: 1200px;
margin: 0 auto;
}
.banner {
width: 100%;
display: block;
}
.pt-80 {
padding-top: 80px;
}
.pt-100 {
padding-top: 100px;
}
h1 {
font-size: 32px;
font-weight: bold;
color: #333333;
line-height: 34px;
text-align: center;
margin-bottom: 50px;
}
.describe {
font-size: 18px;
color: #666666;
line-height: 36px;
margin-bottom: 50px;
}
.describe-img {
width: 100%;
display: block;
}
.card-list {
display: flex;
justify-content: space-between;
.card-list_item {
width: 380px;
height: 220px;
background-color: #fff;
}
.item-title {
line-height: 50px;
background: #aa1941;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #ffffff;
}
.item-con1 {
font-size: 18px;
color: #424242;
line-height: 36px;
text-align: center;
margin-top: 37px;
}
.item-con2 {
p {
font-size: 18px;
color: #424242;
line-height: 36px;
text-align: center;
margin-top: 37px;
}
.tips {
font-size: 14px;
color: #666666;
margin-top: 25px;
text-align: center;
}
}
}
.card-center {
display: flex;
justify-content: space-between;
.card-center_item {
background-color: #fff;
width: 380px;
height: 420px;
}
.item-con {
padding: 25px 22px 0;
h2 {
font-weight: bold;
font-size: 18px;
color: #424242;
line-height: 30px;
}
p {
font-size: 18px;
color: #666;
line-height: 30px;
}
}
}
</style>
export default [
{
id: '202301',
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2023年第一期“1+X金融产品数字化营销职业技能等级证书(中级)”技能培训班',
time: '2023年3月18-19日',
count: 100,
activeIndex: 1,
type: 1,
addr: '线上直播',
qq: '461760646',
contact: '王老师',
contact_number: '18500913837',
desc: '贯彻落实教育部等四部门印发《关于在院校实施“1+X学历证书+若干职业技能等级证书”制度试点方案》要求,保障“金融产品数字化营销职业技能等级证书“试点工作的有效开展,分享1+X试点实践经验,促进院校教学和培训工作有序落地。',
content: `<table border="1" cellpadding="10" cellspacing="0" style="width: 700px;">
<tbody>
<tr>
<td valign="center" width="85">
<p align="center">日期</p>
</td>
<td valign="center" width="99">
<p align="center">时间</p>
</td>
<td valign="center" width="184">
<p align="center">&nbsp;</p>
</td>
<td valign="center" width="444">
<p align="center">内容</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">主讲人</p>
</td>
</tr>
<tr>
<td rowspan="6" valign="center" width="85">
<p align="center">3月18日</p>
</td>
<td rowspan="4" valign="center" width="99">
<p align="center">上午</p>
</td>
<td valign="center" width="184">
<p align="center">09:00-09:05</p>
</td>
<td valign="center" width="444">
<p align="center">开班</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">王鑫</p>
</td>
</tr>
<tr>
<td valign="center" width="184">
<p align="center">09:05-09:30</p>
</td>
<td valign="center" width="444">
<p align="center">公司领导致辞</p>
<p align="center">2022年工作总结及2023年工作规划</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">金梅</p>
</td>
</tr>
<tr>
<td valign="center" width="184">
<p align="center">09:30-10:00</p>
</td>
<td valign="center" width="444">
<p align="center">赛证融通-2023年全国大学生商业数据分析与应用大赛</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">张艺驰</p>
</td>
</tr>
<tr>
<td valign="center" width="184">
<p align="center">10:00-12:00</p>
</td>
<td valign="center" width="444">
<p>书证融通-实践技能人才培养思路</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">宁孟强</p>
</td>
</tr>
<tr>
<td rowspan="2" valign="center" width="99">
<p align="center">下午</p>
</td>
<td valign="center" width="184">
<p align="center">14:00-15:30</p>
</td>
<td valign="center" width="444">
<p>课证融通-金融数字化营销课程设计思路</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">魏曼</p>
</td>
</tr>
<tr>
<td valign="center" width="184">
<p align="center">15:30-17:00</p>
</td>
<td valign="center" width="444">
<p>金融产品数字化营销实训平台功能演示</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">段小飞</p>
</td>
</tr>
<tr>
<td rowspan="2" valign="center" width="85">
<p align="center">3月19日</p>
</td>
<td valign="center" width="99">
<p align="center">上午</p>
</td>
<td valign="center" width="184">
<p align="center">09:00-12:00</p>
</td>
<td valign="center" width="444">
<p>案例教学-以某商业银行理财产品为例</p>
<p>1.&nbsp;商业银行个人理财产品介绍</p>
<p>2.&nbsp;商业银行财富顾问岗位职责介绍</p>
<p>3.&nbsp;案例背景分析</p>
<p>4.&nbsp;案例任务设计</p>
<p>5.&nbsp;数据集成与数据集理解</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">杜奎</p>
</td>
</tr>
<tr>
<td valign="center" width="99">
<p align="center">下午</p>
</td>
<td valign="center" width="184">
<p align="center">14:00-17:00</p>
</td>
<td valign="center" width="444">
<p>案例教学-以某商业银行理财产品为例</p>
<p>1.&nbsp;打造客户标签体系</p>
<p>2.&nbsp;动态筛选目标客户</p>
<p>3.&nbsp;用户旅程设计与配置</p>
<p>4.&nbsp;营销报表呈现与优化</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">杜奎</p>
</td>
</tr>
<tr>
<td colspan="3" valign="center" width="368">
<p>另行通知</p>
</td>
<td colspan="2" valign="center" width="581">
<p align="center">在线课程考试</p>
</td>
</tr>
</tbody>
</table>`,
},
{
id: '2022002',
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '清控紫荆2022年1+X金融产品数字化营销证书试点工作说明会',
time: '2022年5月23日',
count: 100,
activeIndex: 3,
type: 1,
addr: '线上直播',
qq: '722810013',
contact: '王老师',
contact_number: '18500913837',
desc: '贯彻落实教育部等四部门印发《关于在院校实施“1+X学历证书+若干职业技能等级证书”制度试点方案》要求,保障“金融产品数字化营销职业技能等级证书“试点工作的有效开展,分享1+X试点实践经验,促进院校教学和培训工作有序落地。',
content: `
<table border="1" cellpadding="10" cellspacing="0" style="width: 700px;">
<tbody>
<tr>
<td>09:15-09:30</td>
<td>
广西壮族自治区教育厅 领导致辞<br />
清控紫荆教育 资深副总裁金梅致辞<br />
广西金融职业技术学院 党委书记沈立君致辞
</td>
</tr>
<tr>
<td>09:30-09:55</td>
<td>
<h4>主题一:数字经济与金融机构创新</h4>
分享嘉宾:清控紫荆数字经济研究院院长 付喆博士
</td>
</tr>
<tr>
<td>09:55-10:20</td>
<td>
<h4>主题二:金融机构数字化营销实践</h4>
分享嘉宾:深圳大学银行业数字金融实验室资深研究员 葛蒙博士(拟邀)
</td>
</tr>
<tr>
<td>10:20-11:10</td>
<td>
<h4>主题三:金融业数字化人才培养探索与实践</h4>
分享嘉宾:广西金融职业技术学院 党委书记沈立君<br />
辽宁金融职业学院金融学院 副院长孟庆海
</td>
</tr>
<tr>
<td>11:10-11:15</td>
<td>清控紫荆教育与牵头院校授牌仪式</td>
</tr>
<tr>
<td>11:15-11:30</td>
<td>
<h4>主题四:“金融产品数字化营销职业技能标准”解读及实施运营</h4>
分享嘉宾:清控紫荆教育资深副总裁 金梅
</td>
</tr>
<tr>
<td>11:30-12:10</td>
<td>
<h4>主题五:“1+X证书”岗课赛证融通实施实践分享</h4>
分享嘉宾:浙江金融职业学院金融管理学院 院长董瑞丽<br />
北京财贸职业学院金融学院 院长胡君晖<br />
长春金融高等专科学校金融学院 院长施晓春
</td>
</tr>
<tr>
<td>12:10-12:30</td>
<td>Q&A</td>
</tr>
</tbody>
</table>`,
},
{
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2022年第3期“1+X金融产品数字化营销职业技能等级证书(中级)”技能培训班',
time: '待定',
count: '待定',
activeIndex: 2,
id: '202202222',
},
{
id: '2022001',
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2022年1+X金融产品数字化营销职业技能等级证书广西公益技能培训',
time: '2022年4月13日',
count: 100,
activeIndex: 3,
type: 1,
addr: '线上直播',
qq: '722810013',
contact: '王老师',
contact_number: '18500913837',
content: `<p>1. 职业技能等级标准解读(中级)</p>
<p>2.证书教学/实训平台/考核标准介绍</p>
<p>3.金融产品数字化营销中级内容串讲</p>`,
},
{
id: '202202',
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2022年第2期“1+X金融产品数字化营销职业技能等级证书(中级)”技能培训班',
time: '01月18日-01月20日',
count: 100,
activeIndex: 3,
addr: '线上直播',
content: `
<table border="1" cellpadding="10" cellspacing="0" style="width: 700px; text-align: center">
<tbody>
<tr height="142">
<td colspan="5" style="font-size: 18pt; font-weight: 700">金融产品与数字化营销(中级)</td>
</tr>
<tr>
<td>日期</td>
<td>时间</td>
<td></td>
<td>内容</td>
<td class="et5" style="vertical-align: middle; white-space: nowrap">主讲人</td>
</tr>
<tr>
<td rowspan="4">1月18日</td>
<td rowspan="3">上午</td>
<td>09:30-09:40</td>
<td>开班-2021年度试点工作成效及规划</td>
<td style="vertical-align: middle; white-space: nowrap; text-align: center">王鑫</td>
</tr>
<tr>
<td>09:40-10:00</td>
<td>1+X证书制度课证融通实践探索-优秀试点院校分享</td>
<td class="et10" style="vertical-align: middle; white-space: nowrap; text-align: center"></td>
</tr>
<tr>
<td>10:00-11:30</td>
<td>认识市场营销<br />市场、消费市场、STP、品牌</td>
<td rowspan="4">马庆胜</td>
</tr>
<tr>
<td>下午</td>
<td>14:30-17:00</td>
<td>数字化营销<br />产品、价格决策、分销、促销决策</td>
</tr>
<tr>
<td rowspan="2">1月19日</td>
<td>上午</td>
<td>09:30-11:30</td>
<td>数字化营销方案的流程设计<br />客户关系管理、客户画像</td>
</tr>
<tr>
<td>下午</td>
<td>14:30-17:00</td>
<td>数字化营销方案的流程设计<br />数字信息化传播、建立数字化关系、社群经营变现</td>
</tr>
<tr>
<td rowspan="7">1月20日</td>
<td rowspan="3">上午</td>
<td rowspan="3">09:00-11:30</td>
<td>金融产品和金融营销</td>
<td rowspan="8">于海颖</td>
</tr>
<tr>
<td>银行产品分类及特点</td>
</tr>
<tr>
<td>保险产品分类及特点</td>
</tr>
<tr>
<td rowspan="4">下午</td>
<td rowspan="3">14:00-16:30</td>
<td>证券产品分类及特点</td>
</tr>
<tr>
<td>金融产品数字化营销理念</td>
</tr>
<tr>
<td>基于特定人群的数字化营销方案设计</td>
</tr>
<tr>
<td>16:30-17:00</td>
<td>1+X实训平台演示</td>
</tr>
<tr>
<td>另行通知</td>
<td></td>
<td></td>
<td>在线课程考试</td>
</tr>
</tbody>
</table>`,
},
{
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2022年第1期“1+X金融产品数字化营销职业技能等级证书(初级)”技能培训班',
time: '01月11日-01月13日',
count: 100,
activeIndex: 3,
id: '202201',
content: `<table border="1" cellpadding="10" cellspacing="0" style="width: 700px; text-align: center">
<tbody>
<tr class="firstRow">
<td>日期</td>
<td colspan="2">时间</td>
<td>内容</td>
<td>主讲人</td>
</tr>
<tr>
<td rowspan="3">1月11日</td>
<td rowspan="2">上午</td>
<td>09:30-09:40</td>
<td width="316">开班仪式</td>
<td width="67">王鑫</td>
</tr>
<tr style="height: 32.13px">
<td>09:40-11:30</td>
<td align="left">任务一:<br />认识市场营销<br />市场、消费市场、STP</td>
<td rowspan="3">马庆胜</td>
</tr>
<tr>
<td>下午</td>
<td width="84">14:30-17:00</td>
<td align="left">任务一:<br />认识市场营销<br />产品、价格决策、分销、促销决策</td>
</tr>
<tr>
<td rowspan="2">1月12日</td>
<td width="44">上午</td>
<td>09:30-11:30</td>
<td align="left">任务二:<br />认识数字化营销<br />数字化营销、数字化营销的常用触达工具、数字化营销系统</td>
</tr>
<tr style="height: 41.53px">
<td>下午</td>
<td>14:00-16:30</td>
<td align="left">
任务三:<br />金融产品营销知识准备<br />金融机构及金融市场<br />金融产品<br />金融营销概述
</td>
<td rowspan="9">于海颖</td>
</tr>
<tr>
<td rowspan="7">1月13日</td>
<td rowspan="3">上午</td>
<td rowspan="3">09:00-11:30</td>
<td rowspan="3" align="left">
任务四:<br />金融产品数字化营销策略及实施<br />金融产品的数字化营销策略<br />不同场景下的数字化营销实施技巧及关键点
</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td rowspan="4">下午</td>
<td rowspan="3">14:00-16:30</td>
<td rowspan="3" align="left">
任务五:<br />重点金融产品数字化营销方案设计<br />银行产品的数字化营销方案设计<br />保险产品的数字化营销方案设计
基金产品的数字化营销方案设计
</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td>16:30-17:00</td>
<td>1+X实训平台演示</td>
</tr>
<tr>
<td>另行通知</td>
<td></td>
<td></td>
<td>在线课程考试</td>
</tr>
</tbody>
</table>`,
},
{
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2021年第6期“1+X金融产品数字化营销职业技能等级证书(中级)”技能培训班',
time: '10月30日-10月31日',
count: 100,
activeIndex: 3,
id: '6',
},
{
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2021年第3期“1+X金融产品数字化营销职业技能等级证书(中级)”技能培训班',
time: '7月5日-7月9日',
count: 100,
activeIndex: 3,
id: '3',
},
{
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2021年第2期“1+X金融产品数字化营销职业技能等级证书(中级)”技能培训班',
time: '6月27日-6月30日',
count: 100,
activeIndex: 3,
id: '2',
},
{
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2021年第1期“1+X金融产品数字化营销职业技能等级证书(中级)”技能培训班',
time: '4月23日-4月25日',
count: 100,
activeIndex: 3,
id: '1',
},
]
<template>
<div>
<img class="banner" src="/images/banner2.png" />
<section class="section">
<h1 class="pt-80">技能培训公告</h1>
<notice></notice>
<div class="nav-list">
<div class="nav-list_item" v-for="(item, index) in navList" :key="index" @click="register(item)">
<div class="item-icon">
<img class="n-active" :src="item.icon" />
<img class="active" :src="item.aIcon" />
</div>
<div class="item-txt">{{ item.text }}</div>
</div>
</div>
<h2 class="pt-80" id="md1" style="text-align: center">技能培训报名</h2>
<h3 style="margin-top: 50px">一、培训目标</h3>
<p class="des">
培训目标:培养初级商务数据分析师。<br />
学员通过本阶段课程学习,了解商务数据分析师相关岗位要求和岗位基础知识,学会数据采集、清洗、处理、可视化和基础分析技能,使学员能够胜任商务数据分析师基础岗位工作。在工作中为企业决策提供基础数据与依据。
</p>
<h3>二、培训对象</h3>
<p class="des">企业职工、职业院校学生、退伍军人</p>
<h3>三、培训方式</h3>
<p class="des">
根据“金融产品数字化营销职业技能等级证书”试点工作需求,分批次(分区域)开展师资培训。培训采取结构化、多元化的培训方式设计,包含在线视频、专题授课、案例研讨、实践演练、互动讨论、汇报展示、整体考核等。
</p>
<h3>四、培训内容</h3>
<p class="des">
1.1+X证书制度的意义与政策解读<br />
2.金融产品数字化营销发展现状与前景展望<br />
3.职业技能等级标准解读<br />
4.核心知识串讲与互动交流<br />
5.实训案例剖析与互动交流<br />
6.课程考试
</p>
<h3>五、培训费用</h3>
<p class="des">详见每期技能培训通知。</p>
<div class="t-btn">
<div class="name">通知关注:</div>
<router-link to="/news">
<div class="btn">通知</div>
</router-link>
</div>
<div class="t-btn">
<div class="name">报名入口:</div>
<router-link to="/train">
<div class="btn">报名</div>
</router-link>
</div>
<div class="pt-box">
<h1 id="md2">学习平台</h1>
<div class="flex">
<img src="https://webapp-pub.ezijing.com/project/x-new/train-dn.png" />
<div class="pt-right">
<div class="txt">
紫荆教育为师生精心打造综合一体化学习平台,可实现考核体系的标准化,数据资源的统一化,师资学习的多元化,以及学习管理的系统化,最终形成学、练、训、考、评、管一体的数字化营销学习平台。
</div>
<a target="_blank" href="https://x-learning.ezijing.com/course/learn">
<div class="btn">进入系统</div>
</a>
</div>
</div>
</div>
</section>
<vue-passport ref="passport" @ready="onReady" :options="options"></vue-passport>
</div>
</template>
<script>
import notice from '@/components/notice.vue'
export default {
components: {
notice,
},
data() {
return {
navList: [
{
icon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon1.png',
aIcon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon-a1.png',
text: '注册账号',
isRegister: true,
},
{
icon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon2.png',
aIcon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon-a2.png',
text: '技能培训报名',
id: 'md1',
},
{
icon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon3.png',
aIcon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon-a3.png',
text: '学习平台',
id: 'md2',
},
{
icon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon4.png',
aIcon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon-a4.png',
text: '证书查询',
path: '/queryCard',
},
],
isLogin: false,
options: {
baseUrl: import.meta.env.VITE_API_BASE_URL,
register: {
data: {
username: `ezijing-${new Date().getTime()}`,
},
fields: ['account', 'code', 'password'],
},
login: {
account: {
onSuccess: this.loginSuccess,
},
phone: {
onSuccess: this.loginSuccess,
},
},
},
}
},
mounted() {},
methods: {
register(n) {
if (n.isRegister) {
this.passport.register()
return false
}
if (n.id) {
const element = document.getElementById(n.id)
if (element) {
const offsetTop = element.getBoundingClientRect().top + window.scrollY
window.scrollTo({
top: offsetTop,
behavior: 'smooth',
})
}
return false
}
if (n.path) {
this.$router.push(n)
}
},
onReady(isLogin, user = {}) {
this.user = user
window.sessionStorage.userInfo = JSON.stringify(user)
},
loginSuccess(data) {
this.passport.checkLoginStatus((isLogin, user = {}) => {
window.sessionStorage.userInfo = JSON.stringify(user)
this.isLogin = isLogin
this.user = user
this.$router.push('/my')
})
window.location.reload()
},
},
computed: {
passport() {
return this.$refs.passport
},
},
}
</script>
<style lang="scss" scoped>
.section {
width: 1200px;
margin: 0 auto;
}
.banner {
width: 100%;
display: block;
}
h1 {
font-size: 32px;
font-weight: bold;
color: #333333;
line-height: 34px;
text-align: center;
margin-bottom: 50px;
}
.pt-80 {
padding-top: 80px;
}
.pt-100 {
padding-top: 100px;
}
.nav-list {
display: flex;
justify-content: space-between;
padding-top: 60px;
.nav-list_item {
width: 264px;
height: 264px;
background: #ffffff;
box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.1);
cursor: pointer;
&:hover {
background-color: #aa1941;
.item-icon {
.n-active {
display: none;
}
.active {
display: block;
}
}
.item-txt {
color: #fff;
}
}
.item-icon {
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
.active {
display: none;
}
}
.item-txt {
font-size: 22px;
color: #333333;
text-align: center;
}
}
}
h2 {
font-size: 24px;
color: #333333;
}
h3 {
color: #333333;
font-size: 20px;
margin-bottom: 5px;
}
.des {
font-size: 18px;
margin-bottom: 40px;
line-height: 30px;
color: #333333;
}
.t-btn {
display: flex;
align-items: center;
margin-bottom: 20px;
.name {
font-size: 18px;
color: #333333;
}
.btn {
width: 150px;
background: #aa1941;
border-radius: 6px 6px 6px 6px;
color: #fff;
text-align: center;
line-height: 40px;
}
}
.pt-box {
padding-top: 40px;
padding-bottom: 40px;
.flex {
display: flex;
margin-top: 35px;
img {
min-width: 293px;
display: block;
}
.pt-right {
margin-left: 70px;
.txt {
font-size: 18px;
color: #333333;
line-height: 30px;
}
.btn {
width: 150px;
line-height: 40px;
background: #aa1941;
border-radius: 6px 6px 6px 6px;
text-align: center;
color: #fff;
cursor: pointer;
margin-top: 60px;
}
}
}
}
.new-list {
display: flex;
justify-content: space-between;
margin-bottom: 100px;
.new-list_item {
box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.1);
background-color: #fff;
width: 380px;
height: 560px;
box-sizing: border-box;
padding: 60px 30px 30px;
.new-item_title {
font-size: 20px;
font-weight: bold;
color: #333333;
line-height: 100%;
margin-bottom: 30px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.new-item_con {
font-size: 16px;
color: #333333;
line-height: 26px;
height: 234px;
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 9;
}
.new-item_btn {
font-size: 16px;
color: #aa1941;
line-height: 100%;
margin: 20px 0;
}
}
}
</style>
...@@ -3,11 +3,8 @@ ...@@ -3,11 +3,8 @@
<img :src="data.imgUri" /> <img :src="data.imgUri" />
<div class="right-content"> <div class="right-content">
<div class="title">{{ data.title }}</div> <div class="title">{{ data.title }}</div>
<!-- v-html="data.additional" -->
<div class="des-box"> <div class="des-box">
<!-- <p class="ind">计划时间:3.24-3.26</p> -->
<p>计划时间:{{ data.time }}</p> <p>计划时间:{{ data.time }}</p>
<!-- <p class="ind">ISBN:基础数据维护及档案管理</p> -->
<p>计划人数:{{ data.count }}</p> <p>计划人数:{{ data.count }}</p>
</div> </div>
<router-link :to="`/train/detail?id=${data.id}`" v-if="data.activeIndex === 1"> <router-link :to="`/train/detail?id=${data.id}`" v-if="data.activeIndex === 1">
...@@ -16,38 +13,12 @@ ...@@ -16,38 +13,12 @@
<div class="detail-btn" v-if="data.activeIndex === 2">敬请期待</div> <div class="detail-btn" v-if="data.activeIndex === 2">敬请期待</div>
<div class="detail-btn finished" v-if="data.activeIndex === 3">圆满结束</div> <div class="detail-btn finished" v-if="data.activeIndex === 3">圆满结束</div>
</div> </div>
<!-- <div class="right-time">
<div class="week">{{ setDate('w') }}</div>
<div class="time">{{ setDate('m') }}</div>
</div> -->
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
data: { data: { type: Object, default: () => ({}) },
type: Object,
default: {},
},
},
data() {
return {
input: '',
}
},
computed: {
setDate() {
return (type) => {
const date = new Date(this.data.published_time)
let reData = ''
if (type === 'w') {
reData = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六')[date.getDay()]
} else {
reData = date.getMonth() + 1 + '月' + date.getDate() + '日'
}
return reData
}
},
}, },
} }
</script> </script>
...@@ -98,27 +69,4 @@ export default { ...@@ -98,27 +69,4 @@ export default {
} }
} }
} }
.right-time {
margin-left: auto;
width: 77px;
height: 59px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/30ec4d9c7c282da2e3dae066b00b180b.png);
background-size: 100% 100%;
position: relative;
.week {
text-align: center;
font-size: 12px;
color: #ffffff;
line-height: 12px;
margin-top: 6px;
}
.time {
margin-top: 8px;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #666666;
line-height: 22px;
}
}
</style> </style>
...@@ -4,28 +4,28 @@ ...@@ -4,28 +4,28 @@
<i class="el-icon-close" @click="$emit('closePayPop')"></i> <i class="el-icon-close" @click="$emit('closePayPop')"></i>
<div class="tips-cen"> <div class="tips-cen">
<div class="name">活动名称:</div> <div class="name">活动名称:</div>
<div class="js">2024年第一期“1+X金融产品数字化营销职业技能等级证书(高级)”技能培训班</div> <div class="js">{{ train.title }}</div>
</div> </div>
<div class="tips-cen mar-t-20"> <div class="tips-cen mar-t-20">
<div class="name">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用:</div> <div class="name">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用:</div>
<div class="money">3800<span></span></div> <div class="money">{{ train.price }}<span></span></div>
</div> </div>
<div class="tips-top"> <div class="tips-top">
<div class="name">支付方式:</div> <div class="name">支付方式:</div>
<div class="pay-method"> <div class="pay-method">
<div :class="payMethod == 2 ? 'li active' : 'li'" @click="tabPayMethod(2)"> <div :class="payMethod == 2 ? 'li active' : 'li'" @click="changePayMethod(2)">
<div class="select-icon"></div> <div class="select-icon"></div>
<div class="icon"></div> <div class="icon"></div>
<div class="pay-text">支付宝支付</div> <div class="pay-text">支付宝支付</div>
</div> </div>
<div :class="payMethod == 1 ? 'li active' : 'li'" @click="tabPayMethod(1)"> <div :class="payMethod == 1 ? 'li active' : 'li'" @click="changePayMethod(1)">
<div class="select-icon"></div> <div class="select-icon"></div>
<div class="icon"></div> <div class="icon"></div>
<div class="pay-text">微信支付</div> <div class="pay-text">微信支付</div>
</div> </div>
</div> </div>
</div> </div>
<div class="pay-btn" @click="getOrder">去支付</div> <div class="pay-btn" @click="createOrder">去支付</div>
<div class="tips-text">注:请核对报名表信息,支付后将不能修改报名信息。</div> <div class="tips-text">注:请核对报名表信息,支付后将不能修改报名信息。</div>
</div> </div>
<div class="content-box ewm-code" v-if="isCodeShow"> <div class="content-box ewm-code" v-if="isCodeShow">
...@@ -44,58 +44,52 @@ ...@@ -44,58 +44,52 @@
import * as api from '@/api/article' import * as api from '@/api/article'
import QrcodeVue from 'qrcode.vue' import QrcodeVue from 'qrcode.vue'
export default { export default {
components: { components: { QrcodeVue },
QrcodeVue,
},
props: { props: {
formData: { form: { type: Object },
type: Object, train: { type: Object },
},
periods: {
type: Number,
default: '1',
},
}, },
data() { data() {
return { return {
payMethod: 2, payMethod: 2,
isCodeShow: false, isCodeShow: false,
product_id: '6787934443077107712',
payInfo: {}, payInfo: {},
time: null, timer: null,
} }
}, },
methods: { methods: {
tabPayMethod(n) { changePayMethod(n) {
this.payMethod = n this.payMethod = n
}, },
getOrder() { async createOrder() {
const param = {
pay_type: this.payMethod,
product_id: this.product_id,
form_id: this.formData.id && this.formData.id.toString(),
}
const loading = this.$loading({ const loading = this.$loading({
lock: true, lock: true,
text: 'Loading', text: 'Loading',
spinner: 'el-icon-loading', spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)', background: 'rgba(0, 0, 0, 0.7)',
}) })
api.getOrder(param).then((res) => { await api
if (res.code === 200) { .createOrder({
this.payInfo = res.data pay_type: this.payMethod,
this.isCodeShow = true shop_id: this.train.shop_id,
clearInterval(this.time) spu_id: this.train.shop_id,
this.time = setInterval(() => { sku_id: this.train.sku_id,
this.checkPay(res.data.pay_order_id, res.data.order_no) form_id: this.form.id,
}, 2000) })
loading.close() .then((res) => {
} else { if (res.code === 200) {
this.$message.error(res.msg) this.payInfo = res.data
loading.close() this.isCodeShow = true
} clearInterval(this.timer)
// isCodeShow = true this.timer = setInterval(() => {
}) this.checkPay(res.data.pay_order_id, res.data.order_no)
}, 2000)
loading.close()
} else {
this.$message.error(res.msg)
loading.close()
}
})
}, },
checkPay(id, order_no) { checkPay(id, order_no) {
api.checkPay(id).then((res) => { api.checkPay(id).then((res) => {
...@@ -108,29 +102,27 @@ export default { ...@@ -108,29 +102,27 @@ export default {
}) })
this.payEnd(order_no) this.payEnd(order_no)
this.$emit('payStatus') this.$emit('payStatus')
clearInterval(this.time) clearInterval(this.timer)
} else if (order.status !== 0) { } else if (order.status !== 0) {
clearInterval(this.time) clearInterval(this.timer)
} }
} }
// isCodeShow = true
}) })
}, },
closeClear() { closeClear() {
this.isCodeShow = false this.isCodeShow = false
this.$emit('closePayPop') this.$emit('closePayPop')
// clearInterval()
}, },
payEnd(orderOn) { payEnd(orderOn) {
const param = { const param = {
order_no: orderOn, order_no: orderOn,
form_id: this.formData.id.toString(), form_id: this.form.id.toString(),
} }
api.payEnd(param).then((res) => {}) api.payEnd(param).then((res) => {})
}, },
}, },
beforeDestroy() { beforeDestroy() {
// clearInterval(this.time) clearInterval(this.timer)
}, },
} }
</script> </script>
......
<template>
<div class="search-box">
<el-input
class="input"
placeholder="请输入内容"
v-model="input">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<div class="search-btn">查询</div>
</div>
</template>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>
<style lang="scss" scoped>
.search-box{
display: flex;
justify-content: center;
align-items: center;
.input{
width: 328px;
border-radius: 4px;
margin: 0 12px 0 0;
}
.search-btn{
text-align: center;
line-height: 32px;
width: 60px;
height: 32px;
background: linear-gradient(312deg, rgba(192, 21, 64, 0.67) 0%, #C01540 100%);
border-radius: 4px;
font-size: 14px;
color: #FFFFFF;
cursor: pointer;
}
}
</style>
export default [ export default [
{ {
activeIndex: 1,
id: '202401', id: '202401',
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg', imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2024年第一期“1+X金融产品数字化营销职业技能等级证书(高级)”技能培训班', title: '2024年第一期“1+X金融产品数字化营销职业技能等级证书(高级)”技能培训班',
time: '2024年4月20-24日', time: '2024年4月20-24日',
count: 100, count: 100,
activeIndex: 1,
type: 1,
form: '现场培训', form: '现场培训',
addr: '北京市海淀区清华科技园威盛大厦5层。', addr: '北京市海淀区清华科技园威盛大厦5层。',
qq: '822453816', qq: '822453816',
...@@ -14,6 +13,10 @@ export default [ ...@@ -14,6 +13,10 @@ export default [
contact_number: '18500913837', contact_number: '18500913837',
desc: '', desc: '',
payment: '3800元/人,往返、食宿费用自理。', payment: '3800元/人,往返、食宿费用自理。',
price: 3800,
shop_id: '7289173268458635264',
spu_id: '7289174249284042752',
sku_id: '7289174824432173056',
content: `<table border="1" cellpadding="10" cellspacing="0" style="width: 700px;"> content: `<table border="1" cellpadding="10" cellspacing="0" style="width: 700px;">
<tr> <tr>
<td colspan="6" align="center">1+X金融产品数字化营销职业技能等级证书(高级)技能培训</td> <td colspan="6" align="center">1+X金融产品数字化营销职业技能等级证书(高级)技能培训</td>
...@@ -124,626 +127,4 @@ export default [ ...@@ -124,626 +127,4 @@ export default [
</tr> </tr>
</table>`, </table>`,
}, },
{
id: '202302',
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2023年第二期“1+X金融产品数字化营销职业技能等级证书(中级)”技能培训班',
time: '2023年9月20-23日',
count: 100,
activeIndex: 3,
type: 1,
addr: '线上直播',
qq: '461760646',
contact: '王老师',
contact_number: '18500913837',
desc: '贯彻落实教育部等四部门印发《关于在院校实施“1+X学历证书+若干职业技能等级证书”制度试点方案》要求,保障“金融产品数字化营销职业技能等级证书“试点工作的有效开展,分享1+X试点实践经验,促进院校教学和培训工作有序落地。',
content: `<table border="1" cellpadding="10" cellspacing="0" style="width: 700px;">
<tbody>
<tr>
<td valign="center" width="85">
<p align="center">日期</p>
</td>
<td valign="center" width="99">
<p align="center">时间</p>
</td>
<td valign="center" width="184">
<p align="center">&nbsp;</p>
</td>
<td valign="center" width="444">
<p align="center">内容</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">主讲人</p>
</td>
</tr>
<tr>
<td rowspan="4" valign="center" width="85">
<p align="center">9月20日</p>
</td>
<td rowspan="3" valign="center" width="99">
<p align="center">上午</p>
</td>
<td valign="center" width="184">
<p align="center">09:00-09:05</p>
</td>
<td valign="center">
<p align="center">开班</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">赵小龙</p>
</td>
</tr>
<tr>
<td valign="center" width="184">
<p align="center">09:05-09:15</p>
</td>
<td valign="center" width="444">
<p align="center">公司领导致辞</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">金梅</p>
</td>
</tr>
<tr>
<td valign="center">
<p align="center">09:30-12:00</p>
</td>
<td valign="center">
<p align="center">任务一数字化营销</p>
</td>
<td valign="center" nowrap="nowrap">
<p align="center">金梅</p>
</td>
</tr>
<tr>
<td rowspan="1" valign="center">
<p align="center">下午</p>
</td>
<td valign="center">
<p align="center">14:00-17:00</p>
</td>
<td valign="center">
<p align="center">任务二 金融产品与数字营销</p>
</td>
<td valign="center" nowrap="nowrap">
<p align="center">段娟</p>
</td>
</tr>
<tr>
<td rowspan="1" valign="center">
<p align="center">9月21日</p>
</td>
<td rowspan="1" valign="center">
<p align="center">全天</p>
</td>
<td valign="center">
<p align="center">09:00-17:00</p>
</td>
<td valign="center">
<p align="center">任务三1+X金融产品数字化营销实训平台 信用卡营销案例实践</p>
</td>
<td valign="center" nowrap="nowrap">
<p align="center">段小飞</p>
</td>
</tr>
<tr>
<td rowspan="3" valign="center">
<p align="center">9月22日</p>
</td>
<td rowspan="1" valign="center">
<p align="center">上午</p>
</td>
<td valign="center">
<p align="center">09:00-12:00</p>
</td>
<td valign="center">
<p align="center">“岗课赛证”一体化案例实操</p>
</td>
<td valign="center" nowrap="nowrap">
<p align="center">宁孟强</p>
</td>
</tr>
<tr>
<td rowspan="2" valign="center">
<p align="center">下午</p>
</td>
<td valign="center">
<p align="center">14:00-15:30</p>
</td>
<td valign="center">
<p align="center">大数据营销应用-紫荆商业数据分析平台</p>
</td>
<td valign="center" nowrap="nowrap">
<p align="center">刘宇翔</p>
</td>
</tr>
<tr>
<td valign="center">
<p align="center">15:30-17:00</p>
</td>
<td valign="center">
<p align="center">金融产品数字化营销证书标准解读及下半年考试安排</p>
</td>
<td valign="center" nowrap="nowrap">
<p align="center">王鑫</p>
</td>
</tr>
<tr>
<td rowspan="3" valign="center">
<p align="center">9月23日</p>
</td>
<td rowspan="1" valign="center">
<p align="center">上午</p>
</td>
<td valign="center">
<p align="center">09:00-12:00</p>
</td>
<td valign="center">
<p align="center">培训考核(理论+操作)</p>
</td>
<td valign="center" nowrap="nowrap">
<p align="center">王鑫</p>
</td>
</tr>
</tbody>
</table>`,
},
{
id: '202301',
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2023年第一期“1+X金融产品数字化营销职业技能等级证书(中级)”技能培训班',
time: '2023年3月18-19日',
count: 100,
activeIndex: 3,
type: 1,
addr: '线上直播',
qq: '461760646',
contact: '王老师',
contact_number: '18500913837',
desc: '贯彻落实教育部等四部门印发《关于在院校实施“1+X学历证书+若干职业技能等级证书”制度试点方案》要求,保障“金融产品数字化营销职业技能等级证书“试点工作的有效开展,分享1+X试点实践经验,促进院校教学和培训工作有序落地。',
content: `<table border="1" cellpadding="10" cellspacing="0" style="width: 700px;">
<tbody>
<tr>
<td valign="center" width="85">
<p align="center">日期</p>
</td>
<td valign="center" width="99">
<p align="center">时间</p>
</td>
<td valign="center" width="184">
<p align="center">&nbsp;</p>
</td>
<td valign="center" width="444">
<p align="center">内容</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">主讲人</p>
</td>
</tr>
<tr>
<td rowspan="6" valign="center" width="85">
<p align="center">3月18日</p>
</td>
<td rowspan="4" valign="center" width="99">
<p align="center">上午</p>
</td>
<td valign="center" width="184">
<p align="center">09:00-09:05</p>
</td>
<td valign="center" width="444">
<p align="center">开班</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">王鑫</p>
</td>
</tr>
<tr>
<td valign="center" width="184">
<p align="center">09:05-09:30</p>
</td>
<td valign="center" width="444">
<p align="center">公司领导致辞</p>
<p align="center">2022年工作总结及2023年工作规划</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">金梅</p>
</td>
</tr>
<tr>
<td valign="center" width="184">
<p align="center">09:30-10:00</p>
</td>
<td valign="center" width="444">
<p align="center">赛证融通-2023年全国大学生商业数据分析与应用大赛</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">张艺驰</p>
</td>
</tr>
<tr>
<td valign="center" width="184">
<p align="center">10:00-12:00</p>
</td>
<td valign="center" width="444">
<p>书证融通-实践技能人才培养思路</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">宁孟强</p>
</td>
</tr>
<tr>
<td rowspan="2" valign="center" width="99">
<p align="center">下午</p>
</td>
<td valign="center" width="184">
<p align="center">14:00-15:30</p>
</td>
<td valign="center" width="444">
<p>课证融通-金融数字化营销课程设计思路</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">魏曼</p>
</td>
</tr>
<tr>
<td valign="center" width="184">
<p align="center">15:30-17:00</p>
</td>
<td valign="center" width="444">
<p>金融产品数字化营销实训平台功能演示</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">段小飞</p>
</td>
</tr>
<tr>
<td rowspan="2" valign="center" width="85">
<p align="center">3月19日</p>
</td>
<td valign="center" width="99">
<p align="center">上午</p>
</td>
<td valign="center" width="184">
<p align="center">09:00-12:00</p>
</td>
<td valign="center" width="444">
<p>案例教学-以某商业银行理财产品为例</p>
<p>1.&nbsp;商业银行个人理财产品介绍</p>
<p>2.&nbsp;商业银行财富顾问岗位职责介绍</p>
<p>3.&nbsp;案例背景分析</p>
<p>4.&nbsp;案例任务设计</p>
<p>5.&nbsp;数据集成与数据集理解</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">杜奎</p>
</td>
</tr>
<tr>
<td valign="center" width="99">
<p align="center">下午</p>
</td>
<td valign="center" width="184">
<p align="center">14:00-17:00</p>
</td>
<td valign="center" width="444">
<p>案例教学-以某商业银行理财产品为例</p>
<p>1.&nbsp;打造客户标签体系</p>
<p>2.&nbsp;动态筛选目标客户</p>
<p>3.&nbsp;用户旅程设计与配置</p>
<p>4.&nbsp;营销报表呈现与优化</p>
</td>
<td valign="center" nowrap="nowrap" width="136">
<p align="center">杜奎</p>
</td>
</tr>
<tr>
<td colspan="3" valign="center" width="368">
<p>另行通知</p>
</td>
<td colspan="2" valign="center" width="581">
<p align="center">在线课程考试</p>
</td>
</tr>
</tbody>
</table>`,
},
{
id: '2022002',
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '清控紫荆2022年1+X金融产品数字化营销证书试点工作说明会',
time: '2022年5月23日',
count: 100,
activeIndex: 3,
type: 1,
addr: '线上直播',
qq: '722810013',
contact: '王老师',
contact_number: '18500913837',
desc: '贯彻落实教育部等四部门印发《关于在院校实施“1+X学历证书+若干职业技能等级证书”制度试点方案》要求,保障“金融产品数字化营销职业技能等级证书“试点工作的有效开展,分享1+X试点实践经验,促进院校教学和培训工作有序落地。',
content: `
<table border="1" cellpadding="10" cellspacing="0" style="width: 700px;">
<tbody>
<tr>
<td>09:15-09:30</td>
<td>
广西壮族自治区教育厅 领导致辞<br />
清控紫荆教育 资深副总裁金梅致辞<br />
广西金融职业技术学院 党委书记沈立君致辞
</td>
</tr>
<tr>
<td>09:30-09:55</td>
<td>
<h4>主题一:数字经济与金融机构创新</h4>
分享嘉宾:清控紫荆数字经济研究院院长 付喆博士
</td>
</tr>
<tr>
<td>09:55-10:20</td>
<td>
<h4>主题二:金融机构数字化营销实践</h4>
分享嘉宾:深圳大学银行业数字金融实验室资深研究员 葛蒙博士(拟邀)
</td>
</tr>
<tr>
<td>10:20-11:10</td>
<td>
<h4>主题三:金融业数字化人才培养探索与实践</h4>
分享嘉宾:广西金融职业技术学院 党委书记沈立君<br />
辽宁金融职业学院金融学院 副院长孟庆海
</td>
</tr>
<tr>
<td>11:10-11:15</td>
<td>清控紫荆教育与牵头院校授牌仪式</td>
</tr>
<tr>
<td>11:15-11:30</td>
<td>
<h4>主题四:“金融产品数字化营销职业技能标准”解读及实施运营</h4>
分享嘉宾:清控紫荆教育资深副总裁 金梅
</td>
</tr>
<tr>
<td>11:30-12:10</td>
<td>
<h4>主题五:“1+X证书”岗课赛证融通实施实践分享</h4>
分享嘉宾:浙江金融职业学院金融管理学院 院长董瑞丽<br />
北京财贸职业学院金融学院 院长胡君晖<br />
长春金融高等专科学校金融学院 院长施晓春
</td>
</tr>
<tr>
<td>12:10-12:30</td>
<td>Q&A</td>
</tr>
</tbody>
</table>`,
},
{
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2022年第3期“1+X金融产品数字化营销职业技能等级证书(中级)”技能培训班',
time: '待定',
count: '待定',
activeIndex: 3,
id: '202202222',
},
{
id: '2022001',
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2022年1+X金融产品数字化营销职业技能等级证书广西公益技能培训',
time: '2022年4月13日',
count: 100,
activeIndex: 3,
type: 1,
addr: '线上直播',
qq: '722810013',
contact: '王老师',
contact_number: '18500913837',
content: `<p>1. 职业技能等级标准解读(中级)</p>
<p>2.证书教学/实训平台/考核标准介绍</p>
<p>3.金融产品数字化营销中级内容串讲</p>`,
},
{
id: '202202',
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2022年第2期“1+X金融产品数字化营销职业技能等级证书(中级)”技能培训班',
time: '01月18日-01月20日',
count: 100,
activeIndex: 3,
addr: '线上直播',
content: `
<table border="1" cellpadding="10" cellspacing="0" style="width: 700px; text-align: center">
<tbody>
<tr height="142">
<td colspan="5" style="font-size: 18pt; font-weight: 700">金融产品与数字化营销(中级)</td>
</tr>
<tr>
<td>日期</td>
<td>时间</td>
<td></td>
<td>内容</td>
<td class="et5" style="vertical-align: middle; white-space: nowrap">主讲人</td>
</tr>
<tr>
<td rowspan="4">1月18日</td>
<td rowspan="3">上午</td>
<td>09:30-09:40</td>
<td>开班-2021年度试点工作成效及规划</td>
<td style="vertical-align: middle; white-space: nowrap; text-align: center">王鑫</td>
</tr>
<tr>
<td>09:40-10:00</td>
<td>1+X证书制度课证融通实践探索-优秀试点院校分享</td>
<td class="et10" style="vertical-align: middle; white-space: nowrap; text-align: center"></td>
</tr>
<tr>
<td>10:00-11:30</td>
<td>认识市场营销<br />市场、消费市场、STP、品牌</td>
<td rowspan="4">马庆胜</td>
</tr>
<tr>
<td>下午</td>
<td>14:30-17:00</td>
<td>数字化营销<br />产品、价格决策、分销、促销决策</td>
</tr>
<tr>
<td rowspan="2">1月19日</td>
<td>上午</td>
<td>09:30-11:30</td>
<td>数字化营销方案的流程设计<br />客户关系管理、客户画像</td>
</tr>
<tr>
<td>下午</td>
<td>14:30-17:00</td>
<td>数字化营销方案的流程设计<br />数字信息化传播、建立数字化关系、社群经营变现</td>
</tr>
<tr>
<td rowspan="7">1月20日</td>
<td rowspan="3">上午</td>
<td rowspan="3">09:00-11:30</td>
<td>金融产品和金融营销</td>
<td rowspan="8">于海颖</td>
</tr>
<tr>
<td>银行产品分类及特点</td>
</tr>
<tr>
<td>保险产品分类及特点</td>
</tr>
<tr>
<td rowspan="4">下午</td>
<td rowspan="3">14:00-16:30</td>
<td>证券产品分类及特点</td>
</tr>
<tr>
<td>金融产品数字化营销理念</td>
</tr>
<tr>
<td>基于特定人群的数字化营销方案设计</td>
</tr>
<tr>
<td>16:30-17:00</td>
<td>1+X实训平台演示</td>
</tr>
<tr>
<td>另行通知</td>
<td></td>
<td></td>
<td>在线课程考试</td>
</tr>
</tbody>
</table>`,
},
{
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2022年第1期“1+X金融产品数字化营销职业技能等级证书(初级)”技能培训班',
time: '01月11日-01月13日',
count: 100,
activeIndex: 3,
id: '202201',
content: `<table border="1" cellpadding="10" cellspacing="0" style="width: 700px; text-align: center">
<tbody>
<tr class="firstRow">
<td>日期</td>
<td colspan="2">时间</td>
<td>内容</td>
<td>主讲人</td>
</tr>
<tr>
<td rowspan="3">1月11日</td>
<td rowspan="2">上午</td>
<td>09:30-09:40</td>
<td width="316">开班仪式</td>
<td width="67">王鑫</td>
</tr>
<tr style="height: 32.13px">
<td>09:40-11:30</td>
<td align="left">任务一:<br />认识市场营销<br />市场、消费市场、STP</td>
<td rowspan="3">马庆胜</td>
</tr>
<tr>
<td>下午</td>
<td width="84">14:30-17:00</td>
<td align="left">任务一:<br />认识市场营销<br />产品、价格决策、分销、促销决策</td>
</tr>
<tr>
<td rowspan="2">1月12日</td>
<td width="44">上午</td>
<td>09:30-11:30</td>
<td align="left">任务二:<br />认识数字化营销<br />数字化营销、数字化营销的常用触达工具、数字化营销系统</td>
</tr>
<tr style="height: 41.53px">
<td>下午</td>
<td>14:00-16:30</td>
<td align="left">
任务三:<br />金融产品营销知识准备<br />金融机构及金融市场<br />金融产品<br />金融营销概述
</td>
<td rowspan="9">于海颖</td>
</tr>
<tr>
<td rowspan="7">1月13日</td>
<td rowspan="3">上午</td>
<td rowspan="3">09:00-11:30</td>
<td rowspan="3" align="left">
任务四:<br />金融产品数字化营销策略及实施<br />金融产品的数字化营销策略<br />不同场景下的数字化营销实施技巧及关键点
</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td rowspan="4">下午</td>
<td rowspan="3">14:00-16:30</td>
<td rowspan="3" align="left">
任务五:<br />重点金融产品数字化营销方案设计<br />银行产品的数字化营销方案设计<br />保险产品的数字化营销方案设计
基金产品的数字化营销方案设计
</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td>16:30-17:00</td>
<td>1+X实训平台演示</td>
</tr>
<tr>
<td>另行通知</td>
<td></td>
<td></td>
<td>在线课程考试</td>
</tr>
</tbody>
</table>`,
},
{
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2021年第6期“1+X金融产品数字化营销职业技能等级证书(中级)”技能培训班',
time: '10月30日-10月31日',
count: 100,
activeIndex: 3,
id: '6',
},
{
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2021年第3期“1+X金融产品数字化营销职业技能等级证书(中级)”技能培训班',
time: '7月5日-7月9日',
count: 100,
activeIndex: 3,
id: '3',
},
{
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2021年第2期“1+X金融产品数字化营销职业技能等级证书(中级)”技能培训班',
time: '6月27日-6月30日',
count: 100,
activeIndex: 3,
id: '2',
},
{
imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
title: '2021年第1期“1+X金融产品数字化营销职业技能等级证书(中级)”技能培训班',
time: '4月23日-4月25日',
count: 100,
activeIndex: 3,
id: '1',
},
] ]
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
<div class="item-box"> <div class="item-box">
<img :src="detail.imgUri" /> <img :src="detail.imgUri" />
<div class="right-content"> <div class="right-content">
<!-- <div class="title">《金融产品数字化营销职业技能等级认证教材》(初级)</div> -->
<div class="des-box"> <div class="des-box">
<p>活动类型:技能培训</p> <p>活动类型:技能培训</p>
<p>培训形式:{{ detail.form || '线上直播' }}</p> <p>培训形式:{{ detail.form || '线上直播' }}</p>
...@@ -22,12 +21,7 @@ ...@@ -22,12 +21,7 @@
</div> </div>
<div class="content-card" v-if="detail.excerpt != null"> <div class="content-card" v-if="detail.excerpt != null">
<div class="tit">最新会议</div> <div class="tit">最新会议</div>
<div class="text" v-html="detail.excerpt"> <div class="text" v-html="detail.excerpt"></div>
生实解着利土具度海张际取得时美议九报当社并因或争拉青再大精周不院指权展理会后市中议候只土写海院油称县白力反油子特军再六红省采大队清
</div>
<!-- <div class="btn-boxs">
<div class="btns">确定</div>
</div> -->
</div> </div>
</div> </div>
<div class="new-contents content-max-width"> <div class="new-contents content-max-width">
...@@ -51,8 +45,6 @@ ...@@ -51,8 +45,6 @@
<div class="p"> <div class="p">
<div class="name">日程安排:</div> <div class="name">日程安排:</div>
<div class="cont" v-html="detail.content"></div> <div class="cont" v-html="detail.content"></div>
<!-- <div class="cont">
</div> -->
</div> </div>
<div class="p"> <div class="p">
<div class="name">培训QQ群:</div> <div class="name">培训QQ群:</div>
...@@ -72,15 +64,12 @@ ...@@ -72,15 +64,12 @@
</div> </div>
</template> </template>
<script> <script>
import item from './components/item.vue' import item from './components/listItem.vue'
import * as api from '@/api/article'
import breadcrumb from '@/components/breadcrumb.vue' import breadcrumb from '@/components/breadcrumb.vue'
import datalist from './data.js' import datalist from './data.js'
export default { export default {
components: { components: { item, breadcrumb },
item,
breadcrumb,
},
data() { data() {
return { return {
datalist, datalist,
...@@ -93,16 +82,6 @@ export default { ...@@ -93,16 +82,6 @@ export default {
return this.datalist.find((item) => item.id === id) || {} return this.datalist.find((item) => item.id === id) || {}
}, },
}, },
mounted() {
// this.getData()
},
methods: {
getData() {
api.getArticleDetail(this.$route.query.id).then((res) => {
this.data = res.data
})
},
},
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -111,10 +90,8 @@ export default { ...@@ -111,10 +90,8 @@ export default {
margin: 0 auto; margin: 0 auto;
} }
.train-detail-box { .train-detail-box {
display: flex;
padding-top: 12px; padding-top: 12px;
.title { .title {
width: 753px;
line-height: 50px; line-height: 50px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
font-size: 18px; font-size: 18px;
...@@ -122,9 +99,7 @@ export default { ...@@ -122,9 +99,7 @@ export default {
color: #c01540; color: #c01540;
} }
} }
.content-left {
width: 753px;
}
.item-box { .item-box {
padding: 24px 0 0; padding: 24px 0 0;
// border-bottom: 1px solid #eee; // border-bottom: 1px solid #eee;
...@@ -226,7 +201,7 @@ export default { ...@@ -226,7 +201,7 @@ export default {
text-align: right; text-align: right;
} }
.cont { .cont {
width: 357px; flex: 1;
font-size: 14px; font-size: 14px;
color: #7d7d7d; color: #7d7d7d;
line-height: 20px; line-height: 20px;
......
<template> <template>
<div> <div>
<!-- <breadcrumb class="content-max-width crumb" :data="crumbData"/> -->
<div class="title-form">技能培训报名信息填写</div> <div class="title-form">技能培训报名信息填写</div>
<div class="form-box"> <div class="form-box">
<el-form ref="form" :model="form" :rules="rules" label-width="110px" class="forms" :disabled="isPayStatus"> <el-form ref="form" :model="form" :rules="rules" label-width="110px" class="forms" :disabled="isPayStatus">
<el-form-item label="院校名称" prop="school_name">
<el-input v-model="form.school_name"></el-input>
</el-form-item>
<el-form-item label="真实姓名" id="name" prop="username"> <el-form-item label="真实姓名" id="name" prop="username">
<el-input v-model="form.username"></el-input> <el-input v-model="form.username"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="性别" id="sex" prop="sex">
<el-radio-group v-model="form.sex">
<el-radio label="1"></el-radio>
<el-radio label="2"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="民族" id="mz" prop="nation">
<el-select v-model="form.nation" placeholder="请选择" class="width100" @change="invoiceTypeChange">
<el-option :label="item.name" :value="item.id" v-for="item in nations" :key="item.id"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="院系及职务">
<el-input v-model="form.department_duty"></el-input>
</el-form-item> -->
<el-form-item label="身份证号" prop="id_num"> <el-form-item label="身份证号" prop="id_num">
<el-input v-model="form.id_num"></el-input> <el-input v-model="form.id_num"></el-input>
</el-form-item> </el-form-item>
<!-- <el-form-item label="常用邮箱" id="mail">
<el-input v-model="form.email"></el-input>
</el-form-item> -->
<el-form-item label="住宿方式" id="zs" prop="live_status">
<el-radio-group v-model="form.live_status">
<el-radio :label="1">单住</el-radio>
<el-radio :label="2">合住</el-radio>
<el-radio :label="0"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item style="height: 10px">
<div class="line">发票信息填写</div>
</el-form-item>
<el-form-item label="发票类型" id="fplx" prop="invoice_type">
<el-select v-model="form.invoice_type" placeholder="请选择" class="width100" @change="invoiceTypeChange">
<el-option label="无" value="无"></el-option>
<el-option label="普通发票" value="增值税普通发票"></el-option>
<el-option label="专用发票" value="增值税专用发票"></el-option>
</el-select>
</el-form-item>
<el-form-item
label="发票抬头"
v-if="form.invoice_type && form.invoice_type !== '无'"
prop="invoice_title"
:rules="{ required: true, message: '请输入发票抬头', trigger: 'blur' }">
<el-input v-model="form.invoice_title"></el-input>
</el-form-item>
<el-form-item
label="纳税人识别号"
v-if="form.invoice_type && form.invoice_type !== '无'"
prop="taxpayer_registration_num"
:rules="{ required: true, message: '请输入纳税人识别号', trigger: 'blur' }">
<el-input v-model="form.taxpayer_registration_num"></el-input>
</el-form-item>
<el-form-item
label="注册地址"
v-if="form.invoice_type === '增值税专用发票'"
prop="invoice_address_mobile"
:rules="{ required: true, message: '请输入注册地址', trigger: 'blur' }">
<el-input v-model="form.invoice_address_mobile"></el-input>
</el-form-item>
<el-form-item
label="开户行及账号"
id="account"
v-if="form.invoice_type === '增值税专用发票'"
prop="opening_bank_account"
:rules="{ required: true, message: '请输入开户行及账号', trigger: 'blur' }">
<el-input v-model="form.opening_bank_account"></el-input>
</el-form-item>
<el-form-item label="发票内容" id="sh" v-if="form.invoice_type && form.invoice_type !== '无'">
<el-input v-model="form.invoice_detail" readonly></el-input>
</el-form-item>
<el-form-item label="手机号码" prop="mobile"> <el-form-item label="手机号码" prop="mobile">
<el-input v-model="form.mobile"></el-input> <el-input v-model="form.mobile"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="验证码" v-if="!isLogin"> <el-form-item label="验证码">
<el-input style="width: 166px" v-model="form.checked_code"></el-input> <el-input v-model="form.checked_code">
<el-button <template #append>
style="border-radius: 3px; width: 118px" <countdown @start="getCheckedCode"></countdown>
:disabled="isBtnDisabled" </template>
@click="getCheckedCode" </el-input>
id="checkedCode" </el-form-item>
>获取验证码</el-button <el-form-item label="学生来源" prop="school_name">
> <el-input v-model="form.school_name"></el-input>
</el-form-item> </el-form-item>
<!-- <el-form-item label="付款方式" label-width="110px"> <el-form-item label="等级" prop="grade">
<el-select v-model="form.i9" placeholder="请选择" class="width110"> <el-select v-model="form.grade" class="width100">
<el-option label="微信" value="shanghai"></el-option> <el-option v-for="item in gradList" :key="item.value" :label="item.label" :value="item.value"></el-option>
<el-option label="支付宝" value="beijing"></el-option>
</el-select> </el-select>
</el-form-item> -->
<!-- <el-form-item label="身份证号" label-width="110px">
<el-input v-model="form.i10"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="地址" label-width="110px"> <el-form-item label="证书邮寄地址" prop="address">
<el-input type="textarea" v-model="form.i11"></el-input> <el-input v-model="form.address"></el-input>
</el-form-item>
<el-form-item label="是否需要发票" prop="has_invoice">
<el-radio-group v-model="form.has_invoice">
<el-radio label="1"></el-radio>
<el-radio label="0"></el-radio>
</el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="培训需求" label-width="110px"> <template v-if="form.has_invoice == 1">
<el-input type="textarea" v-model="form.i12"></el-input> <el-form-item label="发票类型" prop="invoice_type">
</el-form-item> --> <el-select v-model="form.invoice_type" placeholder="请选择" class="width100">
<!-- <el-form-item label-width="110px"> <el-option label="普通发票" value="增值税普通发票"></el-option>
<el-upload <el-option label="专用发票" value="增值税专用发票"></el-option>
class="upload-demo" </el-select>
drag </el-form-item>
action="https://jsonplaceholder.typicode.com/posts/" <el-form-item
multiple> label="发票抬头"
<i class="el-icon-upload"></i> prop="invoice_title"
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> :rules="{ required: true, message: '请输入发票抬头', trigger: 'blur' }">
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div> <el-input v-model="form.invoice_title"></el-input>
</el-upload> </el-form-item>
</el-form-item> --> <el-form-item
<el-form-item label-width="110px"> label="纳税人识别号"
prop="taxpayer_registration_num"
:rules="{ required: true, message: '请输入纳税人识别号', trigger: 'blur' }">
<el-input v-model="form.taxpayer_registration_num"></el-input>
</el-form-item>
<template v-if="form.invoice_type === '增值税专用发票'">
<el-form-item
label="注册地址"
prop="invoice_address_mobile"
:rules="{ required: true, message: '请输入注册地址', trigger: 'blur' }">
<el-input v-model="form.invoice_address_mobile"></el-input>
</el-form-item>
<el-form-item
label="开户行及账号"
id="account"
prop="opening_bank_account"
:rules="{ required: true, message: '请输入开户行及账号', trigger: 'blur' }">
<el-input v-model="form.opening_bank_account"></el-input>
</el-form-item>
</template>
<el-form-item label="发票内容" prop="invoice_detail">
<el-input v-model="form.invoice_detail"></el-input>
</el-form-item>
</template>
<el-form-item>
<template v-if="isPayStatus"> <template v-if="isPayStatus">
<el-button style="width: 200px; margin-left: 44px" type="primary">已支付</el-button> <el-button style="width: 200px" type="primary">已支付</el-button>
</template> </template>
<template v-else> <template v-else>
<template v-if="isLogin"> <el-button style="width: 100px" type="primary" @click="formVerification(onSubmit)">提 交</el-button>
<template v-if="isInfoNull"> <el-button style="width: 100px; margin-left: 10px" type="primary" @click="formVerification(goPay)"
<el-button style="width: 200px; margin-left: 44px" type="primary" @click="formVerification(onSubmit)" >去付款</el-button
>提 交</el-button >
>
</template>
<template v-else>
<el-button style="width: 100px; margin-left: 10px" type="primary" @click="formVerification(onSubmit)"
>提 交</el-button
>
<el-button
v-if="!hidePayBtn"
style="width: 100px; margin-left: 10px"
type="primary"
@click="formVerification(goPay)"
>去付款</el-button
>
</template>
</template>
<template v-else>
<el-button style="width: 200px; margin-left: 44px" type="primary" @click="formVerification(onSubmit)"
>提 交</el-button
>
</template>
</template> </template>
<!-- <el-button style="width: 200px; margin-left: 44px" type="primary" @click="onSubmit">去付款</el-button> -->
<!-- <el-button @click="back">返回</el-button> -->
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<pay-pop <pay-pop
v-show="isPayPopShow" v-show="isPayPopShow"
:formData="form" :train="train"
:periods="id" :form="form"
@payStatus="payStatus" @payStatus="payStatus"
@closePayPop="closePayPop" @closePayPop="closePayPop"
class="payPop" /> class="payPop" />
...@@ -164,19 +99,17 @@ ...@@ -164,19 +99,17 @@
</template> </template>
<script> <script>
import * as api from '@/api/article' import * as api from '@/api/article'
// import { updateUserInfo } from '@/api/common' import payPop from './components/pay.vue'
import breadcrumb from '@/components/breadcrumb.vue'
import payPop from './components/payPop.vue'
import nations from '@/utils/nations' import nations from '@/utils/nations'
import countdown from '@/components/countdown.vue'
import datalist from './data.js'
const IDCARD_REG = const IDCARD_REG =
/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/ /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/
const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/ const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
const EMAIL_REG = /^[A-Za-z0-9]+([_\.\\-][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
export default { export default {
components: { components: { payPop, countdown },
breadcrumb,
payPop,
},
data() { data() {
const IDChecked = (rule, value, callback) => { const IDChecked = (rule, value, callback) => {
if (value) { if (value) {
...@@ -197,27 +130,23 @@ export default { ...@@ -197,27 +130,23 @@ export default {
} }
} }
return { return {
isInfoNull: false, isSubmit: false,
isPayStatus: false, isPayStatus: false,
crumbData: [
{
path: '/',
name: '首页',
},
{
name: '技能培训',
},
],
nations: nations, nations: nations,
gradList: [
{ label: '初级', value: '初级' },
{ label: '中级', value: '中级' },
{ label: '高级', value: '高级' },
],
form: { form: {
school_name: '', school_name: '',
// school_address: '', school_address: '',
username: '', username: '',
sex: '', sex: '',
nation: '', nation: '',
// department_duty: '', department_duty: '',
id_num: '', id_num: '',
// email: '', email: '',
live_status: '', live_status: '',
invoice_type: '', invoice_type: '',
invoice_title: '', invoice_title: '',
...@@ -227,6 +156,10 @@ export default { ...@@ -227,6 +156,10 @@ export default {
invoice_detail: '非学历教育*培训费', invoice_detail: '非学历教育*培训费',
mobile: '', mobile: '',
checked_code: '', checked_code: '',
grade: '',
address: '',
avatar: '',
has_invoice: '0',
}, },
rules: { rules: {
school_name: { required: true, message: '请输入院校名称', trigger: 'blur' }, school_name: { required: true, message: '请输入院校名称', trigger: 'blur' },
...@@ -251,19 +184,17 @@ export default { ...@@ -251,19 +184,17 @@ export default {
}, },
computed: { computed: {
id() { id() {
let id return this.$route.query.id
if (this.$route.query.id) id = parseInt(this.$route.query.id)
return id
}, },
hidePayBtn() { train() {
return [6, 202201, 202202, 2022001, 2022002].includes(this.id) return datalist.find((item) => item.id == this.id) || {}
}, },
}, },
created() { created() {
if (!this.id) { if (!this.id) {
this.$router.push('/train') this.$router.push('/train')
} }
api.getUserInfo().then((res) => { api.getUser().then((res) => {
if (res && res.code === 0) { if (res && res.code === 0) {
window.sessionStorage.userInfo = JSON.stringify(res.data) window.sessionStorage.userInfo = JSON.stringify(res.data)
this.isLogin = true this.isLogin = true
...@@ -271,36 +202,19 @@ export default { ...@@ -271,36 +202,19 @@ export default {
} }
}) })
}, },
methods: { methods: {
goPay() { goPay() {
this.isPayPopShow = true this.isPayPopShow = true
}, },
invoiceTypeChange(val) { // 获取报名信息
if (val !== '无') { async getDetail(call) {
this.form.invoice_detail = '非学历教育*培训费' const res = await api.getFormDetail({ periods: this.id })
this.isSubmit = Object.keys(res.data.detail).length > 0
this.form = Object.assign(this.form, res.data.detail)
if (res.data.detail.order_info) {
this.checkPay(res.data.detail.order_info.pay_order_id, call)
} }
}, },
getDetail(call) {
// 登录状态不需要手机号验证码
const params = {
periods: this.id,
}
api.getFormDetail(params).then((res) => {
if (res.code === 200) {
if (!Object.keys(res.data.detail).length) {
this.isInfoNull = true
} else {
this.form = Object.assign(this.form, res.data.detail)
this.form.sex = this.form.sex && this.form.sex.toString()
this.form.live_status = this.form.live_status && this.form.live_status.toString()
if (res.data.detail.order_info) {
this.checkPay(res.data.detail.order_info.pay_order_id, call)
}
}
}
})
},
// 支付 // 支付
checkPay(id, call) { checkPay(id, call) {
api.checkPay(id).then((res) => { api.checkPay(id).then((res) => {
...@@ -312,7 +226,6 @@ export default { ...@@ -312,7 +226,6 @@ export default {
call && call() call && call()
} }
} }
// isCodeShow = true
}) })
}, },
payStatus() { payStatus() {
...@@ -323,38 +236,9 @@ export default { ...@@ -323,38 +236,9 @@ export default {
closePayPop() { closePayPop() {
this.isPayPopShow = false this.isPayPopShow = false
}, },
/* onSubmit() {
let flag = true
Object.keys(this.form).map(item => {
if (item === 'i11' || item === 'i12') {
} else {
if (this.form[item] === '') {
flag = false
}
}
})
if (!flag) {
this.$message('请完善信息')
} else {
const param = {}
param.tag = 1
param.url = ''
const formData = {}
Object.keys(this.form).map(name => {
formData[this.formName[name]] = this.form[name]
})
param.table_content = JSON.stringify(formData)
api.formCommit(param).then(res => {
this.$message({
message: '提交成功',
type: 'success'
})
})
}
}, */
formVerification(call) { formVerification(call) {
if (this.isLogin) { if (this.isLogin) {
// this.form.mobile = '13111111111'
this.form.checked_code = '1234' this.form.checked_code = '1234'
if (this.form.order_no === '') { if (this.form.order_no === '') {
this.form.order_no = '1' this.form.order_no = '1'
...@@ -367,67 +251,15 @@ export default { ...@@ -367,67 +251,15 @@ export default {
return false return false
} }
}) })
// let flag = true
// Object.keys(this.form).map(item => {
// if (this.form[item] === '') {
// console.log(item)
// flag = false
// }
// })
// console.log(this.form)
// if (!flag) {
// // this.$message('请完善信息')
// this.message('请完善信息')
// } else if (!MOBILE_REG.test(this.form.mobile)) {
// this.message('手机号格式错误')
// } else if (!IDCARD_REG.test(this.form.id_num)) {
// this.message('身份证号格式错误')
// } else if (!EMAIL_REG.test(this.form.email)) {
// this.message('邮箱格式错误')
// } else {
// call()
// }
}, },
onSubmit() { onSubmit() {
/* let arr = [this.defaultRegister(), this.sendEnrollInfo()];
Promise.all(arr.map((promise)=>promise.catch((e)=>{
return e
})))
.then(res => {
let msg = ''
let registerError = '';
let enrollError = '';
res.forEach(item => {
if (item.type === 'register') {
if (item.state === 'fail') registerError = item.msg
} else {
if (item.state === 'fail') enrollError = item.msg
}
})
if(!registerError && !enrollError) {
this.$message.success('报名信息提交成功!')
setTimeout(() => {
this.$message.success('手机号注册成功!')
}, 300)
} else if (registerError && !enrollError) {
this.$message.success('报名信息提交成功!')
setTimeout(() => {
this.$message.error('注册失败,' + registerError)
}, 300)
} else {
this.$message.error(enrollError)
}
})
.catch(err => {
}) */
// 登录了直接走报名表单 没有登录走注册登录后再走报名表单 // 登录了直接走报名表单 没有登录走注册登录后再走报名表单
if (this.isLogin) { if (this.isLogin) {
this.sendEnrollInfo() this.submitForm()
.then((res) => { .then((res) => {
this.isInfoNull = false
this.getDetail()
this.message('提交成功!', 'success', 6000) this.message('提交成功!', 'success', 6000)
this.fetchUpdateUserInfo() this.getDetail()
this.updateUser()
// setTimeout(() => { // setTimeout(() => {
// this.message('手机号注册成功!','success', 6000) // this.message('手机号注册成功!','success', 6000)
// }, 300) // }, 300)
...@@ -446,7 +278,7 @@ export default { ...@@ -446,7 +278,7 @@ export default {
} else { } else {
this.defaultRegister().then((res) => { this.defaultRegister().then((res) => {
this.getDetail( this.getDetail(
this.sendEnrollInfo() this.submitForm()
.then((res) => { .then((res) => {
this.message('报名信息提交成功!', 'success', 6000) this.message('报名信息提交成功!', 'success', 6000)
// this.message('报名信息修改成功!','success', 6000) // this.message('报名信息修改成功!','success', 6000)
...@@ -472,36 +304,13 @@ export default { ...@@ -472,36 +304,13 @@ export default {
}) })
} }
}, },
sendEnrollInfo() { async submitForm() {
let promise = new Promise((resolve, reject) => { const res = await api.submitForm({ ...this.form, periods: this.id })
const form = { ...this.form } if (res && res.code === 200) {
form.periods = this.id this.$message('报名信息提交成功')
if (form.invoice_type !== '增值税专用发票') { } else {
form.invoice_address_mobile = '' this.$message.error('报名信息提交失败')
form.opening_bank_account = '' }
if (form.invoice_type === '无') {
form.invoice_title = ''
form.taxpayer_registration_num = ''
form.invoice_detail = ''
}
}
api.formCommit(form).then((res) => {
if (res && res.code === 200) {
resolve({
type: 'enroll',
state: 'success',
msg: '报名信息提交成功',
})
} else {
reject({
type: 'enroll',
state: 'fail',
msg: res.msg || '报名信息提交失败',
})
}
})
})
return promise
}, },
getCheckedCode() { getCheckedCode() {
if (!this.form.mobile) { if (!this.form.mobile) {
...@@ -513,7 +322,7 @@ export default { ...@@ -513,7 +322,7 @@ export default {
account: this.form.mobile, account: this.form.mobile,
service: 'sofia.ezijing.com', service: 'sofia.ezijing.com',
} }
api.sendCheckedCode(param).then((res) => { api.sendCode(param).then((res) => {
if (res && res.code === 0) { if (res && res.code === 0) {
this.$message({ this.$message({
message: '验证码发送成功', message: '验证码发送成功',
...@@ -530,63 +339,18 @@ export default { ...@@ -530,63 +339,18 @@ export default {
this.btnDisabledTimer() this.btnDisabledTimer()
} }
}, },
btnDisabledTimer() {
let count = 60
let timer = setInterval(() => {
count--
if (count < 1) {
clearInterval(timer)
this.isBtnDisabled = false
$('#checkedCode').html('获取验证码')
} else {
$('#checkedCode').html(count + '秒后重发')
}
}, 1000)
},
defaultRegister() { defaultRegister() {
// let param = {
// account: this.form.mobile,
// code: this.form.checked_code,
// username: this.randomNickname(),
// password: '123456',
// secret: true,
// service: 'sofia.ezijing.com'
// }
// let promise = new Promise((resolve, reject) => {
// api.register(param).then(res => {
// if (res && res.code === 0) {
// //code: 0注册成功 5已注册
// resolve({
// type: 'register',
// state: 'success',
// msg: 'success'
// })
// } else if (res && res.code === 5) {
// reject({
// type: 'register',
// state: 'fail',
// msg: res.msg || '此手机号已经被注册'
// })
// } else {
// reject({
// type: 'register',
// state: 'fail',
// msg: res.msg || '注册失败'
// })
// }
// })
// })
let param = { let param = {
mobile: this.form.mobile, mobile: this.form.mobile,
code: this.form.checked_code, code: this.form.checked_code,
nickname: this.form.username || this.randomNickname(), nickname: this.form.username,
project_id: 5002, project_id: 5002,
// password: '123456', // password: '123456',
// secret: true, // secret: true,
// service: 'sofia.ezijing.com' // service: 'sofia.ezijing.com'
} }
let promise = new Promise((resolve, reject) => { let promise = new Promise((resolve, reject) => {
api.register2(param).then((res) => { api.registerAndLogin(param).then((res) => {
if (res && res.code === 0) { if (res && res.code === 0) {
//code: 0注册成功 5已注册 //code: 0注册成功 5已注册
resolve({ resolve({
...@@ -610,39 +374,17 @@ export default { ...@@ -610,39 +374,17 @@ export default {
} }
}) })
}) })
/* let promise = new Promise((resolve, reject) => {
resolve('success')
}) */
return promise return promise
}, },
randomNickname() {
const chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n']
let str = ''
for (let i = 0; i < 5; i++) {
let idx = parseInt(14 * Math.random())
str += chars[idx]
}
const timeStamp = Date.now()
return str + '_' + timeStamp
},
back() {
this.$router.go(-1)
},
message(errMsg, type, dur) { message(errMsg, type, dur) {
this.$message({ this.$message({ message: errMsg, type: type || 'info', duration: dur || 3000 })
message: errMsg,
type: type || 'info',
duration: dur || 3000,
})
}, },
fetchUpdateUserInfo() { async updateUser() {
console.log(1111) if (!this.form.username) {
const params = { return
real_name: this.form.username || '',
} }
api.updateUserInfo(params).then((res) => { await api.updateUser({ real_name: this.form.username })
console.log(res)
})
}, },
}, },
} }
......
<template>
<div>
<!-- <breadcrumb class="content-max-width crumb" :data="crumbData"/> -->
<div class="form-box">
<el-form ref="form" :model="form" label-width="80px" class="forms">
<el-form-item label="姓名" label-width="100px">
<el-input v-model="form.i1"></el-input>
</el-form-item>
<el-form-item label="性别" label-width="100px">
<el-select v-model="form.i2" placeholder="请选择" class="width100">
<el-option label="男" value="shanghai"></el-option>
<el-option label="女" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="名族" label-width="100px">
<el-input v-model="form.i3"></el-input>
</el-form-item>
<el-form-item label="职务" label-width="100px">
<el-input v-model="form.i4"></el-input>
</el-form-item>
<el-form-item label="手机号码" label-width="100px">
<el-input v-model="form.i5"></el-input>
</el-form-item>
<el-form-item label="身份证号" label-width="100px">
<el-input v-model="form.i6"></el-input>
</el-form-item>
<el-form-item label="邮箱" label-width="100px">
<el-input v-model="form.i7"></el-input>
</el-form-item>
<el-form-item label="单/合住" label-width="100px">
<el-select v-model="form.i8" placeholder="请选择" class="width100">
<el-option label="单住" value="shanghai"></el-option>
<el-option label="合住" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="抬头" label-width="100px">
<el-input v-model="form.i9"></el-input>
</el-form-item>
<el-form-item label="税号" label-width="100px">
<el-input v-model="form.i10"></el-input>
</el-form-item>
<el-form-item label="地址" label-width="100px">
<el-input v-model="form.i11"></el-input>
</el-form-item>
<el-form-item label="开户行、账号" label-width="100px">
<el-input v-model="form.i12"></el-input>
</el-form-item>
<!-- <el-form-item label="付款方式" label-width="100px">
<el-select v-model="form.i9" placeholder="请选择" class="width100">
<el-option label="微信" value="shanghai"></el-option>
<el-option label="支付宝" value="beijing"></el-option>
</el-select>
</el-form-item> -->
<!-- <el-form-item label="身份证号" label-width="100px">
<el-input v-model="form.i10"></el-input>
</el-form-item>
<el-form-item label="地址" label-width="100px">
<el-input type="textarea" v-model="form.i11"></el-input>
</el-form-item>
<el-form-item label="培训需求" label-width="100px">
<el-input type="textarea" v-model="form.i12"></el-input>
</el-form-item> -->
<!-- <el-form-item label-width="100px">
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-form-item> -->
<el-form-item label="填写模板" label-width="100px">
<span style="color: #0053c6; cursor: pointer">下载Excel模板</span>
<el-upload
style="margin-left: auto"
class="upload-demo"
action="/api/microservices/admin_api/file/upload"
:on-success="handleChange">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">请下载模板后,按照模板格式填写完整资料后,上传报名表。</div>
</el-upload>
</el-form-item>
<el-form-item label-width="100px">
<el-button type="primary" @click="onSubmit">提交</el-button>
<el-button @click="back">返回</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import * as api from '@/api/article'
import breadcrumb from '@/components/breadcrumb.vue'
export default {
components: {
breadcrumb,
},
data() {
return {
file: '',
fileList: [],
crumbData: [
{
path: '/',
name: '首页',
},
{
name: '技能培训',
},
],
form: {
i1: '',
i2: '',
i3: '',
i4: '',
i5: '',
i6: '',
i7: '',
i8: '',
i9: '',
i10: '',
i11: '',
i12: '',
},
formName: {
i1: '姓名',
i2: '性别',
i3: '名族',
i4: '职务',
i5: '手机号码',
i6: '身份证号',
i7: '邮箱',
i8: '单/合住',
i9: '抬头',
i10: '税号',
i11: '地址',
i12: '开户行、账号',
},
}
},
methods: {
onSubmit() {
let flag = true
Object.keys(this.form).map((item) => {
if (item === 'i11' || item === 'i12') {
} else {
if (this.form[item] === '') {
flag = false
}
}
})
if (!flag) {
this.$message('请完善信息')
} else {
const param = {}
param.tag = 2
param.url = this.file
const formData = {}
Object.keys(this.form).map((name) => {
formData[this.formName[name]] = this.form[name]
})
param.table_content = JSON.stringify(formData)
api.formCommit(param).then((res) => {
this.$message({
message: '提交成功',
type: 'success',
})
})
}
},
handleChange(data) {
this.file = data.data[0].full_path
},
back() {
this.$router.go(-1)
},
},
}
</script>
<style lang="scss" scoped>
.content-max-width {
width: 1112px;
margin: 24px auto 0 auto;
}
.form-box {
padding: 30px 0;
width: 430px;
margin: 0 auto;
.width100 {
width: 100%;
}
}
.reg-form-box {
width: 380px;
margin: 0 auto;
padding: 24px 0;
}
::v-deep {
.forms {
i {
font-size: 20px;
}
input {
border-radius: 4px;
}
}
}
</style>
<template> <template>
<div class="content-max-width"> <div>
<template> <img class="banner" src="/images/banner2.png" />
<div class="new-tits">技能培训报名</div> <section class="section">
<screen-tabs <h1 class="pt-80">技能培训公告</h1>
class="screen-tabs-box" <notice></notice>
:activeIndex.sync="tabsIndex" <div class="nav-list">
:data="screenTabsData" <div class="nav-list_item" v-for="(item, index) in navList" :key="index" @click="register(item)">
@tabChange="HandleTabChange"></screen-tabs> <div class="item-icon">
<div class="train-mian"> <img class="n-active" :src="item.icon" />
<ul> <img class="active" :src="item.aIcon" />
<template v-for="(item, index) in tabsContentList">
<li :key="index" v-if="tabsIndex === 0 || tabsIndex === item.activeIndex">
<item :data="item"></item>
</li>
</template>
</ul>
<div class="calendar">
<inlineCalendar mode="during"></inlineCalendar>
<div class="btn-box">
<div class="btn">确定</div>
</div> </div>
<div class="item-txt">{{ item.text }}</div>
</div> </div>
</div> </div>
<div class="pagination"> <h2 class="pt-80" id="md1" style="text-align: center">技能培训报名</h2>
<el-pagination :page-size="pages.page_size" layout="prev, pager, next, jumper" :total="pages.total"> <h3 style="margin-top: 50px">一、培训目标</h3>
</el-pagination> <p class="des">
培训目标:培养初级商务数据分析师。<br />
学员通过本阶段课程学习,了解商务数据分析师相关岗位要求和岗位基础知识,学会数据采集、清洗、处理、可视化和基础分析技能,使学员能够胜任商务数据分析师基础岗位工作。在工作中为企业决策提供基础数据与依据。
</p>
<h3>二、培训对象</h3>
<p class="des">企业职工、职业院校学生、退伍军人</p>
<h3>三、培训方式</h3>
<p class="des">
根据“金融产品数字化营销职业技能等级证书”试点工作需求,分批次(分区域)开展师资培训。培训采取结构化、多元化的培训方式设计,包含在线视频、专题授课、案例研讨、实践演练、互动讨论、汇报展示、整体考核等。
</p>
<h3>四、培训内容</h3>
<p class="des">
1.1+X证书制度的意义与政策解读<br />
2.金融产品数字化营销发展现状与前景展望<br />
3.职业技能等级标准解读<br />
4.核心知识串讲与互动交流<br />
5.实训案例剖析与互动交流<br />
6.课程考试
</p>
<h3>五、培训费用</h3>
<p class="des">详见每期技能培训通知。</p>
<div class="t-btn">
<div class="name">通知关注:</div>
<router-link to="/news">
<div class="btn">通知</div>
</router-link>
</div> </div>
</template> <div class="t-btn">
<template v-if="false"> <div class="name">报名入口:</div>
<search /> <router-link to="/train/list">
<noData /> <div class="btn">报名</div>
</template> </router-link>
</div>
<div class="pt-box">
<h1 id="md2">学习平台</h1>
<div class="flex">
<img src="https://webapp-pub.ezijing.com/project/x-new/train-dn.png" />
<div class="pt-right">
<div class="txt">
紫荆教育为师生精心打造综合一体化学习平台,可实现考核体系的标准化,数据资源的统一化,师资学习的多元化,以及学习管理的系统化,最终形成学、练、训、考、评、管一体的数字化营销学习平台。
</div>
<a target="_blank" href="https://x-learning.ezijing.com/course/learn">
<div class="btn">进入系统</div>
</a>
</div>
</div>
</div>
</section>
<vue-passport ref="passport" @ready="onReady" :options="options"></vue-passport>
</div> </div>
</template> </template>
<script> <script>
import * as api from '@/api/article' import notice from '@/components/notice.vue'
import screenTabs from '@/components/tabs/screenTabs.vue'
import noData from '@/components/noData.vue'
import item from './components/item.vue'
import search from './components/search.vue'
import datalist from './data.js'
export default { export default {
components: { components: {
screenTabs, notice,
item,
noData,
search,
}, },
data() { data() {
return { return {
articleClassify: this.$store.state.classify, navList: [
list: [], {
tabsIndex: 1, icon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon1.png',
tabsContentList: datalist, aIcon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon-a1.png',
value3: '', text: '注册账号',
btnTabsData: { isRegister: true,
options: ['会议报名', '核心专家'], },
{
icon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon2.png',
aIcon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon-a2.png',
text: '技能培训报名',
id: 'md1',
},
{
icon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon3.png',
aIcon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon-a3.png',
text: '学习平台',
id: 'md2',
},
{
icon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon4.png',
aIcon: 'https://webapp-pub.ezijing.com/project/x-new/train-icon-a4.png',
text: '证书查询',
path: '/queryCard',
},
],
isLogin: false,
options: {
baseUrl: import.meta.env.VITE_API_BASE_URL,
register: {
data: {
username: `ezijing-${new Date().getTime()}`,
},
fields: ['account', 'code', 'password'],
},
login: {
account: {
onSuccess: this.loginSuccess,
},
phone: {
onSuccess: this.loginSuccess,
},
},
}, },
screenTabsData: {
name: '筛选:',
options: ['全部', '正在进行', '未开始', '已结束'],
},
pages: {},
crumbData: [{ path: '/', name: '首页' }, { name: '技能培训' }],
} }
}, },
mounted() { mounted() {},
// this.newsList()
},
methods: { methods: {
HandleTabChange(index) { register(n) {
console.log(index) if (n.isRegister) {
this.tabsIndex = index this.passport.register()
return false
}
if (n.id) {
const element = document.getElementById(n.id)
if (element) {
const offsetTop = element.getBoundingClientRect().top + window.scrollY
window.scrollTo({
top: offsetTop,
behavior: 'smooth',
})
}
return false
}
if (n.path) {
this.$router.push(n)
}
},
onReady(isLogin, user = {}) {
this.user = user
window.sessionStorage.userInfo = JSON.stringify(user)
}, },
newsList() { loginSuccess(data) {
const loading = this.$loading({ this.passport.checkLoginStatus((isLogin, user = {}) => {
lock: true, window.sessionStorage.userInfo = JSON.stringify(user)
text: 'Loading', this.isLogin = isLogin
spinner: 'el-icon-loading', this.user = user
background: 'rgba(0, 0, 0, 0.7)', // this.$router.push('/my')
}) })
if (!Object.keys(this.$store.state.classify).length) { window.location.reload()
setTimeout(() => { },
this.articleClassify = this.$store.state.classify },
this.newsList() computed: {
}, 2000) passport() {
} else { return this.$refs.passport
const findId = this.articleClassify[0].children.find((item) => {
return item.display_name === '会议报名'
})
api.getArticle({ category_id: findId.id }).then((res) => {
this.list = res.data.list
this.pages = res.data.pages
loading.close()
})
}
}, },
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.crumb { .section {
padding-top: 24px; width: 1200px;
margin: 0 auto;
}
.banner {
width: 100%;
display: block;
}
h1 {
font-size: 32px;
font-weight: bold;
color: #333333;
line-height: 34px;
text-align: center;
margin-bottom: 50px;
}
.pt-80 {
padding-top: 80px;
}
.pt-100 {
padding-top: 100px;
} }
.pagination { .nav-list {
padding: 24px 0;
display: flex; display: flex;
justify-content: center; justify-content: space-between;
padding-top: 60px;
.nav-list_item {
width: 264px;
height: 264px;
background: #ffffff;
box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.1);
cursor: pointer;
&:hover {
background-color: #aa1941;
.item-icon {
.n-active {
display: none;
}
.active {
display: block;
}
}
.item-txt {
color: #fff;
}
}
.item-icon {
height: 150px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
.active {
display: none;
}
}
.item-txt {
font-size: 22px;
color: #333333;
text-align: center;
}
}
} }
.content-max-width { h2 {
width: 1112px; font-size: 24px;
margin: 0 auto; color: #333333;
} }
.btn-tabs-box { h3 {
padding: 24px 0; color: #333333;
justify-content: left; font-size: 20px;
margin-bottom: 5px;
}
.des {
font-size: 18px;
margin-bottom: 40px;
line-height: 30px;
color: #333333;
} }
.train-mian { .t-btn {
display: flex; display: flex;
ul { align-items: center;
width: 700px; margin-bottom: 20px;
.name {
font-size: 18px;
color: #333333;
} }
.calendar { .btn {
width: 336px; width: 150px;
height: 385px; background: #aa1941;
background: #ffffff; border-radius: 6px 6px 6px 6px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.06); color: #fff;
margin-left: auto; text-align: center;
.btn-box { line-height: 40px;
width: 100%; }
border-top: 1px solid #eee; }
overflow: hidden; .pt-box {
padding-top: 40px;
padding-bottom: 40px;
.flex {
display: flex;
margin-top: 35px;
img {
min-width: 293px;
display: block;
}
.pt-right {
margin-left: 70px;
.txt {
font-size: 18px;
color: #333333;
line-height: 30px;
}
.btn { .btn {
margin-top: 10px; width: 150px;
width: 62px; line-height: 40px;
height: 36px; background: #aa1941;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #c01540 100%); border-radius: 6px 6px 6px 6px;
border-radius: 4px;
text-align: center; text-align: center;
line-height: 36px;
color: #fff; color: #fff;
font-size: 14px;
float: right;
margin-right: 24px;
cursor: pointer; cursor: pointer;
margin-top: 60px;
} }
} }
} }
} }
::v-deep { .new-list {
.m-row { display: flex;
&::before { justify-content: space-between;
background-color: #fff !important; margin-bottom: 100px;
.new-list_item {
box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.1);
background-color: #fff;
width: 380px;
height: 560px;
box-sizing: border-box;
padding: 60px 30px 30px;
.new-item_title {
font-size: 20px;
font-weight: bold;
color: #333333;
line-height: 100%;
margin-bottom: 30px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
} .new-item_con {
.m-week-header { font-size: 16px;
background: #fff; color: #333333;
} line-height: 26px;
.m-calendar { height: 234px;
.m-toolbar { display: -webkit-box !important;
height: 58px; overflow: hidden;
background: #fff; text-overflow: ellipsis;
border-bottom: 1px solid #eee; word-break: break-all;
margin-bottom: 10px; -webkit-box-orient: vertical;
-webkit-line-clamp: 9;
}
.new-item_btn {
font-size: 16px;
color: #aa1941;
line-height: 100%;
margin: 20px 0;
} }
} }
.m-during {
background: #c01540 !important;
}
.m-prev-btn {
width: 11px !important;
height: 18px !important;
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/8cc2155bd9f98ae7e50d64bf4bad9e6a.png) !important;
background-size: 100% 100% !important;
}
.m-next-btn {
width: 11px !important;
height: 18px !important;
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/ef4abd96b29419b0eb182c291f802488.png) !important;
background-size: 100% 100% !important;
}
}
.new-tits {
text-align: center;
font-size: 20px;
font-weight: bold;
color: #444444;
line-height: 33px;
margin-bottom: 16px;
margin-top: 36px;
} }
</style> </style>
<template>
<div class="content-max-width">
<div class="new-tits">技能培训报名</div>
<screen-tabs
class="screen-tabs-box"
:activeIndex.sync="tabsIndex"
:data="screenTabsData"
@tabChange="HandleTabChange"></screen-tabs>
<div class="train-mian">
<ul>
<template v-for="(item, index) in tabsContentList">
<li :key="index" v-if="tabsIndex === 0 || tabsIndex === item.activeIndex">
<listItem :data="item" />
</li>
</template>
</ul>
<div class="calendar">
<inlineCalendar mode="during"></inlineCalendar>
<div class="btn-box">
<div class="btn">确定</div>
</div>
</div>
</div>
</div>
</template>
<script>
import screenTabs from '@/components/tabs/screenTabs.vue'
import noData from '@/components/noData.vue'
import listItem from './components/listItem.vue'
import datalist from './data.js'
export default {
components: { screenTabs, listItem, noData },
data() {
return {
tabsIndex: 1,
tabsContentList: datalist,
screenTabsData: {
name: '筛选:',
options: ['全部', '正在进行', '未开始', '已结束'],
},
}
},
methods: {
HandleTabChange(index) {
this.tabsIndex = index
},
},
}
</script>
<style lang="scss" scoped>
.crumb {
padding-top: 24px;
}
.pagination {
padding: 24px 0;
display: flex;
justify-content: center;
}
.content-max-width {
width: 1112px;
margin: 0 auto;
}
.btn-tabs-box {
padding: 24px 0;
justify-content: left;
}
.train-mian {
display: flex;
ul {
width: 700px;
}
.calendar {
width: 336px;
height: 385px;
background: #ffffff;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.06);
margin-left: auto;
.btn-box {
width: 100%;
border-top: 1px solid #eee;
overflow: hidden;
.btn {
margin-top: 10px;
width: 62px;
height: 36px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #c01540 100%);
border-radius: 4px;
text-align: center;
line-height: 36px;
color: #fff;
font-size: 14px;
float: right;
margin-right: 24px;
cursor: pointer;
}
}
}
}
::v-deep {
.m-row {
&::before {
background-color: #fff !important;
}
}
.m-week-header {
background: #fff;
}
.m-calendar {
.m-toolbar {
height: 58px;
background: #fff;
border-bottom: 1px solid #eee;
margin-bottom: 10px;
}
}
.m-during {
background: #c01540 !important;
}
.m-prev-btn {
width: 11px !important;
height: 18px !important;
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/8cc2155bd9f98ae7e50d64bf4bad9e6a.png) !important;
background-size: 100% 100% !important;
}
.m-next-btn {
width: 11px !important;
height: 18px !important;
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/ef4abd96b29419b0eb182c291f802488.png) !important;
background-size: 100% 100% !important;
}
}
.new-tits {
text-align: center;
font-size: 20px;
font-weight: bold;
color: #444444;
line-height: 33px;
margin-bottom: 16px;
margin-top: 36px;
}
</style>
...@@ -13,23 +13,17 @@ const routes = [ ...@@ -13,23 +13,17 @@ const routes = [
{ path: '', component: () => import('@/pages/home/index.vue') }, { path: '', component: () => import('@/pages/home/index.vue') },
// 工作动态 // 工作动态
{ path: '/news', component: () => import('@/pages/news/index.vue') }, { path: '/news', component: () => import('@/pages/news/index.vue') },
// 工作动态详情
{ path: '/news/detail', component: () => import('@/pages/news/detail.vue') }, { path: '/news/detail', component: () => import('@/pages/news/detail.vue') },
// 1+x产品 // 1+x产品
{ path: '/product', component: () => import('@/pages/product/index.vue') }, { path: '/product', component: () => import('@/pages/product/index.vue') },
// 技能培训
{ path: '/teacher', component: () => import('@/pages/teachers/index.vue') },
// 证书成绩查询 // 证书成绩查询
{ path: '/attestation', component: () => import('@/pages/attestation/index.vue') }, { path: '/attestation', component: () => import('@/pages/attestation/index.vue') },
// // 教学服务 // 技能培训
{ path: '/service', component: () => import('@/pages/service/index.vue') },
{ path: '/train', component: () => import('@/pages/train/index.vue') }, { path: '/train', component: () => import('@/pages/train/index.vue') },
// 技能培训详情 // 技能培训详情
{ path: '/train/list', component: () => import('@/pages/train/list.vue') },
{ path: '/train/detail', component: () => import('@/pages/train/detail.vue') }, { path: '/train/detail', component: () => import('@/pages/train/detail.vue') },
// 技能培训详情->报名
{ path: '/train/form', component: () => import('@/pages/train/form.vue') }, { path: '/train/form', component: () => import('@/pages/train/form.vue') },
{ path: '/school/form', component: () => import('@/pages/train/form2.vue') },
{ path: '/register', component: () => import('@/pages/account/register.vue') },
// 证书成绩查询 // 证书成绩查询
{ path: '/queryCard', component: () => import('@/pages/home/queryCard.vue') }, { path: '/queryCard', component: () => import('@/pages/home/queryCard.vue') },
], ],
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论