Skip to content

C
cert-show-h5
提交 2493c5a8 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

开发页面掉接口

上级 3c10959d
隐藏空白字符变更
内嵌 并排
正在显示 包含 552 行增加 和 274 行删除
.config.dev.js
浏览文件 @ 2493c5a8
...@@ -5,10 +5,10 @@ module.exports = { ...@@ -5,10 +5,10 @@ module.exports = {
// apiBaseURL: '//demo-login.ezijing.com/', // apiBaseURL: '//demo-login.ezijing.com/',
webpack: { webpack: {
externals: { externals: {
'CKEDITOR': 'window.CKEDITOR', CKEDITOR: 'window.CKEDITOR',
'Base64': 'window.Base64', Base64: 'window.Base64',
'md5': 'window.md5', md5: 'window.md5',
'regeneratorRuntime': 'window.regeneratorRuntime' regeneratorRuntime: 'window.regeneratorRuntime'
}, },
devServer: { devServer: {
proxy: { proxy: {
...@@ -31,9 +31,7 @@ module.exports = { ...@@ -31,9 +31,7 @@ module.exports = {
} }
} }
}, },
ProvidePlugin: { ProvidePlugin: {},
},
others: { others: {
loginUrl: 'https://login2.ezijing.com/' loginUrl: 'https://login2.ezijing.com/'
} }
......
src/api/account.js
浏览文件 @ 2493c5a8
import httpRequest from '@/utils/axios' import httpRequest from '@/utils/axios'
// 登录
export function login(data) {
return httpRequest.post('/api/passport/rest/login', data)
}
// 绑定微信
export function bindWechat(data) {
return httpRequest.post('/api/passport/rest/wechat/bind-unionid', data)
}
// 修改密码
export function updatePassword(data) {
return httpRequest.post('/api/usercenter/user/change-pwd-by-cookie', data)
}
// 重置密码
export function resetPassword(data) {
return httpRequest.post('/api/usercenter/user/update-pwd', data)
}
// 发送验证码
export function sendCode(data) {
return httpRequest.post('/api/usercenter/user/send-code', data)
}
// 登出
export function logout() {
return httpRequest.get('/api/zy/user/logout')
}
// 获取用户信息 // 获取用户信息
export function getUser() { export function getUser() {
return httpRequest.get('/api/zy/user/getinfo') return httpRequest.get('/api/certs/v1/student/get-info')
}
// 修改用户信息
export function updateUser(data) {
return httpRequest.post('/api/usercenter/user/update-user', data)
} }
// 绑定游客 // 获取学籍信息
export function bindVisitor(data) { export function getSchoolInfo(params) {
return httpRequest.post('/api/zy/user/bind-account', data) return httpRequest.get('/api/certs/v1/student/get-school-info', { params })
} }
// 获取是否VIP // 获取查询条件
export function getIsVip() { export function getCondition() {
return httpRequest.get('/api/zy/user/is-vip') return httpRequest.get('/api/certs/v1/student/get-condition')
} }
// 创建游客用户 // 成绩查询
export function createGuestUser() { export function getScore(params) {
return httpRequest.get('/api/zy/user/create-guest-user') return httpRequest.get('/api/certs/v1/student/get-score', { params })
} }
// 校验验证码 // 成绩查询
export function checkCode(params) { export function getCerts(params) {
return httpRequest.get('/api/usercenter/user/check-code', { params }) return httpRequest.get('/api/certs/v1/student/get-certificate', { params })
}
// 选择用户角色
export function chooseRole(data) {
return httpRequest.post('/api/zy/user/choose-role', data)
} }
// // 登出
// export function logout() {
// return httpRequest.get('/api/zy/user/logout')
// }
src/components/layout/shms/header.vue
浏览文件 @ 2493c5a8
<template> <template>
<div class="app-header"> <div class="app-header">
<div class="max-width"> <div class="max-width">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/certificate/web-logo.png" class="logo"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/certificate/web-logo.png" class="logo" />
<ul class="menu-content"> <ul class="menu-content">
<li <li
v-for="(item, index) in menu" v-for="(item, index) in menu"
:key="index" :key="index"
:class="$route.path == item.path && 'active'" :class="$route.path == item.path && 'active'"
@click="$router.push({ path: item.path })" @click="$router.push({ path: item.path })"
>{{ item.name }}</li> >
{{ item.name }}
</li>
</ul> </ul>
<div class="user-content"> <div class="user-content">
<div class="photo"> <div class="photo">
<img :src="user.avatar" class="photo"> <img :src="user.head_img" class="photo" />
</div> </div>
<div class="name">{{ user.nickname || user.username }}</div> <div class="name">{{ user.english_name || user.chinese_name }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -37,16 +39,16 @@ export default { ...@@ -37,16 +39,16 @@ export default {
// localStorage.setItem("i18n_locale", key) // localStorage.setItem("i18n_locale", key)
computed: { computed: {
user() { user() {
return this.$store.state.user return this.$store.state.user.data
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-header{ .app-header {
background: #FFFFFF; background: #ffffff;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.08); box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.08);
.max-width{ .max-width {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
...@@ -54,18 +56,18 @@ export default { ...@@ -54,18 +56,18 @@ export default {
height: 90px; height: 90px;
margin: 0 auto; margin: 0 auto;
} }
.logo{ .logo {
height: 62px; height: 62px;
display: block; display: block;
} }
.menu-content{ .menu-content {
width: 623px; width: 623px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
li{ li {
position: relative; position: relative;
// a{ // a{
font-size: 20px; font-size: 20px;
...@@ -73,35 +75,35 @@ export default { ...@@ -73,35 +75,35 @@ export default {
text-decoration: none; text-decoration: none;
// } // }
cursor: pointer; cursor: pointer;
&.active{ &.active {
// a{ // a{
color: #ED322D; color: #ed322d;
// } // }
&::after{ &::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -15px; bottom: -15px;
left: 0; left: 0;
width: 100%; width: 100%;
height: 3px; height: 3px;
background: #ED322D; background: #ed322d;
} }
} }
} }
} }
.user-content{ .user-content {
display: flex; display: flex;
align-items: center; align-items: center;
.photo{ .photo {
width: 43px; width: 43px;
height: 43px; height: 43px;
border: 1px solid #707070; border: 1px solid #707070;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
} }
.name{ .name {
font-size: 14px; font-size: 14px;
color: #5F5F5F; color: #5f5f5f;
margin-left: 10px; margin-left: 10px;
} }
} }
......
src/i18n/lang/en.js
浏览文件 @ 2493c5a8
...@@ -7,5 +7,39 @@ export const shmsLang = { ...@@ -7,5 +7,39 @@ export const shmsLang = {
}, },
home: { home: {
title: 'Enjoy the unique charms of Swiss Hospitality Education' title: 'Enjoy the unique charms of Swiss Hospitality Education'
} },
status: {
selectName: 'Program',
sexMan: 'Man',
sexWoMan: 'WoMan',
sexUnknown: 'Unknown',
proTitle: 'PROFILE',
mobile: 'Mobile Phone',
email: 'Email',
idNumber: 'ID Number',
state: 'Current state',
added: 'Date Added',
graduated: 'Date Graduated',
degTitle: 'DEGREES',
major: 'Major',
Level: 'Degree Level',
Type: 'Degree Type',
selectName2: 'Semester',
selectName3: 'Course Name'
},
score: {
name: 'Name',
mobile: 'Mobile Phone',
program: 'Program',
idNumber: 'ID Number',
email: 'Email',
date: 'Announcement date',
title: 'TEST SCORES',
course: 'Course Name',
semester: 'Semester',
score: 'Offical Score'
},
downloadBtn: 'Download',
searchBtn: 'Search',
selectHolder: 'ALL'
} }
src/i18n/lang/zh.js
浏览文件 @ 2493c5a8
...@@ -7,5 +7,39 @@ export const shmsLang = { ...@@ -7,5 +7,39 @@ export const shmsLang = {
}, },
home: { home: {
title: 'Enjoy the unique charms of Swiss Hospitality Education' title: 'Enjoy the unique charms of Swiss Hospitality Education'
} },
status: {
selectName: 'Program',
sexMan: 'Man',
sexWoMan: 'WoMan',
sexUnknown: 'Unknown',
proTitle: 'PROFILE',
mobile: 'Mobile Phone',
email: 'Email',
idNumber: 'ID Number',
state: 'Current state',
added: 'Date Added',
graduated: 'Date Graduated',
degTitle: 'DEGREES',
major: 'Major',
Level: 'Degree Level',
Type: 'Degree Type',
selectName2: 'Semester',
selectName3: 'Course Name'
},
score: {
name: 'Name',
mobile: 'Mobile Phone',
program: 'Program',
idNumber: 'ID Number',
email: 'Email',
date: 'Announcement date',
title: 'TEST SCORES',
course: 'Course Name',
semester: 'Semester',
score: 'Offical Score'
},
downloadBtn: 'Download',
searchBtn: 'Search',
selectHolder: 'ALL'
} }
src/pages/shms/certs/index.vue
浏览文件 @ 2493c5a8
<template> <template>
<div class="app-card"> <div class="app-card">
<div class="form-box"> <div class="form-box">
<el-select v-model="value" placeholder="请选择" size="small"> <el-select @change="changes" v-model="value" :placeholder="$t('shmsLang.selectHolder')" size="small" clearable>
<el-option <el-option v-for="item in options" :key="item.id" :label="item.english_name" :value="item.id"> </el-option>
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select> </el-select>
<div class="down-btn">Download</div> <div class="down-btn" @click="openPdf">{{ $t('shmsLang.downloadBtn') }}</div>
</div> </div>
<div class="certs-img"> <div class="certs-img" v-if="imgUrl">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/certificate/shms-certs.png" alt=""> <img :src="imgUrl" />
</div>
<div class="null" v-else>
<img src="https://webapp-pub.ezijing.com/certificate/certs-null.png" alt="" />
<div class="text">No certificate information currently available</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import * as api from '@/api/account.js'
export default { export default {
data() { data() {
return { return {
options: [{ options: [],
value: '选项1', value: '',
label: '黄金糕' pageData: null,
}, { htmlTitle: 'pdf',
value: '选项2', imgUrl: '',
label: '双皮奶' pdfUrl: ''
}], }
value: '' },
mounted() {
this.getCondition()
this.changes()
},
methods: {
openPdf() {
if (this.pdfUrl) {
window.open(this.pdfUrl)
}
},
changes() {
this.imgUrl = ''
this.pdfUrl = ''
api
.getCerts({ project_id: this.value })
.then(response => {
this.imgUrl = response.data.image_url
this.pdfUrl = response.data.pdf_url
})
.finally(() => {})
},
getCondition() {
api
.getCondition()
.then(response => {
this.options = response.data.get_school_info.project_map
})
.finally(() => {})
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-card{ .app-card {
width: 1000px; width: 1000px;
margin: 30px auto; margin: 30px auto;
background: #fff; background: #fff;
padding: 30px; padding: 30px;
.form-box{ .form-box {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
.down-btn{ .down-btn {
width: 100px; width: 100px;
height: 34px; height: 34px;
background: #D82E27; background: #d82e27;
opacity: 1; opacity: 1;
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
line-height: 34px; line-height: 34px;
color: #FFFFFF; color: #ffffff;
margin-left: 23px; margin-left: 23px;
cursor: pointer; cursor: pointer;
} }
} }
.certs-img{ .certs-img {
width: 670px; width: 670px;
margin: 0 auto; margin: 0 auto;
img{ img {
width: 100%; width: 100%;
margin-top: 20px; margin-top: 20px;
} }
} }
} }
.null {
padding: 200px 0;
img {
display: block;
margin: 0 auto;
width: 170px;
}
.text {
font-size: 24px;
color: #999999;
line-height: 33px;
text-align: center;
margin-top: 30px;
}
}
</style> </style>
src/pages/shms/score/components/form.vue
浏览文件 @ 2493c5a8
<template> <template>
<div class="form-content"> <div class="form-content">
<el-form ref="form" :inline="true" :model="form" label-width="120px"> <el-form ref="form" :inline="true" :model="form" label-width="120px">
<el-form-item label="Program"> <el-form-item :label="$t('shmsLang.status.selectName')">
<el-select size="small" style="width:240px" v-model="form.region" placeholder="请选择"> <el-select
<el-option label="2019 Spring Quater" value="shanghai"></el-option> clearable
size="small"
style="width: 240px"
v-model="form.project_id"
:placeholder="$t('shmsLang.selectHolder')"
>
<el-option
v-for="item in allOption.project_map"
:key="item.id"
:label="$i18n.locale == 'zh' ? item.chinese_name : item.english_name"
:value="item.id"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="Semester"> <el-form-item :label="$t('shmsLang.status.selectName2')">
<el-select size="small" style="width:240px" v-model="form.region" placeholder="请选择"> <el-select
<el-option label="2019 Spring Quater" value="shanghai"></el-option> clearable
size="small"
style="width: 240px"
v-model="form.semester"
:placeholder="$t('shmsLang.selectHolder')"
>
<el-option
v-for="item in allOption.semester_map"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="Course Name"> <el-form-item :label="$t('shmsLang.status.selectName3')">
<el-select size="small" style="width:240px" v-model="form.region" placeholder="请选择"> <el-select
<el-option label="2019 Spring Quater" value="shanghai"></el-option> clearable
size="small"
style="width: 240px"
v-model="form.course_id"
:placeholder="$t('shmsLang.selectHolder')"
>
<el-option
v-for="item in allOption.course_map"
:key="item.id"
:label="$i18n.locale == 'zh' ? item.chinese_name : item.english_name"
:value="item.id"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="form-btn"> <div class="form-btn">
<div>Search</div> <div @click="search">{{ $t('shmsLang.searchBtn') }}</div>
<div>Download</div> <div @click="$emit('downPdf')">{{ $t('shmsLang.downloadBtn') }}</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import * as api from '@/api/account.js'
export default { export default {
data() { data() {
return { return {
form: {} form: {},
allOption: {}
}
},
mounted() {
this.getCondition()
},
methods: {
search() {
const getOption = this.form?.project_id
? this.allOption.project_map.find(item => {
return item.id === this.form.project_id
}).english_name
: 'ALL'
const datas = {
form: this.form,
programName: getOption
}
this.$emit('search', datas)
},
getCondition() {
api
.getCondition()
.then(response => {
this.allOption = response.data.get_score
console.log(this.allOption)
})
.finally(() => {})
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.form-content{ .form-content {
display: flex; display: flex;
.form-btn{ .form-btn {
display: flex; display: flex;
div{ div {
width: 100px; width: 100px;
height: 34px; height: 34px;
background: #D82E27; background: #d82e27;
opacity: 1; opacity: 1;
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
line-height: 34px; line-height: 34px;
color: #FFFFFF; color: #ffffff;
margin-left: 23px; margin-left: 23px;
cursor: pointer; cursor: pointer;
} }
......
src/pages/shms/score/components/info.vue
浏览文件 @ 2493c5a8
<template> <template>
<div class="info-content"> <div class="info-content">
<div class="info-top"> <div class="info-top">
<div class="info-top_box"> <div class="info-top_box" v-for="(item, index) in infoItem" :key="index">
<div class="temp"> <div class="temp" v-for="cItem in item" :key="cItem.name">
<div class="name">Name</div> <div class="name">{{ cItem.name }}</div>
<div class="value">Xue Zhang</div> <div class="value">{{ cItem.value }}</div>
</div>
<div class="temp">
<div class="name">Mobile Phone</div>
<div class="value">18923455643</div>
</div>
<div class="temp">
<div class="name">Program</div>
<div class="value">MBA（Hospitality）</div>
</div>
</div>
<div class="info-top_box">
<div class="temp">
<div class="name">ID Number</div>
<div class="value">1234567890986456221</div>
</div>
<div class="temp">
<div class="name">Email</div>
<div class="value">xuexue@163.com</div>
</div>
<div class="temp">
<div class="name">Start Time</div>
<div class="value">Jan 08. 2020</div>
</div> </div>
</div> </div>
</div> </div>
<div class="title">TEST SCORES</div> <div class="title">{{ $t('shmsLang.score.title') }}</div>
<div class="th-box"> <div class="th-box">
<div class="th" v-for="(item, index) in th" :key="index">{{ item }}</div> <div class="th" v-for="(item, index) in th" :key="index">{{ item }}</div>
</div> </div>
<div class="td-box"> <div class="td-box" v-for="(item, index) in data.scores" :key="index">
<template v-for="item in td"> <div class="td">{{ item.course_english_name }}</div>
<div class="td" v-for="(cItem, index) in item" :key="index">{{ cItem }}</div> <div class="td">{{ item.semester }}</div>
</template> <div class="td">{{ item.project_english_name }}</div>
<div class="td">{{ item.score }}</div>
<div class="td">{{ item.pubdate }}</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: {
data: {
type: Object
},
program: {
type: String
}
},
data() { data() {
return { return {
th: ['Course Name', 'Semester', 'Program', 'Offical Score', 'Offical Date'], th: [
td: [ this.$t('shmsLang.score.course'),
['课程名', '2019 Spring Quater', 'MBA(Global, Chinese Language)', '34', 'Jan 09. 2020'] this.$t('shmsLang.score.semester'),
this.$t('shmsLang.score.program'),
this.$t('shmsLang.score.score'),
this.$t('shmsLang.score.date')
],
infoItem: []
}
},
mounted() {},
computed: {},
watch: {
data: function (newVal, oldVal) {
this.infoItem = [
[
{
name: this.$t('shmsLang.score.name'),
value: this.data.student_info.english_name
},
{
name: this.$t('shmsLang.score.mobile'),
value: this.data.student_info.mobile
},
{
name: this.$t('shmsLang.score.program'),
value: this.program || 'ALL'
}
],
[
{
name: this.$t('shmsLang.score.idNumber'),
value: this.data.student_info.student_number
},
{
name: this.$t('shmsLang.score.email'),
value: this.data.student_info.email
},
{
name: this.$t('shmsLang.score.date'),
value: this.data.student_info.pubdate
}
]
] ]
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.info-content{ .info-content {
border: 1px solid #F2F2F2; border: 1px solid #f2f2f2;
padding: 30px; padding: 30px;
.info-top{ .info-top {
padding: 30px 0; padding: 30px 0;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
display: flex; display: flex;
.temp{ .temp {
display: flex; display: flex;
align-items: center; align-items: center;
width: 440px; width: 440px;
margin-bottom: 12px; margin-bottom: 12px;
&:nth-child(3){ &:nth-child(3) {
margin-bottom: 0; margin-bottom: 0;
} }
.name{ .name {
width: 120px; width: 180px;
text-align: right; text-align: right;
margin-right: 15px; margin-right: 15px;
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 22px;
color: #292929; color: #292929;
} }
.value{ .value {
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 22px;
color: #838383; color: #838383;
} }
} }
} }
.title{ .title {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
line-height: 24px; line-height: 24px;
color: #292929; color: #292929;
margin: 24px 0 40px; margin: 24px 0 40px;
} }
.th-box{ .th-box {
height: 36px; height: 36px;
padding: 10px 0; padding: 10px 0;
background: #F4F4F4; background: #f4f4f4;
display: flex; display: flex;
align-items: center; align-items: center;
.th{ .th {
font-size: 16px; font-size: 16px;
line-height: 19px; line-height: 19px;
color: #838383; color: #838383;
...@@ -105,13 +133,13 @@ export default { ...@@ -105,13 +133,13 @@ export default {
text-align: center; text-align: center;
} }
} }
.td-box{ .td-box {
min-height: 37px; min-height: 37px;
padding: 10px 0; padding: 10px 0;
border-bottom: 1px solid #D3D3D3; border-bottom: 1px solid #d3d3d3;
display: flex; display: flex;
align-items: center; align-items: center;
.td{ .td {
flex: 1; flex: 1;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
......
src/pages/shms/score/index.vue
浏览文件 @ 2493c5a8
<template> <template>
<div class="app-card"> <div class="app-card">
<scach-form /> <scach-form @downPdf="downPdf" @search="search" />
<info /> <app-info id="pdfDom" :data="data" :program="program"/>
</div> </div>
</template> </template>
<script> <script>
import scachForm from './components/form.vue' import scachForm from './components/form.vue'
import info from './components/info.vue' import appInfo from './components/info.vue'
import * as api from '@/api/account.js'
export default { export default {
components: { scachForm, info } components: { scachForm, appInfo },
data() {
return {
pageData: null,
htmlTitle: 'pdf',
data: {},
program: ''
}
},
mounted() {
this.getScore()
},
methods: {
search(params) {
this.program = params.programName
this.getScore(params.form)
},
downPdf() {
this.getPdf('#pdfDom')
},
getScore(param) {
api
.getScore(param)
.then(response => {
this.data = response.data
})
.finally(() => {})
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-card{ .app-card {
width: 1000px; width: 1000px;
margin: 30px auto; margin: 30px auto;
background: #fff; background: #fff;
......
src/pages/shms/status/components/degrees.vue
浏览文件 @ 2493c5a8
<template> <template>
<div> <div>
<div class="degrees-title">DEGREES</div> <div class="degrees-title">{{ this.$t('shmsLang.status.degTitle') }}</div>
<div class="degrees-content"> <div class="degrees-content">
<div class="th-box"> <div class="th-box">
<div class="th">Major</div> <div class="th" v-for="(item, index) in thItem" :key="index">{{ item }}</div>
<div class="th">Degree Level</div>
<div class="th">Degree Type</div>
</div> </div>
<div class="td-box"> <div class="td-box" v-for="(item, index) in degreesItem" :key="index">
<div class="td">Hospitality</div> <div class="td">{{ item.major }}</div>
<div class="td">Master</div> <div class="td">{{ item.level }}</div>
<div class="td">Master Business Administration</div> <div class="td">{{ item.type }}</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: {
degreesItem: {
type: Array
}
},
data() {
return {
thItem: [this.$t('shmsLang.status.major'), this.$t('shmsLang.status.Level'), this.$t('shmsLang.status.Type')]
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.degrees-title{ .degrees-title {
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
color: #292929; color: #292929;
margin: 24px 0; margin: 24px 0;
} }
.degrees-content{ .degrees-content {
width: 857px; width: 857px;
margin: 0 auto; margin: 0 auto;
.th-box{ .th-box {
height: 56px; height: 56px;
background: #F8F8F8; background: #f8f8f8;
display: flex; display: flex;
align-items: center; align-items: center;
.th{ .th {
flex: 1; flex: 1;
font-size: 18px; font-size: 18px;
color: #292929; color: #292929;
&:nth-child(1){ &:nth-child(1) {
text-indent: 4em; text-indent: 4em;
} }
} }
} }
.td-box{ .td-box {
min-height: 37px; min-height: 37px;
padding: 10px 0; padding: 10px 0;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px solid #D3D3D3; border-bottom: 1px solid #d3d3d3;
.td{ .td {
flex: 1; flex: 1;
font-size: 16px; font-size: 16px;
color: #838383; color: #838383;
&:nth-child(1){ &:nth-child(1) {
text-indent: 4em; text-indent: 4em;
} }
} }
......
src/pages/shms/status/components/profile.vue
浏览文件 @ 2493c5a8
<template> <template>
<div> <div>
<div class="profile-title">PROFILE</div> <div class="profile-title">{{ $t('shmsLang.status.proTitle') }}</div>
<div class="profile-content"> <div class="profile-content">
<div class="photo"> <div class="photo">
<img src="https://img1.ezijing.com/default/20200911/7b2d8ec55e836f458e5c416648fa7099.jpg" > <img :src="info.head_img" />
</div> </div>
<div class="info-box"> <div class="info-box" style="margin-right: 20px">
<div class="name">Xue Zhang</div> <div class="name">{{ $i18n.locale == 'zh' ? info.chinese_name : info.english_name }}</div>
<div class="info">Man | 38 | Dalian,Liaoning,CHINA</div> <div class="info">{{ setSex(info.gender) }} | {{ info.age }} | {{ info.city }},{{ info.country }}</div>
<div class="info-temp m-t33"> <div class="info-temp m-t33">
<div class="name w120">Mobile Phone</div> <div class="name w120">{{ $t('shmsLang.status.mobile') }}</div>
<div class="value">17878907890</div> <div class="value">{{ info.mobile }}</div>
</div> </div>
<div class="info-temp m-t33"> <div class="info-temp m-t33">
<div class="name w120">Email</div> <div class="name w120">{{ $t('shmsLang.status.email') }}</div>
<div class="value">xuexue@163.com</div> <div class="value">{{ info.email }}</div>
</div> </div>
</div> </div>
<div class="info-box"> <div class="info-box">
<div class="info-temp"> <div class="info-temp">
<div class="name w140">ID Number</div> <div class="name w140">{{ $t('shmsLang.status.idNumber') }}</div>
<div class="value">2834567</div> <div class="value">{{ info.student_number }}</div>
</div>
<div class="info-temp m-t17">
<div class="name w140">Program</div>
<div class="value">MBA（Hospitality）</div>
</div> </div>
<div class="info-temp m-t17"> <div class="info-temp m-t17">
<div class="name w140">Current state</div> <div class="name w140">{{ $t('shmsLang.status.state') }}</div>
<div class="value">In School</div> <div class="value">{{ currentStatus[info.graduation_status] }}</div>
</div> </div>
<div class="info-temp m-t17"> <div class="info-temp m-t17">
<div class="name w140">Date Added </div> <div class="name w140">{{ $t('shmsLang.status.added') }}</div>
<div class="value">Jan 08. 2020</div> <div class="value">{{ info.created_time }}</div>
</div> </div>
<div class="info-temp m-t17"> <div class="info-temp m-t17">
<div class="name w140">Date Graduated</div> <div class="name w140">{{ $t('shmsLang.status.graduated') }}</div>
<div class="value">Jan 08. 2021</div> <div class="value">{{ info.graduation_time }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -44,67 +40,109 @@ ...@@ -44,67 +40,109 @@
</template> </template>
<script> <script>
export default { export default {
props: {
info: {
type: Object
}
},
data() {
return {
currentStatus: {
1: '在读',
2: '毕业',
3: '失联',
4: '休学',
5: '退学'
}
}
},
computed: {
setSex() {
return n => {
const sex = {
1: this.$t('shmsLang.status.sexMan'),
0: this.$t('shmsLang.status.sexWoMan'),
2: this.$t('shmsLang.status.sexUnknown')
}
return sex[n]
}
},
setStatus() {
return n => {
const status = {
1: '在读',
2: '毕业',
3: '失联',
4: '休学',
5: '退学'
}
return status[n]
}
}
},
mounted() {},
methods: {}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.profile-title{ .profile-title {
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
color: #292929; color: #292929;
margin-top: 6px; margin-top: 6px;
} }
.profile-content{ .profile-content {
padding: 24px 0 30px; padding: 24px 0 30px;
border-bottom: 1px solid #E8E8E8; border-bottom: 1px solid #e8e8e8;
display: flex; display: flex;
justify-content: center; justify-content: center;
.photo{ .photo {
width: 146px; width: 146px;
height: 180px; height: 180px;
background: #FFFFFF; background: #ffffff;
border: 1px solid #707070; border: 1px solid #707070;
margin-right: 38px; margin-right: 38px;
img{ img {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
} }
} }
.info-box{ .info-box {
.name{ .name {
font-size: 28px; font-size: 28px;
font-weight: bold; font-weight: bold;
line-height: 100%; line-height: 100%;
color: #292929; color: #292929;
} }
.info{ .info {
font-size: 18px; font-size: 18px;
line-height: 22px; line-height: 22px;
color: #838383; color: #838383;
margin-top: 16px; margin-top: 16px;
min-width: 333px; min-width: 333px;
} }
.info-temp{ .info-temp {
display: flex; display: flex;
align-items: center; align-items: center;
&.m-t33{ &.m-t33 {
margin-top: 33px; margin-top: 33px;
} }
&.m-t17{ &.m-t17 {
margin-top: 17px; margin-top: 30px;
} }
.w120{ .w120 {
width: 120px; width: 120px;
} }
.w140{ .w140 {
width: 140px; width: 140px;
} }
.name{ .name {
color: #292929; color: #292929;
font-size: 18px; font-size: 18px;
text-align: right; text-align: right;
} }
.value{ .value {
font-size: 16px; font-size: 16px;
color: #838383; color: #838383;
margin-left: 19px; margin-left: 19px;
......
src/pages/shms/status/index.vue
浏览文件 @ 2493c5a8
<template> <template>
<div class="app-card"> <div class="app-card">
<div class="dowload-box"> <div class="dowload-box">
<div class="btn" @click="getPdf('#pdfDom')">Download</div> <div class="info-temp">
<div class="name w140">{{ $t('shmsLang.status.selectName') }}</div>
<div class="value">
<el-select clearable v-model="programValue" :placeholder="$t('shmsLang.selectHolder')" @change="changes">
<el-option
v-for="item in options"
:key="item.id"
:label="$i18n.locale == 'zh' ? item.chinese_name : item.english_name"
:value="item.id"
>
</el-option>
</el-select>
</div>
</div>
<div class="btn" @click="getPdf('#pdfDom')">{{ $t('shmsLang.downloadBtn') }}</div>
</div> </div>
<div id="pdfDom"> <div id="pdfDom">
<profile /> <profile :info="info" @changes="changes" />
<degrees /> <degrees :degreesItem="degreesItem" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import profile from './components/profile.vue' import profile from './components/profile.vue'
import degrees from './components/degrees.vue' import degrees from './components/degrees.vue'
import * as api from '@/api/account.js'
export default { export default {
components: { profile, degrees }, components: { profile, degrees },
data() { data() {
return { return {
pageData: null, pageData: null,
htmlTitle: '导出PDF的标题' htmlTitle: 'pdf',
info: {},
degreesItem: [],
options: [],
programValue: ''
}
},
mounted() {
this.getSchoolInfo()
this.getCondition()
},
methods: {
getCondition() {
api
.getCondition()
.then(response => {
this.options = response.data.get_school_info.project_map
})
.finally(() => {})
},
changes() {
this.getSchoolInfo({ project_id: this.programValue })
},
getSchoolInfo(param) {
api
.getSchoolInfo(param)
.then(response => {
this.info = response.data.student_info
this.degreesItem = response.data.degrees
})
.finally(() => {})
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-card{ .app-card {
width: 1000px; width: 1000px;
margin: 30px auto; margin: 30px auto;
background: #fff; background: #fff;
padding: 24px 30px 40px; padding: 24px 30px 40px;
.dowload-box{ .dowload-box {
display: flex; display: flex;
.btn{ justify-content: flex-end;
.info-temp {
margin-right: 20px;
display: flex;
align-items: center;
.name {
color: #292929;
font-size: 18px;
text-align: right;
}
.value {
font-size: 16px;
color: #838383;
margin-left: 19px;
}
}
.btn {
width: 100px; width: 100px;
background: #D82E27; background: #d82e27;
border-radius: 4px; border-radius: 4px;
font-size: 16px; font-size: 16px;
line-height: 34px; line-height: 34px;
color: #FFFFFF; color: #ffffff;
text-align: center; text-align: center;
margin-left: auto;
cursor: pointer; cursor: pointer;
} }
} }
......
src/store/index.js
浏览文件 @ 2493c5a8
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import { getUser, logout, getIsVip, createGuestUser } from '@/api/account' import { getUser } from '@/api/account'
Vue.use(Vuex) Vue.use(Vuex)
const store = new Vuex.Store({ const store = new Vuex.Store({
...@@ -40,13 +40,13 @@ const store = new Vuex.Store({ ...@@ -40,13 +40,13 @@ const store = new Vuex.Store({
}) })
}, },
// 退出登录 // 退出登录
logout({ commit }) { // logout({ commit }) {
return logout().then(response => { // return logout().then(response => {
commit('setUser', {}) // commit('setUser', {})
commit('setIsLogin', false) // commit('setIsLogin', false)
return response // return response
}) // })
}, // },
// 检测登录状态 // 检测登录状态
async checkLogin({ commit }) { async checkLogin({ commit }) {
const isLogin = await getUser() const isLogin = await getUser()
...@@ -60,34 +60,6 @@ const store = new Vuex.Store({ ...@@ -60,34 +60,6 @@ const store = new Vuex.Store({
}) })
commit('setIsLogin', isLogin) commit('setIsLogin', isLogin)
return isLogin return isLogin
},
// 检测是否付费
async checkIsVip({ commit, state }) {
if (!state.isVip) {
await getIsVip().then(response => commit('setIsVip', response.is_vip))
}
return state.isVip
},
// 创建游客用户
async createGuestUser({ commit, state }) {
const { user_id: userId, student_id: studentId } = state.guestUser
if (!userId || !studentId) {
await createGuestUser().then(response => commit('setGuestUser', response))
}
return state.guestUser
},
// 加载本地游客信息
loadGuestUser({ commit, state }) {
const localGuestUser = window.localStorage.getItem('guestUser')
let guestUser = { user_id: '', student_id: '' }
if (localGuestUser) {
try {
guestUser = JSON.parse(localGuestUser)
} catch (error) {
console.log(error)
}
}
commit('setGuestUser', guestUser)
} }
} }
}) })
......
src/utils/beforeEnter.js
浏览文件 @ 2493c5a8
...@@ -7,7 +7,6 @@ export default class BeforeEnter { ...@@ -7,7 +7,6 @@ export default class BeforeEnter {
async update(to, from, next) { async update(to, from, next) {
const isLogin = store.state.isLogin || (await store.dispatch('checkLogin')) const isLogin = store.state.isLogin || (await store.dispatch('checkLogin'))
// if (to.meta.requiredLogin && !isLogin) {
if (!isLogin) { if (!isLogin) {
window.location.href = `${webConf.others.loginUrl}?rd=${encodeURIComponent(window.location.href)}` window.location.href = `${webConf.others.loginUrl}?rd=${encodeURIComponent(window.location.href)}`
return return
......
src/utils/htmlToPdf.js
浏览文件 @ 2493c5a8
...@@ -6,7 +6,8 @@ export default { ...@@ -6,7 +6,8 @@ export default {
Vue.prototype.getPdf = function () { Vue.prototype.getPdf = function () {
var title = this.htmlTitle var title = this.htmlTitle
html2Canvas(document.querySelector('#pdfDom'), { html2Canvas(document.querySelector('#pdfDom'), {
allowTaint: true allowTaint: true,
useCORS: true
}).then(function (canvas) { }).then(function (canvas) {
const contentWidth = canvas.width const contentWidth = canvas.width
const contentHeight = canvas.height const contentHeight = canvas.height
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论