|
@@ -43,7 +43,9 @@
|
|
|
:circular="false"
|
|
:circular="false"
|
|
|
:current="listData.activeIndex"
|
|
:current="listData.activeIndex"
|
|
|
@change="handleSwiperChange"
|
|
@change="handleSwiperChange"
|
|
|
- :disable-touch="!swiperData.isAllowed"
|
|
|
|
|
|
|
+ @touchstart="handleSwiperTouchStart"
|
|
|
|
|
+ @touchmove="handleSwiperTouchMove"
|
|
|
|
|
+ :disable-touch="isSwiperDisabled"
|
|
|
>
|
|
>
|
|
|
<swiper-item
|
|
<swiper-item
|
|
|
class="word-list-swiper-item"
|
|
class="word-list-swiper-item"
|
|
@@ -110,7 +112,7 @@
|
|
|
</swiper-item>
|
|
</swiper-item>
|
|
|
</swiper>
|
|
</swiper>
|
|
|
</view>
|
|
</view>
|
|
|
- <tip-small-dialog ref="goPayDialogRef" @confirm-btn="goPayPage" :content="tipContent"></tip-small-dialog>
|
|
|
|
|
|
|
+ <tip-small-dialog ref="goPayDialogRef" @confirm-btn="goPayPage" content="需要购买当前课程才能学习" qrBtnName="前往购买"></tip-small-dialog>
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -144,8 +146,6 @@ const info = reactive({
|
|
|
levelId: null,
|
|
levelId: null,
|
|
|
zhangId: null,
|
|
zhangId: null,
|
|
|
});
|
|
});
|
|
|
-const tipContent = '是否前往开通付费?';
|
|
|
|
|
-
|
|
|
|
|
|
|
|
|
|
const {swiperData, handleTouchStart, handleTouchEnd, userCode} = useSwiper(
|
|
const {swiperData, handleTouchStart, handleTouchEnd, userCode} = useSwiper(
|
|
|
listData,
|
|
listData,
|
|
@@ -153,6 +153,48 @@ const {swiperData, handleTouchStart, handleTouchEnd, userCode} = useSwiper(
|
|
|
},
|
|
},
|
|
|
);
|
|
);
|
|
|
|
|
|
|
|
|
|
+// 计算属性,控制 swiper 是否禁用触摸
|
|
|
|
|
+const isSwiperDisabled = computed(() => {
|
|
|
|
|
+ // 检查下一个项是否被锁定
|
|
|
|
|
+ const nextIndex = listData.activeIndex + 1;
|
|
|
|
|
+ if (nextIndex < listData.danyuanNumberList.length) {
|
|
|
|
|
+ const nextItem = listData.danyuanNumberList[nextIndex];
|
|
|
|
|
+ if (nextItem.lock) {
|
|
|
|
|
+ return true;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ return !swiperData.isAllowed;
|
|
|
|
|
+});
|
|
|
|
|
+
|
|
|
|
|
+// 记录swiper触摸开始位置
|
|
|
|
|
+let startX = 0;
|
|
|
|
|
+
|
|
|
|
|
+// 处理swiper触摸开始
|
|
|
|
|
+function handleSwiperTouchStart(e) {
|
|
|
|
|
+ startX = e.touches[0].clientX;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 处理swiper触摸移动
|
|
|
|
|
+function handleSwiperTouchMove(e) {
|
|
|
|
|
+ const currentX = e.touches[0].clientX;
|
|
|
|
|
+ const diffX = currentX - startX;
|
|
|
|
|
+
|
|
|
|
|
+ // 向左滑动
|
|
|
|
|
+ if (diffX < -50) {
|
|
|
|
|
+ // 检查下一个项是否被锁定
|
|
|
|
|
+ const nextIndex = listData.activeIndex + 1;
|
|
|
|
|
+ if (nextIndex < listData.danyuanNumberList.length) {
|
|
|
|
|
+ const nextItem = listData.danyuanNumberList[nextIndex];
|
|
|
|
|
+ if (nextItem.lock) {
|
|
|
|
|
+ // 阻止滑动
|
|
|
|
|
+ e.preventDefault();
|
|
|
|
|
+ // 弹出弹窗
|
|
|
|
|
+ goPayDialogRef.value.handleShow();
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
onLoad((options) => {
|
|
onLoad((options) => {
|
|
|
routerOpt = options;
|
|
routerOpt = options;
|
|
|
// 非游客
|
|
// 非游客
|
|
@@ -162,21 +204,45 @@ onLoad((options) => {
|
|
|
|
|
|
|
|
// Swiper 切换
|
|
// Swiper 切换
|
|
|
function handleSwiperChange(e) {
|
|
function handleSwiperChange(e) {
|
|
|
- listData.activeIndex = e.detail.current;
|
|
|
|
|
- if (!swiperData.isAllowed) {
|
|
|
|
|
- // 不满足条件时回退到原索引
|
|
|
|
|
- nextTick(() => {
|
|
|
|
|
- listData.activeIndex = 0; // 强制回退
|
|
|
|
|
- });
|
|
|
|
|
- swiperData.isAllowed = false; // 重置状态
|
|
|
|
|
|
|
+ // 只有当 swiper 的变化是由用户手动滑动引起的,才调用 updataShuju 函数
|
|
|
|
|
+ // 避免由数据更新引起的 swiper 变化触发二次请求
|
|
|
|
|
+ if (e.detail.source === 'touch') {
|
|
|
|
|
+
|
|
|
|
|
+ const currentIndex = e.detail.current;
|
|
|
|
|
+ const item = listData.danyuanNumberList[currentIndex];
|
|
|
|
|
+ if (item.lock) {
|
|
|
|
|
+ // 弹出弹窗让用户确认是否去购买
|
|
|
|
|
+ goPayDialogRef.value.handleShow();
|
|
|
|
|
+ // 回退到原索引
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ listData.activeIndex = e.detail.current - 1 >= 0 ? e.detail.current - 1 : 0;
|
|
|
|
|
+ });
|
|
|
|
|
+ return;
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ listData.activeIndex = e.detail.current;
|
|
|
|
|
+ if (!swiperData.isAllowed) {
|
|
|
|
|
+ // 不满足条件时回退到原索引
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ listData.activeIndex = 0; // 强制回退
|
|
|
|
|
+ });
|
|
|
|
|
+ swiperData.isAllowed = false; // 重置状态
|
|
|
|
|
+ }
|
|
|
|
|
+ // findWordLeft(listData.activeIndex);
|
|
|
|
|
+ centerActiveTab();
|
|
|
|
|
+ updataShuju(listData.danyuanNumberList[listData.activeIndex]);
|
|
|
}
|
|
}
|
|
|
- // findWordLeft(listData.activeIndex);
|
|
|
|
|
- centerActiveTab();
|
|
|
|
|
- updataShuju(listData.danyuanNumberList[listData.activeIndex]);
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 处理tab点击
|
|
// 处理tab点击
|
|
|
function handleTabClick(index) {
|
|
function handleTabClick(index) {
|
|
|
|
|
+ const item = listData.danyuanNumberList[index];
|
|
|
|
|
+ if (item.lock) {
|
|
|
|
|
+ // 弹出弹窗让用户确认是否去购买
|
|
|
|
|
+ goPayDialogRef.value.handleShow();
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
listData.activeIndex = index;
|
|
listData.activeIndex = index;
|
|
|
centerActiveTab();
|
|
centerActiveTab();
|
|
|
updataShuju(listData.danyuanNumberList[index]);
|
|
updataShuju(listData.danyuanNumberList[index]);
|
|
@@ -293,18 +359,8 @@ function toWord(data) {
|
|
|
|
|
|
|
|
// 去支付
|
|
// 去支付
|
|
|
function goPayPage() {
|
|
function goPayPage() {
|
|
|
- let zhangInfoLocal = cacheManager.get("zhangInfo");
|
|
|
|
|
- if (!zhangInfoLocal.cardId) {
|
|
|
|
|
- toast("cardId 丢失请重新选择学科LevelId");
|
|
|
|
|
- return false;
|
|
|
|
|
- }
|
|
|
|
|
uni.redirectTo({
|
|
uni.redirectTo({
|
|
|
- url:
|
|
|
|
|
- "/pages/mall/mallPage?cardId=" +
|
|
|
|
|
- zhangInfoLocal.cardId +
|
|
|
|
|
- "&from=daoPage" +
|
|
|
|
|
- "&subjectId=" +
|
|
|
|
|
- zhangInfoLocal.subjectId,
|
|
|
|
|
|
|
+ url: "/pages/chanpinShop/cp4/dingdan"
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|