提交 2493c5a8 authored 作者: lihuihui's avatar lihuihui

开发页面掉接口

上级 3c10959d
......@@ -5,10 +5,10 @@ module.exports = {
// apiBaseURL: '//demo-login.ezijing.com/',
webpack: {
externals: {
'CKEDITOR': 'window.CKEDITOR',
'Base64': 'window.Base64',
'md5': 'window.md5',
'regeneratorRuntime': 'window.regeneratorRuntime'
CKEDITOR: 'window.CKEDITOR',
Base64: 'window.Base64',
md5: 'window.md5',
regeneratorRuntime: 'window.regeneratorRuntime'
},
devServer: {
proxy: {
......@@ -31,9 +31,7 @@ module.exports = {
}
}
},
ProvidePlugin: {
},
ProvidePlugin: {},
others: {
loginUrl: 'https://login2.ezijing.com/'
}
......
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() {
return httpRequest.get('/api/zy/user/getinfo')
}
// 修改用户信息
export function updateUser(data) {
return httpRequest.post('/api/usercenter/user/update-user', data)
return httpRequest.get('/api/certs/v1/student/get-info')
}
// 绑定游客
export function bindVisitor(data) {
return httpRequest.post('/api/zy/user/bind-account', data)
// 获取学籍信息
export function getSchoolInfo(params) {
return httpRequest.get('/api/certs/v1/student/get-school-info', { params })
}
// 获取是否VIP
export function getIsVip() {
return httpRequest.get('/api/zy/user/is-vip')
// 获取查询条件
export function getCondition() {
return httpRequest.get('/api/certs/v1/student/get-condition')
}
// 创建游客用户
export function createGuestUser() {
return httpRequest.get('/api/zy/user/create-guest-user')
// 成绩查询
export function getScore(params) {
return httpRequest.get('/api/certs/v1/student/get-score', { params })
}
// 校验验证码
export function checkCode(params) {
return httpRequest.get('/api/usercenter/user/check-code', { params })
}
// 选择用户角色
export function chooseRole(data) {
return httpRequest.post('/api/zy/user/choose-role', data)
// 成绩查询
export function getCerts(params) {
return httpRequest.get('/api/certs/v1/student/get-certificate', { params })
}
// // 登出
// export function logout() {
// return httpRequest.get('/api/zy/user/logout')
// }
<template>
<div class="app-header">
<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">
<li
v-for="(item, index) in menu"
:key="index"
:class="$route.path == item.path && 'active'"
@click="$router.push({ path: item.path })"
>{{ item.name }}</li>
>
{{ item.name }}
</li>
</ul>
<div class="user-content">
<div class="photo">
<img :src="user.avatar" class="photo">
<img :src="user.head_img" class="photo" />
</div>
<div class="name">{{ user.nickname || user.username }}</div>
<div class="name">{{ user.english_name || user.chinese_name }}</div>
</div>
</div>
</div>
......@@ -37,16 +39,16 @@ export default {
// localStorage.setItem("i18n_locale", key)
computed: {
user() {
return this.$store.state.user
return this.$store.state.user.data
}
}
}
</script>
<style lang="scss" scoped>
.app-header{
background: #FFFFFF;
.app-header {
background: #ffffff;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.08);
.max-width{
.max-width {
display: flex;
justify-content: space-around;
align-items: center;
......@@ -54,18 +56,18 @@ export default {
height: 90px;
margin: 0 auto;
}
.logo{
.logo {
height: 62px;
display: block;
}
.menu-content{
.menu-content {
width: 623px;
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
li{
li {
position: relative;
// a{
font-size: 20px;
......@@ -73,35 +75,35 @@ export default {
text-decoration: none;
// }
cursor: pointer;
&.active{
&.active {
// a{
color: #ED322D;
color: #ed322d;
// }
&::after{
&::after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
width: 100%;
height: 3px;
background: #ED322D;
background: #ed322d;
}
}
}
}
.user-content{
.user-content {
display: flex;
align-items: center;
.photo{
.photo {
width: 43px;
height: 43px;
border: 1px solid #707070;
border-radius: 50%;
overflow: hidden;
}
.name{
.name {
font-size: 14px;
color: #5F5F5F;
color: #5f5f5f;
margin-left: 10px;
}
}
......
......@@ -7,5 +7,39 @@ export const shmsLang = {
},
home: {
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'
}
......@@ -7,5 +7,39 @@ export const shmsLang = {
},
home: {
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'
}
<template>
<div class="app-card">
<div class="form-box">
<el-select v-model="value" placeholder="请选择" size="small">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
<el-select @change="changes" v-model="value" :placeholder="$t('shmsLang.selectHolder')" size="small" clearable>
<el-option v-for="item in options" :key="item.id" :label="item.english_name" :value="item.id"> </el-option>
</el-select>
<div class="down-btn">Download</div>
<div class="down-btn" @click="openPdf">{{ $t('shmsLang.downloadBtn') }}</div>
</div>
<div class="certs-img">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/certificate/shms-certs.png" alt="">
<div class="certs-img" v-if="imgUrl">
<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>
</template>
<script>
import * as api from '@/api/account.js'
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}],
value: ''
options: [],
value: '',
pageData: null,
htmlTitle: 'pdf',
imgUrl: '',
pdfUrl: ''
}
},
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>
<style lang="scss" scoped>
.app-card{
.app-card {
width: 1000px;
margin: 30px auto;
background: #fff;
padding: 30px;
.form-box{
.form-box {
display: flex;
justify-content: flex-end;
.down-btn{
.down-btn {
width: 100px;
height: 34px;
background: #D82E27;
background: #d82e27;
opacity: 1;
border-radius: 4px;
text-align: center;
font-size: 16px;
line-height: 34px;
color: #FFFFFF;
color: #ffffff;
margin-left: 23px;
cursor: pointer;
}
}
.certs-img{
.certs-img {
width: 670px;
margin: 0 auto;
img{
img {
width: 100%;
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>
<template>
<div class="form-content">
<el-form ref="form" :inline="true" :model="form" label-width="120px">
<el-form-item label="Program">
<el-select size="small" style="width:240px" v-model="form.region" placeholder="请选择">
<el-option label="2019 Spring Quater" value="shanghai"></el-option>
<el-form-item :label="$t('shmsLang.status.selectName')">
<el-select
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-form-item>
<el-form-item label="Semester">
<el-select size="small" style="width:240px" v-model="form.region" placeholder="请选择">
<el-option label="2019 Spring Quater" value="shanghai"></el-option>
<el-form-item :label="$t('shmsLang.status.selectName2')">
<el-select
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-form-item>
<el-form-item label="Course Name">
<el-select size="small" style="width:240px" v-model="form.region" placeholder="请选择">
<el-option label="2019 Spring Quater" value="shanghai"></el-option>
<el-form-item :label="$t('shmsLang.status.selectName3')">
<el-select
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-form-item>
</el-form>
<div class="form-btn">
<div>Search</div>
<div>Download</div>
<div @click="search">{{ $t('shmsLang.searchBtn') }}</div>
<div @click="$emit('downPdf')">{{ $t('shmsLang.downloadBtn') }}</div>
</div>
</div>
</template>
<script>
import * as api from '@/api/account.js'
export default {
data() {
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>
<style lang="scss" scoped>
.form-content{
.form-content {
display: flex;
.form-btn{
.form-btn {
display: flex;
div{
div {
width: 100px;
height: 34px;
background: #D82E27;
background: #d82e27;
opacity: 1;
border-radius: 4px;
text-align: center;
font-size: 16px;
line-height: 34px;
color: #FFFFFF;
color: #ffffff;
margin-left: 23px;
cursor: pointer;
}
......
<template>
<div class="info-content">
<div class="info-top">
<div class="info-top_box">
<div class="temp">
<div class="name">Name</div>
<div class="value">Xue Zhang</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 class="info-top_box" v-for="(item, index) in infoItem" :key="index">
<div class="temp" v-for="cItem in item" :key="cItem.name">
<div class="name">{{ cItem.name }}</div>
<div class="value">{{ cItem.value }}</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" v-for="(item, index) in th" :key="index">{{ item }}</div>
</div>
<div class="td-box">
<template v-for="item in td">
<div class="td" v-for="(cItem, index) in item" :key="index">{{ cItem }}</div>
</template>
<div class="td-box" v-for="(item, index) in data.scores" :key="index">
<div class="td">{{ item.course_english_name }}</div>
<div class="td">{{ item.semester }}</div>
<div class="td">{{ item.project_english_name }}</div>
<div class="td">{{ item.score }}</div>
<div class="td">{{ item.pubdate }}</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object
},
program: {
type: String
}
},
data() {
return {
th: ['Course Name', 'Semester', 'Program', 'Offical Score', 'Offical Date'],
td: [
['课程名', '2019 Spring Quater', 'MBA(Global, Chinese Language)', '34', 'Jan 09. 2020']
th: [
this.$t('shmsLang.score.course'),
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>
<style lang="scss" scoped>
.info-content{
border: 1px solid #F2F2F2;
.info-content {
border: 1px solid #f2f2f2;
padding: 30px;
.info-top{
.info-top {
padding: 30px 0;
border-bottom: 1px solid #e8e8e8;
display: flex;
.temp{
.temp {
display: flex;
align-items: center;
width: 440px;
margin-bottom: 12px;
&:nth-child(3){
&:nth-child(3) {
margin-bottom: 0;
}
.name{
width: 120px;
.name {
width: 180px;
text-align: right;
margin-right: 15px;
font-size: 18px;
line-height: 22px;
color: #292929;
}
.value{
.value {
font-size: 18px;
line-height: 22px;
color: #838383;
}
}
}
.title{
.title {
font-size: 20px;
font-weight: bold;
line-height: 24px;
color: #292929;
margin: 24px 0 40px;
}
.th-box{
.th-box {
height: 36px;
padding: 10px 0;
background: #F4F4F4;
background: #f4f4f4;
display: flex;
align-items: center;
.th{
.th {
font-size: 16px;
line-height: 19px;
color: #838383;
......@@ -105,13 +133,13 @@ export default {
text-align: center;
}
}
.td-box{
.td-box {
min-height: 37px;
padding: 10px 0;
border-bottom: 1px solid #D3D3D3;
border-bottom: 1px solid #d3d3d3;
display: flex;
align-items: center;
.td{
.td {
flex: 1;
text-align: center;
font-size: 16px;
......
<template>
<div class="app-card">
<scach-form />
<info />
<scach-form @downPdf="downPdf" @search="search" />
<app-info id="pdfDom" :data="data" :program="program"/>
</div>
</template>
<script>
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 {
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>
<style lang="scss" scoped>
.app-card{
.app-card {
width: 1000px;
margin: 30px auto;
background: #fff;
......
<template>
<div>
<div class="degrees-title">DEGREES</div>
<div class="degrees-title">{{ this.$t('shmsLang.status.degTitle') }}</div>
<div class="degrees-content">
<div class="th-box">
<div class="th">Major</div>
<div class="th">Degree Level</div>
<div class="th">Degree Type</div>
<div class="th" v-for="(item, index) in thItem" :key="index">{{ item }}</div>
</div>
<div class="td-box">
<div class="td">Hospitality</div>
<div class="td">Master</div>
<div class="td">Master Business Administration</div>
<div class="td-box" v-for="(item, index) in degreesItem" :key="index">
<div class="td">{{ item.major }}</div>
<div class="td">{{ item.level }}</div>
<div class="td">{{ item.type }}</div>
</div>
</div>
</div>
</template>
<script>
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>
<style lang="scss" scoped>
.degrees-title{
.degrees-title {
font-size: 20px;
line-height: 24px;
color: #292929;
margin: 24px 0;
}
.degrees-content{
.degrees-content {
width: 857px;
margin: 0 auto;
.th-box{
.th-box {
height: 56px;
background: #F8F8F8;
background: #f8f8f8;
display: flex;
align-items: center;
.th{
.th {
flex: 1;
font-size: 18px;
color: #292929;
&:nth-child(1){
&:nth-child(1) {
text-indent: 4em;
}
}
}
.td-box{
.td-box {
min-height: 37px;
padding: 10px 0;
display: flex;
align-items: center;
border-bottom: 1px solid #D3D3D3;
.td{
border-bottom: 1px solid #d3d3d3;
.td {
flex: 1;
font-size: 16px;
color: #838383;
&:nth-child(1){
&:nth-child(1) {
text-indent: 4em;
}
}
......
<template>
<div>
<div class="profile-title">PROFILE</div>
<div class="profile-title">{{ $t('shmsLang.status.proTitle') }}</div>
<div class="profile-content">
<div class="photo">
<img src="https://img1.ezijing.com/default/20200911/7b2d8ec55e836f458e5c416648fa7099.jpg" >
<img :src="info.head_img" />
</div>
<div class="info-box">
<div class="name">Xue Zhang</div>
<div class="info">Man | 38 | Dalian,Liaoning,CHINA</div>
<div class="info-box" style="margin-right: 20px">
<div class="name">{{ $i18n.locale == 'zh' ? info.chinese_name : info.english_name }}</div>
<div class="info">{{ setSex(info.gender) }} | {{ info.age }} | {{ info.city }},{{ info.country }}</div>
<div class="info-temp m-t33">
<div class="name w120">Mobile Phone</div>
<div class="value">17878907890</div>
<div class="name w120">{{ $t('shmsLang.status.mobile') }}</div>
<div class="value">{{ info.mobile }}</div>
</div>
<div class="info-temp m-t33">
<div class="name w120">Email</div>
<div class="value">xuexue@163.com</div>
<div class="name w120">{{ $t('shmsLang.status.email') }}</div>
<div class="value">{{ info.email }}</div>
</div>
</div>
<div class="info-box">
<div class="info-temp">
<div class="name w140">ID Number</div>
<div class="value">2834567</div>
</div>
<div class="info-temp m-t17">
<div class="name w140">Program</div>
<div class="value">MBA(Hospitality)</div>
<div class="name w140">{{ $t('shmsLang.status.idNumber') }}</div>
<div class="value">{{ info.student_number }}</div>
</div>
<div class="info-temp m-t17">
<div class="name w140">Current state</div>
<div class="value">In School</div>
<div class="name w140">{{ $t('shmsLang.status.state') }}</div>
<div class="value">{{ currentStatus[info.graduation_status] }}</div>
</div>
<div class="info-temp m-t17">
<div class="name w140">Date Added </div>
<div class="value">Jan 08. 2020</div>
<div class="name w140">{{ $t('shmsLang.status.added') }}</div>
<div class="value">{{ info.created_time }}</div>
</div>
<div class="info-temp m-t17">
<div class="name w140">Date Graduated</div>
<div class="value">Jan 08. 2021</div>
<div class="name w140">{{ $t('shmsLang.status.graduated') }}</div>
<div class="value">{{ info.graduation_time }}</div>
</div>
</div>
</div>
......@@ -44,67 +40,109 @@
</template>
<script>
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>
<style lang="scss" scoped>
.profile-title{
.profile-title {
font-size: 20px;
line-height: 24px;
color: #292929;
margin-top: 6px;
}
.profile-content{
.profile-content {
padding: 24px 0 30px;
border-bottom: 1px solid #E8E8E8;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: center;
.photo{
.photo {
width: 146px;
height: 180px;
background: #FFFFFF;
background: #ffffff;
border: 1px solid #707070;
margin-right: 38px;
img{
img {
width: 100%;
height: 100%;
display: block;
}
}
.info-box{
.name{
.info-box {
.name {
font-size: 28px;
font-weight: bold;
line-height: 100%;
color: #292929;
}
.info{
.info {
font-size: 18px;
line-height: 22px;
color: #838383;
margin-top: 16px;
min-width: 333px;
}
.info-temp{
.info-temp {
display: flex;
align-items: center;
&.m-t33{
&.m-t33 {
margin-top: 33px;
}
&.m-t17{
margin-top: 17px;
&.m-t17 {
margin-top: 30px;
}
.w120{
.w120 {
width: 120px;
}
.w140{
.w140 {
width: 140px;
}
.name{
.name {
color: #292929;
font-size: 18px;
text-align: right;
}
.value{
.value {
font-size: 16px;
color: #838383;
margin-left: 19px;
......
<template>
<div class="app-card">
<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 id="pdfDom">
<profile />
<degrees />
<profile :info="info" @changes="changes" />
<degrees :degreesItem="degreesItem" />
</div>
</div>
</template>
<script>
import profile from './components/profile.vue'
import degrees from './components/degrees.vue'
import * as api from '@/api/account.js'
export default {
components: { profile, degrees },
data() {
return {
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>
<style lang="scss" scoped>
.app-card{
.app-card {
width: 1000px;
margin: 30px auto;
background: #fff;
padding: 24px 30px 40px;
.dowload-box{
.dowload-box {
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;
background: #D82E27;
background: #d82e27;
border-radius: 4px;
font-size: 16px;
line-height: 34px;
color: #FFFFFF;
color: #ffffff;
text-align: center;
margin-left: auto;
cursor: pointer;
}
}
......
import Vue from 'vue'
import Vuex from 'vuex'
import { getUser, logout, getIsVip, createGuestUser } from '@/api/account'
import { getUser } from '@/api/account'
Vue.use(Vuex)
const store = new Vuex.Store({
......@@ -40,13 +40,13 @@ const store = new Vuex.Store({
})
},
// 退出登录
logout({ commit }) {
return logout().then(response => {
commit('setUser', {})
commit('setIsLogin', false)
return response
})
},
// logout({ commit }) {
// return logout().then(response => {
// commit('setUser', {})
// commit('setIsLogin', false)
// return response
// })
// },
// 检测登录状态
async checkLogin({ commit }) {
const isLogin = await getUser()
......@@ -60,34 +60,6 @@ const store = new Vuex.Store({
})
commit('setIsLogin', 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)
}
}
})
......
......@@ -7,7 +7,6 @@ export default class BeforeEnter {
async update(to, from, next) {
const isLogin = store.state.isLogin || (await store.dispatch('checkLogin'))
// if (to.meta.requiredLogin && !isLogin) {
if (!isLogin) {
window.location.href = `${webConf.others.loginUrl}?rd=${encodeURIComponent(window.location.href)}`
return
......
......@@ -6,7 +6,8 @@ export default {
Vue.prototype.getPdf = function () {
var title = this.htmlTitle
html2Canvas(document.querySelector('#pdfDom'), {
allowTaint: true
allowTaint: true,
useCORS: true
}).then(function (canvas) {
const contentWidth = canvas.width
const contentHeight = canvas.height
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论