This commit is contained in:
2024-07-02 11:26:14 +08:00
parent a174c3e4d5
commit 41d03fb4ce
15 changed files with 1603 additions and 1334 deletions

View File

@@ -11,9 +11,24 @@
}"
>
<slot name="tabs" :showTabs="showTabs"></slot>
<u-tabs
<view
:style="{ display: showTabs ? 'block' : 'none', ...tabStyle }"
class="wrapper_tab"
>
<view
:class="`${
currentTab == i ? 'hot wrapper_tab_item' : 'wrapper_tab_item'
}`"
v-for="(v, i) in tabList"
@click="clickItem(v, i)"
>
{{ v.title }}
<slot name="labelSlot" :data="v"></slot>
</view>
</view>
<!-- <u-tabs
keyName="title"
:current="currentTab"
:list="tabList"
@@ -34,10 +49,10 @@
}"
>
<template slot="labelSlot" slot-scope="slotProps">
<!-- <text>{{ slotProps.data.title }}</text> -->
<slot name="labelSlot" :data="slotProps.data"></slot>
</template>
</u-tabs>
</u-tabs> -->
</view>
<slot name="otherContent" :showTabs="showTabs"></slot>
@@ -59,10 +74,11 @@
<view class="content section_content_progress">
<view class="content_list">
<slot
name="contentList"
:name="slotName ? slotName + '_' + v.slotName : 'contentList'"
:showTabs="showTabs"
:dataList="v[dataListKey]"
:data="v"
:index="i"
></slot>
</view>
</view>
@@ -83,6 +99,8 @@ export default {
"titleStyle",
"baseHeight",
"allTabList",
"slotName",
"defaultShowTabs",
],
data() {
return {
@@ -111,8 +129,8 @@ export default {
show: false,
options: {},
showTabs: false, // 默认吸顶的tab不显示
currentTab: -1, // 由于初始化的uview的代码有bug所以默认是-1在第一次显示的时候设置0自动复位防止错误
showTabs: this.defaultShowTabs ? this.defaultShowTabs : false, // 默认吸顶的tab不显示
currentTab: 0, // 由于初始化的uview的代码有bug所以默认是-1在第一次显示的时候设置0自动复位防止错误
distanceArr: [], // 每一个ID对应的scrollTop值
@@ -132,7 +150,13 @@ export default {
async onLoad(options) {
this.options = options;
await this.handleselectCate({ ...this.cateList[0], index: 0 }, 0);
await this.handleselectCate(
{
...this.cateList[0],
index: 0,
},
0
);
},
async onShow() {},
methods: {
@@ -140,10 +164,9 @@ export default {
// console.log("event at line 213:", event);
// const _this = this;
if (this.isTabChange) {
return;
return false;
}
const scrollTop = event.scrollTop;
console.log("scrollTop at line 145:", scrollTop);
const skewY =
Number(this.baseHeight) + 45 + +Number(this.statusBarHeight); // 偏移量由于吸顶的tab、头部的显示信息也有高度素以做了偏移量
// // console.log('skewY at line 130:',this.baseHeight,this.statusBarHeight, skewY)
@@ -156,17 +179,19 @@ export default {
// console.log('this.showTabs at line 141:', this.showTabs)
this.$nextTick(() => {
// const length = this.distanceArr.length;
// const index = this.distanceArr.findIndex(
// (el) => el.top - skewY - scrollTop - 40 > 0
// ); console.log('index at line 15911111111111111:', index)
// // 当index == -1 的时候实际当前滚动的距离超出了最大值也就是在最后一个tab显示的内容
// // 当index > 0 的时候说明能在当前的scrollTop值找到index的前一位
// this.currentTab = index > 0 ? index - 1 : length - 1;
// this.currentTab = null;
const length = this.distanceArr.length;
const index = this.distanceArr.findIndex(
(el) => el.top - skewY - scrollTop - 40 > 0
);
// console.log('index at line 15911111111111111:', index)
// 当index == -1 的时候实际当前滚动的距离超出了最大值也就是在最后一个tab显示的内容
// 当index > 0 的时候说明能在当前的scrollTop值找到即index的前一位
this.currentTab = index > 0 ? index - 1 : length - 1;
});
this.$forceUpdate();
} else {
this.showTabs = false;
this.showTabs = this.defaultShowTabs ? this.defaultShowTabs : false;
this.currentTab = 0;
}
},
@@ -271,7 +296,7 @@ export default {
this.isTabChange = true;
this.$nextTick(() => {
this.currentTab = item.index;
this.currentTab = index;
var data = this.distanceArr.find((e) => e.title == item.title);
console.log(
"111111111111111111111111111111111111111at line 258:",
@@ -280,12 +305,12 @@ export default {
uni.pageScrollTo({
// duration: 100, //过渡时间
scrollTop: data.top - skewY, //到达距离顶部的top值
duration: 100,
duration: 300,
complete: function () {
const timer = setTimeout(() => {
that.isTabChange = false; // 关闭
clearTimeout(timer);
}, 500); // 解决ios和安卓、鸿蒙系统兼容性问题
}, 1000); // 解决ios和安卓、鸿蒙系统兼容性问题
},
//scrollTop:data.top - res.top,//如果置顶
});
@@ -333,22 +358,27 @@ export default {
position: absolute;
min-height: 60vh;
.header {
height: 100rpx;
background: orange;
.bg {
width: 100vw;
height: 200rpx;
}
}
.tabs {
position: fixed !important;
z-index: 970;
// top: 0;
background-color: #fff;
width: 100vw;
.tabsStyle {
box-shadow: 0 2rpx 6rpx 0 rgba(153, 153, 153, 0.2);
::v-deep {
.u-tabs {
box-shadow: 0px 4px 6px 0 rgba(153, 153, 153, 0.2);
@@ -356,16 +386,19 @@ export default {
}
}
}
.section {
width: 100%;
padding: 0 0rpx;
box-sizing: border-box;
.section_top {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
.title {
font-size: 40rpx;
font-family: PingFangSC-Semibold, PingFang SC;
@@ -373,6 +406,7 @@ export default {
color: #333333;
margin-left: 30rpx;
position: relative;
&::before {
position: absolute;
content: "";
@@ -660,5 +694,21 @@ export default {
.hot {
color: #00bb84 !important;
font-weight: bold;
}
.wrapper_tab {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
font-size: 34rpx;
}
.wrapper_tab_item {
width: auto;
display: inline-block;
line-height: 60rpx;
padding: 10rpx 20rpx;
}
</style>

View File

@@ -6,7 +6,7 @@
<u-grid-item :class="`scroll-view-item list_item content_item `"
v-for="(item, index) in dataList" :key="item.id" @click="gotoDetail(item)">
<image :src="defaultUrl ? defaultUrl : item[imgUrl]" :mode="imgMode?imgMode:'aspectFil'" class="book_image"></image>
<image lazy-load :src="defaultUrl ? defaultUrl : item[imgUrl]" :mode="imgMode?imgMode:'aspectFil'" class="book_image" ></image>
<view :class="['titleItem', 'common_curriculum_item']">
<slot name="leftSlot" :row="item"></slot>

File diff suppressed because it is too large Load Diff

View File

@@ -7,9 +7,11 @@
<common-anchor-link
style="width: 100%"
ref="commonAnchorLink"
baseHeight="80"
baseHeight="40"
:defaultShowTabs="true"
:allDataList="allDataList"
titleKey="title"
:slotName="currentCateIndex == 0 ? '' : 'detail'"
:dataListKey="currentCateIndex == 0 ? 'courseList' : 'content'"
:titleStyle="{
'font-size': '30px',
@@ -20,6 +22,7 @@
}"
>
<template slot="tabs" slot-scope="slotProps">
<common-sticky
label="title"
itemStyle="width:50%;padding-left: 15px; padding-right: 15px; height: 68rpx;"
@@ -29,10 +32,10 @@
></common-sticky>
</template>
<template slot="label" slot-scope="slotProps">
<view class="content_title PM_font">{{ slotProps.title }}</view>
<view class="content_title " style="margin-top: 40px; margin-bottom: 60px;">{{ slotProps.title }}</view>
</template>
<template slot="contentList" slot-scope="slotProps">
<common-list
<common-list style="margin-bottom: 120px;"
v-if="currentCateIndex == 0"
noDataIcon="data"
:isCondition="true"
@@ -85,11 +88,25 @@
</view>
</template>
</common-list>
<view v-else style="padding: 20px 20rpx 40px">
<rich-text
:nodes="slotProps.dataList"
:data-nodes="slotProps.dataList"
></rich-text>
</template>
<template slot="detail_buyRecord" slot-scope="slotProps">
<view style="padding: 20px 20rpx 40px">
<view v-html="slotProps.dataList"></view>
</view>
</template>
<template slot="detail_useRecord" slot-scope="slotProps">
<view style="padding: 20px 20rpx 40px">
<view v-html="slotProps.dataList"></view>
</view>
</template>
<template slot="detail_studyRecord" slot-scope="slotProps">
<view style="padding: 20px 20rpx 40px">
<view v-html="slotProps.dataList"></view>
</view>
</template>
<template slot="detail_vipRecord" slot-scope="slotProps">
<view style="padding: 20px 20rpx 40px">
<view v-html="slotProps.dataList"></view>
</view>
</template>
</common-anchor-link>
@@ -113,6 +130,7 @@ export default {
data() {
return {
currentTab: "",
dataInfo: {},
allDataList: [],
playData: {},
searchValue: "",
@@ -140,6 +158,24 @@ export default {
limitTitle: "提示",
limitContent: "",
scrollViewHeight: 0,
detailDataList: [
{
title: "购买须知",
valueName: "buyRecord",
},
{
title: "使用须知",
valueName: "useRecord",
},
{
title: "学习次序",
valueName: "studyRecord",
},
{
title: "超v",
valueName: "vipRecord",
},
],
};
},
// 监听页面滚动
@@ -406,32 +442,14 @@ export default {
};
});
} else {
this.allDataList = [
{
title: "购买须知",
valueName: "buyRecord",
url: "/pages/curriculum/cate/index",
content: res.result.buyRecord,
},
{
title: "使用须知",
valueName: "useRecord",
url: "/pages/curriculum/cate/index",
content: res.result.useRecord,
},
{
title: "学习次序",
valueName: "studyRecord",
url: "/pages/curriculum/cate/index",
content: res.result.studyRecord,
},
{
title: "超v",
valueName: "vipRecord",
url: "/pages/curriculum/cate/index",
content: res.result.vipRecord,
},
];
that.dataInfo = { ...res.result };
that.allDataList = that.detailDataList.map((e) => {
return {
...e,
content: res.result[e.valueName],
slotName: e.valueName,
};
});
console.log("this.allDataList at line 405:", this.allDataList);
}

View File

@@ -4,16 +4,16 @@
<public-module></public-module>
<z-nav-bar
:title="options.navTitle"
class="common-nav"
bgColor=""
fontColor="#333"
bgColor="#5F8F7F"
fontColor="#fff"
></z-nav-bar>
<view
class="contentBox commonPageContentBox"
:style="`height: calc(100% - ${
(50 + statusBarHeight) * 2
}rpx) !important;`"
:style="`height: calc(100vh - ${
(50 + statusBarHeight)
}px) !important;`"
>
<common-list
:isNoIcon="true"

View File

@@ -1823,6 +1823,7 @@ export default {
}
/deep/.section {
padding-top: 0 !important;
background: linear-gradient(108deg, #f0fbf4 0%, #d1e8da 100%) !important;
}
/deep/.section_box {

View File

@@ -12,8 +12,9 @@
</u-sticky> -->
<common-anchor-link
:defaultShowTabs="true"
v-if="currentCateIndex == 1"
baseHeight="60"
baseHeight="80"
ref="commonAnchorLink"
:allDataList="allDataList"
:allTabList="allTabList"
@@ -25,6 +26,7 @@
}"
>
<template slot="tabs" slot-scope="slotProps">
<common-sticky
label="title"
itemStyle="width:33%;padding-left: 15px; padding-right: 15px; height: 68rpx;"
@@ -32,23 +34,27 @@
:currentCateIndex="currentCateIndex"
@handleselectCate="handleselectCate"
></common-sticky>
<u-alert
:style="{ display: slotProps.showTabs ? 'none' : 'block' }"
style="width: 100%; z-index: 10"
type="warning"
:title="`尊贵的${
vip.type == 1 ? '超级' : vip.type == 2 ? '吴门医述' : '众妙之门'
}VIP会员,您的有效期到 ${
vip.endTime ? vip.endTime.split(' ')[0] : ''
}`"
:show-icon="true"
v-if="vip.type != 0 && currentCateIndex != 2"
>
</u-alert>
</template>
<template slot="otherContent" slot-scope="slotProps">
<view style="padding-top: 80px" v-if="!$store.state.loadingShow">
<u-alert
style="width: 100%; z-index: 10"
type="warning"
:title="`尊贵的${
vip.type == 1 ? '超级' : vip.type == 2 ? '吴门医述' : '众妙之门'
}VIP会员,您的有效期到 ${
vip.endTime ? vip.endTime.split(' ')[0] : ''
}`"
:show-icon="true"
v-if="vip.type != 0 && currentCateIndex != 2"
>
</u-alert
></view>
</template>
<template slot="label" slot-scope="slotProps">
<view class="content_title PM_font">{{ slotProps.title }}</view>
<view class="content_title">{{ slotProps.title }}</view>
</template>
<template slot="contentList" slot-scope="slotProps">
@@ -928,4 +934,7 @@ export default {
text-align: center;
font-size: 30px;
}
/deep/.section:nth-child(1) {
padding-top: 0 !important;
}
</style>