From ca3a9e8fa3070148e8e3f0096b3f20424c162484 Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Mon, 6 Dec 2021 17:13:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E5=91=98=E8=AF=A6=E6=83=85-=E5=B1=85?=
 =?UTF-8?q?=E6=B0=91=E9=9C=80=E6=B1=82=E6=A8=A1=E5=9D=97=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scss/{ => modules/visual}/people.scss     |  69 +++++--
 src/router/index.js                           |   3 +-
 .../visual/basicinfo/cpts/people-more.vue     |   2 +-
 src/views/modules/visual/basicinfo/people.vue | 101 +++++++++-
 .../communityGovern/cpts/people-more.vue      |   2 +-
 .../modules/visual/communityGovern/people.vue |   2 +-
 src/views/modules/visual/cpts/loading.vue     |  68 +++++++
 src/views/modules/visual/cpts/tb.vue          | 184 ++++++++++++++++++
 8 files changed, 408 insertions(+), 23 deletions(-)
 rename src/assets/scss/{ => modules/visual}/people.scss (90%)
 create mode 100644 src/views/modules/visual/cpts/loading.vue
 create mode 100644 src/views/modules/visual/cpts/tb.vue

diff --git a/src/assets/scss/people.scss b/src/assets/scss/modules/visual/people.scss
similarity index 90%
rename from src/assets/scss/people.scss
rename to src/assets/scss/modules/visual/people.scss
index ea88d05f..0f6ca331 100644
--- a/src/assets/scss/people.scss
+++ b/src/assets/scss/modules/visual/people.scss
@@ -1,22 +1,24 @@
-@import "c/config";
-@import "c/function";
+@import "../../c/config";
+@import "../../c/function";
 
 .g-cpt {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    // justify-content: space-around;
-    // .g-l {
-    //     margin-right: auto;
-    // }
-    // .g-r {
-    //     margin-left: auto;
-    // }
+    .g-l {
+        width: 850px;
+        margin-bottom: 20px;
+    }
+
+    .g-r {
+        margin-left: 6px;
+        width: calc(100% - 850px - 6px);
+        min-width: 850px;
+    }
 }
 
 .m-people {
     position: relative;
-    width: 850px;
 
     .title {
         padding: 10px;
@@ -286,7 +288,6 @@
 .m-relation {
     position: relative;
     margin-top: 20px;
-    width: 850px;
 
     .title {
         padding: 10px;
@@ -432,3 +433,49 @@
         }
     }
 }
+
+.m-tb {
+    .title {
+        padding: 10px;
+        font-size: 22px;
+        font-family: PingFang SC;
+        font-weight: 800;
+        color: #ffffff;
+        display: flex;
+        align-items: center;
+
+        img {
+            display: block;
+            margin-right: 5px;
+        }
+        span {
+            display: block;
+        }
+    }
+}
+
+.m-pagination {
+    box-sizing: border-box;
+    margin-top: 20px;
+    width: 100%;
+    height: 40px;
+    display: flex;
+    justify-content: flex-end;
+
+    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+        background: #0266d1;
+        color: #000d3f;
+    }
+
+    /deep/ .el-pagination .el-pager li {
+        background: #002e74;
+    }
+
+    /deep/ .el-pagination .btn-prev {
+        background: #002e74;
+    }
+
+    /deep/ .el-pagination .btn-next {
+        background: #002e74;
+    }
+}
diff --git a/src/router/index.js b/src/router/index.js
index 74065fe0..9d627dfa 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -98,7 +98,8 @@ export const moduleShujuRoutes = {
       },
     },
     {
-      path: "/main-shuju/visual-basicinfo-people",
+      path: "/main-shuju/visual-basicinfo-people/:uid",
+      props: true,
       component: () => import("@/views/modules/visual/basicinfo/people"),
       name: "visual-basicinfo-people",
       meta: {
diff --git a/src/views/modules/visual/basicinfo/cpts/people-more.vue b/src/views/modules/visual/basicinfo/cpts/people-more.vue
index a634aade..6198cc91 100644
--- a/src/views/modules/visual/basicinfo/cpts/people-more.vue
+++ b/src/views/modules/visual/basicinfo/cpts/people-more.vue
@@ -500,4 +500,4 @@ export default {
 };
 </script>
 
-<style lang="scss" src="@/assets/scss/people.scss" scoped></style>
+<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style>
diff --git a/src/views/modules/visual/basicinfo/people.vue b/src/views/modules/visual/basicinfo/people.vue
index a75bebad..4ecfb1e9 100644
--- a/src/views/modules/visual/basicinfo/people.vue
+++ b/src/views/modules/visual/basicinfo/people.vue
@@ -133,7 +133,7 @@
 
             <div
               class="rel z-zuo-2"
-              @click="userId = houseInfo.userList[0].userId"
+              @click="toUserInfo(houseInfo.userList[0].userId)"
               v-if="houseInfo.userList[0]"
             >
               <img
@@ -159,7 +159,7 @@
 
             <div
               class="rel z-you-2"
-              @click="userId = houseInfo.userList[1].userId"
+              @click="toUserInfo(houseInfo.userList[1].userId)"
               v-if="houseInfo.userList[1]"
             >
               <img
@@ -185,7 +185,7 @@
 
             <div
               class="rel z-zuo-1"
-              @click="userId = houseInfo.userList[2].userId"
+              @click="toUserInfo(houseInfo.userList[2].userId)"
               v-if="houseInfo.userList[2]"
             >
               <img
@@ -211,7 +211,7 @@
 
             <div
               class="rel z-you-1"
-              @click="userId = houseInfo.userList[3].userId"
+              @click="toUserInfo(houseInfo.userList[3].userId)"
               v-if="houseInfo.userList[3]"
             >
               <img
@@ -237,7 +237,7 @@
 
             <div
               class="rel z-zuo-3"
-              @click="userId = houseInfo.userList[4].userId"
+              @click="toUserInfo(houseInfo.userList[4].userId)"
               v-if="houseInfo.userList[4]"
             >
               <img
@@ -263,7 +263,7 @@
 
             <div
               class="rel z-you-3"
-              @click="userId = houseInfo.userList[5].userId"
+              @click="toUserInfo(houseInfo.userList[5].userId)"
               v-if="houseInfo.userList[5]"
             >
               <img
@@ -290,7 +290,36 @@
         </cpt-card>
       </div>
     </div>
-    <div class="g-r"></div>
+    <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
+              :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>
   </div>
 </template>
 
@@ -299,6 +328,7 @@ import { Loading } from "element-ui"; //引入Loading服务
 import { requestPost } from "@/js/dai/request";
 import cptCard from "@/views/modules/visual/cpts/card";
 import peopleMore from "@/views/modules/visual/basicinfo/cpts/people-more";
+import cptTb from "@/views/modules/visual/cpts/tb";
 
 export default {
   name: "HomeMap",
@@ -329,6 +359,15 @@ export default {
           // },
         ],
       },
+
+      demand: {
+        loading: true,
+        header: ["序号", "服务时间", "需求类型", "需求内容", "状态", "操作"],
+        list: [],
+        pageSize: 5,
+        pageNo: 1,
+        total: 0,
+      },
     };
   },
 
@@ -345,6 +384,7 @@ export default {
   components: {
     cptCard,
     peopleMore,
+    cptTb,
   },
 
   watch: {
@@ -368,6 +408,11 @@ export default {
     getApiData() {
       this.getInfo();
       this.getHouseInfo();
+      this.getDemandData();
+    },
+
+    toUserInfo(uid) {
+      this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
     },
 
     //加载组织数据
@@ -401,8 +446,48 @@ export default {
         this.$message.error(msg);
       }
     },
+
+    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,
+      };
+
+      this.demand.loading = true;
+      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/people.scss" scoped></style>
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/people.scss"
+  scoped
+></style>
diff --git a/src/views/modules/visual/communityGovern/cpts/people-more.vue b/src/views/modules/visual/communityGovern/cpts/people-more.vue
index a634aade..6198cc91 100644
--- a/src/views/modules/visual/communityGovern/cpts/people-more.vue
+++ b/src/views/modules/visual/communityGovern/cpts/people-more.vue
@@ -500,4 +500,4 @@ export default {
 };
 </script>
 
-<style lang="scss" src="@/assets/scss/people.scss" scoped></style>
+<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style>
diff --git a/src/views/modules/visual/communityGovern/people.vue b/src/views/modules/visual/communityGovern/people.vue
index a75bebad..63f5c754 100644
--- a/src/views/modules/visual/communityGovern/people.vue
+++ b/src/views/modules/visual/communityGovern/people.vue
@@ -405,4 +405,4 @@ export default {
 };
 </script>
 
-<style lang="scss" src="@/assets/scss/people.scss" scoped></style>
+<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style>
diff --git a/src/views/modules/visual/cpts/loading.vue b/src/views/modules/visual/cpts/loading.vue
new file mode 100644
index 00000000..cc8bda6f
--- /dev/null
+++ b/src/views/modules/visual/cpts/loading.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="screen-loading">
+    <svg width="50px"
+         height="50px">
+      <circle cx="25"
+              cy="25"
+              r="20"
+              fill="transparent"
+              stroke-width="3"
+              stroke-dasharray="31.415, 31.415"
+              stroke="#29cdff"
+              stroke-linecap="round">
+        <animateTransform attributeName="transform"
+                          type="rotate"
+                          values="0, 25 25;360, 25 25"
+                          dur="1.5s"
+                          repeatCount="indefinite" />
+        <animate attributeName="stroke"
+                 values="#02bcfe;#3be6cb;#02bcfe"
+                 dur="3s"
+                 repeatCount="indefinite" />
+      </circle>
+
+      <circle cx="25"
+              cy="25"
+              r="10"
+              fill="transparent"
+              stroke-width="3"
+              stroke-dasharray="15.7, 15.7"
+              stroke="#29cdff"
+              stroke-linecap="round">
+        <animateTransform attributeName="transform"
+                          type="rotate"
+                          values="360, 25 25;0, 25 25"
+                          dur="1.5s"
+                          repeatCount="indefinite" />
+        <animate attributeName="stroke"
+                 values="#3be6cb;#02bcfe;#3be6cb"
+                 dur="3s"
+                 repeatCount="indefinite" />
+      </circle>
+    </svg>
+    <div class="loading-tip">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DvLoading'
+}
+</script>
+
+<style lang="scss" scoped>
+.screen-loading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .loading-tip {
+    font-size: 14px;
+    color: #fff;
+  }
+}
+</style>
diff --git a/src/views/modules/visual/cpts/tb.vue b/src/views/modules/visual/cpts/tb.vue
new file mode 100644
index 00000000..fa1b0730
--- /dev/null
+++ b/src/views/modules/visual/cpts/tb.vue
@@ -0,0 +1,184 @@
+<template>
+  <div class="m-table">
+    <table class="table" border="0" cellspacing="0" cellpadding="0">
+      <tr class="table-header">
+        <th class="table-header-th" v-for="item in header" :key="item">
+          {{ item }}
+        </th>
+      </tr>
+      <tbody class="table-body">
+        <tr class="table-body-tr" v-for="(value, index) in list" :key="index">
+          <td class="td" v-for="(item, indexs) in value" :key="indexs">
+            <span v-if="typeof item === 'string' || typeof item === 'number'">{{
+              item
+            }}</span>
+            <span v-if="typeof item === 'object' && item.type == 'index'">{{
+              index + 1
+            }}</span>
+            <a
+              v-else-if="typeof item === 'object' && item.type == 'operate'"
+              v-for="btn in item.list"
+              :key="'operate' + index + btn"
+              @click="handleClickBtn(index, btn)"
+              >{{ btn }}</a
+            >
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="table-status" v-if="loading">
+      <screen-loading>加载中</screen-loading>
+    </div>
+
+    <div class="table-status" v-if="list.length == 0 && !loading">
+      <div class="no-data">
+        <img
+          src="../../../../assets/img/modules/visual/noData.png"
+          class="no-data-img"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ScreenLoading from "./loading";
+import Vue from "vue";
+
+export default {
+  name: "table",
+  components: {
+    ScreenLoading,
+  },
+  props: {
+    header: {
+      type: Array,
+      required: false,
+      default: () => {
+        return [
+          // "序号", "所属网格", "操作"
+        ];
+      },
+    },
+    list: {
+      type: Array,
+      required: false,
+      default: () => {
+        return [
+          //   [
+          //     1,
+          //     "商丘路社区第一网格",
+          //     {
+          //       type: "operate",
+          //       list: ["查看"],
+          //     },
+          //   ],
+          //   [
+          //     2,
+          //     "商丘路社区第一网格",
+          //     {
+          //       type: "operate",
+          //       list: ["查看"],
+          //     },
+          //   ],
+        ];
+      },
+    },
+    loading: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {};
+  },
+  watch: {},
+
+  mounted() {},
+
+  created() {},
+
+  methods: {
+    handleClickBtn(index, type) {
+      this.$emit("operate", index, type);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.m-table {
+  .table {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border: none;
+
+    &-header {
+      width: 100%;
+      height: 50px;
+      background: rgba(8, 37, 134, 0.85);
+      font-size: 16px;
+      font-weight: 400;
+      color: #ffffff;
+
+      &-th {
+        text-align: center;
+        border: none;
+        // width: calc(100% / 5);
+      }
+    }
+
+    &-body {
+      box-sizing: border-box;
+      width: 100%;
+      font-size: 18px;
+      font-weight: 400;
+      color: #ffffff;
+
+      &-tr {
+        width: 100%;
+        height: 50px;
+        .td {
+          text-align: center;
+          border: none;
+          a {
+            font-size: 18px;
+            font-weight: 400;
+            color: #e4dc00;
+            position: relative;
+            cursor: pointer;
+          }
+        }
+      }
+
+      &-tr:nth-child(2n) {
+        background: rgba(16, 75, 164, 0.24);
+      }
+
+      &-tr:hover {
+        background: url("../../../../assets/img/modules/visual/hover-bac.png")
+          no-repeat center;
+        background-size: 100% 100%;
+      }
+    }
+  }
+
+  .table-status {
+    height: 200px;
+
+    // 暂无数据
+    .no-data {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &-img {
+        width: 249px;
+        height: 172px;
+      }
+    }
+  }
+}
+</style>