Skip to content

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

chore: update

上级 41e66b8c
显示空白字符变更
内嵌 并排
正在显示 包含 147 行增加 和 38 行删除
package-lock.json
浏览文件 @ f5ec3beb
......@@ -10,6 +10,7 @@
"dependencies": {
"@ezijing/vue-passport": "^1.0.3",
"axios": "^1.5.0",
"blueimp-md5": "^2.19.0",
"element-ui": "^2.15.14",
"file-saver": "^2.0.5",
"lodash": "^4.17.20",
......@@ -925,6 +926,12 @@
"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": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
......@@ -3441,6 +3448,11 @@
"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
"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": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
......
package.json
浏览文件 @ f5ec3beb
......@@ -11,6 +11,7 @@
"dependencies": {
"@ezijing/vue-passport": "^1.0.3",
"axios": "^1.5.0",
"blueimp-md5": "^2.19.0",
"element-ui": "^2.15.14",
"file-saver": "^2.0.5",
"lodash": "^4.17.20",
......
src/pages/train/detail.vue
浏览文件 @ f5ec3beb
......@@ -64,12 +64,11 @@
</div>
</template>
<script>
import item from './components/listItem.vue'
import breadcrumb from '@/components/breadcrumb.vue'
import datalist from './data.js'
export default {
components: { item, breadcrumb },
components: { breadcrumb },
data() {
return {
datalist,
......
src/pages/train/form.vue
浏览文件 @ f5ec3beb
<template>
<div>
<div class="title-form">技能培训报名信息填写</div>
<div class="form">
<div class="form-title">技能培训报名信息填写</div>
<div class="form-box">
<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-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-input v-model="form.id_num"></el-input>
</el-form-item>
......@@ -19,9 +24,21 @@
</template>
</el-input>
</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-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-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>
......@@ -29,6 +46,7 @@
</el-form-item>
<el-form-item label="证书邮寄地址" prop="address" required>
<el-input type="textarea" :rows="4" v-model="form.address"></el-input>
<p class="form-tips">注：请务必确保填写的邮寄地址准确无误，此地址将用于证书的邮寄</p>
</el-form-item>
<el-form-item label="是否需要发票" prop="has_invoice">
<el-radio-group v-model="form.has_invoice">
......@@ -93,20 +111,39 @@
</el-form-item>
</el-form>
</div>
<pay-pop
class="payPop"
:train="train"
:form="form"
@success="getDetail"
@close="payVisible = false"
v-if="payVisible"
class="payPop" />
v-if="payVisible" />
<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>
</template>
<script>
import * as api from '@/api/article'
import payPop from './components/pay.vue'
import nations from '@/utils/nations'
import countdown from '@/components/countdown.vue'
import { upload } from '@/utils/upload'
import { saveAs } from 'file-saver'
import datalist from './data.js'
import { IDCARD_REG, MOBILE_REG } from '@/utils/validate'
......@@ -137,12 +174,16 @@ export default {
isSubmit: false,
isPay: false,
payVisible: false,
nations: nations,
paySuccessDialogVisible: true,
gradList: [
{ label: '初级', value: '初级' },
{ label: '中级', value: '中级' },
{ label: '高级', value: '高级' },
],
sexList: [
{ label: '男', value: '1' },
{ label: '女', value: '2' },
],
form: {
school_name: '',
school_address: '',
......@@ -207,6 +248,13 @@ export default {
})
},
methods: {
async handleUpload(xhr) {
const url = await upload(xhr.file)
this.form.avatar = url
},
handleDownload() {
saveAs(this.form.admission_pic, '准考证')
},
// 获取报名信息
async getDetail() {
const res = await api.getFormDetail({ periods: this.id })
......@@ -248,45 +296,32 @@ export default {
},
}
</script>
<style lang="scss" scoped>
.div-form {
display: flex;
}
.title-form {
<style lang="scss">
.form {
.form-title {
text-align: center;
font-size: 26px;
// line-height: 30px;
margin-top: 30px;
color: #222;
}
.line {
position: absolute;
top: 10px;
left: 50%;
width: 1000px;
transform: translate(-50%, -10px);
border-top: 1px dashed #ccc;
line-height: 30px;
// margin-bottom: 30px;
}
.content-max-width {
width: 1112px;
margin: 24px auto 0 auto;
}
.form-box {
}
.form-box {
padding: 30px 0;
width: 400px;
margin: 0 auto;
.width100 {
width: 100%;
}
}
.reg-form-box {
width: 380px;
margin: 0 auto;
padding: 24px 0;
}
.payPop {
.form-tips {
margin-top: 5px;
font-size: 13px;
line-height: 1.4;
color: #999;
}
}
.payPop {
position: fixed;
top: 0;
left: 0;
......@@ -294,5 +329,48 @@ export default {
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;
}
}
}
</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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论