YXGJ/cloud/businessCard/index.vue

<template>
    <view class="self-card" :style="{'--height': tovw(+CustomBar+10)}">
        <view class="footer" :style="{ height: (tovw(CustomBar).replace('vw',''))*375 / 100+'px'}" style="background: linear-gradient( 225deg, #F43A50 0%, #C30D23 100%);top: 0;">
            <view class="custom" :style="{ height: (tovw(Custom.height).replace('vw',''))*375 / 100+'px', top:(tovw(Custom.top).replace('vw',''))*375 / 100+'px' }">
                <view v-if="userInfo.name">{{userInfo.name}}的名片</view>
                <view v-else>暂无信息</view>    
                <view class="back" :style="{ lineHeight: (tovw(Custom.height).replace('vw',''))*375 / 100+'px' }" @click="onBack">
                    <text class=" iconfont icon-a-wodetiaozhuan" />
                </view>
            </view>
        </view>
        <view class="head" :style="[{ height: tovw(+CustomBar+184) }]" style="background: linear-gradient( 225deg, #F43A50 0%, #C30D23 100%)">
            <view class="custom" :style="{ height: tovw(Custom.height), top: tovw(Custom.top - 3) }">
                <view v-if="userInfo.name">{{userInfo.name}}的名片</view>
                <view v-else>暂无信息</view>
                <view class="back" :style="{ lineHeight: tovw(Custom.height) }" @click="onBack">
                    <text class=" iconfont icon-a-wodetiaozhuan" />
                </view>
            </view>
            <image class="bg-bottom" mode="widthFix" src="/static/workbench/减去.svg">
            </image>
            <view class="card">
                <view class="header">
                    <view class="left">
                        <view class="title">
                            <text>{{ userInfo.name||'暂无' }}</text>
                            <text>{{ userInfo.rolenames||'暂无' }}</text>
                        </view>
                        <text class="phone">{{ userInfo.phonebumber||'暂无' }}</text>
                        <view class="redline"></view>
                    </view>
                    <navigator class="right">
                        <image :src="userInfo.headpic || 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404231713854678447B26b4363.svg'" mode="aspectFill">
                        </image>
                    </navigator>
                </view>
                <view class="bottom">
                    <view class="left">
                        <view>
                            <i class="iconfont icon-qiye-hui"></i>
                            <view class="text">{{ userInfo.enterprisename||'暂无' }}</view>
                        </view>
                        <view>
                            <i class="iconfont icon-youxiang"></i>
                            <view class="text">{{ userInfo.email ||'暂无' }}</view>
                        </view>
                        <view style="margin-bottom: 0 !important;">
                            <i class="iconfont icon-dizhi_xian"></i>
                            <view class="text u-line-2">{{ userInfo.address ||'暂无' }}</view>
                        </view>
                    </view>
                    <navigator class="right" :url="'/cloud/businessCard/share?id='+userid">
                        <image class="code" src="/static/workbench/二维码.svg" />
                        <text>名片码</text>
                    </navigator>
                </view>
            </view>
        </view>
        <view class="card-handle">
            <view class="top">
                <view class="left">
                    <view class="avatar">
                        <block v-for="item in userInfo.readusers">
                            <image :src="item.headpic||'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404231713854678447B26b4363.svg'" v-if="item.rowindex<4" :key="item.rowindex"/>
                        </block>
                        <text style="color:#BBBBBB">...</text>
                    </view>
                    <view class="readcount">浏览了{{ userInfo.count_read }}</view>
                </view>    
                <navigator url="#" class="right" @click="goodClick">
                    <i :class="['iconfont',userInfo.islike==1?' icon-yidianzan':' icon-weidianzan']" :style="{color:userInfo.islike?'#C30D23':'#666666'}"></i>
                    <text>点赞{{ userInfo.count_like}}</text>
                </navigator>
            </view>
            <view class="bottom">
                <view class="but" hover-class="navigator-hover" @click="copy">
                    <i class="iconfont icon-fuzhi" style="color: #C30D23;"></i>
                    复制电话
                </view>
                <view class="but" hover-class="navigator-hover" @click="shareClick">
                    <i class="iconfont icon-zhuanfa"></i>
                    转发名片
                </view>
            </view>
        </view>
        
        <view class="user-info">
            <text class="title-max">简介</text>
            <view class="tag-box">
                <text class="title-min">印象标签</text>
                <view class="tag-list" v-if="userInfo.tag.length">
                    <view class="tag" v-for="(item,index) in userInfo.tag" :key="index">{{ item }}</view>
                </view>
                <text v-else style="font-weight: 500;font-size: 14px;color: #666666;">暂无</text>
            </view>
            <view class="descript-box">
                <text class="title-min">自我介绍</text>
                <text class="descript">{{ userInfo.remarks || '暂无' }}</text>
            </view>
            <view class="image-box">
                <text class="title-min">照片墙</text>
                <block v-if="userInfo.images.length">
                    <view class="image" v-for="item in userInfo.images" :key="item.attachmentid" @click="preview(item.url)">
                        <u--image width="100%" :lazy-load="true" :src="item.url" radius="5"></u--image>
                    </view>
                </block>
                <text v-else style="font-weight: 500;font-size: 14px;color: #666666;">暂无</text>
            </view>
        </view>

        <view class="footer">
            <navigator class="but" :url="'/cloud/businessCard/edit?id='+userid" @click="goEditPage">
                <text>修改名片</text>
            </navigator>
        </view>

        <u-popup :show="shareShow" mode="bottom" @close="shareShow=false">
            <view class="share-box">
                <contact openType="share">
                    <view class="item" hover-class="navigator-hover" @click="shareWx">
                    <image mode="widthFix" src="/static/workbench/微信好友.svg" />
                        <text>微信好友</text>
                    </view>
                </contact>
                
                <navigator class="item" :url="'/cloud/businessCard/share?id='+userid">
                    <image mode="widthFix" src="/static/workbench/名片海报.svg" />
                    <text>名片海报</text>
                </navigator>
            </view>
        </u-popup>
    </view>
</template>

<script>
import contact from "../../components/contact"
import { viewImage } from "../../utils/settleFiles.js"
export default {
    components:{contact},
    data () {
        return {
            userInfo:{tag:[],images:[]},
            userid:uni.getStorageSync('userMsg').userid,
            shareShow:false
        }
    },
    computed: {
    },
    methods: {  
        preview (url) {
            viewImage(url)
        },
        goEditPage () {
            this.$Http.editUser = function (id){
                this.getuserInfo (id)
                delete this.$Http.editUser
            }.bind(this)
        },
        async getuserInfo (id) {
            let res = await this.$Http.basic({
                "id": 20240514161502,
                "content": {
                    userid:id
                },
            })
            this.userInfo = res.data
            this.userInfo.headpic = this.userInfo.attinfos.find(v => v.usetype == "headportrait") && this.userInfo.attinfos.find(v => v.usetype == "headportrait").url || '';
            this.userInfo.images = this.userInfo.attinfos.filter(v => v.usetype != "headportrait")
            console.log(this.userInfo,'用户信息');
        },
        shareClick () {
            this.shareShow = true
        },
        onBack() {
            uni.navigateBack()
        },
        async goodClick () {
            let res = await this.$Http.basic({
                "id": 20240416133702,
                "content": {
                    "ownertable": "sys_users",
                    "ownerid": this.userid,
                    "type":2//1:收藏，2：点赞
                },
            })
            if (this.cutoff(res.msg)) return;
            this.getuserInfo(this.userid)
        },
        copy() {
            uni.setClipboardData({
                data:this.userInfo.phonenumber,
                success: (result) => {
                    uni.showToast({
                        title: "已复制",
                        icon: "none",
                        duration: 1500,
                    })
                }
            });
        }
    },
    onShareAppMessage(res) {
        return {
            title: this.userInfo.name, // 标题
            path: "/cloud/businessCard/index?id=" + this.userid, // 分享路径
            imageUrl: ""// 分享图
        };
    },
    onLoad(options) {
        console.log("被邀请加入团队", options)
        const systemInitIsComplete = this.$Http.systemInitIsComplete;
        if (!systemInitIsComplete || typeof systemInitIsComplete == 'object') {
            this.$Http.HomePageStartRendering = render(this)
        } else {
            render(this)
        }
        function render(that) {
            if (options.q) {
                let params = that.getUrlParams(options.q);
                user.wechatBindUserid = params.wechatBindUserid;
                that.userid = params.wechatBindUserid
            }
            that.getuserInfo(that.userid)
        }
    },
}
</script>

<style lang="scss">
.self-card {
    .head {
        position: relative;
        width: 100vw;
        .bg-bottom {
            position: absolute;
            bottom: 0px;
            left: 0;
            width: 100vw;

        }
        .custom {
            position: absolute;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 17px;
            color: #FFFFFF;

            .back {
                position: absolute;
                padding: 0 10px;
                left: 0;
                color: #fff;
                font-size: 12px;
                transform: rotateY(180deg);
            }
        }
        .card {
            width: 355px;
            height: 220px;
            box-sizing: border-box;
            background: #FFFFFF;
            box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.16);
            border-radius: 8px 8px 8px 8px;
            position: absolute;
            top: var(--height);
            left: 10px;
            padding: 20px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            .header {
                display: flex;
                justify-content: space-between;
                align-content: center;
                align-items: center;
                .left {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .title {
                        display: flex;
                        align-items: center;
                        text {
                            &:first-child {
                                font-weight: 500;
                                font-size: 18px;
                                color: #333333;
                            }
                            &:last-child {
                                font-weight: 400;
                                font-size: 12px;
                                color: #999999;
                                margin-left: 10px;
                            }
                        }
                        margin-bottom: 5px;
                    }
                    .phone {
                        font-weight: 500;
                        font-size: 16px;
                        color: #333333;
                    }
                    .redline {
                        width: 24px;
                        height: 2px;
                        background: #C30D23;
                        margin-top: 15px;
                    }
                }
                .right {
                    width: 56px;
                    height: 56px;
                    background: #DCEBF8;
                    box-shadow: 0px 3px 6px 1px #E0D6D7;
                    border: 2px solid #FFFFFF;
                    border-radius: 50%;
                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
            }
            .bottom {
                display: flex;
                justify-content: space-between;                
                font-family: Source Han Sans SC, Source Han Sans SC;
                font-weight: 400;
                font-size: 12px;
                color: #666666;
                margin-top: 22px;
                .left {
                    display: flex;
                    flex-direction: column;
                    >view {
                        margin-bottom: 13px;
                        display: flex;
                        align-content: center;
                        align-items: center;
                        i {
                            font-size: 16px;
                        }
                        .text {
                            margin-left: 10px;
                            max-width: 211px;
                        }
                    }
                }
                .right {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    align-content: center;
                    text {
                        font-weight: 400;
                        font-size: 12px;
                        color: #666666;
                        
                    }
                    .code {
                        width: 32px;
                        height: 32px;
                        margin-bottom: 4px;
                    }
                }
            }
        }
    }
    .card-handle {
        padding: 50px 10px 20px 10px;
        background: #ffffff;
        margin-top: 15px;
        .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            align-content: center;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 12px;
            color: #999999;
            .left {
                display: flex;
                flex-direction: column;
                .avatar {
                    display: flex;
                    align-items:flex-start;
                    align-content: center;
                    image {
                        margin-right: 5px;
                        width: 24px;
                        height: 24px;
                    }
                    text {
                        transform: scale(1.5);
                    }
                }
                .readcount{
                    margin-top: 5px;
                    display: block;
                }
            }
            .right {
                display: flex;
                flex-direction: column;
                align-content: center;
                align-items: center;
                i {
                    display: block;
                    color: #666666;
                }
                text {
                    margin-top: 5px;
                    display: block;
                }
            }
        }
        .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            align-content: center;
            margin-top: 25px;
            .but {
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                border-radius: 8px 8px 8px 8px;
                font-family: Source Han Sans SC, Source Han Sans SC;
                font-weight: 400;
                font-size: 16px;
                width: 173px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                &:nth-child(1) {
                    background: #FFFFFF;
                    border: 1px solid #CCCCCC;
                    color: #666666;
                }
                &:nth-child(2) {
                    background: #C30D23;
                    color: #FFFFFF;
                }
                view {
                    margin-right: 10px;
                }
            }
        }
    }
    .user-info {
        padding: 12px 10px 70px 10px;
        font-family: PingFang SC, PingFang SC;
        background: #ffffff;
        margin-top: 10px;
        .title-min{
            margin-bottom: 10px;
            font-weight: 500;
            font-size: 14px;
            color: #666666;
            display: block;
        }
        .title-max {
            margin-bottom: 21px;
            font-weight: 500;
            font-size: 16px;
            color: #333333;
            display: block;
        }
        .tag-box {
            display: flex;
            flex-direction: column;
            margin-bottom: 20px;
            .title-min{}
            .tag-list{
                display: flex;
                align-content: center;
                align-items: center;
                flex-wrap: wrap;
                .tag {
                    margin-right: 10px;
                    padding: 6px 10px;
                    background: #F2F2F2;
                    border-radius: 5px 5px 5px 5px;
                    margin-right: 10px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #333333;
                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }
        .descript-box {
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
            .descript {
                font-weight: 400;
                font-size: 14px;
                color: #666666;
            }
        }
        .image-box {
            display: flex;
            flex-direction: column;
            .image {
                width: 100%;
                height: 240px;
                margin-bottom: 10px;
            }
        }
    }
    .footer {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 375px;
        height: 64px;
        background: #FFFFFF;
        box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
        box-sizing: border-box;
        z-index: 9;
        padding: 5px 10px;
        .custom {
            position: absolute;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 17px;
            color: #FFFFFF;

            .back {
                position: absolute;
                padding: 0 10px;
                left: 0;
                color: #fff;
                font-size: 12px;
                transform: rotateY(180deg);
            }
        }
        .but { 
            width: 355px;
            height: 45px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
            background: #C30D23;
            border-radius: 5px 5px 5px 5px;
            border: 1px solid #FFFFFF;
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: space-evenly;
        }
    }
}

.share-box {
    padding: 30px 0;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
    .item {
        display: flex;
        flex-direction: column;
        align-items:center;
        align-content:center;
        image {
            width:50px;
            height:50px;
        }
        text {
            margin-top: 5px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-weight: 400;
            font-size: 12px;
            color: #333333;
        }
    }
}

</style>