上传图片裁剪

app.json

@@ -10,7 +10,7 @@
         "pages/add-company/add-company",
         "pages/product/product",
         "components/dkbase/dk-customer-detail/dk-customer-detail",
-        "components/dkbase/dk-step/dk-step", 
+        "components/dkbase/dk-step/dk-step",
         "components/dkbase/dk-goos-list-step/dk-goos-list-step"
     ],
     "subPackages": [
@@ -247,7 +247,8 @@
                 "pages/select-source-sale-out-order/select-source-sale-out-order",
                 "pages/select-master-slave/select-master-slave",
                 "pages/web-view-select/web-view-select",
-                "pages/select-choose-coordination/select-choose-coordination"
+                "pages/select-choose-coordination/select-choose-coordination",
+                "pages/cropper/cropper"
             ]
         }
     ],
@@ -384,8 +385,7 @@
         "dk-navbar": "components/dkbase/dk-navbar/dk-navbar",
         "dk-swiper": "components/dkbase/dk-swiper/dk-swiper",
         "dk-select-field": "components/dkbase/dk-select-field/dk-select-field",
-        "dk-timeclock-calendar":"components/dkbase/dk-timeclock-calendar/dk-timeclock-calendar",
-        "dk-cropper":"components/dkbase/dk-cropper/dk-cropper"
+        "dk-timeclock-calendar": "components/dkbase/dk-timeclock-calendar/dk-timeclock-calendar"
     },
     "tabBar": {
         "color": "#95A8CB",

components/dkbase/dk-cropper/dk-cropper.js

@@ -1,24 +0,0 @@
-// components/dkbase/dk-cropper/dk-cropper.js
-Component({
-
-    /**
-     * 组件的属性列表
-     */
-    properties: {
-
-    },
-
-    /**
-     * 组件的初始数据
-     */
-    data: {
-
-    },
-
-    /**
-     * 组件的方法列表
-     */
-    methods: {
-
-    }
-})

components/dkbase/dk-cropper/dk-cropper.wxml

@@ -1,2 +0,0 @@
-<!--components/dkbase/dk-cropper/dk-cropper.wxml-->
-<text>components/dkbase/dk-cropper/dk-cropper.wxml</text>

components/dkbase/dk-cropper/dk-cropper.wxss

@@ -1 +0,0 @@
-/* components/dkbase/dk-cropper/dk-cropper.wxss */

components/dkbase/dk-form-bill/dk-form-bill.js

@@ -2697,7 +2697,7 @@ Component({
      * @author : 周兴
      * @date : 2024/3/27 16:16
      */
-    afterRead(e) { 
+    afterRead(e) {  
       const _this = this;
       const {
         file

components/dkbase/dk-form/dk-form.js

@@ -29,6 +29,10 @@ Component({
       type: Boolean,
       value: false
     },
+    isCroppingFlag: { //是否开启裁剪功能
+      type: Boolean,
+      value: false
+    },
     uploaderMAX: {
       type: Number,
       value: 5
@@ -88,7 +92,7 @@ Component({
     checked: false
   },
   lifetimes: {
-    attached: function () { },
+    attached: function () {},
     detached: function () {
       // 在组件实例被从页面节点树移除时执行
       // 清空地址信息
@@ -174,7 +178,7 @@ Component({
         // 检查它是否真的是一个数组  
         if (Array.isArray(array)) {
           array.forEach(item => {
-            if (item.tip&&this.selectComponent('#' + item.code)) {
+            if (item.tip && this.selectComponent('#' + item.code)) {
               this.selectComponent('#' + item.code).setShowTipFlag(false)
             }
           });
@@ -798,20 +802,20 @@ Component({
           } else {
             bol = true
           }
-          if(bol){
-              // 如果配置中用户未订阅消息 则弹窗
-              wx.requestSubscribeMessage({
-                tmplIds: tmplIds,
-                success(res) {
-                  that.openDatePopTime(e)
-                },
-                fail(res) {
-                  that.openDatePopTime(e)
-                }
-              })
-            } else {
-              that.openDatePopTime(e)
-            }
+          if (bol) {
+            // 如果配置中用户未订阅消息 则弹窗
+            wx.requestSubscribeMessage({
+              tmplIds: tmplIds,
+              success(res) {
+                that.openDatePopTime(e)
+              },
+              fail(res) {
+                that.openDatePopTime(e)
+              }
+            })
+          } else {
+            that.openDatePopTime(e)
+          }
         },
         fail(res) {
           that.openDatePopTime(e)
@@ -924,49 +928,107 @@ Component({
      * @date : 2024/3/27 16:16
      */
     afterRead(e) {
-      // this.setData({
-      //     uploadFileFlag:true
-      // })
       const _this = this;
-      const {
-        file
-      } = e.detail;
-      // 配置存放的文件夹 公司code - 表名 - 年月 -- 日
-      let folder = app.globalData.company.cpCode + '/' + this.data.table + '/' + new Date().toYearMonth2() + '/' + new Date().toDay()
-      let url = config.upload_url;
-      url = url.replace('mdm-server', 'mdm-server' + '-' + app.globalData.company.svcCode.replace('_', '-'))
-      file.forEach((res, index) => {
-        // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
-        wx.uploadFile({
-          url: url,
-          filePath: res.path,
-          name: 'file',
-          formData: {
-            'folder': folder
-          },
-          header: {
-            'Authorization': 'Bearer ' + app.globalData.token
-          },
-          success(res) {
-            let data = JSON.parse(res.data)
-            if (data.code === 200) {
-              let form = _this.data.form
-              let annexPaths = form['annexPaths'] || []
-              data.data.url = config.image_url + data.data.path
-              annexPaths.push(data.data)
-              form.annexPaths = annexPaths;
-              _this.setData({
-                form: form,
-                value: JSON.stringify(form)
+      if (this.data.isCroppingFlag) { //开启裁剪功能 
+        //  获取裁剪图片资源后，给data添加src属性及其值
+        wx.navigateTo({
+          url: '/package-base-select/pages/cropper/cropper',
+          events: {
+            // 回调后
+            bindData: function (data) {
+              console.log('bindData',data); 
+              const {
+                file
+              } = {file:[{path:data}]};
+              // 配置存放的文件夹 公司code - 表名 - 年月 -- 日
+              let folder = app.globalData.company.cpCode + '/' + _this.data.table + '/' + new Date().toYearMonth2() + '/' + new Date().toDay()
+              let url = config.upload_url;
+              url = url.replace('mdm-server', 'mdm-server' + '-' + app.globalData.company.svcCode.replace('_', '-'))
+              file.forEach((res, index) => {
+                // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
+                wx.uploadFile({
+                  url: url,
+                  filePath: res.path,
+                  name: 'file',
+                  formData: {
+                    'folder': folder
+                  },
+                  header: {
+                    'Authorization': 'Bearer ' + app.globalData.token
+                  },
+                  success(res) {
+                    let data = JSON.parse(res.data)
+                    if (data.code === 200) {
+                      let form = _this.data.form
+                      let annexPaths = form['annexPaths'] || []
+                      data.data.url = config.image_url + data.data.path
+                      annexPaths.push(data.data)
+                      form.annexPaths = annexPaths;
+                      _this.setData({
+                        form: form,
+                        value: JSON.stringify(form)
+                      })
+                      // 如果是最后一条
+                      if (index == file.length - 1) {
+                        _this.triggerEvent("uploadSucess", {})
+                      }
+                    }
+                  },
+                })
               })
-              // 如果是最后一条
-              if (index == file.length - 1) {
-                _this.triggerEvent("uploadSucess", {})
-              }
             }
           },
+          success: function (res) {
+            // 通过eventChannel向被打开页面传送数据
+            res.eventChannel.emit('params', {
+              src: e.detail.file[0].path, 
+            })
+          }
         })
-      })
+      } else { 
+        const {
+          file
+        } = e.detail;
+        // 配置存放的文件夹 公司code - 表名 - 年月 -- 日
+        let folder = app.globalData.company.cpCode + '/' + this.data.table + '/' + new Date().toYearMonth2() + '/' + new Date().toDay()
+        let url = config.upload_url;
+        url = url.replace('mdm-server', 'mdm-server' + '-' + app.globalData.company.svcCode.replace('_', '-'))
+        file.forEach((res, index) => {
+          // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
+          wx.uploadFile({
+            url: url,
+            filePath: res.path,
+            name: 'file',
+            formData: {
+              'folder': folder
+            },
+            header: {
+              'Authorization': 'Bearer ' + app.globalData.token
+            },
+            success(res) {
+              let data = JSON.parse(res.data)
+              if (data.code === 200) {
+                let form = _this.data.form
+                let annexPaths = form['annexPaths'] || []
+                data.data.url = config.image_url + data.data.path
+                annexPaths.push(data.data)
+                form.annexPaths = annexPaths;
+                _this.setData({
+                  form: form,
+                  value: JSON.stringify(form)
+                })
+                // 如果是最后一条
+                if (index == file.length - 1) {
+                  _this.triggerEvent("uploadSucess", {})
+                }
+              }
+            },
+          })
+        })
+      }
+  
+
+
     },
     /**
      * @desc : 获取语言的方法

package-base-select/pages/cropper/cropper.js

@@ -0,0 +1,100 @@
+const WeCropper = require('@/utils/weCropper/we-cropper.js');
+
+const app = getApp()
+const device = wx.getSystemInfoSync()
+const width = device.windowWidth
+const height = device.windowHeight - 80
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    cropperOpt: {
+      id: 'cropper',
+      targetId: 'targetCropper',
+      pixelRatio: device.pixelRatio,
+      width,
+      height,
+      scale: 2.5,
+      zoom: 8,
+      cut: {
+        x: (width - 300) / 2,
+        y: (height - 260) / 2,
+        width: 300,
+        height: 260
+      },
+      boundStyle: {
+        color: "green",
+        mask: 'rgba(0,0,0,0.8)',
+        lineWidth: 1
+      }
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(option) {
+    let that = this
+    const eventChannel = this.getOpenerEventChannel()
+    eventChannel.on('params', function (data) {
+      const {
+        cropperOpt
+      } = that.data
+      cropperOpt.src = data.src
+      cropperOpt.boundStyle.color = "green"
+
+      that.setData({
+        cropperOpt
+      })
+
+      that.cropper = new WeCropper(cropperOpt)
+        .on('ready', (ctx) => {})
+        .on('beforeImageLoad', (ctx) => {
+          wx.showToast({
+            title: '上传中',
+            icon: 'loading',
+            duration: 20000
+          })
+        })
+        .on('imageLoad', (ctx) => {
+          wx.hideToast()
+        })
+    })
+
+  },
+
+  touchStart(e) {
+    this.cropper.touchStart(e)
+  },
+  touchMove(e) {
+    this.cropper.touchMove(e)
+  },
+  touchEnd(e) {
+    this.cropper.touchEnd(e)
+  },
+  // 点击取消，返回上一页
+  cancel() {
+    wx.navigateBack({
+      delta: 1
+    })
+  },
+  getCropperImage() {
+    this.cropper.getCropperImage()
+      .then((src) => {
+          // 给父页面传递数据
+          const eventChannel = this.getOpenerEventChannel();
+          eventChannel.emit('bindData', src) 
+          wx.navigateBack({
+            delta: 1
+          })
+      })
+      .catch((err) => {
+        wx.showModal({
+          title: '温馨提示',
+          content: err.message
+        })
+      })
+  },
+})

components/dkbase/dk-cropper/dk-cropper.json → package-base-select/pages/cropper/cropper.json

@@ -1,4 +1,3 @@
 {
-    "component": true,
     "usingComponents": {}
 }

package-base-select/pages/cropper/cropper.wxml

@@ -0,0 +1,16 @@
+<import src="/utils/weCropper/we-cropper"></import> 
+<view class="cropper-wrapper">
+  <template is="we-cropper" data="{{...cropperOpt}}"></template>
+  <cover-view class="cropper-buttons" style="color: {{cropperOpt.boundStyle.color}}">
+    <cover-view
+      class="upload btn"
+      bindtap="cancel">
+      取消
+    </cover-view>
+    <cover-view
+      class="upload btn"
+      bindtap="getCropperImage">
+      裁剪
+    </cover-view>
+  </cover-view>
+</view>

package-base-select/pages/cropper/cropper.wxss

@@ -0,0 +1,31 @@
+/* pages/user/clipHeadImg/index.wxss */
+ 
+.cropper{
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.cropper-buttons{
+  background-color: rgba(0, 0, 0, 0.95);
+}
+
+.btn{
+  color: #ffffff;
+}
+
+.cropper-buttons{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 80px;
+  padding: 0 20rpx;
+  box-sizing: border-box;
+  line-height: 80px;
+  z-index: 9999999 !important;
+}

package-basic-data/pages/product-file/add/add.wxml

@@ -4,7 +4,7 @@
 <loading wx:if="{{loading}}" ></loading>
  
 <dk-form id="{{formName}}" routeObjName="{{routeObjName}}"uploaderMAX="1"  cardList="{{cardList}}" contentObj="{{contentObj}}"  table="{{table}}" bind:onSwitchChange = "onSwitchChange"  bind:triggerBindBlur ="triggerBindBlur" bind:openStr= "openStr"
-model:value="{{formData}}" bind:chooseData="chooseData" bindtap="handleTap"  >
+model:value="{{formData}}" bind:chooseData="chooseData" bindtap="handleTap" isCroppingFlag="{{true}}" >
 </dk-form>
  
 <view style="height: 200rpx;"></view>