Merge remote-tracking branch 'origin/dev' into dev

src/apps/AppBuilding/components/detail.vue

@@ -154,7 +154,7 @@ export default {
   },
   computed: { ...mapState(['user']) },
   mounted() {
-    this.communityId = "22314444d2ff415388569600f3cecc0a"
+    this.communityId = this.params.id
     this.$dict.load('householdRelation', 'houselivingStatus', 'houseLeaseSituation', 'houseUseStatus', 
     'isFilingCertificateStatus', 'communityBuildingType', 'yesOrNo', 'BulidResidentType').then(() => {
       this.getSelectList()

src/apps/AppBuilding/components/map.vue

@@ -160,65 +160,6 @@ uni-page-body{
     width: 100%;
     height: 100%;
   }
-  .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;
-    }
-    .address{
-      font-size: 24px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      color: #333;
-      line-height: 34px;
-      word-break: break-all;
-    }
-    .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;
-        }
-      }
-    }
-  }
-  .popup-btn{
-    width: 100%;
-    font-size: 32px;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-    height: 112px;
-    line-height: 112px;
-    text-align: center;
-    background: #1365DD;
-    color: #FFF;
-  }
   .footer{
     width: 100%;
     position: fixed;

src/apps/AppBuilding/components/searchMap.vue

@@ -3,21 +3,25 @@
     <div class="grid-input">
       <!-- <img src="./img/search-icon.png" alt="" class="search-icon"> -->
       <img src="./img/back-icon.png" alt="" class="back-icon">
-      <input type="text" class="input" placeholder="请输入姓名、房屋信息" />
+      <input type="text" class="input" placeholder="请输入姓名、房屋信息" v-model="name"/>
-      <img src="./img/del-icon.png" alt="" class="del-icon">
+      <div class="clear-btn">
-      <span class="search-btn">搜索</span>
+        <img src="./img/del-icon.png" alt="" class="del-icon" v-if="name" @click="clear">
-    </div>
-    <div class="search-list" v-if="show">
-      <div class="title border">
-        <img src="./img/search-icon.png" alt="" class="search-icon">李宁
       </div>
-      <div class="item border">
+      
+      <span class="search-btn" @click="search">搜索</span>
+    </div>
+    <div class="search-list" v-if="show" @click="show=false">
+      <div class="title border">
+        <img src="./img/search-icon.png" alt="" class="search-icon">{{name}}
+      </div>
+      <div class="item border" v-for="(item, index) in buildList" :key="index" @click.stop="getBuidInfo(item)">
         <img src="./img/user-icon.png" alt="" class="search-icon user-icon">
         <div class="item-content">
-          <h3>李宁宁</h3>
+          <h3>{{item.residentName}}</h3>
-          <p>武昌徐家棚街街道武汉绿地金融城西斯莱公馆A座22楼…</p>
+          <p>{{item.areaName || ''}}{{item.createAddress}}</p>
         </div>
       </div>
+      <div></div>
     </div>
     <div class="build-btn" @click="toList()">
       <img src="./img/build-icon.png" alt=""> 楼栋<br/>列表
@@ -25,6 +29,40 @@
     <div class="map-content">
       <AiTMap :areaId="areaId" :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"></AiTMap>
     </div>
+    <u-popup v-model="showPop" mode="bottom" border-radius="14">
+      <div class="popup" >
+        <div class="bg"></div>
+        <div class="title">{{detailInfo.house.createAddress || ''}}</div>
+        <p class="address">{{detailInfo.build.createAddress || ''}}</p>
+        <div class="info-flex">
+          <span class="label">所属社区</span>
+          <span class="value">{{detailInfo.build.areaName}}</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">所属小区</span>
+          <span class="value">{{detailInfo.build.communityName}}</span>
+        </div>
+        <div class="info-flex">
+          <span class="label">房屋类型</span>
+          <span class="value">{{$dict.getLabel('communityBuildingType', detailInfo.house.buildingType)}}</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">
+          <span class="label">楼栋长</span>
+          <span class="value">{{detailInfo.build.managerName || ''}}&nbsp;&nbsp;{{detailInfo.build.managerPhone || ''}}
+            <img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(detailInfo.build.managerPhone)" class="phone-icon" v-if="detailInfo.build.managerPhone">
+          </span>
+        </div>
+      </div>
+      <div class="popup-btn" @click="toDetail(detailInfo.build.communityId)">查看楼栋模型</div>
+    </u-popup>
   </div>
 </template>
 
@@ -34,72 +72,280 @@ export default {
 
   data() {
     return {
+      latLngCenter: {},
       areaId: '',
       ops: {},
       lib: '',
       map: null,
       markerArr: [],
       show: false,
-      value: ''
+      value: '',
+      ClusterBubble: null,
+      name: '',
+      buildList: [],
+      detailInfo: {
+        house: {},
+        build: {}
+      },
+      showPop: false
     }
   },
   computed: { ...mapState(['user']) },
   mounted() {
     this.areaId = this.user.areaId
-    this.initMap()
+    this.getCenterLatLng()
   },
 
   methods: {
-    initMap() { this.$nextTick(() =>{
+    initMap() { 
-        let {lib: TMap, map} = this
-      var markerCluster = new TMap.MarkerCluster({
-        id: 'cluster',
-        map: map,
-        enableDefaultStyle: true, // 启用默认样式
-        minimumClusterSize: 1, // 形成聚合簇的最小个数
-        geometries: [{ // 点数组
-            position: new TMap.LatLng(39.953416, 116.480945)
-          },
-          {
-            position: new TMap.LatLng(39.984104, 116.407503)
-          },
-          {
-            position: new TMap.LatLng(39.908802, 116.497502)
-          },
-          {
-            position: new TMap.LatLng(40.040417, 116.373514)
-          },
-          {
-            position: new TMap.LatLng(39.953416, 116.380945)
-          },
-          {
-            position: new TMap.LatLng(39.984104, 116.307503)
-          },
-          {
-            position: new TMap.LatLng(39.908802, 116.397502)
-          },
-          {
-            position: new TMap.LatLng(40.040417, 116.273514)
-          },
-        ],
-        zoomOnClick: true, // 点击簇时放大至簇内点分离
-        gridSize: 60, // 聚合算法的可聚合距离
-        averageCenter: false, // 每个聚和簇的中心是否应该是聚类中所有标记的平均值
-        maxZoom: 10 // 采用聚合策略的最大缩放级别
-      });
-    })
-    },
-    initMap2() {
-      //初始化地图
-      
       this.$nextTick(() =>{
         let {lib: TMap, map} = this
-        var center = new TMap.LatLng(40.040422, 116.273521)
+
+        
+
+        var ClusterBubbleClick;
+
+        this.ClusterBubble = function (options)  {
+          TMap.DOMOverlay.call(this, options)
+        }
+
+        // this.ClusterBubble.prototype = new TMap.DOMOverlay();
+
+        // this.ClusterBubble.prototype.onInit = function (options) {
+        //   this.content = options.content;
+        //   this.position = options.position;
+        // }
+
+        // 创建点聚合
+        var markerCluster = new TMap.MarkerCluster({
+          id: 'cluster',
+          map: map,
+          enableDefaultStyle: false, // 关闭默认样式
+          minimumClusterSize: 3,
+          geometries: [{ // 点数组
+            position: new TMap.LatLng(39.953416, 116.480945)
+          },
+            {
+              position: new TMap.LatLng(39.984104, 116.407503)
+            },
+            {
+              position: new TMap.LatLng(39.908802, 116.497502)
+            },
+            {
+              position: new TMap.LatLng(40.040417, 116.373514)
+            },
+            {
+              position: new TMap.LatLng(39.953416, 116.380945)
+            },
+            {
+              position: new TMap.LatLng(39.984104, 116.307503)
+            },
+            {
+              position: new TMap.LatLng(39.908802, 116.397502)
+            },
+            {
+              position: new TMap.LatLng(40.040417, 116.273514)
+            },
+          ],
+          zoomOnClick: true,
+          gridSize: 60,
+          averageCenter: false
+        });
+
+        var clusterBubbleList = [];
+        var markerGeometries = [];
         var marker = null;
-        var points = []
+
+        // 监听聚合簇变化
+        markerCluster.on('cluster_changed', function (e) {
+          // 销毁旧聚合簇生成的覆盖物
+          if (clusterBubbleList.length) {
+            clusterBubbleList.forEach(function (item) {
+              item.destroy();
+            })
+            clusterBubbleList = [];
+          }
+          markerGeometries = [];
+
+          // 根据新的聚合簇数组生成新的覆盖物和点标记图层
+          var clusters = markerCluster.getClusters();
+          clusters.forEach(function (item) {
+            if (item.geometries.length > 1) {
+              let clusterBubble = new this.ClusterBubble({
+                map,
+                position: item.center,
+                content: item.geometries.length,
+              });
+              clusterBubble.on('click', () => {
+                map.fitBounds(item.bounds);
+              });
+              clusterBubbleList.push(clusterBubble);
+            } else {
+              markerGeometries.push({
+                position: item.center
+              });
+            }
+          });
+
+          if (marker) {
+            // 已创建过点标记图层，直接更新数据
+            marker.setGeometries(markerGeometries);
+          } else {
+            // 创建点标记图层
+            console.log(markerGeometries)
+            marker = new TMap.MultiMarker({
+              id: 'marker-layer', // 图层id
+              map: map,
+              styles: {
+                // 点标注的相关样式
+                marker: new TMap.MarkerStyle({
+                  width: 25,
+                  height: 35,
+                  anchor: { x: 16, y: 32 },
+                  src:'',
+                }),
+              },
+              geometries: [
+                {
+                  // 点标注数据数组
+                  id: 'demo',
+                  styleId: 'marker',
+                  position: new TMap.LatLng(40.040422, 116.273521),
+                },
+              ],
+            });
+
+            markerGeometries.map((item, index) => {
+              var html = `<div style=" display: inline-block;padding: 6px 10px;line-height: 16px;border-radius: 24px; background: #5088FF;color: #fff;font-size: 12px;position: relative;">`
+                +`腾讯大厦${index}<span style=" width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #5088FF;position: absolute;bottom: -12px;left: 50%;margin-left:-6px;"></span></div>`
+              
+              new TMap.InfoWindow(
+                {
+                map: map,
+                enableCustom: true,
+                position: new TMap.LatLng(item.position.lat, item.position.lng),
+                offset: { y: -70, x: -5 },
+                content: html
+                },
+              );
+            })
+            
+
+          }
+        });
+
+      })
+    },
+
+    
+  // // 以下代码为基于DOMOverlay实现聚合点气泡
+  // function ClusterBubble(options) {
+  //   TMap.DOMOverlay.call(this, options);
+  // }
+
+  // ClusterBubble.prototype = new TMap.DOMOverlay();
+
+  // ClusterBubble.prototype.onInit = function (options) {
+  //   this.content = options.content;
+  //   this.position = options.position;
+  // };
+  
+  // // 销毁时需要删除监听器
+  // ClusterBubble.prototype.onDestroy = function() {
+  // 	this.dom.removeEventListener('click', this.onClick);
+  //   this.removeAllListeners();
+  // };
+
+  // ClusterBubble.prototype.onClick = function() {
+  //   this.emit('click');
+  // };
+
+  // // 创建气泡DOM元素
+  // ClusterBubble.prototype.createDOM = function () {
+  //   var dom = document.createElement('div');
+  //   dom.classList.add('clusterBubble');
+  //   dom.innerText = this.content;
+  //   dom.style.cssText = [
+  //     'width: ' + (40 + parseInt(this.content) * 2) + 'px;',
+  //     'height: ' + (40 + parseInt(this.content) * 2) + 'px;',
+  //     'line-height: ' + (40 + parseInt(this.content) * 2) + 'px;',
+  //   ].join(' ');
+      
+  //   // 监听点击事件，实现zoomOnClick
+  //   this.onClick = this.onClick.bind(this);
+  //   // pc端注册click事件，移动端注册touchend事件
+  //   dom.addEventListener('click', this.onClick);
+  //   return dom;
+  // };
+
+  // ClusterBubble.prototype.updateDOM = function () {
+  //   if (!this.map) {
+  //     return;
+  //   }
+  //   // 经纬度坐标转容器像素坐标
+  //   let pixel = this.map.projectToContainer(this.position);
+
+  //   // 使文本框中心点对齐经纬度坐标点
+  //   let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
+  //   let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
+  //   this.dom.style.transform = `translate(${left}, ${top})`;
+
+  //   this.emit('dom_updated');
+  // };
+
+  // window.ClusterBubble = ClusterBubble;
+
+    getCenterLatLng() {
+      this.$http.post(`/app/appdvcpconfig/getCorpLocation`, ).then(res => {
+        if (res.code == 0) {
+          this.latLngCenter = res.data
+          this.getCommunityList()
+        }
+      })
+    },
+    getCommunityList() {
+      this.$http.post('/app/appcommunitybuildinginfo/listByBuilding', null, {
+        params: {
+          current: 1,
+          size: 1000000,
+          areaId: this.user.areaId
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.buildList = res.data
+          const points = res.data.map(item => {
+            return {
+              lnglat: [item.lng, item.lat],
+              id: item.id,
+              corpId: item.corpId,
+              areaName:item.areaName,
+              buildingNumber: item.name || item.buildingNumber,
+              communityName:item.name || item.communityName,
+            }
+          })
+
+          this.addMakert(points)
+        }
+      })
+    },
+    addMakert(points) {
+      this.$nextTick(() =>{
+        let {lib: TMap, map} = this
+       var center = new TMap.LatLng(this.latLngCenter.lat, this.latLngCenter.lng)
         map.setCenter(center)
+        var marker = null;
         map.setZoom(18)
 
+        var geometriesList = []
+        points.map((item) => {
+          item.position = new TMap.LatLng(item.lnglat[1], item.lnglat[0])
+          var info = {
+            id: item.id,
+            styleId: 'marker',
+            position: new TMap.LatLng(item.lnglat[1], item.lnglat[0])
+          }
+          geometriesList.push(info)
+        })
         marker = new TMap.MultiMarker({
           id: 'marker-layer', // 图层id
           map: map,
@@ -112,49 +358,86 @@ export default {
               src:'',
             }),
           },
-          geometries: [
+          geometries: geometriesList,
-            {
-              // 点标注数据数组
-              id: 'demo',
-              styleId: 'marker',
-              position: new TMap.LatLng(40.040422, 116.273521),
-            },
-          ],
         });
 
-        var infoWindow = null;
+        points.map((item) => {
-        var infoWindow2 = null
-        var html = `<div style=" display: inline-block;padding: 6px 10px;line-height: 16px;border-radius: 24px; background: #5088FF;color: #fff;font-size: 12px;position: relative;">`
-          +`腾讯大厦<span style=" width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #5088FF;position: absolute;bottom: -12px;left: 50%;margin-left:-6px;"></span></div>`
-        
-        infoWindow = new TMap.InfoWindow(
-          {
-          map: map,
-          enableCustom: true,
-          position: new TMap.LatLng(40.040422, 116.273521),
-          offset: { y: -70, x: -5 },
-          content: html
-          },
-        );
 
-        infoWindow2 = new TMap.InfoWindow(
+          var html = `<div style=" display: inline-block;padding: 6px 10px;line-height: 16px;border-radius: 24px; background: #5088FF;color: #fff;font-size: 12px;position: relative;">`
-          {
+            +`${item.communityName}${item.buildingNumber}栋<span style=" width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #5088FF;position: absolute;bottom: -12px;left: 50%;margin-left:-6px;"></span></div>`
-          map: map,
+          
-          enableCustom: true,
+          new TMap.InfoWindow(
-          position: new TMap.LatLng(40.03592, 116.27058),
+            {
-          offset: { y: -70, x: -5 },
+            map: map,
-          content: html
+            enableCustom: true,
-          },
+            position: item.position,
-        );
+            offset: { y: -70, x: -5 },
+            content: html
+            },
+          );
+
+        })
+        
+      })
+    },
+    clear() {
+      this.name = ''
+    },
+    search() {
+      this.buildList = []
+      this.$http.post('/app/appcommunityhouseinfo/queryHouseByName', null, {
+        params: {
+          current: 1,
+          size: 20,
+          areaId: this.user.areaId,
+          name: this.name
+        }
+      }).then(res => {
+        if (res.code == 0 && res.data.length) {
+          this.show = true
+          this.buildList = res.data
+          const points = res.data.map(item => {
+            return {
+              lnglat: [item.lng, item.lat],
+              id: item.id,
+              corpId: item.corpId,
+              areaName:item.areaName,
+              buildingNumber: item.name || item.buildingNumber,
+              communityName:item.name || item.communityName,
+            }
+          })
+
+          this.addMakert(points)
+        }else {
+          this.show = false
+          this.$u.toast('未搜索到结果，请换个关键字重试！')
+        }
+      })
+    },
+    getBuidInfo(item) {
+       this.$http.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding?buildId=${item.buildingId}&houseId=${item.id}`).then(res => {
+        if (res.code == 0) {
+          this.show = false 
+          this.showPop = true
+          this.detailInfo = res.data
+        }
       })
-      
     },
     toList() {
       console.log(122)
       this.$emit('change', {
         type: 'List',
       })
-    }
+    },
+    callPhone(phone) {
+      uni.makePhoneCall({ phoneNumber: phone })
+    },
+    toDetail(id) {
+      this.$emit('change', {
+        type: 'Detail',
+        params: {id}
+      })
+    },
   }
 }
 </script>
@@ -174,7 +457,7 @@ uni-page-body{
     position: fixed;
     top: 24px;
     left: 16px;
-    z-index: 99;
+    z-index: 99999;
     padding: 16px 20px;
     box-sizing: border-box;
     .search-icon{
@@ -198,11 +481,16 @@ uni-page-body{
       margin-right: 24px;
       vertical-align: super;
     }
+    .clear-btn{
+      display: inline-block;
+      width: 32px;
+      height: 32px;
+      margin-right: 30px;
+    }
     .del-icon{
       width: 32px;
       height: 32px;
       vertical-align: super;
-      margin-right: 30px;
     }
     .search-btn{
       display: inline-block;
@@ -221,12 +509,14 @@ uni-page-body{
   .search-list{
     position: fixed;
     width: 100%;
+    height: 700px;
+    overflow-y: scroll;
     top: 128px;
     left: 0;
     padding: 0 44px;
     box-sizing: border-box;
     background-color: #fff;
-    z-index: 99;
+    z-index: 99999;
     .search-icon{
       width: 36px;
       height: 36px;
@@ -338,5 +628,16 @@ uni-page-body{
       }
     }
   }
+  .popup-btn{
+    width: 100%;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+    background: #1365DD;
+    color: #FFF;
+  }
 }
 </style>

src/apps/AppMarryAndDie/Add.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="add">
+    <div class="header-description">
+      <u-form :model="forms" ref="uForm" label-width="auto" :border-bottom="false">
+        <u-form-item label="类型" prop="type" required :border-bottom="false" right-icon="arrow-right">
+          <u-input v-model="forms.type" disabled placeholder="请选择类型" @click="showStstus = true" />
+
+          <u-select v-model="showStstus" :list="$dict.getDict('marriageType')" value-name="dictValue" label-name="dictName" @confirm="selectStatus"></u-select>
+        </u-form-item>
+
+        <div class="line"></div>
+
+        <u-form-item label="事主姓名" prop="name" required :border-bottom="false" class="names">
+          <u-input v-model="forms.name" placeholder="请输入事主姓名" maxlength="30" />
+        </u-form-item>
+
+        <u-form-item label="方式" prop="modeType" required :border-bottom="false" class="modeTypes" right-icon="arrow-right">
+          <u-input v-model="forms.modeType" disabled placeholder="请选择类型" @click="showModeType = true" />
+
+          <u-select v-model="showModeType" :list="$dict.getDict('modeType')" value-name="dictValue" label-name="dictName" @confirm="selectStatus"></u-select>
+        </u-form-item>
+
+        <u-form-item label="联系电话" prop="phone" required :border-bottom="false" class="phones">
+          <u-input v-model="forms.phone" placeholder="请输入联系电话" maxlength="16" />
+        </u-form-item>
+
+        <div class="line"></div>
+
+        <u-form-item label="地址" prop="address" required :border-bottom="false" right-icon="arrow-right">
+          <u-input v-model="forms.address" placeholder="请输入地址" />
+        </u-form-item>
+
+        <div class="line"></div>
+
+        <u-form-item label="活动详情" prop="content" required :border-bottom="false" label-position="top" class="contents">
+          <u-input v-model="forms.content" placeholder="请输入详细描述信息" type="textarea" auto-height height="100" maxlength="500" />
+        </u-form-item>
+
+        <div class="line"></div>
+
+        <u-form-item label="图片上传 (最多9张)" prop="files" :border-bottom="false" class="avatars" label-position="top">
+          <AiUploader :def.sync="forms.files" multiple placeholder="上传图片" :limit="9"></AiUploader>
+        </u-form-item>
+
+        <div class="line"></div>
+      </u-form>
+    </div>
+
+    <div class="btn" @click="submit">确认上报</div>
+
+    <AiBack></AiBack>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Add',
+  components: {},
+  props: {},
+  data() {
+    return {
+      forms: {
+        type: '',
+        typeValue: '',
+        name: '',
+        modeType: '',
+
+        modeTypeValue: '',
+        phone: '',
+        address: '',
+        content: '',
+
+        personType: 0,
+        files: [],
+      },
+      showStstus: false,
+      showModeType: false,
+      flag: false,
+    }
+  },
+  computed: { ...mapState(['user']) },
+  onLoad() {
+    console.log(this.user.id)
+    this.$dict.load('marriageType', 'modeType')
+  },
+
+  mounted() {},
+  methods: {
+    submit() {
+      if (this.flag) return
+
+      this.$refs.uForm.validate((valid) => {
+        if (valid) {
+          if (!this.forms.type) {
+            return this.$u.toast('请选择')
+          }
+          if (!this.forms.name) {
+            return this.$u.toast('请输入事主姓名')
+          }
+          if (!this.forms.phone) {
+            return this.$u.toast('请输入联系电话')
+          }
+          if (!this.forms.address) {
+            return this.$u.toast('请输入地址')
+          }
+          if (!this.forms.content) {
+            return this.$u.toast('请输入详细描述信息')
+          }
+
+          const imgs = []
+          if (this.forms.files) {
+            this.forms.files.map((e) => {
+              imgs.push({ url: e.url, id: e.id })
+            })
+          }
+
+          this.flag = true
+          this.$http
+            .post(`/app/appvisitvondolence/addOrUpdate`, {
+              type: this.forms.typeValue,
+              name: this.forms.name,
+              modeType: this.forms.modeTypeValue,
+              phone: this.forms.phone,
+
+              address: this.forms.address,
+              content: this.forms.content,
+              createUserId: this.user.id,
+              personType: this.forms.personType,
+
+              fileIds: imgs || [],
+            })
+            .then((res) => {
+              if (res.code == 0) {
+                this.$u.toast('发布成功')
+                this.flag = false
+                uni.navigateTo({ url: `./AppMarryAndDie` })
+              }
+            })
+        } else {
+          this.$u.toast('失败')
+        }
+      })
+    },
+
+    selectStatus(e) {
+      if (this.showStstus == true) {
+        console.log(e)
+        this.forms.type = e[0].label
+        this.forms.typeValue = e[0].value
+      }
+      if (this.showModeType == true) {
+        console.log(e)
+        this.forms.modeType = e[0].label
+        this.forms.modeTypeValue = e[0].value
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.add {
+  height: 100%;
+  padding-bottom: 112px;
+
+  .header-description {
+    ::v-deep .u-form {
+      .u-form-item {
+        padding: 0 45px !important;
+        .u-form-item__body {
+          .u-form-item--right__content__slot {
+            padding-bottom: 0;
+            .u-input {
+              text-align: right !important;
+            }
+          }
+        }
+      }
+
+      .names,
+      .modeTypes,
+      .phones {
+        .u-form-item__body {
+          border-bottom: 1px solid #dddddd;
+        }
+      }
+
+      .u-form-item:last-child {
+        margin-bottom: 40px;
+      }
+
+      .avatars,
+      .contents {
+        padding-bottom: 20px !important;
+        .u-form-item__body {
+          .u-form-item--right__content__slot {
+            .u-input {
+              text-align: left !important;
+            }
+          }
+          .default {
+            width: 160px;
+            height: 160px;
+          }
+        }
+      }
+
+      .line {
+        height: 24px;
+        background: #f3f6f9;
+      }
+    }
+  }
+
+  .btn {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    background: #1365dd;
+    text-align: center;
+    font-size: 32px;
+    font-weight: 500;
+    color: #ffffff;
+  }
+}
+</style>

src/apps/AppMarryAndDie/AllActiveList.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="AllActiveList">
+    <div class="top">
+      <AiCard>
+        <template #custom>
+          <div class="left">
+            <span class="nums"> {{ num }} </span>
+            <span class="hint">全部活动</span>
+          </div>
+
+          <div class="right">
+            <span class="nums">4</span>
+            <span class="hint">本月新增</span>
+          </div>
+        </template>
+      </AiCard>
+    </div>
+
+    <template v-if="datas.length > 0">
+      <AiCard v-for="(item, i) in datas" :key="i">
+        <template #custom>
+          <div class="names">
+            <span>事主姓名</span>
+            <span class="right">{{ item.name }}</span>
+          </div>
+
+          <div class="phones">
+            <span>联系方式</span>
+            <span class="right">{{ item.phone }}</span>
+          </div>
+
+          <div class="times">
+            <span>上报时间</span>
+            <span class="right" v-if="item.createTime">{{ item.createTime.substring(0, item.createTime.length - 3) }}</span>
+          </div>
+
+          <div class="areaNames">
+            <span>上报地点</span>
+            <span class="right">{{ item.address }}</span>
+          </div>
+
+          <span class="types" :style="{ background: item.type == 0 ? '#FF65B8' : item.type == 1 ? '#FF883C' : '#1AAAFF' }">
+            {{ $dict.getLabel('marriageType', item.type) }}
+          </span>
+        </template>
+
+        <template #menu>
+          <div class="menu" @tap.stop="toDetele(item)">删除</div>
+        </template>
+      </AiCard>
+    </template>
+
+    <AiEmpty description="暂无数据" v-else></AiEmpty>
+
+    <u-modal v-model="deletShow" content="您确认要删除该条信息吗？" :show-cancel-button="true" :mask-close-able="true" :show-title="false" @confirm="delet"></u-modal>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AllActiveList',
+  components: {},
+  props: {},
+  data() {
+    return {
+      data: [],
+      datas: [],
+      current: 1,
+      deletShow: false,
+      deletId: '',
+      current: 1,
+    }
+  },
+  computed: {
+    num() {
+      return this.data.filter((item) => item.v1).reduce((counts, item) => (counts += item.v1 * 1), 0)
+    },
+  },
+  watch: {},
+  onLoad() {
+    this.$dict.load('marriageType', 'modeType').then(() => {
+      this.getCount()
+      this.getList()
+    })
+  },
+  onShow() {},
+  methods: {
+    getCount() {
+      uni.showLoading({
+        title: '加载数据中',
+      })
+      this.$http.post('/app/appmarriagefuneralinfo/queryDataStatistics').then((res) => {
+        if (res.code == 0) {
+          this.data = res.data
+
+          uni.hideLoading()
+        }
+      })
+    },
+
+    getList() {
+      uni.showLoading({
+        title: '加载数据中',
+      })
+      this.$http
+        .post('/app/appmarriagefuneralinfo/list', null, {
+          params: {
+            size: 6,
+            current: this.current,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+            uni.hideLoading()
+          }
+        })
+    },
+
+    toDetele(item) {
+      this.deletShow = true
+      this.deletId = item.id
+    },
+
+    delet() {
+      this.$http.post(`/app/appmarriagefuneralinfo/queryDetailById?ids=${this.deletId}`).then((res) => {
+        if (res.code == 0) {
+          this.$u.toast('删除成功！')
+          this.getList()
+        }
+      })
+    },
+  },
+  onReachBottom() {
+    this.current = this.current + 1
+    this.getList()
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.AllActiveList {
+  height: 100%;
+  .top {
+    .AiCard {
+      background: #f3f6f9;
+      ::v-deep .start {
+        background: #fff;
+        .fill {
+          display: flex;
+          align-items: center;
+          padding: 38px 0;
+          .left,
+          .right {
+            width: 50%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            .nums {
+              font-size: 64px;
+              font-weight: bold;
+              color: #3192f4;
+            }
+            .hint {
+              font-size: 28px;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  ::v-deep .AiCard {
+    background: #f3f6f9;
+    .start {
+      display: flex;
+      align-items: center;
+      background: #fff;
+      padding: 32px 32px 36px 32px;
+      border-radius: 16px;
+      .names,
+      .phones,
+      .times,
+      .areaNames {
+        display: flex;
+        .right {
+          width: 76%;
+          margin-left: 32px;
+          font-size: 26px;
+          color: #333333;
+          word-break: break-all;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+      }
+      .types {
+        display: inline-block;
+        margin-top: 32px;
+        border-radius: 8px;
+        padding: 4px 8px;
+        color: #fff;
+      }
+    }
+    .mask {
+      .moreMenu {
+        transform: translate(-175px, 20px);
+        .menu {
+          text-align: center;
+          line-height: 80px;
+          width: 192px;
+          height: 80px;
+          font-size: 28px;
+          font-weight: 400;
+          color: #333333;
+        }
+      }
+    }
+  }
+}
+</style>

src/apps/AppMarryAndDie/AppMarryAndDie.vue

@@ -4,7 +4,7 @@
 
     <div v-if="currentTabs == 0" class="msg">
       <div class="box">
-        <div class="card">
+        <div class="card" @click="toList(0)">
           <div class="imgleft">
             <span class="titles">活动登记情况</span>
             <span class="titlesContent">查看全部活动和本月新增</span>
@@ -13,7 +13,7 @@
           <img src="./yan.jpg" alt="" />
         </div>
 
-        <div class="card">
+        <div class="card" @click="toList(1)">
           <div class="imgleft">
             <span class="titles">干部参与情况</span>
             <span class="titlesContent">查看全部参与操办信息和本月新增</span>
@@ -22,7 +22,7 @@
           <img src="./yan.jpg" alt="" />
         </div>
 
-        <div class="card">
+        <div class="card" @click="toList(2)">
           <div class="imgleft">
             <span class="titles">婚礼登记情况</span>
             <span class="titlesContent">查看全部婚礼和本月新增</span>
@@ -31,7 +31,7 @@
           <img src="./yan.jpg" alt="" />
         </div>
 
-        <div class="card">
+        <div class="card" @click="toList(3)">
           <div class="imgleft">
             <span class="titles">丧礼登记情况</span>
             <span class="titlesContent">查看全部丧礼和本月新增</span>
@@ -46,16 +46,59 @@
       <div class="chart">
         <p>本年统计</p>
 
-        <div class="yearStatistics" id="yearStatistic" style="height: 300px"></div>
+        <div class="yearStatistics" id="yearStatistic"></div>
       </div>
     </div>
 
-    <div v-if="currentTabs == 1" class="myReport">1</div>
+    <div v-if="currentTabs == 1" class="myReport">
+      <template v-if="datas.length > 0">
+        <AiCard v-for="(item, i) in datas" :key="i">
+          <template #custom>
+            <div class="names">
+              <span>事主姓名</span>
+              <span class="right">{{ item.name }}</span>
+            </div>
+
+            <div class="phones">
+              <span>联系方式</span>
+              <span class="right">{{ item.phone }}</span>
+            </div>
+
+            <div class="times">
+              <span>上报时间</span>
+              <span class="right" v-if="item.createTime">{{ item.createTime.substring(0, item.createTime.length - 3) }}</span>
+            </div>
+
+            <div class="areaNames">
+              <span>上报地点</span>
+              <span class="right">{{ item.address }}</span>
+            </div>
+
+            <span class="types" :style="{ background: item.type == 0 ? '#FF65B8' : item.type == 1 ? '#FF883C' : '#1AAAFF' }">
+              {{ $dict.getLabel('marriageType', item.type) }}
+            </span>
+          </template>
+
+          <template #menu>
+            <div class="menu" @tap.stop="toDetele(item)">删除</div>
+          </template>
+        </AiCard>
+
+        <u-loadmore :status="loadmore" color="#999" font-size="24" margin-top="32" margin-bottom="80" />
+      </template>
+
+      <AiEmpty description="暂无数据" v-else></AiEmpty>
+
+      <div class="fixedBtn" @click="toAdd">我要上报</div>
+
+      <u-modal v-model="deletShow" content="您确认要删除该条信息吗？" :show-cancel-button="true" :mask-close-able="true" :show-title="false" @confirm="delet"></u-modal>
+    </div>
   </div>
 </template>
 
 <script>
 import echarts from 'echarts'
+import { mapState } from 'vuex'
 
 export default {
   name: 'AppMarryAndDie',
@@ -64,7 +107,6 @@ export default {
   props: {},
   data() {
     return {
-      keyword: '',
       currentTabs: 0,
       tabList: [
         {
@@ -75,24 +117,65 @@ export default {
         },
       ],
       Echart: null,
+      datas: [],
+      current: 1,
+      deletShow: false,
+      deletId: '',
     }
   },
-  computed: {},
+  computed: {
+    ...mapState(['user', 'global']),
+
+    loadmore() {
+      return this.pages <= this.current ? 'loading ' : 'nomore'
+    },
+  },
   watch: {},
   onLoad() {
-    this.getList()
+    this.$dict.load('marriageType', 'modeType').then(() => {
-    this.getEchart()
+      this.getList()
+      this.getEchart()
+    })
   },
   mounted() {
     this.Echart = echarts.init(document.getElementById('yearStatistic'))
   },
   methods: {
-    getList() {},
+    getList() {
+      this.$http
+        .post('/app/appmarriagefuneralinfo/list', null, {
+          params: {
+            size: 6,
+            current: this.current,
+            createUserId: this.user.id,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+            this.pages = res.data.pages
+          }
+        })
+    },
+
+    toDetele(item) {
+      this.deletShow = true
+      this.deletId = item.id
+    },
+
+    delet() {
+      this.$http.post(`/app/appmarriagefuneralinfo/queryDetailById?ids=${this.deletId}`).then((res) => {
+        if (res.code == 0) {
+          this.$u.toast('删除成功！')
+          this.getList()
+        }
+      })
+    },
 
     change(index) {
-      this.keyword = ''
       this.currentTabs = index
       this.getList()
+      this.getEchart()
     },
 
     getEchart() {
@@ -104,72 +187,38 @@ export default {
     },
 
     initEchart(data) {
-      console.log(data)
-
       var option = {
         xAxis: {
           type: 'category',
           data: data.map((v) => v.name.replace('数量', '')),
-          // boundaryGap: false,
           axisLine: {
             lineStyle: { color: '#157EFF' },
           },
-          axisTick: {
-            show: false,
-            alignWithLabel: false,
-            lineStyle: {
-              width: 100,
-            },
-          },
           axisLabel: {
-            show: true, //是否显示刻度标签
+            show: true,
-            interval: 0, //坐标轴刻度标签的显示间隔   0强制显示所有标签，1表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
+            interval: 0,
-            rotate: 50, //x轴数据太多可以尝试旋转一定角度，不至于太难看
-            //刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度
           },
           axisTick: {
-            //坐标轴刻度相关设置
+            interval: 'auto',
-            // show: true, //是否显示坐标轴刻度。
-            // inside: false, //坐标轴刻度是否朝内，默认朝外。
-            // length: 7, //坐标轴刻度的长度。
           },
-          axisLabel: { color: '#666', margin: 19 },
-          // axisTick: {
-          //   alignWithLabel: false,
-          // },
-
-          // splitLine: {
-          //   show: true,
-          //   lineStyle: {
-          //     width: 0,
-          //     type: 'solid',
-          //     color: '#f5f5f5',
-          //   },
-          // },
         },
         yAxis: {
           type: 'value',
-          axisLabel: {
-            show: true,
-            interval: 0, //不间隔显示x轴上的文字，否则文字放不下时，将会自动间隔显示
-
-            textStyle: {
-              // color: '#fff',
-            },
-          },
           axisLine: {
-            //轴线颜色
             lineStyle: {
-              color: 'rgba(255,255,255,0.2)',
+              color: '#666',
             },
           },
           splitLine: {
-            //分割线样式
             show: true,
             lineStyle: {
               color: '#D8DDE6',
             },
           },
+          axisLabel: {
+            show: true, //是否显示刻度标签
+            interval: 0,
+          },
         },
         series: [
           {
@@ -183,6 +232,33 @@ export default {
 
       option && this.Echart.setOption(option)
     },
+
+    toAdd() {
+      uni.navigateTo({ url: `./Add` })
+    },
+
+    toList(num) {
+      if (num == 0) {
+        console.log('全部')
+        uni.navigateTo({ url: `./AllActiveList` })
+      }
+      if (num == 1) {
+        console.log('干部')
+        uni.navigateTo({ url: `./CadreList` })
+      }
+      if (num == 2) {
+        console.log('婚礼')
+        uni.navigateTo({ url: `./MarryList` })
+      }
+      if (num == 3) {
+        console.log('丧礼')
+        uni.navigateTo({ url: `./FuneralList` })
+      }
+    },
+  },
+  onReachBottom() {
+    this.current = this.current + 1
+    this.getList()
   },
 }
 </script>
@@ -193,8 +269,10 @@ uni-page-body {
 }
 .AppMarryAndDie {
   height: 100%;
-  background: #fff;
+
   .msg {
+    height: 100%;
+    background: #fff;
     .box {
       display: flex;
       justify-content: space-between;
@@ -208,6 +286,7 @@ uni-page-body {
         margin-top: 8px;
         padding: 18px 24px 34px;
         box-sizing: border-box;
+        background: #f6f7f8;
         .imgleft {
           display: flex;
           flex-direction: column;
@@ -238,12 +317,89 @@ uni-page-body {
     }
 
     .chart {
+      p {
+        padding: 26px 0 26px 32px;
+        font-size: 32px;
+        font-weight: 500;
+      }
       .yearStatistics {
         width: 100%;
-        // height: 500px;
+        height: 600px;
-        // background: pink;
       }
     }
   }
+  .myReport {
+    background: #f3f6f9;
+    padding-bottom: 112px;
+
+    ::v-deep .AiCard {
+      background: #f3f6f9;
+      .start {
+        display: flex;
+        align-items: center;
+        background: #fff;
+        padding: 32px 32px 36px 32px;
+        border-radius: 16px;
+        .names,
+        .phones,
+        .times,
+        .areaNames {
+          display: flex;
+          .right {
+            width: 76%;
+            margin-left: 32px;
+            font-size: 26px;
+            color: #333333;
+            word-break: break-all;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+          }
+        }
+        .types {
+          display: inline-block;
+          margin-top: 32px;
+          border-radius: 8px;
+          padding: 4px 8px;
+          color: #fff;
+        }
+      }
+      .mask {
+        .moreMenu {
+          transform: translate(-175px, 20px);
+          .menu {
+            text-align: center;
+            line-height: 80px;
+            width: 192px;
+            height: 80px;
+            font-size: 28px;
+            font-weight: 400;
+            color: #333333;
+          }
+        }
+      }
+    }
+
+    .u-load-more-wrap {
+      background: #f3f6f9 !important;
+      margin: 0 !important;
+      padding: 30px 0;
+    }
+
+    .fixedBtn {
+      position: fixed;
+      width: 100%;
+      z-index: 999;
+      bottom: 0;
+      background: #3975c6;
+      padding: 32px 0;
+      text-align: center;
+      font-size: 32px;
+      font-weight: 500;
+      color: #ffffff;
+    }
+  }
 }
 </style>

src/apps/AppMarryAndDie/CadreList.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="CadreList">
+    <div class="top">
+      <AiCard>
+        <template #custom>
+          <div class="left">
+            <span class="nums"> {{ total }} </span>
+            <span class="hint">全部干部参与</span>
+          </div>
+
+          <div class="right">
+            <span class="nums">4</span>
+            <span class="hint">本月新增</span>
+          </div>
+        </template>
+      </AiCard>
+    </div>
+
+    <template v-if="datas.length > 0">
+      <AiCard v-for="(item, i) in datas" :key="i">
+        <template #custom>
+          <div class="names">
+            <span>事主姓名</span>
+            <span class="right">{{ item.name }}</span>
+          </div>
+
+          <div class="phones">
+            <span>联系方式</span>
+            <span class="right">{{ item.phone }}</span>
+          </div>
+
+          <div class="times">
+            <span>上报时间</span>
+            <span class="right" v-if="item.createTime">{{ item.createTime.substring(0, item.createTime.length - 3) }}</span>
+          </div>
+
+          <div class="areaNames">
+            <span>上报地点</span>
+            <span class="right">{{ item.address }}</span>
+          </div>
+
+          <span class="types" :style="{ background: item.type == 0 ? '#FF65B8' : item.type == 1 ? '#FF883C' : '#1AAAFF' }">
+            {{ $dict.getLabel('marriageType', item.type) }}
+          </span>
+        </template>
+
+        <template #menu>
+          <div class="menu" @tap.stop="toDetele(item)">删除</div>
+        </template>
+      </AiCard>
+    </template>
+
+    <AiEmpty description="暂无数据" v-else></AiEmpty>
+
+    <u-modal v-model="deletShow" content="您确认要删除该条信息吗？" :show-cancel-button="true" :mask-close-able="true" :show-title="false" @confirm="delet"></u-modal>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CadreList',
+  components: {},
+  props: {},
+  data() {
+    return {
+      data: [],
+      datas: [],
+      current: 1,
+      deletShow: false,
+      deletId: '',
+      current: 1,
+      total: '',
+    }
+  },
+  computed: {},
+  watch: {},
+  onLoad() {
+    this.$dict.load('marriageType', 'modeType').then(() => {
+      this.getCount()
+      this.getList()
+    })
+  },
+  onShow() {},
+  methods: {
+    getCount() {
+      uni.showLoading({
+        title: '加载数据中',
+      })
+      this.$http.post('/app/appmarriagefuneralinfo/queryDataStatistics').then((res) => {
+        if (res.code == 0) {
+          this.data = res.data
+          uni.hideLoading()
+        }
+      })
+    },
+
+    getList() {
+      uni.showLoading({
+        title: '加载数据中',
+      })
+      this.$http
+        .post('/app/appmarriagefuneralinfo/list', null, {
+          params: {
+            size: 6,
+            current: this.current,
+            type: 2,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+            this.total = res.data.total
+            uni.hideLoading()
+          }
+        })
+    },
+
+    toDetele(item) {
+      this.deletShow = true
+      this.deletId = item.id
+    },
+
+    delet() {
+      this.$http.post(`/app/appmarriagefuneralinfo/queryDetailById?ids=${this.deletId}`).then((res) => {
+        if (res.code == 0) {
+          this.$u.toast('删除成功！')
+          this.getList()
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.CadreList {
+  height: 100%;
+  .top {
+    .AiCard {
+      background: #f3f6f9;
+      ::v-deep .start {
+        background: #fff;
+        .fill {
+          display: flex;
+          align-items: center;
+          padding: 38px 0;
+          .left,
+          .right {
+            width: 50%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            .nums {
+              font-size: 64px;
+              font-weight: bold;
+              color: #3192f4;
+            }
+            .hint {
+              font-size: 28px;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  ::v-deep .AiCard {
+    background: #f3f6f9;
+    .start {
+      display: flex;
+      align-items: center;
+      background: #fff;
+      padding: 32px 32px 36px 32px;
+      border-radius: 16px;
+      .names,
+      .phones,
+      .times,
+      .areaNames {
+        display: flex;
+        .right {
+          width: 76%;
+          margin-left: 32px;
+          font-size: 26px;
+          color: #333333;
+          word-break: break-all;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+      }
+      .types {
+        display: inline-block;
+        margin-top: 32px;
+        border-radius: 8px;
+        padding: 4px 8px;
+        color: #fff;
+      }
+    }
+    .mask {
+      .moreMenu {
+        transform: translate(-175px, 20px);
+        .menu {
+          text-align: center;
+          line-height: 80px;
+          width: 192px;
+          height: 80px;
+          font-size: 28px;
+          font-weight: 400;
+          color: #333333;
+        }
+      }
+    }
+  }
+}
+</style>

src/apps/AppMarryAndDie/FuneralList.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="FuneralList">
+    <div class="top">
+      <AiCard>
+        <template #custom>
+          <div class="left">
+            <span class="nums"> {{ total }} </span>
+            <span class="hint">全部丧礼</span>
+          </div>
+
+          <div class="right">
+            <span class="nums">4</span>
+            <span class="hint">本月新增</span>
+          </div>
+        </template>
+      </AiCard>
+    </div>
+
+    <template v-if="datas.length > 0">
+      <AiCard v-for="(item, i) in datas" :key="i">
+        <template #custom>
+          <div class="names">
+            <span>事主姓名</span>
+            <span class="right">{{ item.name }}</span>
+          </div>
+
+          <div class="phones">
+            <span>联系方式</span>
+            <span class="right">{{ item.phone }}</span>
+          </div>
+
+          <div class="times">
+            <span>上报时间</span>
+            <span class="right" v-if="item.createTime">{{ item.createTime.substring(0, item.createTime.length - 3) }}</span>
+          </div>
+
+          <div class="areaNames">
+            <span>上报地点</span>
+            <span class="right">{{ item.address }}</span>
+          </div>
+
+          <span class="types" :style="{ background: item.type == 0 ? '#FF65B8' : item.type == 1 ? '#FF883C' : '#1AAAFF' }">
+            {{ $dict.getLabel('marriageType', item.type) }}
+          </span>
+        </template>
+
+        <template #menu>
+          <div class="menu" @tap.stop="toDetele(item)">删除</div>
+        </template>
+      </AiCard>
+    </template>
+
+    <AiEmpty description="暂无数据" v-else></AiEmpty>
+
+    <u-modal v-model="deletShow" content="您确认要删除该条信息吗？" :show-cancel-button="true" :mask-close-able="true" :show-title="false" @confirm="delet"></u-modal>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FuneralList',
+  components: {},
+  props: {},
+  data() {
+    return {
+      data: [],
+      datas: [],
+      current: 1,
+      deletShow: false,
+      deletId: '',
+      current: 1,
+      total: '',
+    }
+  },
+  computed: {},
+  watch: {},
+  onLoad() {
+    this.$dict.load('marriageType', 'modeType').then(() => {
+      this.getCount()
+      this.getList()
+    })
+  },
+  onShow() {},
+  methods: {
+    getCount() {
+      uni.showLoading({
+        title: '加载数据中',
+      })
+      this.$http.post('/app/appmarriagefuneralinfo/queryDataStatistics').then((res) => {
+        if (res.code == 0) {
+          this.data = res.data
+          uni.hideLoading()
+        }
+      })
+    },
+
+    getList() {
+      uni.showLoading({
+        title: '加载数据中',
+      })
+      this.$http
+        .post('/app/appmarriagefuneralinfo/list', null, {
+          params: {
+            size: 6,
+            current: this.current,
+            type: 1,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+            this.total = res.data.total
+            uni.hideLoading()
+          }
+        })
+    },
+
+    toDetele(item) {
+      this.deletShow = true
+      this.deletId = item.id
+    },
+
+    delet() {
+      this.$http.post(`/app/appmarriagefuneralinfo/queryDetailById?ids=${this.deletId}`).then((res) => {
+        if (res.code == 0) {
+          this.$u.toast('删除成功！')
+          this.getList()
+        }
+      })
+    },
+  },
+  onReachBottom() {
+    this.current = this.current + 1
+    this.getList()
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.FuneralList {
+  height: 100%;
+  .top {
+    .AiCard {
+      background: #f3f6f9;
+      ::v-deep .start {
+        background: #fff;
+        .fill {
+          display: flex;
+          align-items: center;
+          padding: 38px 0;
+          .left,
+          .right {
+            width: 50%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            .nums {
+              font-size: 64px;
+              font-weight: bold;
+              color: #3192f4;
+            }
+            .hint {
+              font-size: 28px;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  ::v-deep .AiCard {
+    background: #f3f6f9;
+    .start {
+      display: flex;
+      align-items: center;
+      background: #fff;
+      padding: 32px 32px 36px 32px;
+      border-radius: 16px;
+      .names,
+      .phones,
+      .times,
+      .areaNames {
+        display: flex;
+        .right {
+          width: 76%;
+          margin-left: 32px;
+          font-size: 26px;
+          color: #333333;
+          word-break: break-all;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+      }
+      .types {
+        display: inline-block;
+        margin-top: 32px;
+        border-radius: 8px;
+        padding: 4px 8px;
+        color: #fff;
+      }
+    }
+    .mask {
+      .moreMenu {
+        transform: translate(-175px, 20px);
+        .menu {
+          text-align: center;
+          line-height: 80px;
+          width: 192px;
+          height: 80px;
+          font-size: 28px;
+          font-weight: 400;
+          color: #333333;
+        }
+      }
+    }
+  }
+}
+</style>

src/apps/AppMarryAndDie/MarryList.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="MarryList">
+    <div class="top">
+      <AiCard>
+        <template #custom>
+          <div class="left">
+            <span class="nums"> {{ total }} </span>
+            <span class="hint">全部婚礼</span>
+          </div>
+
+          <div class="right">
+            <span class="nums">4</span>
+            <span class="hint">本月新增</span>
+          </div>
+        </template>
+      </AiCard>
+    </div>
+
+    <template v-if="datas.length > 0">
+      <AiCard v-for="(item, i) in datas" :key="i">
+        <template #custom>
+          <div class="names">
+            <span>事主姓名</span>
+            <span class="right">{{ item.name }}</span>
+          </div>
+
+          <div class="phones">
+            <span>联系方式</span>
+            <span class="right">{{ item.phone }}</span>
+          </div>
+
+          <div class="times">
+            <span>上报时间</span>
+            <span class="right" v-if="item.createTime">{{ item.createTime.substring(0, item.createTime.length - 3) }}</span>
+          </div>
+
+          <div class="areaNames">
+            <span>上报地点</span>
+            <span class="right">{{ item.address }}</span>
+          </div>
+
+          <span class="types" :style="{ background: item.type == 0 ? '#FF65B8' : item.type == 1 ? '#FF883C' : '#1AAAFF' }">
+            {{ $dict.getLabel('marriageType', item.type) }}
+          </span>
+        </template>
+
+        <template #menu>
+          <div class="menu" @tap.stop="toDetele(item)">删除</div>
+        </template>
+      </AiCard>
+    </template>
+
+    <AiEmpty description="暂无数据" v-else></AiEmpty>
+
+    <u-modal v-model="deletShow" content="您确认要删除该条信息吗？" :show-cancel-button="true" :mask-close-able="true" :show-title="false" @confirm="delet"></u-modal>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MarryList',
+  components: {},
+  props: {},
+  data() {
+    return {
+      data: [],
+      datas: [],
+      current: 1,
+      deletShow: false,
+      deletId: '',
+      current: 1,
+      total: '',
+    }
+  },
+  computed: {},
+  watch: {},
+  onLoad() {
+    this.$dict.load('marriageType', 'modeType').then(() => {
+      this.getCount()
+      this.getList()
+    })
+  },
+  onShow() {},
+  methods: {
+    getCount() {
+      uni.showLoading({
+        title: '加载数据中',
+      })
+      this.$http.post('/app/appmarriagefuneralinfo/queryDataStatistics').then((res) => {
+        if (res.code == 0) {
+          this.data = res.data
+          uni.hideLoading()
+        }
+      })
+    },
+
+    getList() {
+      uni.showLoading({
+        title: '加载数据中',
+      })
+      this.$http
+        .post('/app/appmarriagefuneralinfo/list', null, {
+          params: {
+            size: 6,
+            current: this.current,
+            type: 0,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+            this.total = res.data.total
+            uni.hideLoading()
+          }
+        })
+    },
+
+    toDetele(item) {
+      this.deletShow = true
+      this.deletId = item.id
+    },
+
+    delet() {
+      this.$http.post(`/app/appmarriagefuneralinfo/queryDetailById?ids=${this.deletId}`).then((res) => {
+        if (res.code == 0) {
+          this.$u.toast('删除成功！')
+          this.getList()
+        }
+      })
+    },
+  },
+  onReachBottom() {
+    this.current = this.current + 1
+    this.getList()
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.MarryList {
+  height: 100%;
+  .top {
+    .AiCard {
+      background: #f3f6f9;
+      ::v-deep .start {
+        background: #fff;
+        .fill {
+          display: flex;
+          align-items: center;
+          padding: 38px 0;
+          .left,
+          .right {
+            width: 50%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            .nums {
+              font-size: 64px;
+              font-weight: bold;
+              color: #3192f4;
+            }
+            .hint {
+              font-size: 28px;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  ::v-deep .AiCard {
+    background: #f3f6f9;
+    .start {
+      display: flex;
+      align-items: center;
+      background: #fff;
+      padding: 32px 32px 36px 32px;
+      border-radius: 16px;
+      .names,
+      .phones,
+      .times,
+      .areaNames {
+        display: flex;
+        .right {
+          width: 76%;
+          margin-left: 32px;
+          font-size: 26px;
+          color: #333333;
+          word-break: break-all;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+      }
+      .types {
+        display: inline-block;
+        margin-top: 32px;
+        border-radius: 8px;
+        padding: 4px 8px;
+        color: #fff;
+      }
+    }
+    .mask {
+      .moreMenu {
+        transform: translate(-175px, 20px);
+        .menu {
+          text-align: center;
+          line-height: 80px;
+          width: 192px;
+          height: 80px;
+          font-size: 28px;
+          font-weight: 400;
+          color: #333333;
+        }
+      }
+    }
+  }
+}
+</style>

src/apps/AppResidentActivitie/Add.vue

@@ -155,7 +155,7 @@ export default {
             return this.$u.toast('请输入活动详情')
           }
           if (this.forms.fileIds.length == 0) {
-            return this.$u.toast('请输入活动详情')
+            return this.$u.toast('请选择活动封面图')
           }
           if (!this.forms.status) {
             return this.$u.toast('请选择活动类型')

src/apps/AppSpecialPeople/components/detail.vue

@@ -15,7 +15,7 @@
         </div>
         <div class="search-input" v-if="tabIndex">
           <img src="./img/search-icon.png" alt="">
-          <u-input type="text" placeholder="请输入姓名" placeholder-style="color:#999;font-size:13px;" height="18" />
+          <u-input type="text" placeholder="请输入姓名" placeholder-style="color:#999;font-size:13px;" height="18" v-model="name" @confirm="getUserList" :clearable="false" maxlength="6" />
         </div>
       </div>
     </div>
@@ -23,73 +23,44 @@
       <div class="info-content">
       <div class="title">特殊人群</div>
       <div class="num-content">
-        <div class="num-item">
+        <div class="num-item" v-for="(item, index) in statisticsList" :key="index">
-          <h3>18</h3>
+          <h3>{{item.value}}</h3>
-          <p>残疾人</p>
+          <p>{{item.label}}</p>
-        </div>
-        <div class="num-item">
-          <h3>18</h3>
-          <p>精神疾病患者</p>
-        </div>
-        <div class="num-item">
-          <h3>18</h3>
-          <p>社区矫正人群</p>
-        </div>
-        <div class="num-item">
-          <h3>18</h3>
-          <p>吸毒人员</p>
-        </div>
-        <div class="num-item">
-          <h3>18</h3>
-          <p>刑满释放人员</p>
         </div>
+        <AiEmpty v-if="!statisticsList.length"/>
       </div>
       </div>
       <div class="info-content">
         <div class="title">本月新增</div>
         <div class="num-content color-org">
-          <div class="num-item">
+          <div class="num-item" v-for="(item, index) in statisticsListMon" :key="index">
-            <h3>18</h3>
+          <h3>{{item.value}}</h3>
-            <p>残疾人</p>
+          <p>{{item.label}}</p>
-          </div>
+        </div>
-          <div class="num-item">
+        <AiEmpty v-if="!statisticsListMon.length"/>
-            <h3>18</h3>
-            <p>精神疾病患者</p>
-          </div>
-          <div class="num-item">
-            <h3>18</h3>
-            <p>社区矫正人群</p>
-          </div>
-          <div class="num-item">
-            <h3>18</h3>
-            <p>吸毒人员</p>
-          </div>
-          <div class="num-item">
-            <h3>18</h3>
-            <p>刑满释放人员</p>
-          </div>
         </div>
       </div>
     </div>
     <div v-else>
-      <div class="item-content">
+      <div class="item-content" v-for="(item, index) in userList" :key="index">
-        <div class="title">
+        <div class="title" @click="showUserType(index)">
-          <h2>精神病患者</h2>
+          <h2>{{item.label}}</h2>
-          <img src="./img/down-icon.png" alt="">
+          <img src="./img/down-icon.png" alt="" :class="item.check ? 'img-active' : ''">
         </div>
-        <div class="user-list">
+        <div class="user-list" v-if="item.check">
-          <div class="user-item">
+          <div class="user-item" v-for="(e, indexs) in item.value" :key="indexs" v-if="item.value && item.value.length">
             <div class="user-img">
               <img src="./img/user-img.png" alt="">
             </div>
             <div class="user-info">
-              <p class="name">李毅</p>
+              <p class="name">{{e.name}}</p>
               <div class="phone">
-                <span>428008******8765</span>
+                <span>{{idNumberInit(e.idNumber)}}</span>
-                <span>18164065235</span>
+                <span>{{e.phone}}</span>
               </div>
             </div>
           </div>
+          <p class="text" v-if="!item.value.length">{{'暂无' + item.label + '信息'}}</p>
         </div>
       </div>
       <div class="footer" @click="toAdd">
@@ -106,9 +77,14 @@ export default {
   data() {
     return {
       areaId: '',
+      areaName: '',
       tabs: ['统计信息', '人员信息'],
       tabIndex: 0,
       addressArea: '',
+      statisticsList: [],
+      statisticsListMon: [],
+      userList: [],
+      name: ''
     }
   },
   computed: { ...mapState(['user']) },
@@ -116,6 +92,7 @@ export default {
     this.areaId = this.user.areaId
     this.areaName = this.user.areaName
     this.getStatistic()
+    this.getStatisticMon()
     this.getUserList()
   },
 
@@ -123,21 +100,53 @@ export default {
     areaSelect(e) {
       this.areaId = e.id
       this.areaName = e.name
+      this.getStatistic()
+      this.getStatisticMon()
+      this.getUserList()
     },  
     tabClick(index) {
       this.tabIndex = index
     },
     getStatistic() {
-      this.$http.post(`/app/appapplicationinfo/specialStatistic?areaId=${this.areaId}&type=0`).then((res) => {
+      this.statisticsList = []
+      this.$http.post(`/app/appapplicationinfo/specialStatistic?areaId=${this.areaId}&type=0&range=0`).then((res) => {
         if (res.code == 0) {
-          
+          for(let i in res.data){
+            var obj = {
+              label: i,
+              value: res.data[i]
+            }
+            this.statisticsList.push(obj)
+          }
+        }
+      })
+    },
+    getStatisticMon() {
+      this.statisticsListMon = []
+      this.$http.post(`/app/appapplicationinfo/specialStatistic?areaId=${this.areaId}&type=0&range=1`).then((res) => {
+        if (res.code == 0) {
+          for(let i in res.data){
+            var obj = {
+              label: i,
+              value: res.data[i]
+            }
+            this.statisticsListMon.push(obj)
+          }
         }
       })
     },
     getUserList() {
-      this.$http.post(`/app/appapplicationinfo/queryPeople?areaId=${this.areaId}&type=0`).then((res) => {
+      this.userList = []
+      this.$http.post(`/app/appapplicationinfo/queryPeople?areaId=${this.areaId}&type=0&name=${this.name}`).then((res) => {
         if (res.code == 0) {
-          
+          for(let i in res.data){
+            var obj = {
+              label: i,
+              value: res.data[i],
+              check: false
+            }
+            this.userList.push(obj)
+          }
         }
       })
     },
@@ -145,6 +154,25 @@ export default {
       this.$emit('change', {
         type: 'Add',
       })
+    },
+    idNumberInit(idNumber) {
+      if(!idNumber) {
+        idNumber = ''
+      }else {
+        idNumber = idNumber.substring(0, 5) + '******' + idNumber.substring(12, 15)
+      }
+      return idNumber
+    },
+    showUserType(index) {
+      if(this.userList[index].check) {
+        this.userList[index].check = false
+      }else {
+        this.userList.map((item) => {
+          item.check = false
+        })
+        this.userList[index].check = true
+      }
+     
     }
   }
 }
@@ -214,16 +242,20 @@ export default {
         height: 64px;
         background: #F5F5F5;
         border-radius: 32px;
-        padding: 14px 32px;
+        padding: 14px 32px 14px 64px;
         box-sizing: border-box;
+        position: relative;
         img{
           width: 32px;
           height: 32px;
           margin-right: 12px;
+          position: absolute;
+          top: 18px;
+          left: 24px;
         }
         ::v-deep .u-input{
           display: inline-block;
-          width: 280px;
+          width: 240px;
           font-size: 26px;
         }
       }
@@ -315,6 +347,7 @@ export default {
           }
         }
         .user-info{
+          width: 100%;
           .name{
             font-size: 32px;
             font-family: PingFangSC-Medium, PingFang SC;
@@ -324,6 +357,7 @@ export default {
             margin-bottom: 8px;
           }
           .phone{
+            width: 100%;
             font-size: 26px;
             font-family: PingFangSC-Regular, PingFang SC;
             color: #999;
@@ -335,6 +369,13 @@ export default {
       }
     }
   }
+  .text{
+    height: 96px;
+    line-height: 96px;
+    color: #999;
+    font-size: 28px;
+    text-align: center;
+  }
   .footer{
     width: 100%;
     position: fixed;