Merge branch 'master' of http://git.zthymaoyi.com/gdc/yiliangyiyun-app

components/upload/weCropper.js

@@ -0,0 +1,709 @@
+(function(global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global.weCropper = factory());
+}(this, (function() {
+  'use strict';
+
+  /**
+   * Created by sail on 2017/6/11.
+   */
+  var device = void 0;
+  var TOUCH_STATE = ['touchstarted', 'touchmoved', 'touchended'];
+
+  function firstLetterUpper(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+
+  function setTouchState(instance) {
+    for (var _len = arguments.length, arg = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      arg[_key - 1] = arguments[_key];
+    }
+
+    TOUCH_STATE.forEach(function(key, i) {
+      if (arg[i] !== undefined) {
+        instance[key] = arg[i];
+      }
+    });
+  }
+
+  function validator(instance, o) {
+    Object.defineProperties(instance, o);
+  }
+
+  function getDevice() {
+    if (!device) {
+      device = wx.getSystemInfoSync();
+    }
+    return device;
+  }
+
+  var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function(obj) {
+    return typeof obj;
+  } : function(obj) {
+    return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  };
+
+
+
+
+  var classCallCheck = function(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  };
+
+  var createClass = function() {
+    function defineProperties(target, props) {
+      for (var i = 0; i < props.length; i++) {
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+      }
+    }
+
+    return function(Constructor, protoProps, staticProps) {
+      if (protoProps) defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) defineProperties(Constructor, staticProps);
+      return Constructor;
+    };
+  }();
+
+
+
+
+  var slicedToArray = function() {
+    function sliceIterator(arr, i) {
+      var _arr = [];
+      var _n = true;
+      var _d = false;
+      var _e = undefined;
+
+      try {
+        for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+          _arr.push(_s.value);
+
+          if (i && _arr.length === i) break;
+        }
+      } catch (err) {
+        _d = true;
+        _e = err;
+      } finally {
+        try {
+          if (!_n && _i["return"]) _i["return"]();
+        } finally {
+          if (_d) throw _e;
+        }
+      }
+
+      return _arr;
+    }
+
+    return function(arr, i) {
+      if (Array.isArray(arr)) {
+        return arr;
+      } else if (Symbol.iterator in Object(arr)) {
+        return sliceIterator(arr, i);
+      } else {
+        throw new TypeError("Invalid attempt to destructure non-iterable instance");
+      }
+    };
+  }();
+
+  var tmp = {};
+
+  var DEFAULT = {
+    id: {
+      default: 'cropper',
+      get: function get$$1() {
+        return tmp.id;
+      },
+      set: function set$$1(value) {
+        if (typeof value !== 'string') {}
+        tmp.id = value;
+      }
+    },
+    width: {
+      default: 750,
+      get: function get$$1() {
+        return tmp.width;
+      },
+      set: function set$$1(value) {
+        tmp.width = value;
+      }
+    },
+    height: {
+      default: 750,
+      get: function get$$1() {
+        return tmp.height;
+      },
+      set: function set$$1(value) {
+        tmp.height = value;
+      }
+    },
+    scale: {
+      default: 2.5,
+      get: function get$$1() {
+        return tmp.scale;
+      },
+      set: function set$$1(value) {
+        tmp.scale = value;
+      }
+    },
+    zoom: {
+      default: 5,
+      get: function get$$1() {
+        return tmp.zoom;
+      },
+      set: function set$$1(value) {
+        tmp.zoom = value;
+      }
+    },
+    src: {
+      default: 'cropper',
+      get: function get$$1() {
+        return tmp.src;
+      },
+      set: function set$$1(value) {
+        tmp.src = value;
+      }
+    },
+    cut: {
+      default: {},
+      get: function get$$1() {
+        return tmp.cut;
+      },
+      set: function set$$1(value) {
+        tmp.cut = value;
+      }
+    },
+    onReady: {
+      default: null,
+      get: function get$$1() {
+        return tmp.ready;
+      },
+      set: function set$$1(value) {
+        tmp.ready = value;
+      }
+    },
+    onBeforeImageLoad: {
+      default: null,
+      get: function get$$1() {
+        return tmp.beforeImageLoad;
+      },
+      set: function set$$1(value) {
+        tmp.beforeImageLoad = value;
+      }
+    },
+    onImageLoad: {
+      default: null,
+      get: function get$$1() {
+        return tmp.imageLoad;
+      },
+      set: function set$$1(value) {
+        tmp.imageLoad = value;
+      }
+    },
+    onBeforeDraw: {
+      default: null,
+      get: function get$$1() {
+        return tmp.beforeDraw;
+      },
+      set: function set$$1(value) {
+        tmp.beforeDraw = value;
+      }
+    }
+  };
+
+  /**
+   * Created by sail on 2017/6/11.
+   */
+  function prepare() {
+    var self = this;
+
+    var _getDevice = getDevice(),
+      windowWidth = _getDevice.windowWidth;
+
+    self.attachPage = function() {
+      var pages = getCurrentPages
+      //  获取到当前page上下文
+      ();
+      var pageContext = pages[pages.length - 1];
+      //  把this依附在Page上下文的wecropper属性上，便于在page钩子函数中访问
+      pageContext.wecropper = self;
+    };
+
+    self.createCtx = function() {
+      var id = self.id;
+
+      if (id) {
+        self.ctx = wx.createCanvasContext(id);
+      }
+    };
+
+    self.deviceRadio = windowWidth / 750;
+		self.deviceRadio=self.deviceRadio.toFixed(2)
+  }
+
+  /**
+   *
+   */
+  function observer() {
+    var self = this;
+
+    var EVENT_TYPE = ['ready', 'beforeImageLoad', 'beforeDraw', 'imageLoad'];
+
+    self.on = function(event, fn) {
+      if (EVENT_TYPE.indexOf(event) > -1) {
+        if (typeof fn === 'function') {
+          event === 'ready' ? fn(self) : self['on' + firstLetterUpper(event)] = fn;
+        }
+      }
+      return self;
+    };
+  }
+
+  /**
+   * Created by sail on 2017/6/11.
+   */
+  function methods() {
+    var self = this;
+
+    var deviceRadio = self.deviceRadio;
+		console.log(JSON.stringify(self));
+
+    var boundWidth = self.width; // 裁剪框默认宽度，即整个画布宽度
+    var boundHeight = self.height; // 裁剪框默认高度，即整个画布高度
+    var _self$cut = self.cut,
+      _self$cut$x = _self$cut.x,
+      x = _self$cut$x === undefined ? 0 : _self$cut$x,
+      _self$cut$y = _self$cut.y,
+      y = _self$cut$y === undefined ? 0 : _self$cut$y,
+      _self$cut$width = _self$cut.width,
+      width = _self$cut$width === undefined ? boundWidth : _self$cut$width,
+      _self$cut$height = _self$cut.height,
+      height = _self$cut$height === undefined ? boundHeight : _self$cut$height;
+
+
+    self.updateCanvas = function() {
+      if (self.croperTarget) {
+				
+        //  画布绘制图片
+        self.ctx.drawImage(self.croperTarget, self.imgLeft, self.imgTop, self.scaleWidth, self.scaleHeight);
+      }
+      typeof self.onBeforeDraw === 'function' && self.onBeforeDraw(self.ctx, self);
+
+      self.setBoundStyle //	设置边界样式
+      ();
+      self.ctx.draw();
+      return self;
+    };
+
+    self.pushOrign = function(src) {
+      self.src = src;
+
+      typeof self.onBeforeImageLoad === 'function' && self.onBeforeImageLoad(self.ctx, self);
+
+      uni.getImageInfo({
+        src: src,
+        success: function success(res) {
+          var innerAspectRadio = res.width / res.height;
+          self.croperTarget = res.path||src;
+          if (innerAspectRadio < width / height) {
+            self.rectX = x;
+            self.baseWidth = width;
+            self.baseHeight = width / innerAspectRadio;
+            self.rectY = y - Math.abs((height - self.baseHeight) / 2);
+          } else {
+            self.rectY = y;
+            self.baseWidth = height * innerAspectRadio;
+            self.baseHeight = height;
+            self.rectX = x - Math.abs((width - self.baseWidth) / 2);
+          }
+
+          self.imgLeft = self.rectX;
+          self.imgTop = self.rectY;
+          self.scaleWidth = self.baseWidth;
+          self.scaleHeight = self.baseHeight;
+
+          self.updateCanvas();
+
+          typeof self.onImageLoad === 'function' && self.onImageLoad(self.ctx, self);
+        }
+      });
+
+      self.update();
+      return self;
+    };
+
+    self.getCropperImage = function() {
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      var id = self.id;
+
+      var ARG_TYPE = toString.call(args[0]);
+      switch (ARG_TYPE) {
+        case '[object Object]':
+          var _args$0$quality = args[0].quality,
+            quality = _args$0$quality === undefined ? 10 : _args$0$quality;
+						console.log("quality--"+quality);
+						
+          uni.canvasToTempFilePath({
+            canvasId: id,
+            x: x,
+            y: y,
+            width: width,
+            height: height,
+            destWidth: width * quality / (deviceRadio * 10),
+            destHeight: height * quality / (deviceRadio * 10),
+            success: function success(res) {
+							console.log(res);
+              typeof args[args.length - 1] === 'function' && args[args.length - 1](res.tempFilePath);
+            }
+          });
+          break;
+        case '[object Function]':
+          uni.canvasToTempFilePath({
+            canvasId: id,
+            x: x,
+            y: y,
+						fileType:"jpg",
+            width: width,
+            height: height,
+            destWidth: width ,
+            destHeight: height,
+            success: function success(res) {
+							
+              typeof args[args.length - 1] === 'function' && args[args.length - 1](res.tempFilePath);
+            }
+          });
+          break;
+      }
+
+      return self;
+    };
+  }
+
+  /**
+   * Created by sail on 2017/6/11.
+   */
+  function update() {
+    var self = this;
+    if (!self.src) return;
+
+    self.__oneTouchStart = function(touch) {
+      self.touchX0 = touch.x;
+      self.touchY0 = touch.y;
+    };
+
+    self.__oneTouchMove = function(touch) {
+      var xMove = void 0,
+        yMove = void 0;
+      //计算单指移动的距离
+      if (self.touchended) {
+        return self.updateCanvas();
+      }
+      xMove = touch.x - self.touchX0;
+      yMove = touch.y - self.touchY0;
+
+      var imgLeft = self.rectX + xMove;
+      var imgTop = self.rectY + yMove;
+
+      self.outsideBound(imgLeft, imgTop);
+
+      self.updateCanvas();
+    };
+
+    self.__twoTouchStart = function(touch0, touch1) {
+      var xMove = void 0,
+        yMove = void 0,
+        oldDistance = void 0;
+
+      self.touchX1 = self.rectX + self.scaleWidth / 2;
+      self.touchY1 = self.rectY + self.scaleHeight / 2;
+
+      //计算两指距离
+      xMove = touch1.x - touch0.x;
+      yMove = touch1.y - touch0.y;
+      oldDistance = Math.sqrt(xMove * xMove + yMove * yMove);
+
+      self.oldDistance = oldDistance;
+    };
+
+    self.__twoTouchMove = function(touch0, touch1) {
+      var xMove = void 0,
+        yMove = void 0,
+        newDistance = void 0;
+      var scale = self.scale,
+        zoom = self.zoom;
+      // 计算二指最新距离
+
+      xMove = touch1.x - touch0.x;
+      yMove = touch1.y - touch0.y;
+      newDistance = Math.sqrt(xMove * xMove + yMove * yMove
+
+        //  使用0.005的缩放倍数具有良好的缩放体验
+      );
+      self.newScale = self.oldScale + 0.001 * zoom * (newDistance - self.oldDistance);
+
+      //  设定缩放范围
+      self.newScale <= 1 && (self.newScale = 1);
+      self.newScale >= scale && (self.newScale = scale);
+
+      self.scaleWidth = self.newScale * self.baseWidth;
+      self.scaleHeight = self.newScale * self.baseHeight;
+      var imgLeft = self.touchX1 - self.scaleWidth / 2;
+      var imgTop = self.touchY1 - self.scaleHeight / 2;
+
+      self.outsideBound(imgLeft, imgTop);
+
+      self.updateCanvas();
+    };
+
+    self.__xtouchEnd = function() {
+      self.oldScale = self.newScale;
+      self.rectX = self.imgLeft;
+      self.rectY = self.imgTop;
+    };
+  }
+
+  /**
+   * Created by sail on 2017/6/11.
+   */
+
+  var handle = {
+    //  图片手势初始监测
+    touchStart: function touchStart(e) {
+      var self = this;
+      var _e$touches = slicedToArray(e.touches, 2),
+        touch0 = _e$touches[0],
+        touch1 = _e$touches[1];
+				
+				console.log(JSON.stringify(touch1));
+				if(!touch0.x){
+					touch0.x=touch0.clientX;
+					touch0.y=touch0.clientY;
+					if(touch1){
+						touch1.x=touch1.clientX;
+						touch1.y=touch1.clientY;
+					}
+				}
+
+      setTouchState(self, true, null, null
+
+        //计算第一个触摸点的位置，并参照改点进行缩放
+      );
+      self.__oneTouchStart(touch0
+
+        // 两指手势触发
+      );
+      if (e.touches.length >= 2) {
+        self.__twoTouchStart(touch0, touch1);
+      }
+    },
+
+
+    //  图片手势动态缩放
+    touchMove: function touchMove(e) {
+      var self = this;
+
+      var _e$touches2 = slicedToArray(e.touches, 2),
+        touch0 = _e$touches2[0],
+        touch1 = _e$touches2[1];
+				if(!touch0.x){
+					touch0.x=touch0.clientX;
+					touch0.y=touch0.clientY;
+					if(touch1){
+						touch1.x=touch1.clientX;
+						touch1.y=touch1.clientY;
+					}
+				}
+      setTouchState(self, null, true
+
+        // 单指手势时触发
+      );
+      if (e.touches.length === 1) {
+        self.__oneTouchMove(touch0);
+      }
+      // 两指手势触发
+      if (e.touches.length >= 2) {
+        self.__twoTouchMove(touch0, touch1);
+      }
+    },
+    touchEnd: function touchEnd(e) {
+      var self = this;
+
+      setTouchState(self, false, false, true);
+      self.__xtouchEnd();
+    }
+  };
+
+  /**
+   * Created by sail on 1017/6/12.
+   */
+  function cut() {
+    var self = this;
+    var deviceRadio = self.deviceRadio;
+
+    var boundWidth = self.width; // 裁剪框默认宽度，即整个画布宽度
+    var boundHeight = self.height;
+    // 裁剪框默认高度，即整个画布高度
+    var _self$cut = self.cut,
+      _self$cut$x = _self$cut.x,
+      x = _self$cut$x === undefined ? 0 : _self$cut$x,
+      _self$cut$y = _self$cut.y,
+      y = _self$cut$y === undefined ? 0 : _self$cut$y,
+      _self$cut$width = _self$cut.width,
+      width = _self$cut$width === undefined ? boundWidth : _self$cut$width,
+      _self$cut$height = _self$cut.height,
+      height = _self$cut$height === undefined ? boundHeight : _self$cut$height;
+
+    /**
+     * 设置边界
+     * @param imgLeft 图片左上角横坐标值
+     * @param imgTop 图片左上角纵坐标值
+     */
+
+    self.outsideBound = function(imgLeft, imgTop) {
+      self.imgLeft = imgLeft >= x ? x : self.scaleWidth + imgLeft - x <= width ? x + width - self.scaleWidth : imgLeft;
+
+      self.imgTop = imgTop >= y ? y : self.scaleHeight + imgTop - y <= height ? y + height - self.scaleHeight : imgTop;
+    };
+
+    /**
+     * 设置边界样式
+     * @param color	边界颜色
+     */
+    self.setBoundStyle = function() {
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _ref$color = _ref.color,
+        color = _ref$color === undefined ? '#04b00f' : _ref$color,
+        _ref$mask = _ref.mask,
+        mask = _ref$mask === undefined ? 'rgba(0, 0, 0, 0.3)' : _ref$mask,
+        _ref$lineWidth = _ref.lineWidth,
+        lineWidth = _ref$lineWidth === undefined ? 1 : _ref$lineWidth;
+
+      // 绘制半透明层
+      self.ctx.beginPath();
+      self.ctx.setFillStyle(mask);
+      self.ctx.fillRect(0, 0, x, boundHeight);
+      self.ctx.fillRect(x, 0, width, y);
+      self.ctx.fillRect(x, y + height, width, boundHeight - y - height);
+      self.ctx.fillRect(x + width, 0, boundWidth - x - width, boundHeight);
+      self.ctx.fill
+
+      // 设置边界左上角样式
+      // 为使边界样式处于边界外边缘，此时x、y均要减少lineWidth
+      ();
+      self.ctx.beginPath();
+      self.ctx.setStrokeStyle(color);
+      self.ctx.setLineWidth(lineWidth);
+      self.ctx.moveTo(x - lineWidth, y + 10 - lineWidth);
+      self.ctx.lineTo(x - lineWidth, y - lineWidth);
+      self.ctx.lineTo(x + 10 - lineWidth, y - lineWidth);
+      self.ctx.stroke
+
+      // 设置边界左下角样式
+      // 为使边界样式处于边界外边缘，此时x要减少lineWidth、y要增加lineWidth
+      ();
+      self.ctx.beginPath();
+      self.ctx.setStrokeStyle(color);
+      self.ctx.setLineWidth(lineWidth);
+      self.ctx.moveTo(x - lineWidth, y + height - 10 + lineWidth);
+      self.ctx.lineTo(x - lineWidth, y + height + lineWidth);
+      self.ctx.lineTo(x + 10 - lineWidth, y + height + lineWidth);
+      self.ctx.stroke
+
+      // 设置边界右上角样式
+      // 为使边界样式处于边界外边缘，此时x要增加lineWidth、y要减少lineWidth
+      ();
+      self.ctx.beginPath();
+      self.ctx.setStrokeStyle(color);
+      self.ctx.setLineWidth(lineWidth);
+      self.ctx.moveTo(x + width - 10 + lineWidth, y - lineWidth);
+      self.ctx.lineTo(x + width + lineWidth, y - lineWidth);
+      self.ctx.lineTo(x + width + lineWidth, y + 10 - lineWidth);
+      self.ctx.stroke
+
+      // 设置边界右下角样式
+      // 为使边界样式处于边界外边缘，此时x、y均要增加lineWidth
+      ();
+      self.ctx.beginPath();
+      self.ctx.setStrokeStyle(color);
+      self.ctx.setLineWidth(lineWidth);
+      self.ctx.moveTo(x + width + lineWidth, y + height - 10 + lineWidth);
+      self.ctx.lineTo(x + width + lineWidth, y + height + lineWidth);
+      self.ctx.lineTo(x + width - 10 + lineWidth, y + height + lineWidth);
+      self.ctx.stroke();
+    };
+  }
+
+  var __version__ = '1.1.4';
+
+  var weCropper = function() {
+    function weCropper(params) {
+      classCallCheck(this, weCropper);
+
+      var self = this;
+      var _default = {};
+
+      validator(self, DEFAULT);
+
+      Object.keys(DEFAULT).forEach(function(key) {
+        _default[key] = DEFAULT[key].default;
+      });
+      Object.assign(self, _default, params);
+
+      self.prepare();
+      self.attachPage();
+      self.createCtx();
+      self.observer();
+      self.cutt();
+      self.methods();
+      self.init();
+      self.update();
+
+      return self;
+    }
+
+    createClass(weCropper, [{
+      key: 'init',
+      value: function init() {
+        var self = this;
+        var src = self.src;
+
+
+        self.version = __version__;
+
+        typeof self.onReady === 'function' && self.onReady(self.ctx, self);
+
+        if (src) {
+          self.pushOrign(src);
+        }
+        setTouchState(self, false, false, false);
+
+        self.oldScale = 1;
+        self.newScale = 1;
+
+        return self;
+      }
+    }]);
+    return weCropper;
+  }();
+	
+		Object.assign(weCropper.prototype, handle);
+  
+
+  weCropper.prototype.prepare = prepare;
+  weCropper.prototype.observer = observer;
+  weCropper.prototype.methods = methods;
+  weCropper.prototype.cutt = cut;
+  weCropper.prototype.update = update;
+
+  return weCropper;
+
+})));

config/index.js

@@ -3,7 +3,7 @@ const dev = {
 	// baseUrl: 'http://localhost:8080/',
 	// baseUrlNew: 'http://192.168.110.67:9100/',
 	// baseUrlNew: 'http://192.168.1.118:8090/',
-	// baseUrlNew: 'http://192.168.110.9:9100/',
+	baseUrlNew: 'http://192.168.110.9:9888/',
 	// baseUrlNew: 'http://192.168.110.138:8090/',
 	// baseUrlNew: 'http://192.168.110.82:8090/',
 	// baseUrlNew: 'http://192.168.110.82:8090/',

pages.json

@@ -609,6 +609,12 @@
 				"navigationBarTitleText": "头像",
 				"enablePullDownRefresh": true
 			}
+		},{
+			"path": "pages/user/upload",
+			"style": {
+				"navigationBarTitleText": "头像",
+				"enablePullDownRefresh": false
+			}
 		},
 		{
 			"path": "pages/user/set_nickname",

pages/user/set_picture.vue

@@ -1,5 +1,18 @@
 <template>
 	<view class="container">
+		<view class="headPortrait">
+			<view style="text-align: center;" v-if="!src">
+				<view class="plus" v-if="!src">
+					<u-icon name="plus" color="#afb3bf" size="50" ></u-icon>
+				</view>
+				<image :src="src" class="avatar" @tap="upload"></image>
+				<view class="item" @tap="upload">自定义</view>
+			</view>
+			<view style="text-align: center;padding-top: 70rpx;border-radius: 50%;" v-else>
+				<image :src="src" class="avatar1" @tap="upload"></image>
+				<view class="item" @tap="upload">自定义</view>
+			</view>
+		</view>
 		<view class="headPortrait flex">
 			<view class="pictures">
 				<image src="../../static/img/myimg/YongHu@3x.png" v-bind:class="pictures" @click="oKSelected(1)">
@@ -57,12 +70,36 @@
 				picturesFour: "picture",
 				identityUrl: "",
 				deptListurl: {},
+				src: ''
 
 			}
 		},
 		computed: {
 			...mapState(['hasLogin', 'userInfo'])
 		},
+		onLoad(option) {
+			let url = this.userInfo.avatarUrl
+			if(url){
+				if(url == 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/appData/162874144867649.png'){
+					this.oKSelected(1)
+				}else if(url == 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/appData/162874149682940.png'){
+					this.oKSelected(2)
+				}else if(url == 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/appData/1628741540162138.png'){
+					this.oKSelected(3)
+				}else if(url == 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/appData/162874156836497.png'){
+					this.oKSelected(4)
+				}else{
+					this.src = url
+					this.identityUrl = url
+					this.oKSelected(0)
+				}
+			}
+			if (option.src) {
+				this.src = option.src;
+				this.identityUrl = option.src
+				this.oKSelected(0)
+			}
+		},
 		methods: {
 			oKSelected(number) {
 				if (number == 1) {
@@ -81,7 +118,7 @@
 						this.pictures = "picture"
 						this.picturesThree = "picture"
 						this.picturesFour = "picture"
-						this.identityUrl = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/appData/162874149682940.png "
+						this.identityUrl = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/appData/162874149682940.png"
 					} else {
 						this.picturesTwo = "picture"
 						this.identityUrl = ""
@@ -108,8 +145,27 @@
 						this.picturesFour = "picture"
 						this.identityUrl = ""
 					}
+				}else{
+					this.pictures = "picture"
+					this.picturesTwo = "picture"
+					this.picturesThree = "picture"
+					this.picturesFour = "picture"
+					// this.identityUrl = ""
 				}
 			},
+			upload() {
+				uni.chooseImage({
+					count: 1, // 默认9
+					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
+					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+					success(res) {
+						const src = res.tempFilePaths[0];
+						uni.redirectTo({
+							url: '/pages/user/upload?src=' + src
+						});
+					}
+				});
+			},
 			commit() {
 				if (this.identityUrl == null || this.identityUrl == "") {
 					this.$api.msg('请选择一张图片！')
@@ -121,41 +177,40 @@
 				that.$api.doRequest('post', '/commonUser/editUserInfo', that.deptListurl).then(
 						res => {
 							if (res.data.code == 200) {
-									uni.showToast({
-										title: '修改成功！',
-										icon: 'success',
-										duration: 2000,
-										success() {
-											setTimeout(()=>{
-												that.userInfo.avatarUrl = that.identityUrl
-												var _student = uni.getStorageSync('userInfo');
-												_student.avatarUrl = that.identityUrl;
-												uni.setStorageSync('userInfo', _student);
-												var name = 'userInfo';
-												var value = _student;
-												that.$store.commit('$uStore', {
-													name,
-													value
-												});
-												// this.$api.msg('修改成功2！')
-												uni.navigateBack({
-													delta:1
-												})
-											},2000)
-										}
-									})
-								
+								uni.showToast({
+									title: '修改成功！',
+									icon: 'success',
+									duration: 2000,
+									success() {
+										setTimeout(() => {
+											that.userInfo.avatarUrl = that.identityUrl
+											var _student = uni.getStorageSync('userInfo');
+											_student.avatarUrl = that.identityUrl;
+											uni.setStorageSync('userInfo', _student);
+											var name = 'userInfo';
+											var value = _student;
+											that.$store.commit('$uStore', {
+												name,
+												value
+											});
+											// this.$api.msg('修改成功2！')
+											uni.navigateBack({
+												delta: 1
+											})
+										}, 2000)
+									}
+								})
+
 							}
 						})
 					.catch(res => {
-						if(res.data.errmsg){
+						if (res.data.errmsg) {
 							uni.showToast({
 								title: res.data.errmsg,
 								icon: 'none',
 								duration: 2000
 							})
-						}
-						else{
+						} else {
 							uni.showToast({
 								title: "系统异常，请联系管理员",
 								icon: 'none',
@@ -177,7 +232,8 @@
 	.headPortrait {
 		width: 100%;
 		background-color: #FFFFFF;
-		border-radius: 20px;
+		border-radius: 20rpx;
+		margin-top: 20rpx;
 	}
 
 	.picture {
@@ -227,4 +283,35 @@
 		line-height: 50px;
 		font-weight: 500;
 	}
+
+	.avatar-container {
+		position: relative;
+		text-align: center;
+		padding-top: 50%;
+	}
+	.avatar {
+		width: 230rpx;
+		height: 230rpx;
+		border: 1px dashed #afb3bf;
+		border-radius: 50%;
+	}
+	.avatar1 {
+		width: 230rpx;
+		height: 230rpx;
+		border-radius: 50%;
+	}
+
+	.plus {
+		position: relative;
+		width: 30px;
+		margin: auto;
+		top: 70px;
+	}
+
+	.item {
+		text-align: center;
+		margin: auto;
+		margin-bottom: 20rpx;
+		line-height: 60rpx;
+	}
 </style>

pages/user/upload.vue

@@ -0,0 +1,309 @@
+<template>
+	<view class="content">
+		<view class="cropper-wrapper" style="height:100vh">
+			<canvas class="cropper" disable-scroll="true" @touchstart="touchStart" @touchmove="touchMove"
+				@touchend="touchEnd" :style="{ width: cropperOpt.width, height: cropperOpt.height }"
+				canvas-id="cropper"></canvas>
+		</view>
+		<view class="cropper-buttons">
+			<view class="upload" @tap="uploadTap">重新选择</view>
+			<view class="getCropperImage" @tap="getCropperImage">确定</view>
+		</view>
+	</view>
+</template>
+<script>
+	import weCropper from '../../components/upload/weCropper';
+	import * as config from '@/config'
+	const device = uni.getSystemInfoSync();
+	const width = device.windowWidth;
+	const height = device.windowHeight - 50;
+	console.log(device);
+	export default {
+		data() {
+			return {
+				cropperOpt: {
+					id: 'cropper',
+					width: width,
+					height: height,
+					scale: 2.5,
+					zoom: 8,
+					cut: {
+						x: (width - 295) / 2,
+						y: (height - 300) / 2,
+						width: 295,
+						height: 300
+					}
+				},
+				weCropper: '',
+			};
+		},
+		methods: {
+			back() {
+				uni.redirectTo({
+					url: '../infoDetail/infoDetail'
+				});
+			},
+			touchStart(e) {
+				this.weCropper.touchStart(e);
+			},
+			touchMove(e) {
+				this.weCropper.touchMove(e);
+			},
+			touchEnd(e) {
+				this.weCropper.touchEnd(e);
+			},
+			convertBase64UrlToBlob(dataURI, type) {
+				var binary = atob(dataURI.split(',')[1]);
+				var array = [];
+				for (var i = 0; i < binary.length; i++) {
+					array.push(binary.charCodeAt(i));
+				}
+				return new Blob([new Uint8Array(array)], {
+					type: type
+				}, {
+					filename: '1111.jpg'
+				});
+			},
+			blobToDataURL(blob) {
+				var a = new FileReader();
+				a.readAsDataURL(blob); //读取文件保存在result中
+				a.onload = function(e) {
+					var getRes = e.target.result; //读取的结果在result中
+					console.log(getRes);
+				};
+			},
+			getCropperImage() {
+				let _this = this;
+				// let pathurl = url + '/user/upload';上传服务器地址
+				this.weCropper.getCropperImage(avatar => {
+					if (avatar) {
+						//下面是上传到服务器的方法
+						// #ifdef H5 
+						this.parseBlob(avatar)
+						// #endif
+						// #ifdef APP-PLUS
+						let pcUserInfo = uni.getStorageSync('pcUserInfo')
+						uni.uploadFile({
+							url: config.def().baseUrlNew + 'appendix/api/uploadFiles',
+							filePath: avatar,
+							name: 'fileName',
+							formData: {
+								companyId: pcUserInfo.compId,
+								modelId: '',
+								vesselId: '',
+							},
+							success: res => {
+								let src = JSON.parse(res.data).data.appendixPath
+								console.log(src)
+								uni.redirectTo({
+									url: '/pages/user/set_picture?src=' + src
+								});
+							},
+							ail: err => {
+								console.log('uploadImage fail', err);
+								uni.showModal({
+									content: err.errMsg,
+									showCancel: false
+								});
+								uni.hideLoading();
+							},
+							complete: () => {
+								console.log('complate');
+							}
+						});
+						// #endif
+					} else {
+						console.log('获取图片失败，请稍后重试');
+					}
+				});
+			},
+			parseBlob(base64) {
+				let that = this
+				var arr = base64.split(',');
+				var mime = arr[0].match(/:(.*?);/)[0];
+				// var mime = arr[0].slice(arr[0].lastIndexOf("/")+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;
+				let pcUserInfo = uni.getStorageSync('pcUserInfo')
+				let address = url.createObjectURL(new Blob([u8arr], {
+					type: mime
+				}))
+				uni.uploadFile({
+					url: config.def().baseUrlNew + 'appendix/api/uploadFiles',
+					filePath: address,
+					name: 'fileName',
+					formData: {
+						companyId: pcUserInfo.compId,
+						modelId: '',
+						vesselId: '',
+					},
+					success: (res) => {
+						let src = JSON.parse(res.data).data.appendixPath
+						uni.redirectTo({
+							url: '/pages/user/set_picture?src=' + src
+						});
+						// uni.showToast({
+						// 	title: '上传成功',
+						// 	icon: 'success',
+						// 	duration: 3000,
+						// 	complete(){
+						// 	}
+						// });
+					},
+					ail: err => {
+						console.log('uploadImage fail', err);
+						uni.showModal({
+							content: err.errMsg,
+							showCancel: false
+						});
+						uni.hideLoading();
+					},
+					complete: () => {
+						console.log('complate');
+					}
+				});
+				return url.createObjectURL(new Blob([u8arr], {
+					type: mime
+				}));
+			},
+			uploadTap() {
+				const self = this;
+				uni.chooseImage({
+					count: 1, // 默认9
+					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
+					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+					success(res) {
+						let src = res.tempFilePaths[0];
+						//  获取裁剪图片资源后，给data添加src属性及其值
+
+						self.weCropper.pushOrign(src);
+					}
+				});
+			}
+		},
+		onLoad(option) {
+			// do something
+			const cropperOpt = this.cropperOpt;
+			const src = option.src;
+			if (src) {
+				Object.assign(cropperOpt, {
+					src
+				});
+
+				this.weCropper = new weCropper(cropperOpt)
+					.on('ready', function(ctx) {})
+					.on('beforeImageLoad', ctx => {
+						uni.showToast({
+							title: '上传中',
+							icon: 'loading',
+							duration: 3000
+						});
+					})
+					.on('imageLoad', ctx => {
+						uni.hideToast();
+					});
+			}
+		}
+	};
+</script>
+
+<style>
+	.content {
+		background: rgba(255, 255, 255, 1);
+	}
+
+	.head-list {
+		height: 43px;
+		width: 100%;
+		background: #ffffff;
+		justify-content: center;
+		align-items: center;
+		display: flex;
+		border-bottom: 1px solid rgba(244, 244, 244, 1);
+	}
+
+	.head-info {
+		text-align: center;
+		font-size: 18px;
+		color: #000000;
+		font-weight: bold;
+	}
+
+	.save-box {
+		position: absolute;
+		right: 0px;
+		width: 50px;
+		height: 43px;
+		line-height: 43px;
+	}
+
+	.save {
+		color: rgba(98, 111, 252, 1);
+		font-size: 16px;
+		font-weight: 400;
+	}
+
+	.icon-back {
+		margin-top: 11px;
+		width: 10px;
+		height: 18px;
+		color: #000000;
+		margin-left: 6px;
+	}
+
+	.icon-back-box {
+		display: block;
+		position: absolute;
+		left: 6px;
+		height: 43px;
+		width: 30px;
+		align-items: center;
+	}
+
+	.cropper {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+
+	.cropper-buttons {
+		background-color: #FFFFFF;
+		color: #22C572;
+	}
+
+	.cropper-wrapper {
+		position: relative;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		background-color: #F0F0F0;
+	}
+
+	.cropper-buttons {
+		width: 100vw;
+		height: 60px;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		line-height: 50px;
+	}
+
+	.cropper-buttons .upload,
+	.cropper-buttons .getCropperImage {
+		width: 50%;
+		text-align: center;
+	}
+</style>