|
@@ -0,0 +1,313 @@
|
|
|
|
+<template>
|
|
|
|
+ <view class="column " style="height: 100vh;" >
|
|
|
|
+ <view class="top-content" >
|
|
|
|
+ <!-- 搜索框 -->
|
|
|
|
+ <view class="search-cont">
|
|
|
|
+ <view class="inner">
|
|
|
|
+ <image class="icon-search" src="/static/images/search.png" mode=""></image>
|
|
|
|
+ <input type="text" v-model="keyword" placeholder="输入关键字搜索" confirm-type="search"
|
|
|
|
+ @confirm="doSearch" placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="bgf topguide" >
|
|
|
|
+ <view class=" bold ml30 color3">以往会刊</view>
|
|
|
|
+ <scroll-view
|
|
|
|
+ scroll-x
|
|
|
|
+ :refresher-enabled="true"
|
|
|
|
+ class="scroll-container"
|
|
|
|
+ @scrolltolower="loadMore"
|
|
|
|
+ :scroll-left="scrollLeft"
|
|
|
|
+ >
|
|
|
|
+ <!-- 横向内容列表 -->
|
|
|
|
+ <view class="item-list">
|
|
|
|
+ <view v-for="(item, index) in guidelisttype" :key="index" class="item"
|
|
|
|
+ @click="selguide(item.categoryId)" :class="{ 'active': selectedIndex === item.categoryId }">
|
|
|
|
+ <view class="image-box ">
|
|
|
|
+ <image :src="item.imageUrl" mode="aspectFill" ></image>
|
|
|
|
+ <view class="fs28 mt10">{{item.categoryName}}</view>
|
|
|
|
+ <view class="fs24 " style="color: #848484;font-weight: normal;"></view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 加载状态提示 -->
|
|
|
|
+ <view @click="loadMore" class=" color9 fs24">{{statusA?"点击加载更多":"没有更多"}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ </scroll-view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="ml30 mt30 bold color3 ">精选文章</view>
|
|
|
|
+ <view style="flex: 1; overflow: hidden;" class="plr30 ptb20" >
|
|
|
|
+ <scroll-view scroll-y="true" :refresher-enabled="isEnabled" style="height: 100%"
|
|
|
|
+ :refresher-triggered="triggered" refresher-background="rgba(0,0,0,0)"
|
|
|
|
+ @refresherrefresh="pullDownRefresh" @refresherrestore="triggered = false"
|
|
|
|
+ :upper-threshold="100" :lower-threshold="40" @refresherabort="triggered = false"
|
|
|
|
+ @scrolltolower="reachBottom">
|
|
|
|
+ <view class="bgf guideitem mt60 " v-for='(item,index) in guidelist' :key="index" @click="toguide(item)">
|
|
|
|
+ <image :src="item.imageUrl"
|
|
|
|
+ mode="aspectFill"></image>
|
|
|
|
+ <view class="column justify-between ptb30 mr30"
|
|
|
|
+ style="height: calc(100% - 60rpx);width: calc(55% - 30rpx);float: right;">
|
|
|
|
+ <view>
|
|
|
|
+ <view>{{item.title}}</view>
|
|
|
|
+ <view class="color6 fs28 text-ellipsis mt10">{{item.description?item.description:''}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="justify-between align-center">
|
|
|
|
+ <view class="justify-start align-center">
|
|
|
|
+ <u-icon name="eye" color="#888" size="18"></u-icon>
|
|
|
|
+ <view class="fs24 ">{{item.views}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="u-border fs24 color3 ptb6 plr30 radius8">
|
|
|
|
+ 点击阅读
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <u-loadmore :status="status" />
|
|
|
|
+ </scroll-view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import {getbeilihometype,getbeilihomelist} from '@/api/doc.js'
|
|
|
|
+ export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ id:0,
|
|
|
|
+ keyword:'',//搜索关键词
|
|
|
|
+ guidelisttype:[],
|
|
|
|
+ guidelist:[],
|
|
|
|
+ selectedIndex:'',
|
|
|
|
+ pageNum:1,
|
|
|
|
+ pageSize: 5,
|
|
|
|
+ triggered: false,
|
|
|
|
+ isEnabled:true,
|
|
|
|
+ status: 'nomore',
|
|
|
|
+ // 分类分页
|
|
|
|
+ pageNums:1,
|
|
|
|
+ pageSizes:5,
|
|
|
|
+ statusA:false,
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onLoad(option) {
|
|
|
|
+ console.log(option)
|
|
|
|
+ if (option.title) {
|
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
|
+ title: option.title
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ this.getclassification()
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ loadMore() {
|
|
|
|
+ if (this.statusA) {
|
|
|
|
+ this.pageNums++
|
|
|
|
+ uni.showNavigationBarLoading()
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.getclassification() //触底 不穿执行else
|
|
|
|
+ uni.hideNavigationBarLoading()
|
|
|
|
+ }, 200);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ pullDownRefresh() {
|
|
|
|
+ // 下拉
|
|
|
|
+ this.triggered = true; //下拉了状态为true
|
|
|
|
+ console.log(123)
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.triggered = false;
|
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
|
+ this.pageNum = 1;
|
|
|
|
+ this.getguideList('refresh') //触底 不穿执行else
|
|
|
|
+ }, 1000)
|
|
|
|
+ },
|
|
|
|
+ reachBottom() {
|
|
|
|
+ // status这个是加载状态
|
|
|
|
+ console.log(123)
|
|
|
|
+ if (this.status === 'loadmore') {
|
|
|
|
+ this.status = 'loading'
|
|
|
|
+ uni.showNavigationBarLoading()
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.pageNum++
|
|
|
|
+ this.getguideList() //触底 不穿执行else
|
|
|
|
+ uni.hideNavigationBarLoading()
|
|
|
|
+ }, 1000);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ toguide(item){
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url:'/pages_shopping/store/guideDetail?title='+item.title+'&id='+item.articleId
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ doSearch(e){
|
|
|
|
+ console.log(e)
|
|
|
|
+ this.keyword=e.detail.value
|
|
|
|
+ },
|
|
|
|
+ selguide(id){
|
|
|
|
+ this.selectedIndex=id
|
|
|
|
+ this.guidelist=[]
|
|
|
|
+ this.getguideList()
|
|
|
|
+ },
|
|
|
|
+ getclassification(){
|
|
|
|
+ uni.showLoading({
|
|
|
|
+ title: "加载中..."
|
|
|
|
+ })
|
|
|
|
+ const data={
|
|
|
|
+ pageNum:this.pageNums,
|
|
|
|
+ pageSize:this.pageSizes,
|
|
|
|
+ }
|
|
|
|
+ getbeilihometype(data).then(res=>{
|
|
|
|
+ if(res.code==200){
|
|
|
|
+ uni.hideLoading()
|
|
|
|
+ if (res.data.isLastPage) {
|
|
|
|
+ this.guidelisttype = [...this.guidelisttype, ...res.data.list]
|
|
|
|
+ } else {
|
|
|
|
+ this.guidelisttype = res.data.list
|
|
|
|
+ this.selectedIndex=this.guidelisttype[0].categoryId
|
|
|
|
+ }
|
|
|
|
+ if ( res.data.isLastPage) {
|
|
|
|
+ this.statusA = false
|
|
|
|
+ } else {
|
|
|
|
+ this.statusA = true
|
|
|
|
+ }
|
|
|
|
+ this.getguideList()
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getguideList(type){
|
|
|
|
+ // uni.showLoading({
|
|
|
|
+ // title: "加载中..."
|
|
|
|
+ // })
|
|
|
|
+ const data={
|
|
|
|
+ categoryId:this.selectedIndex,
|
|
|
|
+ pageNum:this.pageNum,
|
|
|
|
+ pageSize:this.pageSize
|
|
|
|
+ }
|
|
|
|
+ getbeilihomelist(data).then(res=>{
|
|
|
|
+ if(res.code==200){
|
|
|
|
+ // uni.hideLoading()
|
|
|
|
+ if (type == 'refresh') {
|
|
|
|
+ this.guidelist = res.data.list
|
|
|
|
+ } else {
|
|
|
|
+ // 加载更多 当前页和下一页合并
|
|
|
|
+ this.guidelist = [...this.guidelist, ...res.data.list]
|
|
|
|
+ }
|
|
|
|
+ if ( res.data.isLastPage) {
|
|
|
|
+ this.status = 'nomore'
|
|
|
|
+ } else {
|
|
|
|
+ this.status = 'loadmore'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+ .topguide{
|
|
|
|
+ // position: fixed;
|
|
|
|
+ z-index: 9;
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+.scroll-container{
|
|
|
|
+ width: calc(100% - 40rpx);
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ background: #fff;
|
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
|
+ z-index: 101;
|
|
|
|
+}
|
|
|
|
+.item-list {
|
|
|
|
+ padding: 20rpx 0rpx;
|
|
|
|
+ overflow-x: auto;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+}
|
|
|
|
+/* 选中时的放大效果 */
|
|
|
|
+.item.active {
|
|
|
|
+ transform: scale(1.15); /* 放大1.1倍 */
|
|
|
|
+ margin-left: 20rpx;
|
|
|
|
+ margin-right: 20rpx;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
+}
|
|
|
|
+.item {
|
|
|
|
+ width: 300rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ align-items: flex-start;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ padding-bottom: 10rpx;
|
|
|
|
+ transition: all 0.35s ease; /* 添加过渡动画 */
|
|
|
|
+ .image-box{
|
|
|
|
+ width: 210rpx;
|
|
|
|
+ height: 340rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ image{
|
|
|
|
+ width: 190rpx;
|
|
|
|
+ height:340rpx;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.loading-status {
|
|
|
|
+ width: 200rpx;
|
|
|
|
+ height: 200rpx;
|
|
|
|
+ display: inline-flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ color: #999;
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.top-content{
|
|
|
|
+ width: 100%;
|
|
|
|
+ // position: fixed;
|
|
|
|
+ top:0;
|
|
|
|
+ left: 0;
|
|
|
|
+ z-index: 10;
|
|
|
|
+}
|
|
|
|
+.search-cont{
|
|
|
|
+ padding: 16upx 30upx;
|
|
|
|
+ background-color: #FFFFFF;
|
|
|
|
+ .inner{
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 72upx;
|
|
|
|
+ background: #F7F7F7;
|
|
|
|
+ border-radius: 36upx;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ padding: 0 30upx;
|
|
|
|
+ .icon-search{
|
|
|
|
+ width: 28upx;
|
|
|
|
+ height: 28upx;
|
|
|
|
+ margin-right: 20upx;
|
|
|
|
+ }
|
|
|
|
+ input{
|
|
|
|
+ height: 60upx;
|
|
|
|
+ line-height: 60upx;
|
|
|
|
+ flex: 1;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.guideitem{
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
+ box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
|
|
|
|
+ padding: 20rpx;
|
|
|
|
+ height: 300rpx;
|
|
|
|
+ width: calc(100% -40rpx);
|
|
|
|
+ position: relative;
|
|
|
|
+ image{
|
|
|
|
+ width: 250rpx;
|
|
|
|
+ height:350rpx;
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
+ flex-shrink: 0; /* 禁止缩放 */
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: -40rpx;
|
|
|
|
+ box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|