|
|
@@ -2,105 +2,152 @@
|
|
|
<view class="page_body">
|
|
|
<!-- 头部 -->
|
|
|
<nav-bar height="96" title="任务详情" :onlyTitle="true" :showHeaderborder="true" @GoBack="GoBack"></nav-bar>
|
|
|
- <view class="page_content padding_btm">
|
|
|
- <view class="task_title">{{state?.details?.courseName}}</view>
|
|
|
- <view class="task_class_collect">
|
|
|
- <view class="task_class_name">
|
|
|
- <text class="class_item">{{state?.details?.courseType===0?'必修任务':'自主研修'}}</text>
|
|
|
- <text class="class_item"
|
|
|
- v-if="state?.details?.teachCourseTypeName">{{state?.details?.teachCourseTypeName}}</text>
|
|
|
- <text class="class_item"
|
|
|
- v-if="state?.details?.teachCourseTypeClassName">{{state?.details?.teachCourseTypeClassName}}</text>
|
|
|
- <text class="class_item" v-if="state?.details?.createdBy">{{state?.details?.createdBy}}</text>
|
|
|
- </view>
|
|
|
- <view class="task_collect">
|
|
|
- <view class="preview">
|
|
|
- <image class="img" src="@/static/image/icon/preview.png"></image>
|
|
|
- <text class="text">{{state?.details?.watchCount || 0}}</text>
|
|
|
- </view>
|
|
|
- <view class="collect">
|
|
|
- <image class="img" src="@/static/image/icon/collect.png"></image>
|
|
|
- <text class="text">{{state?.details?.followCount || 0}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="task_time">
|
|
|
- <view class="time_day">
|
|
|
- <text class="time_item">{{state?.details?.courseStartDatetime?.split(' ')?.[0]}}</text>
|
|
|
- <template v-if="state?.details?.courseType===0">
|
|
|
- <text class="time_item">至</text>
|
|
|
- <text class="time_item">{{state?.details?.courseEndDatetime?.split(' ')?.[0]}}</text>
|
|
|
- </template>
|
|
|
- <text class="time_item"
|
|
|
- v-if="state?.details?.courseType===0 && state?.details?.courseStatus!=2">剩余{{state?.details?.remainingTime}}</text>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- v-if="state?.details?.courseType===0 || (state?.details?.courseStatus===0 || state?.details?.courseStatus===2)"
|
|
|
- :class="['task_status', {'going':state?.details?.courseStatus===0,'finished':state?.details?.courseStatus===2}]">
|
|
|
- {{state?.details?.courseStatus===0 ? '进行中' : '已结束'}}</view>
|
|
|
- </view>
|
|
|
- <view :class="['task_desc',{'over':!state.isExpand}]">
|
|
|
- 课程简介:{{state?.details?.courseContent}}
|
|
|
- </view>
|
|
|
- <view class="task_desc_all">
|
|
|
- 课程简介:{{state?.details?.courseContent}}
|
|
|
- </view>
|
|
|
- <view class="expand_btn" v-if="state.showExpandBtn" @click="toggleExpand"><text class="expand_text">{{!state.isExpand?'展开':'收起'}}</text><uni-icons
|
|
|
- class="expand_icon" :type="!state.isExpand?'down':'up'"></uni-icons></view>
|
|
|
- </view>
|
|
|
- <view class="row_gap"></view>
|
|
|
<!-- 吸顶 -->
|
|
|
<uv-sticky style="top:98rpx">
|
|
|
- <!-- 搜索框 -->
|
|
|
- <uni-easyinput class="search_box" v-model="state.searchWord" trim="all" :styles="state.searchInputStyles"
|
|
|
- :placeholderStyle="state.searchInputPlaceholderStyle" placeholder="请输入关键字搜索" @input="HandleSearchInput">
|
|
|
- <template #left>
|
|
|
- <image src="/static/image/overview/search.png" class="search_icon"></image>
|
|
|
- </template>
|
|
|
- </uni-easyinput>
|
|
|
- <scroll-view class="scroll_tabs" scroll-x="true" scroll-left="0" :show-scrollbar="false">
|
|
|
- <view :class="['tab_item',{'selected':item.value==state.tabsSelected}]" v-for="item in state.tabList"
|
|
|
- :key="item.value" @click="SelectTabsValue(item.value)">
|
|
|
- {{item.label}}
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </uv-sticky>
|
|
|
- <view class="page_content">
|
|
|
- <view class="total">
|
|
|
- <template v-if="state?.details?.courseType===0">
|
|
|
- <template v-if="state.tabsSelected==''">共 {{state?.details?.learnCount || 0}} 人</template>
|
|
|
- <template v-else-if="state.tabsSelected=='3'">共 {{state?.details?.learnUnOverCount || 0}}
|
|
|
- 人</template>
|
|
|
- <template v-else>共 {{state?.details?.learnFinishCount || 0}} 人</template>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <template v-if="state.tabsSelected=='4'">共 {{state?.details?.learnFinishCount || 0}} 人</template>
|
|
|
- <template v-else>共 {{state?.details?.learnUnOverCount || 0}} 人</template>
|
|
|
- </template>
|
|
|
+ <view class="search_tabs" v-if="state.isSticky">
|
|
|
+ <!-- 搜索框 -->
|
|
|
+ <uni-easyinput class="search_box" v-model="state.searchWord" trim="all" :styles="state.searchInputStyles"
|
|
|
+ :placeholderStyle="state.searchInputPlaceholderStyle" placeholder="请输入关键字搜索" @input="HandleSearchInput">
|
|
|
+ <template #left>
|
|
|
+ <image src="/static/image/overview/search.png" class="search_icon"></image>
|
|
|
+ </template>
|
|
|
+ </uni-easyinput>
|
|
|
+ <scroll-view class="scroll_tabs" scroll-x="true" scroll-left="0" :show-scrollbar="false">
|
|
|
+ <view :class="['tab_item',{'selected':item.value==state.tabsSelected}]" v-for="item in state.tabList"
|
|
|
+ :key="item.value" @click="SelectTabsValue(item.value)">
|
|
|
+ {{item.label}}
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
|
- <view class="list_item" v-for="item in state.tabListData" :Key="item.teacherId">
|
|
|
- <view class="created_progress_status">
|
|
|
- <text class="created_by">{{item.teacherName}}</text>
|
|
|
- <view class="item_progress">
|
|
|
- <view class="progress_bar">
|
|
|
- <view class="bar_width" :style="{'width': `${item.progress.replace(/%/g, '')}%`}"></view>
|
|
|
+ </uv-sticky>
|
|
|
+ <view class="scroll_view_box">
|
|
|
+ <scroll-view
|
|
|
+ class="scroll_view_y"
|
|
|
+ :scroll-top="state.scrollTop"
|
|
|
+ scroll-y="true"
|
|
|
+ :refresher-enabled="false"
|
|
|
+ :enable-back-to-top="true"
|
|
|
+ :show-scrollbar="false"
|
|
|
+ :scroll-with-animation="true"
|
|
|
+ refresher-default-style="none"
|
|
|
+ refresher-background="#F8F9FD"
|
|
|
+ :refresher-triggered="state.isRefreshing"
|
|
|
+ @scrolltolower="OnLoadMore"
|
|
|
+ @refresherrefresh="OnRefresh"
|
|
|
+ @scroll="OnScroll">
|
|
|
+ <view class="refresh_loading" v-if="state.isRefreshing"><uni-load-more status="loading" /></view>
|
|
|
+ <view class="page_content padding_btm">
|
|
|
+ <view class="task_title">{{state?.details?.courseName}}</view>
|
|
|
+ <view class="task_class_collect">
|
|
|
+ <view class="task_class_name">
|
|
|
+ <text class="class_item">{{state?.details?.courseType===0?'必修任务':'自主研修'}}</text>
|
|
|
+ <text class="class_item"
|
|
|
+ v-if="state?.details?.teachCourseTypeName">{{state?.details?.teachCourseTypeName}}</text>
|
|
|
+ <text class="class_item"
|
|
|
+ v-if="state?.details?.teachCourseTypeClassName">{{state?.details?.teachCourseTypeClassName}}</text>
|
|
|
+ <text class="class_item" v-if="state?.details?.createdBy">{{state?.details?.createdBy}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="task_collect">
|
|
|
+ <view class="preview">
|
|
|
+ <image class="img" src="@/static/image/icon/preview.png"></image>
|
|
|
+ <text class="text">{{state?.details?.watchCount || 0}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="collect">
|
|
|
+ <image class="img" src="@/static/image/icon/collect.png"></image>
|
|
|
+ <text class="text">{{state?.details?.followCount || 0}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="task_time">
|
|
|
+ <view class="time_day">
|
|
|
+ <text class="time_item">{{state?.details?.courseStartDatetime?.split(' ')?.[0]}}</text>
|
|
|
+ <template v-if="state?.details?.courseType===0">
|
|
|
+ <text class="time_item">至</text>
|
|
|
+ <text class="time_item">{{state?.details?.courseEndDatetime?.split(' ')?.[0]}}</text>
|
|
|
+ </template>
|
|
|
+ <text class="time_item"
|
|
|
+ v-if="state?.details?.courseType===0 && state?.details?.courseStatus!=2">剩余{{state?.details?.remainingTime}}</text>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ v-if="state?.details?.courseType===0 || (state?.details?.courseStatus===0 || state?.details?.courseStatus===2)"
|
|
|
+ :class="['task_status', {'going':state?.details?.courseStatus===0,'finished':state?.details?.courseStatus===2}]">
|
|
|
+ {{state?.details?.courseStatus===0 ? '进行中' : '已结束'}}
|
|
|
</view>
|
|
|
- <view class="progress_label">{{`${item.progress.replace(/%/g, '') || '0'}`}}%</view>
|
|
|
</view>
|
|
|
- <view
|
|
|
- :class="['item_status',{'await':item.learnStatus == 1 || item.learnStatus == 3,'finish':item.learnStatus == 4}]"
|
|
|
- v-if="state.courseType==='0' || (state.courseType==='1' && state.tabsSelected =='4')">
|
|
|
- {{item.learnStatus == 1 || item.learnStatus == 3 ?'待完成':'已完成'}}
|
|
|
+ <view :class="['task_desc',{'over':!state.isExpand}]">
|
|
|
+ 课程简介:{{state?.details?.courseContent}}
|
|
|
</view>
|
|
|
+ <view class="task_desc_all">
|
|
|
+ 课程简介:{{state?.details?.courseContent}}
|
|
|
+ </view>
|
|
|
+ <view class="expand_btn" v-if="state.showExpandBtn" @click="toggleExpand"><text
|
|
|
+ class="expand_text">{{!state.isExpand?'展开':'收起'}}</text><uni-icons class="expand_icon"
|
|
|
+ :type="!state.isExpand?'down':'up'"></uni-icons></view>
|
|
|
</view>
|
|
|
- <view class="item_time"
|
|
|
- v-if="(item.learnStartDatetime && item.learnStartDatetime!='-') || (item.learnEndDatetime && item.learnEndDatetime!='-')">
|
|
|
- <text class="time"
|
|
|
- v-if="item.learnStartDatetime && item.learnStartDatetime!='-'">开始时间:{{item.learnStartDatetime}}</text>
|
|
|
- <text class="time"
|
|
|
- v-if="item.learnEndDatetime && item.learnEndDatetime!='-'">结束时间:{{item.learnEndDatetime}}</text>
|
|
|
+ <view class="row_gap"></view>
|
|
|
+ <!-- 吸顶 -->
|
|
|
+ <!-- <uv-sticky style="top:98rpx"> -->
|
|
|
+ <view class="search_tabs">
|
|
|
+ <!-- 搜索框 -->
|
|
|
+ <uni-easyinput class="search_box" v-model="state.searchWord" trim="all" :styles="state.searchInputStyles"
|
|
|
+ :placeholderStyle="state.searchInputPlaceholderStyle" placeholder="请输入关键字搜索" @input="HandleSearchInput">
|
|
|
+ <template #left>
|
|
|
+ <image src="/static/image/overview/search.png" class="search_icon"></image>
|
|
|
+ </template>
|
|
|
+ </uni-easyinput>
|
|
|
+ <scroll-view class="scroll_tabs" scroll-x="true" scroll-left="0" :show-scrollbar="false">
|
|
|
+ <view :class="['tab_item',{'selected':item.value==state.tabsSelected}]" v-for="item in state.tabList"
|
|
|
+ :key="item.value" @click="SelectTabsValue(item.value)">
|
|
|
+ {{item.label}}
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <!-- </uv-sticky> -->
|
|
|
+ <view class="page_content page_content_data">
|
|
|
+ <view class="total">
|
|
|
+ <template v-if="state?.details?.courseType===0">
|
|
|
+ <template v-if="state.tabsSelected==''">共 {{state?.details?.learnCount || 0}} 人</template>
|
|
|
+ <template v-else-if="state.tabsSelected=='3'">共 {{state?.details?.learnUnOverCount || 0}}
|
|
|
+ 人</template>
|
|
|
+ <template v-else>共 {{state?.details?.learnFinishCount || 0}} 人</template>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <template v-if="state.tabsSelected=='4'">共 {{state?.details?.learnFinishCount || 0}}
|
|
|
+ 人</template>
|
|
|
+ <template v-else>共 {{state?.details?.learnUnOverCount || 0}} 人</template>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <view class="list_item" v-for="item in state.tabListData" :Key="item.teacherId">
|
|
|
+ <view class="created_progress_status">
|
|
|
+ <text class="created_by">{{item.teacherName}}</text>
|
|
|
+ <view class="item_progress">
|
|
|
+ <view class="progress_bar">
|
|
|
+ <view class="bar_width" :style="{'width': `${item.progress.replace(/%/g, '')}%`}">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="progress_label">{{`${item.progress.replace(/%/g, '') || '0'}`}}%</view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ :class="['item_status',{'await':item.learnStatus == 1 || item.learnStatus == 3,'finish':item.learnStatus == 4}]"
|
|
|
+ v-if="state.courseType==='0' || (state.courseType==='1' && state.tabsSelected =='4')">
|
|
|
+ {{item.learnStatus == 1 || item.learnStatus == 3 ?'待完成':'已完成'}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item_time"
|
|
|
+ v-if="(item.learnStartDatetime && item.learnStartDatetime!='-') || (item.learnEndDatetime && item.learnEndDatetime!='-')">
|
|
|
+ <text class="time"
|
|
|
+ v-if="item.learnStartDatetime && item.learnStartDatetime!='-'">开始时间:{{item.learnStartDatetime}}</text>
|
|
|
+ <text class="time"
|
|
|
+ v-if="item.learnEndDatetime && item.learnEndDatetime!='-'">结束时间:{{item.learnEndDatetime}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="no_data" v-if="!state.isLoading && state.tabListData.length == 0">
|
|
|
+ <image class="no_data_img" src="@/static/image/bg/no_data.png"></image>
|
|
|
+ <text class="no_data_text">暂无数据</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ <uni-load-more v-if="state.tabListData.length > 0" :status="state.loadStatus" />
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -152,12 +199,19 @@
|
|
|
value: '3'
|
|
|
}], //自主研修
|
|
|
showExpandBtn: false, //是否显示展开按钮
|
|
|
- isExpand:false,//是否展开
|
|
|
- pageSize: 100,
|
|
|
+ isExpand: false, //是否展开
|
|
|
+ pageSize: 10,
|
|
|
pageNum: 1,
|
|
|
+ scrollTop: 0,
|
|
|
+ oldScrollTop: 0,
|
|
|
+ isRefreshing: false, //设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发
|
|
|
+ isLoading: true, //加载中
|
|
|
+ noMoreData: false, //没有更多数据了
|
|
|
+ loadStatus: 'more', //loading状态
|
|
|
details: {}, //详情信息
|
|
|
tabListData: [], //数据
|
|
|
- listDatatotal: '',
|
|
|
+ searchBoxTop:0,//搜索框距离顶部的高度
|
|
|
+ isSticky:false,//是否吸顶
|
|
|
});
|
|
|
onLoad((option) => {
|
|
|
state.id = option.id;
|
|
|
@@ -166,45 +220,49 @@
|
|
|
state.tabsSelected = option.courseType === '0' ? '' : '4';
|
|
|
})
|
|
|
onMounted(() => {
|
|
|
- getMinitorDetailData(); // 数据加载完成后触发 checkTextOverflow
|
|
|
+ OnLoadData(true,true); // 数据加载完成后触发 checkTextOverflow
|
|
|
});
|
|
|
|
|
|
const checkTextOverflow = () => {
|
|
|
nextTick(() => {
|
|
|
- setTimeout(() => {
|
|
|
- const instance = getCurrentInstance();
|
|
|
- // 安全保护
|
|
|
- if (!instance || !instance.proxy) {
|
|
|
- // 备用方案:全局查询(要求元素 class 唯一)
|
|
|
- let taskDescAllHeight = 0,
|
|
|
- taskDescHeight = 0;
|
|
|
- const query = uni.createSelectorQuery();
|
|
|
- query.select('.task_desc_all').boundingClientRect((rect) => {
|
|
|
- taskDescAllHeight = rect?.height || 0;
|
|
|
- });
|
|
|
- query.select('.task_desc').boundingClientRect((rect) => {
|
|
|
- taskDescHeight = rect?.height || 0;
|
|
|
- });
|
|
|
- query.exec(() => {
|
|
|
- // 所有回调执行完毕后触发
|
|
|
- state.showExpandBtn = taskDescAllHeight > taskDescHeight + 1;
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
+ const instance = getCurrentInstance();
|
|
|
+ // 安全保护
|
|
|
+ if (!instance || !instance.proxy) {
|
|
|
+ // 备用方案:全局查询(要求元素 class 唯一)
|
|
|
let taskDescAllHeight = 0,
|
|
|
taskDescHeight = 0;
|
|
|
- const query = uni.createSelectorQuery().in(instance.proxy);
|
|
|
+ const query = uni.createSelectorQuery();
|
|
|
query.select('.task_desc_all').boundingClientRect((rect) => {
|
|
|
taskDescAllHeight = rect?.height || 0;
|
|
|
});
|
|
|
query.select('.task_desc').boundingClientRect((rect) => {
|
|
|
taskDescHeight = rect?.height || 0;
|
|
|
});
|
|
|
+ query.select('.page_content_data').boundingClientRect((rect) => {
|
|
|
+ state.searchBoxTop = rect?.top || 0;
|
|
|
+ });
|
|
|
query.exec(() => {
|
|
|
// 所有回调执行完毕后触发
|
|
|
state.showExpandBtn = taskDescAllHeight > taskDescHeight + 1;
|
|
|
});
|
|
|
- }, 100);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let taskDescAllHeight = 0,
|
|
|
+ taskDescHeight = 0;
|
|
|
+ const query = uni.createSelectorQuery().in(instance.proxy);
|
|
|
+ query.select('.task_desc_all').boundingClientRect((rect) => {
|
|
|
+ taskDescAllHeight = rect?.height || 0;
|
|
|
+ });
|
|
|
+ query.select('.task_desc').boundingClientRect((rect) => {
|
|
|
+ taskDescHeight = rect?.height || 0;
|
|
|
+ });
|
|
|
+ query.select('.page_content_data').boundingClientRect((rect) => {
|
|
|
+ state.searchBoxTop = rect?.top || 0;
|
|
|
+ });
|
|
|
+ query.exec(() => {
|
|
|
+ // 所有回调执行完毕后触发
|
|
|
+ state.showExpandBtn = taskDescAllHeight > taskDescHeight + 1;
|
|
|
+ });
|
|
|
});
|
|
|
}
|
|
|
// 展开收起切换
|
|
|
@@ -214,15 +272,22 @@
|
|
|
//切换tab
|
|
|
const SelectTabsValue = (val) => {
|
|
|
state.tabsSelected = val;
|
|
|
- getMinitorDetailData();
|
|
|
+ OnLoadData(true);
|
|
|
}
|
|
|
//搜索
|
|
|
const HandleSearchInput = (val) => {
|
|
|
state.searchWord = val;
|
|
|
- getMinitorDetailData();
|
|
|
+ OnLoadData(true);
|
|
|
}
|
|
|
- //详情
|
|
|
- const getMinitorDetailData = () => {
|
|
|
+ /*
|
|
|
+ *详情
|
|
|
+ * initPage:初始分页 从第一开始
|
|
|
+ * initData:初始加载
|
|
|
+ */
|
|
|
+ const OnLoadData = (initPage,initData = false) => {
|
|
|
+ if (initPage) state.pageNum = 1; //如果是下拉刷新、重新查询 默认加载第一页
|
|
|
+ state.isLoading = true;
|
|
|
+ state.loadStatus = 'loading';
|
|
|
queryMinitorDetailData({
|
|
|
id: state.id,
|
|
|
learnStatus: state.tabsSelected,
|
|
|
@@ -232,28 +297,70 @@
|
|
|
}).then(res => {
|
|
|
if (res.code == 200) {
|
|
|
state.details = res?.data || null;
|
|
|
+ let total = 0,
|
|
|
+ tabListData = []; //总数
|
|
|
if (res?.data?.courseType === 0) { //必修任务
|
|
|
- const tableTaskData = res?.data?.tableTaskData?.records || [];
|
|
|
- const total = res?.data?.tableTaskData?.total || '0';
|
|
|
- state.tabListData = tableTaskData;
|
|
|
- state.listDatatotal = total;
|
|
|
+ tabListData = res?.data?.tableTaskData?.records || [];
|
|
|
+ total = res?.data?.tableTaskData?.total || '0';
|
|
|
} else {
|
|
|
if (state.tabsSelected == '4') { //自主研修-已完成
|
|
|
- const tableSelfOverData = res?.data?.tableSelfOverData?.records || [];
|
|
|
- const total = res?.data?.tableSelfOverData?.total || '0';
|
|
|
- state.tabListData = tableSelfOverData;
|
|
|
- state.listDatatotal = total;
|
|
|
+ tabListData = res?.data?.tableSelfOverData?.records || [];
|
|
|
+ total = res?.data?.tableSelfOverData?.total || '0';
|
|
|
} else { //自主研修-学习中
|
|
|
- const tableSelfUnOverData = res?.data?.tableSelfUnOverData?.records || [];
|
|
|
- const total = res?.data?.tableSelfUnOverData?.total || '0';
|
|
|
- state.tabListData = tableSelfUnOverData;
|
|
|
- state.listDatatotal = total;
|
|
|
+ tabListData = res?.data?.tableSelfUnOverData?.records || [];
|
|
|
+ total = res?.data?.tableSelfUnOverData?.total || '0';
|
|
|
}
|
|
|
}
|
|
|
- checkTextOverflow();
|
|
|
+ const pages = Math.ceil(total / state.pageSize); //总页数
|
|
|
+ state.tabListData = initPage ? tabListData : [...state.tabListData, ...tabListData];
|
|
|
+ state.noMoreData = state.pageNum == pages;
|
|
|
+ state.pageNum++;
|
|
|
+ if(initData){
|
|
|
+ checkTextOverflow();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ state.isLoading = false;
|
|
|
+ state.isRefreshing = false; //下拉刷新未被触发
|
|
|
+ if (state.noMoreData) {
|
|
|
+ state.loadStatus = 'no-more';
|
|
|
+ } else {
|
|
|
+ state.loadStatus = 'more';
|
|
|
+ }
|
|
|
+ //返回到页面顶部
|
|
|
+ if (initPage) {
|
|
|
+ GoTop();
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
+ // 自定义下拉刷新被触发 下拉刷新
|
|
|
+ const OnRefresh = () => {
|
|
|
+ state.isRefreshing = true; //下拉刷新已经被触发
|
|
|
+ OnLoadData(true);
|
|
|
+ }
|
|
|
+ //滚动到底部/右边 触发上拉刷新
|
|
|
+ const OnLoadMore = () => {
|
|
|
+ if (state.isLoading || state.noMoreData) return;
|
|
|
+ OnLoadData(false);
|
|
|
+ }
|
|
|
+ // 滚动时触发
|
|
|
+ const OnScroll = (e) => {
|
|
|
+ const scrollTop = e.detail.scrollTop;
|
|
|
+ if(scrollTop > state.searchBoxTop){
|
|
|
+ state.isSticky = true;
|
|
|
+ }else{
|
|
|
+ state.isSticky = false;
|
|
|
+ }
|
|
|
+ state.oldScrollTop = scrollTop;
|
|
|
+ }
|
|
|
+ //返回到顶部
|
|
|
+ const GoTop = () => {
|
|
|
+ // 解决view层不同步的问题
|
|
|
+ state.scrollTop = state.oldScrollTop;
|
|
|
+ nextTick(() => {
|
|
|
+ state.scrollTop = 0
|
|
|
+ });
|
|
|
+ }
|
|
|
//返回
|
|
|
const GoBack = () => {
|
|
|
uni.navigateBack({
|
|
|
@@ -263,6 +370,23 @@
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+ .page_body{
|
|
|
+ height: 100%;
|
|
|
+ min-height: auto;
|
|
|
+ .scroll_view_box{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: calc(100% - 96rpx);
|
|
|
+ }
|
|
|
+ .scroll_view_y {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .refresh_loading {
|
|
|
+ padding: 10rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.page_content {
|
|
|
&.padding_btm {
|
|
|
padding-bottom: 24rpx;
|
|
|
@@ -380,7 +504,8 @@
|
|
|
line-height: 44rpx;
|
|
|
box-sizing: border-box;
|
|
|
position: relative;
|
|
|
- &.over{
|
|
|
+
|
|
|
+ &.over {
|
|
|
max-height: 168rpx;
|
|
|
overflow: hidden;
|
|
|
transition: all 0.25s;
|
|
|
@@ -435,33 +560,37 @@
|
|
|
width: 100%;
|
|
|
height: 24rpx;
|
|
|
}
|
|
|
-
|
|
|
- :deep(.search_box) {
|
|
|
+ :deep(.search_tabs){
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- box-sizing: border-box;
|
|
|
width: 100%;
|
|
|
- padding: 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background-color: #FFFFFF;
|
|
|
-
|
|
|
- .is-input-border {
|
|
|
- border-radius: 8rpx;
|
|
|
- border: 2rpx solid #DCDFE6;
|
|
|
- border-color: #DCDFE6 !important;
|
|
|
- }
|
|
|
-
|
|
|
- .search_icon {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- margin-left: 24rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .uni-easyinput__content-input {
|
|
|
- padding-left: 8rpx !important;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #333333;
|
|
|
- height: 72rpx;
|
|
|
+ flex-direction: column;
|
|
|
+ .search_box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ padding: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+
|
|
|
+ .is-input-border {
|
|
|
+ border-radius: 8rpx;
|
|
|
+ border: 2rpx solid #DCDFE6;
|
|
|
+ border-color: #DCDFE6 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search_icon {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-easyinput__content-input {
|
|
|
+ padding-left: 8rpx !important;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ height: 72rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -570,4 +699,7 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .no_data{
|
|
|
+ margin-top: 24rpx;
|
|
|
+ }
|
|
|
</style>
|