epmet-work-pc-chengyang/src/views/dataBoard/cpts/resi-details.vue

<template>
	<popup title="居民详情" @close="handleClose">
		<template v-slot:cnt>
			<div class="m-info">
				<div class="subtitle">
					<i class="i-chunk"></i>
					<span>基本信息</span>
					<i class="i-line"></i>
				</div>
				<div class="row">
					<div class="item">
						<div class="field">所属网格：</div>
						<div class="value">
							{{ info.community + " - " + info.grid }}
						</div>
					</div>
					<div class="item">
						<div class="field">所属房屋：</div>
						<div class="value">
							{{
								info.village +
								" - " +
								info.building +
								" - " +
								info.unit +
								" - " +
								info.room
							}}
						</div>
					</div>
					<div class="item">
						<div class="field">本地户籍：</div>
						<div class="value">{{ info.census_type }}</div>
					</div>
				</div>
				<div class="row">
					<div class="item">
						<div class="field">居民姓名：</div>
						<div class="value">{{ info.name }}</div>
					</div>
					<div class="item">
						<div class="field">出生日期：</div>
						<div class="value">{{ info.birthday }}</div>
					</div>
					<div class="item">
						<div class="field">性别：</div>
						<div class="value">{{ info.gender }}</div>
					</div>
					<div class="item">
						<div class="field">民族：</div>
						<div class="value">{{ info.ethnic }}</div>
					</div>
					<div class="item">
						<div class="field">联系电话：</div>
						<div class="value">{{ info.telephone }}</div>
					</div>
					<div class="item">
						<div class="field">证件号：</div>
						<div class="value">{{ info.idcard }}</div>
					</div>
					<div class="item">
						<div class="field">备注：</div>
						<div class="value">{{ info.resident_remark }}</div>
					</div>
				</div>

				<div class="subtitle">
					<i class="i-chunk"></i>
					<span>分类信息</span>
					<i class="i-line"></i>
				</div>

				<div class="row">
					<div class="item">
						<div class="field">居民分类：</div>
						<div class="value">
							<div class="u-categorys">
								<span v-if="info.crowd">党员</span>
								<span v-if="info.mlsp">低保人员</span>
								<span v-if="info.srs">保障房人员</span>
								<span v-if="info.unemployed">失业人员</span>
								<span v-if="info.woca">育龄妇女</span>
								<span v-if="info.exs">退役军人</span>
								<span v-if="info.ufs">统战人员</span>
								<span v-if="info.petitioner">信访人员</span>
								<span v-if="info.volunteer">志愿者</span>
								<span v-if="info.in_person">失独人员</span>
								<span v-if="info.tenant">租户</span>
								<span v-if="info.float_popu">流动人口</span>
								<span v-if="info.special_popu">特殊人群</span>
								<span v-if="info.aaaa">独居老人</span>
								<span v-if="info.empty_nest">空巢老人</span>
								<span v-if="info.disability">失能老人</span>
								<span v-if="info.dementia">失智老人</span>
								<span v-if="info.adisability">残疾</span>
								<span v-if="info.ser_ill">大病</span>
								<span v-if="info.ncd">慢病</span>
							</div>
						</div>
					</div>
				</div>

				<div class="subtitle">
					<i class="i-chunk"></i>
					<span>其他信息</span>
					<i class="i-line"></i>
				</div>

				<div class="m-tabs">
					<div
						class="tab-btn"
						@click="subStartTabIndex"
						v-if="tabList.length > 7"
					>
						<img
							src="@/assets/img/shuju/people/arrow-double-left.png"
						/>
					</div>
					<div
						v-show="
							index >= startTabIndex && index < startTabIndex + 7
						"
						class="tab"
						:class="
							currentTabIndex % tabList.length == index
								? 'z-on'
								: ''
						"
						:key="'tab' + index"
						@click="currentTabIndex = index"
						v-for="(item, index) in tabList"
					>
						{{ item }}
					</div>
					<div
						class="tab-btn"
						@click="addStartTabIndex"
						v-if="tabList.length > 7"
					>
						<img
							src="@/assets/img/shuju/people/arrow-double-right.png"
						/>
					</div>
				</div>

				<div v-if="currentTab == '教育信息'">
					<div class="row">
						<div class="item">
							<div class="field">文化程度：</div>
							<div class="value">{{ info.education }}</div>
						</div>
						<div class="item">
							<div class="field">备注：</div>
							<div class="value">{{ info.education_remark }}</div>
						</div>
					</div>
				</div>
			</div>
		</template>
	</popup>
</template>

<script>
import popup from "@/views/dataBoard/cpts/popup";
import { requestPostBi } from "@/js/dai/request-bipass";

export default {
	name: "residentDetails",
	props: {
		resiId: {
			type: String,
			default: "",
		},
	},

	components: { popup },

	data() {
		return {
			info: {
				woca: true,
				exs: false,
				srs: true,
				household: "--",
				holdingrel: "--",
				ethnic: "--",
				community: "--",
				user_id: "--",
				census_type: "--",
				aged: true,
				spouse: "--",
				mlsp: false,
				ncp: true,
				disable_idcard: "--",
				volunteer: false,
				village: "--",
				disable_degree: "--",
				marital: "--",
				native_place: "--",
				disable_type: "--",
				building: "--",
				disable_remark: "--",
				skill: "--",
				petitioner: true,
				unemployed: true,
				needs_group: "--",
				hobby: "--",
				unit: "--",
				gender: "--",
				retire_income: "--",
				workunit: "--",
				ufs: false,
				birthday: "--",
				in_person: false,
				adisability: false,
				household_remark: "--",
				belief: "--",
				education_remark: "--",
				education: "--",
				residence_current: "--",
				career: "--",
				empty_nest: false,
				idcard: "--",
				room: "--",
				guardian: "--",
				tenant: true,
				residence: "--",
				supporters: "--",
				ser_ill: false,
				ncd: true,
				belief_remark: "--",
				dementia: false,
				disability: true,
				telephone: "--",
				income: "--",
				native: "--",
				crowd: false,
				resident_remark: "--",
				hobby_remark: "--",
				retire_remark: "--",
				special_popu: true,
				street: "--",
				float_popu: true,
				supporters_relation: "--",
				name: "--",
				grid: "--",
				retire_date: "--",
			},

			currentTabIndex: 0,
			startTabIndex: 0,
			tabList: [
				"教育信息",
				"兴趣爱好",
				"宗教信仰",
				"健康信息",
				"工作信息",
				"经济状况",
				"居住信息",
				"家庭信息",
			],
		};
	},

	computed: {
		currentTab() {
			return this.tabList[this.currentTabIndex];
		},
	},

	mounted() {
		this.getApiData();
	},

	methods: {
		addStartTabIndex() {
			const { startTabIndex, tabList } = this;
			if (startTabIndex < tabList.length - 7) {
				this.startTabIndex = startTabIndex + 1;
			} else {
				this.startTabIndex = tabList.length - 7;
			}
		},
		subStartTabIndex() {
			const { startTabIndex, tabList } = this;
			if (startTabIndex > 0) {
				this.startTabIndex = startTabIndex - 1;
			} else {
				this.startTabIndex = 0;
			}
		},

		handleClose() {
			this.$emit("close");
		},

		async getApiData() {
			this.getInfo();
		},

		// 根据房屋id获取详情
		async getInfo() {
			const url = "resident_info";

			const { data, code, msg } = await requestPostBi(
				url,
				{
					queryParam: {
						resident_id: this.resiId,
					},
				},
				{
					mockId: 60069644,
				}
			);

			if (code === 0) {
				this.info = { ...this.info, ...data[0] };
			} else {
				this.$message.error(msg);
			}
		},
	},
};
</script>

<style lang="scss" src="@/assets/scss/dataBoard/popup-info.scss" scoped></style>
<style lang="scss" scoped>
@import "~@/assets/scss/c/config.scss";
@import "~@/assets/scss/c/function.scss";

.u-categorys {
	display: flex;
	flex-wrap: wrap;

	span {
		display: block;
		width: 90px;
	}
}

.m-tabs {
	margin-top: 30px;
	display: flex;
	align-items: center;
	padding-left: 20px;

	.tab-btn {
		width: 30px;
		text-align: center;
		cursor: pointer;
	}

	.tab {
		@include toe;
		margin: 0 5px;
		min-width: 72px;
		padding: 0 8px;
		height: 24px;
		box-shadow: inset 0px 0px 12px 0px rgba(26, 149, 255, 0.45);
		border-radius: 2px;
		border: 1px solid #1a95ff;
		border-radius: 2px;
		text-align: center;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		line-height: 23px;
		cursor: pointer;
		transition: all ease 0.5s;
		&.z-on {
			background: linear-gradient(90deg, #1a5afd, #009cff);
			box-shadow: none;
		}
	}
}
</style>