网格

src/apps/AppGridManagement/Organization.vue

@@ -6,7 +6,7 @@
         南湖街道网格一
         <img src="./components/img/down-icon.png" alt="" class="down-icon"> 
       </div>
-      <span @click="linkTo('./AddGird')">网格配置</span>
+      <span @click="linkTo('./SelectGird')">网格配置</span>
     </div>
     <div class="title">网格人员</div>
     <div class="user-content">

src/apps/AppGridManagement/SelectGird.vue

@@ -50,6 +50,33 @@
       <div>确定选择</div>
     </div>
 
+     <u-popup v-model="show" mode="bottom" border-radius="14">
+      <div class="popup">
+        <div class="bg"></div>
+        <div class="title">{{ form.girdName }}</div>
+        <div class="info-flex">
+          <span class="label">网格类型</span>
+          <span class="value">{{ }}</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">网格层级</span>
+          <span class="value">{{  }}</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">网格负责人</span>
+          <span class="value">{{  }}</span>
+        </div>
+        <div class="info-flex border-b0">
+          <span class="label">网格员</span>
+          <span class="value">{{  }}<img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone('110')" class="phone-icon"></span>
+        </div>
+        <div class="btn">
+          <span class="del">删除网格</span>
+          <span class="edit">编辑网格</span>
+        </div>
+      </div>
+    </u-popup>
+
   </div>
 </template>
 
@@ -63,6 +90,9 @@ export default {
       treeList: [],
       slectList: [],
       userList: [],
+
+      show: true,
+      form: {}
     }
   },
   onLoad() {
@@ -180,6 +210,10 @@ export default {
         return this.$u.toast('请选择网格或网格员')
       }
     },
+
+    callPhone(phone) {
+      uni.makePhoneCall({phoneNumber: phone})
+    },
   }
 }
 </script>
@@ -328,5 +362,83 @@ export default {
       float: right;
     }
   }
+
+  .popup {
+    padding: 0 32px 16px;
+
+    .bg {
+      width: 64px;
+      height: 10px;
+      background: #CCC;
+      border-radius: 6px;
+      margin: 32px 0 32px 344px;
+    }
+
+    .title {
+      font-size: 36px;
+      font-family: PingFang-SC-Heavy, PingFang-SC;
+      font-weight: 800;
+      color: #333;
+      line-height: 50px;
+      margin-bottom: 24px;
+    }
+
+    .info-flex {
+      padding: 26px 0 30px 0;
+      width: 100%;
+      border-bottom: 1px solid #D8DDE6;
+      line-height: 40px;
+      font-size: 28px;
+
+      .label {
+        display: inline-block;
+        width: 160px;
+        font-weight: 800;
+        color: #333;
+      }
+
+      .value {
+        color: #666;
+        font-size: 26px;
+
+        .phone-icon {
+          width: 40px;
+          height: 40px;
+          vertical-align: sub;
+          margin-left: 16px;
+        }
+      }
+    }
+    .border-b0{
+      border-bottom: 0;
+    }
+    .btn{
+      padding: 32px 0;
+      background-color: #fff;
+      display: flex;
+      span{
+        display: inline-block;
+        height: 92px;
+        line-height: 90px;
+        border-radius: 8px;
+        font-size: 34px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        box-sizing: border-box;
+        text-align: center;
+      }
+      .del{
+        color: #f46;
+        border: 1px solid #f46;
+        flex: 1;
+        margin-right: 32px;
+      }
+      .edit{
+        background-color: #3671EE;
+        color: #fff;
+        flex: 2;
+      }
+    }
+  }
 }
 </style>