|
|
@@ -0,0 +1,283 @@
|
|
|
+<template>
|
|
|
+ <view class="ezy-study-page ezy-shuxue-study-page">
|
|
|
+ <view class="study-school-year" @click="clickGradeTerm">{{gradeTerm}}</view>
|
|
|
+ <view class="ezy-study-wrap">
|
|
|
+ <view class="chapter-box" @click="handleCheckCatalogue">{{options.numberStr}}</view>
|
|
|
+ <view @click="handleCheckCatalogue" :class="getTitleClass(options.zhangName)">
|
|
|
+ {{getZhangName(options.zhangName)}}
|
|
|
+ </view>
|
|
|
+ <!-- 动物类型 -->
|
|
|
+ <view v-if="growthType!=null" :class="currentGrowth()"></view>
|
|
|
+ <view>
|
|
|
+ <!-- 小岛 -->
|
|
|
+ <view class="brand-item" v-for="(item, index) in options.jieList" :key="item.jieId"
|
|
|
+ @click="listClick(item, index,options)" :class="getClass(options,index,isVip,item)">
|
|
|
+ <view v-if="isVip === 'VIP'">
|
|
|
+ <!-- 序号 -->
|
|
|
+ <view class="brand-icon" v-if="item.studyFlag===0">{{ item.number }}</view>
|
|
|
+ <!-- 星星 -->
|
|
|
+ <view class="brand-finish-icon" v-if="item.studyFlag===1"></view>
|
|
|
+ <!-- 箭头 -->
|
|
|
+ <view v-if="item.daeFlag &&animalNum == index" class="brand-arrow"></view>
|
|
|
+ <!-- 节名称 -->
|
|
|
+ <view class="brand-content">{{ item.jieName }}</view>
|
|
|
+ </view>
|
|
|
+ <view v-if="isVip == 'Not-Vip'">
|
|
|
+ <!-- 序号或锁 -->
|
|
|
+ <view v-if="options.number ==1 && item.firstFlag ==1" class="brand-icon">{{ item.number }}
|
|
|
+ </view>
|
|
|
+ <view v-else class="brand-lock"></view>
|
|
|
+ <!-- 箭头 -->
|
|
|
+ <view v-if="item.daeFlag && animalNum == index &&isVip != 'Visitor'" class="brand-arrow">
|
|
|
+ </view>
|
|
|
+ <!-- 节名称 -->
|
|
|
+ <view class="brand-content"> {{ item.jieName }} </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="isVip == 'Visitor'">
|
|
|
+ <!-- 序号或锁 -->
|
|
|
+ <view class="brand-icon">{{ item.number }}
|
|
|
+ </view>
|
|
|
+ <!-- 锁 -->
|
|
|
+ <view v-if="options.number !='1' || item.type==2" class="brand-lock"></view>
|
|
|
+ <!-- 箭头 -->
|
|
|
+ <view v-if="item.daeFlag && animalNum == index &&isVip != 'Visitor'" class="brand-arrow">
|
|
|
+ </view>
|
|
|
+ <!-- 节名称 -->
|
|
|
+ <view class="brand-content"> {{ item.jieName }} </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import {
|
|
|
+ reactive,
|
|
|
+ ref,
|
|
|
+ watch,
|
|
|
+ getCurrentInstance,
|
|
|
+ onMounted,
|
|
|
+ nextTick
|
|
|
+ } from "vue";
|
|
|
+ import cacheManager from "@/utils/cacheManager.js";
|
|
|
+ import {
|
|
|
+ toast,
|
|
|
+ getUserIdentity
|
|
|
+ } from "@/utils/common";
|
|
|
+ import {
|
|
|
+ onShow
|
|
|
+ } from '@dcloudio/uni-app';
|
|
|
+ const growthType = ref(null);
|
|
|
+ onShow(() => {
|
|
|
+ growthType.value = cacheManager.get('auth') ? cacheManager.get('auth').growthType : null
|
|
|
+ })
|
|
|
+
|
|
|
+ const $emit = defineEmits(['clickGradeTerm', 'onLeft', 'onRight', 'handleCheckCatalogue', 'listClick'])
|
|
|
+ const props = defineProps({
|
|
|
+ options: {
|
|
|
+ type: Object,
|
|
|
+ },
|
|
|
+ gradeTerm: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ const isVip = getUserIdentity();
|
|
|
+ console.log('isVip', isVip);
|
|
|
+ const gradeMapping = {
|
|
|
+ 1: '一年级',
|
|
|
+ 2: '二年级',
|
|
|
+ 3: '三年级',
|
|
|
+ 4: '四年级',
|
|
|
+ 5: '五年级',
|
|
|
+ 6: '六年级'
|
|
|
+ };
|
|
|
+
|
|
|
+ const termMapping = {
|
|
|
+ 1: ' 数学',
|
|
|
+ 2: ' 英语'
|
|
|
+ };
|
|
|
+
|
|
|
+ let startX = ref(0);
|
|
|
+ let isSliding = ref(false);
|
|
|
+ let endX = ref(0);
|
|
|
+ let gradeTerm = ref('');
|
|
|
+ let animalNum = ref(0);
|
|
|
+
|
|
|
+ function clickGradeTerm() {
|
|
|
+ $emit('clickGradeTerm');
|
|
|
+ }
|
|
|
+
|
|
|
+ function listClick(data, index, data2) {
|
|
|
+ data.daeFlag = true
|
|
|
+ nextTick(() => {
|
|
|
+ animalNum.value = index
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ $emit('listClick', data, data2, index);
|
|
|
+ }, 300)
|
|
|
+
|
|
|
+ }
|
|
|
+ // 获取章name
|
|
|
+ function getZhangName(data) {
|
|
|
+ if (data.length <= 9) {
|
|
|
+ return data
|
|
|
+ } else {
|
|
|
+ return getZhangContent(data);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function currentGrowth(data) {
|
|
|
+ if (growthType.value == 0) {
|
|
|
+ return 'animal-img dan-img'
|
|
|
+ } else if (growthType.value == 1) {
|
|
|
+ return 'animal-img xiao-e-img'
|
|
|
+ } else if (growthType.value == 2) {
|
|
|
+ return 'animal-img zhong-e-img'
|
|
|
+ } else {
|
|
|
+ return 'animal-img da-e-img'
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 章换行显示
|
|
|
+ function getZhangContent(data) {
|
|
|
+
|
|
|
+ let length = data.length;
|
|
|
+ // 初始将字符串平分成两半
|
|
|
+ let halfLength = Math.floor(length / 2);
|
|
|
+
|
|
|
+ // 插入换行符
|
|
|
+ let firstLine = data.slice(0, halfLength);
|
|
|
+ let secondLine = data.slice(halfLength);
|
|
|
+ //console.log(firstLine + '\n' + secondLine, 'firstLine + + secondLine');
|
|
|
+ return firstLine + '\n' + secondLine;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 章class
|
|
|
+ function getTitleClass(data) {
|
|
|
+
|
|
|
+ if (data.length <= 5) {
|
|
|
+ return 'chapter-title-box chapter-small-title-box'
|
|
|
+ } else if (data.length <= 9) {
|
|
|
+ return 'chapter-title-box chapter-middle-title-box'
|
|
|
+ } else if (data.length > 9) {
|
|
|
+ return 'chapter-title-box chapter-big-title-box'
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取节class
|
|
|
+ function getClass(data, index, isVip,item) {
|
|
|
+ // console.log('data',data);
|
|
|
+ let brandActive = '';
|
|
|
+ if (isVip === 'VIP') {
|
|
|
+ brandActive = 'brand-active';
|
|
|
+ } else if (data.number == 1&&item.firstFlag==1 && isVip =='Not-Vip') {
|
|
|
+ brandActive = 'brand-active';
|
|
|
+ } else if (data.number == 1&&item.firstFlag==1 && isVip =='Visitor' &&item.type ==1) {
|
|
|
+ brandActive = 'brand-active';
|
|
|
+ } else {
|
|
|
+ brandActive = '';
|
|
|
+ }
|
|
|
+ let indexLast = data.jieList.length - 1;
|
|
|
+ // 判断最后一个为名称是否为单元测试，是单元测试则返回ceshi-jie
|
|
|
+ if (index === indexLast && data.jieList[data.jieList.length - 1].jieName == '单元测试') {
|
|
|
+ return 'ceshi-brand-item' + ' ' + brandActive;
|
|
|
+ } else {
|
|
|
+ return getJieClass(data, index, brandActive)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 根据获取节字数获取class
|
|
|
+ function getJieClass(data, index, active) {
|
|
|
+ let itemJieName = data.jieList[index].jieName.length;
|
|
|
+ if (itemJieName > 7) {
|
|
|
+ return 'big-brand-item' + ' ' + active;
|
|
|
+ } else {
|
|
|
+ return 'small-brand-item' + ' ' + active;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ function handleCheckCatalogue() {
|
|
|
+ $emit('handleCheckCatalogue');
|
|
|
+ }
|
|
|
+
|
|
|
+ function onTouchStart(event) {
|
|
|
+ console.log(event.touches.length);
|
|
|
+ isSliding.value = false
|
|
|
+ if (event.touches.length === 1) {
|
|
|
+ isSliding.value = true;
|
|
|
+ startX.value = event.touches[0].pageX;
|
|
|
+ } else {
|
|
|
+ isSliding.value = false;
|
|
|
+ event.preventDefault()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function onSwipeLeft(event) {
|
|
|
+ console.log('11111');
|
|
|
+ if (cacheManager.get('auth')) {
|
|
|
+ $emit('onLeft');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function onSwipeRight(event) {
|
|
|
+ console.log('22222');
|
|
|
+ console.log(cacheManager.get('auth'));
|
|
|
+ if (cacheManager.get('auth')) {
|
|
|
+ console.log('啊啊啊啊啊');
|
|
|
+ $emit('onRight');
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function onTouchEnd(event) {
|
|
|
+ if (isSliding.value) {
|
|
|
+ const distanceX = event.changedTouches[0].clientX - startX.value
|
|
|
+ if (distanceX > 200) {
|
|
|
+ onSwipeLeft();
|
|
|
+ } else if (distanceX < -200) {
|
|
|
+ onSwipeRight();
|
|
|
+ }
|
|
|
+ isSliding.value = false
|
|
|
+ } else {
|
|
|
+ console.log('error');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function dataRecom(data) {
|
|
|
+
|
|
|
+ const index = data.jieList.findIndex(item => item.studyFlag == 0);
|
|
|
+
|
|
|
+ if (index !== -1) {
|
|
|
+ data.jieList[index].daeFlag = true;
|
|
|
+ animalNum.value = index
|
|
|
+ }
|
|
|
+ }
|
|
|
+ watch(() => props.options, (newVal, oldVal) => {
|
|
|
+ // console.log('New options:', newVal);
|
|
|
+ // console.log('Old options:', oldVal);
|
|
|
+ // 在这里可以根据新的 options 做一些操作，比如发起请求等
|
|
|
+
|
|
|
+ dataRecom(newVal)
|
|
|
+ }, {
|
|
|
+ deep: true,
|
|
|
+ immediate: true
|
|
|
+ });
|
|
|
+ watch(() => props.gradeTerm, (newVal, oldVal) => {
|
|
|
+ // console.log('New options:', newVal);
|
|
|
+ // console.log('Old options:', oldVal);
|
|
|
+ // 在这里可以根据新的 options 做一些操作，比如发起请求等
|
|
|
+ gradeTerm.value = newVal
|
|
|
+
|
|
|
+ }, {
|
|
|
+ deep: true,
|
|
|
+ immediate: true
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+
|
|
|
+</style>
|
tanxue