Skip to content

P
project-online-old
提交 f5ec3beb authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

chore: update

上级 41e66b8c
隐藏空白字符变更
内嵌 并排
正在显示 包含 163 行增加 和 54 行删除
package-lock.json
浏览文件 @ f5ec3beb
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"@ezijing/vue-passport": "^1.0.3", "@ezijing/vue-passport": "^1.0.3",
"axios": "^1.5.0", "axios": "^1.5.0",
"blueimp-md5": "^2.19.0",
"element-ui": "^2.15.14", "element-ui": "^2.15.14",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"lodash": "^4.17.20", "lodash": "^4.17.20",
...@@ -925,6 +926,12 @@ ...@@ -925,6 +926,12 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/blueimp-md5": {
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
"integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==",
"license": "MIT"
},
"node_modules/boolbase": { "node_modules/boolbase": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
...@@ -3441,6 +3448,11 @@ ...@@ -3441,6 +3448,11 @@
"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
"dev": true "dev": true
}, },
"blueimp-md5": {
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
"integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w=="
},
"boolbase": { "boolbase": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
......
package.json
浏览文件 @ f5ec3beb
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
"dependencies": { "dependencies": {
"@ezijing/vue-passport": "^1.0.3", "@ezijing/vue-passport": "^1.0.3",
"axios": "^1.5.0", "axios": "^1.5.0",
"blueimp-md5": "^2.19.0",
"element-ui": "^2.15.14", "element-ui": "^2.15.14",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"lodash": "^4.17.20", "lodash": "^4.17.20",
......
src/pages/train/detail.vue
浏览文件 @ f5ec3beb
...@@ -64,12 +64,11 @@ ...@@ -64,12 +64,11 @@
</div> </div>
</template> </template>
<script> <script>
import item from './components/listItem.vue'
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: { item, breadcrumb }, components: { breadcrumb },
data() { data() {
return { return {
datalist, datalist,
......
src/pages/train/form.vue
浏览文件 @ f5ec3beb
<template> <template>
<div> <div class="form">
<div class="title-form">技能培训报名信息填写</div> <div class="form-title">技能培训报名信息填写</div>
<div class="form-box"> <div class="form-box">
<el-form ref="form" :model="form" :rules="rules" label-width="110px" :disabled="isPay"> <el-form ref="form" :model="form" :rules="rules" label-width="110px" :disabled="isPay">
<el-form-item label="真实姓名" id="name" prop="username"> <el-form-item label="真实姓名" 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="性别" prop="sex">
<el-radio-group v-model="form.sex">
<el-radio v-for="item in sexList" :label="item.value" :key="item.value">{{ item.label }}</el-radio>
</el-radio-group>
</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>
...@@ -19,9 +24,21 @@ ...@@ -19,9 +24,21 @@
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="学生来源" prop="school_name"> <el-form-item label="所属院校" prop="school_name">
<el-input v-model="form.school_name"></el-input> <el-input v-model="form.school_name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="个人照片" prop="avatar" required>
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:http-request="handleUpload"
accept="image/*">
<img v-if="form.avatar" :src="form.avatar" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<p class="form-tips">注：照片需为蓝底免冠一寸照片，jpg格式。</p>
</el-form-item>
<el-form-item label="等级" prop="grade" required> <el-form-item label="等级" prop="grade" required>
<el-select v-model="form.grade" class="width100"> <el-select v-model="form.grade" class="width100">
<el-option v-for="item in gradList" :key="item.value" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in gradList" :key="item.value" :label="item.label" :value="item.value"></el-option>
...@@ -29,6 +46,7 @@ ...@@ -29,6 +46,7 @@
</el-form-item> </el-form-item>
<el-form-item label="证书邮寄地址" prop="address" required> <el-form-item label="证书邮寄地址" prop="address" required>
<el-input type="textarea" :rows="4" v-model="form.address"></el-input> <el-input type="textarea" :rows="4" v-model="form.address"></el-input>
<p class="form-tips">注：请务必确保填写的邮寄地址准确无误，此地址将用于证书的邮寄</p>
</el-form-item> </el-form-item>
<el-form-item label="是否需要发票" prop="has_invoice"> <el-form-item label="是否需要发票" prop="has_invoice">
<el-radio-group v-model="form.has_invoice"> <el-radio-group v-model="form.has_invoice">
...@@ -93,20 +111,39 @@ ...@@ -93,20 +111,39 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<pay-pop <pay-pop
class="payPop"
:train="train" :train="train"
:form="form" :form="form"
@success="getDetail" @success="getDetail"
@close="payVisible = false" @close="payVisible = false"
v-if="payVisible" v-if="payVisible" />
class="payPop" />
<el-dialog v-if="isPay" :visible.sync="paySuccessDialogVisible" width="600px">
<el-result icon="success">
<template slot="extra">
<p style="margin-bottom: 40px">
您已缴费成功！待后台审核，为方便您快速开启学习之旅，请加入 QQ 群：1032404918
。入群后，您将获取专属学习账号，即可按照指引进行课程学习，如有任何疑问，群内工作人员会随时为您答疑解惑，祝您学业有成！
</p>
<el-button type="primary" @click="paySuccessDialogVisible = false">确定</el-button>
</template>
</el-result>
</el-dialog>
<div class="form-card" @click="handleDownload" v-if="form.admission_pic">
<i class="el-icon el-icon-postcard"></i>
<p>准考证下载</p>
</div>
</div> </div>
</template> </template>
<script> <script>
import * as api from '@/api/article' import * as api from '@/api/article'
import payPop from './components/pay.vue' import payPop from './components/pay.vue'
import nations from '@/utils/nations'
import countdown from '@/components/countdown.vue' import countdown from '@/components/countdown.vue'
import { upload } from '@/utils/upload'
import { saveAs } from 'file-saver'
import datalist from './data.js' import datalist from './data.js'
import { IDCARD_REG, MOBILE_REG } from '@/utils/validate' import { IDCARD_REG, MOBILE_REG } from '@/utils/validate'
...@@ -137,12 +174,16 @@ export default { ...@@ -137,12 +174,16 @@ export default {
isSubmit: false, isSubmit: false,
isPay: false, isPay: false,
payVisible: false, payVisible: false,
nations: nations, paySuccessDialogVisible: true,
gradList: [ gradList: [
{ label: '初级', value: '初级' }, { label: '初级', value: '初级' },
{ label: '中级', value: '中级' }, { label: '中级', value: '中级' },
{ label: '高级', value: '高级' }, { label: '高级', value: '高级' },
], ],
sexList: [
{ label: '男', value: '1' },
{ label: '女', value: '2' },
],
form: { form: {
school_name: '', school_name: '',
school_address: '', school_address: '',
...@@ -207,6 +248,13 @@ export default { ...@@ -207,6 +248,13 @@ export default {
}) })
}, },
methods: { methods: {
async handleUpload(xhr) {
const url = await upload(xhr.file)
this.form.avatar = url
},
handleDownload() {
saveAs(this.form.admission_pic, '准考证')
},
// 获取报名信息 // 获取报名信息
async getDetail() { async getDetail() {
const res = await api.getFormDetail({ periods: this.id }) const res = await api.getFormDetail({ periods: this.id })
...@@ -248,51 +296,81 @@ export default { ...@@ -248,51 +296,81 @@ export default {
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss">
.div-form { .form {
display: flex; .form-title {
} text-align: center;
.title-form { font-size: 26px;
text-align: center; // line-height: 30px;
font-size: 26px; margin-top: 30px;
// line-height: 30px; color: #222;
margin-top: 30px; }
color: #222;
} .form-box {
.line { padding: 30px 0;
position: absolute; width: 400px;
top: 10px; margin: 0 auto;
left: 50%; .width100 {
width: 1000px; width: 100%;
transform: translate(-50%, -10px); }
border-top: 1px dashed #ccc; .form-tips {
line-height: 30px; margin-top: 5px;
// margin-bottom: 30px; font-size: 13px;
} line-height: 1.4;
.content-max-width { color: #999;
width: 1112px; }
margin: 24px auto 0 auto; }
}
.form-box { .payPop {
padding: 30px 0; position: fixed;
width: 400px; top: 0;
margin: 0 auto; left: 0;
.width100 {
width: 100%; width: 100%;
height: 100%;
background: rgba(#000000, 0.5);
z-index: 99;
}
.avatar-uploader {
line-height: 1;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
background-color: #fff;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
object-fit: contain;
}
.form-card {
position: fixed;
top: 40%;
right: 0;
background-color: #fff;
padding: 10px;
border-radius: 6px;
text-align: center;
cursor: pointer;
.el-icon {
margin-bottom: 10px;
font-size: 40px;
}
} }
}
.reg-form-box {
width: 380px;
margin: 0 auto;
padding: 24px 0;
}
.payPop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(#000000, 0.5);
z-index: 99;
} }
</style> </style>
src/utils/upload.js 0 → 100644
浏览文件 @ f5ec3beb
import md5 from 'blueimp-md5'
import { getSignature, uploadFile } from '@/api/base'
export async function upload(blob) {
const key = 'upload/eec/' + md5(new Date().getTime() + Math.random().toString(36).slice(-8)) + '.png'
const response = await getSignature()
const params = {
key,
host: response.host,
OSSAccessKeyId: response.accessid,
policy: response.policy,
signature: response.signature,
success_action_status: '200',
file: blob,
url: `${response.host}/${key}`,
}
await uploadFile(params)
return params.url
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论