From e814269bf8cf525b112ce635ade3e10e480eb3f5 Mon Sep 17 00:00:00 2001
From: xyq <392009588@qq.com>
Date: Mon, 13 Mar 2023 08:48:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=85=E5=9F=BA=E5=9C=B0=E6=89=8B=E6=9C=BA?=
 =?UTF-8?q?=E7=AB=AF=E5=AE=B6=E5=BA=AD=E6=88=90=E5=91=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sunVillage_info/homestead/familyMember.js |  39 ++
 src/permission.js                             |   2 +
 src/router/index.js                           |  18 +
 .../familyMember/familyMemberDetail.vue       | 585 ++++++++++++++++++
 .../familyMember/familyMemberList.vue         | 233 +++++++
 5 files changed, 877 insertions(+)
 create mode 100644 src/api/sunVillage_info/homestead/familyMember.js
 create mode 100644 src/views/sunVillage_info/familyMember/familyMemberDetail.vue
 create mode 100644 src/views/sunVillage_info/familyMember/familyMemberList.vue

diff --git a/src/api/sunVillage_info/homestead/familyMember.js b/src/api/sunVillage_info/homestead/familyMember.js
new file mode 100644
index 00000000..c507617a
--- /dev/null
+++ b/src/api/sunVillage_info/homestead/familyMember.js
@@ -0,0 +1,39 @@
+import request from '@/utils/request'
+//查询列表
+export function getFamilyMemberList(data){
+  return request({
+    url:'/home/mobile/familyMember/list',
+    method:'get',
+    params:data
+  })
+}
+// 新增
+export function addFamilyMember(data){
+  return request({
+    url:'/home/mobile/familyMember/add',
+    method:'post',
+    data:data
+  })
+}
+// 编辑
+export function editFamilyMember(data){
+  return request({
+    url:'/home/mobile/familyMember/edit',
+    method:'post',
+    data:data
+  })
+}
+// 获取农户信息
+export function getFamilyMember(id){
+  return request({
+    url: '/home/mobile/getFamilyMember/'+id,
+    method:'get'
+  })
+}
+// 删除
+export function removeFamilyMember(id){
+  return request({
+    url: `/home/mobile/familyMemberRemove/${id}`,
+    method:'get'
+  })
+}
diff --git a/src/permission.js b/src/permission.js
index 814e014a..16fd9839 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -140,6 +140,8 @@ const whiteList = [
   '/sunVillage_info/paidExitDetail',
   '/sunVillage_info/arbitrationList',
   '/sunVillage_info/arbitrationDetail',
+  '/sunVillage_info/familyMember',
+  '/sunVillage_info/familyMemberDetail',
   '/sunVillage_info/list_signature',
   '/sunVillage_info/list_official',
   '/sunVillage_info/list_signature_add',
diff --git a/src/router/index.js b/src/router/index.js
index d3cf7e36..9122ad4d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3866,6 +3866,24 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/sunVillage_info/arbitration/arbitrationDetail'], resolve)
   },
+  {
+    path: '/sunVillage_info/familyMember',
+    name: 'familyMember',
+    meta: {
+      title: '家庭成员',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage_info/familyMember/familyMemberList'], resolve)
+  },
+  {
+    path: '/sunVillage_info/familyMemberDetail',
+    name: 'familyMemberDetail',
+    meta: {
+      title: '家庭成员',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage_info/familyMember/familyMemberDetail'], resolve)
+  },
   { ////阳光村务（新）-- 合同信息
     path: '/sunVillage_info/list_vote_detail',
     name: 'sunVillageInfoListVoteDetail',
diff --git a/src/views/sunVillage_info/familyMember/familyMemberDetail.vue b/src/views/sunVillage_info/familyMember/familyMemberDetail.vue
new file mode 100644
index 00000000..fef6095b
--- /dev/null
+++ b/src/views/sunVillage_info/familyMember/familyMemberDetail.vue
@@ -0,0 +1,585 @@
+<template>
+    <div class="app-container">
+<!--      <van-nav-bar-->
+<!--        left-arrow-->
+<!--        fixed-->
+<!--        placeholder-->
+<!--        @click-left="$router.back(-1)"-->
+<!--      >-->
+<!--        <template #title>-->
+<!--          <p style="font-weight: bold;">有偿退出</p>-->
+<!--        </template>-->
+<!--      </van-nav-bar>-->
+
+      <div class="header_main">
+        家庭成员详细信息
+        <div class="return_btn" @click="onClickLeft"></div>
+        <!--      <div class="add_btn" @click="goAdd"></div>-->
+      </div>
+
+      <div class="main_box">
+        <!--        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>-->
+        <van-field  readonly v-model="circulation.memberName" label="姓名" placeholder="姓名" input-align="right" label-width="auto" />
+        <!--        <van-field-->
+        <!--          readonly-->
+        <!--          clickable-->
+        <!--          v-model="circulation.zjddm"-->
+        <!--          label="宅基地代码"-->
+        <!--          placeholder="请选择"-->
+        <!--          @click="remoteProposerMethod"-->
+        <!--          input-align="right"-->
+        <!--          right-icon="arrow-down" :rules="[{ required: true }]" required-->
+        <!--        />-->
+        <!--        <van-popup v-model="showzjddm" position="bottom">-->
+        <!--          <van-picker-->
+        <!--            show-toolbar-->
+        <!--            :columns="zjdDictionaries"-->
+        <!--            value-key="zjddm"-->
+        <!--            @confirm="onConfirmZjddm"-->
+        <!--            @cancel="showzjddm = false"-->
+        <!--          />-->
+        <!--        </van-popup>-->
+        <field-select
+          readonly
+          v-model="circulation.sex"
+          label="性別"
+          value-key="dictLabel"
+          data-key="dictValue"
+          placeholder="选择现状"
+          remote-url="/system/dict/data/type/sys_user_sex"
+          :on-remote-response="'data'"
+        />
+        <van-field readonly v-model="circulation.age" label="年龄" placeholder="年龄" input-align="right" label-width="auto" />
+        <van-field readonly v-model="circulation.idcard" label="证件号码" placeholder="证件号码" input-align="right" label-width="auto" />
+        <van-field readonly v-model="circulation.phone" label="联系电话" placeholder="联系电话" input-align="right" label-width="auto"/>
+        <van-field readonly v-model="circulation.householdRegister" label="户籍" placeholder="户籍" input-align="right" label-width="auto"/>
+        <field-select
+          readonly
+          v-model="circulation.nationality"
+          label="民族"
+          value-key="dictLabel"
+          data-key="dictValue"
+          placeholder="选择现状"
+          remote-url="/system/dict/data/type/nationality"
+          :on-remote-response="'data'"
+        />
+        <field-select
+          readonly
+          v-model="circulation.politicCountenance"
+          label="政治面貌"
+          value-key="dictLabel"
+          data-key="dictValue"
+          placeholder="选择政治面貌"
+          remote-url="/system/dict/data/type/politic_countenance"
+          :on-remote-response="'data'"
+        />
+        <field-select
+          readonly
+          v-model="circulation.education"
+          label="学历"
+          value-key="dictLabel"
+          data-key="dictValue"
+          placeholder="选择学历"
+          remote-url="/system/dict/data/type/education"
+          :on-remote-response="'data'"
+        />
+        <field-select
+          readonly
+          v-model="circulation.accountType"
+          label="户口类型"
+          value-key="dictLabel"
+          data-key="dictValue"
+          placeholder="选择户口类型"
+          remote-url="/system/dict/data/type/account_type"
+          :on-remote-response="'data'"
+        />
+        <van-field name="radio" label="是否贫困户" input-align="right" autocomplete="off">
+          <template #input>
+            <van-radio-group v-model="circulation.sfpkh" direction="horizontal">
+              <van-radio name="1">是</van-radio>
+              <van-radio name="0">否</van-radio>
+            </van-radio-group>
+          </template>
+        </van-field>
+        <van-field name="radio" label="是否五保户" input-align="right" autocomplete="off">
+          <template #input>
+            <van-radio-group v-model="circulation.sfwbh" direction="horizontal">
+              <van-radio name="1">是</van-radio>
+              <van-radio name="0">否</van-radio>
+            </van-radio-group>
+          </template>
+        </van-field>
+        <field-select
+          readonly
+          v-model="circulation.isCooperative"
+          label="社员"
+          value-key="dictLabel"
+          data-key="dictValue"
+          placeholder="社员"
+          remote-url="/system/dict/data/type/sys_yes_no"
+          :on-remote-response="'data'"
+        />
+        <field-select
+          readonly
+          v-model="circulation.isMember"
+          label="股民"
+          value-key="dictLabel"
+          data-key="dictValue"
+          placeholder="股民"
+          remote-url="/system/dict/data/type/house_yes_no"
+          :on-remote-response="'data'"
+        />
+      </div>
+      <!-- 审批 -->
+      <div style="padding: 16px 0;">
+        <van-row>
+          <van-row>
+            <van-col span="24" align="center">
+              <van-button type="info" native-type="submit" class="submitButton" @click="goBack">返<i style="margin-right: 1em;"></i>回</van-button>
+            </van-col>
+          </van-row>
+        </van-row>
+        <div class="clear"></div>
+      </div>
+    </div>
+</template>
+
+<script>
+  import { getFamilyMember} from "@/api/sunVillage_info/homestead/familyMember";
+  import FieldSelect from "@/components/form/FieldSelect";
+  import FieldDatePicker from "@/components/form/FieldDatePicker";
+  import {formatDate} from "element-ui/src/utils/date-util.js";
+  import {Notify} from "vant";
+import request from '@/utils/request';
+  const PROPOSER_VIEW = 1;
+  // 工作流名称
+  const PROPOSER_STAGE_BASE_APPLY_ACTIVITY = 'home_usetc';
+  // 附件表名
+  const PROPOSER_STAGE_BASE_APPLY_TABLE = 't_homeuse_zyyctc';
+  // 其他
+  const PROPOSER_MODULE = 'home';
+export default {
+  name: "familyMemberDetail",
+  components: {FieldSelect,FieldDatePicker },
+  data() {
+    return {
+      tcqllxDictionaries:[],//退出权利类型
+      tclxDictionaries:[],//退出类型
+      tcfsDictionaries:[],//退出方式
+      xbDictionaries:[],//申请人证件类型
+      zjlxDictionaries:[],
+      bcfsDictionaries:[],//补偿方式
+      zjdDictionaries:[],//宅基地代码
+      getObligeeOptions:[],//下拉框列表
+      tcqllx:'',
+      tclx:'',
+      tcfs:'',
+      xb:'',
+      bcfs:'',
+      zjddm:'',
+      landStatus:"1",
+      nickName:this.$route.query.nickName,
+      electronicSignature:this.$route.query.electronicSignature,
+      showtcqllx: false,
+      showtclx: false,
+      showtcfs: false,
+      showxb: false,
+      showbcfs: false,
+      showzjddm: false,
+      showZjsp: false,
+      showCjt:false,
+      cjtspOperation:false,
+      showDropList: false,//是否显示下拉框
+      mapShow: false,
+      attachmentVisible:false,
+      // 家庭成员tab
+      familyMembersActive: 0,
+      active: 0,
+      // 表单意图
+      proposerStatus: PROPOSER_VIEW,
+      circulation:{},
+      // 当前附件tab
+      attachmentActive: 0,
+      // 申请附件树
+      houseApplyUploadComp: {
+        businessType: PROPOSER_MODULE,
+        proposerId: this.$route.query.id,
+        homeApplyStatus: "11",
+        processKey: PROPOSER_STAGE_BASE_APPLY_ACTIVITY,
+        tableName: PROPOSER_STAGE_BASE_APPLY_TABLE,
+        attachmentList: [],
+        readonly: true,
+        full: false,
+      },
+      approval: {
+        taskId: null,
+        instanceId: null,
+        type: null,
+        id: null,
+        comment: '',
+      },
+    };
+  },
+  created() {
+    this.approval.id = this.$route.query.id;
+    this.approval.instanceId = this.$route.query.instanceId;
+    this.approval.type = this.$route.query.type;
+    this.approval.taskId = this.$route.query.taskId;
+    this.getDetail();
+  },
+  methods: {
+    // 获取日期, yyyy-MM-dd
+    getDate(d) {
+      return formatDate(d ? d : new Date(), 'yyyy-MM-dd');
+    },
+    getDetail(){
+      getFamilyMember(this.$route.query.id).then(response => {
+        this.circulation = response.data;
+        let res = this.parseIDCard( response.data.idcard);
+        if(res)
+        {
+          this.$set(this.circulation, 'age', res[1]);
+        }
+        //退出权利类型
+        this.houseGetDicts("tcqllx").then((res) => {
+          for (var i = 0; i < res.data.length; i++) {
+            this.tcqllxDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
+          }
+          this.tcqllx = this.selectDictLabel(res.data, response.data.tcqllx);
+        });
+        //退出方式
+        this.houseGetDicts("tcfs").then((res) => {
+          for (var i = 0; i < res.data.length; i++) {
+            this.tcfsDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
+          }
+          this.tcfs = this.selectDictLabel(res.data, response.data.tcfs);
+        });
+        //审核状态
+        this.houseGetDicts("audit_status").then((res) => {
+          this.circulation.auditStatus = this.selectDictLabel(res.data, response.data.auditStatus);
+        });
+      });
+    },
+    parseIDCard(idcard) {
+      if(!idcard)
+        return false;
+      if(idcard.length !== 18)
+        return false;
+      if(!/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(idcard))
+        return false;
+      let sex = (parseInt(idcard.substr(16, 1)) % 2) ^ 1;
+      let now = new Date().getFullYear();
+      let y = parseInt(idcard.substr(6, 4));
+      let age = Math.max(now - y, 0);
+      return [sex, age];
+    },
+    updateMemberInfo(index) {
+      let res = this.parseIDCard(this.circulation.jtcyqkList[index].sfzh);
+      if(res)
+      {
+        this.$set(this.circulation.jtcyqkList[index], 'nl', res[1]);
+      }
+    },
+    updateMemberInfoGy(index) {
+      let res = this.parseIDCard(this.circulation.gyrqkList[index].sfzh);
+      if(res)
+      {
+        this.$set(this.circulation.gyrqkList[index], 'nl', res[1]);
+      }
+    },
+    remoteProposerMethod() {
+      this.showzjddm = true;
+      this.zjdDictionaries = [];
+      if (this.circulation.sqrxm) {
+        getShyqrs({shyqrdbxm:this.circulation.sqrxm}).then(response => {
+          this.zjdDictionaries = response.data.map(item => {
+            return {
+              zjddm: item.zjddm,
+              shyqrdbxm: item.shyqrdbxm,
+              shyqrdbzjlx: item.shyqrdbzjlx,
+              shyqrdbzjhm: item.shyqrdbzjhm
+            }
+          });
+        });
+      } else {
+        this.zjdDictionaries = [];
+      }
+    },
+    /** 模糊查询人员信息 */
+    remoteTransfereeMethod(query) {
+      if (query !== "") {
+        getShyqrs({shyqrdbxm:query,status:1}).then((response) => {
+          if (response.code == 200) {
+            this.getObligeeOptions = response.rows.map(function (item) {
+              return {
+                sqrxm:item.shyqrdbxm,
+                sqrxb:item.xb,
+                sqrzjhm:item.shyqrdbzjhm,
+                sqrzjlx:item.shyqrdbzjlx,
+                sqrdh:item.dh,
+                gyfs:item.gyfs,
+                dz:item.dz,
+                deptId:item.deptId,
+                deptName:item.deptName,
+              }
+            })
+            //设置模糊查询的下拉框和滚动条
+            if (this.getObligeeOptions.length > 0) {
+              this.showDropList = true;   // div显示会阻挡下边的选择框和输入框，showDropList控制下拉框是否显示
+              //设置模糊查询的和滚动条
+              this.$nextTick(() => {
+                if (this.getObligeeOptions.length > 4) {
+                  let height = document.getElementById("vanCell").offsetHeight * 4;
+                  document.getElementById("dropList").style.height = height + "px";
+                  document.getElementById("dropList").style.overflow = "scroll";
+                } else {
+                  document.getElementById("dropList").style.height = "";
+                  document.getElementById("dropList").style.overflow = "visible";
+                }
+              });
+            } else {
+              this.showDropList = false;
+            }
+          }
+        });
+      } else {
+        this.getObligeeOptions = [];
+        this.showDropList = false;
+      }
+    },
+    shyqrdmxmChange(val){
+      console.info(val);
+      this.$set(this.circulation, "sqrxm", val.sqrxm);
+      this.$set(this.circulation, "deptId", val.deptId);
+      this.$set(this.circulation, "deptName", val.deptId);
+      this.$set(this.circulation, "sqrzjhm", val.sqrzjhm);
+      this.$set(this.circulation, "sqrzjlx", val.sqrzjlx);
+      this.$set(this.circulation, "gyqk", val.gyfs);
+      this.$set(this.circulation, "xb", val.sqrxb);
+      this.$set(this.circulation, "lxdh", val.sqrdh);
+      this.$set(this.circulation, "hkszd", val.dz);
+      this.getObligeeOptions=[];
+      this.showDropList = false;
+    },
+    /** 查找地图中宅基地 */
+    closeMoule: function (data) {
+      this.circulation.zjddm = data;
+      let _this = this;
+      let handlerTime = this.getDate();
+      this.$set(this.circulation, "sqrq", handlerTime);
+      this.$set(this.circulation, "pzrq", handlerTime);
+      this.$set(this.circulation, "barq", handlerTime);
+      getByLyZjddm(data).then((response) => {
+        this.$set(this.circulation, "ntcmj", response.data.zdmj);
+        this.$set(this.circulation, "tcmj", response.data.zdmj);
+        this.$set(this.circulation, "zjdszd", response.data.zdszd);
+        this.$set(this.circulation, "zjdszn", response.data.zdszn);
+        this.$set(this.circulation, "zjdszx", response.data.zdszx);
+        this.$set(this.circulation, "zjdszb", response.data.zdszb);
+        this.$set(this.circulation, "theGeomJson", response.data.theGeomJson);
+        this.$set(this.circulation, "tcqszsh", response.data.zsh);
+        listHomesteadnmfw({zjddm: data}).then((response) => {
+          response.rows.map(function(item){
+            _this.$set(_this.circulation, "jzmj", Number(_this.circulation.jzmj) + Number(item.jzmj));
+            _this.$set(_this.circulation, "xjzmj", Number(_this.circulation.xjzmj) + Number(item.jzmj));
+          });
+        });
+        // const baseImgUrl = this.$store.getters.baseRoutingUrl;
+        if(response.rows[0].zdt != null && response.rows[0].zdt !== ""){
+          this.$set(this.form, "xzzp", response.rows[0].zdt);
+        }
+      });
+    },
+    mapLook(){
+      this.mapShow = true;
+      setTimeout(() => {
+        this.$refs.zjdProductResh.drawingLyPaceCountryDarw();
+      },1000);
+    },
+    // 打开附件树
+    openAttachment() {
+      this.attachmentVisible = true;
+      if(this.attachmentActive == this.active)
+        this.$nextTick(() => {
+          this.$refs.attachmentDialog.scrollTo(this.active);
+        });
+    },
+    //返回上一步操作
+    goBack(){
+      this.$router.push({name: this.$router.back(-1)});
+    },
+    complete(pass) {
+      if(this.circulation.auditStatus === "1" || this.circulation.auditStatus === "2"){
+        this.approval.comment = this.circulation.cjzzscyj;
+      }else{
+        this.approval.comment = this.circulation.xzzfshpzyj;
+      }
+      if(!this.approval.taskId || !this.approval.instanceId || this.approval.type !== 'todo')
+      {
+        console.error("无效操作");
+        return false;
+      }
+      if(!this.approval.comment)
+      {
+        this.notify("请填写审批意见", 'danger');
+        return false;
+      }
+      /*let data = {
+        taskId: this.approval.taskId,
+        instanceId: this.approval.instanceId,
+        variables: JSON.stringify({
+          pass: pass ? "true" : "false",
+          comment: this.approval.comment ? this.approval.comment : (pass ? '同意' : '驳回'),
+        }),
+      };
+      request({
+        url: "/activiti/process/complete",
+        method: "post",
+        params: data,
+      }).then((response) => {
+        this.notify("操作成功", 'success');
+        this.$router.back();
+      }).catch(e => {
+        this.notify("操作失败!", 'danger');
+      });*/
+      if (pass) {
+        let data = {
+          taskId: this.approval.taskId,
+          instanceId: this.approval.instanceId,
+          variables: JSON.stringify({
+            pass: "true",
+            comment: this.approval.comment ? this.approval.comment : "同意",
+          }),
+        };
+        zyyctcEdit(this.circulation).then(response => {
+          request({
+            url: "/activiti/process/complete",
+            method: "post",
+            params: data,
+          }).then((response) => {
+            this.notify("操作成功", 'success');
+            this.$router.back();
+          }).catch(e => {
+            this.notify("操作失败!", 'danger');
+          });
+        });
+
+      } else {
+        let _this = this;
+        _this.$dialog.confirm({
+          message: '是否确认驳回此条申请',
+        }).then(() => {
+          let data = {
+            taskId: _this.approval.taskId,
+            instanceId: _this.approval.instanceId,
+            variables: JSON.stringify({
+              pass: "false",
+              comment: _this.approval.comment ? _this.approval.comment : "驳回",
+            }),
+          };
+          zyyctcEdit(this.circulation).then(response => {
+            request({
+              url: "/activiti/process/complete",
+              method: "post",
+              params: data,
+            }).then((response) => {
+              _this.notify("操作成功", 'success');
+              _this.$router.back();
+            }).catch(e => {
+              _this.notify("操作失败!", 'danger');
+            });
+          });
+        });
+      }
+      return true;
+    },
+    notify(message, type) {
+      Notify.clear();
+      Notify({ type: type || 'primary', message: message });
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+  .app-container {
+    padding-bottom: 2%;
+    .header_main{
+      height: 116px;
+      background: url('../../../assets/images/sunVillage_info/list_head_green.png') no-repeat;
+      background-size: 100% 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      font-size: 36px;
+      line-height: 116px;
+      text-align: center;
+      color: #fff;
+      position: relative;
+      margin-bottom: 2%;
+      .return_btn{
+        width: 24px;
+        height: 43.2px;
+        background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
+        background-size: 20px 36px;
+        position: absolute;
+        left: 38px;
+        top: 36px;
+      }
+      .add_btn{
+        width: 56.4px;
+        height: 40.8px;
+        background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
+        background-size: 47px 34px;
+        position: absolute;
+        right: 38px;
+        top: 36px;
+      }
+    }
+  }
+  .main_title{
+    font-size: 0.4rem;
+    color: #1D6FE9;
+    margin: 0.2rem 6%;
+    position: relative;
+  }
+  .main_box{
+    width: 96%;
+    margin: 0 auto;
+    border-radius: 6px;
+    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
+    overflow: hidden;
+    background-color: #FFF;
+  }
+  .submitButton{
+    width: 80%;
+    margin: 0 auto;
+    background-color: #1D6FE9;
+
+  }
+  .clear{
+    height: 80px;
+  }
+  .examine_box{
+    background-color: #1D6FE9!important;
+    padding: 0.18rem!important;
+    padding-left: 0!important;
+    border-radius: 0.15rem!important;
+    margin-top: 0.3rem!important;
+    .van-col:first-child{
+      color: #FFF!important;
+      font-size: 0.45rem!important;
+      text-align: center!important;
+    }
+    .van-col:last-child{
+      background-color: #FFF!important;
+      border-radius: 0.15rem!important;
+      overflow: hidden!important;
+      .van-radio-group--horizontal{
+        padding: 0.2rem 0;
+        border-bottom: 1px solid #eee;
+      }
+    }
+  }
+</style>
diff --git a/src/views/sunVillage_info/familyMember/familyMemberList.vue b/src/views/sunVillage_info/familyMember/familyMemberList.vue
new file mode 100644
index 00000000..4da99014
--- /dev/null
+++ b/src/views/sunVillage_info/familyMember/familyMemberList.vue
@@ -0,0 +1,233 @@
+<template>
+    <div class="app-container">
+<!--      <van-nav-bar-->
+<!--        left-arrow-->
+<!--        fixed-->
+<!--        placeholder-->
+<!--        @click-left="$router.back(-1)"-->
+<!--        @click-right="goAdd"-->
+<!--      >-->
+<!--        <template #title>-->
+<!--          <p style="font-weight: bold;">有偿退出</p>-->
+<!--        </template>-->
+<!--        <template #right>-->
+<!--          <van-icon name="add" size="18" />-->
+<!--        </template>-->
+<!--      </van-nav-bar>-->
+
+      <div class="header_main">
+        家庭成员
+        <div class="return_btn" @click="onClickLeft"></div>
+      </div>
+
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="getList"
+      >
+        <van-swipe-cell v-for="(item,index) in applicationList" :key="index">
+          <van-cell :title="item.memberName" :value="item.familyStatus"  center :to="{name:'familyMemberDetail', query: {id:item.id}}" >
+            <template #icon>
+              <van-icon name="../../../static/images/onlineHome/jtcy2.png" size="30" color="#539FFD" style="margin-right: 10px;" />
+            </template>
+            <template #label>
+              <p><b style="color: #539FFD;">{{item.idcard}}</b><i style="margin-right: 0.2rem;"></i><b style="color: #333333;">{{item.sex}}</b></p>
+            </template>
+          </van-cell>
+        </van-swipe-cell>
+      </van-list>
+    </div>
+</template>
+
+<script>
+import { getFamilyMemberList, removeFamilyMember } from "@/api/sunVillage_info/homestead/familyMember";
+import Cookies from "js-cookie";
+export default {
+  name: "familyMemberList",
+  data() {
+    return {
+      applicationList:[],
+      houseApplyStatus:[],
+      familyStatus:[],
+      sexStatus:[],
+      tcfsStatus:[],
+      auditStatus:[],
+      loading: false,
+      finished: false,
+      idcard:null,
+      queryParams:{
+        pageNum:1,
+        pageSize:10,
+        deptId: Cookies.get('deptId'),
+        orderByColumn:'createTime',
+        isAsc:'desc',
+        // 申请类型  1-宅基地退出
+        sqlx: '1',
+        // 退出类型  01-有偿退出   02-无偿退出
+        tclx: '01',
+      }
+    };
+  },
+  created() {
+    this.houseGetDicts("family_status").then((res) => {
+      this.familyStatus = res.data;
+    });
+    this.houseGetDicts("sex").then((res) => {
+      this.sexStatus = res.data;
+    });
+    this.houseGetDicts("tcfs").then((res) => {
+      this.tcfsStatus = res.data;
+    });
+    this.idcard = Cookies.get('idcard');
+    this.$set(this.queryParams, "sqrzjhm", this.idcard);
+    this.houseGetDicts("yctcsp_status").then((res) => {
+      // this.auditStatus = res.data;
+      let _this = this;
+      res.data.forEach((item) => {
+        if (item.dictValue < 5) {
+          _this.auditStatus.push(item);
+        } else if (item.dictValue == 5) {
+          item.dictLabel = "审核通过";
+          _this.auditStatus.push(item);
+        }
+      });
+    });
+  },
+  methods: {
+    goAdd(){
+      window.location = '/sunVillage_info/paidExitAdd';
+    },
+    getList(){
+      setTimeout(() => {
+        getFamilyMemberList(this.queryParams).then(response => {
+          for (var i = 0; i < response.rows.length; i++) {
+            response.rows[i].familyStatus = this.selectDictLabel(this.familyStatus, response.rows[i].familyStatus);
+            response.rows[i].sex = this.selectDictLabel(this.sexStatus, response.rows[i].sex);
+            if(response.rows[i].phone !== null){
+              response.rows[i].familyStatus = response.rows[i].familyStatus + " "+ response.rows[i].phone;
+            }
+            let res = this.parseIDCard( response.rows[i].idcard);
+            if(res)
+            {
+              this.$set(response.rows[i], 'age', res[1]);
+            }
+            this.applicationList.push(response.rows[i]);
+          }
+          if(this.applicationList.length >= response.total){
+            this.finished = true;
+            return;
+          }else{
+            this.loading = false;
+            this.queryParams.pageNum += 1 ;
+          }
+        });
+      }, 1000);
+    },
+    parseIDCard(idcard) {
+      if(!idcard)
+        return false;
+      if(idcard.length !== 18)
+        return false;
+      if(!/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(idcard))
+        return false;
+      let sex = (parseInt(idcard.substr(16, 1)) % 2) ^ 1;
+      let now = new Date().getFullYear();
+      let y = parseInt(idcard.substr(6, 4));
+      let age = Math.max(now - y, 0);
+      return [sex, age];
+    },
+    deleteList(id,index){
+      this.$dialog.confirm({
+        message: '您确认删除此条信息？',
+      })
+      .then(() => {
+        // on confirm
+        this.applicationList.splice(index,1)
+        removeFamilyMember(id).then(res => {
+          if(res.code = 200){
+            this.$toast.success('删除成功');
+          }
+        });
+      })
+      .catch(() => {
+        // on cancel
+      });
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+  .app-container {
+    .header_main{
+      height: 116px;
+      background: url('../../../assets/images/sunVillage_info/list_head_green.png') no-repeat;
+      background-size: 100% 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      font-size: 36px;
+      line-height: 116px;
+      text-align: center;
+      color: #fff;
+      position: relative;
+      .return_btn{
+        width: 24px;
+        height: 43.2px;
+        background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
+        background-size: 20px 36px;
+        position: absolute;
+        left: 38px;
+        top: 36px;
+      }
+      .add_btn{
+        width: 56.4px;
+        height: 40.8px;
+        background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
+        background-size: 47px 34px;
+        position: absolute;
+        right: 38px;
+        top: 36px;
+      }
+    }
+  }
+  /deep/.van-list{
+    padding: 0.2rem 3%;
+  }
+  /deep/.van-cell__title{
+    flex: 0.7;
+  }
+  /deep/.van-cell__title span{
+    font-family: Arial;
+    font-size: 0.4rem;
+    font-weight: normal;
+  }
+  /deep/.van-cell__value{
+    flex: 0.3;
+    color: #1D6FE9;
+    font-weight: bold;
+    text-align: center;
+    position: relative;
+    left: 20px;
+  }
+  /deep/.van-swipe-cell{
+    margin-bottom: 0.2rem;
+    border-radius: 0.2rem;
+    overflow: hidden;
+    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
+  }
+  /deep/van-ellipsis{
+    font-weight: bold;
+  }
+  .delete-button {
+    height: 100%;
+  }
+  .van-row{
+    height: 100%;
+  }
+  .van-col{
+    height: 100%;
+  }
+</style>