wjxxy_xcx/pages/home/wjy.vue

<template>
	<ComponentLoading class="outer" :loading="loading">
		<view class="top-img">
			<!-- <WindowTop title="物建员"></WindowTop> -->
			<view class="d_z">{{param.sqjcwhmc}}{{param.mlph}}{{param.ldph}}</view>
			<Tab ref="tab" :tabList="tabList" @tab-click="tabClick"></Tab>
			<view class="wjy_body">
				<view class="card" v-for="(item) in tableList" :key="item.id">
					<view class="c_i">
						<view class="c_l">姓名</view>
						<view class="c_v">{{ item.xm }}</view>
					</view>
					<view class="c_i">
						<view class="c_l">身份证号</view>
						<view class="c_v">{{ item.sfzh }}</view>
					</view>
					<view class="c_i">
						<view class="c_l">联系方式</view>
						<view class="c_v">{{ item.lxfs }}</view>
					</view>
					<view class="b_b">
						<view></view>
						<view class="btn" @click="view(item.id)">查 看</view>
					</view>
				</view>
			</view>
			<image :src="btn_new_72" class="add_img" @click="add" v-if="dyh && ldId"></image>
		</view>
	</ComponentLoading>
</template>
<script>
	import {
		getLdDetail
	} from '@/api/wjxxy.js'
	import Tab from '@/components/tab/index'
	import WindowTop from '@/components/window-top/index'
	import ComponentLoading from '@/components/component-loading/index'
	import jsonBig from 'json-bigint-master'

	export default {
		components: {
			Tab,
			WindowTop,
			ComponentLoading
		},
		data() {
			return {
				tabList: [],
				tableList: [],
				ldId: '',
				dyh: '',
				btn_new_72: require('./img/btn_new_72.svg'),
				loading: false,
				param: {}
			}
		},
		onLoad(option) {
			const param = JSON.parse(option.param)
			this.param = param
			this.ldId = param.ldphxlh
		},
		onShow() {
			this.$nextTick(() => {
				this.getList()
			})
		},
		methods: {
			tabClick(param) {
				this.dyh = param.dyh
				this.tableList = param.xxyList.map(item => {
					if (typeof item.id == 'object') {
						item.id = item.id.c[0] + '' + item.id.c[1]
					}
					return item
				})
				// console.log('tableList', this.tableList)
			},
			add() {
				uni.navigateTo({
					url: `/pages/home/detail?type=add&ldId=${this.ldId}&dyh=${this.dyh}`
				})
			},
			getList() {
				this.loading = true

				getLdDetail(this.ldId).then(res => {
					const list = jsonBig.parse(res.data.dataList[0].fieldValues[0].value).data
					this.tabList = list
					
					// this.tableList = res
					this.$nextTick(() => {
						this.$refs.tab.show()
					})
				}).finally(() => {
					this.loading = false
				})
			},
			view(id) {
				uni.navigateTo({
					url: `/pages/home/detail?type=view&id=${id}`
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.outer {
		background-color: rgba(248, 248, 248, 1);
		height: 100vh;
		overflow-y: scroll;
		font-family: PingFangSC, PingFang SC;

		.top-img {
			width: 100%;
			background-image: url(./img/bj_blue.svg);
			background-repeat: repeat-x;
			// padding-top: 100rpx;
		}
	}

	.d_z {
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: rgba(255, 255, 255, 1);
	}

	.wjy_body {
		padding: 24rpx;
		height: calc(100vh - 200rpx);
	}

	.card {
		width: 100%;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 16rpx;
		padding: 24rpx 28rpx;
		font-size: 28rpx;
		margin: 16rpx 0;

		.c_i {
			height: 54rpx;
			display: flex;
		}

		.c_l {
			width: 200rpx;
			color: rgba(17, 17, 17, 1);
		}

		.c_v {
			color: rgba(102, 102, 102, 1);
		}

		.b_b {
			height: 80rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.btn {
			background-color: rgba(16, 109, 255, 1);
			border-radius: 8rpx;
			width: 160rpx;
			height: 64rpx;
			text-align: center;
			color: rgba(255, 255, 255, 1);
			font-weight: 600;
			line-height: 64rpx;
		}
	}

	.add_img {
		position: absolute;
		right: 24rpx;
		bottom: 48rpx;
		width: 144rpx;
		height: 144rpx;
	}
</style>