nsgk_mobile/src/views/sunVillage_info/index.vue

<template>
    <div class="home_wrapper">
        <div class="head_main">
            <div class="location">
              <div class="address" @click="villageVisbile = true"><i class="icon"></i>{{deptName}}</div>
              <van-popup v-model="villageVisbile" round position="bottom">
                <van-cascader
                  v-model="villageValue"
                  title="请选择所在村"
                  :options="hcAreaInfoOption"
                  @close="hcAreaInfoClose"
                  @finish="hcAreaInfoFinish"
                  active-color="#1989fa"
                  :field-names="hcAreaInfoFieldName"
                />
              </van-popup>

              <div class="address" @click="bookVisbile = true">{{bookName}}</div>
              <van-popup v-model="bookVisbile" round position="bottom">
                <van-picker
                  title="请选择账套"
                  show-toolbar
                  :columns="bookList"
                  @confirm="onConfirmBook"
                  @cancel="onCancelBook"
                  value-key="bookName"
                />
              </van-popup>

            </div>
            <van-popover
              v-model="showPopover"
              trigger="click"
              :actions="actions"
              placement="bottom-end"
              @select="selectChange"
            >
              <template #reference>
                <div class="exit_btn">
                  <i class="icon"></i>
                </div>
              </template>
            </van-popover>
<!--          @click="logout"-->
        </div>
        <div class="index_info">
            <div class="title"></div>
            <div class="nav_list">
              <div class="nav_list_box">
                <van-cell style="border-radius: 6px;">
                  <template #title>
                    <p style="font-weight: bold;font-size: 18px;display: inline-block">阳光村务</p>
                  </template>
                </van-cell>
                <router-link :to="{name:'sunVillageInfoListFinance'}" class="nav_item n_1">财务公开榜</router-link>
                <router-link :to="{name:'sunVillageInfoListTourists'}" class="nav_item n_2">零工公开榜</router-link>
                <router-link :to="{name:'sunVillageInfoListIssues'}" class="nav_item n_3">重大事项</router-link>
                <router-link :to="{name:'sunVillageInfoListBalanceRanking'}" class="nav_item n_4">科目余额表</router-link>
                <router-link :to="{name:'sunVillageInfoListVote'}" class="nav_item n_5">发布投票</router-link>
                <router-link :to="{name:'sunVillageInfoFixedAssets'}" class="nav_item n_6">资产登记</router-link>
                <router-link :to="{name:'sunVillageInfoInformation'}" class="nav_item n_7">合同登记</router-link>
                <router-link :to="{name:'sunVillageInfoListRegister'}" class="nav_item n_8">零工登记</router-link>
              </div>
            </div>
            <div class="nav_list">
              <div class="nav_box">
                <van-cell style="border-radius: 6px;">
                  <template #title>
                    <p style="font-weight: bold;font-size: 18px;display: inline-block">支出申请</p>
                  </template>
                </van-cell>
                <van-grid :border="false">
                  <van-grid-item text="银行卡转账" :to="{name:'sunVillageApprovalList'}" >
                    <div class="icon" slot="default" style="background:#FF4646;" >
                      <img src="../../../static/images/onlineHome/icon_Y1.png" alt />
                    </div>
                    <p style="margin-top: 5px;color: #666666;">银行卡转账</p>
                  </van-grid-item>
                  <!--          <van-grid-item text="代管转账" :to="{name:'approvalList4'}" >-->
                  <!--            <div class="icon" slot="default" style="background:#c568f5;" >-->
                  <!--              <img src="../../../static/images/onlineHome/icon_Y4.png" alt />-->
                  <!--            </div>-->
                  <!--            <p style="margin-top: 5px;color: #666666;">代管转账</p>-->
                  <!--          </van-grid-item>-->
                  <van-grid-item text="信用卡还款" :to="{name:'sunVillageApprovalList2'}" >
                    <div class="icon" slot="default" style="background:#3ac2db;" >
                      <img src="../../../static/images/onlineHome/icon_Y2.png" alt />
                    </div>
                    <p style="margin-top: 5px;color: #666666;">信用卡还款</p>
                  </van-grid-item>
                  <!--          <van-grid-item text="现金提现" :to="{name:'approvalList10'}" >-->
                  <!--            <div class="icon" slot="default" style="background:#FF6464;" >-->
                  <!--              <img src="../../../static/images/onlineHome/icon_Y6.png" alt />-->
                  <!--            </div>-->
                  <!--            <p style="margin-top: 5px;color: #666666;">现金提现</p>-->
                  <!--          </van-grid-item>-->
                  <van-grid-item text="备付金支出" :to="{name:'sunVillageApprovalList11'}" >
                    <div class="icon" slot="default" style="background:#7790FE;" >
                      <img src="../../../static/images/onlineHome/icon_Y7.png" alt />
                    </div>
                    <p style="margin-top: 5px;color: #666666;">备付金支出</p>
                  </van-grid-item>
                  <van-grid-item text="汇票支出" :to="{name:'sunVillageApprovalList12'}" >
                    <div class="icon" slot="default" style="background:#539ffd;" >
                      <img src="../../../static/images/onlineHome/icon_Y8.png" alt />
                    </div>
                    <p style="margin-top: 5px;color: #666666;">汇票支出</p>
                  </van-grid-item>
                  <van-grid-item text="收款账户" :to="{name:'sunVillageCollectionList'}" >
                    <div class="icon" slot="default" style="background:#7dda4f;" >
                      <img src="../../../static/images/onlineHome/icon_Y9.png" alt />
                    </div>
                    <p style="margin-top: 5px;color: #666666;">收款账户</p>
                  </van-grid-item>
                  <van-grid-item text="付款账户" :to="{name:'sunVillagePaymentAccountList'}" >
                    <div class="icon" slot="default" style="background:#FF4646;" >
                      <img src="../../../static/images/onlineHome/icon_Y10.png" alt />
                    </div>
                    <p style="margin-top: 5px;color: #666666;">付款账户</p>
                  </van-grid-item>
                  <van-grid-item text="开户行" :to="{name:'sunVillageBankOfDepositList'}" >
                    <div class="icon" slot="default" style="background:#FF6464;" >
                      <img src="../../../static/images/onlineHome/icon_Y6.png" alt />
                    </div>
                    <p style="margin-top: 5px;color: #666666;">开户行</p>
                  </van-grid-item>
                </van-grid>
              </div>
            </div>
        </div>
        <div class="footer">
            技术支持：北京农燊高科信息技术有限公司
        </div>
    </div>
</template>
<script>
  import { changeBook , listByDeptId , treeselectByUser } from "@/api/sunVillage_info/fixedAssets";
  import { getInfo } from "@/api/login/index";
  import {changeDept} from "../../api/onlineHome/done";
  import {bookListByDeptId} from "../../api/homestead";
  import Cookies from "js-cookie";
  import {logout} from "../../api/login";
  export default {
    name: "certificateList",
    data() {
      return {
        showPopover: false,
        actions: [
          { text: '个人信息', icon: 'manager-o' , index: 0 },
          { text: '修改密码', icon: 'edit' , index: 1 },
          { text: '退出登录', icon: 'revoke' , index: 2 },
        ],
        deptIdOptions:[],
        villageVisbile:false,
        showBookList:false,
        deptName:'',
        //选中的值
        villageValue: "",
        //省市区区级list
        hcAreaInfoOption: [],
        hcAreaInfoFieldName: {
          text: "label",
          value: "value",
          children: "children",
        },
        bookName:'',
        queryParams: {
          pageNum: 1,
          pageSize: 100,
        },
        //账套列表
        bookVisbile:false,
        bookList:[],
        bookName:"",
        bookId:"",
        book:"",
      };
    },
    created() {
      getInfo().then(response => {
        this.bookName = response.user.bookName
        this.deptName = response.user.deptName
        Cookies.set("bookName", response.user.bookName, {
          expires: 30,
        });
        Cookies.set("deptName", response.user.deptName, {
          expires: 30,
        });
        Cookies.set("bookId", response.user.loginBookId, {
          expires: 30,
        });
        Cookies.set("deptId", response.user.loginDeptId, {
          expires: 30,
        });
        this.getBookList(response.user.loginDeptId);
      });

      treeselectByUser().then((res) => {
        if (res.code == 200) {
          this.hcAreaInfoOption = res.data;
        }
      });
      this.$set(this.queryParams, "systemType", '4');
    },
    methods: {
      //关闭选择地址弹窗
      hcAreaInfoClose() {
        this.villageVisbile = false;
      },
      hcAreaInfoFinish({ value, selectedOptions, tabIndex }) {
        // 切换部门
        let Depquery={"loginDeptID":value}
        changeDept(Depquery).then((response) => {
          if (response.code === 200) {
            this.$store.dispatch("GetInfo").then(() => {
              // this.$router.go(0);
              window.location.href = "/sunVillage_info/index";
            });
          }
        });
        this.villageVisbile = false;
      },
      getBookList(e){
        let params = {
          loginDeptID:e
        }
        listByDeptId(params).then((response) => {
          if (response.code == 200) {
            this.bookList = response.rows;
          }
        })
      },
      onConfirmBook(e){
        this.bookVisbile = false
        this.bookName = e.bookName
        let param={"loginBookId":e.id}
        changeBook(param).then((response) => {
          if (response.code === 200) {
            this.$store.dispatch("GetInfo").then(() => {
              // this.$router.go(0);
              window.location.href = "/sunVillage_info/index";
            });
          }
        });
      },
      onCancelBook(e){
        this.bookVisbile = false
      },
      logout(){
        logout().then(res => {
          this.$router.push({path:"/sunVillage_info/index_code",query:{bookId:Cookies.get('bookId'),deptId:Cookies.get('deptId')}})
        })
      },
      selectChange(val){
        console.log(val)
        val.index == 0 ? this.$router.push({path:"/sunVillage_info/user"}) : val.index == 1 ? this.$router.push({path:"/sunVillage_info/passWord"}) : val.index == 2 ? this.logout() : '';
      }
    },
  }
</script>
<style scoped lang="scss">
.home_wrapper{
    background: #f1f2f2;
    width: 100vw;
    min-height: 100vh;
    .head_main{
        height: 340px;
        background: url('../../assets/images/sunVillage_info/index_head.png') no-repeat;
        background-size: 100% 100%;
        position: relative;
        .location{
            height: 42px;
            line-height: 42px;
            position: absolute;
            left: 38px;
            top: 72px;
            display: flex;
            .address{
                padding:0 18px;
                background:rgba(255,255,255,0.75);
                border-radius: 42px;
                font-size: 28px;
                color: #3f3d56;
                margin-right: 12px;
                display: flex;
                align-items:center;
                .icon{
                    display: block;
                    width: 20px;
                    height: 26px;
                    background: url('../../assets/images/sunVillage_info/index_icon_1.png') no-repeat;
                    background-size: 100% 100%;
                    margin-right: 10px;
                }
            }
        }
        /deep/ .van-popover__wrapper{
          position: absolute;
          top: 64px;
          right: 36px;
        }
        .exit_btn{
            width: 61px;
            height: 61px;
            /*background: #3f3d56;*/
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            /*position: absolute;*/
            /*top: 64px;*/
            /*right: 36px;*/
            .icon{
                width: 100%;
                height: 100%;
                background: url('../../assets/images/sunVillage_info/login_head_h.png') no-repeat;
                background-size: 100% 100%;
            }
        }
    }
    .index_info{
        padding-top: 4.1vh;
        .title{
            width: 521px;
            height: 52px;
            background: url('../../assets/images/sunVillage_info/index_title.png') no-repeat;
            background-size: 100% 100%;
            margin:0 auto;
        }
        .nav_list{
            margin-top: 6vh;
            padding:0 38px;
          &:nth-child(3){
            margin-top: 3vh;
          }
          .van-cell{
            background: transparent;
          }
          .nav_list_box{
            display: flex;
            flex-flow: wrap;
            box-shadow: 0px 0px 18px rgba(63,68,75,0.2);
            padding: 0 0 20PX;
            border-radius: 15PX;
            overflow: hidden;
          }
          .nav_box{
            box-shadow: 0px 0px 18px rgba(63,68,75,0.2);
            margin-bottom: 40PX;
            border-radius: 15PX;
            overflow: hidden;
            /deep/ .van-grid-item__content{
              background: transparent;
              padding-top: 0;
            }
          }
          .nav_item{
                width: 25%;
                /*height: 180px;*/
                border-radius: 30px;
                font-size: 24px;
                color: #3f3d56;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                padding-top: 100px;
                &.n_1{
                    background: url('../../assets/images/sunVillage_info/index_block_01.png') no-repeat center top;
                    background-size: 50%;
                    margin-bottom: 20PX;
                }
                 &.n_2{
                    background: url('../../assets/images/sunVillage_info/index_block_02.png') no-repeat center top;
                    background-size: 50%;
                    margin-bottom: 20PX;
                }
                &.n_3 {
                    background: url('../../assets/images/sunVillage_info/index_block_03.png') no-repeat center top;
                    background-size: 50%;
                    margin-bottom: 20PX;
                }
                &.n_4 {
                    background: url('../../assets/images/sunVillage_info/index_block_04.png') no-repeat center top;
                    background-size: 50%;
                    margin-bottom: 20PX;
                }
                &.n_5 {
                    background: url('../../assets/images/sunVillage_info/index_block_05.png') no-repeat center top;
                    background-size: 50%;
                }
                &.n_6 {
                    background: url('../../assets/images/sunVillage_info/index_block_06.png') no-repeat center top;
                    background-size: 50%;
                }
                &.n_7 {
                    background: url('../../assets/images/sunVillage_info/index_block_07.png') no-repeat center top;
                    background-size: 50%;
                }
                &.n_8 {
                    background: url('../../assets/images/sunVillage_info/index_block_08.png') no-repeat center top;
                    background-size: 50%;
                }
            }
          .icon{
            padding: 15px;
            border-radius: 10px;
            box-sizing: border-box;
            width: 80px;
            height: 80px;
            text-align:center;
          }
          .icon img{
            width:50px;
          }
        }
    }
    .footer{
      width: 100%;
      font-size: 22px;
      color: #3f3d56;
      text-align: center;
      padding-bottom: 25PX;
    }
}
</style>