Skip to content

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

release 1.1

上级 e0d2b073
隐藏空白字符变更
内嵌 并排
正在显示 包含 256 行增加 和 115 行删除
src/modules/home/components/LearningMap.vue
浏览文件 @ cb9eb081
......@@ -65,7 +65,7 @@ function showTips() {
</van-tab>
</van-tabs>
<div class="learn-banner">
<router-link to="/my/course">
<router-link to="/learn/course">
<img src="https://webapp-pub.ezijing.com/project/prp-h5/learning_map_banner.png" />
</router-link>
</div>
......
src/modules/home/components/Questions.vue
浏览文件 @ cb9eb081
......@@ -3,7 +3,7 @@ import { Toast } from 'vant'
import PublishItem from '@/components/PublishItem.vue'
import { createQuestionComment } from '../api'
defineProps<{ data: { total: 0; list: [] } }>()
defineProps<{ data: { total: number; list: Record<string, any>[] } }>()
// 评论
const onSubmitComment = (data: any, action: string) => {
......
src/modules/home/components/TeamRanking.vue
浏览文件 @ cb9eb081
<script setup lang="ts"></script>
<script setup lang="ts">
import type { ITeam } from '../types'
defineProps<{ teams: ITeam[] }>()
</script>
<template>
<AppCard title="荣誉总榜" id="team">
<template #header-aside>
<div class="more">查看更多 <van-icon name="arrow" /></div>
<div class="more">
<router-link to="/team">查看更多 <van-icon name="arrow" /></router-link>
</div>
</template>
<div class="team-ranking">
<h2>团队荣誉总榜</h2>
<ul>
<li v-for="item in teams" :key="item.id">
<h4>{{ item.name }}</h4>
<p>{{ item.slogan }}<em>|</em>{{ item.members_count }}人</p>
</li>
</ul>
</div>
</AppCard>
</template>
<style lang="scss">
.team-ranking {
background: #fff url(https://webapp-pub.ezijing.com/project/prp-h5/team_bg.png) no-repeat;
background-size: 100%;
border-radius: 0.2rem;
h2 {
padding: 0.4rem 0 0.2rem;
font-size: 0.36rem;
font-weight: 0.6rem;
color: #955801;
text-align: center;
background: url(https://webapp-pub.ezijing.com/project/prp-h5/team_header_bg.png) no-repeat center center;
background-size: 2.74rem;
}
li {
padding: 0.3rem 0.3rem 0.3rem 1.88rem;
h4 {
font-size: 0.3rem;
color: #4e4e4e;
line-height: 0.42rem;
}
p {
margin-top: 0.08rem;
font-size: 0.26rem;
color: #999999;
line-height: 0.38rem;
em {
padding: 0 0.2rem;
}
}
&:nth-child(1) {
background: url(https://webapp-pub.ezijing.com/project/prp-h5/team_1.png) no-repeat 0.68rem center;
background-size: 0.54rem;
}
&:nth-child(2) {
background: url(https://webapp-pub.ezijing.com/project/prp-h5/team_2.png) no-repeat 0.68rem center;
background-size: 0.54rem;
}
&:nth-child(3) {
background: url(https://webapp-pub.ezijing.com/project/prp-h5/team_3.png) no-repeat 0.68rem center;
background-size: 0.54rem;
}
}
li + li {
border-top: 0.01rem solid #e4e4e4;
}
}
</style>
src/modules/home/types.ts
浏览文件 @ cb9eb081
import type { IVideoItem, ICourseItem } from '@/types'
import type { IVideoItem, ICourseItem, ITeam } from '@/types'
export interface HomeInfo {
banner: IBanner[]
......@@ -6,7 +6,8 @@ export interface HomeInfo {
admission_guide_videos: IVideoItem[]
learning_map_docs: IDocItem[]
exam_strategy_docs: IDocItem[]
questions: any
questions: { total: number; list: Record<string, any>[] }
ranking: ITeam[]
}
export interface IBanner {
......@@ -24,4 +25,4 @@ export interface IDocItem {
pv: string
}
export { IVideoItem, ICourseItem }
export { IVideoItem, ICourseItem, ITeam }
src/modules/home/views/Index.vue
浏览文件 @ cb9eb081
......@@ -3,13 +3,13 @@ import { ref, onMounted } from 'vue'
import type { HomeInfo } from '../types'
import * as api from '../api'
import Banner from '../components/Banner.vue'
import Menu from '../components/Menu.vue'
import AdmissionGuide from '../components/AdmissionGuide.vue'
// import Menu from '../components/Menu.vue'
// import AdmissionGuide from '../components/AdmissionGuide.vue'
import LearningMap from '../components/LearningMap.vue'
import QueryView from '../components/QueryView.vue'
import ExamStrategy from '../components/ExamStrategy.vue'
import TeamRanking from '../components/TeamRanking.vue'
import Questions from '../components/Questions.vue'
// import QueryView from '../components/QueryView.vue'
// import ExamStrategy from '../components/ExamStrategy.vue'
// import TeamRanking from '../components/TeamRanking.vue'
// import Questions from '../components/Questions.vue'
const data = ref<HomeInfo>({
banner: [],
......@@ -17,7 +17,8 @@ const data = ref<HomeInfo>({
admission_guide_videos: [],
learning_map_docs: [],
exam_strategy_docs: [],
questions: { total: 0, list: [] }
questions: { total: 0, list: [] },
ranking: []
})
// 获取首页数据
const fetchHomeData = () => {
......@@ -32,17 +33,17 @@ onMounted(() => {
<template>
<Banner :list="data.banner"></Banner>
<Menu></Menu>
<!-- <Menu></Menu> -->
<!-- 入学指南 -->
<AdmissionGuide :docs="data.admission_guide_docs" :videos="data.admission_guide_videos"></AdmissionGuide>
<!-- <AdmissionGuide :docs="data.admission_guide_docs" :videos="data.admission_guide_videos"></AdmissionGuide> -->
<!-- 学习地图 -->
<LearningMap :docs="data.learning_map_docs"></LearningMap>
<!-- 权益查看 -->
<QueryView></QueryView>
<!-- <QueryView></QueryView> -->
<!-- 荣誉总榜 -->
<TeamRanking></TeamRanking>
<!-- <TeamRanking :teams="data.ranking"></TeamRanking> -->
<!-- 考试攻略 -->
<ExamStrategy :docs="data.exam_strategy_docs"></ExamStrategy>
<!-- <ExamStrategy :docs="data.exam_strategy_docs"></ExamStrategy> -->
<!-- 陪伴问答 -->
<Questions :data="data.questions"></Questions>
<!-- <Questions :data="data.questions"></Questions> -->
</template>
src/modules/learn/views/Course.vue
浏览文件 @ cb9eb081
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import CourseItem from '@/components/CourseItem.vue'
import type { ICourseItem } from '@/types'
import { getCourseList } from '../api'
// 学习进度
const dataset = ref<{ total: number; list: ICourseItem[] }>({ total: 0, list: [] })
const fetchCourseList = () => {
getCourseList({ page_size: 100 }).then(res => {
dataset.value = res.data
})
}
onMounted(() => {
fetchCourseList()
})
</script>
<template>
<div class="home"></div>
<a href="https://mp.weixin.qq.com/s/fDf4NpPZH4BNI_KEopiSwQ" target="_blank">
<img src="https://webapp-pub.ezijing.com/project/prp-h5/banner_my_course.png" style="width: 100%" />
</a>
<p class="tips">如果你也是知识获得者，点击课程，晒出你的海报、说出你的感想，得到你的星星。</p>
<CourseItem v-for="item in dataset.list" :data="item" :key="item.id"></CourseItem>
</template>
<style lang="scss" scoped>
.tips {
padding: 0.1rem 0 0.2rem;
font-size: 0.24rem;
font-weight: 400;
color: #033974;
line-height: 0.36rem;
}
.course-item {
margin-bottom: 0.3rem;
}
</style>
src/modules/my/views/Index.vue
浏览文件 @ cb9eb081
......@@ -20,7 +20,7 @@ const menus: Array<{
icon: string
}> = [
{
path: '/my/course',
path: '/learn/course',
name: '我的课程',
icon: 'https://webapp-pub.ezijing.com/project/prp-h5/my_menu_1.png'
}
......
src/modules/team/api.ts
浏览文件 @ cb9eb081
import httpRequest from '@/utils/axios'
// 获取团队列表
export function getTeamList() {
return httpRequest.get('/api/psp/v1/team/list')
export function getTeamList(params?: { page?: number; page_size?: number }) {
return httpRequest.get('/api/psp/v1/team/list', { params })
}
// 创建团队
export function createTeam(data: { name: string; slogan: string; logo: string; brief: string }) {
return httpRequest.post('/api/psp/v1/team/create-team', data)
}
src/modules/team/components/TeamList.vue
浏览文件 @ cb9eb081
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getTeamList } from '../api'
import type { ITeam } from '@/types'
let list = ref<ITeam[]>([])
function fetchTeamList() {
getTeamList({ page_size: 100 }).then(res => {
list.value = res.data.list.list
})
}
onMounted(() => {
fetchTeamList()
})
</script>
<template>
<ul class="list-card">
<li v-for="(item, index) in list" :key="index">
......@@ -9,138 +26,91 @@
<div class="desc">{{ item.slogan }} | {{ item.members_count }}人</div>
</div>
</li>
<!-- <li>
<div class="team-order">
<div class="order"></div>
</div>
<div class="team-info">
<div class="title">团队名称1</div>
<div class="desc">团队1口号 | 3456人</div>
</div>
</li>
<li>
<div class="team-order">
<div class="order"></div>
</div>
<div class="team-info">
<div class="title">团队名称1</div>
<div class="desc">团队1口号 | 3456人</div>
</div>
</li>
<li>
<div class="team-order">
<div class="order">4</div>
</div>
<div class="team-info">
<div class="title">团队名称1</div>
<div class="desc">团队1口号 | 3456人</div>
</div>
</li> -->
</ul>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getTeamList } from '../api'
// interface List {}
let list = ref<{
name: string,
slogan: string,
members_count: string
}[]>([])
function fetchTeamList() {
getTeamList().then(res => {
list.value = res.data.list.list
})
}
onMounted(() => {
fetchTeamList()
})
</script>
<style lang="scss" scoped>
.list-card{
background: #FFFFFF;
.list-card {
background: #ffffff;
border-radius: 0.15rem;
opacity: 1;
li{
border-bottom: 0.01rem solid #E4E4E4;
li {
border-bottom: 0.01rem solid #e4e4e4;
padding: 0.35rem 0;
display: flex;
.team-order{
.team-order {
width: 1.8rem;
display: flex;
justify-content: center;
align-items: center;
.order{
.order {
position: relative;
font-size: 0.4rem;
// font-weight: bold;
color: #E68626;
&::before{
color: #e68626;
&::before {
content: '';
position: absolute;
bottom: 0.05rem;
left: 50%;
opacity: .5;
opacity: 0.5;
transform: translateX(-50%);
background: linear-gradient(270deg, #FFEAE6 0%, #FFFFFF 100%);
background: linear-gradient(270deg, #ffeae6 0%, #ffffff 100%);
width: 0.7rem;
height: 0.1rem;
border-radius: 25%;
}
}
}
&:last-child{
&:last-child {
border: none;
}
&:nth-child(1){
.order{
&:nth-child(1) {
.order {
width: 0.54rem;
height: 0.6rem;
background: url(https://webapp-pub.ezijing.com/project/prp-h5/team-rk1.png);
background-size: 100% 100%;
&::before{
&::before {
display: none;
}
}
}
&:nth-child(2){
.order{
&:nth-child(2) {
.order {
width: 0.54rem;
height: 0.6rem;
background: url(https://webapp-pub.ezijing.com/project/prp-h5/team-rk2.png);
background-size: 100% 100%;
&::before{
&::before {
display: none;
}
}
}
&:nth-child(3){
.order{
&:nth-child(3) {
.order {
width: 0.54rem;
height: 0.6rem;
background: url(https://webapp-pub.ezijing.com/project/prp-h5/team-rk3.png);
background-size: 100% 100%;
&::before{
&::before {
display: none;
}
}
}
.team-info{
.title{
.team-info {
.title {
font-size: 0.3rem;
font-weight: 400;
line-height: 100%;
color: #4E4E4E;
color: #4e4e4e;
}
.desc{
.desc {
font-size: 0.26rem;
line-height: 100%;
margin-top: .1rem;
margin-top: 0.1rem;
color: #999999;
}
}
}
}
</style>
\ No newline at end of file
</style>
src/modules/team/index.ts
浏览文件 @ cb9eb081
......@@ -5,6 +5,9 @@ export const routes: Array<RouteRecordRaw> = [
{
path: '/team',
component: AppLayout,
children: [{ path: '', component: () => import('./views/Index.vue') }]
children: [
{ path: '', component: () => import('./views/Index.vue') },
{ path: 'create', component: () => import('./views/Create.vue'), meta: { requireLogin: true } }
]
}
]
src/modules/team/views/Create.vue 0 → 100644
浏览文件 @ cb9eb081
<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { createTeam } from '../api'
import UploadImageList from '@/components/UploadImageList.vue'
import { Toast } from 'vant'
const router = useRouter()
const route = useRoute()
const form = reactive({ ...{ chapter_id: '', course_id: '', content: '', picture: [] }, ...route.query })
const pictureValidator = () => !!form.picture.length
function onSubmit() {
const params = Object.assign({}, form, { picture: JSON.stringify(form.picture) })
createTeam(params).then(() => {
Toast.success('创建成功')
router.push({ name: 'learnCourseView', params: { id: form.course_id } })
})
}
</script>
<template>
<AppContainer title="团队创建" backgroundColor="#fff" headerAlign="center">
<van-form @submit="onSubmit">
<van-field
v-model="form.content"
placeholder="团队名称"
:rules="[{ required: true, message: '请输入团队名称' }]"
/>
<van-field
v-model="form.content"
type="textarea"
placeholder="团队简介"
:autosize="{ minHeight: 200 }"
:rules="[{ required: true, message: '请输入团队简介' }]"
/>
<van-field :rules="[{ validator: pictureValidator, message: '请上传图片' }]">
<template #input>
<UploadImageList v-model="form.picture"></UploadImageList>
</template>
</van-field>
<van-button block round native-type="submit" class="my-button">立即创建</van-button>
</van-form>
</AppContainer>
</template>
<style lang="scss" scoped>
:deep(.van-cell) {
padding-left: 0;
padding-right: 0;
&::after {
left: 0;
right: 0;
}
}
.my-button {
margin: 1rem 0;
}
</style>
src/modules/team/views/Index.vue
浏览文件 @ cb9eb081
<template>
<AppContainer title="团队总榜">
<div class="team-handle">
<div class="team-header">
<div class="btn-box">
<img src="https://webapp-pub.ezijing.com/project/prp-h5/team-h2.png">
<div class="b-text">团队创建</div>
<router-link to="/team/create">
<img src="https://webapp-pub.ezijing.com/project/prp-h5/team-h2.png" />
<div class="b-text">团队创建</div>
</router-link>
</div>
<div class="btn-box">
<img src="https://webapp-pub.ezijing.com/project/prp-h5/team-h1.png">
<img src="https://webapp-pub.ezijing.com/project/prp-h5/team-h1.png" />
<div class="b-text">我的团队</div>
</div>
</div>
......@@ -17,28 +19,22 @@
import TeamList from '../components/TeamList.vue'
</script>
<style lang="scss">
.team-handle{
.team-header {
display: flex;
padding: 0.46rem 0 0.42rem;
justify-content: space-evenly;
.btn-box{
img{
width: 0.73rem;
.btn-box {
img {
height: 0.53rem;
display: block;
margin: 0 auto;
}
.b-text{
.b-text {
margin-top: 0.15rem;
font-size: 0.28rem;
color: #666666;
line-height: 100%;
}
&:nth-child(2){
img{
width: 0.63rem;
}
}
}
}
</style>
src/types.ts
浏览文件 @ cb9eb081
......@@ -39,3 +39,12 @@ export interface ICourseLecturerItem {
lecturer_title: string
lecturer_office: string
}
// 课程
export interface ITeam {
id: string
members_count: string
name: string
slogan: string
star: string
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论