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>￥{{ moeny }}</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:[]
		}
	},
	async onLoad(options) {
		this.defaultName = {
			...this.houseList[0],
			checked: true
		};
		const meun = menuButtonInfo();
		this.top = meun.height + meun.top;
		await this.getRoomList()
		await this.getInfo()
	},


	methods: {
		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
				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>