<template> <transition name=”slide”> <div class=”search_page”> 123 </transition> </template>
<script> export default { name: “SearchPage”, components: { SearchHeader, [Icon.name]: Icon, VueBetterScroll, CourseItem, NoData, }, data() { return { isFocus: true, noBlur: true, searchText: “”, historyList: [], accessToken: parseParam(window.location.href).accessToken || “”, // VueBetterScroll 配置 scrollbarObj: { fade: true, }, pullDownRefreshObj: { threshold: 90, stop: 40, }, pullUpLoadObj: { threshold: 0, txt: { more: “加载更多”, noMore: “没有更多数据了”, }, }, startY: 0, scrollToX: 0, scrollToY: 0, scrollToTime: 700, items: [], pageSize: 20, pageNum: 1, }; }, props: { searchState: { type: Boolean, default: false, }, }, watch: { searchState(newVal) { if (newVal) { this.$refs.SearchHeader.$refs.searchInput.focus(); } else { this.$refs.SearchHeader.$refs.searchInput.blur(); } }, isFocus(newVal) { // 获取焦点后查询当前用户的历史记录 if (newVal) { this.getSearchDataList(); } }, }, mounted() { this.getSearchDataList(); }, methods: { goBack() { this.$emit(“goBack”); }, handleFocus(state) { if (state) this.noBlur = true; this.isFocus = state; }, handleSearch() { console.log(this.searchText); this.$refs.SearchHeader.$refs.searchInput.blur(); this.noBlur = false; this.saveSearchData(); this.onPullingDown(); }, historyClick(item) { this.searchText = item.content; this.isFocus = false; this.noBlur = false; this.onPullingDown(); }, // 查询历史记录 async getSearchDataList() { const response = await this.$request(API.studyCenter.getSearchDataList, { method: “get”, params: { accessToken: this.accessToken, flag: 1, }, }); this.historyList = […((response && response.result) || [])]; }, // 删除历史记录 async delSearchDataList() { const response = await this.$request(API.studyCenter.delSearchDataList, { method: “get”, params: { accessToken: this.accessToken, flag: 1, }, }); if (response && response.code === 200) this.historyList = []; }, // 添加历史数据 async saveSearchData() { await this.$request(API.studyCenter.saveSearchData, { method: “get”, params: { accessToken: this.accessToken, flag: 1, content: this.searchText, }, }); }, // 数据请求 getListData(params) { const that = this; const { pageNum } = params; return that .$request(API.studyCenter.getLessonDataList, { method: “get”, params: { accessToken: this.accessToken, page: pageNum, rows: that.pageSize, typeId: 0, text: this.searchText, }, }) .then((res) => { return new Promise((resolve) => { resolve(res); }); }); }, onPullingDown() { this.pageNum = 1; this.getListData({ pageNum: this.pageNum }).then((response) => { this.items = []; const { result = [], totalNum } = response; this.items = […result]; if (Math.ceil(totalNum / this.pageSize) === this.pageNum) { this.$refs.search_scroll.forceUpdate(false); } else { this.$refs.search_scroll.forceUpdate(true); } }); }, onPullingUp() { this.pageNum++; this.getListData({ pageNum: this.pageNum }).then((response) => { const { result = [], totalNum } = response; this.items = this.items.concat(result); if (Math.ceil(totalNum / this.pageSize) === this.pageNum) { this.$refs.search_scroll.forceUpdate(false); } else { this.$refs.search_scroll.forceUpdate(true); } }); }, touchstart(ev) { addClass(ev.currentTarget, “icon_on”); }, touchend(ev) { removeClass(ev.currentTarget, “icon_on”); }, // 跳转详情 回来刷新局部 bindReload(nub) { if (nub === 1) { window.reload = () => { console.log(“第二个页面”); this.onPullingDown(); }; } }, }, }; </script>
<style lang=”scss” scoped> @import “~assets/css/mixins”; .search_page { position: fixed; top: 0; bottom: 0; left: 0; width: 100%; background: $color-white; z-index: 200; box-shadow: 0px 0px 40px rgba(128, 128, 128, 0.4); &.slide-enter-active, &.slide-leave-active { transition: all 0.3s; transform: translate3d(0, 0, 0); } &.slide-enter, &.slide-leave-to { transform: translate3d(100%, 0, 0); } .search_content { position: absolute; left: 0; top: 88px; bottom: 0; right: 0; width: 100%; .history_wrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; background: $color-white; z-index: 201; .title { margin-top: 28px; font-size: 24px; color: $color-n2-5; align-items: center; padding: 0 32px; @include flex-r(); @include flex-justify(); .icon_wrap { width: 44px; height: 44px; @include flex-r(); @include flex-center(); &.icon_on { background: $color-faint-Black; } } } .history_lists { // width: 100%; padding-left: 32px; display: flex; flex-flow: row wrap; li { width: auto; display: inline-block; height: 56px; padding: 0 36px; border-radius: 28px; margin: 20px 32px 0 0; border: 1.5px solid $color-n1-4; color: $color-n2-5; font-size: 28px; line-height: 57px; &.icon_on { background: $color-faint-Black; } // &:nth-child(4n) { // margin-right: 0; // } } } } .search_content_list { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; background: $color-white; } } } </style>