From a9ccdd2b950d1d612fdc3369e99b34e06bbd301d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B0=E5=B2=A9?= <tybb88x@gmail.com>
Date: Fri, 27 Jun 2025 17:08:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E9=A1=B5=E5=92=8C=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B5=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |    8 +-
 src/api/login.js                              |   82 +-
 src/api/request.js                            |    9 +-
 src/api/user.js                               |   27 +-
 .../avatar-cropper/avatar-cropper.vue         | 1300 +++++++++++++++++
 src/components/avatar-cropper/rotate.svg      |   15 +
 .../image-preview/image-preview.vue           |   20 +-
 .../picture-upload/picture-upload.vue         |   14 +-
 src/enum.js                                   |   23 +-
 src/pages/courseDetail/components/comment.vue |    2 +-
 src/pages/courseDetail/index.vue              |   34 +
 src/pages/courseDetail/submit.vue             |    5 +-
 src/pages/index/index.vue                     |   11 +-
 src/pages/me/index.vue                        |   12 +-
 src/pages/setting/index.vue                   |  263 +++-
 src/uni_modules/t-cropper/changelog.md        |   18 +
 .../components/t-cropper/t-cropper.scss       |  202 +++
 .../components/t-cropper/t-cropper.vue        | 1098 ++++++++++++++
 src/uni_modules/t-cropper/package.json        |   85 ++
 src/uni_modules/t-cropper/readme.md           |  186 +++
 .../t-cropper/static/svg/rotate.svg           |   15 +
 .../components/uv-textarea/props.js           |    2 +-
 22 files changed, 3298 insertions(+), 133 deletions(-)
 create mode 100644 src/components/avatar-cropper/avatar-cropper.vue
 create mode 100644 src/components/avatar-cropper/rotate.svg
 create mode 100644 src/uni_modules/t-cropper/changelog.md
 create mode 100644 src/uni_modules/t-cropper/components/t-cropper/t-cropper.scss
 create mode 100644 src/uni_modules/t-cropper/components/t-cropper/t-cropper.vue
 create mode 100644 src/uni_modules/t-cropper/package.json
 create mode 100644 src/uni_modules/t-cropper/readme.md
 create mode 100644 src/uni_modules/t-cropper/static/svg/rotate.svg

diff --git a/.env.development b/.env.development
index 4b7a4662..9db6bab1 100644
--- a/.env.development
+++ b/.env.development
@@ -9,14 +9,12 @@ ENV = 'development'
 # VITE_APP_BASE_API_Url = 'http://25.64.16.133:9786' 
 
 
-# VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
+VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
 
 app入口
-<<<<<<< HEAD
- VITE_APP_BASE_API_Url = 'http://25.18.122.65:7001'
-=======
+
 # VITE_APP_BASE_API_Url = 'http://25.18.122.65:7001'
 # VITE_APP_BASE_API_Url = 'http://25.16.122.65:7001'
 # VITE_APP_BASE_API_Url = 'http://25.18.122.66:9786'
->>>>>>> f9ef91e5fe7dbec56a29867b9d2d9f7e3792f0f4
+
 
diff --git a/src/api/login.js b/src/api/login.js
index 43953fab..648f0013 100644
--- a/src/api/login.js
+++ b/src/api/login.js
@@ -2,9 +2,12 @@ import request from '@/api/request'
 import common from "@/common/common";
 import {
 	setToken,
-	setUserInfo
+	setUserInfo,
+	getUserInfo
 } from "@/common/common";
-
+import {
+	get_base_url
+} from '@/api/request.js'
 
 // 账号登录接口
 export const useAccountLoginApp = (data) => request({
@@ -17,17 +20,10 @@ export const useAccountLoginApp = (data) => request({
 }) => {
 	if (rtnCode === '0000') {
 		setToken(body)
-		// deptId: ""
-		// deptName: null
-		// loginName: "ADMIN" // todo  id
-		// orgId: "00E200"
-		// orgName: "金融科技部"
-		// userId: "USER001"
-		// userName: "ADMIN" / todo  name
-		// userStatus: "01"
+
 		const user_data = await queryCurrentUser()
-		setUserInfo(user_data.body)
-		return user_data.body
+		return user_data
+
 	}
 	return Promise.reject({
 		rtnCode,
@@ -49,14 +45,14 @@ export const useAccountLoginApp = (data) => request({
 	 rtnCode: "9999"
 	 rtnTime: "2025-06-24 08:54:52"
 	*/
-	
+
 	return Promise.reject(res)
 })
 
 /**
  * 获取个人信息
  * 入参
-	 gender F是女 M男
+	 gender f是女 m男
 	 imageAddr： 图片
 	 loginName  ID
 	 userName  姓名
@@ -65,6 +61,64 @@ export const queryCurrentUser = (data) => request({
 	url: '/traapp/access/queryCurrentUser',
 	method: 'post',
 	data
+}).then(res => {
+	// deptId: ""
+	// deptName: null
+	// loginName: "ADMIN" // todo  id
+	// orgId: "00E200"
+	// orgName: "金融科技部"
+	// userId: "USER001"
+	// userName: "ADMIN" / todo  name
+	// userStatus: "01"
+	setUserInfo(res.body)
+	console.log('预加载头像');
+	const base_url = get_base_url()
+	// 预加载头像
+	// #ifdef APP-PLUS
+	const updateUserAvatar = (imagePath) => {
+	  const userInfo = getUserInfo()
+	  setUserInfo({
+	    ...userInfo,
+	    'imagePath': imagePath
+	  })
+	}
+	
+	try {
+	  const pathName = res.body.imageAddr
+	  const url = base_url + pathName
+	  // 生成唯一文件名，避免冲突
+	  const filename = pathName.split('/').pop()
+	  const localFilePath = '_downloads/' + filename
+	  
+	  // 先检查是否存在
+	  uni.getFileInfo({
+	    filePath: localFilePath,
+	    success: () => {
+	      console.log('头像已存在，无需下载');
+	      updateUserAvatar(localFilePath)
+	    },
+	    fail: () => {
+	      console.log('开始下载头像:', url);
+	      const dtask = plus.downloader.createDownload(
+	        url, {
+	          method: 'GET',
+	          filename: '_downloads/' + filename
+	        },
+	        (download, status) => {
+	          if (status === 200) {
+	            console.log('头像下载成功:', download.filename);
+	            updateUserAvatar(download.filename)
+	          } 
+	        }
+	      )
+	      dtask.start();
+	    }
+	  })
+	} catch (error) {
+	  console.error('头像预加载过程发生错误:', error);
+	}
+	// #endif
+	return res.body
 })
 
 //获取隐私协议
diff --git a/src/api/request.js b/src/api/request.js
index 7b232585..4b061c66 100644
--- a/src/api/request.js
+++ b/src/api/request.js
@@ -50,7 +50,8 @@ export default function request({
 	meta,
 	isStream,
 	suppressErrors,
-	header = {}
+	header = {},
+	timeout = 6000
 }) {
 	const base_url = get_base_url(url);
 
@@ -70,6 +71,7 @@ export default function request({
 			data: data,
 			method: method,
 			header: headers_base,
+			timeout:timeout,
 			success: (response) => {
 				if (isStream) { // 流式传输，直接返回
 					return resolve(response);
@@ -92,11 +94,14 @@ export default function request({
 				if (REQUES_ERROR_CODES['NO_LOGIN'].includes(res.rtnCode)) {
 					goto_login_fun()
 				}
-
+				if (res?.rtnCode === '9999') {
+					common.msg("系统异常.")
+				}
 				return reject(res)
 			},
 			fail(res) {
 				console.log('请求错误', res, url, base_url);
+				return reject(res)
 			}
 		});
 	})
diff --git a/src/api/user.js b/src/api/user.js
index 61674f89..87aa7224 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -12,7 +12,28 @@ export const queryTraStdyStatisticsSelf = (data) => {
     return request({
         url: '/traapp/traStdyInfo/queryTraStdyStatisticsSelf',
         method: 'post',
-        data,
-        suppressErrors: true
+        data
     });
-};
\ No newline at end of file
+};
+
+// 更新性别 
+export const updateDfSysUserExtandInfoGender  = (data) => {
+    /**
+     
+     **/
+    return request({
+        url: '/traapp/dfSysUserInfo/updateDfSysUserExtandInfoGender ',
+        method: 'post',
+        data
+    });
+};
+
+ // 更新照片
+ export const updateDfSysUserExtandInfoImageAddr = (data) => {
+     return request({
+         url: '/traapp/dfSysUserInfo/updateDfSysUserExtandInfoImageAddr',
+         method: 'post',
+         data
+     });
+ };
+  
\ No newline at end of file
diff --git a/src/components/avatar-cropper/avatar-cropper.vue b/src/components/avatar-cropper/avatar-cropper.vue
new file mode 100644
index 00000000..c66776b9
--- /dev/null
+++ b/src/components/avatar-cropper/avatar-cropper.vue
@@ -0,0 +1,1300 @@
+<template>
+  <view class="t-cropper" v-show="props.imageUrl" disable-scroll>
+    <!-- #ifdef MP-WEIXIN || MP-ALIPAY-->
+    <canvas
+      type="2d"
+      canvas-id="canvas-cropper"
+      id="canvas-cropper"
+      class="canvas"
+    ></canvas>
+    <!-- #endif -->
+
+    <!-- #ifdef APP-PLUS || H5 -->
+    <canvas
+      :canvas-id="canvasId"
+      :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
+    ></canvas>
+    <!-- #endif -->
+    <!-- 裁剪区域 -->
+    <view class="t-preview-container" :class="{ showPage: inInit }">
+      <view
+        class="preview-body"
+        @touchstart="(e) => touchStart(e, 'body')"
+        @touchmove="touchMove"
+        @touchend="touchEnd"
+        @touchcancel="touchCancel"
+      >
+        <!-- 完整背景图片 -->
+        <view
+          class="image-wrap"
+          :class="{ transit: transit }"
+          :style="comImageStyle('image-wrap')"
+        >
+          <image
+            class="image"
+            :class="{ transit: transit }"
+            :src="imageUrl"
+            @load="imageLoad"
+            :style="comImageStyle('image')"
+          />
+        </view>
+        <view class="mask-model"></view>
+        <view
+          class="frame-box"
+          :class="{ transit: transit }"
+          :style="comImageStyle('frame-box')"
+        >
+          <view class="rect" :style="cirStyle">
+            <!-- 裁剪框图片 -->
+            <view
+              class="image-rect"
+              :class="{ transit: transit }"
+              :style="comImageStyle('image-rect')"
+            >
+              <image
+                class="rect-img"
+                :class="{ transit: transit }"
+                :src="imageUrl"
+                :style="comImageStyle('image')"
+              />
+            </view>
+          </view>
+          <!-- 矩阵框线条 -->
+          <view v-if="props.radius < 50" class="line-box">
+            <view class="line-one"></view>
+            <view class="line-two"></view>
+            <view class="line-three"></view>
+            <view class="line-four"></view>
+          </view>
+          <view
+            class="frame-left-top"
+            @touchstart.stop="(e) => touchStart(e, 'left-top')"
+          ></view>
+          <view
+            class="frame-left-bottom"
+            @touchstart.stop="(e) => touchStart(e, 'left-bottom')"
+          ></view>
+          <view
+            class="frame-right-top"
+            @touchstart.stop="(e) => touchStart(e, 'right-top')"
+          ></view>
+          <view
+            class="frame-right-bottom"
+            @touchstart.stop="(e) => touchStart(e, 'right-bottom')"
+          ></view>
+        </view>
+      </view>
+      <!-- 底部工具栏 -->
+      <view class="toolbar">
+        <view @tap.stop="onCancle" class="btn-cancel">取消</view>
+        <view
+          v-if="props.isRotateBtn && props.mode !== 'free'"
+          @tap.stop="onAngle"
+          class="btn-rotate"
+        >
+          <image src="./rotate.svg" data-type="inverse" />
+        </view>
+        <view @tap.stop="onConfirm" class="btn-confirm">确定</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { reactive, ref, watchEffect, computed, getCurrentInstance, toRefs } from "vue";
+
+/**
+ * @property {String} mode 模式
+ * @value fixed 固定模式，裁剪出固定大小
+ * @value ratio 等比模式，宽高等比缩放
+ * @value free 自由模式，不限制宽高比
+ * @property {String} imageUrl 图片路径
+ * @property {Number} width 宽度
+ * @property {Number} height 高度
+ * @property {Number} maxWidth 最大宽度
+ * @property {Number} minHeight 最大高度
+ * @property {Number} scaleRatio 裁剪比列缩放
+ * @property {Number} minRatio 最小缩放
+ * @property {Number} maxRatio 最大缩放
+ * @property {Boolean} isRotateBtn 是否显示旋转
+ * @property {Number} radius 裁剪图片圆角半径，单位px
+ * @property {Number} delay 快速重复点击时间
+ */
+const props = defineProps({
+  mode: {
+    type: String,
+    default: "ratio",
+  },
+  imageUrl: {
+    type: String,
+    default: "",
+  },
+  width: {
+    type: Number,
+    default: 200,
+  },
+  height: {
+    type: Number,
+    default: 200,
+  },
+  maxWidth: {
+    type: Number,
+    default: 1024,
+  },
+  maxHeight: {
+    type: Number,
+    default: 1024,
+  },
+  scaleRatio: {
+    type: Number,
+    default: 0.7,
+  },
+  minRatio: {
+    type: Number,
+    default: 1,
+  },
+  maxRatio: {
+    type: Number,
+    default: 3,
+  },
+  isRotateBtn: {
+    type: Boolean,
+    default: true,
+  },
+  radius: {
+    type: Number,
+    default: 0,
+  },
+  delay: {
+    type: Number,
+    default: 250,
+  },
+});
+
+// 获取组件实例
+const instance = getCurrentInstance();
+const inInit = ref(false);
+const $emit = defineEmits(["confirm", "cancel"]);
+const canvasId = ref(Math.random().toString(36).slice(-6));
+
+//获取原始图片的大小
+const origin = reactive({
+  imageUrl: "", //设置图片url
+  real: {
+    //原始图片宽高
+    width: 100,
+    height: 100,
+  },
+  body: {
+    //页面宽高
+    width: 100,
+    height: 100,
+  },
+  frame: {
+    //矩形框
+    left: 50,
+    top: 50,
+    width: 200,
+    height: 300,
+  },
+  bgImage: {
+    //背景框
+    left: 20,
+    top: 20,
+    width: 300,
+    height: 400,
+  },
+  rotate: 0,
+  transit: false,
+  canvasWidth: 100,
+  canvasHeight: 100,
+  frameSize: 150, //裁剪框最小尺寸
+});
+
+const { transit, rotate, imageUrl, canvasWidth, canvasHeight } = toRefs(origin);
+
+//监听原始图片的变动
+watchEffect(() => {
+  if (props.imageUrl) {
+    uni.showLoading({
+      title: "请稍候...",
+      mask: true,
+    });
+    origin.imageUrl = props.imageUrl; //设置图片url}
+  }
+});
+
+//检测图片加载完成
+const imageLoad = (e) => {
+  const { width, height } = e.detail;
+  origin.real.width = width;
+  origin.real.height = height;
+  var query = uni.createSelectorQuery().in(instance);
+  query
+    .select(".preview-body")
+    .boundingClientRect((data) => {
+      origin.body.width = data.width;
+      origin.body.height = data.height;
+      inInit.value = true;
+      imageReset(); //重置图片
+    })
+    .exec();
+};
+
+//重置图片
+const imageReset = () => {
+  origin.rotate = 0;
+  let frameRate = props.width / props.height; //裁剪比列
+  let frameHeight = origin.body.height * props.scaleRatio; //裁剪框图片高度 * 缩小0.7倍
+  let frameWidth = origin.body.width * props.scaleRatio; //裁剪框图片宽度 * 缩小0.7倍
+
+  // 裁剪框的位置：
+  // 缩放后的宽度/高度 > 组件裁剪的比例，就要对宽度重写
+  if (frameWidth / frameHeight > frameRate) {
+    frameWidth = frameHeight * frameRate;
+  } else {
+    frameHeight = frameWidth / frameRate;
+  }
+
+  // 裁剪框左边距=页面宽度-裁剪框宽度 / 2
+  let frameleft = (origin.body.width - frameWidth) / 2;
+  let frameTop = (origin.body.height - frameHeight) / 2;
+  origin.frame = {
+    left: frameleft,
+    top: frameTop,
+    width: frameWidth,
+    height: frameHeight,
+  };
+
+  // 背景图片位置：
+  let bgRate = origin.real.width / origin.real.height; //背景比列
+  let bgWidth = frameWidth;
+  let bgHeight = frameHeight;
+
+  // 裁剪框图片宽度/裁剪框图片高度>实际的图片比例
+  if (bgWidth / bgHeight > bgRate) {
+    bgHeight = bgWidth / bgRate;
+  } else {
+    bgWidth = bgHeight * bgRate;
+  }
+
+  // 背景左边距
+  let bgLeft = (frameWidth - bgWidth) / 2 + origin.frame.left;
+  // 背景右边距
+  let bgTop = (frameHeight - bgHeight) / 2 + origin.frame.top;
+
+  origin.bgImage = {
+    left: bgLeft,
+    top: bgTop,
+    width: bgWidth,
+    height: bgHeight,
+  };
+  uni.hideLoading();
+};
+
+//公共图片背景位置
+const comImageStyle = computed(() => (source) => {
+  const { left, top, width, height } = origin.bgImage;
+  if (source == "image-wrap") {
+    //计算背景盒子样式
+    return `
+      top: ${top}px;
+      left: ${left}px;
+      width: ${width}px;
+      height: ${height}px;
+    `;
+  } else if (source == "image") {
+    // 计算背景图片样式
+    let left = 0;
+    let top = 0;
+    let width = origin.bgImage.width;
+    let height = origin.bgImage.height;
+
+    if (origin.rotate % 180 != 0) {
+      width = origin.bgImage.height;
+      height = origin.bgImage.width;
+      top = width / 2 - height / 2;
+      left = height / 2 - width / 2;
+    }
+    const style = {};
+    style.left = left + "px";
+    style.top = top + "px";
+    style.width = width + "px";
+    style.height = height + "px";
+    style.transform = `rotate(${origin.rotate}deg)`;
+    return style;
+  } else if (source == "image-rect") {
+    // 计算裁剪框上显示的图片位置
+    return `
+      top: ${top - origin.frame.top}px;
+      left: ${left - origin.frame.left}px;
+      width: ${width}px;
+      height: ${height}px;
+    `;
+  } else if (source == "frame-box") {
+    return `
+      left: ${origin.frame.left}px;
+      top: ${origin.frame.top}px;
+      width: ${origin.frame.width}px;
+      height: ${origin.frame.height}px;
+    `;
+  }
+});
+
+//计算圆角比列
+const cirStyle = computed(() => {
+  const { width } = origin.frame;
+  let scale = props.width / width;
+  let radius = props.radius / scale;
+  return `
+  border-radius: ${radius}px
+  `;
+});
+
+// 取消按钮
+const onCancle = () => {
+  $emit("cancel");
+};
+// 旋转按钮
+const onAngle = () => {
+  origin.rotate -= 90; // 旋转的角度
+  let width = origin.bgImage.height; // 背景框宽度
+  let height = origin.bgImage.width; // 背景框高度
+  let left = origin.bgImage.left; // 背景框左边距
+  let top = origin.bgImage.top; // 背景框顶边距
+  let fWidth = origin.frame.width; // 裁剪框宽度
+  let fLeft = origin.frame.left; // 裁剪框左边距
+  let fTop = origin.frame.top; // 裁剪框顶边距
+  // 左边距 = 矩形框左边距 + (背景框顶部 - 裁剪框顶部)
+  left = fLeft + (top - fTop);
+  //  顶部边距 = 矩形框顶边距 -(背景框高度 - 矩形框宽度 -(矩形框左边距 - 背景框左边距))
+  top = fTop - (height - fWidth - (fLeft - origin.bgImage.left));
+
+  origin.bgImage = {
+    left: left,
+    top: top,
+    width: width,
+    height: height,
+  };
+  origin.transit = true;
+  setTimeout(() => {
+    origin.transit = false;
+  }, 300);
+};
+
+/**
+ * @name:防抖
+ * @param {function} fn
+ * @param {wait} wait
+ * @return {function}
+ */
+const debounce = (fn, wait = 1000) => {
+  let time = null;
+  return function (...args) {
+    if (time) clearTimeout(time);
+    time = setTimeout(() => {
+      fn.apply(this, args);
+    }, wait);
+  };
+};
+// 确定按钮
+const onConfirm = debounce(async () => {
+  // #ifdef H5 || APP-PLUS
+  confirmH5();
+  // #endif
+
+  // #ifdef MP-WEIXIN || MP-ALIPAY
+  confirmWx();
+  // #endif
+}, props.delay);
+
+// h5裁剪确认
+const confirmH5 = async () => {
+  let mx = computeMatrix(); //获取画布的信息
+  // 设备画布的宽高
+  origin.canvasWidth = mx.tw;
+  origin.canvasHeight = mx.th;
+  uni.showLoading({
+    title: "处理中",
+  });
+
+  // 设置宽高后等待更新完成在获取Canvas节点
+  await new Promise((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, 200);
+  });
+
+  // 创建一个画布
+  let ctx = uni.createCanvasContext(canvasId.value, instance);
+  // 矩形内清除指定的像素
+  await ctx.clearRect(0, 0, mx.tw, mx.th);
+  //剪切圆角
+  await drawClipImage(ctx, mx);
+  // 旋转
+  ctx.rotate((origin.rotate * Math.PI) / 180);
+  //绘制图片
+  ctx.drawImage(props.imageUrl, mx.sx, mx.sy, mx.sw, mx.sh, mx.dx, mx.dy, mx.dw, mx.dh);
+  ctx.restore();
+
+  ctx.draw(false, () => {
+    uni.canvasToTempFilePath(
+      {
+        canvasId: canvasId.value,
+        success: (res) => {
+          var path = res.tempFilePath;
+		  $emit("confirm", res);
+          // // #ifdef H5
+          // path = parseBlob(path);
+          // $emit("confirm", {
+          //   errMsg: "parseBlob:ok",
+          //   tempFilePath: path,
+          // });
+          // // #endif
+
+          // // #ifdef APP-PLUS
+          // $emit("confirm", res);
+          // // #endif
+        },
+        fail: (err) => {
+          console.log(err);
+        },
+        complete: () => {
+          uni.hideLoading(); //关闭loading
+        },
+      },
+      instance
+    );
+  });
+};
+// 微信确认
+const confirmWx = () => {
+  uni.showLoading({
+    title: "处理中",
+  });
+  let mx = computeMatrix(); //获取画布的信息
+  uni
+    .createSelectorQuery()
+    // #ifndef MP-ALIPAY
+    .in(instance)
+    // #endif
+    .select("#canvas-cropper")
+    .fields({
+      node: true,
+      size: true,
+    })
+    .exec(async (res) => {
+      const textCanvas = res[0].node;
+      const ctx = textCanvas.getContext("2d");
+
+      // 初始化画布大小
+      textCanvas.width = mx.tw;
+      textCanvas.height = mx.th;
+      // //绘制canvas
+      await drawClipImage(ctx, mx); //剪切圆角
+      await ctx.rotate((origin.rotate * Math.PI) / 180);
+      await createImage(origin.imageUrl, mx, ctx, textCanvas);
+
+      // #ifdef MP-WEIXIN
+      wx.canvasToTempFilePath({
+        canvas: textCanvas,
+        canvasId: "canvasID",
+        success: (res) => {
+          $emit("confirm", res);
+        },
+        fail: (err) => {
+          console.log(err);
+        },
+      });
+      // #endif
+
+      // #ifdef MP-ALIPAY
+      textCanvas.toTempFilePath({
+        success: (res) => {
+          $emit("confirm", res);
+        },
+        fail: (err) => {
+          console.log(err);
+        },
+      });
+      // #endif
+
+      uni.hideLoading(); //关闭loading
+    });
+};
+//剪切图片圆角
+const drawClipImage = (ctx, mx) => {
+  let { radius } = props;
+  if (radius > 0) {
+    const w = Math.round(mx.tw); //画布宽度
+    const h = Math.round(mx.th); //画布高度
+
+    // 被缩放后的尺寸且裁剪的宽高相同
+    if (props.width === props.height && w == h && props.width < w) {
+      radius = (w / props.width) * radius;
+    }
+    // 被缩放后的尺寸且裁剪的宽高不相同
+    if (props.width != props.height && w != h && props.width < w) {
+      console.log("11111111");
+      if (w > h) {
+        radius = (w / h) * radius;
+      } else {
+        radius = (h / w) * radius;
+      }
+    }
+    // 如果裁剪是圆形
+    if (w === h && radius >= w / 2) {
+      // 圆形
+      ctx.arc(w / 2, h / 2, w / 2, 0, 2 * Math.PI);
+    } else {
+      // 圆角矩形
+      if (w !== h) {
+        // 限制圆角半径不能超过短边的一半
+        radius = Math.min(w / 2, h / 2, radius);
+      }
+      // 其他形状
+      ctx.moveTo(radius, 0);
+      ctx.arcTo(w, 0, w, h, radius);
+      ctx.arcTo(w, h, 0, h, radius);
+      ctx.arcTo(0, h, 0, 0, radius);
+      ctx.arcTo(0, 0, w, 0, radius);
+      ctx.closePath();
+    }
+    ctx.clip(); //从原始画布剪切任意形状和尺寸的区域
+    ctx.restore(); //返回之前保存过的路径状态和属性
+  }
+};
+// 创建一个图片
+const createImage = (img, mx, ctx, textCanvas) => {
+  return new Promise((resolve) => {
+    const headerImg = textCanvas.createImage();
+    headerImg.src = img;
+    headerImg.onload = () => {
+      let result = ctx.drawImage(
+        headerImg,
+        mx.sx,
+        mx.sy,
+        mx.sw,
+        mx.sh,
+        mx.dx,
+        mx.dy,
+        mx.dw,
+        mx.dh
+      );
+      resolve(result);
+    };
+  });
+};
+
+//计算矩阵
+const computeMatrix = () => {
+  let width = props.width;
+  let height = props.height;
+  let mul = origin.bgImage.width / origin.real.width;
+  if (origin.rotate % 180 != 0) {
+    mul = origin.bgImage.height / origin.real.width;
+  }
+  if (props.mode != "fixed") {
+    width = origin.frame.width / mul;
+    height = origin.frame.height / mul;
+  }
+  var rate = width / height;
+  if (width > props.maxWidth) {
+    width = props.maxWidth;
+    height = width / rate;
+  }
+  if (height > props.maxHeight) {
+    height = props.maxHeight;
+    width = height * rate;
+  }
+  var sx = (origin.frame.left - origin.bgImage.left) / mul;
+  var sy = (origin.frame.top - origin.bgImage.top) / mul;
+  var sw = origin.frame.width / mul;
+  var sh = origin.frame.height / mul;
+  var ox = sx + sw / 2;
+  var oy = sy + sh / 2;
+  if (origin.rotate % 180 != 0) {
+    var temp = sw;
+    sw = sh;
+    sh = temp;
+  }
+  var angle = origin.rotate % 360;
+  if (angle < 0) {
+    angle += 360;
+  }
+  if (angle == 270) {
+    var x = origin.real.width - oy;
+    var y = ox;
+    ox = x;
+    oy = y;
+  }
+  if (angle == 180) {
+    var x = origin.real.width - ox;
+    var y = origin.real.height - oy;
+    ox = x;
+    oy = y;
+  }
+  if (angle == 90) {
+    var x = oy;
+    var y = origin.real.height - ox;
+    ox = x;
+    oy = y;
+  }
+  sx = ox - sw / 2;
+  sy = oy - sh / 2;
+  let dr = { x: 0, y: 0, w: width, h: height };
+  dr = parseRect(dr, -origin.rotate);
+  return {
+    tw: width,
+    th: height,
+    sx: sx,
+    sy: sy,
+    sw: sw,
+    sh: sh,
+    dx: dr.x,
+    dy: dr.y,
+    dw: dr.w,
+    dh: dr.h,
+  };
+};
+// 计算矩阵
+const parseRect = (rect, angle) => {
+  let x1 = rect.x;
+  let y1 = rect.y;
+  let x2 = rect.x + rect.w;
+  let y2 = rect.y + rect.h;
+  let p1 = parsePoint({ x: x1, y: y1 }, angle);
+  let p2 = parsePoint({ x: x2, y: y2 }, angle);
+  let result = {};
+  result.x = Math.min(p1.x, p2.x);
+  result.y = Math.min(p1.y, p2.y);
+  result.w = Math.abs(p2.x - p1.x);
+  result.h = Math.abs(p2.y - p1.y);
+  return result;
+};
+// 计算x、y
+const parsePoint = (point, angle) => {
+  var result = {};
+  result.x =
+    point.x * Math.cos((angle * Math.PI) / 180) -
+    point.y * Math.sin((angle * Math.PI) / 180);
+  result.y =
+    point.y * Math.cos((angle * Math.PI) / 180) +
+    point.x * Math.sin((angle * Math.PI) / 180);
+  return result;
+};
+// base64转blob
+const parseBlob = (base64) => {
+  var arr = base64.split(",");
+  var mime = arr[0].match(/:(.*?);/)[1];
+  var bstr = atob(arr[1]);
+  var n = bstr.length;
+  var u8arr = new Uint8Array(n);
+  for (var i = 0; i < n; i++) {
+    u8arr[i] = bstr.charCodeAt(i);
+  }
+  var url = URL || webkitURL;
+  return url.createObjectURL(new Blob([u8arr], { type: mime }));
+};
+/**
+ * 绘制手指触摸
+ */
+const move = reactive({
+  touchType: "body", //移动的类型
+  start: {
+    //开始的位置
+    frame: {
+      left: 0,
+      top: 0,
+      width: 0,
+      height: 0,
+    },
+    bgImage: {
+      left: 0,
+      top: 0,
+      width: 0,
+      height: 0,
+    },
+  },
+});
+
+const touch = reactive({
+  touchStart: [], //记录开始触摸
+});
+
+//  手指触摸动作开始
+const touchStart = (e, touchType = "") => {
+  // #ifdef APP-PLUS || H5
+  if (e.preventDefault) {
+    e.preventDefault();
+  }
+  if (e.stopPropagation) {
+    e.stopPropagation();
+  }
+  // #endif
+
+  switch (touchType) {
+    case "body":
+      move.touchType = "body";
+      break;
+    case "left-top":
+      move.touchType = "left-top";
+      break;
+    case "left-bottom":
+      move.touchType = "left-bottom";
+      break;
+    case "right-top":
+      move.touchType = "right-top";
+      break;
+    case "right-bottom":
+      move.touchType = "right-bottom";
+      break;
+    default:
+      move.touchType = "body";
+      break;
+  }
+
+  touch.touchStart = e.touches;
+  // 裁剪框的开始位置
+  move.start.frame.left = origin.frame.left;
+  move.start.frame.top = origin.frame.top;
+  move.start.frame.width = origin.frame.width;
+  move.start.frame.height = origin.frame.height;
+
+  // 背景图片的开始位置
+  move.start.bgImage.left = origin.bgImage.left;
+  move.start.bgImage.top = origin.bgImage.top;
+  move.start.bgImage.width = origin.bgImage.width;
+  move.start.bgImage.height = origin.bgImage.height;
+  return false;
+};
+
+// 手指触摸后移动
+const touchMove = (e) => {
+  // #ifdef APP-PLUS || H5
+  if (e.preventDefault) {
+    e.preventDefault();
+  }
+  if (e.stopPropagation) {
+    e.stopPropagation();
+  }
+  // #endif
+  // 单手操作
+  if (touch.touchStart.length == 1) {
+    if (move.touchType == "body") {
+      // 移动图片
+      moveImage(touch.touchStart[0], e.touches[0]);
+    } else {
+      if (props.mode != "fixed") {
+        // 放大缩小图片
+        scaleFrame(touch.touchStart[0], e.touches[0]);
+      }
+    }
+  } else if (touch.touchStart.length == 2 && e.touches.length == 2) {
+    var ta = touch.touchStart[0];
+    var tb = touch.touchStart[1];
+    var tc = e.touches[0];
+    var td = e.touches[1];
+    if (ta.identifier != tc.identifier) {
+      var temp = tc;
+      tc = td;
+      td = temp;
+    }
+    scaleImage(ta, tb, tc, td);
+  }
+};
+
+// 移动图片
+const moveImage = (ta, tb) => {
+  let mx = tb.clientX - ta.clientX;
+  let my = tb.clientY - ta.clientY;
+  // 开始移动图片背景 + 移动的左边距离
+  origin.bgImage.left = move.start.bgImage.left + mx;
+  origin.bgImage.top = move.start.bgImage.top + my;
+
+  let frameLeft = origin.frame.left;
+  let frameTop = origin.frame.top;
+  let frameWidth = origin.frame.width;
+  let frameHeight = origin.frame.height;
+
+  // 左边触边
+  if (origin.bgImage.left > frameLeft) {
+    origin.bgImage.left = frameLeft;
+  }
+  // 头部触边
+  if (origin.bgImage.top > frameTop) {
+    origin.bgImage.top = frameTop;
+  }
+  // 右边触边
+  if (origin.bgImage.left + origin.bgImage.width < frameLeft + frameWidth) {
+    origin.bgImage.left = frameLeft + frameWidth - origin.bgImage.width;
+  }
+  // 底部触边：背景距离头部+背景的高度 < 背景高度 + 矩形框顶部
+  if (origin.bgImage.top + origin.bgImage.height < frameTop + frameHeight) {
+    origin.bgImage.top = frameTop + frameHeight - origin.bgImage.height;
+  }
+};
+
+//缩放裁剪框
+const scaleFrame = (ta, tb) => {
+  let mx = tb.clientX - ta.clientX;
+  let my = tb.clientY - ta.clientY;
+  let x1 = move.start.frame.left;
+  let y1 = move.start.frame.top;
+  let x2 = move.start.frame.left + move.start.frame.width;
+  let y2 = move.start.frame.top + move.start.frame.height;
+  let cx1 = false;
+  let cy1 = false;
+  let cx2 = false;
+  let cy2 = false;
+  let mix = origin.frameSize;
+  let rate = origin.frame.width / origin.frame.height;
+
+  const { width: fWidth, height: fHeight } = origin.frame;
+  const { width: bgWidth, height: bgHeight } = origin.bgImage;
+  const { width: realWidth, height: realHeight } = origin.real;
+
+  //左上角
+  if (move.touchType == "left-top") {
+    x1 += mx;
+    y1 += my;
+    cx1 = true;
+    cy1 = true;
+    // 左下角
+  } else if (move.touchType == "left-bottom") {
+    x1 += mx;
+    y2 += my;
+    cx1 = true;
+    cy2 = true;
+    // 右上角
+  } else if (move.touchType == "right-top") {
+    x2 += mx;
+    y1 += my;
+    cx2 = true;
+    cy1 = true;
+    // 右下角
+  } else if (move.touchType == "right-bottom") {
+    x2 += mx;
+    y2 += my;
+    cx2 = true;
+    cy2 = true;
+  }
+
+  if (x1 < origin.bgImage.left) {
+    x1 = origin.bgImage.left;
+  }
+  if (y1 < origin.bgImage.top) {
+    y1 = origin.bgImage.top;
+  }
+  if (x2 > origin.bgImage.left + origin.bgImage.width) {
+    x2 = origin.bgImage.left + origin.bgImage.width;
+  }
+  if (y2 > origin.bgImage.top + origin.bgImage.height) {
+    y2 = origin.bgImage.top + origin.bgImage.height;
+  }
+  if (cx1) {
+    if (x1 > x2 - mix) {
+      x1 = x2 - mix;
+    }
+  }
+  if (cy1) {
+    if (y1 > y2 - mix) {
+      y1 = y2 - mix;
+    }
+  }
+  if (cx2) {
+    if (x2 < x1 + mix) {
+      x2 = x1 + mix;
+    }
+  }
+  if (cy2) {
+    if (y2 < y1 + mix) {
+      y2 = y1 + mix;
+    }
+  }
+  if (cx1) {
+    if (props.mode != "free") {
+      var val = x2 - rate * (y2 - y1);
+      if (x1 < val) {
+        x1 = val;
+      }
+    }
+  }
+  if (cy1) {
+    if (props.mode != "free") {
+      var val = y2 - (x2 - x1) / rate;
+      if (y1 < val) {
+        y1 = val;
+      }
+    }
+  }
+  if (cx2) {
+    if (props.mode != "free") {
+      var val = rate * (y2 - y1) + x1;
+      if (x2 > val) {
+        x2 = val;
+      }
+    }
+  }
+  if (cy2) {
+    if (props.mode != "free") {
+      var val = (x2 - x1) / rate + y1;
+      if (y2 > val) {
+        y2 = val;
+      }
+    }
+  }
+
+  // 裁剪框缩放限制
+  const owFrame = x2 - x1;
+  const ohFrame = y2 - y1;
+
+  if (owFrame < fWidth || ohFrame < fHeight) {
+    const currentRatio = props.scaleRatio * props.maxRatio;
+    const isScale =
+      bgWidth * currentRatio >= realWidth / props.scaleRatio &&
+      bgHeight * currentRatio >= realHeight / props.scaleRatio;
+    if (isScale) {
+      return false;
+    }
+  }
+
+  origin.frame.left = x1;
+  origin.frame.top = y1;
+  origin.frame.width = x2 - x1;
+  origin.frame.height = y2 - y1;
+};
+
+//双指缩放图片
+const scaleImage = (ta, tb, tc, td) => {
+  let x1 = ta.clientX;
+  let y1 = ta.clientY;
+  let x2 = tb.clientX;
+  let y2 = tb.clientY;
+  let x3 = tc.clientX;
+  let y3 = tc.clientY;
+  let x4 = td.clientX;
+  let y4 = td.clientY;
+  let ol = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
+  let el = Math.sqrt((x3 - x4) * (x3 - x4) + (y3 - y4) * (y3 - y4));
+  let ocx = (x1 + x2) / 2;
+  let ocy = (y1 + y2) / 2;
+  let ecx = (x3 + x4) / 2;
+  let ecy = (y3 + y4) / 2;
+  let ax = ecx - ocx;
+  let ay = ecy - ocy;
+  let scale = el / ol;
+
+  // 检测放大/缩小倍率
+  if (move.start.bgImage.width * scale < origin.frame.width) {
+    scale = origin.frame.width / move.start.bgImage.width;
+  }
+
+  if (move.start.bgImage.height * scale < origin.frame.height) {
+    scale = origin.frame.height / move.start.bgImage.height;
+  }
+
+  // 最大缩放
+  if (move.start.bgImage.width * scale > origin.frame.width * props.maxRatio) {
+    return;
+  }
+
+  origin.bgImage.left =
+    move.start.bgImage.left + ax - (ocx - move.start.bgImage.left) * (scale - 1);
+
+  origin.bgImage.top =
+    move.start.bgImage.top + ay - (ocy - move.start.bgImage.top) * (scale - 1);
+
+  origin.bgImage.width = move.start.bgImage.width * scale;
+  origin.bgImage.height = move.start.bgImage.height * scale;
+
+  if (origin.bgImage.left > origin.frame.left) {
+    origin.bgImage.left = origin.frame.left;
+  }
+  if (origin.bgImage.top > origin.frame.top) {
+    origin.bgImage.top = origin.frame.top;
+  }
+  if (
+    origin.bgImage.left + origin.bgImage.width <
+    origin.frame.left + origin.frame.width
+  ) {
+    origin.bgImage.left = origin.frame.left + origin.frame.width - origin.bgImage.width;
+  }
+  if (
+    origin.bgImage.top + origin.bgImage.height <
+    origin.frame.top + origin.frame.height
+  ) {
+    origin.bgImage.top = origin.frame.top + origin.frame.height - origin.bgImage.height;
+  }
+};
+
+// 手指触摸动作结束
+const touchEnd = () => {
+  touch.touchStart = [];
+  resizeImage(); //调整图片的大小
+};
+
+// 手指触摸动作被打断，如来电提醒，弹窗
+const touchCancel = () => {
+  touch.touchStart = [];
+};
+
+// 调整图片的大小
+const resizeImage = () => {
+  var rate = origin.frame.width / origin.frame.height; //比列
+  var width = origin.body.width * props.scaleRatio; //裁剪框图片高度 * 缩小0.7倍
+  var height = origin.body.height * props.scaleRatio; //裁剪框图片宽度 * 缩小0.7倍
+  // 图片的位置：
+  // 缩放后的宽度/高度 > 组件裁剪的比例，就要对宽度重写
+  if (width / height > rate) {
+    width = height * rate;
+  } else {
+    height = width / rate;
+  }
+  var left = (origin.body.width - width) / 2;
+  var top = (origin.body.height - height) / 2;
+  var mul = width / origin.frame.width;
+  var ox = origin.frame.left - origin.bgImage.left;
+  var oy = origin.frame.top - origin.bgImage.top;
+
+  origin.frame = {
+    left: left,
+    top: top,
+    width: width,
+    height: height,
+  };
+
+  width = origin.bgImage.width * mul;
+  height = origin.bgImage.height * mul;
+  left = origin.frame.left - ox * mul;
+  top = origin.frame.top - oy * mul;
+  origin.bgImage = {
+    left: left,
+    top: top,
+    width: width,
+    height: height,
+  };
+  if (mul != 1) {
+    origin.transit = true;
+    setTimeout(() => {
+      origin.transit = false;
+    }, 300);
+  }
+};
+
+/**
+ * 绘制手指触摸结束
+ */
+</script>
+
+<style>
+page {
+  overflow: hidden;
+  overscroll-behavior: none;
+}
+</style>
+<style lang="scss" scoped>
+$clipper-edge-border-width: 6rpx !default;
+
+.t-cropper {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  z-index: 1000;
+  overflow: hidden;
+  .canvas {
+    position: absolute;
+    top: 5000px;
+    left: 5000px;
+  }
+  // 裁剪区域
+  .t-preview-container {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    bottom: 0;
+    z-index: 1000;
+    opacity: 0;
+    overflow: hidden;
+
+    .preview-body {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background: #000;
+      overflow: hidden;
+      .mask-model {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        background: #000;
+        opacity: 0.4;
+        pointer-events: none;
+      }
+      .image-wrap {
+        position: absolute;
+        .image {
+          position: absolute;
+        }
+      }
+      // 裁剪框盒子
+      .frame-box {
+        position: absolute;
+        left: 100px;
+        top: 100px;
+        width: 200px;
+        height: 200px;
+        // 矩形图片
+        .rect {
+          position: absolute;
+          left: -2px;
+          top: -2px;
+          width: 100%;
+          height: 100%;
+          border: 2rpx solid white;
+          overflow: hidden;
+          box-sizing: content-box;
+          .image-rect {
+            position: absolute;
+            .rect-img {
+              position: absolute;
+            }
+          }
+        }
+        //裁剪框线条
+        .line-one {
+          position: absolute;
+          width: 100%;
+          border-top: 1px dashed #ccc;
+          left: 0;
+          top: 33.3%;
+          box-sizing: content-box;
+        }
+        .line-two {
+          position: absolute;
+          width: 100%;
+          border-top: 1px dashed #ccc;
+          left: 0;
+          top: 66.7%;
+          box-sizing: content-box;
+        }
+        .line-three {
+          position: absolute;
+          height: 100%;
+          border-right: 1px dashed #ccc;
+          top: 0;
+          left: 33.3%;
+          box-sizing: content-box;
+        }
+        .line-four {
+          position: absolute;
+          height: 100%;
+          border-right: 1px dashed #ccc;
+          top: 0;
+          left: 66.7%;
+          box-sizing: content-box;
+        }
+        .frame-left-top {
+          position: absolute;
+          width: 20px;
+          height: 20px;
+          left: -8rpx;
+          top: -8rpx;
+          border-left: 4rpx solid #fff;
+          border-top: 4rpx solid #fff;
+          box-sizing: content-box;
+        }
+        .frame-left-bottom {
+          position: absolute;
+          width: 20px;
+          height: 20px;
+          left: -8rpx;
+          bottom: -4rpx;
+          border-left: 4rpx solid #fff;
+          border-bottom: 4rpx solid #fff;
+          box-sizing: content-box;
+        }
+        .frame-right-top {
+          position: absolute;
+          width: 20px;
+          height: 20px;
+          right: -4rpx;
+          top: -8rpx;
+          border-right: 4rpx solid #fff;
+          border-top: 4rpx solid #fff;
+          box-sizing: content-box;
+        }
+        .frame-right-bottom {
+          position: absolute;
+          width: 20px;
+          height: 20px;
+          right: -4rpx;
+          bottom: -4rpx;
+          border-right: 4rpx solid #fff;
+          border-bottom: 4rpx solid #fff;
+          box-sizing: content-box;
+        }
+      }
+    }
+
+    // 底部工具栏
+    .toolbar {
+      position: absolute;
+      width: calc(100% - 64rpx);
+      height: 100rpx;
+      left: 0;
+      bottom: 10rpx;
+      text-align: center;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 32rpx;
+      align-items: center;
+      // IOS 底部安全距离
+      padding-bottom: constant(safe-area-inset-bottom);
+      padding-bottom: env(safe-area-inset-bottom);
+      .btn-cancel {
+        width: 112rpx;
+        font-size: 28rpx;
+        color: #d5dfe5;
+        font-weight: bold;
+      }
+      .btn-rotate {
+        width: 112rpx;
+        font-size: 28rpx;
+        color: #d5dfe5;
+        font-weight: bold;
+        image {
+          width: 60rpx;
+          height: 60rpx;
+        }
+      }
+      .btn-confirm {
+        font-size: 28rpx;
+        color: #ffffff;
+        font-weight: bold;
+        width: 112rpx;
+        height: 60rpx;
+        line-height: 60rpx;
+        background: #07c160;
+        border-radius: 6rpx;
+        text-align: center;
+      }
+    }
+
+    .transit {
+      transition: width 0.3s, height 0.3s, left 0.3s, top 0.3s, transform 0.3s;
+    }
+  }
+  .showPage {
+    opacity: 1 !important;
+  }
+}
+
+</style>
diff --git a/src/components/avatar-cropper/rotate.svg b/src/components/avatar-cropper/rotate.svg
new file mode 100644
index 00000000..0143706c
--- /dev/null
+++ b/src/components/avatar-cropper/rotate.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="30px" height="30px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2.4306;stroke-miterlimit:10;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M17.1,24.2h-12c-0.2,0-0.3-0.2-0.3-0.3v-9.3c0-0.2,0.2-0.3,0.3-0.3h12c0.2,0,0.3,0.2,0.3,0.3v9.3
+		C17.5,24.1,17.3,24.2,17.1,24.2z"/>
+	<path class="st0" d="M16.6,5.4c4.8,0,8.7,3.9,8.7,8.7"/>
+	<polyline class="st0" points="19.3,10.1 14.9,5.6 19.3,1.2 	"/>
+</g>
+</svg>
diff --git a/src/components/image-preview/image-preview.vue b/src/components/image-preview/image-preview.vue
index 8a87ce8b..a90318a2 100644
--- a/src/components/image-preview/image-preview.vue
+++ b/src/components/image-preview/image-preview.vue
@@ -4,6 +4,7 @@
 
 <script>
 	import {previewFile, previewCacheThumbImage} from'@/api/common.js'
+	import {get_base_url} from '@/api/request.js'
 	export default {
 		name:"image-preview",
 		props:{
@@ -11,6 +12,10 @@
 				default:'',
 				type:String
 			},
+			src:{
+				default:'',
+				type:String
+			},
 			width:{
 				default:50,
 				type:[String, Number]
@@ -27,7 +32,8 @@
 		data() {
 			return {
 				imgUrlShow: '',
-				watching: false
+				watching: false,
+				base_url: get_base_url()
 			};
 		},
 		watch: {
@@ -39,6 +45,15 @@
 				},
 				immediate: true,
 				deep: true,
+			},
+			src: {
+				handler(newval, oldval) {
+					if (newval && this.watching) {
+						this.imgUrlShow = this.base_url + this.src
+					}
+				},
+				immediate: true,
+				deep: true,
 			}
 		},
 		methods: {
@@ -70,6 +85,9 @@
 				this.getPreviewUrlBlob(this.imgId);
 			}
 			this.watching = true
+			if(this.src) {
+				this.imgUrlShow = this.base_url + this.src
+			}
 		}
 	}
 </script>
diff --git a/src/components/picture-upload/picture-upload.vue b/src/components/picture-upload/picture-upload.vue
index ee23a749..058b5973 100644
--- a/src/components/picture-upload/picture-upload.vue
+++ b/src/components/picture-upload/picture-upload.vue
@@ -109,25 +109,15 @@
 				const data = {
 					bizScen: 'S3005'
 				}
+				console.log(tempFilePaths[0]);
 				const upload_map = tempFilePaths.map((file) => uploadFile(file, data))
 				Promise.all(upload_map).then(res => {
 					fileList.push(...res)
 					emits('update:modelValue', fileList.map(res => res.fileId))
-					console.log('res, res', res);
+				
 				}).catch(() => {
 
 				})
-
-				// for (file of tempFilePaths) {
-				// 	try {
-				// 		const res = await uploadFile(file, data)
-				// 		console.log('res', res);
-				// 		fileList.push(res)
-				// 	} catch (error) {
-				// 		console.error('文件上传失败', error)
-				// 	}
-				// }
-				// emits('upload_success', fileList.value)
 			}
 		})
 	}
diff --git a/src/enum.js b/src/enum.js
index 5739aa2d..33eb71b4 100644
--- a/src/enum.js
+++ b/src/enum.js
@@ -1,7 +1,16 @@
-
-MaxUploadPictureSize = 2048 // 最大图片上传限制
-MaxUploadDocumentMaxSize = 102400 // 最大文档上传限制
-
-
-500
-
+export const MAX_UPLOAD_PICTURE_SIZE = 2048 // 最大图片上传限制
+export const Max_Upload_Document_Size = 102400 // 最大文档上传限制
+export const TextareaInputLimitCharacter = 160 // 全局多行文本输入框限制字数
+export const GENDER = [{
+		value: "m",
+		label: "男性",
+	},
+	{
+		value: "f",
+		label: "女性",
+	},
+	{
+		value: "o",
+		label: "其他",
+	}
+] // 性别
\ No newline at end of file
diff --git a/src/pages/courseDetail/components/comment.vue b/src/pages/courseDetail/components/comment.vue
index ff16c150..802319e5 100644
--- a/src/pages/courseDetail/components/comment.vue
+++ b/src/pages/courseDetail/components/comment.vue
@@ -15,7 +15,7 @@
 					</view>
 					<view class="title">
 						{{item.bbsContent}}
-					</view>azf 
+					</view> 
 					<view class="img_div pic-cell">
 						<image-preview v-for="img in item.imgIdList" :imgId="img" class="pic-item"></image-preview>
 					</view>
diff --git a/src/pages/courseDetail/index.vue b/src/pages/courseDetail/index.vue
index 914a9633..50018643 100644
--- a/src/pages/courseDetail/index.vue
+++ b/src/pages/courseDetail/index.vue
@@ -1,6 +1,9 @@
 <template>
 	<view class="max_page detail-main" style="overflow: hidden;">
 		<image src="/src/static/images/courseDetail/mipmap-xhdpi/bg.png" mode="widthFix" class="back-image"></image>
+		<view class="back_div" @click="common.navigateBack()">
+			<view class="back-icon"></view>
+		</view>
 		<view class="detail-body">
 			<view class="head-title font_pf">
 				<view class="title-text">{{ form.crsName }}</view>
@@ -101,6 +104,37 @@
 </script>
 
 <style lang="scss" scoped>
+	
+	.back_div {
+		margin-right: 10rpx;
+		position: absolute;
+		left: 46rpx;
+		top: 64rpx;
+		.back-icon {
+			position: relative;
+			width: 40rpx;
+			height: 40rpx;
+			cursor: pointer;
+		}
+	
+		.back-icon::before,
+		.back-icon::after {
+			content: '';
+			position: absolute;
+			transition: all 0.3s ease;
+		}
+	
+		.back-icon::after {
+			top: 25%;
+			left: 25%;
+			width: 40%;
+			height: 40%;
+			border-top: 4rpx solid #FFFFFF;
+			border-left: 4rpx solid #FFFFFF;
+			transform: rotate(-45deg);
+		}
+	}
+	
 	.detail-main {
 		background-color: #f5f5f5;
 		position: relative;
diff --git a/src/pages/courseDetail/submit.vue b/src/pages/courseDetail/submit.vue
index 6e8ca049..6ec7ae16 100644
--- a/src/pages/courseDetail/submit.vue
+++ b/src/pages/courseDetail/submit.vue
@@ -41,13 +41,13 @@
 						提问</view>
 				</view>
 				<view class="input-textarea">
-					<uv-textarea v-model="formData.bbsContent" height="124" count
+					<uv-textarea v-model="formData.bbsContent" height="124" count :maxlength="TextareaInputLimitCharacter"
 						:placeholder="formData.bbsTag == 'SUG'?'请输入你的建议...':'请输入你的问题...'"></uv-textarea>
 				</view>
 			</view>
 		</view>
 		<view class="btn-box font_pf">
-			<uv-button type="primary" @click="submit">提交评价</uv-button>
+			<uv-button type="primary" @click="submit" :disabled="!formData.bbsContent">提交评价</uv-button>
 		</view>
 	</view>
 </template>
@@ -57,6 +57,7 @@
 		reactive,
 		ref
 	} from 'vue';
+	import {TextareaInputLimitCharacter} from "@/enum.js"
 	import {
 		onLoad
 	} from '@dcloudio/uni-app';
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 7beacfeb..f0b0703a 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -252,6 +252,7 @@
 	const stdtTmLenRef = ref(null);
 	const accmPracticeCntRef = ref(null);
 	const accmExamCntRef = ref(null);
+	const three_list_request_time = ref(0);  // 三个列表更新时间
 	
 	// 计算透明度
 	const opacity = computed(() => {
@@ -304,7 +305,7 @@
 		"get_statistics_data": async function() {
 			try {
 				const time_now = Date.now();
-				if (time_now - this.request_time > 30) {
+				if (time_now - this.request_time > 300 * 1000) {
 					this.request_time = time_now;
 					// 获取最新数据
 					const res = await getStatisticsData();
@@ -333,7 +334,7 @@
 					console.log('时间没到无需更新');
 				}
 			} catch (error) {
-				console.error('获取统计数据失败:', error);
+				console.log('获取统计数据失败:', error);
 			}
 		}
 	});
@@ -347,13 +348,12 @@
 		common.navigateTo('/pages/courseDetail/index?crsNum=' + crsNum)
 	}
 	onShow(() => {
+		console.log('onShow');
 		if(!common.isLogin()){
 			common.navigateTo('/pages/login/login')
 			return 
 		} 
 		statistics_data['get_statistics_data']() // 获取统计数据
-	})
-	onMounted(async () => {
 		if(!common.isLogin()) return;
 		queryCrsInfoByLastnew().then(res => {
 			new_class_list.value = res.body
@@ -365,6 +365,9 @@
 			recommend_class_list.value = res.body
 		})
 	})
+	onLoad(async () => {
+		
+	})
 </script>
 
 
diff --git a/src/pages/me/index.vue b/src/pages/me/index.vue
index 1b4e75f2..500cc7fa 100644
--- a/src/pages/me/index.vue
+++ b/src/pages/me/index.vue
@@ -8,7 +8,9 @@
 				<!-- 用户个人信息 -->
 				<view class="personal_information">
 					<view class="profile">
-						<image v-if="user_info.imageAddr" class="img_100" src="/static/images/test/touxiang.png"></image>
+						<!-- <image-preview v-if="user_info.imageAddr" class="img_100" :src="user_info.imageAddr"></image-preview> -->
+						<image v-if="user_info.imagePath" class="img_100" :src="user_info.imagePath"></image>
+						<image-preview v-else-if="user_info.imageAddr" class="img_100" :src="user_info.imageAddr"></image-preview>
 						<image v-else class="img_100" src="/static/images/me/default_user_avatar.png"></image>
 					</view>
 					<view class="personal_information_data">
@@ -17,8 +19,8 @@
 								{{ user_info.userName }}
 							</view>
 							<view class="sex">
-								<image v-if="user_info.gender === 'F'" class="img_100" src="/static/images/me/wuman.png"></image>
-								<image v-if="user_info.gender === 'M'" class="img_100" src="/static/images/me/man.png"></image>
+								<image v-if="user_info.gender === 'f'" class="img_100" src="/static/images/me/wuman.png"></image>
+								<image v-if="user_info.gender === 'm'" class="img_100" src="/static/images/me/man.png"></image>
 							</view>
 						</view>
 						<view class="work_number_div">工号：{{ user_info.userId }}</view>
@@ -108,6 +110,7 @@ import { getUserInfo } from '@/common/common';
 import { onPullDownRefresh } from '@dcloudio/uni-app';
 import { loginOut } from '@/api/login.js';
 import { queryTraStdyStatisticsSelf } from '@/api/user.js';
+
 const accmTaskCntRef = ref(null);
 const accmPointRef = ref(null);
 const stdtTmLenRef = ref(null);
@@ -169,7 +172,8 @@ const statistics_data = reactive({
 
 const user_info = reactive({
 	userName: '',
-	userId: ''
+	userId: '',
+	imageAddr: '',
 });
 
 onShow(() => {
diff --git a/src/pages/setting/index.vue b/src/pages/setting/index.vue
index 3ee86fc9..336f9f69 100644
--- a/src/pages/setting/index.vue
+++ b/src/pages/setting/index.vue
@@ -8,14 +8,15 @@
 			<view class="title font_pf">设置</view>
 		</view>
 		<view class="detail-body">
-			<uv-cell-group>
+
+			<uv-cell-group :border="false">
 				<uv-cell @click="cellCLick" name="avatar" isLink title="头像">
 					<template #title>
 						<view class="font_pf">头像</view>
 					</template>
 					<template #value>
-						<view style="width: 60rpx; height: 60rpx; border-radius: 100%; overflow: hidden">
-							<image style="width: 100%" src="/src/static/images/test/touxiang.png" mode="widthFix"></image>
+						<view style="width: 42rpx; height: 42rpx;border-radius: 100%; overflow: hidden">
+							<image-preview style="width: 100%" v-if="userInfo.imageAddr" :src="userInfo.imageAddr"></image-preview>
 						</view>
 					</template>
 				</uv-cell>
@@ -24,98 +25,206 @@
 						<text class="font_pf">性别</text>
 					</template>
 					<template #value>
-						<picker mode="selector" :value="index" range-key="label" style="width: 100%" :range="sexOptions" @change="sexChange">
-							<view style="text-align: right">{{ sexOptions.find((item) => item.value == form.gender).label || '' }}</view>
+						<picker mode="selector" :value="index" range-key="label" style="width: 100%" :range="sexOptions"
+							@change="sexChange">
+							<view style="text-align: right">{{showGenderText}}</view>
 						</picker>
 					</template>
 				</uv-cell>
+				<uv-cell title="形象" :isLink="true" :border="false"></uv-cell>
 			</uv-cell-group>
 		</view>
+		<avatar-cropper v-if="avatarCropperStatus" mode="ratio" :imageUrl="avatarCropperUrl" :width="500" :height="500"
+			:delay="150" @cancel="onCancel" @confirm="onConfirm"></avatar-cropper>
 	</view>
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue';
-import { onLoad } from '@dcloudio/uni-app';
-import common from '@/common/common';
-const index = ref(0);
-const form = ref({
-	gender: 'Y'
-});
-const sexOptions = [
-	{ value: 'Y', label: '男' },
-	{ value: 'M', label: '女' }
-];
-const cellCLick = (value) => {};
-const sexChange = (e) => {
-	console.log(e);
-	console.log(sexOptions[e.detail.value].value, 'sexOptions[e.detail.value].value');
-	form.value.gender = sexOptions[e.detail.value].value;
+	import {
+		reactive,
+		ref,
+		computed,
+		nextTick
+	} from 'vue';
+	import {
+		onLoad
+	} from '@dcloudio/uni-app';
+	import {
+		uploadFile
+	} from '@/api/common'
+	import { queryCurrentUser} from '@/api/login.js';
+	import common from '@/common/common';
+	import {getUserInfo} from '@/common/common';
+	import {
+		GENDER
+	} from '@/enum.js';
+	import {
+		updateDfSysUserExtandInfoGender,
+		updateDfSysUserExtandInfoImageAddr
+	} from "@/api/user.js"
+	
+	const index = ref(0);
+	const avatarCropperUrl = ref('');
+	const aaa = ref('');
+	const userInfo = ref({
+		gender: '',
+		imageAddr: ''
+	});
+	const avatarCropperStatus = ref(true)
+	const sexOptions = GENDER
+	const showGenderText = computed(() => {
+		const item = sexOptions.find((item) => item.value == userInfo.value.gender)
+		if (item) {
+			return item.label
+		} else {
+			return '未填写'
+		}
+	})
+	const onCancel = (value) => {
+		avatarCropperStatus.value = false
+	}
+	const onConfirm = (file) => {
+		
+		avatarCropperStatus.value = false
+		nextTick(async() => {
+			common.loading('更新头像中')
+			
+			try{
+				const data = {
+					bizScen: 'S3010',
+					thumbnailFlag: true,
+					thumbImgSize:100
+				}
+				// 上传图片
+				const res = await uploadFile(file.tempFilePath, data)
+				// 更新个人信息
+				await updateDfSysUserExtandInfoImageAddr({imageAddr : res.thumbFileId})
+				// 更新个人信息
+				const userData = await queryCurrentUser()
+				common.msg('修改成功')
+				console.log(userData);
+				userInfo.value.imageAddr = getUserInfo('imageAddr')
+			} catch {
+				common.msg('修改失败')
+			}
+			common.hideLoading()
+		})
+	}
 
-	console.log(form.value.gender, 'iiii');
-};
-onLoad((params) => {});
+	const cellCLick = (value) => {
+		uni.chooseImage({
+			count: 1,
+			sizeType: ["compressed"],
+			success: (res) => {
+				
+				avatarCropperUrl.value = res.tempFilePaths[0];
+				avatarCropperStatus.value = true
+			},
+		});
+	};
+	const sexChange = (e) => {
+		userInfo.value.gender = sexOptions[e.detail.value].value;
+		common.loading("修改中")
+		updateDfSysUserExtandInfoGender({
+			gender: userInfo.value.gender
+		}).then(res => {
+			common.msg('修改成功')
+		}).finally(() => {
+			common.hideLoading()
+		})
+	};
+	
+	onLoad((params) => {
+		userInfo.value = getUserInfo()
+		console.log(userInfo.value);
+	});
 </script>
 
 <style lang="scss" scoped>
-.detail-main {
-	background-color: #fff;
-}
+	$bg-margin-left: 50rpx;
 
-.detail-body {
-	box-sizing: border-box;
-	min-height: calc(100vh - (var(--status-bar-height)+50rpx));
-	// padding: 29rpx 37rpx;
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	padding-top: 0rpx;
-	:deep(.uv-cell__title) {
-		flex: none !important;
-	}
-}
+	.detail-body {
+		margin: 30rpx $bg-margin-left 0 $bg-margin-left;
+		background: #ffffff;
+		// background: red;
+		border-radius: 15rpx;
+		z-index: 101;
+		overflow: hidden;
 
-.title {
-	color: #000000;
-	font-size: 34rpx;
-	height: 34rpx;
-	font-weight: 600;
-	// margin-bottom: 30rpx;
-	line-height: 34rpx;
-}
-
-.fixed_search_div {
-	padding: calc(10rpx + var(--status-bar-height)) 15rpx 24rpx 30rpx;
-	display: flex;
-	align-items: center;
-	background-color: #f6f7f8;
-	.back_div {
-		margin-right: 10rpx;
-		.back-icon {
-			position: relative;
-			width: 40rpx;
-			height: 40rpx;
-			cursor: pointer;
-			display: flex;
-			align-items: center;
+		// 为了让线缩进来24单位
+		:deep(.uv-line) {
+			width: calc(100% - 48rpx) !important;
+			margin: 0 24rpx !important;
 		}
 
-		.back-icon::before,
-		.back-icon::after {
-			content: '';
-			position: absolute;
-			transition: all 0.3s ease;
+		:deep(.uv-cell__body) {
+			padding: 12px 15px;
 		}
 
-		.back-icon::after {
-			top: 25%;
-			left: 25%;
-			width: 40%;
-			height: 40%;
-			border-top: 4rpx solid #2b2c2e;
-			border-left: 4rpx solid #2b2c2e;
-			transform: rotate(-45deg);
+		:deep(.uv-cell__title) {
+			flex: none !important;
 		}
 	}
-}
-</style>
+
+	.detail-main {
+		background-color: #F6F8FF;
+	}
+
+	// .detail-body {
+	// 	box-sizing: border-box;
+	// 	min-height: calc(100vh - (var(--status-bar-height)+50rpx));
+	// 	// padding: 29rpx 37rpx;
+	// 	width: 100%;
+	// 	display: flex;
+	// 	flex-direction: column;
+	// 	padding-top: 0rpx;
+
+
+	// }
+
+	.title {
+		color: #000000;
+		font-size: 34rpx;
+		height: 34rpx;
+		font-weight: 600;
+		// margin-bottom: 30rpx;
+		line-height: 34rpx;
+	}
+
+	.fixed_search_div {
+		padding: calc(10rpx + var(--status-bar-height)) 15rpx 24rpx 30rpx;
+		display: flex;
+		align-items: center;
+		background-color: #f6f7f8;
+
+		.back_div {
+			margin-right: 10rpx;
+
+			.back-icon {
+				position: relative;
+				width: 40rpx;
+				height: 40rpx;
+				cursor: pointer;
+				display: flex;
+				align-items: center;
+			}
+
+			.back-icon::before,
+			.back-icon::after {
+				content: '';
+				position: absolute;
+				transition: all 0.3s ease;
+			}
+
+			.back-icon::after {
+				top: 25%;
+				left: 25%;
+				width: 40%;
+				height: 40%;
+				border-top: 4rpx solid #2b2c2e;
+				border-left: 4rpx solid #2b2c2e;
+				transform: rotate(-45deg);
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/uni_modules/t-cropper/changelog.md b/src/uni_modules/t-cropper/changelog.md
new file mode 100644
index 00000000..93d6a425
--- /dev/null
+++ b/src/uni_modules/t-cropper/changelog.md
@@ -0,0 +1,18 @@
+## 1.0.8（2024-09-13）
+新增矩形框最大缩放、修复图片旋转时居中
+## 1.0.7（2024-08-08）
+优化选择大文件图片后，无法在Image中直接显示图片，提供针对大图片压缩思路
+## 1.0.6（2024-06-16）
+优化确定按钮，快速重复点击出现多个裁剪图片,更新了文档
+## 1.0.5（2023-11-16）
+优化裁剪框圆角/裁剪图片圆角，更新了文档
+## 1.0.4（2023-11-14）
+支持图片最大缩放功能，优化App端图标问题，
+## 1.0.3（2023-11-11）
+新增图片旋转图标rotate.svg
+## 1.0.2（2023-11-11）
+新增H5端和App端（Android端通过自测，Ios端没有设备暂未自测）
+## 1.0.1（2023-11-10）
+新增项目示例
+## 1.0.0（2023-11-10）
+图片裁剪工具
diff --git a/src/uni_modules/t-cropper/components/t-cropper/t-cropper.scss b/src/uni_modules/t-cropper/components/t-cropper/t-cropper.scss
new file mode 100644
index 00000000..35b63621
--- /dev/null
+++ b/src/uni_modules/t-cropper/components/t-cropper/t-cropper.scss
@@ -0,0 +1,202 @@
+$clipper-edge-border-width: 6rpx !default;
+
+.t-cropper {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  z-index: 1000;
+  overflow: hidden;
+  .canvas {
+    position: absolute;
+    top: 5000px;
+    left: 5000px;
+  }
+  // 裁剪区域
+  .t-preview-container {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    bottom: 0;
+    z-index: 1000;
+    opacity: 0;
+    overflow: hidden;
+
+    .preview-body {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background: #000;
+      overflow: hidden;
+      .mask-model {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        background: #000;
+        opacity: 0.4;
+        pointer-events: none;
+      }
+      .image-wrap {
+        position: absolute;
+        .image {
+          position: absolute;
+        }
+      }
+      // 裁剪框盒子
+      .frame-box {
+        position: absolute;
+        left: 100px;
+        top: 100px;
+        width: 200px;
+        height: 200px;
+        // 矩形图片
+        .rect {
+          position: absolute;
+          left: -2px;
+          top: -2px;
+          width: 100%;
+          height: 100%;
+          border: 2rpx solid white;
+          overflow: hidden;
+          box-sizing: content-box;
+          .image-rect {
+            position: absolute;
+            .rect-img {
+              position: absolute;
+            }
+          }
+        }
+        //裁剪框线条
+        .line-one {
+          position: absolute;
+          width: 100%;
+          border-top: 1px dashed #ccc;
+          left: 0;
+          top: 33.3%;
+          box-sizing: content-box;
+        }
+        .line-two {
+          position: absolute;
+          width: 100%;
+          border-top: 1px dashed #ccc;
+          left: 0;
+          top: 66.7%;
+          box-sizing: content-box;
+        }
+        .line-three {
+          position: absolute;
+          height: 100%;
+          border-right: 1px dashed #ccc;
+          top: 0;
+          left: 33.3%;
+          box-sizing: content-box;
+        }
+        .line-four {
+          position: absolute;
+          height: 100%;
+          border-right: 1px dashed #ccc;
+          top: 0;
+          left: 66.7%;
+          box-sizing: content-box;
+        }
+        .frame-left-top {
+          position: absolute;
+          width: 20px;
+          height: 20px;
+          left: -8rpx;
+          top: -8rpx;
+          border-left: 4rpx solid #fff;
+          border-top: 4rpx solid #fff;
+          box-sizing: content-box;
+        }
+        .frame-left-bottom {
+          position: absolute;
+          width: 20px;
+          height: 20px;
+          left: -8rpx;
+          bottom: -4rpx;
+          border-left: 4rpx solid #fff;
+          border-bottom: 4rpx solid #fff;
+          box-sizing: content-box;
+        }
+        .frame-right-top {
+          position: absolute;
+          width: 20px;
+          height: 20px;
+          right: -4rpx;
+          top: -8rpx;
+          border-right: 4rpx solid #fff;
+          border-top: 4rpx solid #fff;
+          box-sizing: content-box;
+        }
+        .frame-right-bottom {
+          position: absolute;
+          width: 20px;
+          height: 20px;
+          right: -4rpx;
+          bottom: -4rpx;
+          border-right: 4rpx solid #fff;
+          border-bottom: 4rpx solid #fff;
+          box-sizing: content-box;
+        }
+      }
+    }
+
+    // 底部工具栏
+    .toolbar {
+      position: absolute;
+      width: calc(100% - 64rpx);
+      height: 100rpx;
+      left: 0;
+      bottom: 10rpx;
+      text-align: center;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 32rpx;
+      align-items: center;
+      // IOS 底部安全距离
+      padding-bottom: constant(safe-area-inset-bottom);
+      padding-bottom: env(safe-area-inset-bottom);
+      .btn-cancel {
+        width: 112rpx;
+        font-size: 28rpx;
+        color: #d5dfe5;
+        font-weight: bold;
+      }
+      .btn-rotate {
+        width: 112rpx;
+        font-size: 28rpx;
+        color: #d5dfe5;
+        font-weight: bold;
+        image {
+          width: 60rpx;
+          height: 60rpx;
+        }
+      }
+      .btn-confirm {
+        font-size: 28rpx;
+        color: #ffffff;
+        font-weight: bold;
+        width: 112rpx;
+        height: 60rpx;
+        line-height: 60rpx;
+        background: #07c160;
+        border-radius: 6rpx;
+        text-align: center;
+      }
+    }
+
+    .transit {
+      transition: width 0.3s, height 0.3s, left 0.3s, top 0.3s, transform 0.3s;
+    }
+  }
+  .showPage {
+    opacity: 1 !important;
+  }
+}
diff --git a/src/uni_modules/t-cropper/components/t-cropper/t-cropper.vue b/src/uni_modules/t-cropper/components/t-cropper/t-cropper.vue
new file mode 100644
index 00000000..32376617
--- /dev/null
+++ b/src/uni_modules/t-cropper/components/t-cropper/t-cropper.vue
@@ -0,0 +1,1098 @@
+<template>
+  <view class="t-cropper" v-show="props.imageUrl" disable-scroll>
+    <!-- #ifdef MP-WEIXIN || MP-ALIPAY-->
+    <canvas
+      type="2d"
+      canvas-id="canvas-cropper"
+      id="canvas-cropper"
+      class="canvas"
+    ></canvas>
+    <!-- #endif -->
+
+    <!-- #ifdef APP-PLUS || H5 -->
+    <canvas
+      :canvas-id="canvasId"
+      :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
+    ></canvas>
+    <!-- #endif -->
+    <!-- 裁剪区域 -->
+    <view class="t-preview-container" :class="{ showPage: inInit }">
+      <view
+        class="preview-body"
+        @touchstart="(e) => touchStart(e, 'body')"
+        @touchmove="touchMove"
+        @touchend="touchEnd"
+        @touchcancel="touchCancel"
+      >
+        <!-- 完整背景图片 -->
+        <view
+          class="image-wrap"
+          :class="{ transit: transit }"
+          :style="comImageStyle('image-wrap')"
+        >
+          <image
+            class="image"
+            :class="{ transit: transit }"
+            :src="imageUrl"
+            @load="imageLoad"
+            :style="comImageStyle('image')"
+          />
+        </view>
+        <view class="mask-model"></view>
+        <view
+          class="frame-box"
+          :class="{ transit: transit }"
+          :style="comImageStyle('frame-box')"
+        >
+          <view class="rect" :style="cirStyle">
+            <!-- 裁剪框图片 -->
+            <view
+              class="image-rect"
+              :class="{ transit: transit }"
+              :style="comImageStyle('image-rect')"
+            >
+              <image
+                class="rect-img"
+                :class="{ transit: transit }"
+                :src="imageUrl"
+                :style="comImageStyle('image')"
+              />
+            </view>
+          </view>
+          <!-- 矩阵框线条 -->
+          <view v-if="props.radius < 50" class="line-box">
+            <view class="line-one"></view>
+            <view class="line-two"></view>
+            <view class="line-three"></view>
+            <view class="line-four"></view>
+          </view>
+          <view
+            class="frame-left-top"
+            @touchstart.stop="(e) => touchStart(e, 'left-top')"
+          ></view>
+          <view
+            class="frame-left-bottom"
+            @touchstart.stop="(e) => touchStart(e, 'left-bottom')"
+          ></view>
+          <view
+            class="frame-right-top"
+            @touchstart.stop="(e) => touchStart(e, 'right-top')"
+          ></view>
+          <view
+            class="frame-right-bottom"
+            @touchstart.stop="(e) => touchStart(e, 'right-bottom')"
+          ></view>
+        </view>
+      </view>
+      <!-- 底部工具栏 -->
+      <view class="toolbar">
+        <view @tap.stop="onCancle" class="btn-cancel">取消</view>
+        <view
+          v-if="props.isRotateBtn && props.mode !== 'free'"
+          @tap.stop="onAngle"
+          class="btn-rotate"
+        >
+          <image src="../../static/svg/rotate.svg" data-type="inverse" />
+        </view>
+        <view @tap.stop="onConfirm" class="btn-confirm">确定</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { reactive, ref, watchEffect, computed, getCurrentInstance, toRefs } from "vue";
+
+/**
+ * @property {String} mode 模式
+ * @value fixed 固定模式，裁剪出固定大小
+ * @value ratio 等比模式，宽高等比缩放
+ * @value free 自由模式，不限制宽高比
+ * @property {String} imageUrl 图片路径
+ * @property {Number} width 宽度
+ * @property {Number} height 高度
+ * @property {Number} maxWidth 最大宽度
+ * @property {Number} minHeight 最大高度
+ * @property {Number} scaleRatio 裁剪比列缩放
+ * @property {Number} minRatio 最小缩放
+ * @property {Number} maxRatio 最大缩放
+ * @property {Boolean} isRotateBtn 是否显示旋转
+ * @property {Number} radius 裁剪图片圆角半径，单位px
+ * @property {Number} delay 快速重复点击时间
+ */
+const props = defineProps({
+  mode: {
+    type: String,
+    default: "ratio",
+  },
+  imageUrl: {
+    type: String,
+    default: "",
+  },
+  width: {
+    type: Number,
+    default: 200,
+  },
+  height: {
+    type: Number,
+    default: 200,
+  },
+  maxWidth: {
+    type: Number,
+    default: 1024,
+  },
+  maxHeight: {
+    type: Number,
+    default: 1024,
+  },
+  scaleRatio: {
+    type: Number,
+    default: 0.7,
+  },
+  minRatio: {
+    type: Number,
+    default: 1,
+  },
+  maxRatio: {
+    type: Number,
+    default: 3,
+  },
+  isRotateBtn: {
+    type: Boolean,
+    default: true,
+  },
+  radius: {
+    type: Number,
+    default: 0,
+  },
+  delay: {
+    type: Number,
+    default: 250,
+  },
+});
+
+// 获取组件实例
+const instance = getCurrentInstance();
+const inInit = ref(false);
+const $emit = defineEmits(["confirm", "cancel"]);
+const canvasId = ref(Math.random().toString(36).slice(-6));
+
+//获取原始图片的大小
+const origin = reactive({
+  imageUrl: "", //设置图片url
+  real: {
+    //原始图片宽高
+    width: 100,
+    height: 100,
+  },
+  body: {
+    //页面宽高
+    width: 100,
+    height: 100,
+  },
+  frame: {
+    //矩形框
+    left: 50,
+    top: 50,
+    width: 200,
+    height: 300,
+  },
+  bgImage: {
+    //背景框
+    left: 20,
+    top: 20,
+    width: 300,
+    height: 400,
+  },
+  rotate: 0,
+  transit: false,
+  canvasWidth: 100,
+  canvasHeight: 100,
+  frameSize: 150, //裁剪框最小尺寸
+});
+
+const { transit, rotate, imageUrl, canvasWidth, canvasHeight } = toRefs(origin);
+
+//监听原始图片的变动
+watchEffect(() => {
+  if (props.imageUrl) {
+    uni.showLoading({
+      title: "请稍候...",
+      mask: true,
+    });
+    origin.imageUrl = props.imageUrl; //设置图片url}
+  }
+});
+
+//检测图片加载完成
+const imageLoad = (e) => {
+  const { width, height } = e.detail;
+  origin.real.width = width;
+  origin.real.height = height;
+  var query = uni.createSelectorQuery().in(instance);
+  query
+    .select(".preview-body")
+    .boundingClientRect((data) => {
+      origin.body.width = data.width;
+      origin.body.height = data.height;
+      inInit.value = true;
+      imageReset(); //重置图片
+    })
+    .exec();
+};
+
+//重置图片
+const imageReset = () => {
+  origin.rotate = 0;
+  let frameRate = props.width / props.height; //裁剪比列
+  let frameHeight = origin.body.height * props.scaleRatio; //裁剪框图片高度 * 缩小0.7倍
+  let frameWidth = origin.body.width * props.scaleRatio; //裁剪框图片宽度 * 缩小0.7倍
+
+  // 裁剪框的位置：
+  // 缩放后的宽度/高度 > 组件裁剪的比例，就要对宽度重写
+  if (frameWidth / frameHeight > frameRate) {
+    frameWidth = frameHeight * frameRate;
+  } else {
+    frameHeight = frameWidth / frameRate;
+  }
+
+  // 裁剪框左边距=页面宽度-裁剪框宽度 / 2
+  let frameleft = (origin.body.width - frameWidth) / 2;
+  let frameTop = (origin.body.height - frameHeight) / 2;
+  origin.frame = {
+    left: frameleft,
+    top: frameTop,
+    width: frameWidth,
+    height: frameHeight,
+  };
+
+  // 背景图片位置：
+  let bgRate = origin.real.width / origin.real.height; //背景比列
+  let bgWidth = frameWidth;
+  let bgHeight = frameHeight;
+
+  // 裁剪框图片宽度/裁剪框图片高度>实际的图片比例
+  if (bgWidth / bgHeight > bgRate) {
+    bgHeight = bgWidth / bgRate;
+  } else {
+    bgWidth = bgHeight * bgRate;
+  }
+
+  // 背景左边距
+  let bgLeft = (frameWidth - bgWidth) / 2 + origin.frame.left;
+  // 背景右边距
+  let bgTop = (frameHeight - bgHeight) / 2 + origin.frame.top;
+
+  origin.bgImage = {
+    left: bgLeft,
+    top: bgTop,
+    width: bgWidth,
+    height: bgHeight,
+  };
+  uni.hideLoading();
+};
+
+//公共图片背景位置
+const comImageStyle = computed(() => (source) => {
+  const { left, top, width, height } = origin.bgImage;
+  if (source == "image-wrap") {
+    //计算背景盒子样式
+    return `
+      top: ${top}px;
+      left: ${left}px;
+      width: ${width}px;
+      height: ${height}px;
+    `;
+  } else if (source == "image") {
+    // 计算背景图片样式
+    let left = 0;
+    let top = 0;
+    let width = origin.bgImage.width;
+    let height = origin.bgImage.height;
+
+    if (origin.rotate % 180 != 0) {
+      width = origin.bgImage.height;
+      height = origin.bgImage.width;
+      top = width / 2 - height / 2;
+      left = height / 2 - width / 2;
+    }
+    const style = {};
+    style.left = left + "px";
+    style.top = top + "px";
+    style.width = width + "px";
+    style.height = height + "px";
+    style.transform = `rotate(${origin.rotate}deg)`;
+    return style;
+  } else if (source == "image-rect") {
+    // 计算裁剪框上显示的图片位置
+    return `
+      top: ${top - origin.frame.top}px;
+      left: ${left - origin.frame.left}px;
+      width: ${width}px;
+      height: ${height}px;
+    `;
+  } else if (source == "frame-box") {
+    return `
+      left: ${origin.frame.left}px;
+      top: ${origin.frame.top}px;
+      width: ${origin.frame.width}px;
+      height: ${origin.frame.height}px;
+    `;
+  }
+});
+
+//计算圆角比列
+const cirStyle = computed(() => {
+  const { width } = origin.frame;
+  let scale = props.width / width;
+  let radius = props.radius / scale;
+  return `
+  border-radius: ${radius}px
+  `;
+});
+
+// 取消按钮
+const onCancle = () => {
+  $emit("cancel");
+};
+// 旋转按钮
+const onAngle = () => {
+  origin.rotate -= 90; // 旋转的角度
+  let width = origin.bgImage.height; // 背景框宽度
+  let height = origin.bgImage.width; // 背景框高度
+  let left = origin.bgImage.left; // 背景框左边距
+  let top = origin.bgImage.top; // 背景框顶边距
+  let fWidth = origin.frame.width; // 裁剪框宽度
+  let fLeft = origin.frame.left; // 裁剪框左边距
+  let fTop = origin.frame.top; // 裁剪框顶边距
+  // 左边距 = 矩形框左边距 + (背景框顶部 - 裁剪框顶部)
+  left = fLeft + (top - fTop);
+  //  顶部边距 = 矩形框顶边距 -(背景框高度 - 矩形框宽度 -(矩形框左边距 - 背景框左边距))
+  top = fTop - (height - fWidth - (fLeft - origin.bgImage.left));
+
+  origin.bgImage = {
+    left: left,
+    top: top,
+    width: width,
+    height: height,
+  };
+  origin.transit = true;
+  setTimeout(() => {
+    origin.transit = false;
+  }, 300);
+};
+
+/**
+ * @name:防抖
+ * @param {function} fn
+ * @param {wait} wait
+ * @return {function}
+ */
+const debounce = (fn, wait = 1000) => {
+  let time = null;
+  return function (...args) {
+    if (time) clearTimeout(time);
+    time = setTimeout(() => {
+      fn.apply(this, args);
+    }, wait);
+  };
+};
+// 确定按钮
+const onConfirm = debounce(async () => {
+  // #ifdef H5 || APP-PLUS
+  confirmH5();
+  // #endif
+
+  // #ifdef MP-WEIXIN || MP-ALIPAY
+  confirmWx();
+  // #endif
+}, props.delay);
+
+// h5裁剪确认
+const confirmH5 = async () => {
+  let mx = computeMatrix(); //获取画布的信息
+  // 设备画布的宽高
+  origin.canvasWidth = mx.tw;
+  origin.canvasHeight = mx.th;
+  uni.showLoading({
+    title: "处理中",
+  });
+
+  // 设置宽高后等待更新完成在获取Canvas节点
+  await new Promise((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, 200);
+  });
+
+  // 创建一个画布
+  let ctx = uni.createCanvasContext(canvasId.value, instance);
+  // 矩形内清除指定的像素
+  await ctx.clearRect(0, 0, mx.tw, mx.th);
+  //剪切圆角
+  await drawClipImage(ctx, mx);
+  // 旋转
+  ctx.rotate((origin.rotate * Math.PI) / 180);
+  //绘制图片
+  ctx.drawImage(props.imageUrl, mx.sx, mx.sy, mx.sw, mx.sh, mx.dx, mx.dy, mx.dw, mx.dh);
+  ctx.restore();
+
+  ctx.draw(false, () => {
+    uni.canvasToTempFilePath(
+      {
+        canvasId: canvasId.value,
+        success: (res) => {
+          var path = res.tempFilePath;
+		  $emit("confirm", res);
+          // // #ifdef H5
+          // path = parseBlob(path);
+          // $emit("confirm", {
+          //   errMsg: "parseBlob:ok",
+          //   tempFilePath: path,
+          // });
+          // // #endif
+
+          // // #ifdef APP-PLUS
+          // $emit("confirm", res);
+          // // #endif
+        },
+        fail: (err) => {
+          console.log(err);
+        },
+        complete: () => {
+          uni.hideLoading(); //关闭loading
+        },
+      },
+      instance
+    );
+  });
+};
+// 微信确认
+const confirmWx = () => {
+  uni.showLoading({
+    title: "处理中",
+  });
+  let mx = computeMatrix(); //获取画布的信息
+  uni
+    .createSelectorQuery()
+    // #ifndef MP-ALIPAY
+    .in(instance)
+    // #endif
+    .select("#canvas-cropper")
+    .fields({
+      node: true,
+      size: true,
+    })
+    .exec(async (res) => {
+      const textCanvas = res[0].node;
+      const ctx = textCanvas.getContext("2d");
+
+      // 初始化画布大小
+      textCanvas.width = mx.tw;
+      textCanvas.height = mx.th;
+      // //绘制canvas
+      await drawClipImage(ctx, mx); //剪切圆角
+      await ctx.rotate((origin.rotate * Math.PI) / 180);
+      await createImage(origin.imageUrl, mx, ctx, textCanvas);
+
+      // #ifdef MP-WEIXIN
+      wx.canvasToTempFilePath({
+        canvas: textCanvas,
+        canvasId: "canvasID",
+        success: (res) => {
+          $emit("confirm", res);
+        },
+        fail: (err) => {
+          console.log(err);
+        },
+      });
+      // #endif
+
+      // #ifdef MP-ALIPAY
+      textCanvas.toTempFilePath({
+        success: (res) => {
+          $emit("confirm", res);
+        },
+        fail: (err) => {
+          console.log(err);
+        },
+      });
+      // #endif
+
+      uni.hideLoading(); //关闭loading
+    });
+};
+//剪切图片圆角
+const drawClipImage = (ctx, mx) => {
+  let { radius } = props;
+  if (radius > 0) {
+    const w = Math.round(mx.tw); //画布宽度
+    const h = Math.round(mx.th); //画布高度
+
+    // 被缩放后的尺寸且裁剪的宽高相同
+    if (props.width === props.height && w == h && props.width < w) {
+      radius = (w / props.width) * radius;
+    }
+    // 被缩放后的尺寸且裁剪的宽高不相同
+    if (props.width != props.height && w != h && props.width < w) {
+      console.log("11111111");
+      if (w > h) {
+        radius = (w / h) * radius;
+      } else {
+        radius = (h / w) * radius;
+      }
+    }
+    // 如果裁剪是圆形
+    if (w === h && radius >= w / 2) {
+      // 圆形
+      ctx.arc(w / 2, h / 2, w / 2, 0, 2 * Math.PI);
+    } else {
+      // 圆角矩形
+      if (w !== h) {
+        // 限制圆角半径不能超过短边的一半
+        radius = Math.min(w / 2, h / 2, radius);
+      }
+      // 其他形状
+      ctx.moveTo(radius, 0);
+      ctx.arcTo(w, 0, w, h, radius);
+      ctx.arcTo(w, h, 0, h, radius);
+      ctx.arcTo(0, h, 0, 0, radius);
+      ctx.arcTo(0, 0, w, 0, radius);
+      ctx.closePath();
+    }
+    ctx.clip(); //从原始画布剪切任意形状和尺寸的区域
+    ctx.restore(); //返回之前保存过的路径状态和属性
+  }
+};
+// 创建一个图片
+const createImage = (img, mx, ctx, textCanvas) => {
+  return new Promise((resolve) => {
+    const headerImg = textCanvas.createImage();
+    headerImg.src = img;
+    headerImg.onload = () => {
+      let result = ctx.drawImage(
+        headerImg,
+        mx.sx,
+        mx.sy,
+        mx.sw,
+        mx.sh,
+        mx.dx,
+        mx.dy,
+        mx.dw,
+        mx.dh
+      );
+      resolve(result);
+    };
+  });
+};
+
+//计算矩阵
+const computeMatrix = () => {
+  let width = props.width;
+  let height = props.height;
+  let mul = origin.bgImage.width / origin.real.width;
+  if (origin.rotate % 180 != 0) {
+    mul = origin.bgImage.height / origin.real.width;
+  }
+  if (props.mode != "fixed") {
+    width = origin.frame.width / mul;
+    height = origin.frame.height / mul;
+  }
+  var rate = width / height;
+  if (width > props.maxWidth) {
+    width = props.maxWidth;
+    height = width / rate;
+  }
+  if (height > props.maxHeight) {
+    height = props.maxHeight;
+    width = height * rate;
+  }
+  var sx = (origin.frame.left - origin.bgImage.left) / mul;
+  var sy = (origin.frame.top - origin.bgImage.top) / mul;
+  var sw = origin.frame.width / mul;
+  var sh = origin.frame.height / mul;
+  var ox = sx + sw / 2;
+  var oy = sy + sh / 2;
+  if (origin.rotate % 180 != 0) {
+    var temp = sw;
+    sw = sh;
+    sh = temp;
+  }
+  var angle = origin.rotate % 360;
+  if (angle < 0) {
+    angle += 360;
+  }
+  if (angle == 270) {
+    var x = origin.real.width - oy;
+    var y = ox;
+    ox = x;
+    oy = y;
+  }
+  if (angle == 180) {
+    var x = origin.real.width - ox;
+    var y = origin.real.height - oy;
+    ox = x;
+    oy = y;
+  }
+  if (angle == 90) {
+    var x = oy;
+    var y = origin.real.height - ox;
+    ox = x;
+    oy = y;
+  }
+  sx = ox - sw / 2;
+  sy = oy - sh / 2;
+  let dr = { x: 0, y: 0, w: width, h: height };
+  dr = parseRect(dr, -origin.rotate);
+  return {
+    tw: width,
+    th: height,
+    sx: sx,
+    sy: sy,
+    sw: sw,
+    sh: sh,
+    dx: dr.x,
+    dy: dr.y,
+    dw: dr.w,
+    dh: dr.h,
+  };
+};
+// 计算矩阵
+const parseRect = (rect, angle) => {
+  let x1 = rect.x;
+  let y1 = rect.y;
+  let x2 = rect.x + rect.w;
+  let y2 = rect.y + rect.h;
+  let p1 = parsePoint({ x: x1, y: y1 }, angle);
+  let p2 = parsePoint({ x: x2, y: y2 }, angle);
+  let result = {};
+  result.x = Math.min(p1.x, p2.x);
+  result.y = Math.min(p1.y, p2.y);
+  result.w = Math.abs(p2.x - p1.x);
+  result.h = Math.abs(p2.y - p1.y);
+  return result;
+};
+// 计算x、y
+const parsePoint = (point, angle) => {
+  var result = {};
+  result.x =
+    point.x * Math.cos((angle * Math.PI) / 180) -
+    point.y * Math.sin((angle * Math.PI) / 180);
+  result.y =
+    point.y * Math.cos((angle * Math.PI) / 180) +
+    point.x * Math.sin((angle * Math.PI) / 180);
+  return result;
+};
+// base64转blob
+const parseBlob = (base64) => {
+  var arr = base64.split(",");
+  var mime = arr[0].match(/:(.*?);/)[1];
+  var bstr = atob(arr[1]);
+  var n = bstr.length;
+  var u8arr = new Uint8Array(n);
+  for (var i = 0; i < n; i++) {
+    u8arr[i] = bstr.charCodeAt(i);
+  }
+  var url = URL || webkitURL;
+  return url.createObjectURL(new Blob([u8arr], { type: mime }));
+};
+/**
+ * 绘制手指触摸
+ */
+const move = reactive({
+  touchType: "body", //移动的类型
+  start: {
+    //开始的位置
+    frame: {
+      left: 0,
+      top: 0,
+      width: 0,
+      height: 0,
+    },
+    bgImage: {
+      left: 0,
+      top: 0,
+      width: 0,
+      height: 0,
+    },
+  },
+});
+
+const touch = reactive({
+  touchStart: [], //记录开始触摸
+});
+
+//  手指触摸动作开始
+const touchStart = (e, touchType = "") => {
+  // #ifdef APP-PLUS || H5
+  if (e.preventDefault) {
+    e.preventDefault();
+  }
+  if (e.stopPropagation) {
+    e.stopPropagation();
+  }
+  // #endif
+
+  switch (touchType) {
+    case "body":
+      move.touchType = "body";
+      break;
+    case "left-top":
+      move.touchType = "left-top";
+      break;
+    case "left-bottom":
+      move.touchType = "left-bottom";
+      break;
+    case "right-top":
+      move.touchType = "right-top";
+      break;
+    case "right-bottom":
+      move.touchType = "right-bottom";
+      break;
+    default:
+      move.touchType = "body";
+      break;
+  }
+
+  touch.touchStart = e.touches;
+  // 裁剪框的开始位置
+  move.start.frame.left = origin.frame.left;
+  move.start.frame.top = origin.frame.top;
+  move.start.frame.width = origin.frame.width;
+  move.start.frame.height = origin.frame.height;
+
+  // 背景图片的开始位置
+  move.start.bgImage.left = origin.bgImage.left;
+  move.start.bgImage.top = origin.bgImage.top;
+  move.start.bgImage.width = origin.bgImage.width;
+  move.start.bgImage.height = origin.bgImage.height;
+  return false;
+};
+
+// 手指触摸后移动
+const touchMove = (e) => {
+  // #ifdef APP-PLUS || H5
+  if (e.preventDefault) {
+    e.preventDefault();
+  }
+  if (e.stopPropagation) {
+    e.stopPropagation();
+  }
+  // #endif
+  // 单手操作
+  if (touch.touchStart.length == 1) {
+    if (move.touchType == "body") {
+      // 移动图片
+      moveImage(touch.touchStart[0], e.touches[0]);
+    } else {
+      if (props.mode != "fixed") {
+        // 放大缩小图片
+        scaleFrame(touch.touchStart[0], e.touches[0]);
+      }
+    }
+  } else if (touch.touchStart.length == 2 && e.touches.length == 2) {
+    var ta = touch.touchStart[0];
+    var tb = touch.touchStart[1];
+    var tc = e.touches[0];
+    var td = e.touches[1];
+    if (ta.identifier != tc.identifier) {
+      var temp = tc;
+      tc = td;
+      td = temp;
+    }
+    scaleImage(ta, tb, tc, td);
+  }
+};
+
+// 移动图片
+const moveImage = (ta, tb) => {
+  let mx = tb.clientX - ta.clientX;
+  let my = tb.clientY - ta.clientY;
+  // 开始移动图片背景 + 移动的左边距离
+  origin.bgImage.left = move.start.bgImage.left + mx;
+  origin.bgImage.top = move.start.bgImage.top + my;
+
+  let frameLeft = origin.frame.left;
+  let frameTop = origin.frame.top;
+  let frameWidth = origin.frame.width;
+  let frameHeight = origin.frame.height;
+
+  // 左边触边
+  if (origin.bgImage.left > frameLeft) {
+    origin.bgImage.left = frameLeft;
+  }
+  // 头部触边
+  if (origin.bgImage.top > frameTop) {
+    origin.bgImage.top = frameTop;
+  }
+  // 右边触边
+  if (origin.bgImage.left + origin.bgImage.width < frameLeft + frameWidth) {
+    origin.bgImage.left = frameLeft + frameWidth - origin.bgImage.width;
+  }
+  // 底部触边：背景距离头部+背景的高度 < 背景高度 + 矩形框顶部
+  if (origin.bgImage.top + origin.bgImage.height < frameTop + frameHeight) {
+    origin.bgImage.top = frameTop + frameHeight - origin.bgImage.height;
+  }
+};
+
+//缩放裁剪框
+const scaleFrame = (ta, tb) => {
+  let mx = tb.clientX - ta.clientX;
+  let my = tb.clientY - ta.clientY;
+  let x1 = move.start.frame.left;
+  let y1 = move.start.frame.top;
+  let x2 = move.start.frame.left + move.start.frame.width;
+  let y2 = move.start.frame.top + move.start.frame.height;
+  let cx1 = false;
+  let cy1 = false;
+  let cx2 = false;
+  let cy2 = false;
+  let mix = origin.frameSize;
+  let rate = origin.frame.width / origin.frame.height;
+
+  const { width: fWidth, height: fHeight } = origin.frame;
+  const { width: bgWidth, height: bgHeight } = origin.bgImage;
+  const { width: realWidth, height: realHeight } = origin.real;
+
+  //左上角
+  if (move.touchType == "left-top") {
+    x1 += mx;
+    y1 += my;
+    cx1 = true;
+    cy1 = true;
+    // 左下角
+  } else if (move.touchType == "left-bottom") {
+    x1 += mx;
+    y2 += my;
+    cx1 = true;
+    cy2 = true;
+    // 右上角
+  } else if (move.touchType == "right-top") {
+    x2 += mx;
+    y1 += my;
+    cx2 = true;
+    cy1 = true;
+    // 右下角
+  } else if (move.touchType == "right-bottom") {
+    x2 += mx;
+    y2 += my;
+    cx2 = true;
+    cy2 = true;
+  }
+
+  if (x1 < origin.bgImage.left) {
+    x1 = origin.bgImage.left;
+  }
+  if (y1 < origin.bgImage.top) {
+    y1 = origin.bgImage.top;
+  }
+  if (x2 > origin.bgImage.left + origin.bgImage.width) {
+    x2 = origin.bgImage.left + origin.bgImage.width;
+  }
+  if (y2 > origin.bgImage.top + origin.bgImage.height) {
+    y2 = origin.bgImage.top + origin.bgImage.height;
+  }
+  if (cx1) {
+    if (x1 > x2 - mix) {
+      x1 = x2 - mix;
+    }
+  }
+  if (cy1) {
+    if (y1 > y2 - mix) {
+      y1 = y2 - mix;
+    }
+  }
+  if (cx2) {
+    if (x2 < x1 + mix) {
+      x2 = x1 + mix;
+    }
+  }
+  if (cy2) {
+    if (y2 < y1 + mix) {
+      y2 = y1 + mix;
+    }
+  }
+  if (cx1) {
+    if (props.mode != "free") {
+      var val = x2 - rate * (y2 - y1);
+      if (x1 < val) {
+        x1 = val;
+      }
+    }
+  }
+  if (cy1) {
+    if (props.mode != "free") {
+      var val = y2 - (x2 - x1) / rate;
+      if (y1 < val) {
+        y1 = val;
+      }
+    }
+  }
+  if (cx2) {
+    if (props.mode != "free") {
+      var val = rate * (y2 - y1) + x1;
+      if (x2 > val) {
+        x2 = val;
+      }
+    }
+  }
+  if (cy2) {
+    if (props.mode != "free") {
+      var val = (x2 - x1) / rate + y1;
+      if (y2 > val) {
+        y2 = val;
+      }
+    }
+  }
+
+  // 裁剪框缩放限制
+  const owFrame = x2 - x1;
+  const ohFrame = y2 - y1;
+
+  if (owFrame < fWidth || ohFrame < fHeight) {
+    const currentRatio = props.scaleRatio * props.maxRatio;
+    const isScale =
+      bgWidth * currentRatio >= realWidth / props.scaleRatio &&
+      bgHeight * currentRatio >= realHeight / props.scaleRatio;
+    if (isScale) {
+      return false;
+    }
+  }
+
+  origin.frame.left = x1;
+  origin.frame.top = y1;
+  origin.frame.width = x2 - x1;
+  origin.frame.height = y2 - y1;
+};
+
+//双指缩放图片
+const scaleImage = (ta, tb, tc, td) => {
+  let x1 = ta.clientX;
+  let y1 = ta.clientY;
+  let x2 = tb.clientX;
+  let y2 = tb.clientY;
+  let x3 = tc.clientX;
+  let y3 = tc.clientY;
+  let x4 = td.clientX;
+  let y4 = td.clientY;
+  let ol = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
+  let el = Math.sqrt((x3 - x4) * (x3 - x4) + (y3 - y4) * (y3 - y4));
+  let ocx = (x1 + x2) / 2;
+  let ocy = (y1 + y2) / 2;
+  let ecx = (x3 + x4) / 2;
+  let ecy = (y3 + y4) / 2;
+  let ax = ecx - ocx;
+  let ay = ecy - ocy;
+  let scale = el / ol;
+
+  // 检测放大/缩小倍率
+  if (move.start.bgImage.width * scale < origin.frame.width) {
+    scale = origin.frame.width / move.start.bgImage.width;
+  }
+
+  if (move.start.bgImage.height * scale < origin.frame.height) {
+    scale = origin.frame.height / move.start.bgImage.height;
+  }
+
+  // 最大缩放
+  if (move.start.bgImage.width * scale > origin.frame.width * props.maxRatio) {
+    return;
+  }
+
+  origin.bgImage.left =
+    move.start.bgImage.left + ax - (ocx - move.start.bgImage.left) * (scale - 1);
+
+  origin.bgImage.top =
+    move.start.bgImage.top + ay - (ocy - move.start.bgImage.top) * (scale - 1);
+
+  origin.bgImage.width = move.start.bgImage.width * scale;
+  origin.bgImage.height = move.start.bgImage.height * scale;
+
+  if (origin.bgImage.left > origin.frame.left) {
+    origin.bgImage.left = origin.frame.left;
+  }
+  if (origin.bgImage.top > origin.frame.top) {
+    origin.bgImage.top = origin.frame.top;
+  }
+  if (
+    origin.bgImage.left + origin.bgImage.width <
+    origin.frame.left + origin.frame.width
+  ) {
+    origin.bgImage.left = origin.frame.left + origin.frame.width - origin.bgImage.width;
+  }
+  if (
+    origin.bgImage.top + origin.bgImage.height <
+    origin.frame.top + origin.frame.height
+  ) {
+    origin.bgImage.top = origin.frame.top + origin.frame.height - origin.bgImage.height;
+  }
+};
+
+// 手指触摸动作结束
+const touchEnd = () => {
+  touch.touchStart = [];
+  resizeImage(); //调整图片的大小
+};
+
+// 手指触摸动作被打断，如来电提醒，弹窗
+const touchCancel = () => {
+  touch.touchStart = [];
+};
+
+// 调整图片的大小
+const resizeImage = () => {
+  var rate = origin.frame.width / origin.frame.height; //比列
+  var width = origin.body.width * props.scaleRatio; //裁剪框图片高度 * 缩小0.7倍
+  var height = origin.body.height * props.scaleRatio; //裁剪框图片宽度 * 缩小0.7倍
+  // 图片的位置：
+  // 缩放后的宽度/高度 > 组件裁剪的比例，就要对宽度重写
+  if (width / height > rate) {
+    width = height * rate;
+  } else {
+    height = width / rate;
+  }
+  var left = (origin.body.width - width) / 2;
+  var top = (origin.body.height - height) / 2;
+  var mul = width / origin.frame.width;
+  var ox = origin.frame.left - origin.bgImage.left;
+  var oy = origin.frame.top - origin.bgImage.top;
+
+  origin.frame = {
+    left: left,
+    top: top,
+    width: width,
+    height: height,
+  };
+
+  width = origin.bgImage.width * mul;
+  height = origin.bgImage.height * mul;
+  left = origin.frame.left - ox * mul;
+  top = origin.frame.top - oy * mul;
+  origin.bgImage = {
+    left: left,
+    top: top,
+    width: width,
+    height: height,
+  };
+  if (mul != 1) {
+    origin.transit = true;
+    setTimeout(() => {
+      origin.transit = false;
+    }, 300);
+  }
+};
+
+/**
+ * 绘制手指触摸结束
+ */
+</script>
+
+<style>
+page {
+  overflow: hidden;
+  overscroll-behavior: none;
+}
+</style>
+<style lang="scss" scoped>
+@import "./t-cropper";
+</style>
diff --git a/src/uni_modules/t-cropper/package.json b/src/uni_modules/t-cropper/package.json
new file mode 100644
index 00000000..37290087
--- /dev/null
+++ b/src/uni_modules/t-cropper/package.json
@@ -0,0 +1,85 @@
+{
+  "id": "t-cropper",
+  "displayName": "t-cropper图片裁剪插件",
+  "version": "1.0.8",
+  "description": "vue3图片裁剪插件，头像裁剪、支持自定义尺寸、等比例缩放、拖动、图片翻转、剪切圆形/圆角图片，高性能裁剪图片插件",
+  "keywords": [
+    "图片裁剪",
+    ",头像裁剪,缩放,旋转,拖动",
+    ""
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "n",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u",
+          "app-uvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "u",
+          "IE": "u",
+          "Edge": "u",
+          "Firefox": "u",
+          "Safari": "u"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u",
+          "钉钉": "u",
+          "快手": "u",
+          "飞书": "u",
+          "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/t-cropper/readme.md b/src/uni_modules/t-cropper/readme.md
new file mode 100644
index 00000000..7a6e1a6f
--- /dev/null
+++ b/src/uni_modules/t-cropper/readme.md
@@ -0,0 +1,186 @@
+# t-cropper
+
+> **t-cropper  一款高性能移动端图片裁剪工具**
+
+## 平台兼容
+
+| App   |   H5   |   微信小程序 |   支付宝小程序 |
+| :---: | :---:  | :----------: | :-----------: |
+|  √    |     √  |      √       |      √        |
+
+### 属性说明
+
+|属性         |类型     |默认     |备注      |
+| :--------: | :-----: | :----:  | :----:  |
+| mode       |String   | "ratio"  | 裁剪模式|
+| imageUrl   |String   |   " "    | 需要裁剪的图片路径|
+| width      |Number   | 200     | 图片裁剪后的宽度，固定大小时有效|
+| height     |Number   | 200     | 图片裁剪后的高度，固定大小时有效|
+| maxWidth   |Number   | 1024    | 图片裁剪后的最大宽度 |
+| maxHeight  |Number   | 1024    | 图片裁剪后的最大高度 |
+| scaleRatio |Number   | 0.7    | 裁剪比列缩放,建议不超过0.95 |
+| minRatio  |Number   | 1    | 最小缩放 |
+| maxRatio  |Number   | 3    | 最大缩放 |
+| radius  |Number   | 0    | 裁剪图片圆角半径，单位px |
+| delay   |Number   | 250    | 确定按钮快速重复点击时间 |
+| isRotateBtn  |Boolean   | true    | 是否显示旋转按钮 |
+
+### mode有效值
+
+| 模式     |值       |说明   |
+| :-----: | :-----: | :----: |
+| 固定模式 |fixed    | 裁剪出指定大小的图片，一般用于头像上传    |
+| 等比缩放 |ratio    | 限定宽高比，裁剪大小不固定  |
+| 自由模式 |free     | 不限定宽高比，裁剪大小不固定  |
+
+### 事件说明
+
+|事件名称     |说明     |返回     |
+| :--------: | :-----: | :----:  |
+| confirm        |点击确定按钮    |   object    |
+| cancel      |点击取消按钮  | -  |
+
+### 示例
+
+```html
+
+<template>
+  <view>
+    <t-cropper
+      mode="ratio"
+      :imageUrl="imageUrl"
+      :width="500"
+      :height="500"
+      :radius="100"
+      :delay="150"
+      @cancel="onCancel"
+      @confirm="onConfirm"
+    ></t-cropper>
+    <view class="preview">
+      <image
+        v-for="(item, index) in resultUrl"
+        :key="item.id"
+        class="images"
+        @click="prviewImgae(index, item.url)"
+        :src="item.url"
+      />
+    </view>
+    <button class="button" type="primary" @click="selectFile">选择图片</button>
+  </view>
+</template>
+
+<script setup>
+import { reactive, toRefs } from "vue";
+const model = reactive({
+  imageUrl: "",
+  resultUrl: [],
+});
+
+const { resultUrl, imageUrl } = toRefs(model);
+
+// 使用uni.compressImage压缩图片
+const compressImage = () => {
+  uni.chooseImage({
+    count: 1,
+    sizeType: "original",
+    success: (res) => {
+      console.log("original", res);
+      //  示例：防止大图片文件的Image无法直接临时路径显示图片
+      uni.showLoading({
+        title: "处理中...",
+        mask: true,
+      });
+      // 使用uni.compressImage压缩图片
+      uni.compressImage({
+        src: res.tempFilePaths[0],
+        quality: 80, // 压缩质量
+        success: (compressRes) => {
+          model.imageUrl = compressRes.tempFilePath;
+        },
+        fail: (err) => {
+          console.error("图片压缩失败：", err);
+        },
+        complete: () => {
+          uni.hideLoading(); // 关闭loading
+        },
+      });
+    },
+  });
+};
+
+// 使用默认压缩方式
+const defaultCompressImage = () => {
+  uni.chooseImage({
+    count: 1,
+    sizeType: "compressed",
+    success: (res) => {
+      model.imageUrl = res.tempFilePaths[0];
+    },
+  });
+};
+
+/**
+ *** 特别声明：在使用 uni.chooseImage 选择的大图片文件无法直接在 Image 组件中显示，通常涉及到以下可能的问题和限制。
+ *** 图片大小和尺寸限制：移动设备和浏览器对于能够加载和处理的图片大小有限制，如果选择的图片文件尺寸过大，可能无法正常加载和显示。
+ *** 性能问题：大图片文件可能会导致页面加载缓慢或者卡顿，尤其是在移动设备上。
+ *** 内存问题：加载大图片可能会消耗大量的内存资源，特别是在移动设备上，可能导致内存不足或者页面崩溃的问题。
+ *** 解决参考方案如下：
+ *** 防止选择大文件图片后无法在Image中直接临时路径显示图片，导致无法在裁剪插件中显示，
+ *** 根据项目需要对大尺寸图片进行压缩、对图片质量要求高的，需要提前上传至oss进行采用网络图片进行裁剪。
+ */
+const selectFile = () => {
+  // 推荐使用其他压缩方式，这里只是简单大图片压缩示例-经供思路参考切勿使用
+  // 示例一：uni.compressImage压缩图片
+  // compressImage();
+
+  // 示例二：使用自带压缩图
+  defaultCompressImage();
+};
+
+// 关闭裁剪
+const onCancel = () => {
+  model.imageUrl = "";
+};
+
+// 裁剪确认
+const onConfirm = (res) => {
+  // 设置url的值，显示控件
+  const params = {
+    id: new Date().getTime(),
+    url: res.tempFilePath,
+  };
+  model.resultUrl.push(params);
+  model.imageUrl = "";
+};
+
+// 预览图片
+const prviewImgae = (index, url) => {
+  uni.previewImage({
+    current: index, // 当前资源下标
+    urls: [url],
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.preview {
+  padding: 32rpx;
+
+  .images {
+    margin: 10rpx;
+    width: 200rpx;
+    height: 200rpx;
+  }
+}
+.button {
+  margin: 0 20rpx;
+}
+</style>
+
+
+
+```
+
+### 注意
+
+1.uni-app版本不断更新，插件有时无法适应新版本，感谢大家及时提交bug，但希望大家手下留情，不要轻易给差评！
diff --git a/src/uni_modules/t-cropper/static/svg/rotate.svg b/src/uni_modules/t-cropper/static/svg/rotate.svg
new file mode 100644
index 00000000..0143706c
--- /dev/null
+++ b/src/uni_modules/t-cropper/static/svg/rotate.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="30px" height="30px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2.4306;stroke-miterlimit:10;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M17.1,24.2h-12c-0.2,0-0.3-0.2-0.3-0.3v-9.3c0-0.2,0.2-0.3,0.3-0.3h12c0.2,0,0.3,0.2,0.3,0.3v9.3
+		C17.5,24.1,17.3,24.2,17.1,24.2z"/>
+	<path class="st0" d="M16.6,5.4c4.8,0,8.7,3.9,8.7,8.7"/>
+	<polyline class="st0" points="19.3,10.1 14.9,5.6 19.3,1.2 	"/>
+</g>
+</svg>
diff --git a/src/uni_modules/uv-textarea/components/uv-textarea/props.js b/src/uni_modules/uv-textarea/components/uv-textarea/props.js
index b0c78899..f79e52ac 100644
--- a/src/uni_modules/uv-textarea/components/uv-textarea/props.js
+++ b/src/uni_modules/uv-textarea/components/uv-textarea/props.js
@@ -101,7 +101,7 @@ export default {
 		// 最大输入长度，设置为 -1 的时候不限制最大长度
 		maxlength: {
 			type: [String, Number],
-			default: 140
+			default: 160
 		},
 		// 边框类型，surround-四周边框，bottom-底部边框
 		border: {