阳光村务新增三资公开

src/components/sunVillage/common/header.vue

@@ -32,14 +32,18 @@
 
 <script>
 export default {
-  props: ["headings", "currentNav"],
+  props: ["headings", "currentNav", "returnUrl"],
   data() {
     return {};
   },
   mounted() {},
   methods: {
     previousStep() {
-      this.$router.back();
+      if (this.returnUrl) {
+        this.$router.push(this.returnUrl);
+      } else {
+        this.$router.back();
+      }
     },
   },
 };

src/components/sunVillage/financial/nav.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="navigation_main">
+    <router-link
+      tag="div"
+      to="/sunVillage/financial"
+      class="flex_wrap"
+      :class="serialTag == 1 ? 'current' : ''"
+      >金融政策</router-link
+    >
+    <router-link
+      tag="div"
+      to="/sunVillage/financial/products"
+      class="flex_wrap"
+      :class="serialTag == 2 ? 'current' : ''"
+      >理财产品</router-link
+    >
+    <router-link
+      tag="div"
+      to="/sunVillage/financial/loan"
+      class="flex_wrap"
+      :class="serialTag == 3 ? 'current' : ''"
+      >金融贷款</router-link
+    >
+  </div>
+</template>
+
+<style scoped lang="scss">
+.navigation_main {
+  margin: 0 24px;
+  display: flex;
+  justify-content: space-between;
+  padding: 30px 0 10px;
+  .flex_wrap {
+    height: 80px;
+    background: #f8f8f8;
+    color: #07c160;
+    font-size: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 216px;
+    border-radius: 12px;
+    &.current {
+      color: #fff;
+      background: #07c160;
+    }
+  }
+}
+</style>
+
+<script>
+export default {
+  props: ["serialTag"],
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>

src/components/sunVillage/injoint/nav.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="navigation_main">
+    <router-link
+      tag="div"
+      to="/sunVillage/injoint"
+      class="flex_wrap"
+      :class="serialTag == 1 ? 'current' : ''"
+      >财务公开</router-link
+    >
+    <router-link
+      tag="div"
+      to="/sunVillage/injoint/meansOf"
+      class="flex_wrap"
+      :class="serialTag == 2 ? 'current' : ''"
+      >清产核资</router-link
+    >
+    <router-link
+      tag="div"
+      to="/sunVillage/injoint/assetsPublic"
+      class="flex_wrap"
+      :class="serialTag == 3 ? 'current' : ''"
+      >资产公开</router-link
+    >
+    <router-link
+      tag="div"
+      to="/sunVillage/injoint"
+      class="flex_wrap"
+      :class="serialTag == 4 ? 'current' : ''"
+      >资源公开</router-link
+    >
+  </div>
+</template>
+
+<style scoped lang="scss">
+.navigation_main {
+  margin: 0 24px;
+  display: flex;
+  justify-content: space-between;
+  padding: 30px 0 10px;
+  .flex_wrap {
+    height: 80px;
+    background: #f8f8f8;
+    color: #07c160;
+    font-size: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 160px;
+    border-radius: 12px;
+    &.current {
+      color: #fff;
+      background: #07c160;
+    }
+  }
+}
+</style>
+
+<script>
+export default {
+  props: ["serialTag"],
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>

src/permission.js

@@ -72,7 +72,11 @@ const whiteList = [
   '/sunVillage/importantItems',   //重大事项列表
   '/sunVillage/public',  //三务公开
   '/sunVillage/financial', //惠民金融
-  '/sunVillage/financial/products' //惠民金融 - 理财产品
+  '/sunVillage/financial/products', //惠民金融 - 理财产品
+  '/sunVillage/financial/loan', //惠民金融 - 理财产品
+  '/sunVillage/injoint', //三资公开-财务公开
+  '/sunVillage/injoint/meansOf', //三资公开-清产核资
+  '/sunVillage/injoint/assetsPublic',  //三资公开-资产公开
 ]
 
 router.beforeEach((to, from, next) => {

src/router/index.js

@@ -2491,15 +2491,51 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/sunVillage/dynamic/financial/index'], resolve)
   },
-  // {
-  //   path: '/sunVillage/financial',
-  //   name: 'sunVillageFinancial',
-  //   meta: {
-  //     title: '惠民金融',
-  //     hidden: true,
-  //   },
-  //   component: (resolve) => require(['@/views/sunVillage/dynamic/financial/index'], resolve)
-  // }
+  {
+    path: '/sunVillage/financial/products',
+    name: 'sunVillageFinancialProducts',
+    meta: {
+      title: '惠民金融',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/dynamic/financial/products'], resolve)
+  },
+  {
+    path: '/sunVillage/financial/loan',
+    name: 'sunVillageFinancialLoan',
+    meta: {
+      title: '惠民金融',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/dynamic/financial/loan'], resolve)
+  },
+  {
+    path: '/sunVillage/injoint',
+    name: 'sunVillageInjoint',
+    meta: {
+      title: '三资公开', //财务公开
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/dynamic/injoint/index'], resolve)
+  },
+  {
+    path: '/sunVillage/injoint/meansOf',
+    name: 'sunVillageInjointMeansOf',
+    meta: {
+      title: '三资公开', //清产核资
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/dynamic/injoint/meansOf'], resolve)
+  },
+  {
+    path: '/sunVillage/injoint/assetsPublic',
+    name: 'sunVillageAssetsPublic',
+    meta: {
+      title: '三资公开', //资产公开
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/dynamic/injoint/assetsPublic'], resolve)
+  }
 
 ];
 

src/views/sunVillage/dynamic/financial/index.vue

@@ -1,23 +1,13 @@
 <template>
   <div class="home_wrapper">
-    <header-nav :headings="headingsTitle" :currentNav="1"></header-nav>
-    <div class="navigation_main">
-      <router-link
-        tag="div"
-        to="/sunVillage/financial"
-        class="flex_wrap current"
-        >金融政策</router-link
-      >
-      <router-link
-        tag="div"
-        to="/sunVillage/financial/products"
-        class="flex_wrap"
-        >理财产品</router-link
-      >
-      <div class="flex_wrap">金融贷款</div>
-    </div>
-    <!---金融政策-->
+    <header-nav
+      :headings="headingsTitle"
+      :currentNav="1"
+      returnUrl="/sunVillage/index"
+    ></header-nav>
 
+    <!---金融政策-->
+    <projectNav :serialTag="1"></projectNav>
     <div class="focus_news">
       <div class="news_img">
         <img src="@/assets/images/sunVillage/5.jpg" />
@@ -54,27 +44,7 @@
   width: 100%;
   min-height: 100vh;
   background: #fff;
-  .navigation_main {
-    margin: 0 24px;
-    display: flex;
-    justify-content: space-between;
-    padding: 30px 0 10px;
-    .flex_wrap {
-      height: 80px;
-      background: #f8f8f8;
-      color: #07c160;
-      font-size: 32px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 216px;
-      border-radius: 12px;
-      &.current {
-        color: #fff;
-        background: #07c160;
-      }
-    }
-  }
+
   .focus_news {
     margin: 20px 24px 16px;
     .news_img {
@@ -118,9 +88,10 @@
 
 <script>
 import headerNav from "@/components/sunVillage/common/header.vue";
+import projectNav from "@/components/sunVillage/financial/nav";
 export default {
   name: "sunVillageFinancial",
-  components: { headerNav },
+  components: { headerNav, projectNav },
   data() {
     return {
       headingsTitle: "惠民金融",

src/views/sunVillage/dynamic/financial/loan.vue

@@ -1,61 +1,54 @@
 <template>
   <div class="home_wrapper">
-    <header-nav :headings="headingsTitle" :currentNav="1"></header-nav>
-    <div class="navigation_main">
-      <router-link tag="div" to="/sunVillage/financial" class="flex_wrap"
-        >金融政策</router-link
-      >
-      <router-link
-        tag="div"
-        to="/sunVillage/financial/products"
-        class="flex_wrap current"
-        >理财产品</router-link
-      >
-      <div class="flex_wrap">金融贷款</div>
-    </div>
+    <header-nav
+      :headings="headingsTitle"
+      :currentNav="1"
+      returnUrl="/sunVillage/index"
+    ></header-nav>
+    <projectNav :serialTag="3"></projectNav>
     <div class="products_main">
       <ul>
         <li>
           <div class="advertising">
-            <img src="@/assets/images/sunVillage/6.jpg" />
+            <img src="@/assets/images/sunVillage/7.jpg" />
           </div>
-          <div class="title">农行福满盈</div>
+          <div class="title">贷款产品1</div>
         </li>
         <li>
           <div class="advertising">
-            <img src="@/assets/images/sunVillage/6.jpg" />
+            <img src="@/assets/images/sunVillage/7.jpg" />
           </div>
-          <div class="title">农行福满盈</div>
+          <div class="title">贷款产品1</div>
         </li>
         <li>
           <div class="advertising">
-            <img src="@/assets/images/sunVillage/6.jpg" />
+            <img src="@/assets/images/sunVillage/7.jpg" />
           </div>
-          <div class="title">农行福满盈</div>
+          <div class="title">贷款产品1</div>
         </li>
         <li>
           <div class="advertising">
-            <img src="@/assets/images/sunVillage/6.jpg" />
+            <img src="@/assets/images/sunVillage/7.jpg" />
           </div>
-          <div class="title">农行福满盈</div>
+          <div class="title">贷款产品1</div>
         </li>
         <li>
           <div class="advertising">
-            <img src="@/assets/images/sunVillage/6.jpg" />
+            <img src="@/assets/images/sunVillage/7.jpg" />
           </div>
-          <div class="title">农行福满盈</div>
+          <div class="title">贷款产品1</div>
         </li>
         <li>
           <div class="advertising">
-            <img src="@/assets/images/sunVillage/6.jpg" />
+            <img src="@/assets/images/sunVillage/7.jpg" />
           </div>
-          <div class="title">农行福满盈</div>
+          <div class="title">贷款产品1</div>
         </li>
         <li>
           <div class="advertising">
-            <img src="@/assets/images/sunVillage/6.jpg" />
+            <img src="@/assets/images/sunVillage/7.jpg" />
           </div>
-          <div class="title">农行福满盈</div>
+          <div class="title">贷款产品1</div>
         </li>
       </ul>
     </div>
@@ -67,27 +60,7 @@
   width: 100%;
   min-height: 100vh;
   background: #fff;
-  .navigation_main {
-    margin: 0 24px;
-    display: flex;
-    justify-content: space-between;
-    padding: 30px 0 10px;
-    .flex_wrap {
-      height: 80px;
-      background: #f8f8f8;
-      color: #07c160;
-      font-size: 32px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 216px;
-      border-radius: 12px;
-      &.current {
-        color: #fff;
-        background: #07c160;
-      }
-    }
-  }
+
   .products_main {
     margin: 20px 24px;
     ul {
@@ -127,9 +100,10 @@
 
 <script>
 import headerNav from "@/components/sunVillage/common/header.vue";
+import projectNav from "@/components/sunVillage/financial/nav";
 export default {
   name: "sunVillageFinancialLoan",
-  components: { headerNav },
+  components: { headerNav, projectNav },
   data() {
     return {
       headingsTitle: "惠民金融",

src/views/sunVillage/dynamic/financial/products.vue

@@ -1,18 +1,11 @@
 <template>
   <div class="home_wrapper">
-    <header-nav :headings="headingsTitle" :currentNav="1"></header-nav>
-    <div class="navigation_main">
-      <router-link tag="div" to="/sunVillage/financial" class="flex_wrap"
-        >金融政策</router-link
-      >
-      <router-link
-        tag="div"
-        to="/sunVillage/financial/products"
-        class="flex_wrap current"
-        >理财产品</router-link
-      >
-      <div class="flex_wrap">金融贷款</div>
-    </div>
+    <header-nav
+      :headings="headingsTitle"
+      :currentNav="1"
+      returnUrl="/sunVillage/index"
+    ></header-nav>
+    <projectNav :serialTag="2"></projectNav>
     <div class="products_main">
       <ul>
         <li>
@@ -67,27 +60,7 @@
   width: 100%;
   min-height: 100vh;
   background: #fff;
-  .navigation_main {
-    margin: 0 24px;
-    display: flex;
-    justify-content: space-between;
-    padding: 30px 0 10px;
-    .flex_wrap {
-      height: 80px;
-      background: #f8f8f8;
-      color: #07c160;
-      font-size: 32px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 216px;
-      border-radius: 12px;
-      &.current {
-        color: #fff;
-        background: #07c160;
-      }
-    }
-  }
+
   .products_main {
     margin: 20px 24px;
     ul {
@@ -127,9 +100,10 @@
 
 <script>
 import headerNav from "@/components/sunVillage/common/header.vue";
+import projectNav from "@/components/sunVillage/financial/nav";
 export default {
   name: "sunVillageFinancial",
-  components: { headerNav },
+  components: { headerNav, projectNav },
   data() {
     return {
       headingsTitle: "惠民金融",

src/views/sunVillage/dynamic/injoint/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="home_wrapper">
+    <header-nav
+      :headings="headingsTitle"
+      :currentNav="1"
+      returnUrl="/sunVillage/index"
+    ></header-nav>
+    <projectNav :serialTag="1"></projectNav>
+    <div class="focus_news">
+      <div class="news_img">
+        <img src="@/assets/images/sunVillage/8.jpg" />
+      </div>
+      <div class="news_title">村一季度财务情况公布</div>
+    </div>
+    <div class="news_list">
+      <ul>
+        <li
+          class="item_block"
+          @click="skip('/sunVillage/latestReport/details')"
+        >
+          <div class="title">一季度收入说明</div>
+          <div class="insets">
+            <img src="@/assets/images/sunVillage/2.jpg" />
+          </div>
+        </li>
+        <li
+          class="item_block"
+          @click="skip('/sunVillage/latestReport/details')"
+        >
+          <div class="title">一季度收入说明</div>
+          <div class="insets">
+            <img src="@/assets/images/sunVillage/2.jpg" />
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home_wrapper {
+  width: 100%;
+  min-height: 100vh;
+  background: #fff;
+
+  .focus_news {
+    margin: 20px 24px 16px;
+    .news_img {
+      width: 702px;
+      height: 256px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .news_title {
+      font-size: 24px;
+      margin-top: 16px;
+    }
+  }
+  .news_list {
+    li {
+      display: flex;
+      height: 146px;
+      justify-content: center;
+      align-items: center;
+      padding: 0 33px;
+      .title {
+        padding-left: 8px;
+        flex: 1;
+        font-size: 28px;
+      }
+      .insets {
+        width: 116px;
+        margin-left: 26px;
+        height: 116px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<script>
+import headerNav from "@/components/sunVillage/common/header.vue";
+import projectNav from "@/components/sunVillage/injoint/nav";
+export default {
+  name: "sunVillageInjoint",
+  components: { headerNav, projectNav },
+  data() {
+    return {
+      headingsTitle: "三资公开",
+    };
+  },
+  mounted() {},
+  methods: {
+    skip(url) {
+      this.$router.push(url);
+    },
+  },
+};
+</script>

src/views/sunVillage/dynamic/injoint/meansOf.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="home_wrapper">
+    <header-nav
+      :headings="headingsTitle"
+      :currentNav="1"
+      returnUrl="/sunVillage/index"
+    ></header-nav>
+    <projectNav :serialTag="2"></projectNav>
+    <div class="make_detail">
+      <div class="make_tab">
+        <div class="flex_block current">收支明细公开</div>
+        <div class="flex_block">资产负债公开</div>
+      </div>
+
+      <!--1--->
+      <div class="payment_details">
+        <div class="info_wrap">
+          <div class="date_main" @click="selectDateFun">
+            <i class="icon"></i>
+            <div class="year">2022</div>
+            <div class="month">1月</div>
+          </div>
+          <div class="unit">单位:张村</div>
+        </div>
+        <div class="table_wrap">
+          <div class="head_main">
+            <div class="flex f1">凭证号</div>
+            <div class="flex f2">摘要</div>
+            <div class="flex f3">收入金额<br />(元)</div>
+            <div class="flex f4">日期</div>
+          </div>
+          <div class="tbody_main">
+            <div class="item_list">
+              <div class="flex f1">记11号</div>
+              <div class="flex f2">收项目1季度预收款</div>
+              <div class="flex f3">4500</div>
+              <div class="flex f4">02/25</div>
+            </div>
+            <div class="item_list">
+              <div class="flex f1">记11号</div>
+              <div class="flex f2">收项目1季度预收款</div>
+              <div class="flex f3">4500</div>
+              <div class="flex f4">02/25</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <van-popup v-model:show="dateVisbile" round position="bottom">
+        <van-datetime-picker
+          v-model="selectDate.currentDate"
+          type="month-day"
+          title="选择月日"
+          :min-date="selectDate.minDate"
+          :max-date="selectDate.maxDate"
+          :formatter="formatter"
+          @confirm="onConfirmMonth"
+          @cancel="dateVisbile = false"
+        />
+      </van-popup>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home_wrapper {
+  width: 100%;
+  min-height: 100vh;
+  background: #fff;
+  .make_detail {
+    margin: 20px 24px 0;
+    .make_tab {
+      height: 60px;
+      display: flex;
+      margin-bottom: 20px;
+      .flex_block {
+        background: rgba(247, 247, 247, 0.9);
+        color: rgb(151, 151, 151);
+        margin-right: 18px;
+        padding: 0 16px;
+        font-size: 32px;
+        display: flex;
+        justify-content: center; /* 相对父元素水平居中 */
+        align-items: center;
+        &.current {
+          background: rgba(237, 237, 237, 0.9);
+          border-bottom: 1px solid #07c160;
+          color: #333;
+        }
+      }
+    }
+    .payment_details {
+      .info_wrap {
+        display: flex;
+        height: 68px;
+        margin-bottom: 12px;
+        justify-content: space-between;
+        .date_main {
+          width: 270px;
+          height: 68px;
+          border-bottom: 2px solid #ededed;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 28px;
+          .icon {
+            width: 26px;
+            height: 26px;
+            background: url("../../../../assets/images/sunVillage/select_date_icon.jpg")
+              no-repeat;
+            background-size: 100% 100%;
+            display: block;
+            margin: 0 25px 0 12px;
+          }
+          .year {
+            margin-right: 30px;
+          }
+        }
+        .unit {
+          width: 270px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 28px;
+        }
+      }
+      .table_wrap {
+        .head_main {
+          height: 76px;
+          display: flex;
+          color: #bababa;
+          .flex {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            &.f1 {
+              flex: 3;
+            }
+            &.f2 {
+              flex: 5;
+            }
+            &.f3 {
+              flex: 2;
+            }
+            &.f4 {
+              flex: 2;
+            }
+          }
+        }
+        .tbody_main {
+          .item_list {
+            height: 150px;
+            display: flex;
+            .flex {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              text-align: center;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              &.f1 {
+                flex: 3;
+              }
+              &.f2 {
+                flex: 5;
+              }
+              &.f3 {
+                flex: 2;
+              }
+              &.f4 {
+                flex: 2;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
+<script>
+import headerNav from "@/components/sunVillage/common/header.vue";
+import projectNav from "@/components/sunVillage/injoint/nav";
+export default {
+  name: "sunVillageInjoint",
+  components: { headerNav, projectNav },
+  data() {
+    return {
+      headingsTitle: "三资公开",
+      dateVisbile: false,
+      selectDate: {
+        currentDate: new Date(),
+        minDate: new Date(2020, 0, 1),
+        maxDate: new Date(2025, 10, 1),
+      },
+    };
+  },
+  mounted() {},
+  methods: {
+    skip(url) {
+      this.$router.push(url);
+    },
+    selectDateFun() {
+      this.dateVisbile = !this.dateVisbile;
+    },
+    formatter(type, val) {
+      if (type === "month") {
+        return val + "月";
+      }
+      if (type === "day") {
+        return val + "日";
+      }
+      return val;
+    },
+    onConfirmMonth(val) {
+      let year = val.getFullYear();
+      let month = val.getMonth() + 1;
+      if (month >= 1 && month <= 9) {
+        month = `0${month}`;
+      }
+      console.log(year + "-" + month);
+    },
+  },
+};
+</script>

src/views/sunVillage/index.vue

@@ -20,10 +20,10 @@
         <div class="icon"></div>
         <div class="title">惠民金融</div>
       </router-link>
-      <div class="channel c5">
+      <router-link tag="div" to="/sunVillage/injoint" class="channel c5">
         <div class="icon"></div>
         <div class="title">三资公开</div>
-      </div>
+      </router-link>
     </div>
   </div>
 </template>