锚链接
This commit is contained in:
585
pages/component/commonComponents/anchorLink copy.vue
Normal file
585
pages/component/commonComponents/anchorLink copy.vue
Normal file
@@ -0,0 +1,585 @@
|
||||
<template>
|
||||
<view class="wrapper" :style="`width:100%;top: ${45 + statusBarHeight}px !important;`">
|
||||
|
||||
<view
|
||||
class="tabs"
|
||||
id="tabs"
|
||||
:style="{
|
||||
top: `${45 + statusBarHeight}px !important`,
|
||||
}"
|
||||
>
|
||||
<slot name="tabs" :showTabs="showTabs"></slot>
|
||||
|
||||
<u-tabs
|
||||
:style="{ display: showTabs ? 'block' : 'none', ...tabStyle }"
|
||||
keyName="title"
|
||||
:current="currentTab"
|
||||
:list="tabList"
|
||||
@click="clickItem"
|
||||
lineColor="#00BB84"
|
||||
lineWidth="46rpx"
|
||||
lineHeight="10"
|
||||
class="tabsStyle"
|
||||
:inactiveStyle="{
|
||||
color: '#666666',
|
||||
fontSize: '30rpx',
|
||||
fontWeight: 400,
|
||||
}"
|
||||
:activeStyle="{
|
||||
color: '#333333',
|
||||
fontSize: '30rpx',
|
||||
fontWeight: 'bold',
|
||||
}"
|
||||
>
|
||||
<template slot="labelSlot" slot-scope="slotProps">
|
||||
<!-- <text>{{ slotProps.data.title }}</text> -->
|
||||
<slot name="labelSlot" :data="slotProps.data"></slot>
|
||||
</template>
|
||||
</u-tabs>
|
||||
</view>
|
||||
<slot name="otherContent" :showTabs="showTabs"></slot>
|
||||
<view class="section_box" :style="`padding-top:${45 + statusBarHeight}px;`">
|
||||
<view class="section" v-for="(v, i) in allDataList">
|
||||
<view class="section">
|
||||
<view
|
||||
:id="v[titleKey]"
|
||||
style="padding: 20rpx"
|
||||
:class="`${currentTab == i ? 'hot section_top' : 'section_top'}`"
|
||||
>
|
||||
<slot name="label" :title="v[titleKey]" :data="v"></slot>
|
||||
<!-- <view class="title" :style="{...titleStyle}">{{ v[titleKey] }}</view> -->
|
||||
</view>
|
||||
<view class="content section_content_progress">
|
||||
<view class="content_list">
|
||||
|
||||
<slot
|
||||
name="contentList"
|
||||
:showTabs="showTabs"
|
||||
:dataList="v[dataListKey]"
|
||||
:data="v"
|
||||
></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
props: [
|
||||
"allDataList",
|
||||
"dataListKey",
|
||||
"tabStyle",
|
||||
"titleKey",
|
||||
"titleStyle",
|
||||
"baseHeight",
|
||||
"allTabList",
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
indexList: [],
|
||||
itemArr: [],
|
||||
distanceList: [],
|
||||
tabList: [],
|
||||
timer: null,
|
||||
isLeftClick: false,
|
||||
isOpenRightButton: true,
|
||||
viewid: "cont0",
|
||||
viewidIndex: 0,
|
||||
|
||||
openCollapseList: [],
|
||||
cateIconList: [],
|
||||
fdButtonStyle: {
|
||||
width: "120rpx",
|
||||
"border-color": "$themeColor",
|
||||
color: "$themeColor",
|
||||
float: "right",
|
||||
"margin-right": "20rpx",
|
||||
"margin-left": "30rpx",
|
||||
},
|
||||
modalInfo: {},
|
||||
vip: {},
|
||||
show: false,
|
||||
|
||||
options: {},
|
||||
showTabs: false, // 默认吸顶的tab不显示
|
||||
currentTab: -1, // 由于初始化的uview的代码有bug，所以默认是-1，在第一次显示的时候，设置0，自动复位，防止错误
|
||||
|
||||
distanceArr: [], // 每一个ID对应的scrollTop值
|
||||
|
||||
isTabChange: false, // 防止在点击tab的时候，页面的滚动导致重复计算、抖动问题
|
||||
};
|
||||
},
|
||||
// 监听页面滚动
|
||||
watch: {
|
||||
currentTab: {
|
||||
immediate: true,
|
||||
handler(newRoute) {
|
||||
// console.log(this.currentTab,'8777777777777');
|
||||
// this.$emit('currentTab',this.currentTab)
|
||||
},
|
||||
},
|
||||
},
|
||||
async onLoad(options) {
|
||||
this.options = options;
|
||||
|
||||
await this.handleselectCate({ ...this.cateList[0], index: 0 }, 0);
|
||||
},
|
||||
async onShow() {},
|
||||
methods: {
|
||||
pageScroll(event) {
|
||||
// console.log("event at line 213:", event);
|
||||
const _this = this;
|
||||
if (this.isTabChange) {
|
||||
return;
|
||||
}
|
||||
const { scrollTop } = event;
|
||||
const skewY =
|
||||
Number(this.baseHeight) + 45 + +Number(this.statusBarHeight); // 偏移量，由于吸顶的tab、头部的显示信息也有高度，素以做了偏移量
|
||||
// console.log('skewY at line 130:',this.baseHeight,this.statusBarHeight, skewY)
|
||||
if (scrollTop >= skewY) {
|
||||
if (!this.showTabs && this.currentTab <= 0) {
|
||||
// 在未显示tab并且 currentTab <= 0时，防止uview ui抖动bug，设置默认复位值
|
||||
this.currentTab = 0;
|
||||
}
|
||||
this.showTabs = true;
|
||||
// console.log('this.showTabs at line 141:', this.showTabs)
|
||||
this.$forceUpdate();
|
||||
this.$nextTick(() => {
|
||||
const length = this.distanceArr.length;
|
||||
const index = this.distanceArr.findIndex(
|
||||
(el) => el - skewY - scrollTop > 0
|
||||
);
|
||||
// 当index == -1 的时候，实际当前滚动的距离超出了最大值，也就是在最后一个tab显示的内容
|
||||
// 当index > 0 的时候，说明能在当前的scrollTop值找到，即index的前一位
|
||||
this.currentTab = index > 0 ? index - 1 : length - 1;
|
||||
});
|
||||
} else {
|
||||
this.showTabs = false;
|
||||
}
|
||||
},
|
||||
|
||||
backClick() {
|
||||
if (this.options.backType == "order") {
|
||||
uni.switchTab({
|
||||
url: "/pages/homePage/index/index",
|
||||
});
|
||||
} else {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 获取所有元素在当前页面所处的位置信息
|
||||
getDistanceArr() {
|
||||
if (this.allTabList && allTabList.length > 0) {
|
||||
} else {
|
||||
this.tabList = [];
|
||||
console.log("this.allDataList.map at line 1734:", this.allDataList);
|
||||
this.allDataList.forEach((e) => {
|
||||
this.tabList.push({
|
||||
title: e.title,
|
||||
...e
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
console.log("this.tabList at line 173:", this.tabList);
|
||||
const _this = this;
|
||||
this.$nextTick(() => {
|
||||
_this.allDataList.map((el) => {
|
||||
console.log("el at line 7851:", el);
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.select("#" + el.title)
|
||||
.boundingClientRect((data) => {
|
||||
console.log("data at line 785:", data);
|
||||
// 获取当前ID距离顶部的top值
|
||||
_this.distanceArr.push(data.top.toFixed(0));
|
||||
console.log(
|
||||
"_this.distanceArr.push at line 176:",
|
||||
_this.distanceArr
|
||||
);
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
});
|
||||
},
|
||||
clickItem(item, index) {
|
||||
this.isTabChange = true;
|
||||
const _this = this;
|
||||
// this.$nextTick 保证当前isTabChange 为true后执行代码
|
||||
// 避免在istabChange变为true的时候，执行代码，监听事件还是会继续执行重新计算currenTab值
|
||||
this.$nextTick(() => {
|
||||
_this.currentTab = item.index;
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.select("#" + item.title)
|
||||
.boundingClientRect((data) => {
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.select(".wrapper")
|
||||
.boundingClientRect((res) => {
|
||||
const scrollTop = data.top - res.top; // 获取差值
|
||||
const skewY = 200; // 偏移
|
||||
// 页面开始进行滚动到目标位置
|
||||
uni.pageScrollTo({
|
||||
scrollTop:
|
||||
scrollTop > 0 ? scrollTop - skewY : scrollTop + skewY,
|
||||
duration: 300,
|
||||
complete: function () {
|
||||
const timer = setTimeout(() => {
|
||||
_this.isTabChange = false; // 关闭
|
||||
clearTimeout(timer);
|
||||
}, 500); // 解决ios和安卓、鸿蒙系统兼容性问题
|
||||
},
|
||||
});
|
||||
})
|
||||
.exec();
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.wrapper {
|
||||
background: white;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-left: 30rpx;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: -30rpx;
|
||||
width: 14rpx;
|
||||
height: 77%;
|
||||
top: 10%;
|
||||
border-radius: 14rpx;
|
||||
background: #00bb84;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20rpx;
|
||||
|
||||
.dots {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 33rpx;
|
||||
width: 26rpx;
|
||||
align-items: center;
|
||||
padding: 10rpx 20rpx;
|
||||
margin-right: 4rpx;
|
||||
|
||||
.dot {
|
||||
width: 9rpx;
|
||||
height: 9rpx;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.more_menu {
|
||||
position: absolute;
|
||||
top: 70rpx;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
background: white;
|
||||
padding: 0 20rpx;
|
||||
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4rpx;
|
||||
|
||||
.more_menu_item {
|
||||
font-size: 30rpx;
|
||||
padding: 24rpx 180rpx 24rpx 16rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.more_menu_item:not(:last-child) {
|
||||
border-bottom: 1rpx solid #dddddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
background: #f8f8f9;
|
||||
border-radius: 30rpx;
|
||||
padding: 32rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
&_top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
&_name {
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
&_ismySelf {
|
||||
background: #eeeeee;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
margin-left: 12rpx;
|
||||
padding: 6rpx 18rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&_Info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
&_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
&_label {
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: 300;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
&_value {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&_item:not(:last-child) {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 1rpx;
|
||||
height: 70rpx;
|
||||
top: 20rpx;
|
||||
right: 0;
|
||||
background: #d8d8d8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_Info:not(:last-child) {
|
||||
border-bottom: 1rpx solid #d8d8d8;
|
||||
}
|
||||
|
||||
&_remark {
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
font-size: 24rpx;
|
||||
padding-top: 20rpx;
|
||||
text-align: justify;
|
||||
min-height: 40rpx;
|
||||
}
|
||||
|
||||
&_list {
|
||||
&_item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #d8d8d8;
|
||||
|
||||
&_label {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #00bb84;
|
||||
white-space: nowrap;
|
||||
width: 180rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&_value {
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
flex: 1;
|
||||
margin-left: 40rpx;
|
||||
align-self: center;
|
||||
word-break: break-all;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
&_empty {
|
||||
height: 180rpx;
|
||||
background: #f8f8f9;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&_tip {
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-top: 20rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 64rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&_emptyResult {
|
||||
height: 240rpx;
|
||||
|
||||
image {
|
||||
width: 166rpx;
|
||||
height: 166rpx;
|
||||
}
|
||||
|
||||
&_tip {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.reset {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&_reportList {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 20rpx;
|
||||
|
||||
&_pack {
|
||||
width: 100%;
|
||||
height: calc(25vw - 30rpx);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
&_addImage {
|
||||
width: 100%;
|
||||
height: calc(25vw - 30rpx);
|
||||
background: #f8f8f9;
|
||||
border-radius: 20rpx;
|
||||
// border: 2rpx dashed #bbbbbb;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&_icon {
|
||||
width: 60rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
&_tip {
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
line-height: 30rpx;
|
||||
color: #999999;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section_content_progress {
|
||||
background: initial;
|
||||
padding: 0 15rpx;
|
||||
}
|
||||
|
||||
.content_result {
|
||||
background: initial;
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
word-wrap: break-word;
|
||||
word-break: normal;
|
||||
line-height: 60rpx;
|
||||
letter-spacing: 2rpx;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.content_report {
|
||||
background: initial;
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section:not(:first-child) {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.hot {
|
||||
color: #00bb84 !important;
|
||||
}
|
||||
</style>
|
||||
664
pages/component/commonComponents/anchorLink.vue
Normal file
664
pages/component/commonComponents/anchorLink.vue
Normal file
@@ -0,0 +1,664 @@
|
||||
<template>
|
||||
<view
|
||||
class="wrapper"
|
||||
:style="`width:100%;top: ${45 + statusBarHeight}px !important;`"
|
||||
>
|
||||
<view
|
||||
class="tabs"
|
||||
id="tabs"
|
||||
:style="{
|
||||
top: `${45 + statusBarHeight}px !important`,
|
||||
}"
|
||||
>
|
||||
<slot name="tabs" :showTabs="showTabs"></slot>
|
||||
|
||||
<u-tabs
|
||||
:style="{ display: showTabs ? 'block' : 'none', ...tabStyle }"
|
||||
keyName="title"
|
||||
:current="currentTab"
|
||||
:list="tabList"
|
||||
@click="clickItem"
|
||||
lineColor="#00BB84"
|
||||
lineWidth="46rpx"
|
||||
lineHeight="10"
|
||||
class="tabsStyle"
|
||||
:inactiveStyle="{
|
||||
color: '#666666',
|
||||
fontSize: '30rpx',
|
||||
fontWeight: 400,
|
||||
}"
|
||||
:activeStyle="{
|
||||
color: '#333333',
|
||||
fontSize: '30rpx',
|
||||
fontWeight: 'bold',
|
||||
}"
|
||||
>
|
||||
<template slot="labelSlot" slot-scope="slotProps">
|
||||
<!-- <text>{{ slotProps.data.title }}</text> -->
|
||||
<slot name="labelSlot" :data="slotProps.data"></slot>
|
||||
</template>
|
||||
</u-tabs>
|
||||
</view>
|
||||
|
||||
<slot name="otherContent" :showTabs="showTabs"></slot>
|
||||
<view class="section_box" :style="`padding-top:${45 + statusBarHeight}px;`">
|
||||
<view
|
||||
class="section"
|
||||
v-for="(v, i) in allDataList"
|
||||
:style="`${i == 0 ? `padding-top:${Number(baseHeight)}px;` : ''}`"
|
||||
>
|
||||
<view class="section">
|
||||
<view
|
||||
:id="v[titleKey]"
|
||||
style="padding: 20rpx"
|
||||
:class="`${currentTab == i ? 'hot section_top' : 'section_top'}`"
|
||||
>
|
||||
<slot name="label" :title="v[titleKey]" :data="v"></slot>
|
||||
<!-- <view class="title" :style="{...titleStyle}">{{ v[titleKey] }}</view> -->
|
||||
</view>
|
||||
<view class="content section_content_progress">
|
||||
<view class="content_list">
|
||||
<slot
|
||||
name="contentList"
|
||||
:showTabs="showTabs"
|
||||
:dataList="v[dataListKey]"
|
||||
:data="v"
|
||||
></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
props: [
|
||||
"allDataList",
|
||||
"dataListKey",
|
||||
"tabStyle",
|
||||
"titleKey",
|
||||
"titleStyle",
|
||||
"baseHeight",
|
||||
"allTabList",
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
indexList: [],
|
||||
itemArr: [],
|
||||
distanceList: [],
|
||||
tabList: [],
|
||||
timer: null,
|
||||
isLeftClick: false,
|
||||
isOpenRightButton: true,
|
||||
viewid: "cont0",
|
||||
viewidIndex: 0,
|
||||
|
||||
openCollapseList: [],
|
||||
cateIconList: [],
|
||||
fdButtonStyle: {
|
||||
width: "120rpx",
|
||||
"border-color": "$themeColor",
|
||||
color: "$themeColor",
|
||||
float: "right",
|
||||
"margin-right": "20rpx",
|
||||
"margin-left": "30rpx",
|
||||
},
|
||||
modalInfo: {},
|
||||
vip: {},
|
||||
show: false,
|
||||
|
||||
options: {},
|
||||
showTabs: false, // 默认吸顶的tab不显示
|
||||
currentTab: -1, // 由于初始化的uview的代码有bug，所以默认是-1，在第一次显示的时候，设置0，自动复位，防止错误
|
||||
|
||||
distanceArr: [], // 每一个ID对应的scrollTop值
|
||||
|
||||
isTabChange: false, // 防止在点击tab的时候，页面的滚动导致重复计算、抖动问题
|
||||
};
|
||||
},
|
||||
// 监听页面滚动
|
||||
watch: {
|
||||
currentTab: {
|
||||
immediate: true,
|
||||
handler(newRoute) {
|
||||
// console.log(this.currentTab,'8777777777777');
|
||||
// this.$emit('currentTab',this.currentTab)
|
||||
},
|
||||
},
|
||||
},
|
||||
async onLoad(options) {
|
||||
this.options = options;
|
||||
|
||||
await this.handleselectCate({ ...this.cateList[0], index: 0 }, 0);
|
||||
},
|
||||
async onShow() {},
|
||||
methods: {
|
||||
pageScroll(event) {
|
||||
// console.log("event at line 213:", event);
|
||||
// const _this = this;
|
||||
if (this.isTabChange) {
|
||||
return;
|
||||
}
|
||||
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)
|
||||
if (scrollTop >= skewY) {
|
||||
if (!this.showTabs && this.currentTab <= 0) {
|
||||
// 在未显示tab并且 currentTab <= 0时，防止uview ui抖动bug，设置默认复位值
|
||||
this.currentTab = 0;
|
||||
}
|
||||
this.showTabs = true;
|
||||
// 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.$forceUpdate();
|
||||
} else {
|
||||
this.showTabs = false;
|
||||
this.currentTab = 0;
|
||||
}
|
||||
},
|
||||
|
||||
backClick() {
|
||||
if (this.options.backType == "order") {
|
||||
uni.switchTab({
|
||||
url: "/pages/homePage/index/index",
|
||||
});
|
||||
} else {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 获取所有元素在当前页面所处的位置信息
|
||||
getDistanceArr() {
|
||||
this.distanceArr = [];
|
||||
if (this.allTabList && this.allTabList.length > 0) {
|
||||
console.log("子组件获取tabList", this.allTabList);
|
||||
|
||||
this.tabList = [...this.allTabList];
|
||||
} else {
|
||||
this.tabList = [];
|
||||
console.log("this.allDataList.map at line 1734:", this.allDataList);
|
||||
this.allDataList.forEach((e) => {
|
||||
this.tabList.push({
|
||||
title: e.title,
|
||||
...e,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
console.log("this.tabList at line 173:", this.tabList);
|
||||
const _this = this;
|
||||
this.$nextTick(() => {
|
||||
_this.tabList.forEach((el) => {
|
||||
console.log("el at line 7851:", el);
|
||||
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.select(".wrapper")
|
||||
.boundingClientRect((data) => {
|
||||
//目标位置的节点：类class或者id
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
.select("#" + el.title)
|
||||
.boundingClientRect((res) => {
|
||||
console.log("res at line 219:", res);
|
||||
el.scrollTop =
|
||||
//最外层盒子的节点：类class或者id
|
||||
_this.distanceArr.push({
|
||||
title: el.title,
|
||||
top: Number(res.top.toFixed(0)),
|
||||
});
|
||||
})
|
||||
.exec();
|
||||
})
|
||||
.exec();
|
||||
console.log(
|
||||
"_989898989this.distanceArr.push at line 210:",
|
||||
_this.distanceArr
|
||||
);
|
||||
this.currentTab = 0;
|
||||
// uni
|
||||
// .createSelectorQuery()
|
||||
// .select("#" + el.title)
|
||||
// .boundingClientRect((data) => {
|
||||
// console.log("data at line 785:", data);
|
||||
// // 获取当前ID距离顶部的top值
|
||||
// _this.distanceArr.push(data.top.toFixed(0));
|
||||
// console.log(
|
||||
// "_this.distanceArr.push at line 176:",
|
||||
// _this.distanceArr
|
||||
// );
|
||||
// })
|
||||
// .exec();
|
||||
});
|
||||
});
|
||||
},
|
||||
clickItem(item, index) {
|
||||
var that = this;
|
||||
// uni
|
||||
// .createSelectorQuery()
|
||||
// .select(".wrapper")
|
||||
// .boundingClientRect((data) => {
|
||||
// //目标位置的节点：类class或者id
|
||||
// uni
|
||||
// .createSelectorQuery()
|
||||
// .select("#" + item.title)
|
||||
// .boundingClientRect((res) => {
|
||||
// console.log("res at line 219:", res);
|
||||
// //最外层盒子的节点：类class或者id
|
||||
|
||||
// })
|
||||
// .exec();
|
||||
// })
|
||||
// .exec();
|
||||
const skewY =
|
||||
Number(this.baseHeight) + 45 + +Number(this.statusBarHeight);
|
||||
this.isTabChange = true;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.currentTab = item.index;
|
||||
var data = this.distanceArr.find((e) => e.title == item.title);
|
||||
console.log(
|
||||
"111111111111111111111111111111111111111at line 258:",
|
||||
data
|
||||
);
|
||||
uni.pageScrollTo({
|
||||
// duration: 100, //过渡时间
|
||||
scrollTop: data.top - skewY, //到达距离顶部的top值
|
||||
duration: 100,
|
||||
complete: function () {
|
||||
const timer = setTimeout(() => {
|
||||
that.isTabChange = false; // 关闭
|
||||
clearTimeout(timer);
|
||||
}, 500); // 解决ios和安卓、鸿蒙系统兼容性问题
|
||||
},
|
||||
//scrollTop:data.top - res.top,//如果置顶
|
||||
});
|
||||
});
|
||||
// const _this = this;
|
||||
// // this.$nextTick 保证当前isTabChange 为true后执行代码
|
||||
// // 避免在istabChange变为true的时候，执行代码，监听事件还是会继续执行重新计算currenTab值
|
||||
// this.$nextTick(() => {
|
||||
// _this.currentTab = item.index;
|
||||
// uni
|
||||
// .createSelectorQuery()
|
||||
// .select("#" + item.title)
|
||||
// .boundingClientRect((data) => {
|
||||
// uni
|
||||
// .createSelectorQuery()
|
||||
// .select(".wrapper")
|
||||
// .boundingClientRect((res) => {
|
||||
// const scrollTop = data.top - res.top; // 获取差值
|
||||
// const skewY = 200; // 偏移
|
||||
// // 页面开始进行滚动到目标位置
|
||||
// uni.pageScrollTo({
|
||||
// scrollTop:
|
||||
// scrollTop > 0 ? scrollTop - skewY : scrollTop + skewY,
|
||||
// duration: 300,
|
||||
// complete: function () {
|
||||
// const timer = setTimeout(() => {
|
||||
// _this.isTabChange = false; // 关闭
|
||||
// clearTimeout(timer);
|
||||
// }, 500); // 解决ios和安卓、鸿蒙系统兼容性问题
|
||||
// },
|
||||
// });
|
||||
// })
|
||||
// .exec();
|
||||
// })
|
||||
// .exec();
|
||||
// });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.wrapper {
|
||||
background: white;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-left: 30rpx;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: -30rpx;
|
||||
width: 14rpx;
|
||||
height: 77%;
|
||||
top: 10%;
|
||||
border-radius: 14rpx;
|
||||
background: #00bb84;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20rpx;
|
||||
|
||||
.dots {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 33rpx;
|
||||
width: 26rpx;
|
||||
align-items: center;
|
||||
padding: 10rpx 20rpx;
|
||||
margin-right: 4rpx;
|
||||
|
||||
.dot {
|
||||
width: 9rpx;
|
||||
height: 9rpx;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.more_menu {
|
||||
position: absolute;
|
||||
top: 70rpx;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
background: white;
|
||||
padding: 0 20rpx;
|
||||
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4rpx;
|
||||
|
||||
.more_menu_item {
|
||||
font-size: 30rpx;
|
||||
padding: 24rpx 180rpx 24rpx 16rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.more_menu_item:not(:last-child) {
|
||||
border-bottom: 1rpx solid #dddddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
background: #f8f8f9;
|
||||
border-radius: 30rpx;
|
||||
padding: 32rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
&_top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
&_name {
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
&_ismySelf {
|
||||
background: #eeeeee;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
margin-left: 12rpx;
|
||||
padding: 6rpx 18rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&_Info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
&_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
&_label {
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: 300;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
&_value {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&_item:not(:last-child) {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 1rpx;
|
||||
height: 70rpx;
|
||||
top: 20rpx;
|
||||
right: 0;
|
||||
background: #d8d8d8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_Info:not(:last-child) {
|
||||
border-bottom: 1rpx solid #d8d8d8;
|
||||
}
|
||||
|
||||
&_remark {
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
font-size: 24rpx;
|
||||
padding-top: 20rpx;
|
||||
text-align: justify;
|
||||
min-height: 40rpx;
|
||||
}
|
||||
|
||||
&_list {
|
||||
&_item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #d8d8d8;
|
||||
|
||||
&_label {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #00bb84;
|
||||
white-space: nowrap;
|
||||
width: 180rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&_value {
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
flex: 1;
|
||||
margin-left: 40rpx;
|
||||
align-self: center;
|
||||
word-break: break-all;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
&_empty {
|
||||
height: 180rpx;
|
||||
background: #f8f8f9;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&_tip {
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-top: 20rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 64rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&_emptyResult {
|
||||
height: 240rpx;
|
||||
|
||||
image {
|
||||
width: 166rpx;
|
||||
height: 166rpx;
|
||||
}
|
||||
|
||||
&_tip {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.reset {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&_reportList {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 20rpx;
|
||||
|
||||
&_pack {
|
||||
width: 100%;
|
||||
height: calc(25vw - 30rpx);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
&_addImage {
|
||||
width: 100%;
|
||||
height: calc(25vw - 30rpx);
|
||||
background: #f8f8f9;
|
||||
border-radius: 20rpx;
|
||||
// border: 2rpx dashed #bbbbbb;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&_icon {
|
||||
width: 60rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
&_tip {
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
line-height: 30rpx;
|
||||
color: #999999;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section_content_progress {
|
||||
background: initial;
|
||||
padding: 0 15rpx;
|
||||
}
|
||||
|
||||
.content_result {
|
||||
background: initial;
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
word-wrap: break-word;
|
||||
word-break: normal;
|
||||
line-height: 60rpx;
|
||||
letter-spacing: 2rpx;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.content_report {
|
||||
background: initial;
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section:not(:first-child) {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.hot {
|
||||
color: #00bb84 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<view style="width: 100%; height: 100%">
|
||||
<view style="width: 100%; height: 100%;">
|
||||
<scroll-view
|
||||
@scrolltolower="lower"
|
||||
scroll-y="true"
|
||||
class="scroll-Y"
|
||||
v-if="dataList.length > 0"
|
||||
v-if="dataList&&dataList.length > 0"
|
||||
style="height: 100%"
|
||||
>
|
||||
<view
|
||||
@@ -50,7 +50,7 @@
|
||||
:icon="`http://cdn.uviewui.com/uview/empty/${noDataIcon}.png`"
|
||||
>
|
||||
</u-empty>
|
||||
<u-divider v-else text="暂无数据哦~"></u-divider>
|
||||
<u-divider style="width: 100%;" v-else text="暂无数据哦~"></u-divider>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -4,85 +4,95 @@
|
||||
<public-module></public-module>
|
||||
<z-nav-bar title="课程设置" bgColor="#3AB3AE" fontColor="#fff"></z-nav-bar>
|
||||
|
||||
<view :style="`height:calc(100vh - ${50 + statusBarHeight}px) !important`">
|
||||
<!-- <scroll-view class="scroll-view_H cateList" scroll-x="true" scroll-left="0"> -->
|
||||
|
||||
<view class="cateList flexbox">
|
||||
<text
|
||||
:class="[currentCateIndex == index ? 'cur' : '']"
|
||||
@click="setOneCateIndex(item, index)"
|
||||
v-for="(item, index) in cateList"
|
||||
:key="item.type"
|
||||
>{{ item.title }}</text
|
||||
<common-anchor-link
|
||||
style="width: 100%"
|
||||
ref="commonAnchorLink"
|
||||
baseHeight="80"
|
||||
:allDataList="allDataList"
|
||||
titleKey="title"
|
||||
:dataListKey="currentCateIndex == 0 ? 'courseList' : 'content'"
|
||||
:titleStyle="{
|
||||
'font-size': '30px',
|
||||
'text-align': 'center',
|
||||
}"
|
||||
:tabStyle="{
|
||||
background: '#f3faf3',
|
||||
}"
|
||||
>
|
||||
<template slot="tabs" slot-scope="slotProps">
|
||||
<common-sticky
|
||||
label="title"
|
||||
itemStyle="width:50%;padding-left: 15px; padding-right: 15px; height: 68rpx;"
|
||||
:list="cateList"
|
||||
:currentCateIndex="currentCateIndex"
|
||||
@handleselectCate="handleselectCate"
|
||||
></common-sticky>
|
||||
</template>
|
||||
<template slot="label" slot-scope="slotProps">
|
||||
<view class="content_title PM_font">{{ slotProps.title }}</view>
|
||||
</template>
|
||||
<template slot="contentList" slot-scope="slotProps">
|
||||
<common-list
|
||||
v-if="currentCateIndex == 0"
|
||||
noDataIcon="data"
|
||||
:isCondition="true"
|
||||
:isNoIcon="true"
|
||||
:dataList="slotProps.dataList"
|
||||
label="title"
|
||||
@hancleClick="gotoDetail"
|
||||
>
|
||||
</view>
|
||||
<template slot="labelSlot" slot-scope="slotProps">
|
||||
<image
|
||||
v-if="slotProps.row.image"
|
||||
:src="slotProps.row.image"
|
||||
mode="aspectFil"
|
||||
class="book_image"
|
||||
></image>
|
||||
<image
|
||||
v-else
|
||||
src="@/static/icon/videoIcon.png"
|
||||
mode="aspectFil"
|
||||
class="book_image"
|
||||
></image>
|
||||
|
||||
<view
|
||||
:class="`priceDetail commonPageWhiteBox`"
|
||||
v-if="this.cateList[this.currentCateIndex].type == 'price'"
|
||||
>
|
||||
<scroll-view scroll-y="true" class="scroll-Y">
|
||||
<price
|
||||
ref="priceDetail"
|
||||
type="price"
|
||||
:oid="this.cateList[this.currentCateIndex].oid"
|
||||
></price>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view
|
||||
:class="`priceDetail commonPageWhiteBox`"
|
||||
v-else-if="
|
||||
this.cateList[this.currentCateIndex].type == 'purchaseNotice'
|
||||
"
|
||||
>
|
||||
<scroll-view scroll-y="true" class="scroll-Y">
|
||||
<price
|
||||
ref="purchaseNotice"
|
||||
:oid="this.cateList[this.currentCateIndex].oid"
|
||||
></price>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="related_courses_name">
|
||||
<view class="" style="font-weight: bold">
|
||||
{{ slotProps.row.title }}
|
||||
</view>
|
||||
|
||||
<view
|
||||
:class="`priceDetail commonPageWhiteBox`"
|
||||
v-else-if="
|
||||
this.cateList[this.currentCateIndex].type == 'instructionsForUse'
|
||||
"
|
||||
>
|
||||
<instructionsForUse ref="instructionsForUse"></instructionsForUse>
|
||||
</view>
|
||||
<view style="margin-top: 10rpx">
|
||||
<view
|
||||
v-for="item in slotProps.row.courseCatalogueEntityList"
|
||||
style="float: left; margin-right: 20rpx"
|
||||
>
|
||||
{{
|
||||
slotProps.row.courseCatalogueEntityList.length > 1
|
||||
? item.title
|
||||
: "整部"
|
||||
}}：
|
||||
|
||||
<view :class="`dataList priceDetail`" v-else>
|
||||
<!-- <image src="@/static/image/headImg/top.png" mode="aspectFit" class="headImage"></image> -->
|
||||
|
||||
<view
|
||||
v-if="
|
||||
this.cateList[this.currentCateIndex].type == 'courseDescription'
|
||||
"
|
||||
>
|
||||
<courseDescription
|
||||
ref="courseDescription"
|
||||
:dataList="dataList"
|
||||
@hancleClick="goCourseDescription"
|
||||
label="nameCN"
|
||||
>
|
||||
</courseDescription>
|
||||
<text v-if="item.halfFee == 0 && item.fee == 0">免费</text>
|
||||
<text v-else-if="item.halfFee == 0 || item.fee == 0">
|
||||
{{ item.halfFee != 0 ? item.halfFee : "免费" }}/{{
|
||||
item.fee != 0 ? item.fee : "免费"
|
||||
}}</text
|
||||
>
|
||||
<text v-else-if="item.halfFee != 0 || item.fee != 0">
|
||||
{{ item.halfFee }}/{{ item.fee }}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</common-list>
|
||||
<view v-else style="padding: 20px 20rpx 40px">
|
||||
<rich-text
|
||||
:nodes="slotProps.dataList"
|
||||
:data-nodes="slotProps.dataList"
|
||||
></rich-text>
|
||||
</view>
|
||||
|
||||
<!-- <template v-if="currentCateIndex == 2 && curTwoCateIndex == 2">
|
||||
|
||||
|
||||
<u-grid :col="3">
|
||||
<u-grid-item class="scroll-view-item " v-for="(item, index) in dataList" :key="item.id"
|
||||
@click="previewImage(item.url)" style="align-items: flex-start;">
|
||||
|
||||
<img :src="item.url" alt="" class="wmzhimg" mode="aspectFit">
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
|
||||
</template> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</common-anchor-link>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -102,30 +112,21 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentTab: "",
|
||||
allDataList: [],
|
||||
playData: {},
|
||||
searchValue: "",
|
||||
cateList: [
|
||||
{
|
||||
title: "课程价格(半年/一年)",
|
||||
type: "price",
|
||||
oid: "8a9fb99809e4428888aad6b56a3096a6",
|
||||
apiUrl: "/sociology/course/getCoursePrice",
|
||||
},
|
||||
{
|
||||
title: "课程说明",
|
||||
type: "courseDescription",
|
||||
apiUrl: "app/phoneDoctor.do?getTaiHuToShine",
|
||||
apiUrl: "/sociology/course/getSociologyCourseRecord",
|
||||
},
|
||||
|
||||
// , {
|
||||
// title: "使用须知",
|
||||
// type: 'instructionsForUse'
|
||||
|
||||
// }, {
|
||||
// title: "购买须知",
|
||||
// type: 'purchaseNotice',
|
||||
// oid: 'd0f47071c2194e94845fbb373d06f59d',
|
||||
|
||||
// }
|
||||
], // 一级分类标题1
|
||||
twoCateList: [], // 二级分类标题
|
||||
dataList: [], // 方剂标题
|
||||
@@ -141,11 +142,14 @@ export default {
|
||||
scrollViewHeight: 0,
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
// this.getCourseDescriptionData()
|
||||
this.getPriceData();
|
||||
// this.getUserInfo()
|
||||
// this.getCateList()
|
||||
// 监听页面滚动
|
||||
onPageScroll(event) {
|
||||
// if (this.currentCateIndex == 0) {
|
||||
this.$refs.commonAnchorLink.pageScroll(event);
|
||||
// }
|
||||
},
|
||||
async onLoad() {
|
||||
await this.handleselectCate({ ...this.cateList[0], index: 0 }, 0);
|
||||
},
|
||||
onHide() {
|
||||
// this.showSearchList = false
|
||||
@@ -155,6 +159,13 @@ export default {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
methods: {
|
||||
gotoDetail(v) {
|
||||
console.log(v);
|
||||
uni.navigateTo({
|
||||
// url: '../bookShop/commodityDetail?id=' + item.id
|
||||
url: `/pages/curriculum/order/curriculum/index?navTitle=${v.title}&title=${v.title}&id=${v.id}`,
|
||||
});
|
||||
},
|
||||
goCourseDescription(v) {
|
||||
console.log(v);
|
||||
uni.navigateTo({
|
||||
@@ -162,25 +173,7 @@ export default {
|
||||
url: `/pages/courseInformation/courseDescription/index?navTitle=${v.nameCN}&title=${v.nameCN}&oid=${v.oid}`,
|
||||
});
|
||||
},
|
||||
getCourseDescriptionData() {
|
||||
console.log(this.$store.state, "11111111111");
|
||||
this.$http
|
||||
.post("app/phoneDoctor.do?getTaiHuToShine", {
|
||||
customerType: "D",
|
||||
token: uni.getStorageSync("token"),
|
||||
customerOid: uni.getStorageSync("customerOid"),
|
||||
oid: "b07e45f6a5f3491db9854b16f3fd8b19",
|
||||
|
||||
step: 0,
|
||||
limit: 100,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res.obj.dataLst, "7777777777777777777");
|
||||
this.dataList = res.obj.dataLst;
|
||||
|
||||
// socket.init();
|
||||
});
|
||||
},
|
||||
getPriceData() {
|
||||
var that = this;
|
||||
setTimeout(() => {
|
||||
@@ -385,78 +378,88 @@ export default {
|
||||
this.curTwoCateIndex = index;
|
||||
this.getTitles(dictType);
|
||||
},
|
||||
async setOneCateIndex(item, index) {
|
||||
console.log(index, 99999);
|
||||
getCourseDescriptionData() {
|
||||
this.allDataList = [];
|
||||
|
||||
var data = {};
|
||||
|
||||
var that = this;
|
||||
switch (item.type) {
|
||||
case "courseDescription":
|
||||
setTimeout(() => {
|
||||
that.$nextTick(() => {
|
||||
that.$refs.courseDescription.getData();
|
||||
|
||||
this.$http
|
||||
.request({
|
||||
url: this.cateList[this.currentCateIndex].apiUrl,
|
||||
method: "POST",
|
||||
data: data,
|
||||
header: {
|
||||
//默认 无 说明：请求头
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
|
||||
.then(async (res) => {
|
||||
console.log(res, "88888");
|
||||
if (this.currentCateIndex == 0) {
|
||||
that.allDataList = res.list.map((e) => {
|
||||
return {
|
||||
...e.sociology,
|
||||
courseList: e.courseList,
|
||||
};
|
||||
});
|
||||
}, 100);
|
||||
} 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,
|
||||
},
|
||||
];
|
||||
|
||||
break;
|
||||
case "price":
|
||||
console.log("this.allDataList at line 405:", this.allDataList);
|
||||
}
|
||||
|
||||
// if (this.currentCateIndex == 0) {
|
||||
setTimeout(() => {
|
||||
that.$nextTick(() => {
|
||||
that.$refs.priceDetail.getData();
|
||||
});
|
||||
}, 100);
|
||||
break;
|
||||
case "purchaseNotice":
|
||||
setTimeout(() => {
|
||||
that.$nextTick(() => {
|
||||
that.$refs.purchaseNotice.getData();
|
||||
});
|
||||
}, 100);
|
||||
break;
|
||||
case "instructionsForUse":
|
||||
setTimeout(() => {
|
||||
that.$nextTick(() => {
|
||||
that.$refs.instructionsForUse.getData();
|
||||
});
|
||||
}, 100);
|
||||
// that.getPriceData()
|
||||
break;
|
||||
}
|
||||
// if(this.userMes.tgdzPower == 0){
|
||||
// let that = this
|
||||
// uni.showModal({
|
||||
// content: "购买 针灸六经法要上册和下册 后方可使用此功能",
|
||||
// confirmText: '好的',
|
||||
// showCancel: false,
|
||||
// success: function(res) {
|
||||
// if (res.confirm) {
|
||||
// // console.log('用户点击确定');
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
// if(item.title == "时辰取穴"){
|
||||
// uni.navigateTo({
|
||||
// url: "../timeAcupoint/timeAcupoint"
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
let type = item.type;
|
||||
this.currentCateIndex = index;
|
||||
this.$refs.commonAnchorLink.getDistanceArr();
|
||||
}, 200);
|
||||
// }
|
||||
// this.indexList = this.allDataList.map((e) => {
|
||||
// return e.title;
|
||||
// });
|
||||
});
|
||||
},
|
||||
async handleselectCate(item, index) {
|
||||
this.allDataList = [];
|
||||
this.dataList = [];
|
||||
var data = [];
|
||||
|
||||
this.searchValue = "";
|
||||
this.searchList = [];
|
||||
this.showSearchList = false;
|
||||
// if (index != 2) {
|
||||
var that = this;
|
||||
this.$nextTick(async () => {
|
||||
this.currentCateIndex = item.index;
|
||||
|
||||
// uni.createSelectorQuery().select('.cateList').boundingClientRect(function (rect) {
|
||||
// var height = rect.height
|
||||
// console.log('元素高度：',);
|
||||
await this.getCourseDescriptionData();
|
||||
});
|
||||
console.log(this.allDataList, this.dataList, "1688");
|
||||
|
||||
// }).exec();
|
||||
|
||||
// } else {
|
||||
// this.getJFList(dictType)
|
||||
// }
|
||||
return data;
|
||||
},
|
||||
|
||||
transformData(inputData) {
|
||||
@@ -631,6 +634,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/style/common.scss";
|
||||
.u-grid-list {
|
||||
// height: 40rpx;
|
||||
}
|
||||
@@ -807,4 +811,42 @@ export default {
|
||||
.componentPage {
|
||||
height: calc(100% - 90rpx) !important;
|
||||
}
|
||||
|
||||
.book_image {
|
||||
width: 60rpx;
|
||||
height: 40rpx;
|
||||
float: left;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
/deep/.list_item {
|
||||
padding: 12rpx 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-color: #efeef4 !important;
|
||||
// .rightArrow {
|
||||
// margin-top: 10rpx !important;
|
||||
// }
|
||||
}
|
||||
.section .top .title {
|
||||
&::before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.content_title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
// .commonDetailPage{
|
||||
// background-color: $themeBgColor;
|
||||
// }
|
||||
/deep/.wrapper {
|
||||
background-color: $themeBgColor;
|
||||
.content_list {
|
||||
padding: 20rpx 0;
|
||||
background-color: rgba(255, 255, 255, 0.8) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -112,44 +112,25 @@ export default {
|
||||
title: "购买须知",
|
||||
valueName: "buyRecord",
|
||||
url: "/pages/curriculum/cate/index",
|
||||
// imgUrl: require("@/static/icon/homePage/cate_ru.png"),
|
||||
// style: {
|
||||
// width: "62rpx",
|
||||
// height: "56rpx",
|
||||
// },
|
||||
|
||||
},
|
||||
{
|
||||
title: "使用须知",
|
||||
valueName: "useRecord",
|
||||
url: "/pages/curriculum/cate/index",
|
||||
// imgUrl: require("@/static/icon/homePage/cate_shi.png"),
|
||||
|
||||
// style: {
|
||||
// width: "49rpx",
|
||||
// height: "61rpx",
|
||||
// },
|
||||
|
||||
},
|
||||
{
|
||||
title: "学习次序",
|
||||
valueName: "studyRecord",
|
||||
url: "/pages/curriculum/cate/index",
|
||||
// imgUrl: require("@/static/icon/homePage/cate_dao.png"),
|
||||
|
||||
// style: {
|
||||
// width: "59rpx",
|
||||
// height: "59rpx",
|
||||
// },
|
||||
|
||||
},
|
||||
{
|
||||
title: "超 v",
|
||||
valueName: "vipRecord",
|
||||
url: "/pages/curriculum/cate/index",
|
||||
// imgUrl: require("@/static/icon/homePage/cate_yi.png"),
|
||||
|
||||
// style: {
|
||||
// width: "61rpx",
|
||||
// height: "61rpx",
|
||||
// },
|
||||
|
||||
},
|
||||
],
|
||||
options: {},
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<view class="container commonPageBox">
|
||||
<view class="container commonPageBox" style="background-color: #fbf9f7">
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
<public-module></public-module>
|
||||
<z-nav-bar
|
||||
:title="options.navTitle"
|
||||
bgColor="#3AB3AE"
|
||||
fontColor="#fff"
|
||||
class="common-nav"
|
||||
bgColor=""
|
||||
fontColor="#333"
|
||||
></z-nav-bar>
|
||||
|
||||
<view
|
||||
@@ -53,26 +54,26 @@
|
||||
|
||||
<view class="curriculum_tag_info_box">
|
||||
<view v-for="(v, i) in slotProps.row.courseCatalogueEntityList">
|
||||
<u-tag
|
||||
<view
|
||||
@click.native.stop="gotoDetail(slotProps.row)"
|
||||
v-if="v.isBuy == 1"
|
||||
style="margin-right: 10rpx"
|
||||
:text="v.title"
|
||||
bgColor="#43A181"
|
||||
borderColor="#43A181"
|
||||
size="mini"
|
||||
type="success"
|
||||
class="curriculum_tag"
|
||||
></u-tag>
|
||||
<u-tag
|
||||
>{{ v.title }}</view
|
||||
>
|
||||
<view
|
||||
@click.native.stop="gotoDetail(slotProps.row)"
|
||||
v-else
|
||||
style="margin-right: 10rpx"
|
||||
:text="v.title"
|
||||
size="mini"
|
||||
color="#969696"
|
||||
borderColor="#969696"
|
||||
plain
|
||||
style="
|
||||
margin-right: 10rpx;
|
||||
background-color: transparent;
|
||||
color: #969696;
|
||||
border-color: #969696;
|
||||
"
|
||||
class="curriculum_tag"
|
||||
></u-tag>
|
||||
>
|
||||
{{ v.title }}</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
@@ -125,7 +126,6 @@
|
||||
</template>
|
||||
</common-list>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -140,7 +140,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
isLoadingHide: false,
|
||||
|
||||
|
||||
playData: {},
|
||||
options: {},
|
||||
searchValue: "",
|
||||
@@ -816,9 +816,16 @@ export default {
|
||||
padding: 20rpx !important;
|
||||
}
|
||||
.curriculum_tag {
|
||||
// width: 140rpx !important;
|
||||
width: auto !important;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
// height: 40rpx;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
background-color: #43a181;
|
||||
border: 1rpx solid #43a181;
|
||||
border-radius: 4rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.curriculum_tag_info_box {
|
||||
width: 100%;
|
||||
@@ -833,4 +840,7 @@ export default {
|
||||
margin-top: 0rpx;
|
||||
// justify-content: space-between;
|
||||
}
|
||||
/deep/.scroll-view-item:nth-child(2n-1) {
|
||||
background-color: rgba(255, 255, 255, 0.85) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -11,203 +11,247 @@
|
||||
fontColor="#fff"
|
||||
></z-nav-bar>
|
||||
|
||||
<view class="contentBox commonPageContentBox">
|
||||
<u-alert
|
||||
v-if="goBuyTitle"
|
||||
style="
|
||||
background: linear-gradient(90deg, #5f8f7f 0%, #f3faf3 100%);
|
||||
position: fixed;
|
||||
<common-anchor-link
|
||||
style="width: 100%"
|
||||
baseHeight="200"
|
||||
ref="commonAnchorLink"
|
||||
:allDataList="allDataList"
|
||||
|
||||
titleKey="title"
|
||||
dataListKey="courseList"
|
||||
:titleStyle="{}"
|
||||
:tabStyle="{
|
||||
background: '#fff',
|
||||
}"
|
||||
>
|
||||
<template slot="tabs" slot-scope="slotProps">
|
||||
|
||||
|
||||
</template>
|
||||
<template slot="labelSlot" slot-scope="slotProps">
|
||||
|
||||
<u-icon
|
||||
v-if="
|
||||
slotProps.data.isBuy != 1 &&
|
||||
(vip.type == 0 || vip.type == 3)
|
||||
"
|
||||
|
||||
class="editIcon"
|
||||
name="lock-fill"
|
||||
color="#aaa"
|
||||
size="26"
|
||||
style="display: inline-block; margin-left: 5rpx"
|
||||
></u-icon>
|
||||
|
||||
</template>
|
||||
|
||||
<template slot="otherContent" slot-scope="slotProps">
|
||||
<u-alert
|
||||
v-if="goBuyTitle"
|
||||
style="
|
||||
background: linear-gradient(90deg, #5f8f7f 0%, #f3faf3 100%);
|
||||
/* position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
"
|
||||
type="warning"
|
||||
@click="handleClickGetVip"
|
||||
:title="goBuyTitle"
|
||||
:show-icon="true"
|
||||
>
|
||||
<template slot="rightSlot" slot-scope="slotProps">
|
||||
<text class="saveBtn vipBtn flexbox buyBtn" v-if="goBuyType == 0">
|
||||
立即购买
|
||||
</text>
|
||||
<text class="flexbox" style="color: #5f8f7f" v-if="goBuyType == 1">
|
||||
立即续费
|
||||
</text>
|
||||
<text class="saveBtn vipBtn flexbox" v-if="goBuyType == 2">
|
||||
立即升级
|
||||
</text>
|
||||
|
||||
<view> </view>
|
||||
</template>
|
||||
</u-alert>
|
||||
|
||||
<view
|
||||
v-if="curriculumData.image"
|
||||
:style="`height: auto !important;${
|
||||
goBuyTitle
|
||||
? 'padding-top:80rpx'
|
||||
: ''
|
||||
}`"
|
||||
>
|
||||
<image
|
||||
style="width: 100%"
|
||||
:src="curriculumData.image"
|
||||
mode="widthFix"
|
||||
@click="previewImage(curriculumData.image)"
|
||||
z-index: 10; */
|
||||
"
|
||||
type="warning"
|
||||
@click="handleClickGetVip"
|
||||
:title="goBuyTitle"
|
||||
:show-icon="true"
|
||||
>
|
||||
</image>
|
||||
</view>
|
||||
<template slot="rightSlot" slot-scope="slotProps">
|
||||
<text class="saveBtn vipBtn flexbox buyBtn" v-if="goBuyType == 0">
|
||||
立即购买
|
||||
</text>
|
||||
<text class="flexbox" style="color: #5f8f7f" v-if="goBuyType == 1">
|
||||
立即续费
|
||||
</text>
|
||||
<text class="saveBtn vipBtn flexbox" v-if="goBuyType == 2">
|
||||
立即升级
|
||||
</text>
|
||||
|
||||
<!-- <image
|
||||
v-if="curriculumData.image"
|
||||
:src="curriculumData.image"
|
||||
mode="widthFix"
|
||||
class="headImage"
|
||||
></image> -->
|
||||
<view
|
||||
v-else
|
||||
class="headImage"
|
||||
style="height: 400rpx; background-color: #f5f5f5"
|
||||
>
|
||||
</view>
|
||||
<view> </view>
|
||||
</template>
|
||||
</u-alert>
|
||||
<view
|
||||
v-if="curriculumData.image"
|
||||
:style="`height: auto !important;${goBuyTitle ? '' : ''}`"
|
||||
>
|
||||
<image
|
||||
style="width: 100%"
|
||||
:src="curriculumData.image"
|
||||
mode="widthFix"
|
||||
@click="previewImage(curriculumData.image)"
|
||||
>
|
||||
</image>
|
||||
</view>
|
||||
|
||||
<view class="containerBg1" :style="`${curriculumData.content && curriculumData.content != ''?'padding:40rpx 0;':''}`">
|
||||
<view class="course_info_box">
|
||||
<view class="course_info">
|
||||
<view class="flexbox course_title" v-if="curriculumData.id">
|
||||
<text class="courseTitle title">{{ curriculumData.title }}</text>
|
||||
<view
|
||||
v-else
|
||||
class="headImage"
|
||||
style="height: 400rpx; background-color: #f5f5f5"
|
||||
>
|
||||
</view>
|
||||
|
||||
<!-- <view class="start_learn_btn PM_font">进入学习</view> -->
|
||||
</view>
|
||||
<view
|
||||
class="containerBg"
|
||||
v-if="curriculumData.content && curriculumData.content != ''"
|
||||
>
|
||||
<view class="prof">
|
||||
<view
|
||||
style=" padding: 0 20rpx;"
|
||||
@click="isHideCourseInfo = !isHideCourseInfo"
|
||||
>
|
||||
<view
|
||||
class="containerBg1"
|
||||
:style="`${
|
||||
curriculumData.content && curriculumData.content != ''
|
||||
? 'padding:10rpx 0;'
|
||||
: ''
|
||||
}`"
|
||||
>
|
||||
<view class="course_info_box">
|
||||
<view class="course_info">
|
||||
<view class="flexbox course_title" v-if="curriculumData.id">
|
||||
<text class="courseTitle title">{{
|
||||
curriculumData.title
|
||||
}}</text>
|
||||
|
||||
<!-- <view class="start_learn_btn PM_font">进入学习</view> -->
|
||||
</view>
|
||||
<view style="color: #b0b0b0;padding: 0 20rpx;">{{ cateList&&cateList.length>0?`共${cateList.length}个目录`:'' }}</view>
|
||||
<view
|
||||
class="containerBg"
|
||||
v-if="curriculumData.content && curriculumData.content != ''"
|
||||
>
|
||||
<view class="prof">
|
||||
<view
|
||||
:class="`${isHideCourseInfo ? 'hidden2' : ''}`"
|
||||
style="width: calc(100% - 50rpx)"
|
||||
v-html="curriculumData.content"
|
||||
style="padding: 0 20rpx"
|
||||
@click="isHideCourseInfo = !isHideCourseInfo"
|
||||
>
|
||||
<view
|
||||
:class="`${isHideCourseInfo ? 'hidden2' : ''}`"
|
||||
style="width: calc(100% - 50rpx)"
|
||||
v-html="curriculumData.content"
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="containerBg2">
|
||||
<view class="shiting_content">
|
||||
<view v-for="(v, i) in cateList" class="catalogueList" style="margin-top: 20rpx">
|
||||
<view class="catalogueTitle chapter_title">
|
||||
<view class="top">
|
||||
<view class="line"></view>
|
||||
<view class="left">
|
||||
<text style="font-weight: blod" class="catalogue_title">{{
|
||||
v.title
|
||||
}}</text>
|
||||
<!-- 普通用户或者国学Vip -->
|
||||
</view>
|
||||
<view
|
||||
class="not_purchased"
|
||||
v-if="
|
||||
(v.isBuy != 1 && (vip.type == 0 || vip.type == 3)) ||
|
||||
(v.isBuy == 1 &&
|
||||
(vip.type == 0 || vip.type == 3) &&
|
||||
v.endTime)
|
||||
"
|
||||
>
|
||||
<view class="spot"></view>
|
||||
<!-- -->
|
||||
<text v-if="v.isBuy != 1 && (vip.type == 0 || vip.type == 3)"
|
||||
>未购买
|
||||
</text>
|
||||
<!-- -->
|
||||
<text
|
||||
v-if="
|
||||
v.isBuy == 1 &&
|
||||
(vip.type == 0 || vip.type == 3) &&
|
||||
v.endTime
|
||||
"
|
||||
>有效期至{{ v.endTime }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="right">
|
||||
<!-- 购买 -->
|
||||
|
||||
<u-icon
|
||||
v-if="goBuyType != 1&&v.type!=0"
|
||||
@click="handleClickGetGoodsList(v)"
|
||||
class="editIcon"
|
||||
name="shopping-cart-fill"
|
||||
color="#FF2B57"
|
||||
size="30"
|
||||
style="display: inline-block; margin-left: 10rpx"
|
||||
></u-icon
|
||||
>
|
||||
|
||||
<text v-if="goBuyType != 1&&v.type==0&&!v.endTime" style="color: #fff; font-size: 12px;" class="fdButtonBox aui-text-success" @click="handleClickGetGoodsList(v)">开始学习</text>
|
||||
</template>
|
||||
<template slot="label" slot-scope="slotProps">
|
||||
<view class="containerBg2" style="padding-top: 20rpx">
|
||||
<view class="catalogueTitle chapter_title">
|
||||
<view class="top">
|
||||
<view class="line"></view>
|
||||
<view class="left">
|
||||
<text style="font-weight: blod" class="catalogue_title">{{
|
||||
slotProps.data.title
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- -->
|
||||
</view>
|
||||
|
||||
|
||||
<view class="chapter_content" v-if="courseList[i]">
|
||||
|
||||
<courseDescription
|
||||
:isCondition="true"
|
||||
:dataList="courseList[i]"
|
||||
@hancleClick="gotoDetail"
|
||||
label="title"
|
||||
<view
|
||||
class="not_purchased"
|
||||
v-if="
|
||||
(slotProps.data.isBuy != 1 &&
|
||||
(vip.type == 0 || vip.type == 3)) ||
|
||||
(slotProps.data.isBuy == 1 &&
|
||||
(vip.type == 0 || vip.type == 3) &&
|
||||
slotProps.data.endTime)
|
||||
"
|
||||
>
|
||||
<template slot="labelSlot" slot-scope="slotProps">
|
||||
<view
|
||||
:style="`${
|
||||
slotProps.rowIndex < 3
|
||||
? 'width:calc(100% - 100rpx);float:left;'
|
||||
: 'width:100%;'
|
||||
}`"
|
||||
>
|
||||
<text
|
||||
:class="`${
|
||||
slotProps.row.viewFlg == 1 ? 'aui-text-success' : ''
|
||||
<view class="spot"></view>
|
||||
|
||||
<text
|
||||
v-if="
|
||||
slotProps.data.isBuy != 1 &&
|
||||
(vip.type == 0 || vip.type == 3)
|
||||
"
|
||||
>未购买
|
||||
</text>
|
||||
|
||||
<text
|
||||
v-if="
|
||||
slotProps.data.isBuy == 1 &&
|
||||
(vip.type == 0 || vip.type == 3) &&
|
||||
slotProps.data.endTime
|
||||
"
|
||||
>有效期至{{ slotProps.data.endTime }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="right">
|
||||
<u-icon
|
||||
v-if="goBuyType != 1 && slotProps.data.type != 0"
|
||||
@click="handleClickGetGoodsList(slotProps.data)"
|
||||
class="editIcon"
|
||||
name="shopping-cart-fill"
|
||||
color="#FF2B57"
|
||||
size="30"
|
||||
style="display: inline-block; margin-left: 10rpx"
|
||||
></u-icon>
|
||||
|
||||
<text
|
||||
v-if="
|
||||
goBuyType != 1 &&
|
||||
slotProps.data.type == 0 &&
|
||||
!slotProps.data.endTime
|
||||
"
|
||||
style="color: #fff; font-size: 12px"
|
||||
class="fdButtonBox aui-text-success"
|
||||
@click="handleClickGetGoodsList(slotProps.data)"
|
||||
>开始学习</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template slot="contentList" slot-scope="slotProps">
|
||||
<view class="containerBg2">
|
||||
<view class="shiting_content">
|
||||
<view class="catalogueList">
|
||||
<view class="chapter_content">
|
||||
<courseDescription
|
||||
:isCondition="true"
|
||||
:dataList="slotProps.dataList"
|
||||
@hancleClick="gotoDetail"
|
||||
label="title"
|
||||
>
|
||||
<template slot="labelSlot" slot-scope="slotProps">
|
||||
<view
|
||||
:style="`${
|
||||
slotProps.rowIndex < 3
|
||||
? 'width:calc(100% - 100rpx);float:left;'
|
||||
: 'width:100%;'
|
||||
}`"
|
||||
>{{ slotProps.row.title }}</text
|
||||
>
|
||||
</view>
|
||||
<text
|
||||
:class="`${
|
||||
slotProps.row.viewFlg == 1 ? 'aui-text-success' : ''
|
||||
}`"
|
||||
>{{ slotProps.row.title }}</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
|
||||
</template>
|
||||
<!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
|
||||
</template>
|
||||
|
||||
<template slot="leftSlot" slot-scope="slotProps">
|
||||
<!-- {{ slotProps.row.bxType }} -->
|
||||
<!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
|
||||
</template>
|
||||
<template slot="rightSlot" slot-scope="slotProps">
|
||||
<!-- {{ slotProps.row.bxType }} -->
|
||||
<template slot="leftSlot" slot-scope="slotProps">
|
||||
<!-- {{ slotProps.row.bxType }} -->
|
||||
<!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
|
||||
</template>
|
||||
<template slot="rightSlot" slot-scope="slotProps">
|
||||
<!-- {{ slotProps.row.bxType }} -->
|
||||
|
||||
<text
|
||||
class="fdButtonBox aui-text-success" style="background: none;"
|
||||
v-if="slotProps.row.isAudition == 1 && vip.type == '0'"
|
||||
>试听</text
|
||||
>
|
||||
<text
|
||||
class="fdButtonBox aui-text-success"
|
||||
style="background: none"
|
||||
v-if="slotProps.row.isAudition == 1 && vip.type == '0'"
|
||||
>试听</text
|
||||
>
|
||||
|
||||
<view> </view>
|
||||
</template>
|
||||
</courseDescription>
|
||||
|
||||
|
||||
</view>
|
||||
<view class="small_class_teaching_box">
|
||||
<!-- <view class="small_class_teaching_top">
|
||||
<view> </view>
|
||||
</template>
|
||||
</courseDescription>
|
||||
</view>
|
||||
<view class="small_class_teaching_box">
|
||||
<!-- <view class="small_class_teaching_top">
|
||||
<view class="small_class_teaching_top_left">
|
||||
<image src="@/static/icon/course_ic.png" mode="aspectFil" class="icon1"></image>
|
||||
<text>小班教学</text>
|
||||
@@ -216,8 +260,8 @@
|
||||
|
||||
|
||||
</view> -->
|
||||
<view class="small_class_teaching_content">
|
||||
<!-- <view class="top">
|
||||
<view class="small_class_teaching_content">
|
||||
<!-- <view class="top">
|
||||
<view class="top_item" v-for="(v, i) in teachingList">
|
||||
{{ v.title }}
|
||||
|
||||
@@ -227,89 +271,43 @@
|
||||
|
||||
</view> -->
|
||||
|
||||
<view class="schedule">
|
||||
<view class="icon_box">
|
||||
<image
|
||||
src="@/static/icon/course_07.png"
|
||||
mode="aspectFil"
|
||||
class="icon1"
|
||||
>学习进度</image
|
||||
>
|
||||
</view>
|
||||
<view class="progress_box">
|
||||
<view class="progress_icon" style=""
|
||||
><u-line-progress
|
||||
activeColor="#3AB3AE"
|
||||
height="14"
|
||||
:percentage="v.completion"
|
||||
:showText="false"
|
||||
></u-line-progress>
|
||||
<text
|
||||
|
||||
style="
|
||||
font-size: 28rpx;
|
||||
margin-left: 20rpx;
|
||||
margin-top: -2rpx;
|
||||
font-weight: 700;
|
||||
"
|
||||
>
|
||||
{{ v.completion }} %</text
|
||||
>
|
||||
<view class="schedule">
|
||||
<view class="icon_box">
|
||||
<image
|
||||
src="@/static/icon/course_07.png"
|
||||
mode="aspectFil"
|
||||
class="icon1"
|
||||
>学习进度</image
|
||||
>
|
||||
</view>
|
||||
<view class="progress_box">
|
||||
<view class="progress_icon" style=""
|
||||
><u-line-progress
|
||||
activeColor="#3AB3AE"
|
||||
height="14"
|
||||
:percentage="slotProps.data.completion"
|
||||
:showText="false"
|
||||
></u-line-progress>
|
||||
<text
|
||||
style="
|
||||
font-size: 28rpx;
|
||||
margin-left: 20rpx;
|
||||
margin-top: -2rpx;
|
||||
font-weight: 700;
|
||||
"
|
||||
>
|
||||
{{ slotProps.data.completion }} %</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view
|
||||
></view>
|
||||
</view>
|
||||
|
||||
|
||||
<view
|
||||
class="small_class_teaching_box related_courses_box"
|
||||
v-if="relatedCoursesList.length > 0"
|
||||
>
|
||||
<view class="small_class_teaching_top">
|
||||
<view class="small_class_teaching_top_left">
|
||||
<image
|
||||
src="@/static/icon/course_ic.png"
|
||||
mode="aspectFil"
|
||||
class="icon1"
|
||||
></image>
|
||||
<text>相关课程</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="small_class_teaching_content">
|
||||
<common-curriculum-list
|
||||
imgUrl="url"
|
||||
:isCondition="true"
|
||||
:dataList="relatedCoursesList"
|
||||
@hancleClick="goCourseDescription"
|
||||
label="title"
|
||||
</view></view
|
||||
>
|
||||
<template slot="labelSlot" slot-scope="slotProps">
|
||||
<view class="related_courses_name hidden1">{{
|
||||
slotProps.row.title
|
||||
}}</view>
|
||||
|
||||
<!-- <text v-if="slotProps.row.conditions!='03'">【试听】</text> -->
|
||||
</template>
|
||||
|
||||
<template slot="rightSlot" slot-scope="slotProps">
|
||||
<!-- {{ slotProps.row.bxType }} -->
|
||||
|
||||
<text class="aui-text-danger">
|
||||
￥{{ slotProps.row.courseFee }}</text
|
||||
>
|
||||
|
||||
<view> </view>
|
||||
</template>
|
||||
</common-curriculum-list>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</common-anchor-link>
|
||||
|
||||
<!-- <u-modal
|
||||
:show="show"
|
||||
@@ -332,7 +330,6 @@
|
||||
"
|
||||
></common-select-goods>
|
||||
|
||||
<z-navigation></z-navigation>
|
||||
<u-popup :show="protocolShow" mode="center" round="6">
|
||||
<view class="popup_box">
|
||||
<view class="title">温馨提示</view>
|
||||
@@ -384,6 +381,10 @@ export default {
|
||||
courseDescription, //课程说明
|
||||
price, //课程价格
|
||||
},
|
||||
// 监听页面滚动
|
||||
onPageScroll(event) {
|
||||
this.$refs.commonAnchorLink.pageScroll(event);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isHideCourseInfo: true,
|
||||
@@ -515,7 +516,11 @@ export default {
|
||||
onShow() {
|
||||
this.protocolShow = false;
|
||||
this.getUserInfo();
|
||||
this.getCourseDescriptionData();
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getCourseDescriptionData();
|
||||
});
|
||||
|
||||
// 也可以通过主题形式调用，如：
|
||||
// this.$refs.uNotify.primary('Primary主题')
|
||||
// 关闭 notify
|
||||
@@ -535,6 +540,35 @@ export default {
|
||||
} else {
|
||||
this.vip = { type: 0 };
|
||||
}
|
||||
|
||||
switch (this.vip.type) {
|
||||
case 0:
|
||||
this.goBuyTitle = "购买VIP,即可免费观看吴门医述所有课程";
|
||||
this.goBuyType = 0;
|
||||
break;
|
||||
case 1 || 2:
|
||||
var vipName = "";
|
||||
if (this.vip.type == 1) {
|
||||
vipName = "超级VIP";
|
||||
}
|
||||
if (this.vip.type == 2) {
|
||||
vipName = "吴门医述VIP";
|
||||
}
|
||||
//超级VIP
|
||||
this.goBuyTitle = `尊贵的${vipName},您的有效期到 ${
|
||||
this.vip.endTime && this.vip.endTime.split(" ")[0]
|
||||
}`;
|
||||
this.goBuyType = 1;
|
||||
break;
|
||||
|
||||
case 3:
|
||||
//众妙之门
|
||||
this.goBuyTitle =
|
||||
"尊贵的众妙之门VIP,升级至超级VIP,即可免费观看吴门医述所有课程";
|
||||
|
||||
this.goBuyType = 2;
|
||||
break;
|
||||
}
|
||||
});
|
||||
},
|
||||
close() {
|
||||
@@ -579,8 +613,8 @@ export default {
|
||||
this.selectGoodsData = {};
|
||||
},
|
||||
//获取相关关联课程商品
|
||||
//获取相关关联课程商品
|
||||
handleClickGetGoodsList(v) {
|
||||
//获取相关关联课程商品
|
||||
handleClickGetGoodsList(v) {
|
||||
// console.log("data at line 313:", data);
|
||||
|
||||
if (v.type == 0) {
|
||||
@@ -796,29 +830,28 @@ export default {
|
||||
.then(async (res) => {
|
||||
that.curriculumData = res.data.course;
|
||||
that.cateList = [...res.data.catalogues];
|
||||
|
||||
console.log("that.allDataList at line 1068:", that.allDataList);
|
||||
// this..getPercentage();
|
||||
|
||||
for (let i = 0; i < that.cateList.length; i++) {
|
||||
var list = await that.getChapterList(that.cateList[i]);
|
||||
|
||||
console.log("list at line 1224:", list);
|
||||
// list.map(async (item, index) => {
|
||||
// console.log("item at line 1239:", item);
|
||||
// item.videoList = [];
|
||||
// var data = await that.getPath(item);
|
||||
// item.videoList = [...data];
|
||||
// });
|
||||
|
||||
console.log("list at line 1222:", list);
|
||||
that.courseList[i] = [...list];
|
||||
|
||||
console.log("that.courseList at line 1238:", that.courseList);
|
||||
that.allDataList[i] = {
|
||||
...that.cateList[i],
|
||||
courseList: [...list],
|
||||
};
|
||||
// that.allDataList[i].courseList = [];
|
||||
}
|
||||
|
||||
that.relatedCoursesList = res.data.correlatedList
|
||||
? res.data.correlatedList
|
||||
: [];
|
||||
await that.handleselectCate(this.cateList[0], 0);
|
||||
setTimeout(() => {
|
||||
that.$refs.commonAnchorLink.getDistanceArr();
|
||||
}, 200);
|
||||
console.log("that.courseList at line 1238:", that.allDataList);
|
||||
this.$forceUpdate(); // that.relatedCoursesList = res.data.correlatedList
|
||||
// ? res.data.correlatedList
|
||||
// : [];
|
||||
// await that.handleselectCate(this.cateList[0], 0);
|
||||
// socket.init();
|
||||
});
|
||||
},
|
||||
@@ -1297,7 +1330,7 @@ export default {
|
||||
// font-family: MicrosoftYaHei;
|
||||
|
||||
.icon_box {
|
||||
width:auto;
|
||||
width: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0rpx;
|
||||
@@ -1550,7 +1583,7 @@ export default {
|
||||
// margin-bottom:10rpx;
|
||||
// padding:20rpx;
|
||||
.course_info {
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
// box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
background: rgb(243, 250, 243);
|
||||
// border-radius:20rpx;
|
||||
overflow: hidden;
|
||||
@@ -1577,7 +1610,7 @@ export default {
|
||||
.chapter_content {
|
||||
// padding: 20rpx;
|
||||
// padding-top:60rpx;
|
||||
margin-top: 40rpx;
|
||||
// margin-top: 40rpx;
|
||||
border: 4rpx solid #fffffc;
|
||||
// background-image: linear-gradient(52deg, #E8F6FF 0%, #E3F2FE 50%);
|
||||
// background-image: linear-gradient(-180deg, #8BBDFE 0%, #B4DCFF 100%);
|
||||
@@ -1617,9 +1650,10 @@ export default {
|
||||
}
|
||||
|
||||
.containerBg2 {
|
||||
width: 100%;
|
||||
// padding-top: 40rpx;
|
||||
// margin-top: 100rpx;
|
||||
|
||||
|
||||
.shiting {
|
||||
line-height: 100rpx;
|
||||
background: linear-gradient(130deg, #4fa1fd 0%, #12f3ff 100%);
|
||||
@@ -1639,7 +1673,7 @@ export default {
|
||||
text-align: center;
|
||||
}
|
||||
.shiting_content {
|
||||
padding: 20rpx 0 0;
|
||||
// padding: 20rpx 0 0;
|
||||
}
|
||||
}
|
||||
.chapter_title {
|
||||
@@ -1760,6 +1794,7 @@ export default {
|
||||
.containerBg1 {
|
||||
border-top: 1px solid #fff;
|
||||
margin-top: -4rpx;
|
||||
// background: rgb(243, 250, 243);
|
||||
// position: relative;
|
||||
z-index: 1;
|
||||
// padding: 40rpx 0;
|
||||
@@ -1777,14 +1812,20 @@ export default {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.catalogueList{
|
||||
background: linear-gradient(108deg, #e4f8eb 0%, #d1e8da 100%) !important;
|
||||
padding: 20rpx;
|
||||
padding-bottom: 0;
|
||||
|
||||
.catalogueList {
|
||||
// background: linear-gradient(108deg, #F0FBF4 0%, #d1e8da 100%) !important;
|
||||
padding-bottom: 40rpx;
|
||||
// padding-top: 0;
|
||||
}
|
||||
|
||||
.catalogueList:nth-child(1){
|
||||
.catalogueList:nth-child(1) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
/deep/.section {
|
||||
background: linear-gradient(108deg, #f0fbf4 0%, #d1e8da 100%) !important;
|
||||
}
|
||||
/deep/.section_box {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
1555
pages/curriculum/order/index/index copy.vue
Normal file
1555
pages/curriculum/order/index/index copy.vue
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<view>
|
||||
<view style="width: 100%;">
|
||||
<common-list
|
||||
style="width: 100%;"
|
||||
:isNoIcon="true"
|
||||
imgUrl="image"
|
||||
:isCondition="true"
|
||||
|
||||
567
pages/curriculum/order/index/mao.vue
Normal file
567
pages/curriculum/order/index/mao.vue
Normal file
@@ -0,0 +1,567 @@
|
||||
<template>
|
||||
<view class="wrapper">
|
||||
<view class="header">
|
||||
</view>
|
||||
<view class="tabs" id="tabs" :style="{'display': showTabs ? 'block': 'none'}">
|
||||
<u-tabs
|
||||
:current="currentTab"
|
||||
:list="tabs"
|
||||
@click="clickItem"
|
||||
lineColor="#00BB84"
|
||||
lineWidth="46rpx"
|
||||
lineHeight="10"
|
||||
class="tabsStyle"
|
||||
:inactiveStyle="{
|
||||
color: '#666666',
|
||||
fontSize: '30rpx',
|
||||
fontWeight: 400
|
||||
}"
|
||||
:activeStyle="{
|
||||
color: '#333333',
|
||||
fontSize: '30rpx',
|
||||
fontWeight: 'bold'
|
||||
}"
|
||||
></u-tabs>
|
||||
</view>
|
||||
<view class="section">
|
||||
<view class="section">
|
||||
<view class="top" id="baseInfo">
|
||||
<view class="title">基本信息</view>
|
||||
</view>
|
||||
<view class="content content_progress">
|
||||
<view class="content_list">
|
||||
<view class="content_list_item" v-for="(item, index) of list" :key="index">
|
||||
<view class="content_list_item_label">
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="section">
|
||||
<view class="section">
|
||||
<view class="top" id="company">
|
||||
<view class="title">公司信息</view>
|
||||
</view>
|
||||
<view class="content content_progress">
|
||||
<view class="content_list">
|
||||
<view class="content_list_item" v-for="(item, index) of 20" :key="index">
|
||||
<view class="content_list_item_label">
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="section">
|
||||
<view class="section">
|
||||
<view class="top" id="money">
|
||||
<view class="title">财务信息</view>
|
||||
</view>
|
||||
<view class="content content_progress">
|
||||
<view class="content_list">
|
||||
<view class="content_list_item" v-for="(item, index) of 20" :key="index">
|
||||
<view class="content_list_item_label">
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="section">
|
||||
<view class="section">
|
||||
<view class="top" id="process">
|
||||
<view class="title">运营状况</view>
|
||||
</view>
|
||||
<view class="content content_progress">
|
||||
<view class="content_list">
|
||||
<view class="content_list_item" v-for="(item, index) of 20" :key="index">
|
||||
<view class="content_list_item_label">
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="section">
|
||||
<view class="section">
|
||||
<view class="top" id="layer">
|
||||
<view class="title">法务部门1</view>
|
||||
</view>
|
||||
<view class="content content_progress">
|
||||
<view class="content_list">
|
||||
<view class="content_list_item" v-for="(item, index) of 2" :key="index">
|
||||
<view class="content_list_item_label">
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="section">
|
||||
<view class="section">
|
||||
<view class="top" id="people">
|
||||
<view class="title">人事部门2</view>
|
||||
</view>
|
||||
<view class="content content_progress">
|
||||
<view class="content_list">
|
||||
<view class="content_list_item" v-for="(item, index) of 2" :key="index">
|
||||
<view class="content_list_item_label">
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showTabs: false, // 默认吸顶的tab不显示
|
||||
currentTab: -1, // 由于初始化的uview的代码有bug，所以默认是-1，在第一次显示的时候，设置0，自动复位，防止错误
|
||||
list: [
|
||||
{
|
||||
label: '年龄',
|
||||
value: '19'
|
||||
},
|
||||
{
|
||||
label: '性别',
|
||||
value: '男'
|
||||
}
|
||||
],
|
||||
distanceArr: [], // 每一个ID对应的scrollTop值
|
||||
tabs: [
|
||||
{
|
||||
id: '#baseInfo',
|
||||
name: '基本信息',
|
||||
},
|
||||
{
|
||||
id: '#company',
|
||||
name: '公司信息',
|
||||
},
|
||||
{
|
||||
id: '#money',
|
||||
name: '财务信息',
|
||||
},
|
||||
{
|
||||
id: '#process',
|
||||
name: '运营状况',
|
||||
},
|
||||
{
|
||||
id: '#layer',
|
||||
name: '法务部门',
|
||||
},
|
||||
{
|
||||
id: '#people',
|
||||
name: '人事部门',
|
||||
}
|
||||
],
|
||||
isTabChange: false, // 防止在点击tab的时候，页面的滚动导致重复计算、抖动问题
|
||||
};
|
||||
},
|
||||
// 监听页面滚动
|
||||
onPageScroll (event) {
|
||||
const _this = this
|
||||
if (this.isTabChange) {
|
||||
return
|
||||
}
|
||||
const { scrollTop } = event;
|
||||
const skewY = 55 // 偏移量，由于吸顶的tab、头部的显示信息也有高度，素以做了偏移量
|
||||
if (scrollTop >= skewY) {
|
||||
if (!this.showTabs && this.currentTab <= 0) { // 在未显示tab并且 currentTab <= 0时，防止uview ui抖动bug，设置默认复位值
|
||||
this.currentTab = 0
|
||||
}
|
||||
this.showTabs = true
|
||||
this.$nextTick(() => {
|
||||
const length = this.distanceArr.length
|
||||
const index = this.distanceArr.findIndex(el => el - skewY - scrollTop > 0)
|
||||
// 当index == -1 的时候，实际当前滚动的距离超出了最大值，也就是在最后一个tab显示的内容
|
||||
// 当index > 0 的时候，说明能在当前的scrollTop值找到，即index的前一位
|
||||
this.currentTab = index > 0 ? index - 1 : length - 1
|
||||
})
|
||||
} else {
|
||||
this.showTabs = false
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getDistanceArr()
|
||||
},
|
||||
methods: {
|
||||
// 获取所有元素在当前页面所处的位置信息
|
||||
getDistanceArr () {
|
||||
const _this = this
|
||||
_this.tabs.map(el => {
|
||||
uni.createSelectorQuery().select(el.id).boundingClientRect(data => {
|
||||
// 获取当前ID距离顶部的top值
|
||||
_this.distanceArr.push(data.top)
|
||||
}).exec()
|
||||
})
|
||||
},
|
||||
clickItem(item, index) {
|
||||
this.isTabChange = true
|
||||
const _this = this
|
||||
// this.$nextTick 保证当前isTabChange 为true后执行代码
|
||||
// 避免在istabChange变为true的时候，执行代码，监听事件还是会继续执行重新计算currenTab值
|
||||
this.$nextTick(() => {
|
||||
_this.currentTab = item.index
|
||||
uni.createSelectorQuery().select(item.id).boundingClientRect(data => {
|
||||
uni.createSelectorQuery().select('.wrapper').boundingClientRect(res => {
|
||||
const scrollTop = data.top - res.top // 获取差值
|
||||
const skewY = 50 // 偏移
|
||||
// 页面开始进行滚动到目标位置
|
||||
uni.pageScrollTo({
|
||||
scrollTop: scrollTop > 0 ? scrollTop - skewY : scrollTop + skewY,
|
||||
duration: 300,
|
||||
complete: function () {
|
||||
const timer = setTimeout(() => {
|
||||
_this.isTabChange = false // 关闭
|
||||
clearTimeout(timer)
|
||||
}, 500) // 解决ios和安卓、鸿蒙系统兼容性问题
|
||||
}
|
||||
});
|
||||
}).exec()
|
||||
}).exec()
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.wrapper{
|
||||
background: white;
|
||||
min-height: 60vh;
|
||||
.header{
|
||||
height: 100rpx;
|
||||
background: orange;
|
||||
.bg{
|
||||
width: 100vw;
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
.tabs{
|
||||
position: sticky;
|
||||
z-index: 970;
|
||||
top: 200px;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.section {
|
||||
width: 100%;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
.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;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-left: 30rpx;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: -30rpx;
|
||||
width: 14rpx;
|
||||
height: 77%;
|
||||
top: 10%;
|
||||
border-radius: 14rpx;
|
||||
background: #00bb84;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20rpx;
|
||||
|
||||
.dots {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 33rpx;
|
||||
width: 26rpx;
|
||||
align-items: center;
|
||||
padding: 10rpx 20rpx;
|
||||
margin-right: 4rpx;
|
||||
|
||||
.dot {
|
||||
width: 9rpx;
|
||||
height: 9rpx;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.more_menu {
|
||||
position: absolute;
|
||||
top: 70rpx;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
background: white;
|
||||
padding: 0 20rpx;
|
||||
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4rpx;
|
||||
|
||||
.more_menu_item {
|
||||
font-size: 30rpx;
|
||||
padding: 24rpx 180rpx 24rpx 16rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.more_menu_item:not(:last-child) {
|
||||
border-bottom: 1rpx solid #dddddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
background: #f8f8f9;
|
||||
border-radius: 30rpx;
|
||||
padding: 32rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
&_top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
&_name {
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
&_ismySelf {
|
||||
background: #eeeeee;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
margin-left: 12rpx;
|
||||
padding: 6rpx 18rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&_Info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
&_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
&_label {
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: 300;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
&_value {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&_item:not(:last-child) {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 1rpx;
|
||||
height: 70rpx;
|
||||
top: 20rpx;
|
||||
right: 0;
|
||||
background: #d8d8d8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_Info:not(:last-child) {
|
||||
border-bottom: 1rpx solid #d8d8d8;
|
||||
}
|
||||
|
||||
&_remark {
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
font-size: 24rpx;
|
||||
padding-top: 20rpx;
|
||||
text-align: justify;
|
||||
min-height: 40rpx;
|
||||
}
|
||||
|
||||
&_list {
|
||||
&_item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #d8d8d8;
|
||||
|
||||
&_label {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #00bb84;
|
||||
white-space: nowrap;
|
||||
width: 180rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&_value {
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
flex: 1;
|
||||
margin-left: 40rpx;
|
||||
align-self: center;
|
||||
word-break: break-all;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
&_empty {
|
||||
height: 180rpx;
|
||||
background: #f8f8f9;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&_tip {
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-top: 20rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 64rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&_emptyResult {
|
||||
height: 240rpx;
|
||||
|
||||
image {
|
||||
width: 166rpx;
|
||||
height: 166rpx;
|
||||
}
|
||||
|
||||
&_tip {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.reset {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&_reportList {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 20rpx;
|
||||
|
||||
&_pack {
|
||||
width: 100%;
|
||||
height: calc(25vw - 30rpx);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
&_addImage {
|
||||
width: 100%;
|
||||
height: calc(25vw - 30rpx);
|
||||
background: #f8f8f9;
|
||||
border-radius: 20rpx;
|
||||
// border: 2rpx dashed #bbbbbb;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&_icon {
|
||||
width: 60rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
&_tip {
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
line-height: 30rpx;
|
||||
color: #999999;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_progress {
|
||||
background: initial;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.content_result {
|
||||
background: initial;
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
word-wrap: break-word;
|
||||
word-break: normal;
|
||||
line-height: 60rpx;
|
||||
letter-spacing: 2rpx;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.content_report {
|
||||
background: initial;
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section:not(:first-child) {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -112,7 +112,7 @@
|
||||
>
|
||||
<image class="book_image" :src="v.productImages" mode="aspectFit">
|
||||
</image>
|
||||
<view class="book_name">{{ v.productName }}</view>
|
||||
<view class="book_name" style="padding-bottom: 20rpx;">{{ v.productName }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
@@ -126,6 +126,7 @@
|
||||
>
|
||||
|
||||
<view class="flash_sale_content greenCardBoxContent">
|
||||
|
||||
<scroll-view scroll-x="true" class="scroll-X" style="">
|
||||
<!-- studyList -->
|
||||
<common-curriculum-list
|
||||
@@ -152,7 +153,7 @@
|
||||
</view> -->
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="learning_box_bottom"></view>
|
||||
|
||||
</view>
|
||||
<view class="greenCardBox1 learning_box listening_box">
|
||||
<view class="learning_box_top"
|
||||
@@ -180,7 +181,7 @@
|
||||
</common-curriculum-list>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="learning_box_bottom"></view>
|
||||
|
||||
</view>
|
||||
<!-- <view class="learning_box listening_box bottomBox">
|
||||
<view class="item_img" @click="handleGoApp">
|
||||
@@ -633,13 +634,13 @@ function calcTimer(timer) {
|
||||
width: 100%;
|
||||
height: 350rpx;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("@/static/icon/homePage/header_bg.png");
|
||||
|
||||
background-repeat: no-repeat;
|
||||
.logo {
|
||||
width: 146rpx;
|
||||
height: 183rpx;
|
||||
@@ -825,14 +826,12 @@ function calcTimer(timer) {
|
||||
}
|
||||
.learning_box_top {
|
||||
width: 100%;
|
||||
height: 40rpx;
|
||||
margin: 40rpx 0;
|
||||
// height: 40rpx;
|
||||
// margin: 40rpx 0;
|
||||
margin-bottom: 0;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
|
||||
background-size: 100% 100%;
|
||||
padding-left: 60rpx;
|
||||
background-image: url("@/static/icon/borderTopBg.png");
|
||||
|
||||
}
|
||||
.learning_box_bottom {
|
||||
width: 100%;
|
||||
@@ -840,11 +839,7 @@ function calcTimer(timer) {
|
||||
|
||||
height: 40rpx;
|
||||
margin: 40rpx 0;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
background-size: 100% 100%;
|
||||
padding-left: 60rpx;
|
||||
background-image: url("@/static/icon/borderBottomBg.png");
|
||||
|
||||
}
|
||||
.greenCardBox1 {
|
||||
margin-top: 80rpx;
|
||||
@@ -852,36 +847,41 @@ function calcTimer(timer) {
|
||||
|
||||
.greenCardBoxTop {
|
||||
width: 100%;
|
||||
background: linear-gradient(
|
||||
130deg,
|
||||
rgb(46, 103, 106) 0%,
|
||||
rgb(114, 173, 146) 100%
|
||||
)
|
||||
text;
|
||||
margin-bottom: 30rpx;
|
||||
// background: linear-gradient(
|
||||
// 130deg,
|
||||
// rgb(46, 103, 106) 0%,
|
||||
// rgb(114, 173, 146) 100%
|
||||
// )
|
||||
// text;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
padding-left: -20rpx;
|
||||
// line-height: 60rpx;
|
||||
|
||||
display: flex;
|
||||
margin-bottom: 60rpx;
|
||||
// margin-bottom: 60rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// background-color: $themeColor;
|
||||
|
||||
padding: 0 22rpx;
|
||||
padding: 0 22rpx 0; padding-left: 40rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 36rpx;
|
||||
font-size: 44rpx;
|
||||
.titlebg {
|
||||
width: 300rpx;
|
||||
height: 90rpx;
|
||||
width: 400rpx;
|
||||
height: 120rpx;
|
||||
line-height: 120rpx;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("@/static/icon/homeTitleBg.png");
|
||||
background-repeat: no-repeat;
|
||||
font-size: 44rpx;
|
||||
margin-left: -60rpx;
|
||||
// height: 90rpx;
|
||||
text-align: left;
|
||||
padding-left: 54rpx;
|
||||
margin-top: -16rpx;
|
||||
margin-left: -50rpx;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 140rpx;
|
||||
color: #fff;
|
||||
// homeTitleBg.png
|
||||
|
||||
background-size: 100% 100%;
|
||||
// padding-left: 60rpx;
|
||||
background-image: url("@/static/icon/homeTitle1.png");
|
||||
|
||||
}
|
||||
|
||||
.userBox {
|
||||
@@ -897,7 +897,7 @@ function calcTimer(timer) {
|
||||
|
||||
.name {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 600;
|
||||
font-weight: bold;
|
||||
font-size: 21rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
@@ -905,25 +905,31 @@ function calcTimer(timer) {
|
||||
}
|
||||
|
||||
.greenCardBoxContent {
|
||||
border: 10rpx solid;
|
||||
border-radius: 50rpx;
|
||||
border-image: linear-gradient(to right, #cdb17a, #ebdbcc) 0.5;
|
||||
clip-path: inset(0px round 10rpx);
|
||||
animation: huerotate 6s infinite linear;
|
||||
filter: hue-rotate(360deg);
|
||||
border: 2rpx solid #5599A7;
|
||||
padding: 100rpx 20rpx 20rpx;
|
||||
margin-top: -96rpx;
|
||||
// border: 10rpx solid;
|
||||
|
||||
border-radius: 20rpx;
|
||||
background-image: linear-gradient(0deg, #65b5c561 0%, #fdfcdf3d 75%, );
|
||||
|
||||
|
||||
// clip-path: inset(0px round 10rpx);
|
||||
// animation: huerotate 6s infinite linear;
|
||||
// filter: hue-rotate(360deg);
|
||||
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
padding: 24rpx 19rpx 5rpx;
|
||||
// padding: 24rpx 19rpx 5rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 60rpx;
|
||||
// margin-top: 60rpx;
|
||||
|
||||
.content_item {
|
||||
display: inline-block;
|
||||
width: 317rpx;
|
||||
|
||||
width: 300rpx;
|
||||
background-color: #fff !important;
|
||||
margin-right: 26rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -969,6 +975,8 @@ function calcTimer(timer) {
|
||||
|
||||
.learning_box {
|
||||
// height: 298rpx;
|
||||
// border-radius: 40rpx;
|
||||
// background-image: linear-gradient(90deg, #3ab3ae 0%, #d5ecdd 200%);
|
||||
|
||||
.learning_user_box {
|
||||
display: flex;
|
||||
@@ -1077,4 +1085,7 @@ function calcTimer(timer) {
|
||||
}
|
||||
}
|
||||
}
|
||||
.related_courses_name {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,11 +2,12 @@
|
||||
<view class="container">
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
<public-module></public-module>
|
||||
<z-nav-bar :title="prescriptDetail.title" bgColor="#3AB3AE" fontColor="#fff"></z-nav-bar>
|
||||
<view
|
||||
class="contentBox"
|
||||
v-if="prescriptDetail.type == 0"
|
||||
>
|
||||
<z-nav-bar
|
||||
:title="prescriptDetail.title"
|
||||
bgColor="#3AB3AE"
|
||||
fontColor="#fff"
|
||||
></z-nav-bar>
|
||||
<view class="contentBox" v-if="prescriptDetail.type == 0">
|
||||
<view class="content">
|
||||
<!-- <uni-section class="mb-10" titleFontSize="18px" title="标题" type="line"> -->
|
||||
<view class="item title-center">
|
||||
@@ -21,6 +22,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="fullscreen-webview" v-else>
|
||||
<!-- <z-nav-bar :title="prescriptDetail.title" bgColor="#3AB3AE" fontColor="#fff"></z-nav-bar> -->
|
||||
<web-view :src="prescriptDetail.url"> </web-view>
|
||||
</view>
|
||||
<music-play :playData="playData"></music-play>
|
||||
@@ -174,4 +176,4 @@ export default {
|
||||
/deep/ .uni-section-header__decoration.line {
|
||||
background-color: #18bc37;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user