宅基地流转接口对接

src/api/onlineHome/homestead/mortgage.js

@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+//查询列表
+export function getList(data){
+  return request({
+    url:'/house/mobile/dy/list',
+    method:'get',
+    params:data
+  })
+}
+
+//删除列表项
+export function removeList(id){
+  return request({
+    url:'/house/dy/remove/'+id,
+    method:'get'
+  })
+}
+
+//宅基地流转详情
+export function getDy(id){
+  return request({
+    url:'/house/dy/get/'+id,
+    method:'get'
+  })
+}
+
+//宅基地流转详情
+export function dyAdd(data){
+  return request({
+    url:'/house/dy/add',
+    method:'post',
+    data:data
+  })
+}
+
+//宅基地流转保存
+export function dyEdit(data){
+  return request({
+    url:'/house/dy/edit',
+    method:'post',
+    data:data
+  })
+}
+
+//宅基地流转提交
+export function dyApply(id){
+  return request({
+    url:'/house/dy/submitApply/'+id,
+    method:'post',
+  })
+}

src/router/index.js

@@ -752,6 +752,24 @@ export const constantRoutes = [
       hidden: true,
     },
     component: (resolve) => require(['@/views/onlineHome/homestead/circulation/circulationModify'], resolve)
+  },
+  {
+    path: '/mortgageDetail',
+    name: 'mortgageDetail',
+    meta: {
+      title: '查看使用权抵押',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/homestead/mortgage/mortgageDetail'], resolve)
+  },
+  {
+    path: '/mortgageModify',
+    name: 'mortgageModify',
+    meta: {
+      title: '修改使用权抵押',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/homestead/mortgage/mortgageModify'], resolve)
   }
 ];
 

src/views/onlineHome/homestead/mortgage/mortgageAdd.vue

@@ -10,186 +10,265 @@
           <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
+          name="picker"
+          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 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-field
-            readonly
-            clickable
-            name="picker"
-            :value="value"
-            label="权属状态"
-            placeholder="请选择权属状态"
-            @click="showPicker = true"
-            input-align="right"
-            right-icon="arrow-down"
+        </van-popup>
+        <van-field v-model="circulation.bdcdyh" label="不动产单元号" placeholder="请输入流转面积(㎡)" input-align="right" label-width="auto"/>
+        <van-field v-model="circulation.bdcqzh" label="不动产权证号" placeholder="请输入流转单价(元)" input-align="right" label-width="auto"/>
+        <van-field v-model="circulation.bdcdydjywh" label="不动产抵押登记业务号" placeholder="请输入流转费用(元)" input-align="right" label-width="auto"/>
+        <van-field v-model="circulation.zjjzwzl" label="在建建筑物坐落" placeholder="请输入流转单价(元)" input-align="right" label-width="auto"/>
+        <van-field v-model="circulation.zjjzwdyfw" label="在建建筑物抵押范围" placeholder="请输入流转费用(元)" input-align="right" label-width="auto"/>
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          v-model="qszt"
+          label="权属状态"
+          placeholder="请选择权属状态"
+          @click="showqszt = true"
+          input-align="right"
+          right-icon="arrow-down"
+        />
+        <van-popup v-model="showqszt" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="qsztDictionaries"
+            @confirm="onConfirmQszt"
+            @cancel="showqszt = false"
           />
-          <van-popup v-model="showPicker" position="bottom">
-            <van-picker
-              show-toolbar
-              :columns="columns"
-              @confirm="onConfirm"
-              @cancel="showPicker = false"
-            />
-          </van-popup>
-        </div>
+        </van-popup>
+      </div>
 
-        <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"
+      <div class="main_box">
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          v-model="dybdclx"
+          label="抵押不动产类型"
+          placeholder="请选择类型"
+          @click="showdybdclx = true"
+          input-align="right"
+          right-icon="arrow-down"
+          label-width="auto"
+        />
+        <van-popup v-model="showdybdclx" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="dybdclxDictionaries"
+            @confirm="onConfirmDybdclx"
+            @cancel="showdybdclx = 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.dyr" label="抵押人" placeholder="请输入抵押人" input-align="right" label-width="auto"/>
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          v-model="dyfs"
+          label="抵押方式"
+          placeholder="请选择抵押方式"
+          @click="showdyfs = true"
+          input-align="right"
+          right-icon="arrow-down"
+          label-width="auto"
+        />
+        <van-popup v-model="showdyfs" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="dyfsDictionaries"
+            @confirm="onConfirmDyfs"
+            @cancel="showdyfs = false"
           />
-          <van-popup v-model="showPicker" position="bottom">
-            <van-picker
-              show-toolbar
-              :columns="columns"
-              @confirm="onConfirm"
-              @cancel="showPicker = false"
-            />
-          </van-popup>
-        </div>
+        </van-popup>
+      </div>
 
-        <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"
+      <div class="main_box">
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          v-model="djlx"
+          label="登记类型"
+          placeholder="请选择登记类型"
+          @click="showdjlx = true"
+          label-width="auto"
+          input-align="right"
+          right-icon="arrow-down"
+        />
+        <van-popup v-model="showdjlx" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="djlxDictionaries"
+            @confirm="onConfirmDjlx"
+            @cancel="showdjlx = 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
-            readonly
-            clickable
-            name="picker"
-            :value="value"
-            label="登记时间"
-            placeholder="选择登记时间"
-            @click="showPicker1 = true"
-            input-align="right"
-            right-icon="arrow-down"
+        </van-popup>
+        <van-field v-model="circulation.djyy" label="登记原因" placeholder="请输入登记原因" input-align="right" label-width="auto"/>
+        <van-field v-model="circulation.djjg" label="登记机构" placeholder="请输入登记机构" input-align="right" label-width="auto"/>
+        <van-field v-model="circulation.dbr" label="登薄人" placeholder="请输入登薄人" input-align="right" label-width="auto"/>
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          v-model="circulation.djsj"
+          label="登记时间"
+          placeholder="选择登记时间"
+          @click="showdjsj = true"
+          input-align="right"
+          right-icon="arrow-down"
+        />
+        <van-popup v-model="showdjsj" position="bottom">
+          <van-datetime-picker
+            v-model="currentDate"
+            type="date"
+            title="选择年月日"
+            :min-date="minDate"
+            :max-date="maxDate"
+            @confirm="onConfirmDjsj"
           />
-          <van-popup v-model="showPicker1" position="bottom">
-            <van-datetime-picker
-              v-model="currentDate"
-              type="date"
-              title="选择年月日"
-              :min-date="minDate"
-              :max-date="maxDate"
-            />
-          </van-popup>
-        </div>
+        </van-popup>
+      </div>
 
-        <div class="main_box">
-          <van-field label="附记" placeholder="请输入内容" input-align="right" label-width="auto"/>
-          <van-field label="备注" placeholder="请输入内容" input-align="right" label-width="auto"/>
-        </div>
+      <div class="main_box">
+        <van-field label="附记" v-model="circulation.fj" placeholder="请输入内容" input-align="right" label-width="auto"/>
+        <van-field label="备注" v-model="circulation.bz" 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" 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 { dyAdd } from "@/api/onlineHome/homestead/mortgage";
+import { zjdzd } from "@/api/onlineHome/homestead/circulation";
 export default {
-    name: "circulationAdd",
+    name: "mortgageAdd",
   data() {
     return {
       value: '',
       columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
-      showPicker: false,
-      showPicker1: false,
-      minDate: new Date(2020, 0, 1),
+      showdjsj: false,
+      showdybdclx: false,
+      showdyfs: false,
+      showdjlx: false,
+      showqszt: false,
+      showzjddm: false,
+      dybdclx: '',
+      dyfs: '',
+      djlx: '',
+      qszt: '',
+      zjddm: '',
+      minDate: new Date(),
       maxDate: new Date(2025, 10, 1),
-      currentDate: new Date(2021, 0, 17),
+      currentDate: new Date(),
+      circulation:{},
+      dybdclxDictionaries:[],//抵押不动产类型
+      dyfsDictionaries:[],//抵押方式
+      djlxDictionaries:[],//登记类型
+      qsztDictionaries:[],//权属状态
+      zjdDictionaries: [],//宅基地列表
     };
   },
   created() {
-
+    this.getDictionaries();
   },
   methods: {
-    onConfirm(value) {
-      this.value = value;
-      this.showPicker = false;
+    getDictionaries(){
+      //抵押不动产类型
+      this.houseGetDicts("dybdclx").then((res) => {
+        for(var i = 0 ; i < res.data.length ; i++){
+          this.dybdclxDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
+        }
+      });
+      //抵押方式
+      this.houseGetDicts("dyfs").then((res) => {
+        for(var i = 0 ; i < res.data.length ; i++){
+          this.dyfsDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
+        }
+      });
+      //登记类型
+      this.houseGetDicts("djlx").then((res) => {
+        for(var i = 0 ; i < res.data.length ; i++){
+          this.djlxDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
+        }
+      });
+      //权属状态
+      this.houseGetDicts("qszt").then((res) => {
+        for(var i = 0 ; i < res.data.length ; i++){
+          this.qsztDictionaries.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;
+    },
+    onConfirmQszt(data){
+      this.qszt = data.text;
+      this.circulation.qszt = data.value;
+      this.showqszt = false;
+    },
+    onConfirmDybdclx(data){
+      this.dybdclx = data.text;
+      this.circulation.dybdclx = data.value;
+      this.showdybdclx = false;
+    },
+    onConfirmDyfs(data){
+      this.dyfs = data.text;
+      this.circulation.dyfs = data.value;
+      this.showdyfs = false;
+    },
+    onConfirmDjlx(data){
+      this.djlx = data.text;
+      this.circulation.djlx = data.value;
+      this.showdjlx = false;
+    },
+    onConfirmDjsj(data){
+      this.circulation.djsj = this.getNowFormatDate(data).substr(0,10);
+      this.showdjsj = false;
     },
+    goSubmit(){
+      dyAdd(this.circulation).then(response => {
+        if(response.code = 200){
+          this.$toast.success('保存成功');
+        }
+      });
+    }
   },
 }
 </script>

src/views/onlineHome/homestead/mortgage/mortgageDetail.vue

@@ -0,0 +1,144 @@
+<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 label="不动产单元号" v-model="circulation.bdcdyh" input-align="right" label-width="auto"/>
+          <van-field readonly label="不动产权证号" v-model="circulation.bdcqzh" input-align="right" label-width="auto"/>
+          <van-field readonly label="不动产抵押登记业务号" v-model="circulation.bdcdydjywh" input-align="right" label-width="auto"/>
+          <van-field readonly label="在建建筑物坐落" v-model="circulation.zjjzwzl" input-align="right" label-width="auto"/>
+          <van-field readonly label="在建建筑物抵押范围" v-model="circulation.zjjzwdyfw" input-align="right" label-width="auto"/>
+          <van-field
+            readonly
+            v-model="circulation.qszt"
+            label="权属状态"
+            input-align="right"
+            label-width="auto"
+          />
+        </div>
+
+        <div class="main_box">
+          <van-field
+            readonly
+            v-model="circulation.dybdclx"
+            label="抵押不动产类型"
+            input-align="right"
+            label-width="auto"
+          />
+          <van-field readonly label="抵押人" v-model="circulation.dyr" input-align="right" label-width="auto"/>
+          <van-field
+            readonly
+            v-model="circulation.dyfs"
+            label="抵押方式"
+            input-align="right"
+            label-width="auto"
+          />
+        </div>
+
+        <div class="main_box">
+          <van-field
+            readonly
+            v-model="circulation.djlx"
+            label="登记类型"
+            label-width="auto"
+            input-align="right"
+          />
+          <van-field readonly label="登记原因" v-model="circulation.djyy" input-align="right" label-width="auto"/>
+          <van-field readonly label="登记机构" v-model="circulation.djjg" input-align="right" label-width="auto"/>
+          <van-field readonly label="登薄人" v-model="circulation.dbr" input-align="right" label-width="auto"/>
+          <van-field
+            readonly
+            v-model="circulation.djsj"
+            label="登记时间"
+            input-align="right"
+            label-width="auto"
+          />
+        </div>
+
+        <div class="main_box">
+          <van-field readonly label="附记" v-model="circulation.fj" input-align="right" label-width="auto"/>
+          <van-field readonly label="备注" v-model="circulation.bz" input-align="right" label-width="auto"/>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getDy } from "@/api/onlineHome/homestead/mortgage";
+export default {
+  name: "mortgageDetail",
+  data() {
+    return {
+      value: '',
+      circulation:[]
+    };
+  },
+  created() {
+    this.getDetail();
+  },
+  methods: {
+    getDetail(){
+      getDy(this.$route.query.id).then(response => {
+        console.log(response)
+        this.circulation = response.data;
+        //抵押不动产类型
+        this.houseGetDicts("dybdclx").then((res) => {
+          this.circulation.dybdclx = this.selectDictLabel(res.data, response.data.dybdclx);
+        });
+        //抵押方式
+        this.houseGetDicts("dyfs").then((res) => {
+          this.circulation.dyfs = this.selectDictLabel(res.data, response.data.dyfs);
+        });
+        //登记类型
+        this.houseGetDicts("djlx").then((res) => {
+          this.circulation.djlx = this.selectDictLabel(res.data, response.data.djlx);
+        });
+        //权属状态
+        this.houseGetDicts("qszt").then((res) => {
+          this.circulation.qszt = this.selectDictLabel(res.data, response.data.qszt);
+        });
+      });
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+  .app-container {
+    padding-bottom: 5%;
+  }
+  .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;
+    margin-top:2%;
+  }
+  .submitButton{
+    width: 80%;
+    margin: 0 auto;
+    background-color: #1D6FE9;
+
+  }
+</style>

src/views/onlineHome/homestead/mortgage/mortgageList.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,109 @@
           <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_dy.png" size="22" color="#539FFD" style="margin-right: 10px;" />
-          </template>
-          <template #label>
-            <p><b style="color: #3AC2DB;">抵押</b><i style="margin-right: 0.5rem;"></i><b style="color: #333333;">刘浩泽</b><i style="margin-right: 0.5rem;"></i>现势</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:'mortgageDetail', query: {id:item.id}}" >
+            <template #icon>
+              <van-icon name="../../../static/images/icon/icon_dy.png" size="22" color="#539FFD" style="margin-right: 10px;" />
+            </template>
+            <template #label>
+              <p><b style="color: #3AC2DB;">{{item.dyfs}}</b><i style="margin-right: 0.5rem;"></i><b style="color: #333333;">{{item.dyr}}</b><i style="margin-right: 0.5rem;"></i>{{item.dybdclx}}</p>
+            </template>
+          </van-cell>
+          <template #right>
+            <van-row>
+              <van-col>
+                <van-button square text="修改" v-if="item.auditStatus=='草稿'" :to="{name:'mortgageModify', 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/mortgage";
 export default {
-    name: "paidExit",
+    name: "mortgageList",
   data() {
     return {
-
+      applicationList:[],
+      houseApplyStatus:[],
+      dybdclxStatus:[],
+      auditStatus:[],
+      dyfsStatus:[],
+      loading: false,
+      finished: false,
+      queryParams:{
+        pageNum:1,
+        pageSize:10,
+        orderByColumn:'createTime',
+        isAsc:'desc'
+      }
     };
   },
   created() {
-
+    this.houseGetDicts("dybdclx").then((res) => {
+      this.dybdclxStatus = res.data;
+    });
+    this.houseGetDicts("dyfs").then((res) => {
+      this.dyfsStatus = res.data;
+    });
+    this.houseGetDicts("audit_status").then((res) => {
+      this.auditStatus = res.data;
+    });
   },
   methods: {
-
+    goAdd(){
+      window.location = 'mortgageAdd';
+    },
+    getList(){
+      setTimeout(() => {
+        getList(this.queryParams).then(response => {
+          console.log(response)
+          for (var i = 0; i < response.rows.length; i++) {
+            response.rows[i].dybdclx = this.selectDictLabel(this.dybdclxStatus, response.rows[i].dybdclx)
+            response.rows[i].dyfs = this.selectDictLabel(this.dyfsStatus, response.rows[i].dyfs)
+            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>
@@ -58,7 +126,7 @@ export default {
     padding: 0.2rem 3%;
   }
   /deep/.van-cell__title{
-    flex: 0.7;
+    flex: 0.9;
   }
   /deep/.van-cell__title span{
     font-family: Arial;
@@ -66,7 +134,7 @@ export default {
     font-weight: normal;
   }
   /deep/.van-cell__value{
-    flex: 0.3;
+    flex: 0.1;
     color: #1D6FE9;
     font-weight: bold;
   }

src/views/onlineHome/homestead/mortgage/mortgageModify.vue

@@ -0,0 +1,316 @@
+<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
+          name="picker"
+          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.bdcdyh" label="不动产单元号" placeholder="请输入流转面积(㎡)" input-align="right" label-width="auto"/>
+        <van-field v-model="circulation.bdcqzh" label="不动产权证号" placeholder="请输入流转单价(元)" input-align="right" label-width="auto"/>
+        <van-field v-model="circulation.bdcdydjywh" label="不动产抵押登记业务号" placeholder="请输入流转费用(元)" input-align="right" label-width="auto"/>
+        <van-field v-model="circulation.zjjzwzl" label="在建建筑物坐落" placeholder="请输入流转单价(元)" input-align="right" label-width="auto"/>
+        <van-field v-model="circulation.zjjzwdyfw" label="在建建筑物抵押范围" placeholder="请输入流转费用(元)" input-align="right" label-width="auto"/>
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          v-model="qszt"
+          label="权属状态"
+          placeholder="请选择权属状态"
+          @click="showqszt = true"
+          input-align="right"
+          right-icon="arrow-down"
+        />
+        <van-popup v-model="showqszt" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="qsztDictionaries"
+            @confirm="onConfirmQszt"
+            @cancel="showqszt = false"
+          />
+        </van-popup>
+      </div>
+
+      <div class="main_box">
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          v-model="dybdclx"
+          label="抵押不动产类型"
+          placeholder="请选择类型"
+          @click="showdybdclx = true"
+          input-align="right"
+          right-icon="arrow-down"
+          label-width="auto"
+        />
+        <van-popup v-model="showdybdclx" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="dybdclxDictionaries"
+            @confirm="onConfirmDybdclx"
+            @cancel="showdybdclx = false"
+          />
+        </van-popup>
+        <van-field v-model="circulation.dyr" label="抵押人" placeholder="请输入抵押人" input-align="right" label-width="auto"/>
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          v-model="dyfs"
+          label="抵押方式"
+          placeholder="请选择抵押方式"
+          @click="showdyfs = true"
+          input-align="right"
+          right-icon="arrow-down"
+          label-width="auto"
+        />
+        <van-popup v-model="showdyfs" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="dyfsDictionaries"
+            @confirm="onConfirmDyfs"
+            @cancel="showdyfs = false"
+          />
+        </van-popup>
+      </div>
+
+      <div class="main_box">
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          v-model="djlx"
+          label="登记类型"
+          placeholder="请选择登记类型"
+          @click="showdjlx = true"
+          label-width="auto"
+          input-align="right"
+          right-icon="arrow-down"
+        />
+        <van-popup v-model="showdjlx" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="djlxDictionaries"
+            @confirm="onConfirmDjlx"
+            @cancel="showdjlx = false"
+          />
+        </van-popup>
+        <van-field v-model="circulation.djyy" label="登记原因" placeholder="请输入登记原因" input-align="right" label-width="auto"/>
+        <van-field v-model="circulation.djjg" label="登记机构" placeholder="请输入登记机构" input-align="right" label-width="auto"/>
+        <van-field v-model="circulation.dbr" label="登薄人" placeholder="请输入登薄人" input-align="right" label-width="auto"/>
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          v-model="circulation.djsj"
+          label="登记时间"
+          placeholder="选择登记时间"
+          @click="showdjsj = true"
+          input-align="right"
+          right-icon="arrow-down"
+        />
+        <van-popup v-model="showdjsj" position="bottom">
+          <van-datetime-picker
+            v-model="currentDate"
+            type="date"
+            title="选择年月日"
+            :min-date="minDate"
+            :max-date="maxDate"
+            @confirm="onConfirmDjsj"
+          />
+        </van-popup>
+      </div>
+
+      <div class="main_box">
+        <van-field label="附记" v-model="circulation.fj" placeholder="请输入内容" input-align="right" label-width="auto"/>
+        <van-field label="备注" v-model="circulation.bz" 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" 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 { dyApply , getDy , dyEdit } from "@/api/onlineHome/homestead/mortgage";
+import { zjdzd } from "@/api/onlineHome/homestead/circulation";
+export default {
+    name: "mortgageModify",
+  data() {
+    return {
+      value: '',
+      showdjsj: false,
+      showdybdclx: false,
+      showdyfs: false,
+      showdjlx: false,
+      showqszt: false,
+      showzjddm: false,
+      dybdclx: '',
+      dyfs: '',
+      djlx: '',
+      qszt: '',
+      zjddm: '',
+      minDate: new Date(),
+      maxDate: new Date(2025, 10, 1),
+      currentDate: new Date(),
+      circulation:{},
+      dybdclxDictionaries:[],//抵押不动产类型
+      dyfsDictionaries:[],//抵押方式
+      djlxDictionaries:[],//登记类型
+      qsztDictionaries:[],//权属状态
+      zjdDictionaries: [],//宅基地列表
+    };
+  },
+  created() {
+    this.getDictionaries();
+  },
+  methods: {
+    getDictionaries(){
+      getDy(this.$route.query.id).then(response => {
+        //抵押不动产类型
+        this.houseGetDicts("dybdclx").then((res) => {
+          for(var i = 0 ; i < res.data.length ; i++){
+            this.dybdclxDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
+          }
+          this.dybdclx = this.selectDictLabel(res.data, response.data.dybdclx);
+        });
+        //抵押方式
+        this.houseGetDicts("dyfs").then((res) => {
+          for(var i = 0 ; i < res.data.length ; i++){
+            this.dyfsDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
+          }
+          this.dyfs = this.selectDictLabel(res.data, response.data.dyfs);
+        });
+        //登记类型
+        this.houseGetDicts("djlx").then((res) => {
+          for(var i = 0 ; i < res.data.length ; i++){
+            this.djlxDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
+          }
+          this.djlx = this.selectDictLabel(res.data, response.data.djlx);
+        });
+        //权属状态
+        this.houseGetDicts("qszt").then((res) => {
+          for(var i = 0 ; i < res.data.length ; i++){
+            this.qsztDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
+          }
+          this.qszt = this.selectDictLabel(res.data, response.data.qszt);
+        });
+        //宅基地代码
+        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;
+    },
+    onConfirmQszt(data){
+      this.qszt = data.text;
+      this.circulation.qszt = data.value;
+      this.showqszt = false;
+    },
+    onConfirmDybdclx(data){
+      this.dybdclx = data.text;
+      this.circulation.dybdclx = data.value;
+      this.showdybdclx = false;
+    },
+    onConfirmDyfs(data){
+      this.dyfs = data.text;
+      this.circulation.dyfs = data.value;
+      this.showdyfs = false;
+    },
+    onConfirmDjlx(data){
+      this.djlx = data.text;
+      this.circulation.djlx = data.value;
+      this.showdjlx = false;
+    },
+    onConfirmDjsj(data){
+      this.circulation.djsj = this.getNowFormatDate(data).substr(0,10);
+      this.showdjsj = false;
+    },
+    goEdit(){
+      dyApply(this.circulation).then(response => {
+        if(response.code = 200){
+          this.$toast.success('保存成功');
+        }
+      });
+    },
+    goSubmit(){
+      dyEdit(this.circulation).then(response => {
+        if(response.code = 200){
+          this.$toast.success('保存成功');
+          setTimeout(function(){
+            window.location.replace("mortgageList")
+          },1000)
+        }
+      });
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+  .app-container {
+  }
+  .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;
+    margin-top:2%;
+  }
+  .submitButton{
+    width: 80%;
+    margin: 0 auto;
+    background-color: #1D6FE9;
+
+  }
+</style>