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" :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">{{ item.identity }}</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.houseNum }}</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.fund}}</view>
				</view>
			</view>
		</view>
		<view class="btn">去抵扣物业账单</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">取消</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,
} from '../../../utils';

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


export default {
	data() {
		return {
			top: '',
			moeny: '0.00',
			show: false,
			ownerDesc: '本房产的物业公积金为该房产的所有成员物业公积金总和。无需经过成员同意便可用于本房产的物业费抵扣，一旦成功抵扣，成员所拥有的物业公积金将自动进行扣除。',
			desc: '物业公积金可通用至您加入的所有房产，任一房产的物业相关费用均可用该物业公积金抵扣。',
			defaultName: '',
			list: [
				{
					name: '高尚',
					identity: '业主',
					mobile: '15931111111',
					houseNum: '9',
					fund: '50.00',
					popupShow: false
				},
				{
					name: '李明',
					identity: '家属',
					mobile: '15931111122',
					houseNum: '6',
					fund: '50.00',
					popupShow: false
				},
				{
					name: '王五',
					identity: '租户',
					mobile: '15931111316',
					houseNum: '2',
					fund: '50.00',
					popupShow: false
				}
			],
			houseList: [
				{
					name: '2323世纪名城1号楼1单元101室',
					checked: false,
				},
				{
					name: '2323世纪名城1号楼1单元102室',
					checked: false,
				},
				{
					name: '2323世纪名城1号楼1单元103室',
					checked: false,
				},
				{
					name: '2323世纪名城1号楼1单元104室',
					checked: false,
				},
				{
					name: '2323世纪名城1号楼1单元105室',
					checked: false,
				},
				{
					name: '2323世纪名城1号楼1单元201室',
					checked: false,
				},
				{
					name: '2323世纪名城1号楼1单元202室',
					checked: false,
				},
				{
					name: '2323世纪名城1号楼1单元203室',
					checked: false,
				},
			]
		}
	},
	onLoad(options) {
		this.defaultName = {
			...this.houseList[0],
			checked: true
		};
		const meun = menuButtonInfo();
		this.top = meun.height + meun.top;
	},


	methods: {
		headerConfirmClick(item) {
			this.defaultName = {
				...item,
				checked: true
			};
			this.show = false;
		},
		headerSwitchClick() {
			this.show = true;
			const newRes = this.houseList.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[ind].popupShow = !this.list[ind].popupShow
		},

		close() {
			this.show = false;
		},
	},
}
</script>

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

</style>