qimall/addons/BusinessCard/backend/views/card/card-info.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        
    <div slot="header">
        <span>卡片详情</span>
    </div>
        <div class="form_box">
            <el-form  ref="form" :model="form" label-width="150px" size="small" v-loading="loading">
                <el-card   shadow="never">
                    <el-descriptions class="margin-top" title="" :column="3" :size="size" border>
                        <el-descriptions-item label="头像">
                            <el-image mode="aspectFill" style="width: 50px;height: 50px;" :src="form.avatar_url?form.avatar_url:'/resources/img/common/default-avatar.png'"></el-image>
                        </el-descriptions-item>
                        <el-descriptions-item label="姓名">{{form.nickname}}</el-descriptions-item>
                        <el-descriptions-item label="部门">{{form.department_name}}</el-descriptions-item>
                        <el-descriptions-item label="职位">{{form.position_name}}</el-descriptions-item>
                        <el-descriptions-item label="性别">
                            <div>
                                <span v-if='form.sex == 1'>男</span>
                                <span v-else-if='form.sex == 2'>女</span>
                                <span v-else>-</span>
                            </div>
                        </el-descriptions-item>
                        <el-descriptions-item label="生肖">
                            <div>
                                <span v-if='form.zodiac'>{{form.zodiac}}</span>
                                <span v-else>-</span>
                            </div>
                        </el-descriptions-item>
                        <el-descriptions-item label="婚姻状态">
                            <div>
                                <span v-if='form.marry_status == 1'>已婚</span>
                                <span v-else-if='form.marry_status == 2'>未婚</span>
                                <span v-else-if='form.marry_status == 3'>保密</span>
                                <span v-else>-</span>
                            </div>
                        </el-descriptions-item>
                        <el-descriptions-item label="活跃城市">
                            <div>
                                <span v-if='form.active_city'>{{form.active_city}}</span>
                                <span v-else>-</span>
                            </div>
                        </el-descriptions-item>
                        <el-descriptions-item label="从事过的行业">
                            <div v-if="form.industry.length > 0">
                                <el-tag v-for="industry in form.industry" style="margin-right:3px;">{{industry.name}}</el-tag>
                            </div>
                            <div v-else>-</div>
                        </el-descriptions-item>
                        <el-descriptions-item label="身份标签">
                            <div v-if="form.identity_tags.length > 0">
                                <el-tag v-for="identity in form.identity_tags">{{identity.name}}</el-tag>
                            </div>
                            <div v-else>-</div>
                        </el-descriptions-item>
                        <el-descriptions-item label="我提供的人脉资源" :span="2">
                            <div v-if="form.supply_resources.length > 0">
                                <el-tag v-for="supply in form.supply_resources" style="margin-right:3px;">{{supply.name}}</el-tag>
                            </div>
                            <div v-else>-</div>
                        </el-descriptions-item>
                        <el-descriptions-item label="最高学历">
                            <div v-if="form.education.length > 0">
                                <el-tag v-for="education in form.education">{{education.name}}</el-tag>
                            </div>
                            <div v-else>-</div>
                        </el-descriptions-item>
                        <el-descriptions-item label="我需要的人脉资源" :span="2">
                            <div v-if="form.need_resources.length > 0">
                                <el-tag v-for="need in form.need_resources" style="margin-right:3px;">{{need.name}}</el-tag>
                            </div>
                            <div v-else>-</div>
                        </el-descriptions-item>
                        <el-descriptions-item label="邮箱">{{form.email}}</el-descriptions-item>
                        <el-descriptions-item label="电话">{{form.mobile}}</el-descriptions-item>
                        <el-descriptions-item label="地址">{{form.address}}</el-descriptions-item>
                        <el-descriptions-item label="公司名称">{{form.company}}</el-descriptions-item>
                        <el-descriptions-item label="座机">{{form.phone ? form.phone : '-'}}</el-descriptions-item>
                        <el-descriptions-item label="微信号">{{form.wechat ? form.wechat : '-'}}</el-descriptions-item>
                        <el-descriptions-item label="微信码">
                            <div>
                                <span v-if='form.wechat_code'><img :src="form.wechat_code" alt="" style="width:100px;"></span>
                                <span v-else>-</span>
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>
            
                <el-card style="margin-top: 10px;" shadow="never">
                    <div slot="header" class="clearfix">
                        <div class="card-title">详细信息</div>
                    </div>

                    <el-descriptions class="margin-top"  :column="3" border>
                        <el-descriptions-item label="个人标签" :span="3" label-class-name="my-label">
                            <div  v-if="form.tags.length > 0">
                                <el-tag v-for="(item,index) in form.tags" :key="index" effect="plain" style="margin: 0 10px 10px 0">{{item}}</el-tag>
                            </div>
                            <div  v-else>
                                -
                            </div>
                        </el-descriptions-item>
                        <el-descriptions-item label="个性简介" :span="3" label-class-name="my-label">
                            <template >
                                <div style="width: 500px;">{{form.sign}}</div>
                            </template>
                        </el-descriptions-item>
                        <el-descriptions-item label="图片简介(多张)" :span="3" label-class-name="my-label">
                            <div flex="dir:left">
                                <template v-if="form.images">
                                    <div v-for="(item,index) in form.images" :key="index"
                                            style="margin-right: 20px;position: relative;cursor: move;">
                                            <el-image :preview-src-list="form.images" v-if="item" mode="aspectFill" style="width: 100px;" :src="item"></el-image>

                                    </div>
                                </template>
                            </div>
                        </el-descriptions-item>
                        <!-- <el-descriptions-item label="视频简介" style="display: none;">
                            <video width="30%" height="30%" v-if="form.video" :src="form.video" controls="controls"></video>
                        </el-descriptions-item> -->
                    </el-descriptions>
                </el-card>
            </el-form>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            loading: false,
            id: "<?=$id?>",
            form: {
                avatar_url: '',
                nickname: '',
                department_name: '',
                position_name: '',
                phone: '',
                email: '',
                mobile: '',
                address: '',
                company: '',
                sign: '',
                video: '',
                tags: [],
                url: []
            }
        },
        mounted() {
            this.send('getData');
        },
        methods: {
            send(type, param1 = null) {
                switch (type){
                    case 'getData':
                        this.loading = true;
                        request({
                            params: {r: 'business-card/card/card-info', id: this.id}
                        }).then(e=>{
                            if (e.data.code === 0) {
                                this.form = e.data.data;
                            }
                            this.loading = false;
                        }).catch(e=>{
                            this.loading = false;
                            this.$message.error(e.data.msg);
                        })
                        break;
                }
            }
        }
    })
</script>
<style>
    .my-label{
        width:150px;
    }
</style>