detail.vue 2.5 KB
<template>
	<view class="mainbox">
		<view class="photobox">
			<image class="photo" v-if="form.photo" :src="config.fileUrl_api + form.photo" mode='widthFix'></image>
			<view class="colorful" v-else>{{form.name?.slice(0,1)}}</view>

		</view>
		<uni-list>
			<uni-list-item title="姓名" :rightText="form.name"/>
			<uni-list-item title="证件类型" :rightText="cardType?.[form?.idcType]?.label" />
			<uni-list-item title="证件号" :rightText="form.idcCode"/>
			<uni-list-item title="性别" :rightText="form.sex==0?'男':'女'"/>
			<uni-list-item title="会员编号" :rightText="form.perCode"/>
			<uni-list-item title="所属一级协会" :rightText="form.topAssName"/>
			<uni-list-item title="所属地区协会" :rightText="form.areaAssName"/>
			<uni-list-item title="注册团体会员" :rightText="form.memName"/>
			<uni-list-item title="缴费日期" :rightText="form.payDate"/>
			<uni-list-item title="出生日期" :rightText="form.birth?.slice(0,10)"/>
			<uni-list-item title="手机号码" :rightText="form.phone"/>
			<uni-list-item title="所在地区" :rightText="form.cityId"/>
			<uni-list-item title="详细地址" :rightText="form.address"/>
		</uni-list>

	</view>
</template>

<script setup>
		import * as api from '@/common/api.js'
		import config from '@/config.js'
	import {
		onLoad,onShow
	} from '@dcloudio/uni-app';
	import {ref } from 'vue'
	const cardType = ref([
	  { label: '身份证', value: '0' },
	  { label: '港澳台通信身份证 ', value: '1' },
	  { label: '中国护照', value: '2' },
	  { label: '外国护照', value: '3' }
	])
	const form = ref({})
	onLoad((option)=>{
		console.log(option)
		
		api.getInfo(option.perId).then(res=>{
			form.value = res.data
			  form.value.topAssName = form.value?.ancestorNameList?.[0]
			  form.value.areaAssName = form.value?.ancestorNameList?.[1]
			  form.value.memName = res.data.memName
		})
	})
	
	
</script>

<style scoped lang="scss">
	.mainbox{margin: 30rpx 25rpx;padding: 1px;
background: #FFFFFF;
border-radius: 15rpx;
	:deep(.uni-list-item__content-title){color: #4C5359;font-size: 30rpx;
font-weight: 300;}
	:deep(.uni-list-item__extra-text){color: #000;
font-size: 30rpx;}
}
.photobox{position: relative;margin: 30rpx auto;
	.photo{width: 210rpx;height: 280rpx;background-color: #f4f4f4;display: block;margin: auto;}
}
	.colorful {background-color: #007BDA;
		width: 200rpx;
		margin: auto;
		height: 200rpx;
		line-height: 200rpx;
		font-size: 44rpx;
		color: #fff;
		text-align: center;
		border-radius: 50%;
	}
</style>