服务器配置

zengh

2022-09-14 8ea19a6bb34daab1410f6186992a4c1e90299c92

 pages/article/article.vue

@@ -1,225 +1,506 @@
<template>
   <view class="advisory-big">
         <!-- 顶部下拉刷新 -->
         <view v-show="isFlash">
            <uni-load-more :status="loadStatus" ></uni-load-more>
      <!-- 自定义顶部导航栏 -->
      <!-- <view class="uni-nav-bar-info" :style="{marginTop:navbarTopHeight}">
         <view class="title" @click="goTabDetail(index)" v-for="(item,index) in titleList"
            :style="titleNum==index? 'color:#000000':'color:#808080'">{{item}}</view>
      </view> -->
      <view>
         <u-dropdown style="height:0rpx" @open="open">
            <u-dropdown-item v-model="value1" title="看新闻" @change="change" :options="options1"></u-dropdown-item>
            <u-dropdown-item v-model="value1" title="看视频" @change="change" :options="options2"></u-dropdown-item>
            <u-dropdown-item v-model="value1" title="行业圈" @change="change" :options="options3"></u-dropdown-item>
            <u-dropdown-item v-model="value1" title="看现场" @change="change" :options="options4"></u-dropdown-item>
         </u-dropdown>
      </view>
      <view>
         <view class="search-block" style="height: 35px">
            <view class="search-ico-wapper">
               <image src="../../static/images/search/search.png" class="search-ico" mode=""></image>
            </view>
            <input type="text" v-on:input="getKeyword" v-model="keyword" placeholder="搜索" class="search-text"
               maxlength="10" focus />
            <!-- <view class="search-ico-wapper1">
               <image src="../../static/images/article/microphone.png" class="search-ico-1" mode=""></image>
            </view> -->
         </view>
         <view  v-for="i in data" class="advisory-model" @click="goDetail(i)">
      </view>
      <scroll-view id="articleBox" :style="{ height: swiperHeight + 'px' }" class="article-content" scroll-y
         style="width: 100%; margin-top: 100rpx;" :refresher-enabled="refresherFlag" :refresher-threshold="threshold"
         :refresher-triggered="triggered" @refresherrefresh="refreshing" @refresherrestore="refresherrestore">
         <view style="text-align: center;">
            <u-loading size="90" mode="flower" :show="loading"></u-loading>
         </view>
         <view v-for="i in data" class="advisory-model" @click="goDetail(i)">
            <view class="advisory-left">
               <view class="advisory-title-top">
                  <view class="advisory-title">{{i.title}}</view>
               </view>
               <view class="advisory-title-down">
                  <view class="advisory-title-name">{{i.sourceName}}</view>
                  <view class="advisory-title-time">{{i.createTime}}</view>
                  <view class="advisory-title-time">{{i.createTime.substring(0,11)}}</view>
               </view>
            </view>
            <view class="advisory-right">
               <image :src="i.url"></image>
            </view>
				
         </view>
         <!-- loading加载提示处 -->
         <view v-show="isLoadMore">
            <uni-load-more :status="loadStatus" ></uni-load-more>
          </view>
         <u-loadmore :status="status" />
      </scroll-view>

      <!-- <view class="article-content">
      </view> -->
		
      <u-toast ref="uToast" />
      <!-- 底部导航条 -->
      <u-tabbar :list="tabbar" :mid-button="false"></u-tabbar>
   </view>
</template>

<script>
   export default{
      data(){
   import navBarTop from '../../components/nav-bar-top/nav-bar-top.vue';
   export default {
      components: {
         navBarTop
      },
      data() {
         return {
            // pathUrl:"http://localhost:89/",
            pathUrl:"http://s16s652780.51mypc.cn/api/blade-jfpts",
            page:1,
            pagesize:10,
            loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
            isLoadMore:false,  //是否加载中
            isFlash:false,//是否刷新
            data:[]
            pathUrl: this.$store.state.piAPI + "",
            loading:true,//加载动画
            page: 1,
            pagesize: 999999,
            status: 'loadmore',
            // loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
            isLoadMore: false, //是否加载中
            isFlash: false, //是否刷新
            data: [],
            titleNum: 0,
            articleTabArr: [],
            articleTabNum: 0,
            navbarTopHeight: "10px",
            tabbar: this.$store.state.tabbar,
            tabInfo: "0",
            keyword: '',
            value1: "",
            rolename: "",
            threshold: 50,
            triggered: false,
            isRefreshing: false, // 是否在刷新中
            refresherFlag: true,
            options1: [{
                  label: '全部',
                  value: 'kxw',
               }, {
                  label: '热议',
                  value: 'kxw001',
               },
               {
                  label: '通知',
                  value: 'kxw002',
               },
               {
                  label: '警闻',
                  value: 'kxw003',
               },
               {
                  label: '民生',
                  value: 'kxw004',
               }
            ],
            options2: [{
                  label: '全部',
                  value: 'ksp',
               }, {
                  label: '通告',
                  value: 'ksp001',
               },
               {
                  label: '微视',
                  value: 'ksp002',
               },
               {
                  label: '动态',
                  value: 'ksp003',
               }
            ],
            options3: [{
                  label: '全部',
                  value: 'hyq',
               }, {
                  label: '消息发布',
                  value: 'hyq001',
               },
               {
                  label: '知识竞答',
                  value: 'hyq002',
               },
               {
                  label: '知识讨论',
                  value: 'hyq003',
               }, {
                  label: '个人',
                  value: 'hyq004',
               }
            ],
            options4: [{
               label: '全部',
               value: 'kxc',
            }],
            swiperHeight: 0
         }
      },
      mounted(){
      mounted() {
         // this.getArtcilePageList();
      },
      //上拉加载更多
      onReachBottom(){  //上拉触底函数
         if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
            this.isLoadMore=true
            this.page+=1
            this.getArtcilePageList()
         }
      },
      //下拉刷新
      onPullDownRefresh() {
         // console.log("上拉了！....");
         if(!this.isFlash){  //此处判断，上锁，防止重复请求
            this.isFlash=true;
            this.page =1;
            this.getArtcilePageList();
         }
      },
      onLoad() {
          this.getArtcilePageList();
         //获取新闻数据
         this.rolename = this.$store.state.UserData.role_name;
         this.getArtcilePageList("0");
         uni.startPullDownRefresh();

      },
      methods:{

      onReady() {
         let that = this;
         uni.getSystemInfo({
            success(e) {
               console.log(e);
               let {
                  windowWidth,
                  windowHeight,
                  safeArea
               } = e;
               const query = uni.createSelectorQuery().in(that);
               query
                  .select('#articleBox')
                  .boundingClientRect(data => {
                     that.swiperHeight = (safeArea.bottom - data.top - 70);

                  })
                  .exec();
            }
         });
      },

      //上拉加载更多
      onReachBottom() {
         if (this.status == 'nomore') return;
         this.page = ++this.page;
         setTimeout(() => {
            this.getArtcilePageList(this.tabInfo);
         }, 100);
      },
      methods: {
         goTabDetail(index) {
            this.titleNum = index;
         },
         //去跳转详情页面
         goDetail(e){
				
            //内容传值容易报错，所以直传id,然后调用接口去查询
            // let detail = {
            //    title: e.title,
            //    content: e.content,
            //    id: e.id,
            //    createTime: e.createTime,
            //    sourceName: e.sourceName,
            //    imgUrl: e.url,
            //    videoUrl:e.videoUrl
            // };
				
         goDetail(e) {
            let detail = {
               id: e.id
            };
            //去跳转
            uni.navigateTo({
               url: './article_detail?detailData=' + JSON.stringify(detail)
            });
            if (e.articleType.indexOf("ksp") != -1) {
               //去跳转
               uni.navigateTo({
                  url: './article_video?detailData=' + (JSON.stringify(e))
               });
            } else {
               //去跳转
               uni.navigateTo({
                  url: './article_detail?detailData=' + JSON.stringify(detail)
               });
            }
         },
			
         //on input 通过 keyword 关键字查询
         getKeyword() {
            this.getArtcilePageList(this.tabInfo);
         },
         //获取资讯信息
         getArtcilePageList(){
         getArtcilePageList(tab) {
            var that = this;
            var paramData = null;
            if (Number(tab) == "") {
               paramData = {
                  rolename: this.rolename, //帐号角色
                  current: this.page,
                  size: this.pagesize,
                  keyword: this.keyword
               }
            } else {
               paramData = {
                  rolename: this.rolename, //帐号角色
                  current: this.page,
                  size: this.pagesize,
                  keyword: this.keyword,
                  articleType: tab
               }
            }
            uni.request({
               url: that.pathUrl+'/article/article/page',
               method:'GET',
               data:{
                  current:this.page,
                  size: this.pagesize
               },
               url: that.$store.state.piAPI + '/article/article/pageDate',
               method: 'GET',
               data: paramData,
               success: (res) => {
                  if(res.data.code==200){
                     if(res.data.data.records){
                  if (res.data.code == 200) {
                     that.loading = false;
                     if (res.data.data.records) {
                        //如果总数小于pageSize,不做其他操作
                        if(res.data.data.total<this.pagesize){
                        if (res.data.data.total < that.pagesize) {
                           that.data = res.data.data.records;
                        }else{
                           if(res.data.data.records.length<this.pagesize){
                           that.status = 'nomore';
                        } else {
                           if (res.data.data.records.length < that.pagesize) {
                              //如果数量小于分页数量，则为最后一页
                              this.isLoadMore=true;
                              this.loadStatus='nomore';
                           }else{
                              this.isLoadMore=false
                              that.status = 'nomore'
                           } else {
                              //否则继续加载更多数据
                              that.status = 'loading';
                           }
                           res.data.data.records.forEach((item)=>{
                           res.data.data.records.forEach((item) => {
                              that.data.push(item);
                           })
                        }
                     }else{
                        this.isLoadMore=true;
                        this.loadStatus='nomore';
                     }
                     setTimeout(() => {
                        that.triggered = false; //触发onRestore，并关闭刷新图标 正常应该放在请求成功得接口里
                        that.isRefreshing = false;
                     }, 1000)
                  }
               }
            });
         }
         },
         change(e) {
            this.page = 1;
            this.getArtcilePageList(e);
         },
         open(e) {
            if (e >= 2) {
               this.$refs.uToast.show({
                  title: '功能研发中',
                  type: 'warning',
               })
            }
         },
         refreshing() {
            if (this.isRefreshing) {
               return;
            }
            this.isRefreshing = true;
            //界面下拉触发，triggered可能不是true，要设为true
            if (!this.triggered) {
               this.triggered = true;
            }

            this.getArtcilePageList();
         },

         refresherrestore() {

         },
      }
   }
</script>

<style>

</style>

<style lang="scss" scoped>
   .advisory-big{
   .advisory-big {
      width: 100%;
      height: 70%;
      position: absolute;
      top: 2%;
      // background-color: #0078A8;
		
      .advisory-model{
         width: 100%;
         height: 20%;
         // background-color: #00FF00;
			
			
         .advisory-left{
            width: 61%;
            height: 80%;
            float: left;
            position: relative;
            // background-color: #00FFFF;
            position: relative;
            left: 4%;
            top: 10%;
				
				
            .advisory-title-top{
               // background-color: #2692FD;
               width: 100%;
               height: 75%;
					
               .advisory-title{
                  width: 92%;
                  font-size: 15px;
                  font-weight: 550;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box; 
                  -webkit-line-clamp: 2; 
                  -webkit-box-orient: vertical;
               }
					
					
            }
				
            .advisory-title-down{
               // background-color: #0078A8;
               width: 100%;
               height: 25%;
               font-size: 12px;
               font-weight: 550;
               color: #808080;
					
               .advisory-title-name{
                  width: 130rpx;
                  float: left;
                  letter-spacing: 1px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box; 
                  -webkit-line-clamp: 1; 
                  -webkit-box-orient: vertical;
                  // background-color:#0078A8;
               }
					
               .advisory-title-time{
                  position: relative;
                  left: 15rpx;
               }
            }
				
      height: 100%;
      background-color: #f7f7f7;

      .uni-nav-bar-info {
         display: flex;
         align-items: center;
         height: 50px;

         .title {
            font-size: 1.2rem;
            color: #808080;
            margin-left: 1rem;
         }
			
         .advisory-right{
            // background-color: #222222;
            width: 32%;
            height: 80%;
            left: 63%;
            position: relative;
            top: 10%;
				
            image{
      }


      .article-tab {
         background-color: #fff;
         width: 100%;
         height: 2.5rem;
         border-bottom: 2px solid #D7D7D7;
         z-index: 999;
         position: fixed;

         .article-tab-title {
            // text-align: center;
            width: 14%;
            float: left;
            margin-left: 1rem;
            margin-top: 0.5rem;
            // border-bottom: 4px solid #000000;
         }

         image {
            margin-top: 0.35rem;
            width: 1.5rem;
            height: 1.5rem;
         }
      }

      .article-content {
         // margin-top: 3.5rem;
         width: 100%;
         // background-color: #00FF00;

         .advisory-model {
            width: 94%;
            margin: 0 auto;
            height: 6rem;
            background-color: #FFF;
            border-radius: 8px;
            margin-top: 0.5rem;


            .advisory-left {
               width: 64%;
               height: 80%;
               float: left;
               position: relative;
               left: 0px;
               top: -100%;
               width: 100%;
               height: 100%;
               border-radius: 5px;
               // background-color: #00FFFF;
               position: relative;
               left: 3%;
               top: 10%;


               .advisory-title-top {
                  // background-color: #2692FD;
                  width: 100%;
                  height: 75%;

                  .advisory-title {
                     width: 92%;
                     font-size: 15px;
                     font-weight: 550;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     display: -webkit-box;
                     -webkit-line-clamp: 2;
                     -webkit-box-orient: vertical;
                  }


               }

               .advisory-title-down {
                  // background-color: #0078A8;
                  width: 100%;
                  height: 25%;
                  font-size: 12px;
                  font-weight: 550;
                  color: #808080;

                  .advisory-title-name {
                     width: 250rpx;
                     float: left;
                     letter-spacing: 1px;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     display: -webkit-box;
                     -webkit-line-clamp: 1;
                     -webkit-box-orient: vertical;
                     // background-color:#0078A8;
                  }

                  .advisory-title-time {
                     position: relative;
                     left: 15rpx;
                  }
               }

            }

            .advisory-right {
               // background-color: #222222;
               width: 33%;
               height: 80%;
               left: 65%;
               position: relative;
               top: 10%;

               image {
                  position: relative;
                  left: 0px;
                  top: -100%;
                  width: 100%;
                  height: 100%;
                  border-radius: 5px;
               }
            }
         }
      }
   }
	
	
	
	

   .cccc {
      position: relative;
      top: -5px;
   }

   .cccc::before {
      position: relative;
      top: 25px;
      content: '';
      width: 30px;
      display: block;
      height: 3.5px;
      background-color: #0BB9C8;
   }



   /* 搜索框 */
   .search-ico,
   .search-ico-1 {
      width: 40upx;
      height: 40upx;
   }

   .search-block {
      width: 94%;
      margin: 0 auto;
      // background-color: #007AFF;
      display: flex;
      flex-direction: row;
      position: relative;
      top: 2.85rem;

      .search-ico-wapper {
         background-color: #F1F1F1;
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: 0upx 0upx 0upx 15upx;
         border-bottom-left-radius: 7px;
         border-top-left-radius: 7px;
      }

      .search-text {
         font-size: 14px;
         background-color: #F1F1F1;
         height: 70upx;
         width: 100%;
         padding-left: 0.5rem;
      }


      .search-ico-wapper1 {
         background-color: #F1F1F1;
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: 0upx 15upx 0upx 0upx;
         border-bottom-right-radius: 7px;
         border-top-right-radius: 7px;
      }
   }
</style>