assess-app/page_task/draft/index.vue

<template>
  <view class="total-page page-box page-env-20 scroll_content task-bg">
    <Nav :title="'草稿箱'" :genre="1" :back="true" is_fixed></Nav>
    <view>
      <Search :placeholder="'客户姓名或电话'"></Search>

    </view>
    <EnScroll ref="scroll" :navHeight="0" is_tabHeight @onRefresh="onRefresh" @onScrollBottom="onScrollBottom">
      <view class="draft-item r-40 sys-background-fff" v-for="(item,index) in  list">
        <view class="item-left">
          <view class="left-top left-item">
            <view class="top-name sys-weight-600 size-30 text-color-12">{{item.name}}</view>
            <view class="top-product sys-weight-400 size-24 text-color-009 r-10">{{item.product_name}}</view>
          </view>
          <view class="left-content left-item">
            <view class="sys-weight-400 size-24 text-color-12">身份证：</view>
            <view class="sys-weight-600 sys-size-28 text-color-12">{{item.id_number}}</view>
          </view>
          <view class="left-bottom left-item">
            <view class=" size-24 text-color-999">保存时间：</view>
            <view class=" size-24 text-color-999">{{item.created_at}}</view>
          </view>

        </view>
        <view class="item-right">
          <view class="but-item but-edit size-28 sys-weight-500 text-color-fff button-background sys-radius-100">编辑</view>
          <view class="but-item but-del  size-28 sys-weight-500 text-color-666 " @click.stop="delDraft(item.id,index)">删除</view>
        </view>

      </view>
      <en-blank v-if="list.length<=0"></en-blank>

    </EnScroll>
  </view>
</template>

<script>

import {getDraftList} from "@/api/task";
import EnBlank from "@/components/en-utils/en-blank/en-blank.vue";

export default {
  components: {EnBlank},
  data() {
    return {
      list: [],
      page: 1,
      total: null,
      isAjax: false,
    };
  },
  mounted(){
    uni.$on('setNewDraft',()=>{
      if(this.$refs.draftRef){
        this.startList()
      }
    })
    this.startList()
  },
  methods: {
    startList() {
      this.total = 999;
      this.list = [];
      this.page = 1;
      this.isAjax = false;
      this.getDraftList();

    },
    delDraft(draftId,index){
      uni.showModal({
        title: '警告',
        content: '是否删除当前草稿！',
        success:  (res) =>{
          if (res.confirm) {
            delDraft({'draftId':draftId}).then((res)=>{
              this.$refs.draftRef.list.splice(index,1)
            })
          }
        }
      });

    },
    editDraft(id){
      // uni.navigateTo({
      //   url: '/pages-task/add-client/new-add?draftId='+id
      // });
    },
    getDraftList(){
      if (this.isAjax || (this.total <= this.list.length)) {
        return;
      }
      this.isAjax = true;
      getDraftList({'page':this.page}).then((res)=>{
        if(res.code===1){
          this.list.push(...res.data.items)
          this.total = res.data.total
          this.isAjax = false
          ++this.page;
        }
      })
    },
    // 下拉刷新
    onRefresh() {
      // uni.showLoading({
      // 	title: '数据加载中'
      // })
      // setTimeout(() => {
      // 	uni.showToast({
      // 		title: '加载完成',
      // 		icon: 'none'
      // 	})
      // 	this.$refs.scroll.onEndPulling()
      // }, 1000)
      console.log("下拉刷新");
      this.startList()
    },
    // 滚动到底部
    onScrollBottom() {

      this.getDraftList();

      console.log("到底部了");
    },
  },
}
</script>

<style lang="scss">
.draft-item{
  margin: 20rpx 32rpx 0;
  padding: 25rpx 30rpx;
  display: flex;
  justify-content: space-between;
  .item-left{
    .left-item{
      display: flex;
      justify-content: left;
      align-items: center;
    }
    .left-top{
      height: 52rpx;
      .top-product{
        background-color: rgba(15, 177, 96, 0.1);
        padding: 9rpx 22rpx;
        margin-left: 20rpx;
      }
    }
    .left-content{
      margin-top: 24rpx;
      height: 40rpx;
    }
    .left-bottom{
      margin-top: 24rpx;
      height: 34rpx;
    }

  }
  .item-right{
    padding-top: 20rpx;
    .but-item{
      width: 172rpx;
      height: 70rpx;
      text-align: center;
      line-height: 70rpx;
    }
    .but-del{
      margin-top: 15rpx;
      box-sizing: border-box;
      border-radius: 99rpx 99rpx 99rpx 99rpx;
      border: 1rpx solid #666666;
    }
  }

}

</style>