uniapp-ZHSQ/packages/community/providentFund/index.vue

<template>
  <view class="container">
    <u-navbar
      title=" "
      leftIconSize="20px"
      leftIconColor="#FFFFFF"
      bgColor="transparent"
      :autoBack="true"
    />
    <view class="container_body" :style="{ paddingTop: top + 'px' }">
      <view class="title">物业费</view>
      <view class="title_bottom">
        <view>￥{{ getTotal(list.owners) }}</view>
        <u-icon
          name="info-circle"
          size="30rpx"
          color="linear-gradient( 180deg, #FFFFFF 0%, #FFD7D7 100%);"
        />
      </view>
      <view class="name" @click="headerSwitchClick">
        <text>{{ defaultName.name }}</text>
        <u-icon name="arrow-right" color="#FFFFFF" size="30rpx" />
      </view>
    </view>
    <view class="main">
      <view
        class="person_info"
        v-for="(item, index) in list.owners"
        :key="index"
      >
        <view class="item">
          <view class="label">姓名</view>
          <view class="desc">{{ item.name }}</view>
        </view>
        <view class="item">
          <view class="label">身份</view>
          <view class="desc" v-if="item.type == 1">业主</view>
          <view class="desc" v-if="item.type == 2">家属</view>
          <view class="desc" v-if="item.type == 3">租户</view>
          <view class="desc" v-if="item.type == 4">访客</view>
        </view>
        <!-- <view class="item">
					<view class="label">手机号</view>
					<view class="desc">{{item.mobile}}</view>
				</view> -->
        <view class="item">
          <view class="label">房产总数</view>
          <view class="desc">{{ item.count_of_rooms }}</view>
        </view>
        <view class="item">
          <view class="label fix">
            <text>物业费总余额</text>
            <u-icon
              name="info-circle-fill"
              size="30rpx"
              color="red"
              @click="headerIconClick(index)"
            />
            <view
              class="popup"
              v-if="item.popupShow"
              @click="headerIconClick(index)"
            >
              {{ item.identity == "业主" ? ownerDesc : desc }}
              <view class="angle"></view>
            </view>
          </view>
          <view class="desc">￥{{ item.property_fund_balance }}</view>
        </view>
      </view>
    </view>
    <view class="btn" @click="goPay">去抵扣物业账单</view>

    <u-popup :show="show" :round="50" @close="close">
      <view class="select_Popup">
        <view class="header">
          <view></view>
          <view class="title">选择房源</view>
          <view class="close" @click="close">取消</view>
        </view>
        <view class="line"></view>
        <view class="main">
          <view
            class="item"
            v-for="(item, index) in houseList"
            :key="index"
            @click="headerConfirmClick(item)"
          >
            <text>{{ item.name }}</text>
            <image
              v-if="item.checked"
              class="pic"
              src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/community_providentFund_Group_1444.png"
              mode="scaleToFill"
            />
            <image
              v-else
              class="pic"
              src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/community_providentFund_Ellipse_160.png"
              mode="scaleToFill"
            />
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  request,
  picUrl,
  uniqueByField,
  menuButtonInfo,
  NavgateTo,
} from "../../../utils";

import { apiArr } from "../../../api/v2Community";

export default {
  data() {
    return {
      top: "",
      moeny: "0.00",
      show: false,
      ownerDesc:
        "本房产的物业费为该房产的所有成员物业费总和。无需经过成员同意便可用于本房产的物业费抵扣，一旦成功抵扣，成员所拥有的物业费将自动进行扣除。",
      desc: "物业费可通用至您加入的所有房产，任一房产的物业相关费用均可用该物业费抵扣。",
      defaultName: "",
      list: [],
      houseList: [],
      roomList: [],

      itemObj: '',
    };
  },
  async onLoad(options) {
    if (options.item) {
      this.itemObj = JSON.parse(decodeURIComponent(options.item));
      this.defaultName = {
        ...this.itemObj,
        checked: true,
      };
    } else {
      this.defaultName = {
        ...this.houseList[0],
        checked: true,
      };
    }
	console.log(this.itemObj)
    const meun = menuButtonInfo();
    this.top = meun.height + meun.top;
    await this.getRoomList();
    await this.getInfo();
  },

  methods: {
    // 计算总金额
    getTotal(owners) {
      return owners.reduce((total, owner) => total + owner.property_fund_balance, 0).toFixed(2);
    },
    headerConfirmClick(item) {
      this.defaultName = {
        ...item,
        checked: true,
      };
      this.show = false;
      this.getInfo();
    },
    //选择房产
    headerSwitchClick() {
      this.show = true;
      const newRes = this.roomList.map((item) => {
        if (item.name === this.defaultName.name) {
          return {
            ...item,
            checked: true,
          };
        }
        return {
          ...item,
          checked: false,
        };
      });
      console.log("newResnewRes", newRes);
      this.houseList = newRes;
    },
    // 业主点击弹出层
    headerIconClick(ind) {
      this.list.owners[ind].popupShow = !this.list.owners[ind].popupShow;
    },
    close() {
      this.show = false;
    },

    async getRoomList() {
      await request(apiArr.getCommunityList, "POST", {
        page_num: 1,
        page_size: 50,
        community_id: uni.getStorageSync("changeCommData").id,
      }).then((res) => {
        res.rows.forEach((item) => {
          item.checked = false;
        });
        this.roomList = res.rows;
        if (!this.itemObj) {
          this.defaultName = res.rows[0];
        }
      });
    },
    async getInfo() {
      await request(apiArr.getGovernmentByRoom, "POST", {
        room_id: this.defaultName.room_id,
      }).then((res) => {
        res.owners.forEach((item) => {
          item.popupShow = false;
        });
        this.list = res;
      });
    },
    goPay() {
      NavgateTo("../propertyPayment/index");
    },
  },
};
</script>

<style lang="scss">
@import "./index.scss";
</style>