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">
                    <u-icon name="phone-fill" color="#DD4250" size="28"></u-icon>
                    <view class="m-l-20 m-r-20" @tap.stop="makePhoneCall(item.tel)">{{ item.newTel }}</view>
                    <view @click="phoneNumSwitch">
                        <u-icon name="eye-fill" color="#DD4250" size="32" v-if="item.tel != item.newTel"></u-icon>
                        <u-icon name="eye-off" color="#DD4250" size="32" v-else></u-icon>
                    </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
                    });
                }
            },
            //隐藏手机号
            phoneNumHide() {
                let number = this.item.tel; //获取到手机号码字段
                let mphone = number.substring(0, 3) + '****' + number.substring(7);
                this.item.newTel = mphone
            },
            phoneNumSwitch() {
                let number = this.item.tel
                if (this.item.newTel == number) {
                    this.phoneNumHide()
                } else {
                    this.item.newTel = number
                }
                this.$forceUpdate();
            },
            async getCategoryFun() {
                const {
                    status,
                    data
                } = await getTalentsDetail({
                    id: this.id
                });
                if (status == 1) {
                    this.item = data
                    this.phoneNumHide()
                }
            },
        },
        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>