ldeyun/ruoyi-geek-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化类型

Browse Source
This commit is contained in:
D 2023-09-01 18:59:31 +08:00
parent b86676570b
commit 627badca26
1 changed files with 566 additions and 558 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

212
src/pages_mine/pages/avatar/index.vue
View File

@ -2,25 +2,37 @@
<view class="container"> <view class="container">
<view class="page-body uni-content-info"> <view class="page-body uni-content-info">
<view class='cropper-content'> <view class='cropper-content'>
<view v-if="isShowImg" class="uni-corpper" :style="'width:'+cropperInitW+'px;height:'+cropperInitH+'px;background:#000'"> <view v-if="isShowImg" class="uni-corpper"
<view class="uni-corpper-content" :style="'width:'+cropperW+'px;height:'+cropperH+'px;left:'+cropperL+'px;top:'+cropperT+'px'"> :style="'width:' + cropperInitW + 'px;height:' + cropperInitH + 'px;background:#000'">
<image :src="imageSrc" :style="'width:'+cropperW+'px;height:'+cropperH+'px'"></image> <view class="uni-corpper-content"
<view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove" @touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd" :style="'width:' + cropperW + 'px;height:' + cropperH + 'px;left:' + cropperL + 'px;top:' + cropperT + 'px'">
:style="'left:'+cutL+'px;top:'+cutT+'px;right:'+cutR+'px;bottom:'+cutB+'px'"> <image :src="imageSrc" :style="'width:' + cropperW + 'px;height:' + cropperH + 'px'"></image>
<view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove"
@touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd"
:style="'left:' + cutL + 'px;top:' + cutT + 'px;right:' + cutR + 'px;bottom:' + cutB + 'px'">
<view class="uni-cropper-view-box"> <view class="uni-cropper-view-box">
<view class="uni-cropper-dashed-h"></view> <view class="uni-cropper-dashed-h"></view>
<view class="uni-cropper-dashed-v"></view> <view class="uni-cropper-dashed-v"></view>
<view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> <view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart"
<view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> @touchmove.stop="dragMove"></view>
<view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> <view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart"
<view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> @touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> <view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart"
@touchmove.stop="dragMove"></view>
<view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart"
@touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart"
@touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-tr" data-drag="topTight"></view> <view class="uni-cropper-point point-tr" data-drag="topTight"></view>
<view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> <view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart"
<view class="uni-cropper-point point-rb" data-drag="rightBottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> @touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove" @touchend.stop="dragEnd"></view> <view class="uni-cropper-point point-rb" data-drag="rightBottom"
@touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart"
@touchmove.stop="dragMove" @touchend.stop="dragEnd"></view>
<view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view> <view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view>
<view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> <view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart"
@touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-lt" data-drag="leftTop"></view> <view class="uni-cropper-point point-lt" data-drag="leftTop"></view>
</view> </view>
</view> </view>
@ -31,20 +43,21 @@
<button type="primary reverse" @click="getImage" style='margin-top: 30rpx;'> 选择头像 </button> <button type="primary reverse" @click="getImage" style='margin-top: 30rpx;'> 选择头像 </button>
<button type="warn" @click="getImageInfo" style='margin-top: 30rpx;'> 提交 </button> <button type="warn" @click="getImageInfo" style='margin-top: 30rpx;'> 提交 </button>
</view> </view>
<canvas canvas-id="myCanvas" :style="'position:absolute;border: 1px solid red; width:'+imageW+'px;height:'+imageH+'px;top:-9999px;left:-9999px;'"></canvas> <canvas canvas-id="myCanvas"
:style="'position:absolute;border: 1px solid red; width:' + imageW + 'px;height:' + imageH + 'px;top:-9999px;left:-9999px;'"></canvas>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import config from '@/config' import config from '@/config'
import store from "@/store" import store from "@/store"
import { uploadAvatar } from "@/api/system/user" import { uploadAvatar } from "@/api/system/user"
const baseUrl = config.baseUrl const baseUrl = config.baseUrl
let sysInfo = uni.getSystemInfoSync() let sysInfo = uni.getSystemInfoSync()
let SCREEN_WIDTH = sysInfo.screenWidth let SCREEN_WIDTH = sysInfo.screenWidth
let PAGE_X, // 手按下的x位置 let PAGE_X, // 手按下的x位置
PAGE_Y, // 手按下y的位置 PAGE_Y, // 手按下y的位置
PR = sysInfo.pixelRatio, // dpi PR = sysInfo.pixelRatio, // dpi
T_PAGE_X, // 手移动的时候x的位置 T_PAGE_X, // 手移动的时候x的位置
@ -62,7 +75,7 @@
INIT_DRAG_POSITION = 100, // 初始化屏幕宽度和裁剪区域的宽度之差，用于设置初始化裁剪的宽度 INIT_DRAG_POSITION = 100, // 初始化屏幕宽度和裁剪区域的宽度之差，用于设置初始化裁剪的宽度
DRAW_IMAGE_W = sysInfo.screenWidth // 设置生成的图片宽度 DRAW_IMAGE_W = sysInfo.screenWidth // 设置生成的图片宽度
export default { export default {
/** /**
* 页面的初始数据 * 页面的初始数据
*/ */
@ -255,11 +268,11 @@
canvasId: 'myCanvas', canvasId: 'myCanvas',
success: function (res) { success: function (res) {
uni.hideLoading() uni.hideLoading()
let data = {name: 'avatarfile', filePath: res.tempFilePath} let data = { name: 'avatarfile', filePath: res.tempFilePath }
uploadAvatar(data).then(response => { uploadAvatar(data).then(response => {
//store.commit('SET_AVATAR', response.imgUrl) //store.commit('SET_AVATAR', response.imgUrl)
/*cloud*/ /*cloud*/
store.commit('SET_AVATAR',baseUrl + response.imgUrl) store.commit('SET_AVATAR', baseUrl + response.imgUrl)
uni.showToast({ title: "修改成功", icon: 'success' }) uni.showToast({ title: "修改成功", icon: 'success' })
uni.$emit('refresh'); uni.$emit('refresh');
uni.navigateBack(); uni.navigateBack();
@ -332,33 +345,22 @@
} }
} }
} }
} }
</script> </script>
<style> <style>
/* pages/uni-cropper/index.wxss */ /* pages/uni-cropper/index.wxss */
.uni-content-info { .cropper-config {
/* position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
align-items: center;
flex-direction: column; */
}
.cropper-config {
padding: 20rpx 40rpx; padding: 20rpx 40rpx;
} }
.cropper-content { .cropper-content {
min-height: 750rpx; min-height: 750rpx;
width: 100%; width: 100%;
} }
.uni-corpper { .uni-corpper {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
-webkit-user-select: none; -webkit-user-select: none;
@ -368,13 +370,13 @@
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; -webkit-touch-callout: none;
box-sizing: border-box; box-sizing: border-box;
} }
.uni-corpper-content { .uni-corpper-content {
position: relative; position: relative;
} }
.uni-corpper-content image { .uni-corpper-content image {
display: block; display: block;
width: 100%; width: 100%;
min-width: 0 !important; min-width: 0 !important;
@ -384,10 +386,11 @@
max-height: none !important; max-height: none !important;
image-orientation: 0deg !important; image-orientation: 0deg !important;
margin: 0 auto; margin: 0 auto;
} }
/* 移动图片效果 */
.uni-cropper-drag-box { /* 移动图片效果 */
.uni-cropper-drag-box {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -396,16 +399,17 @@
cursor: move; cursor: move;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
z-index: 1; z-index: 1;
} }
/* 内部的信息 */
.uni-corpper-crop-box { /* 内部的信息 */
.uni-corpper-crop-box {
position: absolute; position: absolute;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
z-index: 2; z-index: 2;
} }
.uni-corpper-crop-box .uni-cropper-view-box { .uni-corpper-crop-box .uni-cropper-view-box {
position: relative; position: relative;
display: block; display: block;
width: 100%; width: 100%;
@ -413,10 +417,11 @@
overflow: visible; overflow: visible;
outline: 1rpx solid #69f; outline: 1rpx solid #69f;
outline-color: rgba(102, 153, 255, .75) outline-color: rgba(102, 153, 255, .75)
} }
/* 横向虚线 */
.uni-cropper-dashed-h { /* 横向虚线 */
.uni-cropper-dashed-h {
position: absolute; position: absolute;
top: 33.33333333%; top: 33.33333333%;
left: 0; left: 0;
@ -424,10 +429,11 @@
height: 33.33333333%; height: 33.33333333%;
border-top: 1rpx dashed rgba(255, 255, 255, 0.5); border-top: 1rpx dashed rgba(255, 255, 255, 0.5);
border-bottom: 1rpx dashed rgba(255, 255, 255, 0.5); border-bottom: 1rpx dashed rgba(255, 255, 255, 0.5);
} }
/* 纵向虚线 */
.uni-cropper-dashed-v { /* 纵向虚线 */
.uni-cropper-dashed-v {
position: absolute; position: absolute;
left: 33.33333333%; left: 33.33333333%;
top: 0; top: 0;
@ -435,10 +441,11 @@
height: 100%; height: 100%;
border-left: 1rpx dashed rgba(255, 255, 255, 0.5); border-left: 1rpx dashed rgba(255, 255, 255, 0.5);
border-right: 1rpx dashed rgba(255, 255, 255, 0.5); border-right: 1rpx dashed rgba(255, 255, 255, 0.5);
} }
/* 四个方向的线 为了之后的拖动事件*/
.uni-cropper-line-t { /* 四个方向的线 为了之后的拖动事件*/
.uni-cropper-line-t {
position: absolute; position: absolute;
display: block; display: block;
width: 100%; width: 100%;
@ -448,9 +455,9 @@
height: 1rpx; height: 1rpx;
opacity: 0.1; opacity: 0.1;
cursor: n-resize; cursor: n-resize;
} }
.uni-cropper-line-t::before { .uni-cropper-line-t::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -462,9 +469,9 @@
height: 41rpx; height: 41rpx;
background: transparent; background: transparent;
z-index: 11; z-index: 11;
} }
.uni-cropper-line-r { .uni-cropper-line-r {
position: absolute; position: absolute;
display: block; display: block;
background-color: #69f; background-color: #69f;
@ -474,9 +481,9 @@
opacity: 0.1; opacity: 0.1;
height: 100%; height: 100%;
cursor: e-resize; cursor: e-resize;
} }
.uni-cropper-line-r::before { .uni-cropper-line-r::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
@ -488,9 +495,9 @@
height: 100%; height: 100%;
background: transparent; background: transparent;
z-index: 11; z-index: 11;
} }
.uni-cropper-line-b { .uni-cropper-line-b {
position: absolute; position: absolute;
display: block; display: block;
width: 100%; width: 100%;
@ -500,9 +507,9 @@
height: 1rpx; height: 1rpx;
opacity: 0.1; opacity: 0.1;
cursor: s-resize; cursor: s-resize;
} }
.uni-cropper-line-b::before { .uni-cropper-line-b::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -514,9 +521,9 @@
height: 41rpx; height: 41rpx;
background: transparent; background: transparent;
z-index: 11; z-index: 11;
} }
.uni-cropper-line-l { .uni-cropper-line-l {
position: absolute; position: absolute;
display: block; display: block;
background-color: #69f; background-color: #69f;
@ -526,9 +533,9 @@
opacity: 0.1; opacity: 0.1;
height: 100%; height: 100%;
cursor: w-resize; cursor: w-resize;
} }
.uni-cropper-line-l::before { .uni-cropper-line-l::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
@ -540,40 +547,40 @@
height: 100%; height: 100%;
background: transparent; background: transparent;
z-index: 11; z-index: 11;
} }
.uni-cropper-point { .uni-cropper-point {
width: 5rpx; width: 5rpx;
height: 5rpx; height: 5rpx;
background-color: #69f; background-color: #69f;
opacity: .75; opacity: .75;
position: absolute; position: absolute;
z-index: 3; z-index: 3;
} }
.point-t { .point-t {
top: -3rpx; top: -3rpx;
left: 50%; left: 50%;
margin-left: -3rpx; margin-left: -3rpx;
cursor: n-resize; cursor: n-resize;
} }
.point-tr { .point-tr {
top: -3rpx; top: -3rpx;
left: 100%; left: 100%;
margin-left: -3rpx; margin-left: -3rpx;
cursor: n-resize; cursor: n-resize;
} }
.point-r { .point-r {
top: 50%; top: 50%;
left: 100%; left: 100%;
margin-left: -3rpx; margin-left: -3rpx;
margin-top: -3rpx; margin-top: -3rpx;
cursor: n-resize; cursor: n-resize;
} }
.point-rb { .point-rb {
left: 100%; left: 100%;
top: 100%; top: 100%;
-webkit-transform: translate3d(-50%, -50%, 0); -webkit-transform: translate3d(-50%, -50%, 0);
@ -585,50 +592,51 @@
position: absolute; position: absolute;
z-index: 1112; z-index: 1112;
opacity: 1; opacity: 1;
} }
.point-b { .point-b {
left: 50%; left: 50%;
top: 100%; top: 100%;
margin-left: -3rpx; margin-left: -3rpx;
margin-top: -3rpx; margin-top: -3rpx;
cursor: n-resize; cursor: n-resize;
} }
.point-bl { .point-bl {
left: 0%; left: 0%;
top: 100%; top: 100%;
margin-left: -3rpx; margin-left: -3rpx;
margin-top: -3rpx; margin-top: -3rpx;
cursor: n-resize; cursor: n-resize;
} }
.point-l { .point-l {
left: 0%; left: 0%;
top: 50%; top: 50%;
margin-left: -3rpx; margin-left: -3rpx;
margin-top: -3rpx; margin-top: -3rpx;
cursor: n-resize; cursor: n-resize;
} }
.point-lt { .point-lt {
left: 0%; left: 0%;
top: 0%; top: 0%;
margin-left: -3rpx; margin-left: -3rpx;
margin-top: -3rpx; margin-top: -3rpx;
cursor: n-resize; cursor: n-resize;
} }
/* 裁剪框预览内容 */
.uni-cropper-viewer { /* 裁剪框预览内容 */
.uni-cropper-viewer {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
.uni-cropper-viewer image { .uni-cropper-viewer image {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
} }
</style> </style>