zm/sociology_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

锚链接

Browse Source
This commit is contained in:
始于初见
2024-07-01 13:49:42 +08:00
parent f1212a42d7
commit a174c3e4d5
172 changed files with 11881 additions and 8893 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1047
pages/curriculum/order/curriculum/index copy.vue
View File

File diff suppressed because it is too large Load Diff

617
pages/curriculum/order/curriculum/index.vue
View File

@@ -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
View File

File diff suppressed because it is too large Load Diff

1602
pages/curriculum/order/index/index.vue
View File

File diff suppressed because it is too large Load Diff

3
pages/curriculum/order/index/list.vue
View File

@@ -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
View 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>