uniProject/pages/chaojidanci/wordList/wordList.vue

<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="word-title-box"
        v-if="listData.danyuanNumberList && listData.danyuanNumberList.length > 0"
      >
        <!-- @click="handleTitleClick(item)"-->
        <view
          :id="'item-' + item.danyuanId"
          class="title-item"
          v-for="(item, index) in listData.danyuanNumberList"
          :key="item.danyuanId"
          :class="{ active: listData.activeIndex == index }"
          v-show="
            isTargetInSameGroup(
              listData.danyuanNumberList,
              listData.danyuanNumberList[listData.activeIndex],
              item.danyuanId,
            )
          "
        >
          Unit{{ item.number }}</view
        >
      </view>

      <view class="ezy-border-body">
        <swiper
          class="word-list-swiper-box"
          :indicator-dots="false"
          :autoplay="false"
          :circular="false"
          :current="listData.activeIndex"
          @change="handleSwiperChange"
          :disable-touch="!swiperData.isAllowed"
        >
          <swiper-item
            class="word-list-swiper-item"
            v-for="citem in unitList"
            :key="citem.danyuanId"
            @touchstart="handleTouchStart"
            @touchend="handleTouchEnd"
          >
            <view
              class="word-list-body"
              v-if="citem.wordList && citem.wordList.length > 0"
            >
              <!-- num -->
              <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>
            <!-- 没有单词 -->
            <view class="no-word-box" v-else> 暂无单词 </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
	<tip-small-dialog ref="goPayDialogRef" @confirm-btn="goPayPage" :content="tipContent"></tip-small-dialog>
  </view>
</template>

<script setup>
import { reactive, ref, nextTick, computed } from "vue";
import {
  toast,
  getDataFromStr,
  useActiveDomIntoView,
  isTargetInSameGroup,
} from "@/utils/common";
import { onLoad } from "@dcloudio/uni-app";
import { getWordZhangList } from "@/api/chaojidanci.js";
import cacheManager from "@/utils/cacheManager.js";
import { useSwiper } from "@/utils/useSwiper";
import tipSmallDialog from "@/components/dialog/tipSmallDialog.vue";


const goPayDialogRef = ref(null);
const listData = reactive({
  danyuanNumberList: [], //节名称
  title: "", // 版本+年级+学期
  wordList: [], // 单词列表，默认值设为空数组
  activeIndex: 0,
});
let danyuanId = ref(null);
let routerOpt = ref(false);
let wordLeft = ref(0);
const unitList = ref([]);
const info = reactive({
  levelId: null,
  zhangId: null,
});
const tipContent = '是否前往开通付费？';


const { swiperData, handleTouchStart, handleTouchEnd, userCode } = useSwiper(
  listData,
  (userCode) => { },
);

onLoad((options) => {
  routerOpt = options;
  // 非游客
  danyuanId.value = routerOpt.danyuanId;
  getWordListData();
});

// Swiper 切换
function handleSwiperChange(e) {
  listData.activeIndex = e.detail.current;
  if (!swiperData.isAllowed) {
    // 不满足条件时回退到原索引
    nextTick(() => {
      listData.activeIndex = 0; // 强制回退
    });
    swiperData.isAllowed = false; // 重置状态
  }
  findWordLeft(listData.activeIndex);
  updataShuju(listData.danyuanNumberList[listData.activeIndex]);
}


// 返回
function goBack() {
  uni.redirectTo({
    url: `/pages/study/index`,
  });
}

// 修改缓存zid  用于定位岛
function updataCache(data) {
  cacheManager.updateObject("zhangInfo", {
    curZid: data,
  });
}

//tab click
function handleTitleClick(item) {
 updataShuju(item);
}

// 修改数据 &&定位岛
function updataShuju(data) {
  // 非游客
  danyuanId.value = data.danyuanId;
  // 修改缓存zid  用于定位岛
  updataCache(data.zhangZid);
  getWordListData();
}

// 返回节index
function findIndexByDanyuanId(list, danyuanId) {
  const findIndex = list.findIndex((item) => item.danyuanId == danyuanId);
  // unit滚动到指定位置
  findWordLeft(findIndex);
  return findIndex;
}

// 获取滚动距离
function findWordLeft(data) {
  useActiveDomIntoView(".word-title-box", ".title-item.active");
}

function getWordListData() {
  const opt = {
    danyuanId: 244, // routerOpt.danyuanId
	  banbenId: 39, // routerOpt.banbenId
  };
  getWordZhangList(opt)
    .then((res) => {
      if (res.code === 0) {
        listData.title = res.data.title;
        unitList.value = res.data.danyuanWordsList;
        listData.danyuanNumberList = res.data.danyuanNumberList;
        unitList.value.forEach((item) => {
          if (item.danyuanId == danyuanId.value) {
            listData.activeIndex = findIndexByDanyuanId(
              listData.danyuanNumberList,
              danyuanId.value
            );
          }
        });
      }
    })
    .catch((err) => {
		console.log('err',err)
      toast("获取单词列表数据失败");
    });
}

// 单词
function toWord(data) {
 uni.redirectTo({
   url: `/pages/chaojidanci/newEnglish/index?danyuanId=${danyuanId.value}&wordId=${data.id}`,
 });
}

// 去支付
function goPayPage() {
  let zhangInfoLocal = cacheManager.get("zhangInfo");
  if (!zhangInfoLocal.cardId) {
    toast("cardId 丢失请重新选择学科LevelId");
    return false;
  }
  uni.redirectTo({
    url:
      "/pages/mall/mallPage?cardId=" +
      zhangInfoLocal.cardId +
      "&from=daoPage" +
      "&subjectId=" +
      zhangInfoLocal.subjectId,
  });
}
</script>