uniapp绘制个人名片分享

最新推荐文章于 2024-05-14 11:04:03 发布

m0_46701899

最新推荐文章于 2024-05-14 11:04:03 发布

阅读量543

点赞数

文章标签： uni-app Powered by 金山文档

本文链接：https://blog.csdn.net/m0_46701899/article/details/128573672

版权

<template>

    <view class="canvas-in-s" :style="{'height': height}">

        <view style="padding-top: 216rpx;" class="flex-display  a-i-c j-c-c">
            <view class="p-s ">
                <image class="p-s-img" v-if="userInfo.headImage!=''" :src="userInfo.headImage" mode="aspectFill"
                    style="border-radius: 50%;"></image>
                <image class="p-s-img" v-else
                    src="http://file.jls.cqpridesoft.com/uploadfile/static/img/newOther/pic.png" mode="aspectFill"
                    style="border-radius: 50%;"></image>
                <view class="flex-display  flex-column a-i-c j-c-c">
                    <view class="p-s-name">{
   {userInfo.name}}</view>
                    <view class="p-s-phone mar-top-10">{
   {userInfo.phone}}</view>
                </view>
                <view>
                    <image class="p-s-img-text-s" :src="imgSrc"></image>
                </view>
            </view>
        </view>

        <view style="margin-top: 44rpx;" class="flex-display  a-i-c j-c-c">
            <view class="p-s-share" @click="saveImage(1)">保存图片</view>
            <view class="p-s-line"></view>
            <view class="p-s-share" @click="saveImage(2)">微信好友</view>
            <view class="p-s-line"></view>
            <view class="p-s-share" @click="saveImage(3)">朋友圈</view>
        </view>
        <view class="flex-display  a-i-c j-c-c">
            <image class="p-s-logo" src="http://file.jls.cqpridesoft.com/uploadfile/static/img/user/icon36.p