123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281 |
- <template>
- <view class="word-list-page">
- <view class="icon-title-navBar-box">
- <view @click="goBack" class="nav-bar-icon"></view>
- <text class="nav-bar-title">{{listData.title || ''}}</text>
- </view>
- <view class="ezy-tab-border">
- <view class="ezy-border-body">
- <scroll-view scroll-x="true" :scroll-left='wordLeft' class="word-title-box"
- v-if="listData.jieNumberList && listData.jieNumberList.length >0">
- <view :id="'item-' + item.jieId" class="title-item" v-for="(item,index) in listData.jieNumberList"
- :key="item.jieId" :class="{active: listData.activeIndex == index}">Unit{{item.number}}</view>
- </scroll-view>
- <swiper class="word-view-swiper-box" :indicator-dots="false" :autoplay="false" :circular="false"
- @change="handleSwiperChange" :disable-touch="!swiperData.isAllowed">
- <swiper-item v-for="citem in unitList" :key="citem.jieId" @touchstart="handleTouchStart"
- @touchend="handleTouchEnd">
- <view class="word-list-body" v-if="citem.wordList && citem.wordList.length > 0">
- <view class="word-num-box">
- <icon></icon><text>{{citem.studyCount || 0}}/{{citem.count || 0}}词</text>
- </view>
- <!-- 单词 -->
- <view class="word-list-item" v-for="(item,index) in citem.wordList" :key="index"
- @click="toWord(item)" :class="{active: item.wcFlag == 1}">
- <view class="item-word">
- <view class="word-text">
- <text v-for="(word, wordIndex) in item.chaifen" :key="wordIndex"
- class="word-color">
- {{ word }}
- </text>
- </view>
- <view class="phonetic-alphabet">{{item.yinbiao || ''}}</view>
- </view>
- <view class="item-explain">
- <view class="item-explain-content">
- <view class="explain-text" v-for="(meaning, meaningIndex) in item.jianyi"
- :key="meaningIndex">{{meaning}}</view>
- </view>
- </view>
- <view class="item-arrow">
- <icon></icon>
- </view>
- </view>
- </view>
- </swiper-item>
- </swiper>
- </view>
- </view>
- <tip-big-dialog ref="youkeDialogRef" @confirm-btn="ykConfirm" :imgShow="true"></tip-big-dialog>
- </view>
- </template>
- <script setup>
- import {
- reactive,
- ref,
- nextTick
- } from "vue";
- import {
- toast,
- getDataFromStr
- } from "@/utils/common";
- import {
- onLoad
- } from "@dcloudio/uni-app";
- import {
- getWordZhangList,
- getWordZhangListYK,
- } from "@/api/word.js";
- import cacheManager from '@/utils/cacheManager.js';
- import tipBigDialog from '@/components/dialog/tipBigDialog.vue';
- import {
- useSwiper
- } from "@/utils/useSwiper";
- const listData = reactive({
- jieNumberList: [], //节名称
- title: '', // 版本+年级+学期
- wordList: [], // 单词列表,默认值设为空数组
- activeIndex: 0,
- });
- let wordJieId = ref(null);
- let routerOpt = ref(false);
- let wordLeft = ref(0);
- const youkeDialogRef = ref(null);
- const unitList = ref([])
- const info = reactive({
- levelId: null,
- zhangId: null,
- })
- const {
- swiperData,
- handleTouchStart,
- handleTouchEnd
- } = useSwiper(listData, (userCode) => {
- console.log('userCode',userCode)
-
-
- });
- onLoad((options) => {
- routerOpt = options;
- if (!cacheManager.get('auth')) {
- // 游客
- const youkeData = JSON.parse(routerOpt.youkePageData)
- info.levelId = youkeData.levelId;
- info.zhangId = youkeData.youkeZhangId;
- wordJieId = youkeData.jieId
- getWordListDataYk();
- } else {
- // 获取缓存
- [info.levelId, info.zhangId] = getDataFromStr(cacheManager.get('auth').levelId)
- // 非游客
- wordJieId = routerOpt.jieId
- getWordListData();
- }
- });
- function handleSwiperChange(e) {
- if (!swiperData.isAllowed) {
- // 不满足条件时回退到原索引
- nextTick(() => {
- listData.activeIndex = 0; // 强制回退
- });
- swiperData.isAllowed = false; // 重置状态
- return;
- }
- listData.activeIndex = e.detail.current;
- // unit滚动到指定位置
- findWordLeft(listData.activeIndex)
- handleTitleClick(listData.jieNumberList[listData.activeIndex])
- }
- // 游客弹窗---确定
- function ykConfirm() {
- uni.redirectTo({
- url: '/pages/login/index'
- });
- }
- // 返回
- function goBack() {
- if (!cacheManager.get('auth')) {
- const youkeData = JSON.parse(routerOpt.youkePageData)
- // 游客
- uni.redirectTo({
- url: `/pages/study/index?levelId=${youkeData.levelId}&typeId=${youkeData.typeId}&subjectId=${youkeData.subjectId}&tipFlag=${youkeData.tipFlag}&youkeZhangId=${youkeData.youkeZhangId}&jieId=${youkeData.jieId}`
- })
- } else {
- // 非游客
- uni.redirectTo({
- url: `/pages/study/index`
- })
- }
- }
- // 修改缓存zid 用于定位岛
- function updataCache(data) {
- cacheManager.updateObject('zhangInfo', {
- curZid: data
- })
- }
- function handleTitleClick(item) {
- if (!cacheManager.get('auth')) {
- youkeDialogRef.value.handleShow();
- } else {
- // 非游客
- wordJieId = item.jieId;
- // 修改缓存zid 用于定位岛
- updataCache(item.zhangZid)
- getWordListData();
- }
- }
- function findIndexByJieId(list, jieId) {
- const findIndex = list.findIndex(item => item.jieId == jieId)
- // unit滚动到指定位置
- findWordLeft(findIndex)
- return findIndex;
- }
- // 获取滚动距离
- function findWordLeft(data) {
- wordLeft.value = data * 40;
- return wordLeft.value;
- }
- function getWordListData() {
- /* const opt = {
- jieId: wordJieId
- };
- getWordList(opt).then(res => {
- if (res.code === 0) {
- listData.count = res.data.count;
- listData.studyCount = res.data.studyCount;
- listData.jieNumberList = res.data.jieNumberList;
- listData.title = res.data.title;
- listData.wordList = res.data.wordList;
- listData.activeIndex = findIndexByJieId(listData.jieNumberList,wordJieId);
- }
- }).catch(err => {
- toast("获取单词列表数据失败");
- }); */
- const opt = {
- levelId: info.levelId,
- zhangId: info.zhangId,
- jieId: wordJieId
- };
- getWordZhangList(opt).then(res => {
- if (res.code === 0) {
- listData.title = res.data.title;
- unitList.value = res.data.jieWordsList;
- listData.jieNumberList = res.data.jieNumberList;
- unitList.value.forEach(item => {
- if (item.jieId == wordJieId.value) {
- listData.activeIndex = findIndexByJieId(listData.jieNumberList, wordJieId);
- }
- })
- }
- }).catch(err => {
- toast("获取单词列表数据失败");
- });
- }
- function getWordListDataYk() {
- const opt = {
- levelId: info.levelId,
- zhangId: info.zhangId,
- jieId: wordJieId
- };
- getWordZhangListYK(opt).then(res => {
- if (res.code === 0) {
- listData.title = res.data.title;
- unitList.value = res.data.jieWordsList;
- listData.jieNumberList = res.data.jieNumberList;
- unitList.value.forEach(item => {
- if (item.jieId == wordJieId.value) {
- listData.activeIndex = findIndexByJieId(listData.jieNumberList, wordJieId);
- }
- })
- }
- }).catch(err => {
- toast("获取单词列表数据失败");
- });
- }
- // 单词
- function toWord(data) {
- if (!cacheManager.get('auth')) {
- // 游客
- const youkeData = JSON.parse(routerOpt.youkePageData)
- uni.redirectTo({
- url: `/pages/newEnglish/index?jieId=${wordJieId}&wordId=${data.id}&levelId=${youkeData.levelId}&typeId=${youkeData.typeId}&subjectId=${youkeData.subjectId}&tipFlag=${youkeData.tipFlag}&youkeZhangId=${youkeData.youkeZhangId}`
- })
- } else {
- // 非游客
- uni.redirectTo({
- url: `/pages/newEnglish/index?jieId=${wordJieId}&wordId=${data.id}`
- })
- }
- }
- </script>
|