From e22ee79a288b909df09739bf3eb0b3eb89888df0 Mon Sep 17 00:00:00 2001
From: Lou <luzhiping@qqyjz.com>
Date: Wed, 21 Feb 2024 17:32:03 +0800
Subject: [PATCH] 个人资料添加水印，场所相关页面图片上传接口地址更换
---
subPackage/workbench/views/editCscj.vue | 2
subPackage/workbench/views/editExamine.vue | 2
uni_modules/zmm-watermark/changelog.md | 4
subPackage/workbench/views/checkReform.vue | 2
mixin/uploadMixinPlace.js | 136 +++++++++++++
subPackage/user/editUserInfo/editUserInfo.vue | 136 +++++++-----
subPackage/workbench/views/cscj.vue | 2
uni_modules/zmm-watermark/package.json | 83 ++++++++
subPackage/label/check.vue | 2
subPackage/workbench/views/selfCheckDetail.vue | 2
uni_modules/zmm-watermark/components/zmm-watermark/zmm-watermark.vue | 125 ++++++++++++
uni_modules/zmm-watermark/readme.md | 47 ++++
12 files changed, 480 insertions(+), 63 deletions(-)
diff --git a/mixin/uploadMixinPlace.js b/mixin/uploadMixinPlace.js
new file mode 100644
index 0000000..d245761
--- /dev/null
+++ b/mixin/uploadMixinPlace.js
@@ -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()
+ },
+ }
+}
\ No newline at end of file
diff --git a/subPackage/label/check.vue b/subPackage/label/check.vue
index 300fc72..fee467d 100644
--- a/subPackage/label/check.vue
+++ b/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"
diff --git a/subPackage/user/editUserInfo/editUserInfo.vue b/subPackage/user/editUserInfo/editUserInfo.vue
index 3f7c831..1eaf0e1 100644
--- a/subPackage/user/editUserInfo/editUserInfo.vue
+++ b/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;
}
}
diff --git a/subPackage/workbench/views/checkReform.vue b/subPackage/workbench/views/checkReform.vue
index 177cfd6..363b9a5 100644
--- a/subPackage/workbench/views/checkReform.vue
+++ b/subPackage/workbench/views/checkReform.vue
@@ -152,7 +152,7 @@
</template>
<script>
- import uploadMixin from "@/mixin/uploadMixin";
+ import uploadMixin from "@/mixin/uploadMixinPlace";
import {
getPlaceCheckItem,
getPlaceCheckReformDetail,
diff --git a/subPackage/workbench/views/cscj.vue b/subPackage/workbench/views/cscj.vue
index e37c17b..cdd01bc 100644
--- a/subPackage/workbench/views/cscj.vue
+++ b/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
diff --git a/subPackage/workbench/views/editCscj.vue b/subPackage/workbench/views/editCscj.vue
index ac58d68..afb89ae 100644
--- a/subPackage/workbench/views/editCscj.vue
+++ b/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
diff --git a/subPackage/workbench/views/editExamine.vue b/subPackage/workbench/views/editExamine.vue
index 5ad2511..1460c92 100644
--- a/subPackage/workbench/views/editExamine.vue
+++ b/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 {
diff --git a/subPackage/workbench/views/selfCheckDetail.vue b/subPackage/workbench/views/selfCheckDetail.vue
index 1f01f63..5d5c024 100644
--- a/subPackage/workbench/views/selfCheckDetail.vue
+++ b/subPackage/workbench/views/selfCheckDetail.vue
@@ -156,7 +156,7 @@
</template>
<script>
- import uploadMixin from "@/mixin/uploadMixin";
+ import uploadMixin from "@/mixin/uploadMixinPlace";
import {
getPlaceCheckItem,
getPlaceCheckReformDetail,
diff --git a/uni_modules/zmm-watermark/changelog.md b/uni_modules/zmm-watermark/changelog.md
new file mode 100644
index 0000000..3dc31f8
--- /dev/null
+++ b/uni_modules/zmm-watermark/changelog.md
@@ -0,0 +1,4 @@
+## 1.1.2（2022-01-12）
+调整为uni_modules目录规范
+## 1.0（2021-03-31）
+发布1.0版本
\ No newline at end of file
diff --git a/uni_modules/zmm-watermark/components/zmm-watermark/zmm-watermark.vue b/uni_modules/zmm-watermark/components/zmm-watermark/zmm-watermark.vue
new file mode 100644
index 0000000..9178e9a
--- /dev/null
+++ b/uni_modules/zmm-watermark/components/zmm-watermark/zmm-watermark.vue
@@ -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>
diff --git a/uni_modules/zmm-watermark/package.json b/uni_modules/zmm-watermark/package.json
new file mode 100644
index 0000000..263fb86
--- /dev/null
+++ b/uni_modules/zmm-watermark/package.json
@@ -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"
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/uni_modules/zmm-watermark/readme.md b/uni_modules/zmm-watermark/readme.md
new file mode 100644
index 0000000..5c17848
--- /dev/null
+++ b/uni_modules/zmm-watermark/readme.md
@@ -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|单条水印最大宽度
\ No newline at end of file
--
Gitblit v1.9.3