update:增加政策详情页面

FrontCode2/sunshine_levy/src/router/index.js

@@ -51,6 +51,13 @@ export default new Router({
       name: "evaluteResult",
       component: () =>
         import ("../views/pdf/evaluteResult")
+    },
+    // 政策详情页面
+    {
+      path: "/policyInfo",
+      name: "policyInfo",
+      component: () =>
+        import ("../views/policyInfo/policyInfo")
     }
   ]
 });

FrontCode2/sunshine_levy/src/views/index.vue

@@ -7,19 +7,28 @@
         </div>
         <div>
           <div class="baseInfo">
-            <van-image :src="require('@/assets/img/renyuanliebiao.png')" class="baseImg" />
+            <van-image
+              :src="require('@/assets/img/renyuanliebiao.png')"
+              class="baseImg"
+            />
             <span class="baseFont">被征收人姓名：</span>
             <span class="baseFont">{{ data.userName }}</span>
           </div>
           <div class="baseInfo">
-            <van-image :src="require('@/assets/img/credentials_icon.png')" class="baseImg" />
+            <van-image
+              :src="require('@/assets/img/credentials_icon.png')"
+              class="baseImg"
+            />
             <span class="baseFont">身份证号码：</span>
             <span class="baseFont">{{ data.idCard }}</span>
           </div>
         </div>
         <div>
           <div class="gridBg centerMagin">
-            <van-image :src="require('@/assets/img/scan.png')" class="gridImg" />
+            <van-image
+              :src="require('@/assets/img/scan.png')"
+              class="gridImg"
+            />
             <van-image
               :src="require('@/assets/img/evaluation .png')"
               @click="gotoProject('pg')"
@@ -34,18 +43,27 @@
         </div>
       </div>
       <div class="centerMagin">
-        <van-image :src="require('@/assets/img/government.png')" class="bigImg" />
+        <van-image
+          :src="require('@/assets/img/government.png')"
+          class="bigImg"
+        />
       </div>
       <van-list>
-        <div :key="item.prjId" v-for="(item) in data.prjList">
+        <div :key="item.prjId" v-for="item in data.prjList">
           <div class="centerMagin">
             <div class="project">
               <div>
-                <van-image :src="require('@/assets/img/project.png')" class="projectIcon" />
+                <van-image
+                  :src="require('@/assets/img/project.png')"
+                  class="projectIcon"
+                />
                 <span class="projectTitle">{{ item.name }}</span>
               </div>
               <div class="projectRight">
-                <van-image :src="require('@/assets/img/menu_yhxy.png')" class="projectRightIcon" />
+                <van-image
+                  :src="require('@/assets/img/menu_yhxy.png')"
+                  class="projectRightIcon"
+                />
                 <span class="projectRightFont">{{ item.currentState }}</span>
               </div>
             </div>
@@ -89,14 +107,19 @@
                     class="projectCenterImg"
                   />
                   <span class="projectCenterFont">征收决定号：</span>
-                  <span class="projectCenterFont" style="color: #3883f1">{{ item.zsjdh }}</span>
+                  <span class="projectCenterFont" style="color: #3883f1">{{
+                    item.zsjdh
+                  }}</span>
                 </div>
               </div>
             </div>
             <div class="centerMagin">
               <div class="assess">
                 <div>
-                  <van-image :src="require('@/assets/img/assess_1.png')" class="assessIcon" />
+                  <van-image
+                    :src="require('@/assets/img/assess_1.png')"
+                    class="assessIcon"
+                  />
                   <span class="assessTitle">分户评估结果</span>
                 </div>
                 <!-- <div>
@@ -104,28 +127,39 @@
                 </div>-->
               </div>
               <van-list>
-                <div :key="assess.id" class="assessCenter1" v-for="(assess) in item.fhpgList">
+                <div
+                  :key="assess.id"
+                  class="assessCenter1"
+                  v-for="assess in item.fhpgList"
+                >
                   <div class="assessBox">
                     <span class="projectCenterFont">评估报告编号：</span>
                     <span class="projectCenterFont">
-                      {{
-                      assess.assessmentNo
-                      }}
+                      {{ assess.assessmentNo }}
                     </span>
                   </div>
                   <div class="assessBox">
-                    <span class="projectCenterFont" style="width: 40%">被征收房屋地址：</span>
-                    <span class="projectCenterFont protocolTitle">{{ assess.houseAddress }}</span>
+                    <span class="projectCenterFont" style="width: 40%"
+                      >被征收房屋地址：</span
+                    >
+                    <span class="projectCenterFont protocolTitle">{{
+                      assess.houseAddress
+                    }}</span>
                   </div>
                   <div class="assessBox">
                     <span class="projectCenterFont">评估总金额：</span>
-                    <span class="projectTitle" style="color: red">¥{{ assess.countValue }}</span>
+                    <span class="projectTitle" style="color: red"
+                      >¥{{ assess.countValue }}</span
+                    >
                   </div>
                 </div>
               </van-list>
               <div class="assess">
                 <div>
-                  <van-image :src="require('@/assets/img/assess_2.png')" class="assessIcon" />
+                  <van-image
+                    :src="require('@/assets/img/assess_2.png')"
+                    class="assessIcon"
+                  />
                   <span class="assessTitle">补偿协议</span>
                 </div>
                 <!-- <div>
@@ -133,25 +167,34 @@
                 </div>-->
               </div>
               <van-list>
-                <div :key="protocol.id" class="assessCenter2" v-for="(protocol) in item.bcxyList">
+                <div
+                  :key="protocol.id"
+                  class="assessCenter2"
+                  v-for="protocol in item.bcxyList"
+                >
                   <div class="assessBox">
                     <span class="projectCenterFont">协议编号：</span>
                     <span class="projectCenterFont">{{ protocol.xyNo }}</span>
                   </div>
                   <div class="assessBox">
-                    <span class="projectCenterFont" style="width: 40%">被征收房屋地址：</span>
-                    <span class="projectCenterFont protocolTitle">{{ protocol.houseAddress }}</span>
+                    <span class="projectCenterFont" style="width: 40%"
+                      >被征收房屋地址：</span
+                    >
+                    <span class="projectCenterFont protocolTitle">{{
+                      protocol.houseAddress
+                    }}</span>
                   </div>
                   <div class="assessBox">
                     <span class="projectCenterFont">补偿方式：</span>
-                    <span class="projectCenterFont">{{ protocol.switchProductionWay }}</span>
+                    <span class="projectCenterFont">{{
+                      protocol.switchProductionWay
+                    }}</span>
                   </div>
                   <div class="assessBox">
                     <span class="projectCenterFont">合计补偿资金：</span>
-                    <span
-                      class="projectTitle"
-                      style="color: red"
-                    >¥{{ protocol.summationShouldCompensateMoney }}</span>
+                    <span class="projectTitle" style="color: red"
+                      >¥{{ protocol.summationShouldCompensateMoney }}</span
+                    >
                   </div>
                 </div>
               </van-list>
@@ -160,7 +203,10 @@
         </div>
       </van-list>
       <div class="centerMagin">
-        <van-image :src="require('@/assets/img/expropriationPolicy.png')" class="bigImg" />
+        <van-image
+          :src="require('@/assets/img/expropriationPolicy.png')"
+          class="bigImg"
+        />
       </div>
       <div class="centerMagin">
         <span class="projectTitle" style="color: #202020">征收政策</span>
@@ -173,12 +219,15 @@
         </div>
       </div>
       <div class="centerMagin" style="padding-bottom: 20px">
-        <div class="protocolBox">
+        <div class="protocolBox" @click="pageJump()">
           <van-list :finished="finished" @load="onLoad" v-model="loading">
             <div :key="item.id" class="protocolList" v-for="(item, i) in list">
               <div class="protocolLine" v-if="i != list.length - 1">
                 <div class="font14 protocolTitle">{{ item.title }}</div>
-                <div class="assessBox" style="padding-left: 5px; padding-right: 5px">
+                <div
+                  class="assessBox"
+                  style="padding-left: 5px; padding-right: 5px"
+                >
                   <div>
                     <span class="font11">发布时间：</span>
                     <span class="font11">{{ item.publish_date }}</span>
@@ -191,7 +240,10 @@
               </div>
               <div style="padding-bottom: 10px" v-else>
                 <div class="font14 protocolTitle">{{ item.title }}</div>
-                <div class="assessBox" style="padding-left: 5px; padding-right: 5px">
+                <div
+                  class="assessBox"
+                  style="padding-left: 5px; padding-right: 5px"
+                >
                   <div>
                     <span class="font11">发布时间：</span>
                     <span class="font11">{{ item.publish_date }}</span>
@@ -211,14 +263,14 @@
 </template>
 
 <script>
-import './home.css';
-import { apis } from '@/common/apis';
-import { token } from '@/common/token';
-import request from '@/common/util';
-import { mgop } from '@aligov/jssdk-mgop';
+import "./home.css";
+import { apis } from "@/common/apis";
+import { token } from "@/common/token";
+import request from "@/common/util";
+import { mgop } from "@aligov/jssdk-mgop";
 
 export default {
-  name: 'home',
+  name: "home",
   data() {
     return {
       // apidata: {
@@ -281,29 +333,29 @@ export default {
       //   amount: "0",
       // },
       data: {},
-      total: '8',
+      total: "8",
       list: [
         {
           id: 11,
-          area: '全大市',
-          title: '宁波市住房和城乡建设委员会开展关于住房的政策',
-          publish_date: '2021年09月05日',
+          area: "全大市",
+          title: "宁波市住房和城乡建设委员会开展关于住房的政策",
+          publish_date: "2021年09月05日"
         },
         {
           id: 22,
-          area: '全大市',
-          title: '宁波市住房和城乡建设委员会开展关于住房的政策',
-          publish_date: '2021年09月05日',
+          area: "全大市",
+          title: "宁波市住房和城乡建设委员会开展关于住房的政策",
+          publish_date: "2021年09月05日"
         },
         {
           id: 33,
-          area: '全大市',
-          title: '宁波市住房和城乡建设委员会开展关于住房的政策',
-          publish_date: '2021年09月05日',
-        },
+          area: "全大市",
+          title: "宁波市住房和城乡建设委员会开展关于住房的政策",
+          publish_date: "2021年09月05日"
+        }
       ],
       loading: false,
-      finished: true,
+      finished: true
     };
   },
   created() {
@@ -313,58 +365,58 @@ export default {
     onLoad() {},
     onInit() {
       mgop({
-        api: 'mgop.kykj.houseexpropriat.getprjlist', // 必须
-        host: 'https://mapi.zjzwfw.gov.cn/',
-        dataType: 'JSON',
-        type: 'GET',
-        appKey: 'es4b8zmz+2001833218+dehllx', // 必须
-        onSuccess: (data) => {
-          console.log('data', data);
-        },
-        onFail: (err) => {
-          console.log(err, 'err');
+        api: "mgop.kykj.houseexpropriat.getprjlist", // 必须
+        host: "https://mapi.zjzwfw.gov.cn/",
+        dataType: "JSON",
+        type: "GET",
+        appKey: "es4b8zmz+2001833218+dehllx", // 必须
+        onSuccess: data => {
+          console.log("data", data);
         },
+        onFail: err => {
+          console.log(err, "err");
+        }
       });
       let apidata = {
         success: true,
         code: 200,
-        message: '请求成功',
+        message: "请求成功",
         data: {
-          userName: '张三丰',
-          idCard: '341203199206303411',
+          userName: "张三丰",
+          idCard: "341203199206303411",
           prjList: [
             {
-              prjId: '936d98a8-2c8f-410f-b126-68a7568f60c4',
-              name: '项目名称',
-              area: '海曙区',
-              zsbm: '宁波市海曙区房屋征收管理服务中心',
+              prjId: "936d98a8-2c8f-410f-b126-68a7568f60c4",
+              name: "项目名称",
+              area: "海曙区",
+              zsbm: "宁波市海曙区房屋征收管理服务中心",
               year: 2021.0,
-              zsjdh: '海政发[2021]513号',
-              currentState: '项目报结',
+              zsjdh: "海政发[2021]513号",
+              currentState: "项目报结",
               fhpgList: [
                 {
-                  prjId: '936d98a8-2c8f-410f-b126-68a7568f60c4',
-                  id: 'a400583e-ae93-444f-8a20-4c4731b0cc13',
-                  assessmentNo: '0513',
-                  houseAddress: '高桥镇',
-                  countValue: '137654.00',
-                },
+                  prjId: "936d98a8-2c8f-410f-b126-68a7568f60c4",
+                  id: "a400583e-ae93-444f-8a20-4c4731b0cc13",
+                  assessmentNo: "0513",
+                  houseAddress: "高桥镇",
+                  countValue: "137654.00"
+                }
               ],
               bcxyList: [
                 {
-                  prjId: '936d98a8-2c8f-410f-b126-68a7568f60c4',
-                  id: 'bf21b302-8059-462d-985f-ce7452c4d5b4',
-                  xyNo: '海政发2021513-0513-1',
-                  houseAddress: '高桥镇',
-                  switchProductionWay: '货币补偿',
-                  summationShouldCompensateMoney: '137654.00',
-                },
-              ],
-            },
-          ],
+                  prjId: "936d98a8-2c8f-410f-b126-68a7568f60c4",
+                  id: "bf21b302-8059-462d-985f-ce7452c4d5b4",
+                  xyNo: "海政发2021513-0513-1",
+                  houseAddress: "高桥镇",
+                  switchProductionWay: "货币补偿",
+                  summationShouldCompensateMoney: "137654.00"
+                }
+              ]
+            }
+          ]
         },
         extras: null,
-        timestamp: 1631261808797,
+        timestamp: 1631261808797
       };
       if (apidata.code == 200) {
         this.data = apidata.data;
@@ -379,11 +431,11 @@ export default {
       // });
     },
     gotoProject(type) {
-      this.$router.push({ name: 'projectSelect', params: { type: type } });
+      this.$router.push({ name: "projectSelect", params: { type: type } });
     },
     onLogin() {
       // this.loading = true;
-      let form = { account: 'zgbqc', password: '111qqqqq' };
+      let form = { account: "zgbqc", password: "111qqqqq" };
       apis
         .login(form)
         .finally(() => {
@@ -397,7 +449,7 @@ export default {
           this.onLoadUserInfo();
           this.onLoadStatistic();
         })
-        .catch((err) => {
+        .catch(err => {
           debugger;
           // this.$toast(err);
         });
@@ -420,11 +472,13 @@ export default {
       var tbl = [];
       var len = n - num.toString().length;
       if (len <= 0) return num;
-      if (!tbl[len]) tbl[len] = new Array(len + 1).join('0');
+      if (!tbl[len]) tbl[len] = new Array(len + 1).join("0");
       return tbl[len] + num;
     },
-  },
+    // 页面跳转
+    pageJump() {
+      this.$router.push("/policyInfo");
+    }
+  }
 };
 </script>
-
-

FrontCode2/sunshine_levy/src/views/policyInfo/policyInfo.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="container">
+    <div class="title">{{ info.title }}</div>
+    <div class="date">{{ info.date }}</div>
+    <hr />
+    <p class="content">{{ info.content }}</p>
+    <p class="content">{{ info.content }}</p>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      info: {
+        title: "国有土地征收详情与政策",
+        date: "2021-9-5",
+        content: `第一条　为了规范国有土地上房屋征收与补偿活动,维护公共利益,保障被征收房屋所有权人的合法权益,制定本条例<br/>
+          第二条　市、县级人民政府有关部门应当依照本条例的规定和本级人民政府规定的职责分工，互相配合，保障房屋征收与补偿工作的顺利进行`
+      }
+    };
+  }
+};
+</script>
+<style lang="less" scoped>
+.container {
+  padding: 20px;
+  font-size: 14px;
+  .title {
+    text-align: center;
+    font-weight: bolder;
+  }
+  .date {
+    text-align: center;
+    margin: 10px 0;
+  }
+  .content {
+    text-indent: 2em;
+    line-height: 2.5;
+  }
+}
+</style>