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

<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"
              @click="skip('/sunVillage/injoint/meansOf_desc')"
            >
              <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"
              @click="skip('/sunVillage/injoint/meansOf_desc')"
            >
              <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: "sunVillageMeansOf",
  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>