ss

src/assets/scss/people.scss

@@ -214,7 +214,7 @@
             .item {
                 position: relative;
                 box-sizing: border-box;
-                padding-left: 15px;
+                padding: 0 15px;
                 width: 33%;
                 color: #fff;
                 font-size: 18px;
@@ -227,9 +227,7 @@
                 &::before {
                     position: absolute;
                     left: 0;
-                    top: 0;
+                    top: 9px;
-                    bottom: 0;
-                    margin: auto 0;
                     content: "";
                     display: block;
                     width: 7px;
@@ -246,6 +244,42 @@
             height: 1px;
             border: 1px dashed #1257c9;
         }
+
+        .tabs {
+            margin-top: 30px;
+            display: flex;
+            align-items: center;
+            padding-left: 20px;
+
+            .tab-btn {
+                width: 30px;
+                text-align: center;
+                cursor: pointer;
+            }
+
+            .tab {
+                margin: 0 5px;
+                min-width: 76px;
+                padding: 0 5px;
+                height: 30px;
+                background: rgba(255, 255, 255, 0);
+                border: 1px solid #1257c9;
+                box-shadow: 0 0 10px 0 inset #1257c9;
+                border-radius: 2px;
+                text-align: center;
+                font-size: 14px;
+                font-family: PingFang SC;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 30px;
+                cursor: pointer;
+                transition: all ease 0.5s;
+                &.z-on {
+                    background: linear-gradient(90deg, #1a5afd, #009cff);
+                    box-shadow: none;
+                }
+            }
+        }
     }
 }
 
@@ -339,6 +373,7 @@
                 font-size: 18px;
                 font-family: PingFang SC;
                 font-weight: 500;
+                cursor: pointer;
 
                 .rel-name {
                     font-size: 14px;

src/views/modules/visual/basicinfo/people.vue

@@ -33,7 +33,11 @@
               <div class="ren-cnt">
                 <h5>人员类别：</h5>
                 <p>
-                  {{ info.personCategory.join("、") }}
+                  {{
+                    info.personCategory.length == 0
+                      ? "--"
+                      : info.personCategory.join("、")
+                  }}
                 </p>
               </div>
             </div>
@@ -45,7 +49,7 @@
               <div class="ren-cnt">
                 <h5>工作单位：</h5>
                 <p>
-                  {{ info.workUnit }}
+                  {{ info.workUnit || "--" }}
                 </p>
               </div>
             </div>
@@ -57,7 +61,11 @@
               <div class="ren-cnt">
                 <h5>志愿者类别：</h5>
                 <p>
-                  {{ info.volunteerCategory.join("、") }}
+                  {{
+                    info.volunteerCategory.length == 0
+                      ? "--"
+                      : info.volunteerCategory.join("、")
+                  }}
                 </p>
               </div>
             </div>
@@ -69,7 +77,11 @@
               <div class="ren-cnt">
                 <h5>房屋信息：</h5>
                 <p>
-                  {{ info.houseInfo.join("、") }}
+                  {{
+                    info.houseInfo.length == 0
+                      ? "--"
+                      : info.houseInfo.join("、")
+                  }}
                 </p>
               </div>
             </div>
@@ -80,75 +92,27 @@
 
               <div class="ren-cnt">
                 <h5>经济状况：</h5>
-                <p>月薪{{ info.financialSituation.monthlyIncome }}</p>
+                <p>
+                  月薪:
+                  {{
+                    info.financialSituation.monthlyIncome || "--"
+                  }}，退休金：{{
+                    info.financialSituation.retirementAmount || "--"
+                  }}
+                </p>
               </div>
             </div>
           </div>
         </cpt-card>
       </div>
 
-      <div class="m-pop" v-if="showedMoreInfo">
+      <people-more
-        <div class="wrap">
+        v-show="showedMoreInfo"
-          <cpt-card>
+        v-if="userId"
-            <div class="title">
+        :userId="userId"
-              <img src="@/assets/img/shuju/title-tip.png" />
+        :gridName="info.gridName"
-              <span>更多信息</span>
+        @close="showedMoreInfo = false"
-            </div>
+      />
-
-            <div class="btn-close" @click="showedMoreInfo = false">
-              <img src="@/assets/img/shuju/people/close.png" />
-            </div>
-
-            <edit-resi
-              v-if="dialogEditVisible"
-              ref="baseForm"
-              :disabled="disabled"
-              :form-info="editForm"
-              :fixed="true"
-              :form-list="formList"
-              @changegroup="handleChangeGroup"
-            />
-
-            <div class="list">
-              <div class="item">所属网格：商区社区第一网格</div>
-              <div class="item">所属网格：商区社区第一网格</div>
-              <div class="item">所属网格：商区社区第一网格</div>
-              <div class="item">所属网格：商区社区第一网格</div>
-              <div class="item">所属网格：商区社区第一网格</div>
-            </div>
-
-            <div class="line"></div>
-
-            <div class="list">
-              <div class="item">所属网格：商区社区第一网格</div>
-              <div class="item">所属网格：商区社区第一网格</div>
-              <div class="item">所属网格：商区社区第一网格</div>
-              <div class="item">所属网格：商区社区第一网格</div>
-              <div class="item">所属网格：商区社区第一网格</div>
-            </div>
-
-            <div class="line"></div>
-
-            <div class="list">
-              <div class="item">所属网格：商区社区第一网格</div>
-              <div class="item">所属网格：商区社区第一网格</div>
-              <div class="item">所属网格：商区社区第一网格</div>
-              <div class="item">所属网格：商区社区第一网格</div>
-              <div class="item">所属网格：商区社区第一网格</div>
-            </div>
-
-            <div class="line"></div>
-
-            <div class="list">
-              <div class="item">所属网格：商区社区第一网格</div>
-              <div class="item">所属网格：商区社区第一网格</div>
-              <div class="item">所属网格：商区社区第一网格</div>
-              <div class="item">所属网格：商区社区第一网格</div>
-              <div class="item">所属网格：商区社区第一网格</div>
-            </div>
-          </cpt-card>
-        </div>
-      </div>
 
       <div class="m-relation">
         <cpt-card>
@@ -166,7 +130,12 @@
               <div class="huzhu-name">{{ houseInfo.ownerName }}</div>
               <p>（户主）</p>
             </div>
-            <div class="rel z-zuo-2" v-if="houseInfo.list[0]">
+
+            <div
+              class="rel z-zuo-2"
+              @click="userId = houseInfo.userList[0].userId"
+              v-if="houseInfo.userList[0]"
+            >
               <img
                 class="rel-bg"
                 src="@/assets/img/shuju/people/huzhu-kuang-zuo.png"
@@ -175,15 +144,24 @@
                 class="rel-line"
                 src="@/assets/img/shuju/people/huzhu-line/zuo2.png"
               />
-              <div class="rel-text">
+              <div
-                <span class="rel-call">{{ houseInfo.list[0].relation }}</span>
+                class="rel-text"
+                :class="houseInfo.userList[0].isSelf == '1' ? 'z-on' : ''"
+              >
+                <span class="rel-call">{{
+                  houseInfo.userList[0].relation
+                }}</span>
                 <span class="rel-name"
-                  >（{{ houseInfo.list[0].userName }}）</span
+                  >（{{ houseInfo.userList[0].userName }}）</span
                 >
               </div>
             </div>
 
-            <div class="rel z-you-2" v-if="houseInfo.list[1]">
+            <div
+              class="rel z-you-2"
+              @click="userId = houseInfo.userList[1].userId"
+              v-if="houseInfo.userList[1]"
+            >
               <img
                 class="rel-bg"
                 src="@/assets/img/shuju/people/huzhu-kuang-you.png"
@@ -192,15 +170,24 @@
                 class="rel-line"
                 src="@/assets/img/shuju/people/huzhu-line/you2.png"
               />
-              <div class="rel-text">
+              <div
-                <span class="rel-call">{{ houseInfo.list[1].relation }}</span>
+                class="rel-text"
+                :class="houseInfo.userList[1].isSelf == '1' ? 'z-on' : ''"
+              >
+                <span class="rel-call">{{
+                  houseInfo.userList[1].relation
+                }}</span>
                 <span class="rel-name"
-                  >（{{ houseInfo.list[1].userName }}）</span
+                  >（{{ houseInfo.userList[1].userName }}）</span
                 >
               </div>
             </div>
 
-            <div class="rel z-zuo-1" v-if="houseInfo.list[2]">
+            <div
+              class="rel z-zuo-1"
+              @click="userId = houseInfo.userList[2].userId"
+              v-if="houseInfo.userList[2]"
+            >
               <img
                 class="rel-bg"
                 src="@/assets/img/shuju/people/huzhu-kuang-zuo.png"
@@ -209,15 +196,24 @@
                 class="rel-line"
                 src="@/assets/img/shuju/people/huzhu-line/zuo1.png"
               />
-              <div class="rel-text">
+              <div
-                <span class="rel-call">{{ houseInfo.list[2].relation }}</span>
+                class="rel-text"
+                :class="houseInfo.userList[2].isSelf == '1' ? 'z-on' : ''"
+              >
+                <span class="rel-call">{{
+                  houseInfo.userList[2].relation
+                }}</span>
                 <span class="rel-name"
-                  >（{{ houseInfo.list[2].userName }}）</span
+                  >（{{ houseInfo.userList[2].userName }}）</span
                 >
               </div>
             </div>
 
-            <div class="rel z-you-1" v-if="houseInfo.list[3]">
+            <div
+              class="rel z-you-1"
+              @click="userId = houseInfo.userList[3].userId"
+              v-if="houseInfo.userList[3]"
+            >
               <img
                 class="rel-bg"
                 src="@/assets/img/shuju/people/huzhu-kuang-you.png"
@@ -226,15 +222,24 @@
                 class="rel-line"
                 src="@/assets/img/shuju/people/huzhu-line/you1.png"
               />
-              <div class="rel-text">
+              <div
-                <span class="rel-call">{{ houseInfo.list[3].relation }}</span>
+                class="rel-text"
+                :class="houseInfo.userList[3].isSelf == '1' ? 'z-on' : ''"
+              >
+                <span class="rel-call">{{
+                  houseInfo.userList[3].relation
+                }}</span>
                 <span class="rel-name"
-                  >（{{ houseInfo.list[3].userName }}）</span
+                  >（{{ houseInfo.userList[3].userName }}）</span
                 >
               </div>
             </div>
 
-            <div class="rel z-zuo-3" v-if="houseInfo.list[4]">
+            <div
+              class="rel z-zuo-3"
+              @click="userId = houseInfo.userList[4].userId"
+              v-if="houseInfo.userList[4]"
+            >
               <img
                 class="rel-bg"
                 src="@/assets/img/shuju/people/huzhu-kuang-zuo.png"
@@ -243,15 +248,24 @@
                 class="rel-line"
                 src="@/assets/img/shuju/people/huzhu-line/zuo3.png"
               />
-              <div class="rel-text">
+              <div
-                <span class="rel-call">{{ houseInfo.list[4].relation }}</span>
+                class="rel-text"
+                :class="houseInfo.userList[4].isSelf == '1' ? 'z-on' : ''"
+              >
+                <span class="rel-call">{{
+                  houseInfo.userList[4].relation
+                }}</span>
                 <span class="rel-name"
-                  >（{{ houseInfo.list[4].userName }}）</span
+                  >（{{ houseInfo.userList[4].userName }}）</span
                 >
               </div>
             </div>
 
-            <div class="rel z-you-3" v-if="houseInfo.list[5]">
+            <div
+              class="rel z-you-3"
+              @click="userId = houseInfo.userList[5].userId"
+              v-if="houseInfo.userList[5]"
+            >
               <img
                 class="rel-bg"
                 src="@/assets/img/shuju/people/huzhu-kuang-you.png"
@@ -260,10 +274,15 @@
                 class="rel-line"
                 src="@/assets/img/shuju/people/huzhu-line/you3.png"
               />
-              <div class="rel-text">
+              <div
-                <span class="rel-call">{{ houseInfo.list[5].relation }}</span>
+                class="rel-text"
+                :class="houseInfo.userList[5].isSelf == '1' ? 'z-on' : ''"
+              >
+                <span class="rel-call">{{
+                  houseInfo.userList[5].relation
+                }}</span>
                 <span class="rel-name"
-                  >（{{ houseInfo.list[5].userName }}）</span
+                  >（{{ houseInfo.userList[5].userName }}）</span
                 >
               </div>
             </div>
@@ -279,12 +298,16 @@
 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";
 
 export default {
   name: "HomeMap",
   data() {
     return {
       showedMoreInfo: false,
+
+      userId: "",
+
       info: {
         financialSituation: { monthlyIncome: "", retirementAmount: "" },
         gridName: "",
@@ -297,22 +320,22 @@ export default {
 
       houseInfo: {
         ownerName: "",
-        list: [
+        userList: [
-          {
+          // {
-            userId: "",
+          //   userId: "",
-            userName: "",
+          //   userName: "",
-            isSelf: "",
+          //   isSelf: "",
-            relation: "",
+          //   relation: "",
-          },
+          // },
         ],
       },
     };
   },
 
   props: {
-    userId: {
+    uid: {
       type: String,
-      default: "",
+      default: "8ada68cb6f1e4b9a8333348a39ef3aee",
     },
   },
 
@@ -320,15 +343,20 @@ export default {
 
   components: {
     cptCard,
+    peopleMore,
   },
 
   watch: {
+    uid(id) {
+      this.userId = id;
+    },
     userId() {
       this.getApiData();
     },
   },
 
   async mounted() {
+    this.userId = this.uid;
     this.getApiData();
   },