uniapp页面完成水印添加功能(自定义文字)

页面代码

<template>
    <view class="">
        <!-- 水印 -->
        <view class="watermark-container" v-if="text">
            <view class="zhanshiyemian">
                <view class="weikaifang-sty" v-for="(item, index) in generateWatermarks()" :key="index">
                    {{ text }}
                </view>
            </view>
        </view>
        <!-- 代码 -->
        <view class="content">
            <!-- 搜索 -->
            <view class="serchform_time">
                <view class="left">
                    <view class="contentx">全部订单</view>
                    <view></view>
                </view>
                <view class="right">
                    <view @click="show = true" class="serchform_t">时间</view>
                    <view>1</view>
                </view>
            </view>
            <u-popup :show="show" :round="10" mode="top" @close="close" @open="open">
                <view>
                    <text>出淤泥而不染，濯清涟而不妖</text>
                </view>
            </u-popup>
            <!-- 主体展示 -->
            <view class="content_center">
                <view v-for="item in list" :key="item">
                    <view class="title">{{item.time}}</view>
                    <view v-for="(aitem,index) in item.listevery" :key="index" class="box_center">
                        <view class="aa">
                            <view class="left">
                                {{aitem.time}}
                            </view>
                            <view class="right">
                                {{aitem.status}}
                            </view>
                        </view>
                        <view class="bb">
                            <view class="left">

                            </view>
                            <view class="right">
                                {{aitem.a}}
                            </view>
                        </view>
                        <view class="cc">
                            <view class="left">

                            </view>
                            <view class="right">
                                {{aitem.b}}
                            </view>
                        </view>
                        <view class="dd">
                            <view class="left">
                                {{aitem.to}}
                            </view>
                            <view class="right">
                                {{aitem.money}} <text>元</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        listFive
    } from '../listMessage.js'
    export default {
        name: "Watermark",
        data() {
            return {
                itemCount: 0,
                list: [],
                show: false,
            };
        },
        props: {
            text: {
                type: String,
                default: '阿宝科技'
            },
        },
        mounted() {
            this.calculateWatermarkCount();
            console.log(listFive, 'listFive');
            this.list = listFive
        },
        onReady() {
            // 微信小程序需要用此写法
            // this.$refs.datetimePicker.setFormatter(this.formatter)
        },
        beforeDestroy() {},
        methods: {
            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`
                }
                if (type === 'month') {
                    return `${value}月`
                }
                if (type === 'day') {
                    return `${value}日`
                }
                return value
            },
            calculateWatermarkCount() {
                const screenWidth = uni.getSystemInfoSync().windowWidth;
                const screenHeight = uni.getSystemInfoSync().windowHeight;
                const watermarkWidth = 25;
                const watermarkHeight = 140;
                const horizontalCount = Math.ceil(screenWidth / watermarkWidth);
                const verticalCount = Math.ceil(screenHeight / watermarkHeight);
                this.itemCount = horizontalCount * verticalCount;
            },
            generateWatermarks() {
                return Array(this.itemCount).fill(null);
            },
            open() {
                // console.log('open');
            },
            close() {
                this.show = false
                // console.log('close');
            }
        },
    }
</script>
<style lang="scss">
    page {
        background-color: #f3f3f3;
    }

    .from-stye {
        position: relative;
        z-index: 999;
        pointer-events: none;
    }

    .zhanshiyemian {
        position: absolute;
        width: 100%;
        z-index: 9999;
        pointer-events: none;
        display: flex;
        flex-wrap: wrap;
        line-height: 100rpx;
    }

    .weikaifang-sty {
        font-size: 12px;
        color: #cccccc63;
        width: 25%;
        text-align: center;
        transform: rotate(-30deg);
        /* 顺时针旋转30度 */
    }

    .content {
        padding: 0 30rpx;
        box-sizing: border-box;
        background-color: #f3f3f3;

        .serchform_time {
            height: 100rpx;
            background-color: #fff;
            box-shadow: 0 4px 6px -6px #999;
            position: fixed;
            top:  0;
            left: 0;
            right: 0;
            z-index: 9999;
            display: flex;
            justify-content: space-evenly;

            .right,
            .left {
                // width: 50%;
                display: flex;
                align-items: center;
            }

            .left {
                .contentx {
                    font-weight: 600;
                }
            }

            .rigth {
                .serchform_t {
                    position: relative;
                    margin-bottom: 40px;
                    /* 确保有足够的空间显示弹出框 */
                }
            }
        }

        .content_center {
            padding-top:140rpx;
            box-sizing: border-box;

            .title {
                font-weight: 600;
            }

            .box_center {
                width: 100%;
                height: 260rpx;
                background-color: #fff;
                border-radius: 20rpx;
                margin: 20rpx 0;
                padding: 20px;
                box-sizing: border-box;

                .aa,
                .bb,
                .cc,
                .dd {
                    display: flex;

                }

                .aa {
                    justify-content: space-between;

                    .left {
                        font-size: 28rpx;
                        font-weight: 600;
                    }

                    .right {
                        font-size: 26rpx;
                        color: #333;
                    }
                }

                .bb,
                .cc {
                    margin: 20rpx 0;
                    align-items: center;

                    .left {
                        background-color: greenyellow;
                        width: 10rpx;
                        height: 10rpx;
                        border-radius: 50%;
                        margin-right: 20rpx;
                    }
                }

                .cc {
                    .left {
                        background-color: red;
                    }
                }

                .dd {
                    justify-content: space-between;

                    .left {
                        padding: 0 4rpx;
                        font-size: 22rpx;
                        background-color: #e6f1fb;
                        color: #4669bb;
                        height: 34rpx;
                    }

                    .right {
                        font-size: 32rpx;
                        font-weight: 600;

                        text {
                            font-size: 24rpx;
                            font-weight: 500;
                        }
                    }
                }
            }
        }
    }
</style>

数据代码

export const listFive = [{
    time:"07月24日",
    listevery:[
        {
            time:'23:36',
            status:'已支付',
            a:'张三哈哈哈',
            b:'李四哈哈哈',
            to:'高德渠道',
            money:'18.15'
        },
        {
            time:'23:36',
            status:'已支付',
            a:'张三哈哈哈',
            b:'李四哈哈哈',
            to:'高德渠道',
            money:'18.15'
        }
    ]
},{
    time:"07月25日",
    listevery:[
        {
            time:'23:36',
            status:'已支付',
            a:'张三哈哈哈',
            b:'李四哈哈哈',
            to:'高德渠道',
            money:'18.15'
        },
        {
            time:'23:36',
            status:'已支付',
            a:'张三哈哈哈',
            b:'李四哈哈哈',
            to:'高德渠道',
            money:'18.15'
        }
    ]
},{
    time:"07月26日",
    listevery:[
        {
            time:'23:36',
            status:'已支付',
            a:'张三哈哈哈',
            b:'李四哈哈哈',
            to:'高德渠道',
            money:'18.15'
        }
    ]
}]

效果图