提交
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -1823,6 +1823,7 @@ export default {
|
||||
}
|
||||
|
||||
/deep/.section {
|
||||
padding-top: 0 !important;
|
||||
background: linear-gradient(108deg, #f0fbf4 0%, #d1e8da 100%) !important;
|
||||
}
|
||||
/deep/.section_box {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user