ShibeiWorkPlatform_Frontend/src/views/modules/visual/communityGovern/resibuzz.vue

<template>

  <div class="g-r">
    <div class="m-tb">
      <cpt-card>
        <div class="title">
          <img src="@/assets/img/shuju/title-tip.png" />
          <span>居民需求</span>
        </div>

        <div class="tb">
          <cpt-tb :col-list="demand.colList"
                  :loading="demand.loading"
                  :header="demand.header"
                  :list="demand.list"></cpt-tb>

          <div class="m-pagination">
            <el-pagination :current-page="demand.pageNo"
                           :page-size="demand.pageSize"
                           :total="demand.total"
                           background
                           layout="prev, pager, next"
                           @current-change="handlePageNoChange_demand">
            </el-pagination>
          </div>
        </div>
      </cpt-card>
    </div>

  </div>

</template>

<script>
import { Loading } from "element-ui"; //引入Loading服务
import { requestPost } from "@/js/dai/request";
import cptCard from "@/views/modules/visual/cpts/card";
import cptTb from "@/views/modules/visual/cpts/tb";

export default {
  name: "HomeMap",
  data () {
    return {

      userId: "",



      demand: {
        loading: true,
        colList: [
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "15%",
          },
          {
            align: "center",
            width: "15%",
          },
          {
            align: "center",
            width: "40%",
          },
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "10%",
          },
        ],
        header: ["序号", "服务时间", "需求类型", "需求内容", "状态", "操作"],
        list: [],
        pageSize: 5,
        pageNo: 1,
        total: 0,
      },
    };
  },

  props: {
    uid: {
      type: String,
      default: "",
      // default: "8ada68cb6f1e4b9a8333348a39ef3aee",
    },
  },

  computed: {},

  components: {
    cptCard,
    cptTb,
  },

  watch: {
    uid (id) {
      this.userId = id;
    },
    userId () {
      this.getApiData();
      window.scrollTo(0, 0);
    },
  },

  async mounted () {
    this.userId = this.uid;
    this.getApiData();
  },

  methods: {
    handleSearch () { },

    getApiData () {

      this.getDemandData();
    },

    toUserInfo (uid) {
      this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
    },


    handlePageNoChange_demand (val) {
      this.demand.pageNo = val;
      this.getDemandData();
    },

    //加载组织数据
    async getDemandData () {
      const url =
        "http://yapi.elinkservice.cn/mock/245/heart/userdemand/mydemand";
      let params = {
        userId: this.userId,
        pageNo: this.demand.pageNo,
        pageSize: this.demand.pageSize,
      };

      const { data, code, msg } = await requestPost(url, params);
      this.demand.loading = false;

      if (code === 0) {
        this.demand.total = data.total;
        this.demand.list = data.list.map((item) => {
          return [
            { type: "index" },
            item.wantServiceTime,
            item.content,
            item.categoryName,
            item.statusName,
            { type: "operate", list: ["查看"] },
          ];
        });
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/resibuzz.scss"
  scoped
></style>