From d7c742369181e5ac772836f19470e97c365904c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BA=9E=E4=B8=9C=E6=97=AD?= <850374051@qq.com>
Date: Thu, 2 Sep 2021 13:36:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=85=E5=9F=BA=E5=9C=B0=E6=9C=89=E5=81=BF?=
 =?UTF-8?q?=E9=80=80=E5=87=BA=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/onlineHome/homestead/paidExit.js      |  52 +++
 src/router/index.js                           |  18 +
 .../homestead/mortgage/mortgageAdd.vue        |   1 -
 .../homestead/mortgage/mortgageDetail.vue     |   1 -
 .../homestead/mortgage/mortgageModify.vue     |  13 +-
 .../homestead/paidExit/paidExitAdd.vue        | 390 +++++++++++-------
 .../homestead/paidExit/paidExitDetail.vue     | 145 +++++++
 .../homestead/paidExit/paidExitList.vue       | 119 ++++--
 .../homestead/paidExit/paidExitModify.vue     | 319 ++++++++++++++
 9 files changed, 875 insertions(+), 183 deletions(-)
 create mode 100644 src/api/onlineHome/homestead/paidExit.js
 create mode 100644 src/views/onlineHome/homestead/paidExit/paidExitDetail.vue
 create mode 100644 src/views/onlineHome/homestead/paidExit/paidExitModify.vue

diff --git a/src/api/onlineHome/homestead/paidExit.js b/src/api/onlineHome/homestead/paidExit.js
new file mode 100644
index 00000000..5d3624ae
--- /dev/null
+++ b/src/api/onlineHome/homestead/paidExit.js
@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+//查询列表
+export function getList(data){
+  return request({
+    url:'/house/mobile/zyyctc/list',
+    method:'get',
+    params:data
+  })
+}
+
+//删除列表项
+export function removeList(id){
+  return request({
+    url:'/house/zyyctc/remove/'+id,
+    method:'get'
+  })
+}
+
+//宅基地流转详情
+export function getZyyctc(id){
+  return request({
+    url:'/house/zyyctc/get/'+id,
+    method:'get'
+  })
+}
+
+//宅基地流转详情
+export function dyAdd(data){
+  return request({
+    url:'/house/zyyctc/add',
+    method:'post',
+    data:data
+  })
+}
+
+//宅基地流转保存
+export function zyyctcEdit(data){
+  return request({
+    url:'/house/zyyctc/edit',
+    method:'post',
+    data:data
+  })
+}
+
+//宅基地流转提交
+export function zyyctcApply(id){
+  return request({
+    url:'/house/zyyctc/submitApply/'+id,
+    method:'post',
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 38006378..ffedcae7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -770,6 +770,24 @@ export const constantRoutes = [
       hidden: true,
     },
     component: (resolve) => require(['@/views/onlineHome/homestead/mortgage/mortgageModify'], resolve)
+  },
+  {
+    path: '/paidExitDetail',
+    name: 'paidExitDetail',
+    meta: {
+      title: '有偿退出详情',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/homestead/paidExit/paidExitDetail'], resolve)
+  },
+  {
+    path: '/paidExitModify',
+    name: 'paidExitModify',
+    meta: {
+      title: '有偿退出修改',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/homestead/paidExit/paidExitModify'], resolve)
   }
 ];
 
diff --git a/src/views/onlineHome/homestead/mortgage/mortgageAdd.vue b/src/views/onlineHome/homestead/mortgage/mortgageAdd.vue
index 21018172..8924fac9 100644
--- a/src/views/onlineHome/homestead/mortgage/mortgageAdd.vue
+++ b/src/views/onlineHome/homestead/mortgage/mortgageAdd.vue
@@ -174,7 +174,6 @@ export default {
   data() {
     return {
       value: '',
-      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
       showdjsj: false,
       showdybdclx: false,
       showdyfs: false,
diff --git a/src/views/onlineHome/homestead/mortgage/mortgageDetail.vue b/src/views/onlineHome/homestead/mortgage/mortgageDetail.vue
index 64bdfac9..45bf1795 100644
--- a/src/views/onlineHome/homestead/mortgage/mortgageDetail.vue
+++ b/src/views/onlineHome/homestead/mortgage/mortgageDetail.vue
@@ -82,7 +82,6 @@ export default {
   name: "mortgageDetail",
   data() {
     return {
-      value: '',
       circulation:[]
     };
   },
diff --git a/src/views/onlineHome/homestead/mortgage/mortgageModify.vue b/src/views/onlineHome/homestead/mortgage/mortgageModify.vue
index 9fb4f60d..ac2cec72 100644
--- a/src/views/onlineHome/homestead/mortgage/mortgageModify.vue
+++ b/src/views/onlineHome/homestead/mortgage/mortgageModify.vue
@@ -155,10 +155,10 @@
       <div style="padding: 16px 0;">
         <van-row>
           <van-col span="12" align="center">
-            <van-button type="info" color="#B4B0B0" native-type="submit" class="submitButton">关闭</van-button>
+            <van-button type="info" native-type="submit" class="submitButton" @click="goEdit">保存</van-button>
           </van-col>
           <van-col span="12" align="center">
-            <van-button type="info" native-type="submit" class="submitButton" @click="goSubmit">保存</van-button>
+            <van-button type="info" native-type="submit" class="submitButton" @click="goSubmit">提交</van-button>
           </van-col>
         </van-row>
         <div class="clear"></div>
@@ -275,8 +275,15 @@ export default {
         }
       });
     },
-    goSubmit(){
+    goEdit(){
       dyEdit(this.circulation).then(response => {
+        if(response.code = 200){
+          this.$toast.success('保存成功');
+        }
+      });
+    },
+    goSubmit(){
+      dyApply(this.$route.query.id).then(response => {
         if(response.code = 200){
           this.$toast.success('保存成功');
           setTimeout(function(){
diff --git a/src/views/onlineHome/homestead/paidExit/paidExitAdd.vue b/src/views/onlineHome/homestead/paidExit/paidExitAdd.vue
index ed345852..0e574191 100644
--- a/src/views/onlineHome/homestead/paidExit/paidExitAdd.vue
+++ b/src/views/onlineHome/homestead/paidExit/paidExitAdd.vue
@@ -10,186 +10,266 @@
           <p style="font-weight: bold;">添加有偿退出</p>
         </template>
       </van-nav-bar>
-      <van-form @submit="onSubmit">
-        <div class="main_box">
-          <van-field
-            readonly
-            clickable
-            name="picker"
-            :value="value"
-            label="宅基地代码"
-            placeholder="请选择"
-            @click="showPicker = true"
-            input-align="right"
-            right-icon="arrow-down"
+      <div class="main_box">
+        <van-field
+          readonly
+          clickable
+          v-model="circulation.zjddm"
+          label="宅基地代码"
+          placeholder="请选择"
+          @click="showzjddm = true"
+          input-align="right"
+          right-icon="arrow-down"
+        />
+        <van-popup v-model="showzjddm" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="zjdDictionaries"
+            @confirm="onConfirmZjddm"
+            @cancel="showzjddm = false"
           />
-          <van-popup v-model="showPicker" position="bottom">
-            <van-picker
-              show-toolbar
-              :columns="columns"
-              @confirm="onConfirm"
-              @cancel="showPicker = false"
-            />
-          </van-popup>
-          <van-field label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto"/>
-          <van-field
-            readonly
-            clickable
-            name="picker"
-            :value="value"
-            label="申请人证件类型"
-            placeholder="请选择"
-            @click="showPicker = true"
-            input-align="right"
-            right-icon="arrow-down"
-            label-width="auto"
+        </van-popup>
+        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto"/>
+        <van-field
+          readonly
+          clickable
+          v-model="zjlx"
+          label="申请人证件类型"
+          placeholder="请选择"
+          @click="showzjlx = true"
+          input-align="right"
+          right-icon="arrow-down"
+          label-width="auto"
+        />
+        <van-popup v-model="showzjlx" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="zjlxDictionaries"
+            @confirm="onConfirmZjlx"
+            @cancel="showzjlx = false"
           />
-          <van-popup v-model="showPicker" position="bottom">
-            <van-picker
-              show-toolbar
-              :columns="columns"
-              @confirm="onConfirm"
-              @cancel="showPicker = false"
-            />
-          </van-popup>
-          <van-field label="申请人证件号码" placeholder="申请人证件号码" input-align="right" label-width="auto"/>
-        </div>
+        </van-popup>
+        <van-field v-model="circulation.sqrzjhm" label="申请人证件号码" placeholder="申请人证件号码" input-align="right" label-width="auto"/>
+      </div>
 
-        <p class="main_title">退出信息</p>
-        <div class="main_box">
-          <van-field
-            readonly
-            clickable
-            name="picker"
-            :value="value"
-            label="退出权利类型"
-            placeholder="请选择退出权利类型"
-            @click="showPicker = true"
-            input-align="right"
-            right-icon="arrow-down"
-            label-width="auto"
+      <p class="main_title">退出信息</p>
+      <div class="main_box">
+        <van-field
+          readonly
+          clickable
+          v-model="tcqllx"
+          label="退出权利类型"
+          placeholder="请选择退出权利类型"
+          @click="showtcqllx = true"
+          input-align="right"
+          right-icon="arrow-down"
+          label-width="auto"
+        />
+        <van-popup v-model="showtcqllx" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="tcqllxDictionaries"
+            @confirm="onConfirmTcqllx"
+            @cancel="showtcqllx = false"
           />
-          <van-popup v-model="showPicker" position="bottom">
-            <van-picker
-              show-toolbar
-              :columns="columns"
-              @confirm="onConfirm"
-              @cancel="showPicker = false"
-            />
-          </van-popup>
+        </van-popup>
 
-          <van-field
-            readonly
-            clickable
-            name="picker"
-            :value="value"
-            label="退出类型"
-            placeholder="请选择退出类型"
-            @click="showPicker = true"
-            input-align="right"
-            right-icon="arrow-down"
-            label-width="auto"
+        <van-field
+          readonly
+          clickable
+          v-model="tclx"
+          label="退出类型"
+          placeholder="请选择退出类型"
+          @click="showtclx = true"
+          input-align="right"
+          right-icon="arrow-down"
+          label-width="auto"
+        />
+        <van-popup v-model="showtclx" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="tclxDictionaries"
+            @confirm="onConfirmTclx"
+            @cancel="showtclx = false"
           />
-          <van-popup v-model="showPicker" position="bottom">
-            <van-picker
-              show-toolbar
-              :columns="columns"
-              @confirm="onConfirm"
-              @cancel="showPicker = false"
-            />
-          </van-popup>
+        </van-popup>
 
-          <van-field
-            readonly
-            clickable
-            name="picker"
-            :value="value"
-            label="退出方式"
-            placeholder="请选择退出方式"
-            @click="showPicker = true"
-            input-align="right"
-            right-icon="arrow-down"
-            label-width="auto"
+        <van-field
+          readonly
+          clickable
+          v-model="tcfs"
+          label="退出方式"
+          placeholder="请选择退出方式"
+          @click="showtcfs = true"
+          input-align="right"
+          right-icon="arrow-down"
+          label-width="auto"
+        />
+        <van-popup v-model="showtcfs" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="tcfsDictionaries"
+            @confirm="onConfirmTcfs"
+            @cancel="showtcfs = false"
           />
-          <van-popup v-model="showPicker" position="bottom">
-            <van-picker
-              show-toolbar
-              :columns="columns"
-              @confirm="onConfirm"
-              @cancel="showPicker = false"
-            />
-          </van-popup>
-          <van-field label="退出面积" placeholder="请输入退出面积㎡" input-align="right" label-width="auto"/>
-          <van-field label="退出年限" placeholder="请输入退出年限" input-align="right" label-width="auto"/>
-        </div>
+        </van-popup>
+        <van-field v-model="circulation.tcmj" label="退出面积" placeholder="请输入退出面积㎡" input-align="right" label-width="auto"/>
+        <van-field v-model="circulation.tcnx" label="退出年限" placeholder="请输入退出年限" input-align="right" label-width="auto"/>
+      </div>
 
-        <p class="main_title">补偿信息</p>
-        <div class="main_box">
-          <van-field
-            readonly
-            clickable
-            name="picker"
-            :value="value"
-            label="补偿方式"
-            placeholder="请选择补偿方式"
-            @click="showPicker = true"
-            label-width="auto"
-            input-align="right"
-            right-icon="arrow-down"
+      <p class="main_title">补偿信息</p>
+      <div class="main_box">
+        <van-field
+          readonly
+          clickable
+          v-model="bcfs"
+          label="补偿方式"
+          placeholder="请选择补偿方式"
+          @click="showbcfs = true"
+          label-width="auto"
+          input-align="right"
+          right-icon="arrow-down"
+        />
+        <van-popup v-model="showbcfs" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="bcfsDictionaries"
+            @confirm="onConfirmBcfs"
+            @cancel="showbcfs = false"
           />
-          <van-popup v-model="showPicker" position="bottom">
-            <van-picker
-              show-toolbar
-              :columns="columns"
-              @confirm="onConfirm"
-              @cancel="showPicker = false"
-            />
-          </van-popup>
-          <van-field label="补偿金额" placeholder="请输入补偿金额 元" input-align="right" label-width="auto"/>
-          <van-field label="置换房屋面积" placeholder="请输入房屋面积㎡" input-align="right" label-width="auto"/>
-          <van-field label="置换房屋坐落" placeholder="请输入房屋坐落" input-align="right" label-width="auto"/>
-          <van-field label="备注" placeholder="请输入内容" input-align="right" label-width="auto"/>
+        </van-popup>
+        <van-field v-model="circulation.bcje" label="补偿金额" placeholder="请输入补偿金额 元" input-align="right" label-width="auto"/>
+        <van-field v-model="circulation.zhfwmj" label="置换房屋面积" placeholder="请输入房屋面积㎡" input-align="right" label-width="auto"/>
+        <van-field v-model="circulation.zhfwzl" label="置换房屋坐落" placeholder="请输入房屋坐落" input-align="right" label-width="auto"/>
+        <van-field v-model="circulation.bz" label="备注" placeholder="请输入内容" input-align="right" label-width="auto"/>
 
-        </div>
+      </div>
 
-        <div style="padding: 16px 0;">
-          <van-row>
-            <van-col span="12" align="center">
-              <van-button type="info" color="#B4B0B0" native-type="submit" class="submitButton">关闭</van-button>
-            </van-col>
-            <van-col span="12" align="center">
-              <van-button type="info" native-type="submit" class="submitButton">保存</van-button>
-            </van-col>
-          </van-row>
-          <div class="clear"></div>
-        </div>
-
-      </van-form>
+      <div style="padding: 16px 0;">
+        <van-row>
+          <van-col span="12" align="center">
+            <van-button type="info" color="#B4B0B0" native-type="submit" class="submitButton">关闭</van-button>
+          </van-col>
+          <van-col span="12" align="center">
+            <van-button type="info" native-type="submit" class="submitButton" @click="goSubmit">保存</van-button>
+          </van-col>
+        </van-row>
+        <div class="clear"></div>
+      </div>
     </div>
 </template>
 
 <script>
+import { zjdzd } from "@/api/onlineHome/homestead/circulation";
+import { dyAdd } from "@/api/onlineHome/homestead/paidExit";
 export default {
-    name: "circulationAdd",
+  name: "paidExitAdd",
   data() {
     return {
-      value: '',
-      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
-      showPicker: false,
-      showPicker1: false,
-      minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
-      currentDate: new Date(2021, 0, 17),
+      tcqllxDictionaries:[],//退出权利类型
+      tclxDictionaries:[],//退出类型
+      tcfsDictionaries:[],//退出方式
+      zjlxDictionaries:[],//申请人证件类型
+      bcfsDictionaries:[],//补偿方式
+      zjdDictionaries:[],//宅基地代码
+
+      tcqllx:'',
+      tclx:'',
+      tcfs:'',
+      zjlx:'',
+      bcfs:'',
+      zjddm:'',
+
+      showtcqllx: false,
+      showtclx: false,
+      showtcfs: false,
+      showzjlx: false,
+      showbcfs: false,
+      showzjddm: false,
+
+      circulation:{}
     };
   },
   created() {
-
+    this.getDictionaries();
   },
   methods: {
-    onConfirm(value) {
-      this.value = value;
-      this.showPicker = false;
+    getDictionaries(){
+      //退出权利类型
+      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.houseGetDicts("tclx").then((res) => {
+        for(var i = 0 ; i < res.data.length ; i++){
+          this.tclxDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
+        }
+      });
+      //退出方式
+      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.houseGetDicts("zjlx").then((res) => {
+        for(var i = 0 ; i < res.data.length ; i++){
+          this.zjlxDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
+        }
+      });
+      //补偿方式
+      this.houseGetDicts("bcfs").then((res) => {
+        for(var i = 0 ; i < res.data.length ; i++){
+          this.bcfsDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
+        }
+      });
+      //宅基地代码
+      zjdzd().then(zjdRes => {
+        for( let i = 0 ; i < zjdRes.rows.length ; i++){
+          this.zjdDictionaries.push(zjdRes.rows[i].zjddm);
+        }
+      });
+    },
+    onConfirmZjddm(data){
+      console.log(data)
+      this.circulation.zjddm = data;
+      this.showzjddm = false;
+    },
+    onConfirmZjlx(data){
+      this.zjlx = data.text;
+      this.circulation.sqrzjlx = data.value;
+      this.showzjlx = false;
+    },
+    onConfirmTcqllx(data){
+      this.tcqllx = data.text;
+      this.circulation.tcqllx = data.value;
+      this.showtcqllx = false;
+    },
+    onConfirmTclx(data){
+      this.tclx = data.text;
+      this.circulation.tclx = data.value;
+      this.showtclx = false;
+    },
+    onConfirmTcfs(data){
+      this.tcfs = data.text;
+      this.circulation.tcfs = data.value;
+      this.showtcfs = false;
+    },
+    onConfirmBcfs(data){
+      this.bcfs = data.text;
+      this.circulation.bcfs = data.value;
+      this.showbcfs = false;
     },
+    goSubmit(){
+      console.log(this.circulation);
+      dyAdd(this.circulation).then(response => {
+        if(response.code = 200){
+          this.$toast.success('保存成功');
+        }
+      });
+    }
   },
 }
 </script>
diff --git a/src/views/onlineHome/homestead/paidExit/paidExitDetail.vue b/src/views/onlineHome/homestead/paidExit/paidExitDetail.vue
new file mode 100644
index 00000000..1db8f495
--- /dev/null
+++ b/src/views/onlineHome/homestead/paidExit/paidExitDetail.vue
@@ -0,0 +1,145 @@
+<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="main_box">
+        <van-field
+          readonly
+          v-model="circulation.zjddm"
+          label="宅基地代码"
+          input-align="right"
+        />
+        <van-field readonly v-model="circulation.sqrxm" label="申请人姓名" input-align="right" label-width="auto"/>
+        <van-field
+          readonly
+          v-model="circulation.sqrzjlx"
+          label="申请人证件类型"
+          input-align="right"
+          label-width="auto"
+        />
+        <van-field readonly v-model="circulation.sqrzjhm" label="申请人证件号码" input-align="right" label-width="auto"/>
+      </div>
+      <p class="main_title">退出信息</p>
+      <div class="main_box">
+        <van-field
+          readonly
+          v-model="circulation.tcqllx"
+          label="退出权利类型"
+          input-align="right"
+          label-width="auto"
+        />
+        <van-field
+          readonly
+          v-model="circulation.tclx"
+          label="退出类型"
+          input-align="right"
+          label-width="auto"
+        />
+        <van-field
+          readonly
+          v-model="circulation.tcfs"
+          label="退出方式"
+          input-align="right"
+          label-width="auto"
+        />
+        <van-field readonly v-model="circulation.tcmj+'㎡'" label="退出面积" input-align="right" label-width="auto"/>
+        <van-field readonly v-model="circulation.tcnx" label="退出年限" input-align="right" label-width="auto"/>
+      </div>
+
+      <p class="main_title">补偿信息</p>
+      <div class="main_box">
+        <van-field
+          readonly
+          v-model="circulation.bcfs"
+          label="补偿方式"
+          label-width="auto"
+          input-align="right"
+        />
+        <van-field readonly v-model="circulation.bcje+'元'" label="补偿金额" input-align="right" label-width="auto"/>
+        <van-field readonly v-model="circulation.zhfwmj+'㎡'" label="置换房屋面积" input-align="right" label-width="auto"/>
+        <van-field readonly v-model="circulation.zhfwzl" label="置换房屋坐落" input-align="right" label-width="auto"/>
+        <van-field readonly v-model="circulation.bz" label="备注" input-align="right" label-width="auto"/>
+      </div>
+    </div>
+</template>
+
+<script>
+import { getZyyctc } from "@/api/onlineHome/homestead/paidExit";
+export default {
+  name: "paidExitDetail",
+  data() {
+    return {
+      circulation:[]
+    };
+  },
+  created() {
+    this.getDetail();
+  },
+  methods: {
+    getDetail(){
+      getZyyctc(this.$route.query.id).then(response => {
+        console.log(response)
+        this.circulation = response.data;
+        //退出权利类型
+        this.houseGetDicts("tcqllx").then((res) => {
+          this.circulation.tcqllx = this.selectDictLabel(res.data, response.data.tcqllx);
+        });
+        //退出类型
+        this.houseGetDicts("tclx").then((res) => {
+          this.circulation.tclx = this.selectDictLabel(res.data, response.data.tclx);
+        });
+        //退出方式
+        this.houseGetDicts("tcfs").then((res) => {
+          this.circulation.tcfs = this.selectDictLabel(res.data, response.data.tcfs);
+        });
+        //申请人证件类型
+        this.houseGetDicts("zjlx").then((res) => {
+          this.circulation.sqrzjlx = this.selectDictLabel(res.data, response.data.sqrzjlx);
+        });
+        //补偿方式
+        this.houseGetDicts("bcfs").then((res) => {
+          this.circulation.bcfs = this.selectDictLabel(res.data, response.data.bcfs);
+        });
+        //审核状态
+        this.houseGetDicts("audit_status").then((res) => {
+          this.circulation.auditStatus = this.selectDictLabel(res.data, response.data.auditStatus);
+        });
+      });
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+  .app-container {
+    padding: 2% 0;
+  }
+  .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;
+
+  }
+</style>
diff --git a/src/views/onlineHome/homestead/paidExit/paidExitList.vue b/src/views/onlineHome/homestead/paidExit/paidExitList.vue
index 3f1a78da..9d79a45e 100644
--- a/src/views/onlineHome/homestead/paidExit/paidExitList.vue
+++ b/src/views/onlineHome/homestead/paidExit/paidExitList.vue
@@ -5,6 +5,7 @@
         fixed
         placeholder
         @click-left="$router.back(-1)"
+        @click-right="goAdd"
       >
         <template #title>
           <p style="font-weight: bold;">有偿退出</p>
@@ -13,42 +14,114 @@
           <van-icon name="add" size="18" />
         </template>
       </van-nav-bar>
-      <van-swipe-cell v-for="(item,index) in 10">
-        <van-cell title="440604100202000000Z00012" value="待审" center >
-          <template #icon>
-            <van-icon name="../../../static/images/icon/icon_tc.png" size="22" color="#539FFD" style="margin-right: 10px;" />
-          </template>
-          <template #label>
-            <p><b style="color: #539FFD;">有偿退出</b><i style="margin-right: 0.5rem;"></i><b style="color: #333333;">刘浩泽</b><i style="margin-right: 0.5rem;"></i>59㎡</p>
+      <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.zjddm" :value="item.auditStatus" center :to="{name:'paidExitDetail', query: {id:item.id}}" >
+            <template #icon>
+              <van-icon name="../../../static/images/icon/icon_tc.png" size="22" color="#539FFD" style="margin-right: 10px;" />
+            </template>
+            <template #label>
+              <p><b style="color: #539FFD;">{{item.tcfs}}</b><i style="margin-right: 0.5rem;"></i><b style="color: #333333;">{{item.sqrxm}}</b><i style="margin-right: 0.5rem;"></i>{{item.tcmj}}㎡</p>
+            </template>
+          </van-cell>
+          <template #right>
+            <van-row>
+              <van-col>
+                <van-button square text="修改" v-if="item.auditStatus=='草稿'" :to="{name:'paidExitModify', query: {id:item.id}}" type="info" class="delete-button" />
+              </van-col>
+              <van-col>
+                <van-button square text="删除" v-if="item.auditStatus=='草稿'" @click="deleteList(item.id,index)" type="danger" class="delete-button" />
+              </van-col>
+            </van-row>
           </template>
-        </van-cell>
-        <template #right>
-          <van-row>
-            <van-col>
-              <van-button square text="修改" type="info" class="delete-button" />
-            </van-col>
-            <van-col>
-              <van-button square text="删除" type="danger" class="delete-button" />
-            </van-col>
-          </van-row>
-        </template>
-      </van-swipe-cell>
+        </van-swipe-cell>
+      </van-list>
     </div>
 </template>
 
 <script>
+import { getList , removeList } from "@/api/onlineHome/homestead/paidExit";
 export default {
-    name: "paidExit",
+  name: "paidExit",
   data() {
     return {
-
+      applicationList:[],
+      houseApplyStatus:[],
+      tcqllxStatus:[],
+      tclxStatus:[],
+      tcfsStatus:[],
+      auditStatus:[],
+      loading: false,
+      finished: false,
+      queryParams:{
+        pageNum:1,
+        pageSize:10,
+        orderByColumn:'createTime',
+        isAsc:'desc'
+      }
     };
   },
   created() {
-
+    this.houseGetDicts("tcqllx").then((res) => {
+      this.tcqllxStatus = res.data;
+    });
+    this.houseGetDicts("tclx").then((res) => {
+      this.tclxStatus = res.data;
+    });
+    this.houseGetDicts("tcfs").then((res) => {
+      this.tcfsStatus = res.data;
+    });
+    this.houseGetDicts("audit_status").then((res) => {
+      this.auditStatus = res.data;
+    });
   },
   methods: {
-
+    goAdd(){
+      window.location = 'paidExitAdd';
+    },
+    getList(){
+      setTimeout(() => {
+        getList(this.queryParams).then(response => {
+          console.log(response)
+          for (var i = 0; i < response.rows.length; i++) {
+            response.rows[i].tclx = this.selectDictLabel(this.tcqllxStatus, response.rows[i].tclx)
+            response.rows[i].tclx = this.selectDictLabel(this.tclxStatus, response.rows[i].tclx)
+            response.rows[i].tcfs = this.selectDictLabel(this.tcfsStatus, response.rows[i].tcfs)
+            response.rows[i].auditStatus = this.selectDictLabel(this.auditStatus, response.rows[i].auditStatus)
+            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);
+    },
+    deleteList(id,index){
+      this.$dialog.confirm({
+        message: '您确认删除申请草稿？',
+      })
+      .then(() => {
+        // on confirm
+        this.applicationList.splice(index,1)
+        removeList(id).then(res => {
+          if(res.code = 200){
+            this.$toast.success('删除成功');
+          }
+        });
+      })
+      .catch(() => {
+        // on cancel
+      });
+    }
   },
 }
 </script>
diff --git a/src/views/onlineHome/homestead/paidExit/paidExitModify.vue b/src/views/onlineHome/homestead/paidExit/paidExitModify.vue
new file mode 100644
index 00000000..c3efc0aa
--- /dev/null
+++ b/src/views/onlineHome/homestead/paidExit/paidExitModify.vue
@@ -0,0 +1,319 @@
+<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="main_box">
+      <van-field
+        readonly
+        clickable
+        v-model="circulation.zjddm"
+        label="宅基地代码"
+        placeholder="请选择"
+        @click="showzjddm = true"
+        input-align="right"
+        right-icon="arrow-down"
+      />
+      <van-popup v-model="showzjddm" position="bottom">
+        <van-picker
+          show-toolbar
+          :columns="zjdDictionaries"
+          @confirm="onConfirmZjddm"
+          @cancel="showzjddm = false"
+        />
+      </van-popup>
+      <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto"/>
+      <van-field
+        readonly
+        clickable
+        v-model="zjlx"
+        label="申请人证件类型"
+        placeholder="请选择"
+        @click="showzjlx = true"
+        input-align="right"
+        right-icon="arrow-down"
+        label-width="auto"
+      />
+      <van-popup v-model="showzjlx" position="bottom">
+        <van-picker
+          show-toolbar
+          :columns="zjlxDictionaries"
+          @confirm="onConfirmZjlx"
+          @cancel="showzjlx = false"
+        />
+      </van-popup>
+      <van-field v-model="circulation.sqrzjhm" label="申请人证件号码" placeholder="申请人证件号码" input-align="right" label-width="auto"/>
+    </div>
+
+    <p class="main_title">退出信息</p>
+    <div class="main_box">
+      <van-field
+        readonly
+        clickable
+        v-model="tcqllx"
+        label="退出权利类型"
+        placeholder="请选择退出权利类型"
+        @click="showtcqllx = true"
+        input-align="right"
+        right-icon="arrow-down"
+        label-width="auto"
+      />
+      <van-popup v-model="showtcqllx" position="bottom">
+        <van-picker
+          show-toolbar
+          :columns="tcqllxDictionaries"
+          @confirm="onConfirmTcqllx"
+          @cancel="showtcqllx = false"
+        />
+      </van-popup>
+
+      <van-field
+        readonly
+        clickable
+        v-model="tclx"
+        label="退出类型"
+        placeholder="请选择退出类型"
+        @click="showtclx = true"
+        input-align="right"
+        right-icon="arrow-down"
+        label-width="auto"
+      />
+      <van-popup v-model="showtclx" position="bottom">
+        <van-picker
+          show-toolbar
+          :columns="tclxDictionaries"
+          @confirm="onConfirmTclx"
+          @cancel="showtclx = false"
+        />
+      </van-popup>
+
+      <van-field
+        readonly
+        clickable
+        v-model="tcfs"
+        label="退出方式"
+        placeholder="请选择退出方式"
+        @click="showtcfs = true"
+        input-align="right"
+        right-icon="arrow-down"
+        label-width="auto"
+      />
+      <van-popup v-model="showtcfs" position="bottom">
+        <van-picker
+          show-toolbar
+          :columns="tcfsDictionaries"
+          @confirm="onConfirmTcfs"
+          @cancel="showtcfs = false"
+        />
+      </van-popup>
+      <van-field v-model="circulation.tcmj" label="退出面积" placeholder="请输入退出面积㎡" input-align="right" label-width="auto"/>
+      <van-field v-model="circulation.tcnx" label="退出年限" placeholder="请输入退出年限" input-align="right" label-width="auto"/>
+    </div>
+
+    <p class="main_title">补偿信息</p>
+    <div class="main_box">
+      <van-field
+        readonly
+        clickable
+        v-model="bcfs"
+        label="补偿方式"
+        placeholder="请选择补偿方式"
+        @click="showbcfs = true"
+        label-width="auto"
+        input-align="right"
+        right-icon="arrow-down"
+      />
+      <van-popup v-model="showbcfs" position="bottom">
+        <van-picker
+          show-toolbar
+          :columns="bcfsDictionaries"
+          @confirm="onConfirmBcfs"
+          @cancel="showbcfs = false"
+        />
+      </van-popup>
+      <van-field v-model="circulation.bcje" label="补偿金额" placeholder="请输入补偿金额 元" input-align="right" label-width="auto"/>
+      <van-field v-model="circulation.zhfwmj" label="置换房屋面积" placeholder="请输入房屋面积㎡" input-align="right" label-width="auto"/>
+      <van-field v-model="circulation.zhfwzl" label="置换房屋坐落" placeholder="请输入房屋坐落" input-align="right" label-width="auto"/>
+      <van-field v-model="circulation.bz" label="备注" placeholder="请输入内容" input-align="right" label-width="auto"/>
+
+    </div>
+
+    <div style="padding: 16px 0;">
+      <van-row>
+        <van-col span="12" align="center">
+          <van-button type="info" native-type="submit" class="submitButton" @click="goEdit">保存</van-button>
+        </van-col>
+        <van-col span="12" align="center">
+          <van-button type="info" native-type="submit" class="submitButton" @click="goSubmit">提交</van-button>
+        </van-col>
+      </van-row>
+      <div class="clear"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { zjdzd } from "@/api/onlineHome/homestead/circulation";
+  import { zyyctcEdit , getZyyctc , zyyctcApply } from "@/api/onlineHome/homestead/paidExit";
+  export default {
+    name: "paidExitModify",
+    data() {
+      return {
+        tcqllxDictionaries:[],//退出权利类型
+        tclxDictionaries:[],//退出类型
+        tcfsDictionaries:[],//退出方式
+        zjlxDictionaries:[],//申请人证件类型
+        bcfsDictionaries:[],//补偿方式
+        zjdDictionaries:[],//宅基地代码
+
+        tcqllx:'',
+        tclx:'',
+        tcfs:'',
+        zjlx:'',
+        bcfs:'',
+        zjddm:'',
+
+        showtcqllx: false,
+        showtclx: false,
+        showtcfs: false,
+        showzjlx: false,
+        showbcfs: false,
+        showzjddm: false,
+
+        circulation:{}
+      };
+    },
+    created() {
+      this.getDictionaries();
+    },
+    methods: {
+      getDictionaries(){
+        getZyyctc(this.$route.query.id).then(response => {
+          //退出权利类型
+          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("tclx").then((res) => {
+            for (var i = 0; i < res.data.length; i++) {
+              this.tclxDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
+            }
+            this.tclx = this.selectDictLabel(res.data, response.data.tclx);
+          });
+          //退出方式
+          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("zjlx").then((res) => {
+            for (var i = 0; i < res.data.length; i++) {
+              this.zjlxDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
+            }
+            this.zjlx = this.selectDictLabel(res.data, response.data.sqrzjlx);
+          });
+          //补偿方式
+          this.houseGetDicts("bcfs").then((res) => {
+            for (var i = 0; i < res.data.length; i++) {
+              this.bcfsDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
+            }
+            this.bcfs = this.selectDictLabel(res.data, response.data.bcfs);
+          });
+          //宅基地代码
+          zjdzd().then(zjdRes => {
+            for (let i = 0; i < zjdRes.rows.length; i++) {
+              this.zjdDictionaries.push(zjdRes.rows[i].zjddm);
+            }
+          });
+          this.circulation = response.data;
+        });
+      },
+      onConfirmZjddm(data){
+        console.log(data)
+        this.circulation.zjddm = data;
+        this.showzjddm = false;
+      },
+      onConfirmZjlx(data){
+        this.zjlx = data.text;
+        this.circulation.sqrzjlx = data.value;
+        this.showzjlx = false;
+      },
+      onConfirmTcqllx(data){
+        this.tcqllx = data.text;
+        this.circulation.tcqllx = data.value;
+        this.showtcqllx = false;
+      },
+      onConfirmTclx(data){
+        this.tclx = data.text;
+        this.circulation.tclx = data.value;
+        this.showtclx = false;
+      },
+      onConfirmTcfs(data){
+        this.tcfs = data.text;
+        this.circulation.tcfs = data.value;
+        this.showtcfs = false;
+      },
+      onConfirmBcfs(data){
+        this.bcfs = data.text;
+        this.circulation.bcfs = data.value;
+        this.showbcfs = false;
+      },
+      goEdit(){
+        console.log(this.circulation);
+        zyyctcEdit(this.circulation).then(response => {
+          if(response.code = 200){
+            this.$toast.success('保存成功');
+          }
+        });
+      },
+      goSubmit(){
+        zyyctcApply(this.$route.query.id).then(response => {
+          if(response.code = 200){
+            this.$toast.success('提交成功');
+            setTimeout(function(){
+              window.location.replace("paidExit")
+            },1000)
+          }
+        });
+      }
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .app-container {
+    padding: 2% 0;
+  }
+  .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;
+
+  }
+</style>