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) {
        this.isInitializeLogin(render.bind(this))
        function render() {
            if (options.q) {
                let params = this.getUrlParams(options.q);
                user.wechatBindUserid = params.wechatBindUserid;
                this.userid = params.wechatBindUserid
            }
            this.getuserInfo(this.userid)
        }
    },
}
</script>

<style lang="scss">
.self-card {
    .head {
        position: relative;
        width: 100vw;

        .bg-bottom {
            position: absolute;
            bottom: -1px;
            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;
        align-items: center;
        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>