Skip to content

P
project-www-h5
提交 ac524fe6 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

新增右侧菜单

上级 7798b5f5
显示空白字符变更
内嵌 并排
正在显示 包含 383 行增加 和 11 行删除
api/index.js
浏览文件 @ ac524fe6
import httpRequest from '@/utils/httpRequest'
// 获取新闻列表
export function getNews($axios, params) {
return $axios.get(`/zws/v1/cms/news`, { params })
export function getNews(params) {
return httpRequest.get(`/zws/v1/cms/news`, { params })
}
// 获取新闻详情
export function getNew($axios, params) {
return $axios.get(`/zws/v1/cms/new`, { params })
export function getNew(params) {
return httpRequest.get(`/zws/v1/cms/new`, { params })
}
/**
* 发送验证码
*/
export function sendCode(data) {
return httpRequest.post('/api/usercenter/user/send-code', data)
}
/**
* 检验验证码
*/
export function checkCode(params) {
return httpRequest.get('/api/usercenter/user/check-code', { params })
}
/**
* 提交留咨信息
*/
export function submit(data) {
return httpRequest.post('/api/enrollment/v1.0/applications', data)
}
assets/css/base.css
浏览文件 @ ac524fe6
......@@ -31,7 +31,7 @@ a {
.main-content .title {
padding: 0.3rem 0 0.1rem;
font-size: 0.14rem;
font-weight: 500;
font-weight: bold;
color: #333;
}
.main-content p {
......
components/ApplyForm.vue 0 → 100644
浏览文件 @ ac524fe6
<template>
<div class="app-apply-form">
<h2 class="title">报名咨询</h2>
<div class="form">
<div class="form-item">
<input type="text" class="form-input" placeholder="请输入您的姓名" v-model="ruleForm.name" />
</div>
<div class="form-item">
<input type="number" class="form-input" placeholder="请输入您的电话" maxlength="11" v-model="ruleForm.phone" />
</div>
<div class="form-item">
<select class="form-select" placeholder="请选择项目" v-model="ruleForm.project_id">
<option v-for="(item, index) in projectList" :value="item.value" :key="index">{{ item.label }}</option>
</select>
</div>
<!-- <div class="form-item">
<input type="text" class="form-input" placeholder="请输入短信验证码" maxlength="4" v-model="ruleForm.code" />
<input type="button" value="获取验证码" class="form-button" />
</div> -->
<div class="form-item">
<input type="button" value="立即预约" class="form-button" @click="onSbumit" />
</div>
</div>
</div>
</template>
<script>
import * as api from '@/api'
export default {
data() {
return {
ruleForm: { name: '', phone: '', project_id: '1000' },
projectList: [
{ label: '金融工商管理硕士', value: '1000' },
{ label: '酒店及旅游业工商管理硕士', value: '1008' },
{ label: '金融硕士', value: '1001' },
{ label: '应用心理学硕士', value: '1006' },
{ label: '教育学硕士', value: '1005' },
{ label: '中国未来金融领袖计划', value: '1007' }
],
timer: null
}
},
computed: {
buttonText() {
return ''
}
},
methods: {
onSbumit() {
if (!this.ruleForm.name) {
this.$notify('请输入您的姓名')
return
}
if (!this.ruleForm.phone || !/^1[3-9]\d{9}$/.test(this.ruleForm.phone)) {
this.$notify('请输入正确的手机号')
return
}
// if (!this.ruleForm.code) {
// this.$notify('请输入短信验证码')
// return
// }
this.handleSubmit()
},
handleSubmit() {
api.submit(this.ruleForm).then(response => {
// this.$notify({ type: 'success', message: response.message })
this.$dialog.alert({ message: response.message }).then(() => {
this.$emit('success')
})
})
},
// 校验短信验证码
checkPhoneCode() {},
// 发送验证码
sendCode() {
this.setTimer()
},
setTimer() {
this.timer = setInterval(() => {}, 1000)
},
clearTimer() {
this.timer && clearInterval(this.timer)
}
},
destroyed() {
this.clearTimer()
}
}
</script>
<style lang="scss" scoped>
.app-apply-form {
min-width: 290px;
.title {
padding: 30px 0;
font-size: 20px;
color: #fff;
text-align: center;
}
}
.form-item {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.form-input {
padding: 0 10px;
width: 100%;
height: 38px;
background-color: #fff;
box-sizing: border-box;
border: none;
}
.form-select {
padding: 0 10px;
width: 100%;
height: 38px;
background-color: #fff;
box-sizing: border-box;
border: none;
}
.form-button {
padding: 0 10px;
width: 100%;
height: 38px;
font-size: 16px;
color: #aa1941;
background-color: #ffd61b;
box-sizing: border-box;
border: none;
cursor: pointer;
}
.form-input + .form-button {
margin-left: 10px;
}
</style>
components/Header.vue
浏览文件 @ ac524fe6
......@@ -15,15 +15,17 @@
</div>
</header>
<app-search v-if="searchVisible"></app-search>
<app-menu v-show="menuVisible"></app-menu>
<app-menu v-show="menuVisible" @showApplyForm="showApplyForm"></app-menu>
<right-aside ref="rightAside"></right-aside>
</div>
</template>
<script>
import AppMenu from '@/components/Menu'
import AppSearch from '@/components/Search'
import RightAside from '@/components/RightAside'
export default {
components: { AppMenu, AppSearch },
components: { AppMenu, AppSearch, RightAside },
data() {
return {}
},
......@@ -59,6 +61,9 @@ export default {
},
search() {
this.$notify({ type: 'primary', message: '暂未开通，尽请期待' })
},
showApplyForm() {
this.$refs.rightAside.showApplyForm()
}
}
}
......
components/Link.vue
浏览文件 @ ac524fe6
......@@ -5,7 +5,7 @@
<!-- 站内跳转 -->
<nuxt-link :to="item.path" v-else-if="item.path"><slot /></nuxt-link>
<!-- 事件 -->
<span v-else-if="item.onClick" @click="item.onClick"><slot /></span>
<div v-else-if="item.onClick" @click="item.onClick"><slot /></div>
<template v-else><slot /></template>
</div>
</template>
......
components/Menu.vue
浏览文件 @ ac524fe6
......@@ -85,7 +85,12 @@ export default {
{ name: '校友风采', path: '/alumnus/style' }
]
},
{ name: '我要报名' }
{
name: '我要报名',
onClick: () => {
this.$emit('showApplyForm')
}
}
]
}
},
......
components/RightAside.vue 0 → 100644
浏览文件 @ ac524fe6
<template>
<div>
<div class="rigth-aside">
<ul class="right-aside-btns">
<li @click="showApplyForm">
<img src="https://zws-imgs-pub.ezijing.com/static/public/d434fa0ffd77892273e63e6d694cff0a.png" />
<p>我要报名</p>
</li>
<li @click="showFollow">
<img src="https://zws-imgs-pub.ezijing.com/static/public/5526b83d7526b2742f6eba7151c367db.png" />
<p>关注我们</p>
</li>
</ul>
</div>
<!-- 我要报名 -->
<van-overlay :show="applyFormVisible" @click="hideApplyForm">
<div class="dialog-box" @click.stop>
<apply-form @success="hideApplyForm"></apply-form>
</div>
</van-overlay>
<!-- 关注我们 -->
<van-overlay :show="followVisible" @click="followVisible = false">
<div class="dialog-box" @click.stop>
<h2 class="title">关注我们</h2>
<div class="follow">
<img src="https://zws-imgs-pub.ezijing.com/static/public/d2d9945d598e81c3b58aff5ce927a78a.jpg" />
<p>扫码关注 了解更多</p>
</div>
</div>
</van-overlay>
</div>
</template>
<script>
import ApplyForm from '@/components/ApplyForm'
// import { sendCode, checkCode, postNes } from '../plugins/api'
const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
export default {
components: { ApplyForm },
data() {
return {
applyFormVisible: false,
followVisible: false
}
},
methods: {
// 我要报名
showApplyForm() {
this.applyFormVisible = true
},
hideApplyForm() {
this.applyFormVisible = false
},
// 关注我们
showFollow() {
this.followVisible = true
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .van-overlay {
z-index: 100;
}
.rigth-aside {
position: fixed;
top: 50%;
right: 16px;
z-index: 99;
transform: translateY(-50%);
.right-aside-btns {
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 0.5rem;
height: 0.5rem;
font-size: 0.1rem;
color: #999;
background-color: #fff;
cursor: pointer;
img {
width: 0.23rem;
height: 0.23rem;
}
}
li + li {
border-top: 1px solid #999;
}
}
}
.dialog-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0 auto;
width: 345px;
height: 426px;
background: url('~/assets/images/dialog_bg.png') no-repeat;
background-size: cover;
.title {
padding: 30px 0;
font-size: 20px;
color: #fff;
text-align: center;
}
}
.follow {
img {
width: 182px;
height: 182px;
}
p {
margin-top: 20px;
font-size: 12px;
color: #fff;
text-align: center;
}
}
</style>
components/about/NewsItem.vue
浏览文件 @ ac524fe6
......@@ -5,7 +5,7 @@
<div class="news-item-content">
<div class="news-item-content__date">{{ formatDate(item.created_time) }}</div>
<div class="news-item-content__title">{{ item.title }}</div>
<div class="news-item-content__text">{{ item.summary }}</div>
<div class="news-item-content__text" v-if="item.summary">{{ item.summary }}</div>
</div>
</nuxt-link>
</div>
......
components/alumnus/NewsItem.vue
浏览文件 @ ac524fe6
......@@ -5,7 +5,7 @@
<div class="news-item-content">
<div class="news-item-content__date">{{ formatDate(item.created_time) }}</div>
<div class="news-item-content__title">{{ item.title }}</div>
<div class="news-item-content__text">{{ item.summary }}</div>
<div class="news-item-content__text" v-if="item.summary">{{ item.summary }}</div>
</div>
</nuxt-link>
</div>
......
components/home/Case.vue
浏览文件 @ ac524fe6
......@@ -4,8 +4,10 @@
<template v-for="(item, index) in list">
<van-swipe-item :key="index">
<div class="case">
<nuxt-link :to="`/about/news/${item.id}`">
<img :src="item.photo_uri" class="case-pic" />
<p class="case-title">{{ item.title }}</p>
</nuxt-link>
</div>
</van-swipe-item>
</template>
......
package-lock.json
浏览文件 @ ac524fe6
......@@ -8,8 +8,10 @@
"version": "1.0.0",
"dependencies": {
"@nuxtjs/axios": "^5.13.1",
"axios": "^0.21.1",
"core-js": "^3.9.1",
"nuxt": "^2.15.3",
"qs": "^6.10.1",
"swiper": "^5.4.5",
"vant": "^2.12.10",
"vue-awesome-swiper": "^4.1.1"
......
package.json
浏览文件 @ ac524fe6
......@@ -10,8 +10,10 @@
},
"dependencies": {
"@nuxtjs/axios": "^5.13.1",
"axios": "^0.21.1",
"core-js": "^3.9.1",
"nuxt": "^2.15.3",
"qs": "^6.10.1",
"swiper": "^5.4.5",
"vant": "^2.12.10",
"vue-awesome-swiper": "^4.1.1"
......
utils/httpRequest.js 0 → 100644
浏览文件 @ ac524fe6
import axios from 'axios'
import qs from 'qs'
const httpRequest = axios.create({
baseURL: 'https://project-api.ezijing.com',
timeout: 60000,
withCredentials: true,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
// 请求拦截
httpRequest.interceptors.request.use(
function(config) {
if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
config.data = qs.stringify(config.data)
}
if (config.headers['Content-Type'] === 'multipart/form-data') {
const form = new window.FormData()
for (const key in config.data) {
form.append(key, config.data[key])
}
config.data = form
}
return config
},
function(error) {
return Promise.reject(error)
}
)
// 响应拦截
httpRequest.interceptors.response.use(
function(response) {
const { data } = response
if (data.msg) {
if (data.msg === '请先登录') {
window.location.href = `${webConf.others.loginUrl}?rd=${encodeURIComponent(window.location.href)}`
}
}
if (parseInt(data.code) === 1) {
return Message.error(data.msg)
}
if (data.code) {
if (data.code === 4001) {
window.location.href = `${webConf.others.loginUrl}?rd=${encodeURIComponent(window.location.href)}`
}
return data.message ? Message.error(data.message) : Message.error(data.msg)
}
return data
},
function(error) {
if (error.response) {
const { status, message } = error.response.data
// 未登录
if (status === 403) {
window.location.href = `${webConf.others.loginUrl}?rd=${encodeURIComponent(window.location.href)}`
}
Message.error(message || error.response.data)
return Promise.reject(error.response)
} else {
Message.error(error)
}
return Promise.reject(error)
}
)
export default httpRequest
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论