crm-mobile/pages_task/search.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar title="任务" />
			
      <view class="search-box">
        <text class="wk wk-search" />
        <input
          v-model="keyword"
          type="text"
          :maxlength="50"
          placeholder="请输入任务名称"
          placeholder-class="wk-placeholder"
          class="input-core">
        <image
          :src="$static('images/icon/delete_fill.png')"
          alt=""
          class="delete-icon"
          @click="handleClear" />
      </view>

      <view class="list-view">
        <wk-scroll-view
          :status="listStatus"
          :refresh="false"
          class="list-scroll"
          @loadmore="getList()">
          <task-item
            v-for="(item, index) in listData"
            :key="index"
            :index="index"
            :item-data="item"
            @status="handleToChangeStatus" />
        </wk-scroll-view>
      </view>
    </view>
		
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        :content="dialogMsg"
        type="warning"
        @confirm="handleDialogConfirm" />
    </uni-popup>
  </view>
</template>

<script>
  import {
    QueryTaskList,
    SetWorkTaskStatus,
    SaveWorkTask
  } from 'API/oa/task'
	
  import TaskItem from './components/taskItem.vue'

  export default {
    name: 'TaskSearch',
    components: {
      TaskItem
    },
    data() {
      return {
        keyword: '',
        timer: null,

        params: {
          page: 0,
          limit: 15,
          type: 0,
          search: ''
        },
        listStatus: 'more',
        listData: [],
				
        dialogMsg: '',
        dialogConfig: null
      }
    },
    watch: {
      keyword(val) {
        // 禁止输入 emoji
        const regStr = /[\ud800-\udbff]|[\udc00-\udfff]/g;
        if (regStr.test(val)) {
          val = val.replace(regStr, '');
        }
        this.keyword = val
				
        this.params.page = 0
        if (this.timer) {
          clearTimeout(this.timer)
          this.timer = null
        }
        this.timer = setTimeout(() => {
          clearTimeout(this.timer)
          this.timer = null
          this.params.search = this.keyword
          this.getList()
        }, 800)
      },
    },
    methods: {
      /**
       * 获取选项列表
       */
      getList() {
        this.params.page++

        this.listStatus = 'loading'

        QueryTaskList({
					...this.params
        }).then(response => {
          const res = response.page
					
          if (this.params.page === 1) {
            this.listData = []
          }
          console.log(res.list)
          this.listData = this.listData.concat(res.list)
          this.listStatus = res.lastPage ? 'noMore' : 'more'
        }).catch(() => {
          this.listStatus = 'more'
        })
      },

      handleClear() {
        this.keyword = ''
      },
			
      handleToChangeStatus(data) {
        this.dialogMsg = '您确定要更改该任务的状态吗?'
        this.dialogConfig = data
        this.$refs.popup.open()
      },
			
      handleDialogConfirm(next) {
        if (!this.dialogConfig) {
          next()
          return
        }
        SetWorkTaskStatus({
          taskId: this.dialogConfig.taskId,
          status: this.dialogConfig.status
        }).then(() => {
          this.$toast('更改成功')
          const index = this.dialogConfig.index
          this.listData[index].status = this.dialogConfig.status
          this.$set(this.listData, index, this.listData[index])
          next()
          this.dialogConfig = null
        }).catch(() => {})
      },
    }
  }
</script>

<style scoped lang="scss">
	.main-container {
		.search-box {
			background-color: white;
			padding: 10rpx 30rpx;
			@include left;
			
			.wk-search {
				font-size: 38rpx;
				color: $light;
			}
		
			.input-core {
				flex: 1;
				height: 76rpx;
				font-size: 28rpx;
				padding: 0 20rpx;
				display: block;
			}
		
			.delete-icon {
				width: 32rpx;
				height: 32rpx;
			}
		}
		
		.list-view {
			flex: 1;
			overflow: hidden;
			margin-top: 15rpx;

			.list-scroll {
				width: 100%;
				height: 100%;
				overflow: hidden;
				.cell {
					border-bottom: 1rpx solid $border-color;
					padding: 20rpx 0;
					.cell-title {
						font-size: 30rpx;
					}
					.cell-desc {
						font-size: 24rpx;
						color: $gray;
					}
				}
			}
		}
	}
</style>