Skip to content

C
center-psp-show-h5
提交 477b7357 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

updates

上级 43040b35
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 970 行增加 和 41 行删除
package.json
浏览文件 @ 477b7357
......@@ -18,20 +18,20 @@
"sass": "^1.50.0",
"swiper": "^8.1.0",
"vant": "^3.4.7",
"vue": "^3.2.31",
"vue": "^3.2.32",
"vue-router": "^4.0.14"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.1.0",
"@types/node": "^16.11.26",
"@rushstack/eslint-patch": "^1.1.2",
"@types/node": "^17.0.23",
"@vitejs/plugin-vue": "^2.3.1",
"@vue/eslint-config-typescript": "^10.0.0",
"@vue/tsconfig": "^0.1.3",
"eslint": "^8.5.0",
"eslint-plugin-vue": "^8.2.0",
"eslint": "^8.13.0",
"eslint-plugin-vue": "^8.6.0",
"typescript": "~4.6.3",
"vite": "^2.9.1",
"vite": "^2.9.4",
"vite-plugin-checker": "^0.4.5",
"vue-tsc": "^0.33.9"
"vue-tsc": "^0.34.6"
}
}
pnpm-lock.yaml
浏览文件 @ 477b7357
差异被折叠。
src/App.vue
浏览文件 @ 477b7357
<template>
<router-view />
<RouterView />
</template>
<style>
......
src/components.d.ts
浏览文件 @ 477b7357
import AppCard from '@/components/base/AppCard.vue'
import AppContainer from '@/components/base/AppContainer.vue'
declare module 'vue' {
export interface GlobalComponents {
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
AppCard: typeof AppCard
AppContainer: typeof AppContainer
}
}
src/components/CourseItem.vue 0 → 100644
浏览文件 @ 477b7357
<script setup lang="ts">
import type { ICourseItem } from '@/types'
defineProps<{ data: ICourseItem }>()
</script>
<template>
<div class="course-item">
<img :src="data.course_picture" class="course-item-pic" />
<div class="course-item-content">
<h5>{{ data.course_name }}</h5>
<div>
<span>{{ data.course_chapters.big_total }}章节</span>
<span>{{ data.course_chapters.small_total }}课时</span>
</div>
<div>
<span>{{ data.pv }}人看过</span>
<span>{{ data.records_total }}人评论</span>
</div>
<p>{{ data.status }}</p>
</div>
</div>
</template>
<style lang="scss">
.course-item {
display: flex;
padding: 0.22rem;
background: #fff;
border-radius: 0.2rem;
}
.course-item-pic {
width: 1.6rem;
height: 1.9rem;
border-radius: 0.1rem;
overflow: hidden;
object-fit: cover;
}
.course-item-content {
margin-left: 0.26rem;
font-size: 0.24rem;
line-height: 0.33rem;
font-weight: 500;
color: #4e4e4e;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
src/components/VideoItem.vue 0 → 100644
浏览文件 @ 477b7357
<script setup lang="ts">
import type { IVideoItem } from '@/types'
defineProps<{ data: IVideoItem }>()
</script>
<template>
<div class="video-item">
<img :src="data.cover_page" />
<h5>{{ data.course_name }}</h5>
<p>{{ data.pv }}播放</p>
</div>
</template>
<style lang="scss">
.video-item {
img {
width: 2rem;
height: 1.9rem;
border-radius: 0.1rem;
overflow: hidden;
object-fit: cover;
}
h5 {
margin-top: 0.09rem;
font-size: 0.24rem;
font-weight: 500;
line-height: 0.33rem;
color: #4e4e4e;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
p {
margin-top: 0.04rem;
font-size: 0.1rem;
line-height: 0.28rem;
color: #999999;
}
}
</style>
src/components/base/AppCard.vue
浏览文件 @ 477b7357
......@@ -7,7 +7,9 @@ defineProps<{ title?: string }>()
<div class="app-card-hd">
<slot name="header">
<h2 class="app-card-hd__title" v-if="title">{{ title }}</h2>
<slot name="header-aside"></slot>
<div class="app-card-hd-aside">
<slot name="header-aside"></slot>
</div>
</slot>
</div>
<div class="app-card-bd">
......@@ -22,12 +24,30 @@ defineProps<{ title?: string }>()
}
.app-card-hd {
display: flex;
align-items: center;
margin-bottom: 0.18rem;
}
.app-card-hd__title {
flex: 1;
font-size: 0.28rem;
font-weight: 600;
line-height: 1;
color: #333;
}
.app-card-hd-aside {
.button {
min-width: 1.18rem;
height: 0.4rem;
font-size: 0.22rem;
line-height: 0.4rem;
color: #ffffff;
text-align: center;
background: linear-gradient(164deg, #f7c988 0%, #e5a448 100%);
border-radius: 0.2rem;
}
.more {
font-size: 0.22rem;
color: #999;
}
}
</style>
src/components/base/AppContainer.vue 0 → 100644
浏览文件 @ 477b7357
<script setup lang="ts">
import { withDefaults } from 'vue'
import { useRouter } from 'vue-router'
interface Props {
title?: string
headerAlign?: boolean
backgroundColor?: string
}
withDefaults(defineProps<Props>(), {
headerAlign: false
})
const router = useRouter()
function handleBack() {
router.push('/')
}
</script>
<template>
<section class="app-container">
<div class="app-container-hd">
<slot name="header">
<van-icon name="arrow-left" @click="handleBack" />
<h2 class="app-container-hd__title" @click="handleBack" v-if="title">{{ title }}</h2>
<div class="app-container-hd-aside">
<slot name="header-aside"></slot>
</div>
</slot>
</div>
<div class="app-container-bd">
<slot></slot>
</div>
</section>
</template>
<style lang="scss">
.app-container-hd {
display: flex;
align-items: center;
font-size: 0.32rem;
}
.app-container-hd__title {
margin-left: 0.22rem;
font-size: 0.32rem;
font-weight: 600;
color: #333333;
}
</style>
src/components/layout/Header.vue
浏览文件 @ 477b7357
......@@ -7,7 +7,7 @@
</div>
<ul class="app-header-right">
<li>
<router-link to="/messages"
<router-link to="/message"
><img src="https://webapp-pub.ezijing.com/project/prp-h5/icon_message.png"
/></router-link>
</li>
......
src/components/layout/Index.vue
浏览文件 @ 477b7357
......@@ -5,7 +5,7 @@ import AppHeader from './Header.vue'
<template>
<div class="app-layout">
<AppHeader />
<router-view />
<RouterView />
</div>
</template>
......@@ -18,5 +18,6 @@ import AppHeader from './Header.vue'
background-size: 100% auto;
padding: 0 0.3rem;
box-sizing: border-box;
overflow: hidden;
}
</style>
src/main.ts
浏览文件 @ 477b7357
......@@ -6,12 +6,13 @@ import Vant from 'vant'
import 'vant/lib/index.css'
// 公共组件
import AppCard from '@/components/base/AppCard.vue'
import AppContainer from '@/components/base/AppContainer.vue'
import modules from './modules'
const app = createApp(App)
// 注册公共组件
app.component('AppCard', AppCard)
app.component('AppCard', AppCard).component('AppContainer', AppContainer)
// 注册模块
modules({ router })
......
src/modules/course/api.ts 0 → 100644
浏览文件 @ 477b7357
import httpRequest from '@/utils/axios'
// 获取课程列表
export function getCourseList(params: { page_size: number; page: number }) {
return httpRequest.get('/api/psp/v1/learning/course-list', { params })
}
// 获取课程列表
export function getCourseView(params: { id: string }) {
return httpRequest.get('/api/psp/v1/learning/course-view', { params })
}
src/modules/course/index.ts 0 → 100644
浏览文件 @ 477b7357
import type { RouteRecordRaw } from 'vue-router'
import AppLayout from '@/components/layout/Index.vue'
export const routes: Array<RouteRecordRaw> = [
{
path: '/course',
component: AppLayout,
children: [
{ path: '', component: () => import('./views/Index.vue') },
{ path: 'view/:id', component: () => import('./views/View.vue'), props: true }
]
}
]
src/modules/course/views/View.vue 0 → 100644
浏览文件 @ 477b7357
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getCourseView } from '../api'
const props = defineProps<{ id: string }>()
const data = ref()
function getCourse() {
getCourseView({ id: props.id }).then(res => {
data.value = res.data.course
})
}
onMounted(() => {
getCourse()
})
</script>
<template>
<div class="course" v-if="data">
<div class="course-top">
<div class="course-info">
<img :src="data.course_picture" class="course-info-pic" />
<div class="course-info-content">
<h1>{{ data.course_name }}</h1>
<ul>
<li class="l1">
<span>{{ data.course_chapters.big_total }}章节</span>
<span>{{ data.course_chapters.small_total }}课时</span>
</li>
<li class="l2">
<span>{{ data.course_chapters.big_total }}人看过</span>
<span>{{ data.course_chapters.small_total }}人评论</span>
</li>
</ul>
<div class="star">
<p>
共计可得<b>{{ data.star_total }}</b
>个星星
</p>
</div>
<div class="lecturer" v-for="(lecturer, index) in data.course_lectures" :key="index">
<h4>{{ lecturer.lecturer_name }}</h4>
<p>{{ lecturer.lecturer_title }}</p>
<p>{{ lecturer.lecturer_office }}</p>
</div>
</div>
</div>
<div class="course-desc" v-html="data.course_represent"></div>
</div>
<div class="course-bottom">
<div class="course-tips">如果你也是知识获得者，请晒出你的海报、说出你的感想，得到你的星星。</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.course-info {
display: flex;
}
.course-info-pic {
width: 2rem;
height: 2.4rem;
background-color: #fff;
border-radius: 0.2rem;
overflow: hidden;
object-fit: cover;
}
.course-info-content {
flex: 1;
margin-left: 0.16rem;
h1 {
font-size: 0.36rem;
line-height: 0.5rem;
font-weight: 500;
color: #333333;
}
ul {
display: flex;
justify-content: space-between;
li {
font-size: 0.2rem;
font-weight: 300;
line-height: 0.28rem;
span + span {
margin-left: 0.1rem;
}
}
.l1 {
color: #033974;
}
.l2 {
color: #999;
}
}
.star {
margin: 0.07rem 0;
p {
display: inline-block;
padding: 0 0.15rem;
height: 0.3rem;
font-size: 0.2rem;
line-height: 0.3rem;
border-radius: 0.15rem;
border: 0.01rem solid #80b0e5;
b {
color: #033974;
}
}
}
.lecturer {
h4 {
margin-bottom: 0.05rem;
font-size: 0.24rem;
line-height: 0.33rem;
font-weight: 500;
color: #333333;
}
p {
font-size: 0.22rem;
font-weight: 400;
line-height: 0.3rem;
color: #666666;
}
}
}
.course-desc {
margin-top: 0.15rem;
font-size: 0.24rem;
line-height: 0.3rem;
color: #333;
}
.course-bottom {
margin-top: 0.28rem;
background-color: #033974;
border-radius: 0.2rem;
}
.course-tips {
padding: 0.3rem;
font-size: 0.24rem;
color: #ffffff;
line-height: 0.36rem;
}
</style>
src/modules/home/api.ts
浏览文件 @ 477b7357
......@@ -2,5 +2,14 @@ import httpRequest from '@/utils/axios'
// 获取首页数据
export function getHomeData() {
return httpRequest.get('/api/prp/v1/index/index')
return httpRequest.get('/api/psp/v1/index/index')
}
// 获取导学视频列表
export function getVideoList(params?: { page_size: number; page: number }) {
return httpRequest.get('/api/psp/v1/learning/video-list', { params })
}
// 获取课程列表
export function getCourseList(params?: { page_size: number; page: number }) {
return httpRequest.get('/api/psp/v1/learning/course-list', { params })
}
src/modules/home/components/AdmissionGuide.vue
浏览文件 @ 477b7357
<script setup lang="ts">
interface docItem {
id: string
title: string
pv: string
}
defineProps<{ docs: Array<docItem>; videos: object[] }>()
import type { IDocItem, IVideoItem } from '../types'
defineProps<{ docs: IDocItem[]; videos: IVideoItem[] }>()
</script>
<template>
......
src/modules/home/components/LearningMap.vue
浏览文件 @ 477b7357
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref } from 'vue'
import type { IDocItem } from '../types'
import LearningMapVideo from './LearningMapVideo.vue'
import LearningMapCourse from './LearningMapCourse.vue'
defineProps<{ docs: IDocItem[] }>()
const active = ref<number>(0)
</script>
<template>
<AppCard title="学习地图"></AppCard>
<AppCard title="学习地图">
<template #header-aside>
<div class="button">去学习</div>
</template>
<van-tabs
v-model:active="active"
shrink
background="transparent"
title-active-color="#033974"
title-inactive-color="#4E4E4E"
line-height="0"
>
<van-tab title="解释文档">
<div class="learn-box learn-docs">
<ul>
<li v-for="item in docs" :key="item.id">
<p>{{ item.title }}</p>
<span>{{ item.pv }}</span>
<van-icon name="arrow" />
</li>
</ul>
</div>
</van-tab>
<van-tab title="学前测评">
<div class="learn-box learn-test">
<h2>查漏补缺 建立系统概念</h2>
<p>了解PRP学习前系统专业知识的情况</p>
<a class="button">去测评</a>
</div>
</van-tab>
<van-tab title="课程导学">
<div class="learn-box">
<LearningMapVideo></LearningMapVideo>
</div>
</van-tab>
<van-tab title="学习进度">
<div class="learn-box learn-course">
<LearningMapCourse></LearningMapCourse>
</div>
</van-tab>
</van-tabs>
<div class="learn-banner">
<img src="https://webapp-pub.ezijing.com/project/prp-h5/learning_map_banner.png" />
</div>
</AppCard>
</template>
<style lang="scss">
.learn-box {
height: 3.1rem;
padding: 0.3rem;
background: #fff;
border-radius: 0.2rem;
overflow: hidden;
box-sizing: border-box;
}
// 解释文档
.learn-docs {
background: url(https://webapp-pub.ezijing.com/project/prp-h5/learning_map_bg.png) no-repeat;
background-size: contain;
}
.learn-banner {
margin-top: 0.2rem;
margin-left: -0.3rem;
margin-right: -0.3rem;
img {
width: 100%;
}
}
// 学前测评
.learn-test {
background: #fff url(https://webapp-pub.ezijing.com/project/prp-h5/learning_map_test.png) no-repeat right 0.2rem
bottom 0.5rem;
background-size: 2.08rem;
h2 {
margin-top: 0.2rem;
margin-left: 0.3rem;
font-size: 0.32rem;
font-weight: 500;
line-height: 1.4;
color: #4e4e4e;
}
p {
margin-top: 0.3rem;
margin-left: 0.3rem;
font-size: 0.28rem;
font-weight: 400;
line-height: 1.4;
color: #666666;
}
.button {
margin-top: 0.4rem;
display: block;
height: 0.8rem;
font-size: 0.28rem;
line-height: 0.8rem;
color: #fff;
text-align: center;
background: linear-gradient(90deg, #f7c988 0%, #e5a448 100%);
border-radius: 0.4rem;
}
}
.learn-course {
background-color: #f4e6d3;
}
</style>
src/modules/home/components/LearningMapCourse.vue 0 → 100644
浏览文件 @ 477b7357
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import type { ICourseItem } from '../types'
import { getCourseList } from '../api'
// 学习进度
const dataset = ref<{ total: number; list: ICourseItem[] }>({ total: 0, list: [] })
function fetchCourseList() {
getCourseList().then(res => {
dataset.value = res.data
})
}
onMounted(() => {
fetchCourseList()
})
</script>
<template>
<swiper slides-per-view="auto" :space-between="10">
<swiper-slide v-for="(item, index) in dataset.list" :key="index" class="course-item">
<router-link :to="{ path: `/course/view/${item.id}` }" class="course-item-inner">
<img :src="item.course_picture" class="course-item-pic" />
<div class="course-item-content">
<h5>{{ item.course_name }}</h5>
<p class="t1">
<span v-for="(lecturer, index) in item.course_lectures" :key="index">{{ lecturer.lecturer_name }}</span>
</p>
<p class="t2">
<span>{{ item.course_chapters.big_total }}章节</span>
<span>{{ item.course_chapters.small_total }}课时</span>
</p>
<p class="t2">
<span>{{ item.pv }}人看过</span>
<span>{{ item.records_total }}人评论</span>
</p>
<p class="t3">{{ item.status }}</p>
</div>
</router-link>
</swiper-slide>
</swiper>
</template>
<style lang="scss">
.course-item {
width: 4.7rem;
padding: 0.22rem;
background: #fff;
border-radius: 0.2rem;
}
.course-item-inner {
display: flex;
}
.course-item-pic {
width: 1.6rem;
height: 1.9rem;
border-radius: 0.1rem;
overflow: hidden;
object-fit: cover;
}
.course-item-content {
flex: 1;
margin-left: 0.26rem;
line-height: 0.33rem;
h5 {
font-size: 0.24rem;
font-weight: 500;
line-height: 0.33rem;
color: #4e4e4e;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.t1 {
margin-top: 0.05rem;
font-size: 0.24rem;
font-weight: 400;
line-height: 0.33rem;
color: #666;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.t2 {
margin-top: 0.05rem;
font-size: 0.2rem;
font-weight: 400;
color: #999;
line-height: 0.28rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
span + span {
margin-left: 0.2rem;
}
}
.t3 {
margin-top: 0.23rem;
font-size: 0.2rem;
font-weight: 400;
color: #999;
text-align: right;
}
}
</style>
src/modules/home/components/LearningMapVideo.vue 0 → 100644
浏览文件 @ 477b7357
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import type { IVideoItem } from '../types'
import { getVideoList } from '../api'
// 课程导学
const dataset = ref<{ total: number; list: IVideoItem[] }>({ total: 0, list: [] })
function fetchVideoList() {
getVideoList().then(res => {
dataset.value = res.data
})
}
onMounted(() => {
fetchVideoList()
})
</script>
<template>
<swiper slides-per-view="auto" :space-between="10">
<swiper-slide v-for="(item, index) in dataset.list" :key="index" class="video-item">
<img :src="item.cover_page" />
<h5>{{ item.course_name }}</h5>
<p>{{ item.pv }}播放</p>
</swiper-slide>
</swiper>
</template>
<style lang="scss">
.video-item {
width: 2rem;
img {
width: 2rem;
height: 1.9rem;
border-radius: 0.1rem;
overflow: hidden;
object-fit: cover;
}
h5 {
margin-top: 0.09rem;
font-size: 0.24rem;
font-weight: 500;
line-height: 0.33rem;
color: #4e4e4e;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
p {
margin-top: 0.04rem;
font-size: 0.1rem;
line-height: 0.28rem;
color: #999999;
}
}
</style>
src/modules/home/components/Menu.vue
浏览文件 @ 477b7357
......@@ -18,7 +18,7 @@ const menus: Array<{
icon: 'https://webapp-pub.ezijing.com/project/prp-h5/home_menu_2.png'
},
{
path: '/',
path: '/query',
name: '权益查看',
icon: 'https://webapp-pub.ezijing.com/project/prp-h5/home_menu_3.png'
},
......@@ -44,8 +44,10 @@ const menus: Array<{
<nav class="home-nav">
<swiper slides-per-view="auto" :space-between="12">
<swiper-slide v-for="(item, index) in menus" :key="index" class="nav-item">
<img :src="item.icon" />
<p>{{ item.name }}</p>
<router-link :to="item.path">
<img :src="item.icon" />
<p>{{ item.name }}</p>
</router-link>
</swiper-slide>
</swiper>
</nav>
......
src/modules/home/components/Questions.vue 0 → 100644
浏览文件 @ 477b7357
<script setup lang="ts"></script>
<template>
<AppCard title="陪伴问答">
<template #header-aside>
<div class="button">发表问答</div>
</template>
</AppCard>
</template>
src/modules/home/components/TeamRanking.vue
浏览文件 @ 477b7357
<script setup lang="ts"></script>
<template>
<AppCard title="荣誉总榜"></AppCard>
<AppCard title="荣誉总榜">
<template #header-aside>
<div class="more">查看更多 <van-icon name="arrow" /></div>
</template>
</AppCard>
</template>
src/modules/home/types.ts 0 → 100644
浏览文件 @ 477b7357
import type { IVideoItem, ICourseItem } from '@/types'
export interface HomeInfo {
banner: IBanner[]
admission_guide_docs: IDocItem[]
admission_guide_videos: IVideoItem[]
learning_map_docs: IDocItem[]
}
export interface IBanner {
id: string
title: string
pv: string
}
export interface IDocItem {
id: string
title: string
pv: string
}
export { IVideoItem, ICourseItem }
src/modules/home/views/Index.vue
浏览文件 @ 477b7357
<script setup lang="ts">
import { ref } from 'vue'
import { ref, onMounted } from 'vue'
import type { HomeInfo } from '../types'
import * as api from '../api'
import HomeBanner from '../components/Banner.vue'
import HomeMenu from '../components/Menu.vue'
import Banner from '../components/Banner.vue'
import Menu from '../components/Menu.vue'
import AdmissionGuide from '../components/AdmissionGuide.vue'
import LearningMap from '../components/LearningMap.vue'
import ExamStrategy from '../components/ExamStrategy.vue'
import TeamRanking from '../components/TeamRanking.vue'
import Questions from '../components/Questions.vue'
const data = ref<{ banner: object[]; admission_guide_docs: object[]; admission_guide_videos: object[] }>({
const data = ref<HomeInfo>({
banner: [],
admission_guide_docs: [],
admission_guide_videos: []
admission_guide_videos: [],
learning_map_docs: []
})
// 获取首页数据
function fetchHomeData() {
......@@ -19,20 +22,23 @@ function fetchHomeData() {
data.value = res.data
})
}
fetchHomeData()
onMounted(() => {
fetchHomeData()
})
</script>
<template>
<HomeBanner :list="data.banner"></HomeBanner>
<HomeMenu></HomeMenu>
<Banner :list="data.banner"></Banner>
<Menu></Menu>
<!-- 入学指南 -->
<AdmissionGuide :docs="data.admission_guide_docs" :videos="data.admission_guide_videos"></AdmissionGuide>
<!-- 学习地图 -->
<LearningMap></LearningMap>
<LearningMap :docs="data.learning_map_docs"></LearningMap>
<!-- 权益查看 -->
<!-- 荣誉总榜 -->
<TeamRanking></TeamRanking>
<!-- 考试攻略 -->
<ExamStrategy></ExamStrategy>
<!-- 陪伴问答 -->
<Questions></Questions>
</template>
src/modules/messages/index.ts → src/modules/message/index.ts
浏览文件 @ 477b7357
......@@ -3,7 +3,7 @@ import AppLayout from '@/components/layout/Index.vue'
export const routes: Array<RouteRecordRaw> = [
{
path: '/messages',
path: '/message',
component: AppLayout,
children: [{ path: '', component: () => import('./views/Index.vue') }]
}
......
src/modules/message/views/Index.vue 0 → 100644
浏览文件 @ 477b7357
<script setup lang="ts"></script>
<template>
<div class="home"></div>
</template>
src/modules/my/api.ts 0 → 100644
浏览文件 @ 477b7357
import httpRequest from '@/utils/axios'
// 获取我的信息
export function getMyInfo() {
return httpRequest.get('/api/psp/v1/my/info')
}
src/modules/my/types.ts 0 → 100644
浏览文件 @ 477b7357
export interface MyType {
start: string
}
src/modules/my/views/Index.vue
浏览文件 @ 477b7357
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getMyInfo } from '../api'
const info = ref()
const teamInfo = ref()
function fetchMyInfo() {
getMyInfo().then(res => {
info.value = res.data.info || {}
teamInfo.value = res.data.team_info || { star: 0 }
})
}
onMounted(() => {
fetchMyInfo()
})
const menus: Array<{
name: string
path: string
icon: string
}> = [
{
path: '/',
name: '我的课程',
icon: 'https://webapp-pub.ezijing.com/project/prp-h5/my_menu_1.png'
},
{
path: '/',
name: '我的团队',
icon: 'https://webapp-pub.ezijing.com/project/prp-h5/my_menu_2.png'
},
{
path: '/',
name: '我的问答',
icon: 'https://webapp-pub.ezijing.com/project/prp-h5/my_menu_3.png'
},
{
path: '/',
name: '申请导师',
icon: 'https://webapp-pub.ezijing.com/project/prp-h5/my_menu_4.png'
},
{
path: '/',
name: '申请紫荆奖',
icon: 'https://webapp-pub.ezijing.com/project/prp-h5/my_menu_5.png'
},
{
path: '/',
name: '参加PRP大会',
icon: 'https://webapp-pub.ezijing.com/project/prp-h5/my_menu_6.png'
}
]
</script>
<template>
<div class="home"></div>
<div class="my" v-if="info">
<div class="user">
<img :src="info.avatar" />
<p>{{ info.name }}</p>
</div>
<div class="quantity">
<dl>
<dt>{{ info.star }}</dt>
<dd>我的星星</dd>
</dl>
<dl>
<dt>{{ teamInfo.star }}</dt>
<dd>我的积分</dd>
</dl>
</div>
<div class="box">
<nav class="menus">
<ul>
<li v-for="(item, index) in menus" :key="index">
<router-link :to="item.path">
<img :src="item.icon" />
<p>{{ item.name }}</p>
</router-link>
</li>
</ul>
</nav>
</div>
<div class="logout">退出登录</div>
</div>
</template>
<style lang="scss">
.my {
.user {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
img {
width: 1.5rem;
height: 1.5rem;
background: #fff;
border-radius: 50%;
object-fit: cover;
overflow: hidden;
}
p {
margin-top: 0.25rem;
font-size: 0.32rem;
font-weight: 400;
color: #333;
}
}
.quantity {
display: flex;
margin-top: 0.4rem;
dl {
flex: 1;
text-align: center;
}
dl + dl {
border-left: 0.01rem solid #d3d3d3;
}
dt {
font-size: 0.42rem;
font-weight: 500;
line-height: 0.6rem;
color: #033974;
}
dd {
font-size: 0.3rem;
color: #666666;
line-height: 0.42rem;
}
}
.box {
margin: 0.4rem 0;
padding: 0.34rem;
background-color: #fff;
border-radius: 0.2rem;
}
.menus {
ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 0.45rem;
}
li {
text-align: center;
img {
width: 0.76rem;
height: 0.76rem;
}
p {
margin-top: 0.13rem;
font-size: 0.28rem;
font-weight: 400;
color: #666666;
}
}
}
.logout {
margin-top: 0.6rem;
height: 0.8rem;
font-size: 0.28rem;
line-height: 0.8rem;
color: #666666;
text-align: center;
border-radius: 0.4rem;
border: 0.01rem solid #999999;
cursor: pointer;
}
}
</style>
src/modules/qa/index.ts 0 → 100644
浏览文件 @ 477b7357
import type { RouteRecordRaw } from 'vue-router'
import AppLayout from '@/components/layout/Index.vue'
export const routes: Array<RouteRecordRaw> = [
{
path: '/qa',
component: AppLayout,
children: [{ path: '', component: () => import('./views/Index.vue') }]
}
]
src/modules/qa/views/Index.vue 0 → 100644
浏览文件 @ 477b7357
<script setup lang="ts"></script>
<template>
<div class="home"></div>
</template>
src/modules/query/index.ts 0 → 100644
浏览文件 @ 477b7357
import type { RouteRecordRaw } from 'vue-router'
import AppLayout from '@/components/layout/Index.vue'
export const routes: Array<RouteRecordRaw> = [
{
path: '/query',
component: AppLayout,
children: [{ path: '', component: () => import('./views/Index.vue') }]
}
]
src/modules/query/views/Index.vue 0 → 100644
浏览文件 @ 477b7357
<script setup lang="ts">
import { ref } from 'vue'
const active = ref<number>(0)
</script>
<template>
<AppContainer title="权益查看">
<van-tabs
v-model:active="active"
shrink
background="transparent"
title-active-color="#033974"
title-inactive-color="#4E4E4E"
line-height="0"
>
<van-tab title="名片查询"> </van-tab>
<van-tab title="证书查询"> </van-tab>
<van-tab title="持证人查看"> </van-tab>
</van-tabs>
</AppContainer>
</template>
src/modules/team/index.ts 0 → 100644
浏览文件 @ 477b7357
import type { RouteRecordRaw } from 'vue-router'
import AppLayout from '@/components/layout/Index.vue'
export const routes: Array<RouteRecordRaw> = [
{
path: '/team',
component: AppLayout,
children: [{ path: '', component: () => import('./views/Index.vue') }]
}
]
src/modules/team/views/Index.vue 0 → 100644
浏览文件 @ 477b7357
<script setup lang="ts"></script>
<template>
<div class="home"></div>
</template>
src/types.ts 0 → 100644
浏览文件 @ 477b7357
// 视频
export interface IVideoItem {
id: string
type: string
type_name: string
cover_page: string
course_name: string
aliyun_video_id: string
pv: string
play_info: object
}
// 课程
export interface ICourseItem {
id: string
curriculum_id: string
weight: string
status: string
pv: string
course_name: string
course_picture: string
course_represent: string
course_lectures: Array<ICourseLecturerItem>
records_total: number
course_chapters: ICourseChapters
star_total: number
progress: number
}
export interface ICourseChapters {
big_total: string
small_total: string
list: []
}
// 课程老师
export interface ICourseLecturerItem {
lecturer_name: string
lecturer_title: string
lecturer_office: string
}
vite.config.ts
浏览文件 @ 477b7357
......@@ -18,10 +18,10 @@ export default defineConfig(({ mode }) => {
cert: fs.readFileSync(path.join(__dirname, './https/dev.ezijing.com.pem'))
},
proxy: {
'/api/prp': {
target: 'http://localhost-sixiangxingqiu-frontend.ezijing.com',
'/api/psp': {
target: 'https://psp-api.ezijing.com',
changeOrigin: true,
rewrite: path => path.replace('/api/prp/', '/')
rewrite: path => path.replace('/api/psp/', '/')
},
'/api': 'https://learn-api.ezijing.com'
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论