页面跳转修改

zhouwenxuan

2023-11-15 f5d67b69142c78be1ee996f53b6bb8e4c954761c

 pages/tabBar/information/information.vue

@@ -7,43 +7,53 @@
         <!-- 真正的导航栏内容 -->
         <view class="navBar" >
            <view class="barText">信息发布</view>
            <view >
               <u-button type="text" @click="loginOut" style="color: blue;margin-right: 5px;">退出</u-button>
            </view>
         </view>
      </view>
    <div v-if="loading" style='display: flex;justify-content: center;position: absolute;width:100%;top: 40%;left: 0'>
      <u-loading-icon></u-loading-icon>
    </div>
      <!-- 页面内容 -->
      <view class="contentList">
         <view class="examineList">
            <view class="listHead">
               <u-checkbox-group >
                  <u-checkbox v-model="isReadOnly" :checked="isReadOnly" @change="chooseRead"></u-checkbox>只显示审核通过
               </u-checkbox-group>
					
            </view>
            <view class="listContent" v-if="informationList.length > 0">
         <view style="display: flex;flex-direction: column;margin-bottom: 55px;">
            <view class="examineList">
            <scroll-view :scroll-top="scrollTop" scroll-y="true" class="listContent" @scrolltoupper="upper" v-if="informationList.length > 0"
                       @scrolltolower="lower" @scroll="scroll" lower-threshold="50">
               <view v-for="(item, index) in informationList" :key="index" class="itemContent">
                  <view class="content" @click="toDetail(item)">
                     <text>[{{item.colorContent}}]</text>
                     <text>{{item.title}},{{item.content}}</text>
                     <view class="buttonContent">
                        <u-button v-if="item.buttonContent == '审核通过'" size="mini" class="buttonCo" style="background-color:rgb(17, 204, 33);color: white">
                           {{item.buttonContent}}
                        </u-button>
                        <u-button v-else-if="item.buttonContent == '已驳回'" size="mini" class="buttonCo" style="background-color:rgb(153, 148, 143);color: white">
                           {{item.buttonContent}}
                        </u-button>
                        <u-button v-else type="error" size="mini" class="buttonCo">
                           {{item.buttonContent}}
                        </u-button>
                     </view>
                 <view class="top">
                  <view class="textContent">
                    <text>[{{item.colorContent}}]</text>
                    <text>{{item.title}}</text>
                  </view>
						
               </view>
            </view>
                  <view class="buttonContent">
                    <u-button v-if="item.buttonContent == '审核通过'" size="mini" class="buttonCo" style="background-color:rgb(17, 204, 33);color: white">
                     {{item.buttonContent}}
                    </u-button>
                    <u-button v-else-if="item.buttonContent == '已驳回'" size="mini" class="buttonCo" style="background-color:rgb(153, 148, 143);color: white">
                     {{item.buttonContent}}
                    </u-button>
                    <u-button v-else type="error" size="mini" class="buttonCo">
                     {{item.buttonContent}}
                    </u-button>
                  </view>
                 </view>
                 <view class="bottom">
                  {{item.content}}
                 </view>
                        </view>
                     </view>
              </scroll-view>
            <view v-else>
               <u-empty
                  mode="data"
                  icon="http://cdn.uviewui.com/uview/empty/data.png"
                  margin-top="50%">
               </u-empty>
               <u-empty margin-top="40%" text="数据为空" mode="data"></u-empty>
            </view>
            </view>
         </view>
      </view>
@@ -62,11 +72,14 @@
         return {
            data: {
               pageIndex: 1,
               pageSize: 10000000,
               pageSize: 12,
               searchParams: {
                  reviewStatus: null//2：已审核,null:全部
               }
            },
        total: 0,
        scrollTop: 0,
        loading: false,
            checked: false,
            isReadOnly: false,
            statusBarHeight: 0,
@@ -80,14 +93,29 @@
         uni.hideTabBar();
      },
      onShow() {
      this.data.pageIndex = 1
         this.getInformationList();
      },
      methods: {
         loginOut() {
            uni.clearStorageSync();
            uni.clearStorage();
            uni.navigateTo({
               url: '/pages/index/index'
            })
         },
         getInformationList() {
        this.loading = true
            this.data.searchParams.reviewStatus = this.isReadOnly ? 2 : null;
            getInfo(this.data).then(res => {
               if (res.code == 100){
                  this.informationList = res.data ? res.data : [];
                  let list = res.data?res.data: [];
            if (res.pageIndex != 1) {
              this.informationList = this.informationList.concat(list)
            } else {
              this.informationList = list;
            }
            this.total = res.total
                  if(this.informationList.length > 0) {
                     this.informationList.forEach((item, index) => {
                        this.informationList[index].colorContent = item.warningLevel == 1 ? '红色预警': item.warningLevel == 2 ? '橙色预警': item.warningLevel == 3 ? '黄色预警':'蓝色预警';
@@ -96,27 +124,50 @@
                        this.informationList[index].warningLevel = item.warningLevel;
                     })
                  }
               }
               }else{
            uni.$u.toast(res.msg)
          }
          this.loading = false
            })
         },
         chooseRead(e) {
            this.isReadOnly = e;
        this.data.pageIndex = 1
            this.getInformationList();
         },
         toDetail(item) {
            console.log("item",item)
            uni.setStorageSync('backFlag','info');
            uni.navigateTo({
              url: `/pages/tabBar/notice/detail?data=` + encodeURIComponent(JSON.stringify(item))
            })
         },
         //下拉刷新
         onPullDownRefresh() {
            console.log('refresh');
            setTimeout(() => {
               uni.stopPullDownRefresh();
               this.getInformationList();
            }, 1000);
         },


      upper: function(e) {
        // console.log(e)
      },
      lower: function(e) {
        if (this.data.pageIndex * this.data.pageSize >= this.total){
          // uni.$u.toast('已加载全部数据')
          return
        }
        //并且让页码+1,调用获取数据的方法获取第二页数据
        this.data.pageIndex++
        //此处调用自己获取数据列表的方法
        this.getInformationList()
      },
      scroll: function(e) {
        // console.log(e)
      },

         clickSwitch(e) {
            this.getInformationList();
         }
@@ -125,7 +176,7 @@

</script>

<style>
<style lang="scss" scoped>
.box {
   display: flex; 
   flex-direction: column; 
@@ -141,12 +192,13 @@
   z-index: 1;
}
.navBarBox .navBar {
      background-color:lightgrey;
      height: 40px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
  background-color:#fff;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
.barText{
   text-align: center;
@@ -158,10 +210,12 @@
.statusBar{
   background-color:lightgrey;
}
.contentList{
   display: flex;
   flex-direction: column;
}
// .contentList{
//    display: flex;
//    flex-direction: column;
//   padding-bottom: 65px;
// }

.buttonGroup{
   margin: 18px 12px;
   display: flex;
@@ -215,38 +269,72 @@
   align-items: center;
}
.listHead{
   display: flex;
   align-items: center;
   /* background-color:lightgrey; */
   height: 25px;
   padding: 10px 10px;
  padding: 12px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.listContent{
   display: flex;
   flex-direction: column;
   padding: 0 10px;
  width: calc(100% - 24px);
  margin: 0 12px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
  height: calc(100vh - 162px);
}
.examineList{
  // margin-top: 12px;
  height: calc(100vh - 200px);
  overflow: hidden;
  overflow-y: scroll;
}

.itemContent{
   font-size: 16px;
   color: gray;
   margin-top: 10px;
   border-bottom: 1px solid lightgrey;
	
  font-size: 16px;
  color: #333;
  margin-top: 15px;
  padding: 0 12px 15px;
  border-bottom: 1px solid #ebebeb;

  //&:last-of-type{
  //  border-bottom: none;
  //}
}
.content{
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
  width: 100%;

  .top{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .textContent{
      width: calc(100% - 90px);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .buttonContent{
      width: 80px;
    }
  }
  .bottom{
    width: 100%;
    font-size: 14px;
    color: #666;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
.buttonCo{
   margin-top: 5px;
   margin-bottom: 10px;
   font-size: 13px;
}
.buttonContent{
   float: right; 
   width: 80px;
   margin-top: -5px;
}

/* .divider{
   height: 1px;
   background-color: gray;