地址替换

zengh

2022-06-21 4efeb31d5b4921d7e851c256009486ad86bc70e2

 pages/dispatch/dispatch.vue

@@ -1,85 +1,568 @@
<template>
   <view class="container">
      <view class="service-box">
         <u-grid :col="4" :border="false">
            <u-grid-item bg-color="transparent" v-for="(item, index) in serviceButton" :key="index" @click="goBusinessPage(item.url,index)">
               <view class="service-item">
                  <image :src="item.img" mode="widthFix" class="img"></image>
                  <view class="name">{{ item.name }}</view>

   <view class="page-container" style="height: 100%; position: relative;">
      <view class="head top-absolute">
         <u-navbar :is-fixed="false" :border-bottom="false" :is-back="false" title=""
            :background="{ background: '#0BB9C8' }">
            <view class="nav-wrap">

               <view style="position: relative;">

                  <view class="btn-return-box">
                     <view class="btn-return">
                        <i class="uni-btn-icon" @click="goReturnPage"
                           style="color: rgb(255, 255, 255); font-size: 27px;"></i>
                     </view>
                  </view>

                  <span class="header-title">调度指令</span>

                  <u-icon v-if="$store.state.UserData.rname[0].indexOf('保安') == -1" @click="goToAddPage" top='4'
                     class="header-add" name="plus" color="#fff">
                  </u-icon>

               </view>
            </u-grid-item>
         </u-grid>

            </view>
         </u-navbar>
      </view>
      <view class="head">
         <u-navbar :is-fixed="false" :border-bottom="false" :is-back="false" title=""
            :background="{ background: '#0BB9C8' }">
            <view class="nav-wrap">

               <view style="position: relative;">

                  <view class="btn-return-box">
                     <view class="btn-return">
                        <i class="uni-btn-icon" @click="goReturnPage"
                           style="color: rgb(255, 255, 255); font-size: 27px;"></i>
                     </view>
                  </view>

                  <span class="header-title">调度指令</span>

                  <u-icon @click="goToAddPage" top='4' class="header-add" name="plus" color="#fff">
                  </u-icon>

               </view>

            </view>
         </u-navbar>
      </view>

      <view class="wrapper">

         <view class="body">

            <view class="body-content">

               <u-tabs :list="list" :is-scroll="false" :current="current" active-color="#14B9C8"
                  inactive-color="#595959" height="100" @change="change"></u-tabs>

               <u-search v-model='keyValue' placeholder='请输入指令内容' shape="round" class="u-search"
                  input-align="center" height="70" @search='searchValue' @custom='searchValue' @clear='clearValue'
                  @change='changeValue'>
               </u-search>

               <view v-show="current == 0 && newsList.length > 0">
                  <view class="inTmain" v-for="(item,index) in newsList">
                     <u-card :title="item.content" @click="goDetail(item)">
                        <view class="" slot="body">
                           <view>
                              <view style="margin-bottom: 10px;" class="u-body-item-title u-line-2">
                                 发送指令人：{{item.sendName}}</view>
                           </view>
                           <view>
                              <view class="u-body-item-title u-line-2">接受指令人：{{item.receiveName}}</view>
                           </view>
                        </view>
                        <view class="" slot="foot">
                           </u-icon>发送指令时间：{{item.sendTime}}</view>
                     </u-card>
                  </view>
                  <u-loadmore class='msg' :status="status" />
               </view>

               <view v-show="current == 1 && newsList.length > 0">
                  <view class="inTmain" v-for="(item,index) in newsList">
                     <u-card :title="item.content" @click="goDetail(item)">
                        <view class="" slot="body">
                           <view>
                              <view style="margin-bottom: 10px;" class="u-body-item-title u-line-2">
                                 发送指令人：{{item.sendName}}</view>
                           </view>
                           <view>
                              <view class="u-body-item-title u-line-2">接受指令人：{{item.receiveName}}</view>
                           </view>
                        </view>
                        <view class="" slot="foot">
                           </u-icon>发送指令时间：{{item.sendTime}}</view>
                     </u-card>
                  </view>
                  <u-loadmore class='msg' :status="status" />
               </view>

               <view class="msg" v-show='newsList.length == 0'>
                  暂无数据
               </view>

            </view>

         </view>

      </view>
   </view>

</template>

<script>
   import {
      fakeServiceButton
   } from "@/api/mock/dispatch.js";
	
   export default {
      data() {
         return {
            dataList:[],
            serviceButton: []

            list: [],

            current: 0,

            dataList: [],
            newsList: [],

            status: 'loadmore',
            keyValue: '',

            dataList: [],
            newsList: [],
            pagelist: 0,
            pages: 0,
            flag: true,

            pullDown: false

         };
      },
      onLoad() {
			

         if (this.$store.state.UserData.rname[0] == '保安') {

            this.list = [{
               name: '接收指令查询'
            }]
				
            this.getSend();

         } else if (this.$store.state.UserData.rname[0] == '保安公司管理员') {

            this.list = [{
               name: '接收指令查询'
            }]
				
            this.getSend();

         } else {
            this.list = [{
               name: '下发指令查询'
            }, {
               name: '接收指令查询'
            }]
				
            this.getReceive()
         }

      },
      onReachBottom() {
			
         var that = this;

         if (that.flag == false) {
            that.status = 'nomore';
            return
         }
         // 后续将改为与后端联动
         that.status = 'loading';

         setTimeout(() => {
            if (that.current == 0) {
               that.getReceive();
            } else {
               that.getSend();
            }
         }, 1000);
      },

      onPullDownRefresh: function() {
         var that = this;

         this.pullDown = true;
         this.pagelist = 0;
         this.pages = 0;
         this.flag = true;
         this.dataList = [];
         this.newsList = [];
         this.status = 'loading';
         this.keyValue = '';
         setTimeout(() => {
            if (that.current == 0) {
               that.getReceive();
            } else {
               that.getSend();
            }
         }, 1000)

      },
      mounted() {
      },
      methods: {
         onLoad() {
            // 加载服务按钮数据
            fakeServiceButton().then(data => {
               this.serviceButton = data;
         getReceive() {
            var that = this;

            if (that.pagelist < that.pages || that.pagelist == 0) {
               that.pagelist++
            } else if (that.pagelist == that.pages) {
               that.flag = false
               that.status = 'nomore';
               return
            }

            uni.request({
               url: this.$store.state.piAPI + "/directive/page?sendDirectiveId=" + this.$store.state
                  .puserID,
               method: "get",
               data: {
                  current: that.pagelist,
                  size: 10
               },
               success: (res) => {
                  that.pages = res.data.data.pages;

                  var resdata = res.data.data.records;

                  if (this.pullDown == true) {
                     this.pullDown = false;
                     uni.stopPullDownRefresh();
                  }

                  if (resdata.length == 0) {
                     that.flag = false
                     that.status = 'nomore';
                     return
                  } else {
                     resdata.forEach(item => {
                        that.newsList.push(item)
                        that.dataList.push(item)
                     })
                  }

                  if (that.pagelist == that.pages) {
                     that.flag = false
                     that.status = 'nomore';
                     return
                  }

               }
            });
         },
         //页面跳转
         goBusinessPage(url,index){
         getSend() {
            var that = this;

            if (that.pagelist < that.pages || that.pagelist == 0) {
               that.pagelist++
            } else if (that.pagelist == that.pages) {
               that.flag = false
               that.status = 'nomore';
               return
            }

            uni.request({
               url: this.$store.state.piAPI + "/directive/page?receiveDirectiveIds=" + this.$store.state.puserID,
               method: "get",
               data: {
                  current: that.pagelist,
                  size: 10
               },
               success: (res) => {
                  that.pages = res.data.data.pages;

                  var resdata = res.data.data.records;

                  if (this.pullDown == true) {
                     this.pullDown = false;
                     uni.stopPullDownRefresh();
                  }

                  if (resdata.length == 0) {
                     that.flag = false
                     that.status = 'nomore';
                     return
                  } else {
                     resdata.forEach(item => {
                        that.newsList.push(item)
                        that.dataList.push(item)
                     })
                  }

                  if (that.pagelist == that.pages) {
                     that.flag = false
                     that.status = 'nomore';
                     return
                  }

               }
            });
         },
         goDetail(item) {
            uni.navigateTo({
               url:url
               url: './lookDetail?detailData=' + JSON.stringify(item)
            });
         },
         change(index) {
            if (this.current == index) return;
            this.dataList = [];
            this.newsList = [];
            this.pagelist = 0;
            this.pages = 0;
            this.flag = true;
            this.current = index;
            if (index == 0) {
               this.getReceive();
            } else {
               this.getSend();
            }
         },
         searchValue(value) {
            var that = this;
            var str = value.replace(/\s*/g, "");
            if (str == '') {
               return
            } else {
               that.newsList = [];

               if (that.current == 0) {
                  uni.request({
                     url: this.$store.state.piAPI + "/directive/page?receiveDirectiveIds=" + this.$store
                        .state
                        .puserID,
                     method: "get",
                     data: {
                        current: 1,
                        size: 999999,
                        content: str
                     },
                     success: (res) => {
                        var resdata = res.data.data.records;

                        resdata.forEach(item => {
                           that.newsList.push(item)
                        })

                     }
                  });
               } else {
                  uni.request({
                     url: this.$store.state.piAPI + "/directive/page?sendDirectiveId=" + this.$store.state
                        .puserID,
                     method: "get",
                     data: {
                        current: 1,
                        size: 999999,
                        content: str
                     },
                     success: (res) => {
                        var resdata = res.data.data.records;

                        resdata.forEach(item => {
                           that.newsList.push(item)
                        })

                     }
                  });
               }

               that.flag = false
               that.status = 'nomore';
            }
         },
         clearValue() {
            this.keyValue = ''
            this.newsList = [];

            this.dataList.forEach(item => {
               this.newsList.push(item)
            })
         },	

            if (this.pagelist < this.pages) {
               this.flag = true;
               this.status = 'loading';
            } else {
               this.flag = false;
               this.status = 'nomore';
            }
         },
         changeValue(value) {
            if (value == '') {
               this.newsList = [];

               this.dataList.forEach(item => {
                  this.newsList.push(item)
               })

               if (this.pagelist < this.pages) {
                  this.flag = true;
                  this.status = 'loading';
               } else {
                  this.flag = false;
                  this.status = 'nomore';
               }
            }
         },
         goReturnPage() {
            uni.switchTab({
               url: '/pages/home/home'
            });
         },
         goToAddPage() {
            uni.navigateTo({
               url: './imgissue'
            });
         },
      }
   };
</script>


<style lang="scss">
   .container {
      background-color: #f7f7f7;
      min-height: 100vh;
      overflow: hidden;
   }
   .service-box {
      background: #ffffff;
      border-radius: 20px 20px 20px 20px;
      margin: 30rpx 20rpx 0;
      padding: 0rpx 20rpx;
   .page-container {
      position: fixed;
      display: block;
      width: 100%;
      max-height: 100vh;

      .service-item {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         align-items: center;


      .head {
         position: relative;


         width: 100%;
         height: 120rpx;
         font-size: 26rpx;
         font-family: PingFang SC;
         font-weight: 500;
         color: #585b61;

         .img {
            width: 70rpx;
            height: auto;

         .nav-wrap {
            width: 100%;
            height: 44px;
            line-height: 30px;
            padding: 7px 3px;
            height: calc(44px + constant(safe-area-inset-top));
            height: calc(44px + env(safe-area-inset-top));
            color: rgb(255, 255, 255);

            .btn-return-box {
               display: flex;
               align-items: center;
               font-size: 16px;
               box-sizing: border-box;

               .btn-return {
                  position: relative;
                  width: auto;
                  margin: 0 2px;
                  word-break: keep-all;
                  white-space: pre;
                  cursor: pointer;
               }
            }

            .header-title {
               position: absolute;
               top: 0;
               left: 0;
               right: 0;
               bottom: 0;
               margin: auto;
               width: 60%;
               font-weight: 700;
               line-height: 30px;
               font-size: 16px;
               opacity: 1;
               text-overflow: ellipsis;
               text-align: center;
               min-width: 1em;
            }

            .header-add {
               position: absolute;
               top: 0;
               left: auto;
               right: 10px;
               bottom: 0;
               margin: auto;
               display: inline-block;
               font: normal normal normal 14px/1 unibtn;
               text-rendering: auto;
               -webkit-font-smoothing: antialiased;
               font-size: 24px;
            }
         }

      }

      .top-absolute {
         position: fixed;
         top: 0;
         left: 0;
         z-index: 101;
      }

      .wrapper {

         width: 100%;
         display: block;
         height: calc(100% - 44px);
         height: calc(100% - 44px - constant(safe-area-inset-top));
         height: calc(100% - 44px - env(safe-area-inset-top));

         .body {
            width: 100%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;

            .body-content {
               height: auto;

            }

         }

      }
   }
</style>

   .u-card-wrap {
      background-color: $u-bg-color;
      padding: 1px;
   }

   .u-body-item {
      font-size: 32rpx;
      color: #333;
      padding: 20rpx 10rpx;
   }

   .u-body-item image {
      width: 120rpx;
      flex: 0 0 120rpx;
      height: 120rpx;
      border-radius: 8rpx;
      margin-left: 12rpx;
   }

   .u-search {
      padding: 20rpx 30rpx 0 30rpx;
   }

   .inTmain {}

   .msg {
      height: 72rpx;
      line-height: 72rpx;
      text-align: center;
      color: #999;
   }
</style>