rtliveCompany/components/Watermark.vue

<template>
  <view class="watermark"  >
    <view class="watermark-box">
      <text class="text" v-for="(item, index) in count" :key="index" >{{localUserInfo.nickName || localUserInfo.userName || '' }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Watermark',
  props: {
    userInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      count:40,
      localUserInfo: this.userInfo || this.getUserInfo()
    };
  },
  watch: {
    // 监听props中的userInfo变化，当变化时更新本地userInfo
    userInfo: {
      handler(newVal) {
        this.localUserInfo = newVal || this.getUserInfo();
      },
      deep: true
    }
  },
  onShow() {
    // 如果没有通过props传递userInfo，则从本地存储获取
    if (!this.userInfo) {
      this.localUserInfo = this.getUserInfo();
    }
  },
  onLoad() {
    // 如果没有通过props传递userInfo，则从本地存储获取
    if (!this.userInfo) {
      this.localUserInfo = this.getUserInfo();
    }
  },
  methods: {
    getUserInfo() {
      try {
        const userInfo = uni.getStorageSync('userInfo');
        if (userInfo) {
          // 尝试解析JSON字符串
          return userInfo|| {};
        }
        return {};
      } catch (error) {
        console.error('获取用户信息失败:', error);
        return {};
      }
    }
  }
}
</script>

<style scoped>
.watermark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999999;
  overflow: hidden;
  font-size: 40rpx;
}

.watermark-box {
  width: 200%;
  height: 150%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  transform: rotate(-20deg) translate(-25%, -25%);
  color: rgba(196, 196, 196, 0.5);
  padding: 0;
}

.text {
  margin: 20rpx 15rpx;
  font-weight: bold;
  flex: 0 0 calc(20% - 30rpx);
  text-align: center;
}
</style>