dvcp_v2_wxcp_app/src/apps/AppInterview/AppInterview.vue

<template>
  <div class="AppInterview">
    <template v-if="!showDetail">
      <ai-top-fixed>
        <div flex>
          <ai-date placeholder="日期选择" mode="range" @change="handleDateSearch"/>
          <u-search placeholder="请输入标题" :show-action="false" v-model="search.title" @search="current=1,getList()"/>
        </div>
      </ai-top-fixed>
      <template v-if="list.length>0">
        <ai-card 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>
              <ai-image 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)">编辑</div>
            <div class="menu" @tap.stop="handleDelete(e.id)">删除</div>
          </template>
        </ai-card>
        <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>
      <ai-fixed-btn>
        <div class="addBtn iconfont iconfont-iconfangda" @tap="gotoAdd()"/>
      </ai-fixed-btn>
    </template>
    <interview-detail v-else/>
  </div>
</template>

<script>
import AiSelect from "../../components/AiSelect";
import AiTopFixed from "../../components/AiTopFixed";
import AiCard from "../../components/AiCard";
import AiImage from "../../components/AiImage";
import AiDate from "../../components/AiDate";
import AiFixedBtn from "../../components/AiFixedBtn";
import InterviewDetail from "./interviewDetail";
import AiBack from "../../components/AiBack";

export default {
  name: "AppInterview",
  appName: "调查走访",
  inject: {
    root: {}
  },
  components: {AiBack, InterviewDetail, AiFixedBtn, AiDate, AiImage, AiCard, AiTopFixed, AiSelect},
  data() {
    return {
      search: {title: ""},
      list: [],
      current: 1,
      pages: 0,
    }
  },
  computed: {
    loadmore() {
      return this.pages <= this.current ? 'loading ' : 'nomore'
    },
    showDetail() {
      return this.$route.hash == "#add"
    }
  },
  methods: {
    emitShow() {
      document.title = document.title||"调查走访"
      if (this.showDetail) {

      } else {
        this.current = 1;
        this.getList()
      }
    },
    emitReachBottom() {
      this.current++;
      this.getList()
    },
    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.root.goto({hash: "#add", query})
    },
    gotoAdd() {
      this.root.goto({hash: "#add"})
    },
    handleDelete(ids) {
      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?.startDate || v?.endDate
      this.current = 1
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.AppInterview {
  width: 100%;
  min-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>