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

新增持证人展示

上级 92856bc2
......@@ -12,6 +12,7 @@
"@ezijing/vue-form": "^2.2.1",
"@ezijing/vue-passport": "^1.0.2",
"axios": "^0.21.0",
"blueimp-md5": "^2.18.0",
"bootstrap": "^4.5.3",
"core-js": "^3.8.0",
"cross-env": "^7.0.2",
......@@ -31,6 +32,7 @@
"vue-meta-info": "^0.1.7",
"vue-router": "^3.4.9",
"vue-template-compiler": "^2.6.12",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.0"
},
"devDependencies": {
......@@ -2447,6 +2449,11 @@
"resolved": "https://registry.npm.taobao.org/bluebird/download/bluebird-3.7.2.tgz",
"integrity": "sha1-nyKcFb4nJFT/qXOs4NvueaGww28="
},
"node_modules/blueimp-md5": {
"version": "2.18.0",
"resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.18.0.tgz",
"integrity": "sha512-vE52okJvzsVWhcgUHOv+69OG3Mdg151xyn41aVQN/5W5S+S43qZhxECtYLAEHMSFWX6Mv5IZrzj3T5+JqXfj5Q=="
},
"node_modules/bn.js": {
"version": "5.1.3",
"resolved": "https://registry.npm.taobao.org/bn.js/download/bn.js-5.1.3.tgz",
......@@ -11062,6 +11069,11 @@
"node": ">=0.10.0"
}
},
"node_modules/sortablejs": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
"integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
},
"node_modules/source-list-map": {
"version": "2.0.1",
"resolved": "https://registry.npm.taobao.org/source-list-map/download/source-list-map-2.0.1.tgz",
......@@ -12547,6 +12559,14 @@
"resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
},
"node_modules/vuedraggable": {
"version": "2.24.3",
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
"integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
"dependencies": {
"sortablejs": "1.10.2"
}
},
"node_modules/vuex": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.0.tgz",
......@@ -15754,6 +15774,11 @@
"resolved": "https://registry.npm.taobao.org/bluebird/download/bluebird-3.7.2.tgz",
"integrity": "sha1-nyKcFb4nJFT/qXOs4NvueaGww28="
},
"blueimp-md5": {
"version": "2.18.0",
"resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.18.0.tgz",
"integrity": "sha512-vE52okJvzsVWhcgUHOv+69OG3Mdg151xyn41aVQN/5W5S+S43qZhxECtYLAEHMSFWX6Mv5IZrzj3T5+JqXfj5Q=="
},
"bn.js": {
"version": "5.1.3",
"resolved": "https://registry.npm.taobao.org/bn.js/download/bn.js-5.1.3.tgz",
......@@ -23026,6 +23051,11 @@
"is-plain-obj": "^1.0.0"
}
},
"sortablejs": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
"integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
},
"source-list-map": {
"version": "2.0.1",
"resolved": "https://registry.npm.taobao.org/source-list-map/download/source-list-map-2.0.1.tgz",
......@@ -24298,6 +24328,14 @@
"resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
},
"vuedraggable": {
"version": "2.24.3",
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
"integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
"requires": {
"sortablejs": "1.10.2"
}
},
"vuex": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.0.tgz",
......
......@@ -75,6 +75,7 @@
"@ezijing/vue-form": "^2.2.1",
"@ezijing/vue-passport": "^1.0.2",
"axios": "^0.21.0",
"blueimp-md5": "^2.18.0",
"bootstrap": "^4.5.3",
"core-js": "^3.8.0",
"cross-env": "^7.0.2",
......@@ -94,6 +95,7 @@
"vue-meta-info": "^0.1.7",
"vue-router": "^3.4.9",
"vue-template-compiler": "^2.6.12",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.0"
}
}
import BaseAPI from '@/api/base_api'
const httpRequest = new BaseAPI(webConf)
// 获取用户信息
export function getUser() {
return httpRequest.get('/passport/account/get-user-info')
}
// 退出登录
export function logout() {
return httpRequest.get('/passport/rest/logout')
}
// 获取oss signature
export function getSignature() {
return httpRequest.get('/usercenter/aliyun/get-signature')
}
// 图片上传
export function uploadFile(data) {
return httpRequest.post('https://webapp-pub.oss-cn-beijing.aliyuncs.com', data, {
withCredentials: false,
headers: { 'Content-Type': 'multipart/form-data' }
})
}
......@@ -196,23 +196,53 @@ export function getPaymentList() {
* 获取证书手机验证码
*/
export function certSendCode(params) {
return httpRequest.get('/certs/v1/prp/send-code', params, { headers: { 'Content-Type': 'application/json' }})
return httpRequest.get('/certs/v1/prp/send-code', params, { headers: { 'Content-Type': 'application/json' } })
}
/**
* 获取证书地址
*/
export function certSearch(params) {
return httpRequest.get('/certs/v1/prp/search', params, { headers: { 'Content-Type': 'application/json' }})
return httpRequest.get('/certs/v1/prp/search', params, { headers: { 'Content-Type': 'application/json' } })
}
/**
* 获取用户名片相关信息
*/
export function getCardInfo() {
return httpRequest.get('/certs/v1/prp/card-info', {}, { headers: { 'Content-Type': 'application/json' }})
export function getCardInfo() {
return httpRequest.get('/certs/v1/prp/card-info', {}, { headers: { 'Content-Type': 'application/json' } })
}
/**
* 获取用户名片下载地址
*/
export function getCardUrl(params) {
return httpRequest.post('/certs/v1/prp/get-card', params, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
export function getCardUrl(params) {
return httpRequest.post('/certs/v1/prp/get-card', params, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
}
/**
* 获取入学通知书
*/
export function getAdmissionNotice() {
return httpRequest.get('/certs/v1/prp/get-notice')
}
/**
* 权益人展示列表
*/
export function getAvatarList(data) {
return httpRequest.get('/certs/v1/prp/avatar-list', data)
}
/**
* 权益人详情
*/
export function getAvatar() {
return httpRequest.get('/certs/v1/prp/avatar')
}
/**
* 上传权益人头像
*/
export function uploadAvatar(data) {
return httpRequest.post('/certs/v1/prp/avatar', data)
}
......@@ -19,7 +19,9 @@
<section class="app-header-main">
<div class="hd">
<div class="hd-left">
<a href="/"><img src="https://zws-imgs-pub.ezijing.com/static/public/92d1c018bf15a5d600b43378e8ac2932.png" class="logo" /></a>
<a href="/"
><img src="https://zws-imgs-pub.ezijing.com/static/public/92d1c018bf15a5d600b43378e8ac2932.png" class="logo"
/></a>
<!-- <h1 class="title">{{ title }}</h1> -->
</div>
<!-- <div class="hd-right">
......@@ -79,9 +81,14 @@ export default {
}
},
watch: {
$route(route) {
if (route.query.needLogin) {
this.handleLogin()
'$route.query': {
immediate: true,
handler(query) {
if (query.needLogin) {
this.$nextTick(() => {
this.handleLogin()
})
}
}
}
},
......
<template>
<div class="app-upload">
<draggable
v-model="fileList"
group="people"
class="file-list el-upload-list--picture-card"
@end="onEnd"
v-if="showFileList"
>
<div class="file-item" v-for="(file, index) in fileList" :key="index">
<!-- <el-image style="width: 100%; height: 100%" :src="file.url" :preview-src-list="fileList.map(item => item.url)"> -->
<img :src="file.url" />
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<span v-if="!$attrs.disabled" class="el-upload-list__item-delete" @click="handleRemove(index)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</draggable>
<el-upload
action="https://webapp-pub.oss-cn-beijing.aliyuncs.com"
type="drag"
:before-upload="beforeUpload"
:on-success="handleSuccess"
:show-file-list="false"
:on-exceed="handleExceed"
:data="data"
v-bind="$attrs"
v-on="$listeners"
style="display: inline"
>
<slot>
<i class="el-icon-plus"></i>
</slot>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="previewFile.url" />
</el-dialog>
</div>
</template>
<script>
import { getSignature } from '@/api/base'
import md5 from 'blueimp-md5'
import draggable from 'vuedraggable'
export default {
name: 'AppUpload',
components: { draggable },
props: {
value: { type: [String, Array] },
prefix: { type: String, default: 'upload/project/prp/' },
showFileList: { type: Boolean, default: true }
},
data() {
return {
data: {}, // 请求参数
fileList: [], // 文件列表
dialogVisible: false,
previewFile: {},
message: null
}
},
watch: {
value: {
immediate: true,
handler(value) {
if (!value) {
return
}
let fileList = []
if (this.isMultiple) {
fileList = value.map(item => {
return { name: item.name || item, url: item.url || item }
})
} else {
fileList.push({ name: '附件', url: value })
}
this.fileList = [...fileList]
}
}
},
computed: {
isMultiple() {
return Array.isArray(this.value)
}
},
methods: {
beforeUpload(file) {
const limit = this.$attrs.limit
if (limit && this.fileList.length >= limit) {
this.message && this.message.close()
this.message = this.$message({ type: 'error', message: '文件超出个数限制' })
return false
}
const fileName = file.name
const key = this.prefix + md5(fileName + new Date().getTime()) + fileName.substr(fileName.lastIndexOf('.'))
return new Promise((resolve, reject) => {
getSignature()
.then(response => {
const { accessid, policy, signature, host } = response
this.data = { key, OSSAccessKeyId: accessid, policy, signature, success_action_status: '200' }
file.url = `${host}/${key}`
resolve(true)
})
.catch(err => {
console.log(err)
reject(err)
})
})
},
handleSuccess(response, file) {
let value = null
if (this.isMultiple) {
const limit = this.$attrs.limit
if (limit && this.fileList.length >= limit) {
return
}
this.fileList.push({ name: file.name, url: file.raw.url })
value = this.fileList
} else {
this.fileList = [file.raw.url]
value = file.raw.url
}
this.$emit('input', value)
this.dispatch('ElFormItem', 'el.form.change', value)
},
// 删除
handleRemove(index) {
this.fileList.splice(index, 1)
this.$emit('input', this.fileList)
this.dispatch('ElFormItem', 'el.form.change', this.fileList)
},
// 预览
handlePreview(file) {
this.previewFile = file
this.dialogVisible = true
},
handleExceed() {
this.$message({ type: 'error', message: '文件超出个数限制' })
},
onEnd() {
this.$emit('input', this.fileList)
},
dispatch(componentName, eventName, params) {
var parent = this.$parent || this.$root
var name = parent.$options.componentName
while (parent && (!name || name !== componentName)) {
parent = parent.$parent
if (parent) {
name = parent.$options.componentName
}
}
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params))
}
}
}
}
</script>
<style lang="scss">
.el-upload-list--picture-card .el-upload-list__item-thumbnail {
object-fit: cover;
}
.el-upload-list__item {
transition: none !important;
}
.file-list {
margin: 0;
display: inline;
vertical-align: top;
}
.file-item {
position: relative;
overflow: hidden;
background-color: #fff;
border: 1px solid #c0ccda;
border-radius: 6px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 148px;
height: 148px;
margin: 0 8px 8px 0;
display: inline-block;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
</style>
<template>
<app-upload class="avatar-uploader" accept="image/*" :show-file-list="false" v-bind="$attrs" v-on="$listeners">
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</app-upload>
</template>
<script>
import AppUpload from './Upload.vue'
export default {
name: 'AppUploadImage',
components: { AppUpload },
data() {
return {}
},
computed: {
imageUrl() {
return this.$attrs.value
}
}
}
</script>
<style lang="scss">
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 148px;
height: 148px;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
line-height: 148px;
text-align: center;
}
.avatar {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
</style>
<template>
<app-upload class="video-uploader" accept="video/*" :show-file-list="false" v-bind="$attrs" v-on="$listeners">
<img v-if="videoUrl" :src="`${videoUrl}?x-oss-process=video/snapshot,t_10,f_jpg,w_0,h_0,m_fast`" class="avatar" />
<i v-else class="el-icon-plus video-uploader-icon"></i>
</app-upload>
</template>
<script>
import AppUpload from './Upload.vue'
export default {
name: 'AppUploadVideo',
components: { AppUpload },
data() {
return {}
},
computed: {
videoUrl() {
return this.$attrs.value
}
}
}
</script>
<style lang="scss">
.video-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 148px;
height: 148px;
}
.video-uploader .el-upload:hover {
border-color: #409eff;
}
.video-uploader-icon {
font-size: 28px;
color: #8c939d;
line-height: 148px;
text-align: center;
}
.avatar {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
</style>
......@@ -6,10 +6,10 @@
<img src="https://zws-imgs-pub.ezijing.com/static/public/da6e395d3cd95e944625ee76364045bf.png" />
</swiper-slide>
<!-- <swiper-slide>
<img @click="goPreview('https://zws-imgs-pub.ezijing.com/static/public/fcac7efb74162f33045f8876d28c5b12.pdf')" src="https://zws-imgs-pub.ezijing.com/static/public/8d6b2472a5091990450c34f3a9be9423.jpg" alt="" />
<img @click="goPreview('https://zws-imgs-pub.ezijing.com/static/public/fcac7efb74162f33045f8876d28c5b12.pdf')" src="https://zws-imgs-pub.ezijing.com/static/public/8d6b2472a5091990450c34f3a9be9423.jpg" />
</swiper-slide>
<swiper-slide>
<img @click="goPage('/project')" src="https://zws-imgs-pub.ezijing.com/static/public/39f724d8000a38716b053324e5d27f3d.jpg" alt="" />
<img @click="goPage('/project')" src="https://zws-imgs-pub.ezijing.com/static/public/39f724d8000a38716b053324e5d27f3d.jpg" />
</swiper-slide> -->
<div class="swiper-button-prev" slot="button-prev" @click="prev"></div>
<div class="swiper-button-next" slot="button-next" @click="next"></div>
......@@ -17,34 +17,34 @@
<ul class="nav">
<li @click="goPage('/my', 2)">
<div class="icon">
<img src="../../assets/img/lang/banner-i2.png" alt="" />
<img src="../../assets/img/lang/banner-i2.png" />
</div>
<div class="txt">证书报名</div>
</li>
<li @click="goPreview('https://prp-learning.ezijing.com/')">
<div class="icon">
<img src="../../assets/img/lang/banner-i1.png" alt="" />
<img src="../../assets/img/lang/banner-i1.png" />
</div>
<div class="txt">课程学习</div>
<div class="block"></div>
</li>
<li @click="goPage('no')">
<li @click="goPage('/personal')">
<div class="icon">
<img src="../../assets/img/lang/banner-i3.png" alt="" />
<img src="../../assets/img/lang/banner-i3.png" />
</div>
<div class="txt">证书考试</div>
<div class="txt">持证人权益</div>
</li>
<li @click="goPage('/cert')">
<li @click="goPage('/showcase')">
<div class="icon">
<img src="../../assets/img/lang/banner-i5.png" alt="" />
<img src="../../assets/img/lang/banner-i4.png" />
</div>
<div class="txt">证书查询</div>
<div class="txt">持证人展示</div>
</li>
<li @click="goPage('/card')">
<li @click="goPage('/recruit?type=2')">
<div class="icon">
<img src="../../assets/img/lang/banner-i4.png" alt="" />
<img src="../../assets/img/lang/banner-i5.png" />
</div>
<div class="txt">名片查询</div>
<div class="txt">常见问题</div>
</li>
</ul>
</div>
......@@ -52,19 +52,19 @@
<div class="title">项目特色</div>
<ul>
<li>
<img src="https://zws-imgs-pub.ezijing.com/static/public/43846f5832696866be143e4282df04fb.png" alt="" />
<img src="https://zws-imgs-pub.ezijing.com/static/public/43846f5832696866be143e4282df04fb.png" />
<div class="p">资深专家与业内实<br />战专家共同研发</div>
</li>
<li>
<img src="https://zws-imgs-pub.ezijing.com/static/public/3b14f07dffa3f6be76e31288cea82ae9.png" alt="" />
<img src="https://zws-imgs-pub.ezijing.com/static/public/3b14f07dffa3f6be76e31288cea82ae9.png" />
<div class="p">立足财富市场<br />聚焦风险管理</div>
</li>
<li>
<img src="https://zws-imgs-pub.ezijing.com/static/public/f8698b889e909a297b6ad61321f1be9a.png" alt="" />
<img src="https://zws-imgs-pub.ezijing.com/static/public/f8698b889e909a297b6ad61321f1be9a.png" />
<div class="p">利用碎片化时间<br />学习系统源点知识</div>
</li>
<li class="bor-none">
<img src="https://zws-imgs-pub.ezijing.com/static/public/acddd79e89fc4618fa8e5de64e9e6327.png" alt="" />
<img src="https://zws-imgs-pub.ezijing.com/static/public/acddd79e89fc4618fa8e5de64e9e6327.png" />
<div class="p">由权威机构出品<br />促进行业发展为目标</div>
</li>
</ul>
......@@ -80,22 +80,18 @@
增强私人财富风险识别与管理能力<br />
提升客层服务纬度与价值
</div>
<img src="https://zws-imgs-pub.ezijing.com/static/public/27362ec9f09884dde35b97e7f543dc5b.png" alt="" />
<img src="https://zws-imgs-pub.ezijing.com/static/public/27362ec9f09884dde35b97e7f543dc5b.png" />
</div>
</div>
<div class="module3">
<!-- <img
src="https://zws-imgs-pub.ezijing.com/static/public/34f0db01337e16fcbc4ee866953c843d.png"
alt=""
class="bg"
/> -->
<div class="bg"></div>
<img src="../../assets/img/lang/m3-btn.png" alt="" class="btn" @click="videoplay()" />
<img
class="titles"
src="https://zws-imgs-pub.ezijing.com/static/public/2836a2327a0098672e1dd4663ea27e69.png"
alt=""
/>
<img src="../../assets/img/lang/m3-btn.png" class="btn" @click="videoplay()" />
<img class="titles" src="https://zws-imgs-pub.ezijing.com/static/public/2836a2327a0098672e1dd4663ea27e69.png" />
<div id="videoAlert" v-if="videoShow">
<div class="cont">
<div class="close-box" @click="videoShow = false"></div>
......@@ -112,35 +108,32 @@
</div>
<div class="module4">
<div class="img-box">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/prp/cert.png" alt="" />
<!-- <img src="https://zws-imgs-pub.ezijing.com/static/public/c1a539349923a397b5c55e10eb62f9b3.png" alt="" /> -->
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/prp/cert.png" />
<!-- <img src="https://zws-imgs-pub.ezijing.com/static/public/c1a539349923a397b5c55e10eb62f9b3.png" /> -->
</div>
<div class="con970 floats" style="margin-top:20px;">
<div class="swiper-mian" @click="goPage('/presence')">
<swiper :options="swiperOptions2" ref="mySwiper2" class="item-swiper">
<swiper-slide>
<img :src="listData[0].photo_uri" alt="" />
<img :src="listData[0].photo_uri" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<div class="written">
<div class="btn">师生风采</div>
<div class="txt">{{listData[0].title}}</div>
<div class="txt">{{ listData[0].title }}</div>
</div>
</div>
<div
class="swiper-mian float-r"
@click="goPage('/alumniWork')"
>
<div class="swiper-mian float-r" @click="goPage('/alumniWork')">
<swiper :options="swiperOptions2" ref="mySwiper2" class="item-swiper">
<swiper-slide>
<img :src="listData[0].photo_uri" alt="" />
<img :src="listData[0].photo_uri" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<div class="written">
<div class="btn color">项目动态</div>
<div class="txt">{{listData[1].title}}</div>
<div class="txt">{{ listData[1].title }}</div>
</div>
</div>
</div>
......
<template>
<div style="text-align:center">
<a :href="url" target="_blank"><img :src="url" class="notice-pic"/></a>
</div>
</template>
<script>
import { getAdmissionNotice } from '@/api/my.js'
export default {
data() {
return {
url: ''
}
},
beforeMount() {
this.getAdmissionNotice()
},
methods: {
getAdmissionNotice() {
getAdmissionNotice()
.then(res => {
this.url = res.url
})
.catch(error => {
this.$message.error(error.message)
})
}
}
}
</script>
<style scoped>
.notice-pic {
max-width: 970px;
}
</style>
<template>
<div>
<div class="modul1">
<ul class="tap-btn">
<li :class="showIndex === 1 ? 'active' : ''" @click="tap(1)">证书查询</li>
<li :class="showIndex === 2 ? 'active' : ''" @click="tap(2)">名片查询</li>
<li :class="showIndex === 3 ? 'active' : ''" @click="tap(3)">入学通知书</li>
</ul>
</div>
<div class="tap-item-box" style="padding:40px 0">
<app-cert v-if="showIndex === 1"></app-cert>
<app-id-card v-if="showIndex === 2"></app-id-card>
<app-admission-notice v-if="showIndex === 3"></app-admission-notice>
</div>
</div>
</template>
<script>
import AppCert from '@/pages/cert/index.vue'
import AppIdCard from '@/pages/card/index.vue'
import AppAdmissionNotice from './admissionNotice.vue'
export default {
components: { AppCert, AppIdCard, AppAdmissionNotice },
data() {
return {
showIndex: 1
}
},
watch: {
'$route.query': {
immediate: true,
handler(query) {
if (query.index) {
this.showIndex = parseInt(query.index) || 1
}
}
}
},
methods: {
tap(n) {
this.showIndex = n
}
}
}
</script>
<style lang="scss" scoped>
.con970 {
width: 970px;
margin: 0 auto;
}
.modul1 {
position: relative;
width: 100%;
height: 190px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/e5edeacd362ce7876f52c799f7e1a98d.png) center;
background-size: cover;
.tap-btn {
width: 970px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
li {
width: 128px;
height: 36px;
background: rgba(76, 129, 196, 1);
margin-right: 2px;
font-size: 16px;
line-height: 36px;
text-align: center;
color: #fff;
cursor: pointer;
&.active {
color: rgba(76, 129, 196, 1);
background: #fff;
}
}
}
}
</style>
<template>
<div>
<div class="modul1">
<ul class="tap-btn">
<li :class="showIndex === 1 ? 'active' : ''" @click="tap(1)">持证人展示</li>
<li :class="showIndex === 2 ? 'active' : ''" @click="tap(2)">头像上传</li>
</ul>
</div>
<div class="tap-item-box" style="padding:40px 0">
<div class="avatar-list" v-if="showIndex === 1">
<div class="avatar-item" v-for="item in list" :key="item.id">
<div class="content">
<h2>{{ item.name }}</h2>
<p>证书编号</p>
<p>{{ item.number }}</p>
</div>
<img :src="item.avatar" class="pic" />
</div>
</div>
<app-upload-avatar v-if="showIndex === 2"></app-upload-avatar>
</div>
</div>
</template>
<script>
import AppUploadAvatar from './uploadAvatar.vue'
import { getAvatarList } from '@/api/my.js'
export default {
components: { AppUploadAvatar },
data() {
return {
showIndex: 1,
list: []
}
},
watch: {
'$route.query': {
immediate: true,
handler(query) {
if (query.index) {
this.showIndex = parseInt(query.index) || 1
}
}
}
},
beforeMount() {
this.getAvatarList()
},
methods: {
tap(n) {
this.showIndex = n
},
getAvatarList() {
getAvatarList({ page: 1, page_size: 100 }).then(response => {
this.list = response.list
})
}
}
}
</script>
<style lang="scss" scoped>
.con970 {
width: 970px;
margin: 0 auto;
}
.modul1 {
position: relative;
width: 100%;
height: 190px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/e5edeacd362ce7876f52c799f7e1a98d.png) center;
background-size: cover;
.tap-btn {
width: 970px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
li {
width: 128px;
height: 36px;
background: rgba(76, 129, 196, 1);
margin-right: 2px;
font-size: 16px;
line-height: 36px;
text-align: center;
color: #fff;
cursor: pointer;
&.active {
color: rgba(76, 129, 196, 1);
background: #fff;
}
}
}
}
.avatar-list {
display: flex;
width: 970px;
margin: 0 auto;
}
.avatar-item {
display: flex;
width: 300px;
.content {
flex: 1;
margin-right: 10px;
overflow: hidden;
h2 {
font-size: 20px;
margin-bottom: 10px;
}
}
.pic {
width: 160px;
height: 100%;
object-fit: contain;
}
}
</style>
<template>
<div class="container">
<el-form :model="form" :rules="rules" ref="form" label-width="80px">
<el-form-item label="姓名">
{{ form.name }}
</el-form-item>
<el-form-item label="手机号">
{{ form.mobile }}
</el-form-item>
<el-form-item label="证书编号">
{{ form.number }}
</el-form-item>
<el-form-item prop="avatar" label="头像">
<upload-image v-model="form.avatar"></upload-image>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import UploadImage from '@/components/upload/UploadImage.vue'
import { getAvatar, uploadAvatar } from '@/api/my.js'
export default {
components: { UploadImage },
data() {
return {
form: { avatar: '' },
rules: {
avatar: [{ required: true, message: '请上传头像', trigger: 'change' }]
}
}
},
beforeMount() {
this.getAvatar()
},
methods: {
handleSubmit() {
this.$refs.form.validate().then(() => {
this.uploadAvatar()
})
},
getAvatar() {
getAvatar().then(res => {
if (res.status === 200 && res.code === 0) {
this.form = res.date
} else if (res.status === 400) {
this.$message.error(res.message)
} else if (res.status === 403) {
this.$router.push({ path: '/index', query: { needLogin: Date.now() } })
}
})
},
uploadAvatar() {
uploadAvatar({ avatar: this.form.avatar }).then(res => {
if (res.status === 200 && res.code === 0) {
this.$message({ type: 'success', message: '保存成功' })
} else {
this.$message.error(res.message)
}
})
}
}
}
</script>
<style scoped>
.container {
max-width: 970px;
margin: 0 auto;
}
</style>
......@@ -34,6 +34,26 @@ export default [
}
]
},
{
path: '/showcase',
component: Layout,
props: { hasFooter: false },
children: [{ path: '', component: () => import('@/pages/showcase/index.vue') }]
},
{
path: '/personal',
component: Layout,
props: { hasFooter: false },
children: [{ path: '', component: () => import('@/pages/personal/index.vue'), meta: { requiredLogin: true } }]
},
{
path: '/cert',
redirect: { path: '/personal', query: { index: 1 } }
},
{
path: '/card',
redirect: { path: '/personal', query: { index: 2 } }
},
// 在线报名
{
path: '/my',
......@@ -69,30 +89,6 @@ export default [
}
]
},
{
path: '/cert',
component: Layout,
props: { hasFooter: false },
children: [
{
name: 'CertQuery',
path: '',
component: () => import('@/pages/cert/index.vue')
}
]
},
{
path: '/card',
component: Layout,
props: { hasFooter: false },
children: [
{
name: 'CardQuery',
path: '',
component: () => import('@/pages/card/index.vue')
}
]
},
// 推荐信
{
path: '/letter',
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论