未完善居民

src/views/patients/not-complete/not-complete-list.vue

@@ -5,13 +5,66 @@
       :curmbSecond="curmbSecond">
     </bread-crumb>
     <section class="not-complete-content screenSet">
-      <h1>资料不全居民</h1>
+      <h1 class="page-title">资料不全居民</h1>
+      <p class="tip" v-if="notCompleteList.length">
+        共<span class="fontGreen">800位</span>居民仅通过微信扫码与您绑定，但未完善姓名、手机号等关键信息。提醒居民完善信息后，您将可以对居民进行消息推送和随访计划设置。
+        <el-button type="primary" style="float: right;" size="small" @click="sendCompleteMessages">批量提醒</el-button>
+      </p>
+      <el-table
+        v-if="notCompleteList.length"
+        :data="notCompleteList"
+        style="width: 100%;">
+        <el-table-column
+          type="selection"
+          width="100">
+        </el-table-column>
+        <el-table-column
+          prop="headimgurl"
+          label="头像"
+          width="100"
+          lign="center">
+          <template slot-scope="scope">
+            <img class="user-photo" :src="scope.row.headimgurl"/>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="wechatUsername"
+          width="200"
+          label="微信昵称"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="country"
+          label="地区"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="wechatCreatedTime"
+          label="添加时间"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.isRemind==1" type="text" @click="sendCompleteMessage(scope.row)">提醒完善信息</el-button>
+            <el-button v-else-if="scope.row.isRemind==2" type="text" style="color: #999">提醒已发送</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div v-else class="blank-wrap">
+        <div class="blank-content">
+          <img src="../../../assets/image/no-content1.png"/>
+          <p>暂无资料不全居民</p>
+        </div>
+      </div>
     </section>
   </section>
 </template>
 
 <script>
   import BreadCrumb from '../../../components/breadcrumb.vue'
+
   export default {
     name: "not-complete",
     components: {
@@ -21,6 +74,59 @@
       return {
         curmbFirst: '居民管理',
         curmbSecond: '资料不全居民',
+        notCompleteList: [],  //未完善列表
+      }
+    },
+    created() {
+      //const vm = this;
+    },
+    mounted() {
+      this.getNotComplete({
+        pageNo: 1,
+        pageSize: 10
+      })
+    },
+    methods: {
+      getNotComplete(reqData) {
+        const { pageNo, pageSize} = reqData
+        this.GET(`/healths/patients/uncomplate/${pageNo}/${pageSize}`).then((res) => {
+          console.log(res)
+          if(res.code == "000000") {
+            this.notCompleteList = res.data
+          }
+        }).catch(function (error) {
+          this.$message.error(error);
+        });
+      },
+      sendCompleteMessage(item) {
+        let params = {
+          qrcodeType: 1,  //saas 云鹊医平台
+          patientId: item.patientId,
+        }
+        this.POST('/healths/patients/remind',params).then((res) => {
+          this.$message({
+            type: 'success',
+            message: '操作成功!'
+          });
+        }).catch(function (error) {
+          this.$message.error(error);
+        });
+
+      },
+      sendCompleteMessages(item) {
+        let params = {
+          qrcodeType: 1,  //saas 云鹊医平台
+          patientId: item.patientId,
+        }
+        this.POST('/healths/patients/remind',params).then((res) => {
+          this.$message({
+            type: 'success',
+            message: '操作成功!'
+          });
+        }).catch(function (error) {
+          this.$message.error(error);
+        });
+
       }
     }
   }
@@ -29,8 +135,50 @@
 <style lang="scss" scoped>
   .not-complete-wrap {
     .not-complete-content {
-      padding: 10px;
+      padding: 30px;
       background: #ffffff;
+      .tip {
+        font-size: 12px;
+        padding: 30px 0;
+        line-height: 32px;
+      }
+      .page-title {
+        font-size: 20px;
+        color: #F1E2F3D;
+        padding-bottom: 20px;
+        border-bottom: 1px solid #efefef;
+      }
+      .blank-wrap {
+        @media screen and (min-width:1240px) and (max-width:1545px){
+          height: 300px;
+        }
+        @media screen and (min-width:1545px) and (max-width:1600px){
+          height: 500px;
+        }
+        @media screen and (min-width:1600px){
+          height: 600px;
+        }
+        .blank-content {
+          text-align: center;
+          img {
+            width: 100px;
+          }
+          p {
+            font-size: 20px;
+            color: #999;
+          }
+        }
+      }
+      .user-photo {
+        border-radius: 50%;
+        width: 40px;
+      }
     }
   }
+  .el-button--text {
+    color: #449284;
+  }
+  .fontGreen {
+    color: #449284;
+  }
 </style>