dvcp_v2_wxcp_app/src/apps/AppInterview/AppInterview.vue

<template>
  <div class="AppInterview">
    <AiTopFixed>
      <div flex>
        <AiDate placeholder="日期选择" mode="range" @change="handleDateSearch"/>
        <u-search placeholder="请输入标题" :show-action="false" v-model="search.title" @search="current=1,getList()"/>
      </div>
    </AiTopFixed>
    <template v-if="list.length>0">
      <AiCard :ref="'aiCard' + index" v-for="(e,index) in list" :key="index" @click.native="goDetail(e.id,1)">
        <template #custom>
          <div flex>
            <b class="fill">{{ e.title }}</b>
          </div>
          <div flex v-if="!!e.fileList" class="wrap" @click.stop>
            <AiImage v-for="(op,i) in e.fileList.slice(0,3)" :src="op.accessUrl" preview :key="i"/>
          </div>
          <div class="bottom">{{ e.createTime }}</div>
        </template>
        <template #menu>
          <div class="menu" @tap.stop="goDetail(e.id,index)">编辑</div>
          <div class="menu" @tap.stop="handleDelete(e.id, index)">删除</div>
        </template>
      </AiCard>
      <u-loadmore :status="loadmore" color="#999" font-size="24"
                  margin-top="32" margin-bottom="80"/>
    </template>
    <div class="no-message" v-else>
      <image src="https://cdn.cunwuyun.cn/wxAdmin/img/message.png"/>
      <p>您还未添加过入户调查走访<br>点击<b>新增按钮</b>试试吧~</p>
    </div>
    <AiFixedBtn>
      <div class="addBtn iconfont iconfont-iconfangda" @tap="gotoAdd()"/>
    </AiFixedBtn>
  </div>
</template>

<script>
import qs from "query-string"

export default {
  name: "AppInterview",
  appName: "调查走访",
  inject: {
    root: {}
  },
  data() {
    return {
      search: {title: ""},
      list: [],
      current: 1,
      pages: 0,
    }
  },
  computed: {
    loadmore() {
      return this.pages <= this.current ? 'loading ' : 'nomore'
    }
  },
  methods: {
    getList() {
      this.$http.post('/app/appinterview/list-xcx', null, {
        params: {
          current: this.current,
          size: 10,
          ...this.search
        }
      }).then(res => {
        if (res?.data) {
          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
          this.pages = res.data.pages
        }
      })
    },
    goDetail(id, readonly) {
      let query = {id}
      readonly && (query.detail = 1)
      this.$refs[`aiCard${index}`][0].handleClose()
      uni.navigateTo({url: `./interviewDetail?${qs.stringify(query)}`})
    },
    gotoAdd() {
      uni.navigateTo({url: `./interviewDetail`})
    },
    handleDelete(ids, index) {
      this.$refs[`aiCard${index}`][0].handleClose()
      this.$confirm("是否要删除该调查走访").then(() => {
        this.$http.post("/app/appinterview/delete", null, {
          params: {ids}
        }).then(res => {
          if (res?.code == 0) {
            this.$u.toast("删除成功!")
            this.getList()
          }
        })
      })
    },
    handleDateSearch(v) {
      this.search.startTime = v?.startDate
      this.search.endTime = v?.endDate || v?.startDate
      this.current = 1
      this.getList()
    }
  },
  onShow() {
    document.title = "调查走访"
    this.current = 1;
    this.getList()
  },
  onReachBottom() {
    this.current++;
    this.getList()
  },
}
</script>

<style lang="scss" scoped>
.AppInterview {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: absolute;
  background: #fff;

  .no-message {
    margin-top: 140px;
    text-align: center;
    color: #888;
    font-size: 30px;

    b {
      font-size: 32px;
      color: $uni-color-primary;
      padding: 0 8px;
    }

    image {
      width: 320px;
      height: 240px;
    }
  }

  ::v-deep .AiCard {
    width: 100%;
    min-height: 160px;
    background: #FFFFFF;
    padding: 32px 32px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;

    b {
      display: block;
      width: 100%;
      font-size: 30px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #333;
      margin-right: 60px;
      margin-bottom: 20px;
    }

    .iconfont-iconMore {
      color: #666;
      position: absolute;
      right: 32px;
      top: 32px;
    }

    .bottom {
      font-size: 24px;
      color: #999999;
      padding: 24px 0;
      border-bottom: 1px solid rgba(221, 221, 221, .4);
    }

    .AiImage {
      width: 30%;
      margin-bottom: 8px;
      margin-right: 8px;

      image {
        width: 100%;
        height: 218px;
      }
    }
  }

  .addBtn {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    background: $uni-color-primary;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    font-size: 48px;
    color: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .menu {
    text-align: center;
    line-height: 80px;
    width: 192px;
    height: 80px;
    font-size: 28px;
    font-weight: 400;
    color: #333333;
  }

  ::v-deep .u-search {
    margin-bottom: 0 !important;
    padding-left: 146px;
    box-shadow: none;

    .u-content {
      padding-left: 50px;
      box-sizing: border-box;
    }
  }
}
</style>