talent_map/uniapp/pages/talents/detail.vue

<template>
	<view>
		<!-- 头部 -->
		<view class="bg-white  header flex row-center">
			<u-icon name="file-text-fill" color="#DD4250" size="32"></u-icon>
			<view class="cate-title m-l-10">{{ item.title }}<u-tag :text="item.module" type="error" size="mini" shape="circleRight" /></view>
		</view>
		<!-- 基本信息 -->
		<view class="talents-item m-t-16">
			<view class="flex">
				<u-icon name="info-circle-fill" color="#DD4250" size="28"></u-icon>
				<view class="m-l-20">基本信息</view>
			</view>
			<view class="m-t-16 item-info">
				<!-- 人才 -->
				<block v-if="item.module == 'talent' || item.module == 'pedigree'">
					<view class="m-t-16">姓名：{{ item.title }}</view>
				</block>
				<block v-else>
					<view class="m-t-16">名称：{{ item.title }}</view>
				</block>
				<view class="m-t-16" v-if="item.company">单位：{{ item.company }}</view>
				<view class="m-t-16" v-if="item.position">职位：{{ item.position }}</view>
				<view class="m-t-16" v-if="item.module == 'base'">负责人：{{ item.principal }}</view>
				<view class="m-t-16" v-if="item.module == 'pedigreeCompany'">法人：{{ item.principal }}</view>
				<view class="m-t-16" v-if="item.module == 'firm'">秘书长：{{ item.principal }}</view>
				
				<view class="flex m-t-16" @tap.stop="makePhoneCall(item.tel)">
					<u-icon name="phone-fill" color="#DD4250" size="28"></u-icon>
					<view class="m-l-20">{{ item.tel }}</view>
				</view>
				<view class="flex m-t-16">
					<u-icon name="map-fill" color="#DD4250" size="28"></u-icon>
					<view class="m-l-20">{{ item.city }}{{ item.address }}</view>
				</view>
			</view>
		</view>
		<!-- 简介信息 -->
		<view class="talents-item m-t-16">
			<view class="flex">
				<u-icon name="file-text-fill" color="#DD4250" size="28"></u-icon>
				<text class="m-l-20"></text>
				<text v-if="item.module == 'talent'">研究领域：</text>
				<text v-else-if="item.module == 'base'">基地特色：</text>
				<text v-else-if="item.module == 'university' || item.module == 'association'">研究方向：</text>
				<text v-else-if="item.module == 'fund'">投资产业领域：</text>
				<text v-else-if="item.module == 'pedigreeCompany'">主要产品：</text>
				<text v-else-if="item.module == 'pedigree'">个人简介：</text>
				<text v-else>简介：</text>
			</view>
			<view class="m-t-16 item-info">
				<rich-text :nodes="item.intro"></rich-text>
			</view>
		</view>




	</view>
</template>

<script>
	import {
		mapActions,
		mapGetters
	} from 'vuex'
	import {
		getTalentsDetail
	} from '@/api/app';
	export default {
		data() {
			return {
				statusBarHeight: 0,
				id: 0, //分类id
				item: {
					title: ''
				}
			};
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight;
				}
			});
		},
		onLoad() {
			this.id = this.$Route.query.id;
			this.getCategoryFun()
		},
		onShow() {
			this.getUser();
		},
		methods: {
			...mapActions(['getUser']),
			makePhoneCall(tel) {
				if (tel) {
					uni.makePhoneCall({
						phoneNumber: tel
					});
				}
			},
			async getCategoryFun() {
				const {
					status,
					data
				} = await getTalentsDetail({
					id: this.id
				});
				if (status == 1) {
					this.item = data
				}
			},
		},
		computed: {
			...mapGetters(['appConfig']),
		}
	};
</script>
<style lang="scss">
	.header {
		padding: 30rpx;

		.cate-title {
			font-size: 32rpx;
			font-weight: 400;
		}
	}

	.talents-item {
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 16rpx 2rpx rgba(0, 0, 0, 0.03);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 30rpx;
		font-size: 28rpx;

		.item-info {
			padding: 20rpx;
			background: #F7F8FA;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}
</style>