页面跳转修改

zhouwenxuan

2023-11-15 f5d67b69142c78be1ee996f53b6bb8e4c954761c

 pages/tabBar/response/response.vue

@@ -7,21 +7,29 @@
         <!-- 真正的导航栏内容 -->
         <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="responseList" v-if="responseList.length > 0">
         <view v-for="(item, index) in responseList" :key="index" class="itemContent">
            <view class="timeLeft">
               <text>{{item.time}}</text>
               <text>{{item.timeMin}}</text>
            </view>
		
    <scroll-view :scroll-top="scrollTop" scroll-y="true" class="responseList" @scrolltoupper="upper" v-if="responseList.length > 0"
                 @scrolltolower="lower" @scroll="scroll" lower-threshold="50">
         <view v-for="(item, index) in responseList" :key="index" class="itemContent" @click="toDetail(item)">
            <view class="contentRight"> 
               <text>{{item.content}}</text>
               <text style="color: rgb(76, 197, 248);" @click="toDetail(item)">[查看信息详情]</text>
          <view style="font-size: 14px">{{item.receiveUnit}}</view>
          <text><span style="margin-right: 4px">{{item.recipienterName}}</span>对<span style="margin:0 4px">[{{ item.title }}]</span>进行了“已安排部署”叫应。</text>
            </view>
        <view class="timeLeft">
          <text style="margin-right: 10px">{{item.time}}</text>
          <text>{{item.timeMin}}</text>
        </view>
         </view>
      </view>
    </scroll-view>
      <view v-else>
         <u-empty
            mode="data"
@@ -44,8 +52,11 @@
         return {
            data: {
               pageIndex: 1,
               pageSize: 1000
               pageSize: 10
            },
        total: 0,
        scrollTop: 0,
        loading: false,
            // 状态栏高度
            statusBarHeight: 0,
            responseList: [],
@@ -53,6 +64,7 @@
         }
      },
      onShow () {
      this.data.pageIndex = 1
         this.getResponseList();
      },
      onLoad() {
@@ -61,21 +73,38 @@
         uni.hideTabBar();
      },
      methods: {
         loginOut() {
            uni.clearStorageSync();
            uni.clearStorage();
            uni.navigateTo({
               url: '/pages/index/index'
            })
         },
         getResponseList() {
        this.loading = true


            getResponse(this.data).then(res => {
               console.log("res",res);
               if (res.code === 100) {
                  this.responseList = res.data ? res.data : [];
                  let list = res.data ? res.data : [];
            if (res.pageIndex != 1) {
              this.responseList = this.responseList.concat(list)
            } else {
              this.responseList = list;
            }
            this.total = res.total
                  if (this.responseList.length > 0) {
                     this.responseList.forEach((item, index) => {
                        this.responseList[index].time = item.responseTime.substring(0,10);
                        this.responseList[index].timeMin = item.responseTime.substring(10,19);
                        this.responseList[index].content = item.receiveUnit + " " + item.recipienterName + " " + "在" + item.title + ' 进行了“已安排部署”叫应。';
                        // this.responseList[index].content = item.receiveUnit + " " + item.recipienterName + " " + "在" + item.title + ' 进行了“已安排部署”叫应。';
                     })
                  }
               }else {
            uni.$u.toast(res.msg)
                  this.responseList = [];
               }
          this.loading = false
            }).catch(err=>{})
         },
         toDetail(item) {
@@ -83,6 +112,7 @@
            getDetail({id: item.id}).then(res => {
          console.log("response",res)
               if(res.code == 100) {
                  uni.setStorageSync('backFlag','response');
                  uni.navigateTo({
                    url: `/pages/tabBar/notice/detail?data=` + encodeURIComponent(JSON.stringify(res.data))
                  })
@@ -97,11 +127,28 @@
               this.getResponseList();
            }, 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.getResponseList()
      },
      scroll: function(e) {
        // console.log(e)
      },
      }
   }
</script>

<style>
<style lang="scss" scoped>
.navBarBox .navBar {
  background-color:#fff;
  height: 50px;
@@ -133,38 +180,49 @@
.responseList{
  display: flex;
  flex-direction: column;
  margin: 0 12px;
  width: calc(100% - 24px);
  height: calc(100vh - 124px);
  margin: 12px 12px 0;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
  margin-top: 12px;
  
}
.itemContent{
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333;
  margin-top: 15px;
  padding: 0 12px;
  border-bottom: 1px solid #ebebeb;

  &:last-of-type{
    border-bottom: none;
  .timeLeft{
    display: flex;
    align-items: center;
    justify-content: left;
    margin-bottom: 15px;
    color: #11cc21;
  }
}
.timeLeft{
   border-radius: 5px;
   padding: 15px 15px;
   background-color: rgb(174, 228, 255) ;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   margin-bottom: 15px;
}
.contentRight{
   flex: 1;
   font-size: 18px;
   margin: 0 5px 15px 8px;
  .contentRight{
    width: 100%;
    flex: 1;
     font-size: 16px;
    margin-bottom: 6px;
    view{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    text{
      overflow: hidden;            //溢出内容隐藏
      text-overflow: ellipsis;      //文本溢出部分用省略号表示
      display: -webkit-box;         //特别显示模式
      -webkit-line-clamp: 2;         //行数
      line-clamp: 2;
      -webkit-box-orient: vertical;   //盒子中内容竖直排列
    }
  }

  // &:last-of-type{
  //   border-bottom: none;
  // }
}
</style>