Merge branch 'master' of https://gitlab-pro.ezijing.com/ezijing-web/prp-h5

package.json

@@ -12,20 +12,23 @@
     "deploy": "node ./deploy.js"
   },
   "dependencies": {
+    "@vueuse/core": "^8.2.6",
     "axios": "^0.26.1",
     "blueimp-md5": "^2.19.0",
+    "lodash-es": "^4.17.21",
     "pinia": "^2.0.13",
     "qs": "^6.10.3",
     "sass": "^1.50.0",
     "swiper": "^8.1.0",
     "vant": "^3.4.7",
-    "vue": "^3.2.32",
+    "vue": "^3.2.33",
     "vue-router": "^4.0.14"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.1.2",
+    "@rushstack/eslint-patch": "^1.1.3",
     "@types/blueimp-md5": "^2.18.0",
-    "@types/node": "^17.0.23",
+    "@types/lodash-es": "^4.17.6",
+    "@types/node": "^17.0.24",
     "@types/qs": "^6.9.7",
     "@vitejs/plugin-vue": "^2.3.1",
     "@vue/eslint-config-typescript": "^10.0.0",
@@ -33,8 +36,8 @@
     "eslint": "^8.13.0",
     "eslint-plugin-vue": "^8.6.0",
     "typescript": "~4.6.3",
-    "vite": "^2.9.4",
-    "vite-plugin-checker": "^0.4.5",
+    "vite": "^2.9.5",
+    "vite-plugin-checker": "^0.4.6",
     "vue-tsc": "^0.34.6"
   }
 }

src/components/PublishItem.vue

 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, computed, nextTick } from 'vue'
 import { ImagePreview } from 'vant'
 const props = defineProps<{ data: any }>()
+const emit = defineEmits(['submitComment', 'load'])
 
 const imageList = computed<string[]>(() => {
   try {
@@ -10,9 +11,41 @@ const imageList = computed<string[]>(() => {
     return []
   }
 })
-const onImagePreview = function (index: number) {
+// 图片预览
+const onImagePreview = (index: number) => {
   ImagePreview({ images: imageList.value, startPosition: index })
 }
+
+// 评论
+const commentInput = ref<HTMLElement | null>(null)
+const commentVisible = ref<boolean>(false)
+const commentValue = ref<string>()
+const commentActive = ref<any>()
+const commentPlaceholder = computed(() => {
+  return commentActive.value ? `回复${commentActive.value?.user_info?.name}:` : '评论'
+})
+// 显示评论输入框
+const showComment = (data?: any) => {
+  commentActive.value = data
+  commentVisible.value = true
+  nextTick(() => {
+    commentInput.value?.focus()
+  })
+}
+const hideComment = () => {
+  commentVisible.value = false
+  commentValue.value = ''
+}
+// 提交评论
+const onSubmitComment = (data: any) => {
+  data.comment = commentActive.value ? commentPlaceholder.value + data.comment : data.comment
+  emit(
+    'submitComment',
+    Object.assign({}, commentActive.value || props.data, data),
+    commentActive.value ? 'reply' : 'comment'
+  )
+  hideComment()
+}
 </script>
 
 <template>
@@ -30,18 +63,32 @@ const onImagePreview = function (index: number) {
       </ul>
       <div class="publish-tools">
         <p class="t1">{{ data.created_time }}</p>
-        <p class="t2">评论</p>
+        <p class="t2" @click="showComment()">评论</p>
       </div>
       <!-- 评论 -->
       <div class="publish-comments" v-if="data.comments.total">
-        <div class="comment-item" v-for="item in data.comments.list" :key="item.id">
+        <div class="comment-item" v-for="item in data.comments.list" :key="item.id" @click="showComment(item)">
           <div class="comment-item-hd">{{ item.user_name }}</div>
           <div class="comment-item-bd">{{ item.content }}</div>
         </div>
-        <div class="comment-more">查看{{ data.comments.total }}条评论 <van-icon name="arrow" /></div>
+        <div class="comment-more" v-if="data.comments.total > data.comments.list.length" @click="$emit('load')">
+          查看{{ data.comments.total }}条评论 <van-icon name="arrow" />
+        </div>
       </div>
     </div>
   </div>
+  <div class="comment" v-if="commentVisible">
+    <van-form @submit="onSubmitComment">
+      <van-field
+        v-model="commentValue"
+        name="comment"
+        :placeholder="commentPlaceholder"
+        autosize
+        ref="commentInput"
+        @blur="hideComment"
+      />
+    </van-form>
+  </div>
 </template>
 
 <style lang="scss">
@@ -103,9 +150,13 @@ const onImagePreview = function (index: number) {
     color: #999999;
   }
   .t2 {
+    padding-left: 0.38rem;
     font-size: 0.24rem;
     color: #999999;
     line-height: 0.36rem;
+    background: url('https://webapp-pub.ezijing.com/project/prp-h5/icon_comment.png') no-repeat left center;
+    background-size: 0.26rem;
+    cursor: pointer;
   }
 }
 .publish-comments {
@@ -136,4 +187,12 @@ const onImagePreview = function (index: number) {
   border-top: 0.01rem solid #d3d3d3;
   cursor: pointer;
 }
+.comment {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  box-shadow: 0 0 29px #0000001a;
+  z-index: 1000;
+}
 </style>

src/main.ts

@@ -10,6 +10,7 @@ import AppContainer from '@/components/base/AppContainer.vue'
 import Avatar from '@/components/Avatar.vue'
 
 import modules from './modules'
+import { useUserStore } from '@/stores/user'
 
 const app = createApp(App)
 // 注册公共组件
@@ -22,3 +23,6 @@ app.use(router)
 app.use(Vant)
 
 app.mount('#app')
+
+// 初始化用户信息，判断是否登录
+useUserStore().getUser()

src/modules/course/api.ts

 import httpRequest from '@/utils/axios'
 
 // 获取课程列表
-export function getCourseList(params: { page_size: number; page: number }) {
+export function getCourseList(params?: { page_size?: number; page?: number }) {
   return httpRequest.get('/api/psp/v1/learning/course-list', { params })
 }
 
@@ -14,13 +14,24 @@ export function getCourseView(params: { id: string }) {
 export function getChapterView(params: { chapter_id: string; page_size?: number; page?: number }) {
   return httpRequest.get('/api/psp/v1/learning/chapter-view', { params })
 }
-// 打卡
-export function coursePublish(data: {
+
+// 课程章节打卡
+export function createCourseRecord(data: {
   chapter_id: string
   course_id: string
   content: string
-  title?: string
+  picture?: string
   file?: string
 }) {
   return httpRequest.post('/api/psp/v1/learning/upload', data)
 }
+
+// 打卡记录评论
+export function createCourseComment(data: { entity_id: string; to_comment_id?: string; content: string }) {
+  return httpRequest.post('/api/psp/v1/learning/comment', data)
+}
+
+// 获取打卡记录评论
+export function getRecordComment(params: { id: string; page_size?: number; page?: number }) {
+  return httpRequest.get('/api/psp/v1/learning/record-comments', { params })
+}

src/modules/course/components/ChapterItem.vue

+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { useInfiniteScroll } from '@vueuse/core'
+import ChapterItemRecord from './ChapterItemRecord.vue'
+import { getChapterView } from '../api'
+
+interface Info {
+  loading: boolean
+  page: number
+  total: number
+  list: any[]
+}
+
+const props = defineProps<{ courseId: string; data: any }>()
+
+// 章节详情
+const chapterVisible = ref<boolean>(false)
+const dataset = reactive<Info>({ loading: false, page: 1, total: 0, list: [] })
+
+// 查看本章所有打卡记录
+const showChapterRecord = () => {
+  chapterVisible.value = true
+  dataset.page = 1
+  dataset.list = []
+  getChapterRecord()
+}
+
+// 获取章节打卡记录
+const getChapterRecord = () => {
+  dataset.loading = true
+  getChapterView({ chapter_id: props.data.id, page: dataset.page, page_size: 10 })
+    .then(res => {
+      const { total, list } = res.data
+      dataset.total = total
+      dataset.list = dataset.list.concat(list)
+      if (dataset.list.length <= total) {
+        dataset.page++
+      }
+    })
+    .finally(() => {
+      dataset.loading = false
+    })
+}
+
+// 滚动加载
+const el = ref<HTMLElement>()
+useInfiniteScroll(
+  el,
+  () => {
+    !dataset.loading && getChapterRecord()
+  },
+  { distance: 10 }
+)
+</script>
+
+<template>
+  <div class="course-chapter-item">
+    <h2 class="chapter-title">{{ data.chapter_name }}</h2>
+    <ChapterItemRecord v-for="publish in data.records.list" :data="publish" :key="publish.id"></ChapterItemRecord>
+    <div class="chapter-view" @click="showChapterRecord">查看本章所有打卡记录</div>
+  </div>
+
+  <van-popup v-model:show="chapterVisible" round position="bottom" :style="{ height: '80%' }">
+    <div class="course-chapter" ref="el">
+      <ChapterItemRecord v-for="publish in dataset.list" :data="publish" :key="publish.id"></ChapterItemRecord>
+      <van-button
+        block
+        round
+        class="my-button button-fixed"
+        :to="{ path: '/course/publish', query: { course_id: courseId, chapter_id: data.id } }"
+        >我也要拍照得星星</van-button
+      >
+    </div>
+  </van-popup>
+</template>
+
+<style lang="scss">
+.chapter-title {
+  margin-bottom: 0.22rem;
+  font-size: 0.28rem;
+  font-weight: bold;
+  color: #333333;
+  line-height: 0.28rem;
+}
+.chapter-view {
+  padding: 0.36rem 0;
+  font-size: 0.24rem;
+  color: #033974;
+  line-height: 0.36rem;
+  text-align: center;
+  border-top: 0.01rem solid #d3d3d3;
+  cursor: pointer;
+}
+.course-chapter {
+  height: 100%;
+  overflow-y: auto;
+  padding: 0.38rem 0.24rem 1rem;
+  box-sizing: border-box;
+}
+.button-fixed {
+  position: fixed;
+  bottom: 0.2rem;
+  left: 0.2rem;
+  right: 0.2rem;
+  width: auto;
+}
+</style>

src/modules/course/components/ChapterItemRecord.vue

+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { uniqWith } from 'lodash-es'
+import PublishItem from '@/components/PublishItem.vue'
+import { getRecordComment, createCourseComment } from '../api'
+
+const props = defineProps<{ data: any }>()
+
+const page = ref<number>(1)
+const dataset = reactive(props.data)
+
+// 数据合并
+const mergeList = (arr: any[], arr2: any[]) => {
+  return uniqWith(arr.concat(arr2), (a, b) => a.id === b.id)
+}
+// 获取打卡评论
+const getRecordCommentList = () => {
+  getRecordComment({ id: props.data.id, page: page.value, page_size: 5 }).then(res => {
+    const { total, list } = res.data.comments
+    dataset.comments.total = total
+    dataset.comments.list = page.value === 1 ? list : mergeList(dataset.comments.list, list)
+  })
+}
+// 评论
+const onSubmitComment = (data: any, action: string) => {
+  const params =
+    action === 'comment'
+      ? { entity_id: data.id, content: data.comment } // 评论
+      : { entity_id: data.entity_id, content: data.comment, to_comment_id: data.id } // 回复
+
+  createCourseComment(params).then(() => {
+    page.value = 1
+    getRecordCommentList()
+  })
+}
+const onLoadMore = () => {
+  page.value++
+  getRecordCommentList()
+}
+</script>
+
+<template>
+  <PublishItem :data="dataset" :key="dataset.id" @submitComment="onSubmitComment" @load="onLoadMore"></PublishItem>
+</template>

src/modules/course/index.ts

@@ -8,7 +8,7 @@ export const routes: Array<RouteRecordRaw> = [
     children: [
       { path: '', component: () => import('./views/Index.vue') },
       { name: 'courseView', path: 'view/:id', component: () => import('./views/View.vue'), props: true },
-      { path: 'publish', component: () => import('./views/Publish.vue') }
+      { path: 'publish', component: () => import('./views/Publish.vue'), meta: { requireLogin: true } }
     ]
   }
 ]

src/modules/course/views/Publish.vue

 <script setup lang="ts">
 import { reactive } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { coursePublish } from '../api'
+import { createCourseRecord } from '../api'
 import UploadImageList from '@/components/UploadImageList.vue'
 import { Toast } from 'vant'
 const router = useRouter()
@@ -12,7 +12,7 @@ const form = reactive({ ...{ chapter_id: '', course_id: '', content: '', picture
 const pictureValidator = () => !!form.picture.length
 function onSubmit() {
   const params = Object.assign({}, form, { picture: JSON.stringify(form.picture) })
-  coursePublish(params).then(() => {
+  createCourseRecord(params).then(() => {
     Toast.success('发布成功')
     router.push({ name: 'courseView', params: { id: form.course_id } })
   })
@@ -40,7 +40,7 @@ function onSubmit() {
 </template>
 
 <style lang="scss" scoped>
-::v-deep .van-cell {
+:deep(.van-cell) {
   padding-left: 0;
   padding-right: 0;
   &::after {

src/modules/course/views/View.vue

 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { Toast } from 'vant'
-import PublishItem from '@/components/PublishItem.vue'
-import { getCourseView, getChapterView } from '../api'
+import ChapterItem from '../components/ChapterItem.vue'
+import { getCourseView } from '../api'
+
 const props = defineProps<{ id: string }>()
 
 // 课程
 const data = ref()
-function getCourse() {
+const getCourse = () => {
   const toast = Toast.loading({ message: '加载中...', forbidClick: true })
   getCourseView({ id: props.id }).then(res => {
     data.value = res.data.course
     toast.clear()
   })
 }
-onMounted(getCourse)
-
-// 章节
-const show = ref<boolean>(false)
-// 当前选中的章节
-const activeChapter = ref()
-// 打卡记录
-const chapterRecord = ref<{ total: number; list: any[] }>({ total: 0, list: [] })
-// 获取章节打卡记录
-const getChapterRecord = function () {
-  const toast = Toast.loading({ message: '加载中...', forbidClick: true })
-  const params = {
-    chapter_id: activeChapter.value.id
-  }
-  getChapterView(params).then(res => {
-    chapterRecord.value = res.data
-    toast.clear()
-  })
-}
-const showChapterRecord = function (data: any) {
-  activeChapter.value = data
-  show.value = true
-  getChapterRecord()
-}
+onMounted(() => {
+  getCourse()
+})
 </script>
 
 <template>
@@ -53,8 +33,8 @@ const showChapterRecord = function (data: any) {
               <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>
+              <span>{{ data.pv }}人看过</span>
+              <span>{{ data.records_total }}人评论</span>
             </li>
           </ul>
           <div class="star">
@@ -75,26 +55,10 @@ const showChapterRecord = function (data: any) {
     <div class="course-bottom">
       <div class="course-tips">如果你也是知识获得者，请晒出你的海报、说出你的感想，得到你的星星。</div>
       <div class="course-chapters">
-        <div class="course-chapter-item" v-for="item in data.course_chapters.list" :key="item.id">
-          <h2 class="chapter-title">{{ item.chapter_name }}</h2>
-          <PublishItem v-for="publish in item.records.list" :data="publish" :key="publish.id"></PublishItem>
-          <div class="chapter-view" @click="showChapterRecord(item)">查看本章所有打卡记录</div>
-        </div>
+        <ChapterItem v-for="item in data.course_chapters.list" :courseId="id" :data="item" :key="item.id"></ChapterItem>
       </div>
     </div>
   </div>
-  <van-popup v-model:show="show" round position="bottom" :style="{ height: '80%' }">
-    <div class="course-chapter">
-      <PublishItem v-for="publish in chapterRecord.list" :data="publish" :key="publish.id"></PublishItem>
-      <van-button
-        block
-        round
-        class="my-button"
-        :to="{ path: '/course/publish', query: { course_id: id, chapter_id: activeChapter.id } }"
-        >我也要拍照得星星</van-button
-      >
-    </div>
-  </van-popup>
 </template>
 
 <style lang="scss" scoped>
@@ -140,12 +104,14 @@ const showChapterRecord = function (data: any) {
     margin: 0.07rem 0;
     p {
       display: inline-block;
-      padding: 0 0.15rem;
+      padding: 0 0.15rem 0 0.38rem;
       height: 0.3rem;
       font-size: 0.2rem;
       line-height: 0.3rem;
       border-radius: 0.15rem;
       border: 0.01rem solid #80b0e5;
+      background: url('https://webapp-pub.ezijing.com/project/prp-h5/icon_star.png') no-repeat 0.1rem center;
+      background-size: 0.22rem;
       b {
         color: #033974;
       }
@@ -193,25 +159,5 @@ const showChapterRecord = function (data: any) {
   background-color: #fff;
   border-top-left-radius: 0.2rem;
   border-top-right-radius: 0.2rem;
-  .chapter-title {
-    margin-bottom: 0.22rem;
-    font-size: 0.28rem;
-    font-weight: bold;
-    color: #333333;
-    line-height: 0.28rem;
-  }
-}
-.chapter-view {
-  margin-bottom: 0.56rem;
-  padding: 0.16rem 0;
-  font-size: 0.24rem;
-  color: #033974;
-  line-height: 0.36rem;
-  text-align: center;
-  border-top: 0.01rem solid #d3d3d3;
-  cursor: pointer;
-}
-.course-chapter {
-  padding: 0.38rem 0.24rem;
 }
 </style>

src/modules/home/api.ts

@@ -5,11 +5,21 @@ export function getHomeData() {
   return httpRequest.get('/api/psp/v1/index/index')
 }
 // 获取导学视频列表
-export function getVideoList(params?: { page_size: number; page: number }) {
+export function getVideoList(params?: { page_size?: number; page?: number }) {
   return httpRequest.get('/api/psp/v1/learning/video-list', { params })
 }
 
+// 获取导学视频详情
+export function getVideoView(params: { id: string }) {
+  return httpRequest.get('/api/psp/v1/learning/video-view', { params })
+}
+
 // 获取课程列表
-export function getCourseList(params?: { page_size: number; page: number }) {
+export function getCourseList(params?: { page_size?: number; page?: number }) {
   return httpRequest.get('/api/psp/v1/learning/course-list', { params })
 }
+
+// 陪伴问答评论
+export function createQuestionComment(data: { question_id: string; to_comment_id?: string; content: string }) {
+  return httpRequest.post('/api/psp/v1/question/create-comment', data)
+}

src/modules/home/components/Banner.vue

@@ -3,31 +3,16 @@ import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Pagination } from 'swiper'
 import 'swiper/css'
 import 'swiper/css/pagination'
+import type { IBanner } from '../types'
 
-const list: Array<{
-  url: string
-  imageUrl: string
-}> = [
-  {
-    url: '/',
-    imageUrl: 'https://webapp-pub.ezijing.com/project/prp-h5/banner.png'
-  },
-  {
-    url: '/',
-    imageUrl: 'https://webapp-pub.ezijing.com/project/prp-h5/banner.png'
-  },
-  {
-    url: '/',
-    imageUrl: 'https://webapp-pub.ezijing.com/project/prp-h5/banner.png'
-  }
-]
+defineProps<{ list: IBanner[] }>()
 </script>
 
 <template>
   <nav class="home-banner">
     <Swiper pagination :modules="[Pagination]">
       <SwiperSlide v-for="(item, index) in list" :key="index">
-        <img :src="item.imageUrl" />
+        <img :src="item.cover_page" />
       </SwiperSlide>
     </Swiper>
   </nav>

src/modules/home/components/LearningMapCourse.vue

@@ -7,12 +7,12 @@ import { getCourseList } from '../api'
 
 // 学习进度
 const dataset = ref<{ total: number; list: ICourseItem[] }>({ total: 0, list: [] })
-function fetchCourseList() {
-  getCourseList().then(res => {
+const fetchCourseList = () => {
+  getCourseList({ page_size: 100 }).then(res => {
     dataset.value = res.data
   })
 }
-const studyStatus = function (progress: number) {
+const studyStatus = (progress: number) => {
   if (progress === 100) {
     return '已完成'
   } else if (progress > 0) {
@@ -72,6 +72,7 @@ onMounted(() => {
   flex: 1;
   margin-left: 0.26rem;
   line-height: 0.33rem;
+  overflow: hidden;
   h5 {
     font-size: 0.24rem;
     font-weight: 500;

src/modules/home/components/LearningMapVideo.vue

 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import 'swiper/css'
 import type { IVideoItem } from '../types'
-import { getVideoList } from '../api'
+import { getVideoList, getVideoView } from '../api'
 
 // 课程导学
 const dataset = ref<{ total: number; list: IVideoItem[] }>({ total: 0, list: [] })
-function fetchVideoList() {
-  getVideoList().then(res => {
+const fetchVideoList = () => {
+  getVideoList({ page_size: 100 }).then(res => {
     dataset.value = res.data
   })
 }
 onMounted(() => {
   fetchVideoList()
 })
+
+// 查看详情
+const dialogVisible = ref<boolean>(false)
+const videoInfo = ref<IVideoItem>()
+const videoUrl = computed(() => {
+  if (videoInfo.value) {
+    // 优先取mp4
+    const [first = {}] = videoInfo.value.play_info.filter(item => item.Format === 'mp4')
+    return first.PlayURL
+  }
+  return ''
+})
+const fetchVideoView = (id: string) => {
+  getVideoView({ id }).then(res => {
+    videoInfo.value = res.data
+  })
+}
+const onClick = (data: IVideoItem) => {
+  fetchVideoView(data.id)
+  dialogVisible.value = true
+}
 </script>
 
 <template>
   <swiper slides-per-view="auto" :space-between="10">
-    <swiper-slide v-for="(item, index) in dataset.list" :key="index" class="video-item">
+    <swiper-slide v-for="(item, index) in dataset.list" :key="index" class="video-item" @click="onClick(item)">
       <img :src="item.cover_page" />
       <h5>{{ item.course_name }}</h5>
       <p>{{ item.pv }}播放</p>
     </swiper-slide>
   </swiper>
+  <van-popup v-model:show="dialogVisible" round>
+    <div class="video-wrap" v-if="dialogVisible">
+      <video controls autoplay :src="videoUrl"></video>
+    </div>
+  </van-popup>
 </template>
 
 <style lang="scss">
@@ -54,4 +80,12 @@ onMounted(() => {
     color: #999999;
   }
 }
+.video-wrap {
+  width: 80vw;
+  margin: 0.2rem;
+  video {
+    width: 100%;
+    max-height: 80vh;
+  }
+}
 </style>

src/modules/home/components/Questions.vue

 <script setup lang="ts">
+import { Toast } from 'vant'
 import PublishItem from '@/components/PublishItem.vue'
+import { createQuestionComment } from '../api'
+
 defineProps<{ data: any }>()
+
+// 评论
+const onSubmitComment = (data: any, action: string) => {
+  if (action === 'comment') {
+    // 评论
+    createQuestionComment({
+      question_id: data.id,
+      content: data.comment
+    }).then(() => {
+      Toast.success('评论成功')
+    })
+  } else {
+    // 回复
+    createQuestionComment({
+      question_id: data.entity_id,
+      content: data.comment,
+      to_comment_id: data.id
+    }).then(() => {
+      Toast.success('回复成功')
+    })
+  }
+}
 </script>
 
 <template>
   <AppCard title="陪伴问答" id="qa">
     <template #header-aside>
-      <div class="button">发表问答</div>
+      <div class="button"><router-link to="/qa/publish">发表问答</router-link></div>
     </template>
-    <PublishItem v-for="item in data.list" :data="item" :key="item.id"></PublishItem>
+    <PublishItem v-for="item in data.list" :data="item" :key="item.id" @submitComment="onSubmitComment"></PublishItem>
   </AppCard>
 </template>
 
 <style lang="scss" scoped>
-::v-deep .publish-item {
+:deep(.publish-item) {
   padding: 0.24rem;
   margin-bottom: 0.2rem;
   background: #fff;

src/modules/home/types.ts

@@ -12,6 +12,7 @@ export interface IBanner {
   id: string
   title: string
   pv: string
+  cover_page: string
 }
 
 export interface IDocItem {

src/modules/home/views/Index.vue

@@ -18,7 +18,7 @@ const data = ref<HomeInfo>({
   questions: {}
 })
 // 获取首页数据
-function fetchHomeData() {
+const fetchHomeData = () => {
   api.getHomeData().then(res => {
     data.value = res.data
   })

src/modules/my/index.ts

@@ -5,6 +5,7 @@ export const routes: Array<RouteRecordRaw> = [
   {
     path: '/my',
     component: AppLayout,
+    meta: { requireLogin: true },
     children: [{ path: '', component: () => import('./views/Index.vue') }]
   }
 ]

src/modules/my/views/Index.vue

 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { getMyInfo } from '../api'
-
+import { logout } from '@/api/base'
 const info = ref()
 const teamInfo = ref()
-function fetchMyInfo() {
+const fetchMyInfo = () => {
   getMyInfo().then(res => {
     info.value = res.data.info || {}
     teamInfo.value = res.data.team_info || { star: 0 }
@@ -50,6 +50,13 @@ const menus: Array<{
     icon: 'https://webapp-pub.ezijing.com/project/prp-h5/my_menu_6.png'
   }
 ]
+
+// 退出登录
+const onLogout = () => {
+  logout().then(() => {
+    window.location.href = '/'
+  })
+}
 </script>
 <template>
   <div class="my" v-if="info">
@@ -79,7 +86,7 @@ const menus: Array<{
         </ul>
       </nav>
     </div>
-    <div class="logout">退出登录</div>
+    <div class="logout" @click="onLogout">退出登录</div>
   </div>
 </template>
 

src/modules/qa/api.ts

+import httpRequest from '@/utils/axios'
+
+// 获取问答列表
+export function getQuestionList(params?: { page_size?: number; page?: number }) {
+  return httpRequest.get('/api/psp/v1/question/list', { params })
+}
+
+// 获取问答详情
+export function getQuestionView(params: { id: string; page_size?: number; page?: number }) {
+  return httpRequest.get('/api/psp/v1/question/view', { params })
+}
+// 发布问答
+export function createQuestion(data: { title: string; desc: string; picture?: string; file?: string }) {
+  return httpRequest.post('/api/psp/v1/question/create-question', data)
+}
+
+// 发布问答评论
+export function createQuestionComment(data: { question_id: string; to_comment_id?: string; content: string }) {
+  return httpRequest.post('/api/psp/v1/question/create-comment', data)
+}

src/modules/qa/index.ts

@@ -5,6 +5,9 @@ export const routes: Array<RouteRecordRaw> = [
   {
     path: '/qa',
     component: AppLayout,
-    children: [{ path: '', component: () => import('./views/Index.vue') }]
+    children: [
+      { path: '', component: () => import('./views/Index.vue') },
+      { path: 'publish', component: () => import('./views/Publish.vue'), meta: { requireLogin: true } }
+    ]
   }
 ]

src/modules/qa/views/Publish.vue

+<script setup lang="ts">
+import { reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { createQuestion } from '../api'
+import UploadImageList from '@/components/UploadImageList.vue'
+import { Toast } from 'vant'
+const router = useRouter()
+
+const form = reactive({ title: '', desc: '', picture: [] })
+
+function onSubmit() {
+  const params = Object.assign({}, form, { picture: JSON.stringify(form.picture) })
+  createQuestion(params).then(() => {
+    Toast.success('发布成功')
+    router.push({ path: '/#qa' })
+  })
+}
+</script>
+
+<template>
+  <AppContainer title="发布问题" backgroundColor="#fff" headerAlign="center">
+    <van-form @submit="onSubmit">
+      <van-field
+        v-model="form.title"
+        placeholder="请输入问题标题"
+        :rules="[{ required: true, message: '请输入问题标题' }]"
+      />
+      <van-field
+        v-model="form.desc"
+        type="textarea"
+        placeholder="请输入问题内容"
+        :autosize="{ minHeight: 200 }"
+        :rules="[{ required: true, message: '请输入问题内容' }]"
+      />
+      <van-field>
+        <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/query/api.ts

+import httpRequest from '@/utils/axios'
+
+// 查询名片
+export function getBussinessCard(params: unknown) {
+  return httpRequest.get('/api/psp/v1/welfare/get-card',{params})
+}
+// 获取验证码
+export function getPhoneCode(params: unknown) {
+  return httpRequest.get('/api/psp/v1/welfare/send-code',{params})
+}
+// 查询证书
+export function getCertificate(params: unknown) {
+  return httpRequest.get('/api/psp/v1/welfare/get-certificate',{params})
+}
+// 持证人权益-持证人列表
+
+export function getLicenseList() {
+  return httpRequest.post('/api/psp/v1/welfare/avatar-list')
+}
+// 获取用户信息
+export function getUserInfo() {
+  return httpRequest.post('/api/psp/v1/my/info')
+}

src/modules/query/components/BusinessCardQuery.vue

+<script setup lang="ts">
+import * as api from '../api'
+import { reactive, onMounted } from 'vue'
+
+const FormInfo = reactive({
+  email: '',
+  address: ''
+})
+const userInfo = reactive({
+  name: '',
+  mobile: '',
+  certificate_number: ''
+})
+onMounted(() => {
+  getUserInfo()
+})
+// 获取用户信息
+function getUserInfo() {
+  api.getUserInfo().then(res => {
+    userInfo.name = res.data.info.name
+    userInfo.mobile = res.data.info.mobile
+    userInfo.certificate_number = res.data.info.certificate_number
+  })
+}
+// 查询名片
+function handleSubmit() {
+  const params: unknown = {
+    email: FormInfo.email,
+    address: FormInfo.address
+  }
+  api.getBussinessCard(params).then(res => {
+    console.log(res, '0000')
+  })
+}
+</script>
+
+<template>
+  <div class="main_content">
+    <van-form>
+      <van-cell-group inset>
+        <van-field
+          v-model="userInfo.name"
+          name="姓名"
+          label="姓名"
+          placeholder="请输入姓名"
+          :rules="[{ required: true, message: '请输入姓名' }]"
+          disabled
+        />
+        <van-field
+          v-model="userInfo.mobile"
+          name="手机号"
+          label="手机号"
+          placeholder="请输入手机号"
+          :rules="[{ required: true, message: '请输入手机号' }]"
+          disabled
+        />
+        <van-field
+          v-model="userInfo.certificate_number"
+          name="证书号"
+          label="证书号"
+          placeholder="请输入证书号"
+          :rules="[{ required: true, message: '请输入证书号' }]"
+          disabled
+        />
+        <van-field
+          v-model="FormInfo.email"
+          name="邮箱"
+          label="邮箱"
+          placeholder="请输入邮箱"
+          :rules="[{ required: true, message: '请输入邮箱' }]"
+        />
+        <van-field
+          v-model="FormInfo.address"
+          name="地址"
+          label="地址"
+          placeholder="请输入地址"
+          :rules="[{ required: true, message: '请输入地址' }]"
+        />
+      </van-cell-group>
+      <div style="margin-top: 0.93rem">
+        <van-button
+          round
+          block
+          native-type="submit"
+          style="background: linear-gradient(149deg, #f7c988 0%, #e5a448 100%)"
+          @click="handleSubmit"
+          :disabled="FormInfo.email === '' || FormInfo.address === ''"
+        >
+          确认信息正确，查询名片
+        </van-button>
+      </div>
+    </van-form>
+    <template>
+      <div class="main_content_card"></div>
+      <div class="main_content_bottom"></div>
+    </template>
+  </div>
+</template>
+<style lang="scss" scoped>
+.main_content {
+  height: 8.02rem;
+  padding: 0.23rem 0.3rem 0 0.3rem;
+  background: #ffffff;
+  border-radius: 0.2rem;
+  .main_content_card {
+    margin: 0.83rem 0.38rem 0 0.34rem;
+    height: 3.22rem;
+    background-color: red;
+  }
+  .main_content_bottom {
+    height: 3.28rem;
+    margin-top: 0.66rem;
+    // background-color: red;
+    background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/prp_h5/card_img.png) no-repeat;
+    background-size: 100% 100%;
+  }
+}
+::v-deep .van-button {
+  font-size: 0.28rem;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+}
+</style>

src/modules/query/components/CertificateQuery.vue

+<script setup lang="ts">
+// import type { FormInfo } from '../types'
+import { Toast } from 'vant'
+import * as api from '../api'
+
+import { ref, reactive } from 'vue'
+
+const FormInfo = reactive({
+  phone: '',
+  code: ''
+})
+const url = ref('')
+const time = ref(60)
+const isDisposed = ref(false)
+const isShowForm = ref(false)
+function getCode() {
+  console.log('00000', FormInfo.phone)
+  if (FormInfo.phone === '') {
+    console.log('1111')
+    Toast('请输入手机号')
+    console.log('2222')
+    return
+  }
+
+  const params: unknown = {
+    phone: FormInfo.phone
+  }
+  api.getPhoneCode(params).then(res => {
+    console.log('获取验证码结果', res)
+    console.log('验证码发送成功！')
+    isDisposed.value = true
+    handleTimeChange()
+  })
+}
+// 倒计时
+const handleTimeChange = () => {
+  if (time.value <= 0) {
+    isDisposed.value = false
+    time.value = 60
+  } else {
+    setTimeout(() => {
+      time.value--
+      handleTimeChange()
+    }, 1000)
+  }
+}
+// 查询名片
+function handleQuery() {
+  const params: unknown = {
+    phone: FormInfo.phone,
+    code: FormInfo.code
+  }
+  api.getCertificate(params).then(res => {
+    url.value = res.data.url
+    console.log(res.data.url, 'res.data.url')
+  })
+}
+// 他人代查
+function handleOther() {
+  isShowForm.value = true
+}
+</script>
+
+<template>
+  <div class="main_content">
+    <van-form v-if="url === '' || isShowForm">
+      <van-cell-group inset>
+        <van-field
+          v-model="FormInfo.phone"
+          name="手机号"
+          label="手机号"
+          placeholder="请输入手机号"
+          :rules="[{ required: true, message: '请输入手机号' }]"
+        />
+        <!-- <van-field
+          v-model="FormInfo.code"
+          name="验证码"
+          label="验证码"
+          placeholder="请输入验证码"
+         
+        /> -->
+        <van-field
+          v-model="FormInfo.code"
+          center
+          clearable
+          label="验证码"
+          placeholder="请输入验证码"
+          :rules="[{ required: true, message: '请输入验证码' }]"
+        >
+          <template #button>
+            <van-button size="small" type="primary" round block @click="getCode" :disabled="isDisposed">{{
+              isDisposed ? `${time}s后重新获取` : '获取验证码'
+            }}</van-button>
+          </template>
+        </van-field>
+      </van-cell-group>
+      <div style="margin-top: 0.93rem">
+        <van-button
+          round
+          block
+          native-type="submit"
+          style="background: linear-gradient(149deg, #f7c988 0%, #e5a448 100%)"
+          @click="handleQuery"
+          :disabled="FormInfo.code === '' || FormInfo.code === ''"
+        >
+          确认信息正确，查询名片
+        </van-button>
+      </div>
+    </van-form>
+    <div class="main_content_card" v-else-if="url !== '' || !isShowForm">
+      <img :src="url" alt="" class="main_content_card_img" />
+      <div class="main_content_card_btn" @click="handleOther">他人代查</div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.main_content {
+  // width: 6.9rem;
+  height: 8.02rem;
+  padding: 0.23rem 0.3rem 0 0.3rem;
+  background: #ffffff;
+  border-radius: 0.2rem;
+  .main_content_card {
+    .main_content_card_img {
+      width: 100%;
+      display: block;
+    }
+    .main_content_card_btn {
+      width: 1.18rem;
+      height: 0.4rem;
+      background: linear-gradient(164deg, #f7c988 0%, #e5a448 100%);
+      border-radius: 0.2rem;
+      opacity: 1;
+      font-size: 0.22rem;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 0.4rem;
+      text-align: center;
+      float: right;
+      margin-top: 0.34rem;
+    }
+  }
+}
+::v-deep {
+  .van-button {
+    font-size: 0.28rem;
+    font-family: PingFang SC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+  }
+  .van-field__control {
+    margin-left: -0.4rem !important;
+  }
+  // .van-cell {
+  //   padding: var(--van-cell-horizontal-padding);
+  // }
+  // :root {
+  //   --van-cell-horizontal-padding: var(--van-padding-md);
+  // }
+  // :root {
+  //   --van-padding-md: 7px !important;
+  // }
+}
+</style>

src/modules/query/components/LicenseeView.vue

+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import * as api from '../api'
+import type { licenseeList } from '../types'
+const data = ref<licenseeList>({
+  list: []
+})
+
+onMounted(() => {
+  // 获取持证人列表
+  handleLicenseList()
+})
+// 获取持证人列表
+const handleLicenseList = () => {
+  api.getLicenseList().then(res => {
+    data.value = res.data
+  })
+}
+</script>
+<template>
+  <div class="main_content">
+    <div v-if="data.list.length > 0">
+      <div class="main_content_list" v-for="(item, index) in data.list" :key="index">
+        <img class="img_top" :src="item.avatar" />
+        <div class="img_bottom">
+          <div class="img_bottom_people">{{ item.batch_name }}</div>
+          <div class="img_bottom_name">{{ item.name }}</div>
+          <div class="img_bottom_cardnum">证书编号</div>
+          <div class="img_bottom_num">{{ item.certificate_number }}</div>
+        </div>
+      </div>
+    </div>
+    <van-empty v-else description="暂无持证人" />
+  </div>
+</template>
+<style lang="scss" scoped>
+.main_content {
+  height: 8.02rem;
+  padding: 0.23rem 0.31rem 0 0.31rem;
+  background: #ffffff;
+  border-radius: 0.2rem;
+  display: flex;
+  justify-content: space-around;
+  // align-items: center;
+  flex-wrap: wrap;
+
+  .main_content_list {
+    width: 45%;
+    height: 4.54rem;
+    margin-top: 0.2rem;
+    border-radius: 0.2rem;
+    box-sizing: border-box;
+
+    .img_top {
+      width: 100%;
+      height: 2.6rem;
+      background: red;
+      border-top-left-radius: 0.2rem;
+      border-top-right-radius: 0.2rem;
+    }
+    .img_bottom {
+      height: 1.94rem;
+      border-bottom-left-radius: 0.2rem;
+      border-bottom-right-radius: 0.2rem;
+      padding-left: 0.21rem;
+      padding-top: 0.15rem;
+      background: url(https://webapp-pub.ezijing.com/prp_h5/license_bg.png) no-repeat;
+      background-size: contain;
+
+      .img_bottom_people {
+        font-size: 0.24rem;
+        font-weight: 400;
+        color: #ffffff;
+      }
+      .img_bottom_name {
+        font-size: 0.32rem;
+        font-weight: 500;
+        color: #cfb181;
+        margin-top: 0.1rem;
+      }
+      .img_bottom_cardnum {
+        font-size: 0.24rem;
+        font-weight: 400;
+        color: #ffffff;
+        margin-top: 0.2rem;
+      }
+      .img_bottom_num {
+        font-size: 0.28rem;
+        font-weight: 400;
+        color: #cfb181;
+        margin-top: 0.1rem;
+      }
+    }
+  }
+}
+</style>

src/modules/query/types.ts

+export interface FormInfo {
+  name: string
+  mobile: string
+  cardNumber: string
+  email: string
+  address: string
+}
+export interface Ilist {
+  avatar: string
+  name: string
+  batch_name:string
+  certificate_number: string
+}
+export interface licenseeList  {
+  list: Ilist[]
+}
+
+

src/modules/query/views/Index.vue

 <script setup lang="ts">
 import { ref } from 'vue'
+import BusinessBusinessCardQuery from '../components/BusinessCardQuery.vue'
+import CertificateQuery from '../components/CertificateQuery.vue'
+import LicenseeView from '../components/LicenseeView.vue'
+
 const active = ref<number>(0)
 </script>
 
@@ -13,9 +17,17 @@ const active = ref<number>(0)
       title-inactive-color="#4E4E4E"
       line-height="0"
     >
-      <van-tab title="名片查询"> </van-tab>
-      <van-tab title="证书查询"> </van-tab>
-      <van-tab title="持证人查看"> </van-tab>
+      <van-tab title="名片查询&nbsp;&nbsp;&nbsp;｜"><BusinessBusinessCardQuery /> </van-tab>
+      <van-tab title="证书查询&nbsp;&nbsp;&nbsp;｜"> <CertificateQuery /></van-tab>
+
+      <van-tab title="&nbsp;持证人查看"><LicenseeView /> </van-tab>
     </van-tabs>
   </AppContainer>
 </template>
+<style lang="scss" scoped>
+.van-tab {
+  font-size: 0.26rem;
+  font-weight: 400;
+  color: #868686;
+}
+</style>

src/router/index.ts

 import { createRouter, createWebHistory } from 'vue-router'
-// import { useUserStore } from '@/stores/user'
+import { useUserStore } from '@/stores/user'
 
 const router = createRouter({
   history: createWebHistory(),
   routes: [{ path: '/:pathMatch(.*)*', redirect: '/' }]
 })
 
-// router.beforeEach((to, from, next) => {
-//   const user = useUserStore()
-//   user.getUser()
-//   next()
-// })
+router.beforeEach(async (to, from, next) => {
+  const user = useUserStore()
+  if (to.meta.requireLogin && !user.isLogin) {
+    location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}`
+  }
+  next()
+})
 
 export default router

src/types.ts

@@ -7,7 +7,7 @@ export interface IVideoItem {
   course_name: string
   aliyun_video_id: string
   pv: string
-  play_info: object
+  play_info: any[]
 }
 
 // 课程
@@ -30,7 +30,7 @@ export interface ICourseItem {
 export interface ICourseChapters {
   big_total: string
   small_total: string
-  list: []
+  list: any[]
 }
 
 // 课程老师

src/utils/axios.ts

@@ -2,7 +2,7 @@ import axios from 'axios'
 import qs from 'qs'
 
 const httpRequest = axios.create({
-  // baseURL: 'https://learn-api.ezijing.com',
+  baseURL: 'https://project-api.ezijing.com',
   timeout: 60000,
   withCredentials: true,
   headers: {

vite.config.ts

@@ -23,7 +23,7 @@ export default defineConfig(({ mode }) => {
           changeOrigin: true,
           rewrite: path => path.replace('/api/psp/', '/')
         },
-        '/api': 'https://learn-api.ezijing.com'
+        '/api': 'https://project-api.ezijing.com'
       }
     },
     resolve: {