yingyuNew.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. <template>
  2. <view class="ezy-study-page ezy-cjdc-study-page">
  3. <view class="study-school-year" @click="clickGradeTerm">{{gradeTerm}}</view>
  4. <view class="ezy-study-wrap" @touchstart="onTouchStart" @touchend="onTouchEnd">
  5. <img class="study-name-img" :src="growthImg"/>
  6. <!-- <img class="study-book-img" :src="bookImg"/> -->
  7. <img class="study-book-img" src="@/static/images/study/cjdc/book-default-img.png"/>
  8. <view @click="handleCheckCatalogue" :class="getTitleClass(zhangName)">{{zhangName}}</view>
  9. <!-- 动物类型 -->
  10. <view v-if="growthType!=null" :class="currentGrowth()"></view>
  11. <view>
  12. <!-- 小岛 -->
  13. <view class="brand-item" v-for="(item, index) in options.jieList" :key="item.jieId"
  14. @click="listClick(item, index,options)" :class="getClass(options,index,isVip,item)">
  15. <view v-if="isVip === 'VIP'">
  16. <!-- 序号 -->
  17. <!-- <view class="brand-icon">{{ item.number }}</view> -->
  18. <!-- 星星 -->
  19. <view class="brand-finish-icon" v-if="item.studyFlag===1"></view>
  20. <!-- 箭头 -->
  21. <view class="brand-arrow" v-if="item.daeFlag &&animalNum == index"></view>
  22. <!-- 节名称 -->
  23. <view class="brand-content">{{ item.jieName }}</view>
  24. </view>
  25. <view v-if="isVip == 'Not-Vip'">
  26. <!-- 序号 -->
  27. <!-- <view class="brand-icon">{{ item.number }}</view> -->
  28. <view v-if="item.number !=1" class="brand-lock"></view>
  29. <!-- 箭头 -->
  30. <view v-if="item.daeFlag && animalNum == index && isVip != 'Visitor'" class="brand-arrow"></view>
  31. <!-- 节名称 -->
  32. <view class="brand-content"> {{ item.jieName }} </view>
  33. </view>
  34. <view v-if="isVip == 'Visitor'">
  35. <!-- 锁 -->
  36. <!-- <view class="brand-icon">{{ item.number }} </view> -->
  37. <!-- 锁 -->
  38. <view v-if="item.number !=1" class="brand-lock"></view>
  39. <!-- 箭头 -->
  40. <view v-if="item.daeFlag && animalNum == index && isVip != 'Visitor'" class="brand-arrow"></view>
  41. <!-- 节名称 -->
  42. <view class="brand-content"> {{ item.jieName }} </view>
  43. </view>
  44. </view>
  45. </view>
  46. </view>
  47. </view>
  48. </template>
  49. <script setup>
  50. import {
  51. reactive,
  52. ref,
  53. watch,
  54. getCurrentInstance,
  55. nextTick,
  56. onMounted
  57. } from "vue";
  58. import cacheManager from "@/utils/cacheManager.js";
  59. import {
  60. toast,
  61. getUserIdentity
  62. } from "@/utils/common";
  63. import {
  64. onShow
  65. } from '@dcloudio/uni-app';
  66. const growthType = ref(null);
  67. const growthImg = ref(null);
  68. const bookImg = ref(null);
  69. const youkeImageBook = ref(null);
  70. const $emit = defineEmits(['clickGradeTerm', 'onLeft', 'onRight', 'handleCheckCatalogue', 'listClick'])
  71. const props = defineProps({
  72. options: {
  73. type: Object,
  74. },
  75. youkeImage: {
  76. String: '',
  77. },
  78. youkeImageBook: {
  79. String: '',
  80. },
  81. gradeTerm: {
  82. type: String,
  83. },
  84. zhangName: {
  85. type: String,
  86. },
  87. })
  88. onShow(() => {
  89. growthType.value = cacheManager.get('auth')?cacheManager.get('auth').growthType:props.youkeImage
  90. growthImg.value = cacheManager.get('auth') ? cacheManager.get('zhangInfo').icon : props.youkeImage;
  91. // 待修改 wgy看这
  92. bookImg.value = cacheManager.get('auth') ? cacheManager.get('zhangInfo').icon : props.youkeImage;
  93. youkeImageBook.value = cacheManager.get('auth') ? cacheManager.get('zhangInfo').zhangIcon : props.youkeImageBook;
  94. })
  95. const isVip = getUserIdentity();
  96. console.log('isVip',isVip);
  97. const gradeMapping = {
  98. 1: '一年级',
  99. 2: '二年级',
  100. 3: '三年级',
  101. 4: '四年级',
  102. 5: '五年级',
  103. 6: '六年级'
  104. };
  105. const termMapping = {
  106. 1: ' 数学',
  107. 2: ' 英语'
  108. };
  109. let startX = ref(0);
  110. let isSliding = ref(false);
  111. let endX = ref(0);
  112. let gradeTerm = ref('');
  113. let animalNum = ref(0);
  114. function clickGradeTerm() {
  115. $emit('clickGradeTerm');
  116. }
  117. function listClick(data,index,data2) {
  118. data.daeFlag = true
  119. nextTick(() => {
  120. animalNum.value = index
  121. })
  122. setTimeout(() => {
  123. $emit('listClick', data,data2,index);
  124. }, 300)
  125. }
  126. function currentGrowth(data) {
  127. if (growthType.value == 0) {
  128. return 'animal-img dan-img'
  129. } else if (growthType.value == 1) {
  130. return 'animal-img xiao-e-img'
  131. } else if (growthType.value == 2) {
  132. return 'animal-img zhong-e-img'
  133. } else {
  134. return 'animal-img da-e-img'
  135. }
  136. }
  137. // 章名称显示显示
  138. function getTitleClass(data) {
  139. console.log(data.length, 'data.length666');
  140. if(data.length <= 5){
  141. return 'chapter-title-box'
  142. }else if(data.length <= 8){
  143. return 'chapter-big-title-box'
  144. }else{
  145. return 'chapter-last-title-box'
  146. }
  147. }
  148. // 获取节class
  149. function getClass(data, index, isVip,item) {
  150. let brandActive = '';
  151. if (isVip === 'VIP') {
  152. brandActive = 'brand-active';
  153. } else if (item.firstFlag == 1 && isVip =='Not-Vip') {
  154. brandActive = 'brand-active';
  155. }else if (item.firstFlag == 1 && isVip =='Visitor' &&item.type ==1){
  156. brandActive = 'brand-active';
  157. } else {
  158. brandActive = '';
  159. }
  160. let indexLast = data.jieList.length - 1;
  161. // 判断最后一个为名称是否为单元测试,是单元测试则返回ceshi-jie
  162. if (index === indexLast && data.jieList[data.jieList.length - 1].jieName == 'Testing') {
  163. return 'ceshi-brand-item' + ' ' + brandActive;
  164. } else {
  165. return brandActive;
  166. }
  167. }
  168. function handleCheckCatalogue() {
  169. $emit('handleCheckCatalogue');
  170. }
  171. function onTouchStart(event) {
  172. console.log(event.touches.length);
  173. isSliding.value = false
  174. if (event.touches.length === 1) {
  175. isSliding.value = true;
  176. startX.value = event.touches[0].pageX;
  177. } else {
  178. isSliding.value = false;
  179. event.preventDefault()
  180. return
  181. }
  182. }
  183. function onSwipeLeft(event) {
  184. console.log('11111');
  185. if (cacheManager.get('auth')) {
  186. $emit('onLeft');
  187. }
  188. }
  189. function onSwipeRight(event) {
  190. console.log('22222');
  191. if (cacheManager.get('auth')) {
  192. $emit('onRight');
  193. }
  194. }
  195. function onTouchEnd(event) {
  196. if (isSliding.value) {
  197. const distanceX = event.changedTouches[0].clientX - startX.value
  198. if (distanceX > 0) {
  199. onSwipeLeft();
  200. } else if (distanceX < 0) {
  201. onSwipeRight();
  202. }
  203. isSliding.value = false
  204. } else {
  205. console.log('error');
  206. }
  207. }
  208. function dataRecom(data) {
  209. const index = data.jieList.findIndex(item => item.studyFlag == 0);
  210. if (index !== -1) {
  211. data.jieList[index].daeFlag = true;
  212. animalNum.value = index
  213. }
  214. }
  215. watch(() => props.options, (newVal, oldVal) => {
  216. // console.log('New options:', newVal);
  217. // console.log('Old options:', oldVal);
  218. // 在这里可以根据新的 options 做一些操作,比如发起请求等
  219. dataRecom(newVal)
  220. }, {
  221. deep: true,
  222. immediate: true
  223. });
  224. watch(() => props.gradeTerm, (newVal, oldVal) => {
  225. // console.log('New options:', newVal);
  226. // console.log('Old options:', oldVal);
  227. // 在这里可以根据新的 options 做一些操作,比如发起请求等
  228. gradeTerm.value = newVal
  229. }, {
  230. deep: true,
  231. immediate: true
  232. });
  233. </script>
  234. <style>
  235. </style>