个人资料添加水印，场所相关页面图片上传接口地址更换

Lou

2024-02-21 e22ee79a288b909df09739bf3eb0b3eb89888df0

个人资料添加水印，场所相关页面图片上传接口地址更换

 mixin/uploadMixinPlace.js

New file
@@ -0,0 +1,136 @@
import {
    prodUrl,
    clientId,
    clientSecret
} from '@/common/setting'

import {
    Base64
} from '@/utils/base64.js';
export default {
    data() {
        return {
            form: {
                images: []
            },

            uploadConfig: {
                acceptImg: "image",
                acceptVideo: 'video',
                capture: ['album', 'camera'],
                multiple: true,
                maxCount: "5",
                previewFullImage: true,
                uploadText: "上传中",
                url: prodUrl + "/blade-resource/oss/endpoint/put-file-attach-by-prefix-path"
            },
        }
    },

    created() {
        this.getHeader()
    },

    methods: {
        //获取头部
        getHeader() {
            let accessToken = uni.getStorageSync('accessToken');
            let myHeader = {}
            if (accessToken) {
                myHeader['Blade-Auth'] = 'bearer ' + accessToken;
            }
            // 客户端认证参数
            myHeader['Authorization'] = 'Basic ' + Base64.encode(clientId + ':' + clientSecret);
            this.uploadConfig.header = myHeader
        },

        //上传方法
        uploadFilePromise(url) {
            return new Promise((resolve, reject) => {
                let a = uni.uploadFile({
                    url: this.uploadConfig.url, //接口地址
                    filePath: url,
                    name: 'file',
                    header: this.uploadConfig.header,
                    formData: {
                        prefixPath: ""
                    },
                    success: (res) => {
                        let data = JSON.parse(res.data)
                        setTimeout(() => {
                            resolve(data)
                        }, 1000)
                    }
                });
            })
        },

        //上传成功后对返回数据进行处理
        async afterReadImg(event, key = "images") {
            // console.log(key)
            // console.log(this.form[key]);
            this.showLoading()
            var that = this;
            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file)

            let fileListLen = this.form[key].length
            lists.map((item) => {
                this.form[key].push({
                    ...item,
                    status: 'uploading',
                    message: '上传中'
                })
            })
            for (let i = 0; i < lists.length; i++) {
                const result = await this.uploadFilePromise(lists[i].url)
                that.form[key].splice(fileListLen, 1, Object.assign({}, {
                    url: result.data.link,
                    name: result.data.name
                }))
                fileListLen++
            }

            // let fileListLen = this.form.images.length
            // lists.map((item) => {
            //     this.form.images.push({
            //         ...item,
            //         status: 'uploading',
            //         message: '上传中'
            //     })
            // })
            // for (let i = 0; i < lists.length; i++) {
            //     const result = await this.uploadFilePromise(lists[i].url)
            //     that.form.images.splice(fileListLen, 1, Object.assign({}, {
            //         url: result.data.link,
            //         name:result.data.name
            //     }))
            //     fileListLen++
            // }


            this.loadingClose()
        },


        //删除图片
        deletePic(event, key = "images") {
            this.form[key].splice(event.index, 1)
        },

        deletePics(event, key) {
            console.log(event, key);
            this[key].splice(event.index, 1)
        },

        showLoading() {
            uni.showLoading({
                mask: true,
                title: '上传中'
            })
        },
        loadingClose() {
            uni.hideLoading()
        },
    }
}

 subPackage/label/check.vue

@@ -91,7 +91,7 @@
</template>

<script>
    import uploadMixin from "@/mixin/uploadMixin";
    import uploadMixin from "@/mixin/uploadMixinPlace";
    import {
        getPlaceCheckItem
    } from "@/api/place/place.js"

 subPackage/user/editUserInfo/editUserInfo.vue

@@ -3,25 +3,28 @@
        <view class="bgc-ff">
            <view class="form-item flex j-c-s-b a-i-c">
                <text class="f-30">头像</text>
                <button class="avatar-wrapper"  open-type="chooseAvatar"   @chooseavatar="chooseAvatar" >
                    <u-avatar   :src="avatar"  size="50"></u-avatar>
                <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
                    <u-avatar :src="avatar" size="50"></u-avatar>
                </button>
            </view>
            <view class="form-item flex j-c-s-b a-i-c">
                <text class="f-30">昵称</text>
                <view class="nickname">
                    <input class="nickname-value" type="nickname"  placeholder="请输入昵称"  v-model="info.realName"  @blur="getInputValue"  />
                    <input class="nickname-value" type="nickname" placeholder="请输入昵称" v-model="info.realName"
                        @blur="getInputValue" />
                </view>
				

            </view>
        </view>
        <footer-btn text="确定"   @click="submitInfo"  />
        <footer-btn text="确定" @click="submitInfo" />
        <zmm-watermark :watermark="watermark"></zmm-watermark>
    </view>
</template>

<script>
	
    import { updateUserInfo } from "@/api/user.js"
    import {
        updateUserInfo
    } from "@/api/user.js"
    import {
        Base64
    } from '@/utils/base64.js';
@@ -32,28 +35,42 @@
        minioBaseUrl
    } from '@/common/setting'
    export default {
        data(){
            return{
                avatar:"",
                info:{
                    avatar:"",
                    realName:"",
                    id:"",
                    deptId:""
        data() {
            return {
                avatar: "",
                info: {
                    avatar: "",
                    realName: "",
                    id: "",
                    deptId: ""
                },
                header: {},
                uploadConfig: {
                    url: prodUrl + "/blade-resource/oss/endpoint/put-file",
                    header: {},
                },
                watermark: ""
            }
        },
        onLoad() {
            let {
                nick_name,
                phone
            } = uni.getStorageSync("userInfo");
            // this.watermark = `${nick_name} ${phone}`
            this.watermark = `<h5>${nick_name}</h5><br><p style="font-size:11px;">${phone}</p>`


            this.getHeader()
            let { avatar,real_name,user_id,dept_id }  = uni.getStorageSync("userInfo");
            if(avatar){
            let {
                avatar,
                real_name,
                user_id,
                dept_id
            } = uni.getStorageSync("userInfo");
            if (avatar) {
                this.avatar = `${minioBaseUrl}${avatar}`
            }else {
            } else {
                this.avatar = avatar;
            }
            this.info.avatar = avatar;
@@ -61,8 +78,8 @@
            this.info.id = user_id
            this.info.deptId = dept_id
        },
        methods:{
			
        methods: {

            //获取头部
            getHeader() {
                let accessToken = uni.getStorageSync('accessToken');
@@ -74,21 +91,21 @@
                myHeader['Authorization'] = 'Basic ' + Base64.encode(clientId + ':' + clientSecret);
                this.uploadConfig.header = myHeader
            },
			
            chooseAvatar(e){

            chooseAvatar(e) {
                let {
                    avatarUrl
                } = e.detail
                this.uploadAvatar(avatarUrl)
            },
			
            uploadAvatar(url){

            uploadAvatar(url) {
                uni.uploadFile({
                    url:this.uploadConfig.url, 
                    url: this.uploadConfig.url,
                    filePath: url,
                    name: 'file',
                    header: this.uploadConfig.header,
                    success:(res)=> {
                    success: (res) => {
                        let data = JSON.parse(res.data);
                        console.log(data.data);
                        this.info.avatar = data.data.name;
@@ -96,56 +113,61 @@
                    }
                })
            },
			
            getInputValue(e){

            getInputValue(e) {
                console.log(e);
                this.info.realName = e.detail.value;
            },
			
			
            submitInfo(){
                updateUserInfo(this.info).then(res=>{
                    if(res.code == 200){


            submitInfo() {
                updateUserInfo(this.info).then(res => {
                    if (res.code == 200) {
                        uni.showToast({
                            title:res.msg
                            title: res.msg
                        })
                        setTimeout(()=>{
                         let userInfo =    uni.getStorageSync("userInfo");
                         userInfo.avatar = this.info.avatar;
                         userInfo.real_name = this.info.realName;
                         this.$u.vuex('userInfo',userInfo);	  
                        setTimeout(() => {
                            let userInfo = uni.getStorageSync("userInfo");
                            userInfo.avatar = this.info.avatar;
                            userInfo.real_name = this.info.realName;
                            this.$u.vuex('userInfo', userInfo);
                            uni.navigateBack()
                        },300)
                        }, 300)
                    }
                })
            }
			

        }
    }
</script>

<style lang="scss">
    page{
        background-color:#f5f5f5;
    page {
        background-color: #f5f5f5;
    }
    .form-item{
        padding:30rpx;
        border-bottom:1px solid #f5f5f5;

    .form-item {
        padding: 30rpx;
        border-bottom: 1px solid #f5f5f5;
    }
    .avatar-wrapper{
        border:none;

    .avatar-wrapper {
        border: none;
        background: transparent;
        margin:0;
        padding:0;
        margin: 0;
        padding: 0;
    }
    .avatar-wrapper::after{
        border:none;
        margin:0;

    .avatar-wrapper::after {
        border: none;
        margin: 0;
    }
    .nickname{
        width:80%;
        .nickname-value{
            width:100%;

    .nickname {
        width: 80%;

        .nickname-value {
            width: 100%;
            text-align: right;
        }
    }

 subPackage/workbench/views/checkReform.vue

@@ -152,7 +152,7 @@
</template>

<script>
    import uploadMixin from "@/mixin/uploadMixin";
    import uploadMixin from "@/mixin/uploadMixinPlace";
    import {
        getPlaceCheckItem,
        getPlaceCheckReformDetail,

 subPackage/workbench/views/cscj.vue

@@ -222,7 +222,7 @@
</template>



<script>

    import uploadMixin from "@/mixin/uploadMixin";

    import uploadMixin from "@/mixin/uploadMixinPlace";

    import lineItem from "@/subPackage/workbench/components/lineItem.vue"

    import {

        getLabelCate


 subPackage/workbench/views/editCscj.vue

@@ -96,7 +96,7 @@
</template>

<script>
    import uploadMixin from "@/mixin/uploadMixin";
    import uploadMixin from "@/mixin/uploadMixinPlace";
    import lineItem from "@/subPackage/workbench/components/lineItem.vue"
    import {
        getLabelCate

 subPackage/workbench/views/editExamine.vue

@@ -77,7 +77,7 @@
        updatePlaceExtData,

        getPlaceDetail

    } from '@/api/placeExp/placeExp.js'

    import uploadMixin from "@/mixin/uploadMixin";

    import uploadMixin from "@/mixin/uploadMixinPlace";

    import boxTitle from "@/subPackage/workbench/components/boxTitle/index.vue"

    import formItem from '../components/formItem.vue'

    import {


 subPackage/workbench/views/selfCheckDetail.vue

@@ -156,7 +156,7 @@
</template>

<script>
    import uploadMixin from "@/mixin/uploadMixin";
    import uploadMixin from "@/mixin/uploadMixinPlace";
    import {
        getPlaceCheckItem,
        getPlaceCheckReformDetail,

 uni_modules/zmm-watermark/changelog.md

New file
@@ -0,0 +1,4 @@
## 1.1.2（2022-01-12）
调整为uni_modules目录规范
## 1.0（2021-03-31）
发布1.0版本

 uni_modules/zmm-watermark/components/zmm-watermark/zmm-watermark.vue

New file
@@ -0,0 +1,125 @@
<template>
    <view v-if="show">
        <view class="zmm-watermark-box" :style="[{'top':top+'px'},{'opacity':opacity}]">
            <view class="zmm-watermark-getwh" ref="getwh" id="getwh" :style="[{'max-width':maxWidth+'px'}]">
                <rich-text :nodes="watermark"></rich-text>
            </view>
            <view class="zmm-watermark-content">
                <view class="zmm-watermark-text" :style="[{'color':color},{'margin-bottom':margin+'px'},{'max-width':maxWidth+'px'},{'transform':'rotate('+rotate+'deg)'}]" v-for="(item,index) in forLength" :key="index">
                    <rich-text :nodes="watermark"></rich-text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                top: 0,//H5状态栏高度
                forLength: 0 //水印数量
            };
        },
        props: {
            maxWidth: { //单条水印最大宽度
                type: Number,
                default: 180
            },
            rotate: { //水印旋转角度
                type: Number,
                default: -21
            },
            margin: { //水印之间上下间距
                type: Number,
                default: 50
            },
            watermark: { //水印文字(支持html富文本)
                type: String,
                default: '水印文字'
            },
            color: { //水印文字默认颜色
                type: String,
                default: '#000000'
            },
            opacity: { //水印透明度
                type: Number,
                default: 0.15
            },
            show: { //是否显示水印
                type: Boolean,
                default: true
            },
        },
        mounted() {
            this.getstatusBarHeight();
        },
        methods: {
            getstatusBarHeight() { //计算水印数量
                var SystemInfo = uni.getSystemInfoSync();
                this.top = SystemInfo.safeArea.top + SystemInfo.windowTop;
                var screenArea = parseInt(SystemInfo.screenHeight * (SystemInfo.screenWidth * 1.2))
                var watermarkArea = 0
                const query = uni.createSelectorQuery().in(this);
                query.select('#getwh').boundingClientRect(data => {
                    watermarkArea = parseInt((data.height + this.margin) * data.width)
                }).exec();
                var timer = setInterval(() => {
                    if (watermarkArea == 0) {} else {
                        clearInterval(timer)
                        this.forLength = parseInt((screenArea / watermarkArea))
                    }
                }, 500)
            },
        }
    }
</script>
<style>
    .zmm-watermark-box {
        overflow: hidden;
        width: 100%;
        height: 100vh;
        pointer-events: none;
        position: fixed;
        top: 30px;
        z-index: 9999;
        left: 0;
        top: 0;
    }

    .zmm-watermark-content {
        left: -10%;
        position: absolute;
        width: 120%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .zmm-watermark-text {
        text-align: center;
        transform: rotate(-21deg);
        margin: 0 10px;
        margin-bottom: 100rpx;
        color: rgba(0, 0, 0, 0.05);
        max-width: 180px;
        font-size: 16px;
        letter-spacing: 10rpx;
        word-break: break-all;
        line-height: 1;
    }

    .zmm-watermark-getwh {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        display: inline-block;
        max-width: 180px;
        font-size: 16px;
        letter-spacing: 10rpx;
        word-break: break-all;
        line-height: 1;
    }
</style>

 uni_modules/zmm-watermark/package.json

New file
@@ -0,0 +1,83 @@
{
  "id": "zmm-watermark",
  "displayName": "zmm-watermark-通用水印组件",
  "version": "1.1.2",
  "description": "支持富文本、自动计算所需水印数量不卡顿、自定义旋转角度等",
  "keywords": [
    "",
    "水印",
    "水印组件",
    "通用水印",
    "自定义水印",
    "富文本水印"
],
  "repository": "",
  "engines": {
    "HBuilderX": "^3.1.1"
  },
  "dcloudext": {
    "category": [
      "前端组件",
      "通用组件"
    ],
    "sale": {
      "regular": {
        "price": "0.00"
      },
      "sourcecode": {
        "price": "0.00"
      }
    },
    "contact": {
      "qq": ""
    },
    "declaration": {
      "ads": "无",
      "data": "插件不采集任何数据",
      "permissions": "无"
    },
    "npmurl": ""
  },
  "uni_modules": {
    "platforms": {
      "cloud": {
        "tcb": "y",
        "aliyun": "y"
      },
      "client": {
        "App": {
          "app-vue": "y",
          "app-nvue": "y"
        },
        "H5-mobile": {
          "Safari": "y",
          "Android Browser": "y",
          "微信浏览器(Android)": "y",
          "QQ浏览器(Android)": "y"
        },
        "H5-pc": {
          "Chrome": "y",
          "IE": "y",
          "Edge": "y",
          "Firefox": "y",
          "Safari": "y"
        },
        "小程序": {
          "微信": "y",
          "阿里": "y",
          "百度": "y",
          "字节跳动": "y",
          "QQ": "y"
        },
        "快应用": {
          "华为": "y",
          "联盟": "y"
        },
        "Vue": {
            "vue2": "y",
            "vue3": "y"
        }
      }
    }
  }
}

 uni_modules/zmm-watermark/readme.md

New file
@@ -0,0 +1,47 @@
#uniapp水印组件

原理   
循环标签

作者   
`zmm2113@qq.com`

版本  
`1.1.2`
> 兼容性支持：安卓、苹果、H5、微信小程序（其他平台未测试理论上支持）。不支持nvue！

优势  
> 支持富文本、自动计算所需水印数量不卡顿、自定义旋转角度等

一、使用示例
```
<template>
    <view class="container">
        <text>uniapp水印通用组件 zmm-watermark</text>
        <zmm-watermark :watermark="watermark"></zmm-watermark>
    </view>
</template>

<script>
    import img from '@/static/logo.png';
    export default {
        data() {
            return {
                watermark: '<h5>我是h5标签我是h5标签我是h5标签我是h5标签</h5><p style="color:#f00">我是p标签</p><br><img style="width:30px" src="' + img + '" />'
				
            }
        }
    }
</script>
```  
二、配置(注意配置数据类型)

配置|数据类型|默认参数|说明
-|-|-|-
watermark|String|"水印文字"|水印文字(支持html富文本)
color|String|"#000000"|水印文字默认颜色
show|Boolean|true|是否显示水印
opacity|Number|0.15|水印透明度
margin|Number|50|水印之间上下间距
rotate|Number|-21|水印旋转角度
maxWidth|Number|180|单条水印最大宽度