nsgk_mobile/src/views/onlineHome/homestead/homeApplication/houseAnnounce.vue

<template>
  <div>
    <van-nav-bar
      left-arrow
      title="公示查询"
      fixed
      placeholder
      @click-left="$router.back()"
    >
      <template #right>
        <van-icon name="@/../static/images/icon/icon_flow.png" size="20" @click="openFilter"/>
      </template>
    </van-nav-bar>

    <van-search
      v-model="queryParams.memberName"
      placeholder="请输入姓名"
      shape="round"
      @search="getList(0)"
    />

    <van-pull-refresh v-model="refreshing" @refresh="getList()">
      <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        finished-text="没有更多了"
        @load="getList('+1')"
      >
        <van-swipe-cell v-for="(item,index) in list" :key="index" class="delegate">
          <van-cell :title="item.projectName" center @click="viewItem(item)">
            <template #icon>
              <van-icon :name="{
                '1': '@/../static/images/onlineHome/icon_zjd8.png',
                '2': '@/../static/images/onlineHome/icon_zjd8.png',
                '3': '@/../static/images/onlineHome/icon_zjd8.png',
                '4': '@/../static/images/onlineHome/icon_zjd8.png',
                }[item.announceStatus]" size="30" color="#539FFD" style="margin-right: 10px;" />
            </template>
            <template #label>
              <p style="font-weight: bold;">{{formatDict(options.announce_type, item.announceType)}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.startDate}} - {{item.endDate}}</p>
            </template>
            <template #title>
              <p style="font-weight: bold;">{{item.projectName}}</p>
            </template>
            <template #right-icon>
              <p :style="{'font-weight': 'bold',
                color: {
                  '1': '#000000',
                  '2': '#0066FF',
                  '3': 'orange',
                  '4': '#33cc33',
                }[item.announceStatus],
              }">{{formatDict(options.announce_status, item.announceStatus)}}</p>
            </template>
          </van-cell>
          <template #right>
            <van-row style="height: 100%;">
              <van-col style="height: 100%;">
                <van-button square text="二维码" type="info" style="height: 100%;" @click="openQrCodePreview(item.id)"/>
              </van-col>
            </van-row>
          </template>
        </van-swipe-cell>
      </van-list>
    </van-pull-refresh>

    <onlineHomeIndex :current="1"></onlineHomeIndex>

    <van-popup
      v-model="filterVisible"
      closeable
      position="top"
      :close-on-click-overlay="true"
      :lazy-render="false"
    >
      <van-form>
        <van-cell title="筛选查询"></van-cell>
        <field-select
          v-model="queryParams.announceStatus"
          label="公示状态"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="公示状态筛选"
          :columns="options.announce_status"
        />
        <field-select
          v-model="queryParams.announceType"
          label="公示类型"
          value-key="dictLabel"
          data-key="dictValue"
          placeholder="公示类型筛选"
          :columns="options.announce_type"
        />
        <field-date-picker
          v-model="queryParams.startDate"
          label="起始日期"
          formatter="yyyy-MM-dd"
          placeholder="起始日期"
        />
        <field-date-picker
          v-model="queryParams.endDate"
          label="结束日期"
          formatter="yyyy-MM-dd"
          placeholder="结束日期"
        />
        <div style="margin: 0.2rem; text-align: right;">
          <van-button type="info" native-type="submit" size="small" @click="resetQuery"> 重置 </van-button>
          <van-button type="primary" native-type="submit" size="small" @click="getList(0)"> 查询 </van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import {listAnnounce, getProposer} from "@/api/onlineHome/homestead/houseAnnounce";
import FieldSelect from "@/components/form/FieldSelect";
import { formatDate } from "element-ui/src/utils/date-util.js"
import { ImagePreview } from 'vant';
import onlineHomeIndex from "@/views/onlineHomeIndex";
import FieldDatePicker from "@/components/form/FieldDatePicker";

export default {
  components: {FieldSelect, onlineHomeIndex, FieldDatePicker},
  name: "HouseAnnounce",
  data() {
    return {
      list: [],
      total: 0,
      // ?pageNum=1&pageSize=10&orderByColumn=createTime&isAsc=desc&startDate=2022-04-13&endDate=2022-04-12&announceStatus=2
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'createTime',
        isAsc: 'desc',
        startDate: '',
        endDate: '',
        announceStatus: null,
        memberName: '',
        announceType: null,
      },
      refreshing: false,
      loading: false,
      finished: false,
      options: {
        announce_status: [],
        announce_type: [],
      },
      filterVisible: false,
    }
  },
  created() {
    this.initOptions();
    this.getList();
  },
  methods: {
    getList(target) {
      let type = typeof (target);
      console.log(type, target);
      if (target === 0) {
        this.refreshing = true;
        this.finished = true;
        this.total = 0;
        this.queryParams.pageNum = 1;
        this.list = [];
        this.filterVisible = false;
      }
      else if (type === 'number')
        this.queryParams.pageNum = target;
      else if (type === 'string') {
        this.queryParams.pageNum = eval(this.queryParams.pageNum + target)
      }
      else
      {
        this.refreshing = true;
        this.finished = true;
        this.resetQuery();
        this.total = 0;
        this.queryParams.pageNum = 1;
        this.list = []
      }
      listAnnounce(this.queryParams).then((response) => {
        console.log(response)
        if (response.rows.length === 0) {
          this.finished = true;
          return;
        }
        response.rows.forEach((e) => {
          this.list.push(e);
        });
        this.total += response.rows.length;
        this.finished = this.total >= response.total;
      }).finally(() => {
        this.loading = false;
        this.refreshing = false;
      });
    },
    viewItem(item) {
      window.location = 'proposerLite?type=view&id=' + item.applyProposerId;
    },
    initOptions() {
      for(let k in this.options)
      {
        this.houseGetDicts(k).then((res) => {
          this.options[k] = res.data;
        });
      }
    },
    formatDict(dict, value) {
      return this.selectDictLabel(dict, value);
    },
    openFilter() {
      this.filterVisible = true;
    },
    onDatePickerConfirm(data) {
      if(data)
      {
        this.queryParams.startDate = formatDate(data[0], 'yyyy-MM-dd');
        this.queryParams.endDate = formatDate(data[1], 'yyyy-MM-dd');
      }
      else {
        this.queryParams.startDate = '';
        this.queryParams.endDate = '';
      }
    },
    resetQuery() {
      this.onDatePickerConfirm();
      this.queryParams.announceStatus = null;
      this.queryParams.announceType = null;
    },
    openQrCodePreview(id) {
      getProposer(id).then((resp) => {
        ImagePreview([this.$store.getters.baseRoutingUrl + resp.data.qrCodeUrl]);
      }).catch((e) => {
        this.$toast.fail('获取二维码失败!');
      });
    },
  },
}
</script>

<style scoped>
.delegate {
  width: 96%;
  margin: 3% 2% 3% 2%;
  border-radius: 0.18rem;
  overflow: hidden;
  box-shadow: 0.1rem 0.1rem 0.15rem 0.02rem rgba(0,0,0,0.16);
}
</style>