saas_manager/pages/vcard/index.vue

<template>
  <view class="vcard-ward">
    <view class="vcard-ward-info">
      <view class="vcard-ward-info-top"> 个人名片 </view>
      <view class="vcard-ward-info-main">
        <view class="head">
          <image
            :src="
              userInfo && userInfo.avatar
                ? $method.splitImgHost(userInfo.avatar, true)
                : defaultHead
            "
          ></image>
        </view>
        <view class="info">
          <view class="info-name"> {{ userInfo.realname }} </view>
          <view class="info-item fl">
            <image src="../../static/image/icon-phone.png" mode=""></image>
            <view class=""> {{ userInfo.telphone }} </view>
          </view>
          <view class="info-item fll">
            <image src="../../static/image/icon-business.png" mode=""></image>
            <view class=""> {{ userInfo.tenantName }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="vcard-ward-tips">
      <view class="vcard-ward-tips-title"> 活动规则说明 </view>
      <view class="vcard-ward-tips-text">
        文案文案规则说明文案文案规则说明，文案文案规则说明文案文案规则说明文案文案明，文案文案规则说明文案文案规则说明文案文案规则说明，文案文案规则说明文案文案规则说明文案文案规则说明，文案文案规则说明文案文案规则说明文案文案规则说明，文案文案规则说明
      </view>
    </view>
    <view class="vcard-ward-btns fl_b">
      <view @click="toLogin">登录</view>
      <view style="background: #5a8cff" @click="toRegister">注册</view>
    </view>
  </view>
</template>

<script>
import { getInfoByShareCode } from "@/utils/user";
export default {
  data() {
    return {
      defaultHead: require("../../static/image/defhead.png"),
      userInfo: {},
    };
  },
  methods: {
    getInfoByShareCode(shareCode) {
      shareCode &&
        getInfoByShareCode({ shareCode }).then((res) => {
          this.userInfo = res;
        });
    },
    toLogin() {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
    toRegister() {
      uni.navigateTo({
        url: "/pages/login/register",
      });
    },
  },
  onLoad(option) {
    this.getInfoByShareCode(option.shareCode);
  },
};
</script>

<style scoped lang="scss">
page {
  background: #353f5c;
}

image {
  width: 100%;
  height: 100%;
}

.vcard-ward {
  padding: 60rpx 40rpx;
  .vcard-ward-info {
    padding-top: 16rpx;
    background: #417bff;
    border-radius: 20rpx;

    .vcard-ward-info-top {
      height: 60rpx;
      background: linear-gradient(180deg, #ffdea7 0%, #ffeed2 100%);
      margin: 0 14rpx;
      border-radius: 13rpx 13rpx 0 0;
      line-height: 60rpx;
      padding-left: 24rpx;
      color: #9c7b4a;
      font-size: 28rpx;
    }

    .vcard-ward-info-main {
      display: flex;
      padding: 32rpx;
      color: #ffffff;
      background: #5a8cff;
      border-radius: 20rpx;

      .head {
        width: 120rpx;
        height: 120rpx;

        image {
          border-radius: 50%;
        }
      }

      .info {
        margin-left: 26rpx;
        padding-top: 10rpx;
        flex: 1;

        .info-name {
          font-weight: bold;
          font-size: 36rpx;
          margin-bottom: 30rpx;
        }

        .info-item {
          margin-bottom: 12rpx;
          font-size: 28rpx;

          image {
            width: 32rpx;
            height: 32rpx;
            margin-right: 20rpx;
          }
        }

        .fll {
          display: flex;
          line-height: 38rpx;

          image {
            padding-top: 4rpx;
          }
        }
      }
    }
  }

  .vcard-ward-tips {
    margin-top: 80rpx;
    font-size: 32rpx;
    .vcard-ward-tips-title {
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 24rpx;
    }

    .vcard-ward-tips-text {
      font-size: 32rpx;
      color: #bbb;
      font-weight: 400;
      line-height: 48rpx;
    }
  }

  .vcard-ward-btns {
    width: 90%;
    height: 100rpx;
    position: fixed;
    bottom: 40rpx;
    view {
      width: 320rpx;
      text-align: center;
      line-height: 100rpx;
      font-weight: bold;
      color: #ffffff;
      font-size: 32rpx;
      background: #44ca7d;
      border-radius: 16rpx;
    }
  }
}
</style>