sinology-applet/src/pages/course/chapter.vue

<template>
  <view class="p15">
    <view class="chapter_item" v-for="(item, index) of chapterList" :key="index" @tap="toDetail(item)">
      <view style="line-height: 20px;">
        <text class="j-tag" style="background: #DDEEFF;color: #1A8CFE">{{ item.chapterIndex }}</text>
        <text class="fs14 ml5 ">{{ item.chapterName }}</text>
      </view>
      <view class="mt10 flex ai-c jc-sb fs12 mt8 cor-999">
        <view class="flex ai-c">
          <u-icon name="eye" color="#999" size="14" :label="item.browseCount" label-color="#999" label-size="12"></u-icon>
          <u-icon class="ml20" name="thumb-up" color="#999" size="14" :label="item.goodCount" label-color="#999" label-size="12"></u-icon>
        </view>
        <text>{{ item.author }}</text>
        <text>{{ item.publicTime }}</text>
      </view>
    </view>
  </view>
</template>

<script>
	import { getCourseChapter } from '@/jtools/api/index'
  import { mapState } from 'pinia'; //引入映射函数
  import useUserStore from '@/jtools/store/user'; //引入store

	export default {
    computed: {
      ...mapState(useUserStore, ['isLogin'])
    },
		data() {
			return {
				chapterList: [],
        lessonId: undefined
			}
		},
		onLoad(op){
      this.lessonId = op.id
			this.getChapterList(op.id)
		},
    onShow() {
      if(this.lessonId) {
        this.getChapterList(this.lessonId)
      }
    },
		methods:{
			getChapterList(lessonId){
				getCourseChapter({lessonId}).then(resp=>{
					if(resp.code==='0000'){
						this.chapterList=resp.data
					}
				})
			},
			toDetail(chapter){
        if(!this.isLogin){
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          });
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/me/login'
            });
          }, 1500);
          return
        } else {
          uni.navigateTo({
            url: `/pages/course/detail?id=${chapter.chapterId}`
          });
        }
			},
		}
	}
</script>

<style lang="scss" scoped>
.chapter_item {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: #fff;
}
.chapter_item:hover {
  background-color: rgb(210, 209, 214);
}

.j-tag {
  padding: 1px 3px;
  border-radius: 3px;
  font-size: 12px;
  line-height: 14px;
  color: #fff;
}
</style>