上传图片时大于2M压缩

my/feedback/index.vue

@@ -1,183 +1,157 @@
-<template>
-	<view class="page" style="background-color: #ffffff;">
-		<view class="feedback-title">
-			<text>问题和意见</text>
-			<text @tap="chooseMsg">快速键入</text>
-		</view>
-		<view class="feedback-body"><textarea placeholder="请详细描述你的问题和意见..." v-model="sendDate.feedbackMessage" class="feedback-textare" /></view>
-		<view class="feedback-title"><text>联系方式</text></view>
-		<view class="feedback-body"><input class="feedback-input" v-model="sendDate.userEmail" placeholder="方便我们联系你" /></view>
-
-		<button style="" class="feedback-submit" @tap="send">提交</button>
-	</view>
-</template>
-
-<script>
-export default {
-	data() {
-		return {
-			msgContents: ['界面显示错乱', '启动缓慢，卡出翔了', 'UI无法直视，丑哭了', '偶发性崩溃'],
-			stars: [1, 2, 3, 4, 5],
-			imageList: [],
-			sendDate: {
-				score: 5,
-				feedbackMessage: '',
-				userEmail: ''
-			}
-		};
-	},
-	onLoad() {
-		// let deviceInfo = {
-		// 	appid: plus.runtime.appid,
-		// 	imei: plus.device.imei, //设备标识
-		// 	p: plus.os.name === 'Android' ? 'a' : 'i', //平台类型，i表示iOS平台，a表示Android平台。
-		// 	md: plus.device.model, //设备型号
-		// 	app_version: plus.runtime.version,
-		// 	plus_version: plus.runtime.innerVersion, //基座版本号
-		// 	os: plus.os.version,
-		// 	net: '' + plus.networkinfo.getCurrentType()
-		// };
-		// this.sendDate = Object.assign(deviceInfo, this.sendDate);
-	},
-	methods: {
-		close(e) {
-			this.imageList.splice(e, 1);
-		},
-		chooseMsg() {
-			//快速输入
-			uni.showActionSheet({
-				itemList: this.msgContents,
-				success: res => {
-					this.sendDate.feedbackMessage = this.msgContents[res.tapIndex];
-				}
-			});
-		},
-		chooseImg() {
-			//选择图片
-			uni.chooseImage({
-				sourceType: ['camera', 'album'],
-				sizeType: 'compressed',
-				count: 8 - this.imageList.length,
-				success: res => {
-					this.imageList = this.imageList.concat(res.tempFilePaths);
-				}
-			});
-		},
-		chooseStar(e) {
-			//点击评星
-			this.sendDate.score = e;
-		},
-		previewImage() {
-			//预览图片
-			uni.previewImage({
-				urls: this.imageList
-			});
-		},
-		send() {
-			//发送反馈
-			console.log(JSON.stringify(this.sendDate));
-
-			if (!this.sendDate.feedbackMessage) {
-				uni.showToast({
-					icon: 'none',
-					title: '请输入反馈内容'
-				});
-				return;
-			}
-			if (!this.sendDate.userEmail) {
-				uni.showToast({
-					icon: 'none',
-					title: '请填写联系方式'
-				});
-				return;
-			}
-			this.$queue.showLoading('加载中...');
-			this.$Request.postJson('/app/shop/userFeedback', {
-				shopId:uni.getStorageSync("shopId"),
-				userEmail: this.sendDate.userEmail,
-				feedbackMessage: this.sendDate.feedbackMessage,
-				// state: 2
-			}).then(res => {
-				if (res.code === 0) {
-					uni.showToast({
-						title: '提交成功'
-					});
-					setTimeout(function() {
-						uni.navigateBack();
-					}, 1000);
-				} else {
-					uni.hideLoading();
-					uni.showModal({
-						showCancel: false,
-						title: '提交失败',
-						feedbackMessage: res.msg
-					});
-				}
-			});
-		}
-	}
-};
-</script>
-
-<style>
-@font-face {
-	font-family: uniicons;
-	font-weight: normal;
-	font-style: normal;
-	src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
-}
-page {
-	background-color: #F5F5F5 !important;
-}
-view {
-	font-size: 28upx;
-}
-
-
-/*问题反馈*/
-.feedback-title {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	padding: 20upx;
-	color: #8f8f94;
-	font-size: 28upx;
-}
-.feedback-star-view.feedback-title {
-	justify-content: flex-start;
-	margin: 0;
-}
-
-.feedback-body {
-	font-size: 32upx;
-	padding: 16upx;
-	margin: 16upx;
-	border-radius: 16upx;
-	background: #FFFFFF;
-	/* color: #FFF; */
-}
-.feedback-textare {
-	height: 200upx;
-	font-size: 34upx;
-	line-height: 50upx;
-	width: 100%;
-	box-sizing: border-box;
-	padding: 20upx 30upx 0;
-
-}
-.feedback-input {
-	font-size: 32upx;
-	height: 60upx;
-	/* padding: 15upx 20upx; */
-	line-height: 60upx;
-}
-
-
-.feedback-submit {
-	background: #FFAF5E;
-	/* color: #ffffff; */
-	margin: 20upx;
-	margin-top: 32upx;
-}
-</style>
+<template>
+	<view class="page" style="background-color: #ffffff">
+		<view class="feedback-title">
+			<text>问题和意见</text>
+			<text @tap="chooseMsg">快速键入</text>
+		</view>
+		<view class="feedback-body"><textarea placeholder="请详细描述你的问题和意见..." v-model="sendDate.feedbackMessage" class="feedback-textare" /></view>
+		<view class="feedback-title"><text>联系方式</text></view>
+		<view class="feedback-body"><input class="feedback-input" v-model="sendDate.userEmail" placeholder="方便我们联系你" /></view>
+
+		<button style="" class="feedback-submit" @tap="send">提交</button>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			msgContents: ['界面显示错乱', '启动缓慢，卡出翔了', 'UI无法直视，丑哭了', '偶发性崩溃'],
+			sendDate: {
+				score: 5,
+				feedbackMessage: '',
+				userEmail: ''
+			}
+		}
+	},
+	onLoad() {
+		// let deviceInfo = {
+		// 	appid: plus.runtime.appid,
+		// 	imei: plus.device.imei, //设备标识
+		// 	p: plus.os.name === 'Android' ? 'a' : 'i', //平台类型，i表示iOS平台，a表示Android平台。
+		// 	md: plus.device.model, //设备型号
+		// 	app_version: plus.runtime.version,
+		// 	plus_version: plus.runtime.innerVersion, //基座版本号
+		// 	os: plus.os.version,
+		// 	net: '' + plus.networkinfo.getCurrentType()
+		// };
+		// this.sendDate = Object.assign(deviceInfo, this.sendDate);
+	},
+	methods: {
+		chooseMsg() {
+			//快速输入
+			uni.showActionSheet({
+				itemList: this.msgContents,
+				success: (res) => {
+					this.sendDate.feedbackMessage = this.msgContents[res.tapIndex]
+				}
+			})
+		},
+
+		send() {
+			//发送反馈
+			console.log(JSON.stringify(this.sendDate))
+
+			if (!this.sendDate.feedbackMessage) {
+				uni.showToast({
+					icon: 'none',
+					title: '请输入反馈内容'
+				})
+				return
+			}
+			if (!this.sendDate.userEmail) {
+				uni.showToast({
+					icon: 'none',
+					title: '请填写联系方式'
+				})
+				return
+			}
+			this.$queue.showLoading('加载中...')
+			this.$Request
+				.postJson('/app/shop/userFeedback', {
+					shopId: uni.getStorageSync('shopId'),
+					userEmail: this.sendDate.userEmail,
+					feedbackMessage: this.sendDate.feedbackMessage
+					// state: 2
+				})
+				.then((res) => {
+					if (res.code === 0) {
+						uni.showToast({
+							title: '提交成功'
+						})
+						setTimeout(function () {
+							uni.navigateBack()
+						}, 1000)
+					} else {
+						uni.hideLoading()
+						uni.showModal({
+							showCancel: false,
+							title: '提交失败',
+							feedbackMessage: res.msg
+						})
+					}
+				})
+		}
+	}
+}
+</script>
+
+<style>
+@font-face {
+	font-family: uniicons;
+	font-weight: normal;
+	font-style: normal;
+	src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
+}
+page {
+	background-color: #f5f5f5 !important;
+}
+view {
+	font-size: 28upx;
+}
+
+/*问题反馈*/
+.feedback-title {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	padding: 20upx;
+	color: #8f8f94;
+	font-size: 28upx;
+}
+.feedback-star-view.feedback-title {
+	justify-content: flex-start;
+	margin: 0;
+}
+
+.feedback-body {
+	font-size: 32upx;
+	padding: 16upx;
+	margin: 16upx;
+	border-radius: 16upx;
+	background: #ffffff;
+	/* color: #FFF; */
+}
+.feedback-textare {
+	height: 200upx;
+	font-size: 34upx;
+	line-height: 50upx;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 20upx 30upx 0;
+}
+.feedback-input {
+	font-size: 32upx;
+	height: 60upx;
+	/* padding: 15upx 20upx; */
+	line-height: 60upx;
+}
+
+.feedback-submit {
+	background: #ffaf5e;
+	/* color: #ffffff; */
+	margin: 20upx;
+	margin-top: 32upx;
+}
+</style>

pages/my/userinfo.vue

@@ -1,309 +1,337 @@
-<template>
-	<view>
-		<view class="usermain">
-			<view class="usermain-item ">
-				<view>头像</view>
-				<view @click="uploadImg()">
-					<image src="../../static/logo.png" v-if="avatar==null" mode=""
-						style="width: 111rpx;height: 111rpx;border-radius: 50%;"></image>
-					<image v-else :src="avatar" mode="" style="width: 111rpx;height: 111rpx;border-radius: 50%;">
-					</image>
-				</view>
-			</view>
-			<view class="usermain-item item-padding ">
-				<view>用户名</view>
-				<view>
-					<view class="cu-form-group">
-						<input v-model="userName" placeholder="请输入用户名" />
-					</view>
-				</view>
-			</view>
-			<view class="usermain-item item-padding ">
-				<view>年龄</view>
-				<view>
-					<view class="cu-form-group">
-						<input v-model="age" />
-					</view>
-				</view>
-			</view>
-			<!-- <view class="usermain-item item-padding">
-				<view  >姓名</view>
-				<view class="cu-form-group">
-					<input    v-model="realName" placeholder="请填写您的真实姓名" />
-				</view>
-			</view> -->
-
-			<view class="usermain-item item-padding ">
-				<view>手机</view>
-				<view>
-					<view class="cu-form-group">
-						<input  v-model="phone" placeholder="请输入联系电话" />
-					</view>
-				</view>
-			</view>
-			<view class="usermain-item item-padding ">
-				<view>性别</view>
-				<view>
-					<view class="cu-form-group">
-						<u-radio-group v-model="sex">
-							<u-radio shape="circle" active-color="#2FB57A" :name="1" >男</u-radio>
-							<u-radio shape="circle" active-color="#2FB57A" :name="2" >女</u-radio>
-						</u-radio-group>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="footer-btn">
-			<view class="usermain-btn" @click="messagebtn()">保存</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import configdata from '../../common/config.js';
-	export default {
-		data() {
-			return {
-				phone: '',
-				avatar: '../../static/logo.png',
-				userName: '',
-				nickName: '',
-				userId: '',
-				realName: '',
-				weChatId: "",
-				password: '',
-				platform: '',
-				createTime: '',
-				money: '',
-				jiFen: '',
-				status: '',
-				zhiFuBao: '',
-				zhiFuBaoName: '',
-				sex:1,
-				age: 0
-			};
-		},
-		onLoad(e) {
-			this.getUserInfo()
-			// this.avatar = uni.getStorageSync('avatar')
-		},
-		methods: {
-			goMyAddress() {
-				uni.navigateTo({
-					url: '../jifen/myaddress'
-				});
-			},
-			uploadImg() { 
-				let token = uni.getStorageSync('token')
-
-				if (!token) {
-					this.goLoginInfo();
-					return;
-				}
-				let that = this;
-				var url = null;
-				uni.showActionSheet({
-					// itemList按钮的文字接受的是数组
-					itemList: ["查看头像", "从相册选择图片"],
-					success(e) {
-						var index = e.tapIndex
-						if (index === 0) {
-							// 用户点击了预览当前图片
-							// 可以自己实现当前头像链接的读取
-							let url = that.avatar;
-							let arr = []
-							arr.push(url)
-							uni.previewImage({
-								// 预览功能图片也必须是数组的
-								urls: arr
-							})
-						} else if (index === 1) {
-							uni.chooseImage({
-								count: 1, //默认9
-								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
-								sourceType: ['album'], //从相册选择
-								success: function(res) {
-									uni.showLoading({
-										title: '上传中...',
-										mask: true, // 是否显示透明蒙层，防止触摸穿透
-									});
-									let token = uni.getStorageSync('token');
-									let userId = uni.getStorageSync('userId');
-									uni.uploadFile({
-										url: that.config("APIHOST1") + '/alioss/upload', //真实的接口地址
-										
-										filePath: res.tempFilePaths[0],
-										header: {
-											token: token
-										},
-										name: 'file',
-										success: uploadFileRes => {
-											url = JSON.parse(uploadFileRes.data);
-											that.avatar = url.data
-											uni.hideLoading();
-										}
-									});
-								}
-							});
-						}
-					}
-				})
-			},
-			config: function(name) {
-				var info = null;
-				if (name) {
-					var name2 = name.split("."); //字符分割
-					if (name2.length > 1) {
-						info = configdata[name2[0]][name2[1]] || null;
-					} else {
-						info = configdata[name] || null;
-					}
-					if (info == null) {
-						let web_config = cache.get("web_config");
-						if (web_config) {
-							if (name2.length > 1) {
-								info = web_config[name2[0]][name2[1]] || null;
-							} else {
-								info = web_config[name] || null;
-							}
-						}
-					}
-				}
-				return info;
-			},
-			getUserInfo() {
-				// let userId = uni.getStorageSync('userId')
-				this.$Request.get("/sys/user/info").then(res => {
-					if (res.code == 0) {
-						this.$queue.setData('avatar', res.user.userEntity.avatar);
-						this.$queue.setData('userId', res.user.userId);
-						this.$queue.setData('userName', res.user.userEntity.userName);
-						this.$queue.setData('phone', res.user.userEntity.phone);
-						this.$queue.setData('age', res.user.userEntity.age);
-						this.sex = res.user.userEntity.sex
-						this.age = res.user.userEntity.age
-						this.phone = res.user.userEntity.phone;
-						this.avatar = res.user.userEntity.avatar;
-						this.userName = res.user.userEntity.userName;
-						if (this.userName == null) {
-							this.userName = res.user.userEntity.nickName;
-						} else {
-							this.userName = res.user.userEntity.userName;
-						}
-					}
-					uni.hideLoading();
-				});
-				
-				
-			},
-			// 保存
-			messagebtn() {
-				let that = this
-				if (!that.userName) {
-					// this.$queue.showToast('用户名不能为空');
-					uni.showToast({
-						title: "用户名不能为空",
-						icon: "none"
-					})
-				} else if (!that.phone) {
-					// this.$queue.showToast('用户名不能为空');
-					uni.showToast({
-						title: "联系电话不能为空",
-						icon: "none"
-					})
-				} else {
-					uni.showModal({
-						title: '温馨提示',
-						content: '确定保存信息',
-						success: e => {
-							if (e.confirm) {
-								that.$Request.postJson("/shop/shopmoney/updateUser", {
-									userName: that.userName,
-									avatar: that.avatar,
-									phone: that.phone,
-									sex: that.sex,
-									age:that.age
-								}).then(res => {
-									if (res.code === 0) {
-										uni.showToast({
-											title: '保存成功',
-											icon: "none"
-										})
-										setTimeout(function() {
-											uni.navigateBack()
-										}, 1000)
-									} else {
-										uni.showToast({
-											title: res.msg,
-											icon: "none"
-										})
-									}
-								})
-							}
-						}
-					});
-				}
-			}
-		},
-		// userphone(){
-		// 	uni.navigateTo({
-		// 		url:'/pages/my/userphone'
-		// 	})
-		// }
-	
-	};
-</script>
-
-<style>
-	page {
-		/* background: #1c1b20; */
-	}
-
-	.usermain {
-		background: #ffffff;
-		/* color: #fff; */
-	}
-
-	.usermain-item {
-		display: flex;
-		align-items: center;
-		margin: 0 40rpx;
-		padding: 10rpx 0;
-		justify-content: space-between;
-		border-bottom: 1rpx solid #e5e5e5;
-		/* border-bottom: 2rpx solid #f2f2f2; */
-	}
-
-	.usermain-item.item-padding {
-		/* padding: 0; */
-	}
-
-	.cu-form-group {
-		padding: 0;
-		background: #ffffff;
-		text-align: right;
-	}
-
-	.cu-form-group input {
-		background: #ffffff;
-		font-size: 28rpx;
-		/* color: #fff; */
-
-	}
-
-	.footer-btn {
-		margin-top: 150rpx;
-	}
-
-	.footer-btn .usermain-btn {
-		/* color: #FFFFFF; */
-		background: #FCD202;
-		text-align: center;
-		width: 450rpx;
-		height: 80rpx;
-		font-size: 28rpx;
-		line-height: 80rpx;
-		margin: 0 auto;
-		border-radius: 40rpx;
-	}
-</style>
+<template>
+	<view>
+		<view class="usermain">
+			<view class="usermain-item">
+				<view>头像</view>
+				<view @click="uploadImg()">
+					<image src="../../static/logo.png" v-if="avatar == null" mode="" style="width: 111rpx; height: 111rpx; border-radius: 50%"></image>
+					<image v-else :src="avatar" mode="" style="width: 111rpx; height: 111rpx; border-radius: 50%"></image>
+				</view>
+			</view>
+			<view class="usermain-item item-padding">
+				<view>用户名</view>
+				<view>
+					<view class="cu-form-group">
+						<input v-model="userName" placeholder="请输入用户名" />
+					</view>
+				</view>
+			</view>
+			<view class="usermain-item item-padding">
+				<view>年龄</view>
+				<view>
+					<view class="cu-form-group">
+						<input v-model="age" />
+					</view>
+				</view>
+			</view>
+			<!-- <view class="usermain-item item-padding">
+				<view  >姓名</view>
+				<view class="cu-form-group">
+					<input    v-model="realName" placeholder="请填写您的真实姓名" />
+				</view>
+			</view> -->
+
+			<view class="usermain-item item-padding">
+				<view>手机</view>
+				<view>
+					<view class="cu-form-group">
+						<input v-model="phone" placeholder="请输入联系电话" />
+					</view>
+				</view>
+			</view>
+			<view class="usermain-item item-padding">
+				<view>性别</view>
+				<view>
+					<view class="cu-form-group">
+						<u-radio-group v-model="sex">
+							<u-radio shape="circle" active-color="#2FB57A" :name="1">男</u-radio>
+							<u-radio shape="circle" active-color="#2FB57A" :name="2">女</u-radio>
+						</u-radio-group>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="footer-btn">
+			<view class="usermain-btn" @click="messagebtn()">保存</view>
+		</view>
+
+		<!-- 用于图片压缩的canvas画布 -->
+		<canvas
+			:style="{
+				width: cw + 'px',
+				height: cw + 'px',
+				position: 'absolute',
+				zIndex: -1,
+				left: '-10000rpx',
+				top: '-10000rpx'
+			}"
+			canvas-id="zipCanvas"
+		></canvas>
+		<!--画布结束-->
+	</view>
+</template>
+
+<script>
+import configdata from '../../common/config.js'
+import getLessLimitSizeImage from '@/utils/imageCompress.js'
+export default {
+	data() {
+		return {
+			phone: '',
+			avatar: '../../static/logo.png',
+			userName: '',
+			nickName: '',
+			userId: '',
+			realName: '',
+			weChatId: '',
+			password: '',
+			platform: '',
+			createTime: '',
+			money: '',
+			jiFen: '',
+			status: '',
+			zhiFuBao: '',
+			zhiFuBaoName: '',
+			sex: 1,
+			age: 0,
+			//画板边长默认是屏幕宽度，正方形画布
+			cw: uni.getSystemInfoSync().windowWidth
+		}
+	},
+	onLoad(e) {
+		this.getUserInfo()
+		// this.avatar = uni.getStorageSync('avatar')
+	},
+	methods: {
+		goMyAddress() {
+			uni.navigateTo({
+				url: '../jifen/myaddress'
+			})
+		},
+		uploadImg() {
+			let token = uni.getStorageSync('token')
+
+			if (!token) {
+				this.goLoginInfo()
+				return
+			}
+			let that = this
+			var url = null
+			uni.showActionSheet({
+				// itemList按钮的文字接受的是数组
+				itemList: ['查看头像', '从相册选择图片'],
+				success(e) {
+					var index = e.tapIndex
+					if (index === 0) {
+						// 用户点击了预览当前图片
+						// 可以自己实现当前头像链接的读取
+						let url = that.avatar
+						let arr = []
+						arr.push(url)
+						uni.previewImage({
+							// 预览功能图片也必须是数组的
+							urls: arr
+						})
+					} else if (index === 1) {
+						uni.chooseImage({
+							count: 1,
+							sourceType: ['album'],
+							success: (res) => {
+								for (let i = 0; i < res.tempFiles.length; i++) {
+									//这里的id和页面中写的html代码的canvas的id要一致
+									let canvasId = 'zipCanvas'
+									//原图的路径
+									let imagePath = res.tempFiles[i].path
+									//大小限制
+									let limitSize = 1024 * 2
+									//初始绘画区域是画布自身的宽度也就是屏幕宽度
+									let drawWidth = uni.getSystemInfoSync().windowWidth
+									let that = this
+									getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, that, (resPath) => {
+										uni.showLoading({
+											title: '上传中'
+										})
+										let token = uni.getStorageSync('token')
+
+										uni.uploadFile({
+											url: that.config('APIHOST1') + '/alioss/upload',
+											filePath: resPath,
+											header: {
+												token: token
+											},
+											name: 'file',
+											success: (uploadFileRes) => {
+												url = JSON.parse(uploadFileRes.data)
+												that.avatar = url.data
+												uni.hideLoading()
+											},
+											fail: () => {
+												uni.showToast({
+													title: '上传失败',
+													icon: 'error'
+												})
+											}
+										})
+									})
+								}
+							}
+						})
+					}
+				}
+			})
+		},
+		config: function (name) {
+			var info = null
+			if (name) {
+				var name2 = name.split('.') //字符分割
+				if (name2.length > 1) {
+					info = configdata[name2[0]][name2[1]] || null
+				} else {
+					info = configdata[name] || null
+				}
+				if (info == null) {
+					let web_config = cache.get('web_config')
+					if (web_config) {
+						if (name2.length > 1) {
+							info = web_config[name2[0]][name2[1]] || null
+						} else {
+							info = web_config[name] || null
+						}
+					}
+				}
+			}
+			return info
+		},
+		getUserInfo() {
+			this.$Request.get('/sys/user/info').then((res) => {
+				if (res.code == 0) {
+					this.$queue.setData('avatar', res.user.userEntity.avatar)
+					this.$queue.setData('userId', res.user.userId)
+					this.$queue.setData('userName', res.user.userEntity.userName)
+					this.$queue.setData('phone', res.user.userEntity.phone)
+					this.$queue.setData('age', res.user.userEntity.age)
+					this.sex = res.user.userEntity.sex
+					this.age = res.user.userEntity.age
+					this.phone = res.user.userEntity.phone
+					this.avatar = res.user.userEntity.avatar
+					this.userName = res.user.userEntity.userName
+					if (this.userName == null) {
+						this.userName = res.user.userEntity.nickName
+					} else {
+						this.userName = res.user.userEntity.userName
+					}
+				}
+				uni.hideLoading()
+			})
+		},
+		// 保存
+		messagebtn() {
+			let that = this
+			if (!that.userName) {
+				// this.$queue.showToast('用户名不能为空');
+				uni.showToast({
+					title: '用户名不能为空',
+					icon: 'none'
+				})
+			} else if (!that.phone) {
+				// this.$queue.showToast('用户名不能为空');
+				uni.showToast({
+					title: '联系电话不能为空',
+					icon: 'none'
+				})
+			} else {
+				uni.showModal({
+					title: '温馨提示',
+					content: '确定保存信息',
+					success: (e) => {
+						if (e.confirm) {
+							that.$Request
+								.postJson('/shop/shopmoney/updateUser', {
+									userName: that.userName,
+									avatar: that.avatar,
+									phone: that.phone,
+									sex: that.sex,
+									age: that.age
+								})
+								.then((res) => {
+									if (res.code === 0) {
+										uni.showToast({
+											title: '保存成功',
+											icon: 'none'
+										})
+										setTimeout(function () {
+											uni.navigateBack()
+										}, 1000)
+									} else {
+										uni.showToast({
+											title: res.msg,
+											icon: 'none'
+										})
+									}
+								})
+						}
+					}
+				})
+			}
+		}
+	}
+	// userphone(){
+	// 	uni.navigateTo({
+	// 		url:'/pages/my/userphone'
+	// 	})
+	// }
+}
+</script>
+
+<style>
+page {
+	/* background: #1c1b20; */
+}
+
+.usermain {
+	background: #ffffff;
+	/* color: #fff; */
+}
+
+.usermain-item {
+	display: flex;
+	align-items: center;
+	margin: 0 40rpx;
+	padding: 10rpx 0;
+	justify-content: space-between;
+	border-bottom: 1rpx solid #e5e5e5;
+	/* border-bottom: 2rpx solid #f2f2f2; */
+}
+
+.usermain-item.item-padding {
+	/* padding: 0; */
+}
+
+.cu-form-group {
+	padding: 0;
+	background: #ffffff;
+	text-align: right;
+}
+
+.cu-form-group input {
+	background: #ffffff;
+	font-size: 28rpx;
+	/* color: #fff; */
+}
+
+.footer-btn {
+	margin-top: 150rpx;
+}
+
+.footer-btn .usermain-btn {
+	/* color: #FFFFFF; */
+	background: #fcd202;
+	text-align: center;
+	width: 450rpx;
+	height: 80rpx;
+	font-size: 28rpx;
+	line-height: 80rpx;
+	margin: 0 auto;
+	border-radius: 40rpx;
+}
+</style>

pages/order/index.vue

@@ -252,12 +252,27 @@
 				</view>
 
 				<empty v-if="!orderList.length" style="z-index:0;position: relative;top: -20px;"></empty>
+				
+				<!-- 用于图片压缩的canvas画布 -->
+				<canvas
+					:style="{
+						width: cw + 'px',
+						height: cw + 'px',
+						position: 'absolute',
+						zIndex: -1,
+						left: '-10000rpx',
+						top: '-10000rpx'
+					}"
+					canvas-id="zipCanvas"
+				></canvas>
+				<!--画布结束-->
 			</view>
 </template>
 
 <script>
 	import empty from '@/components/empty.vue'
 	import configdata from '@/common/config.js';
+	import getLessLimitSizeImage from '@/utils/imageCompress.js'
 	export default {
 		components: {
 			empty
@@ -328,6 +343,8 @@
 				ifNotduan:false,//发送短信出错
 				failYuanyin:'',//短信发送失败原因
 				xuePhone:'',//当前用户
+				//画板边长默认是屏幕宽度，正方形画布
+				cw: uni.getSystemInfoSync().windowWidth
 			};
 		},
 		onLoad(option) {
@@ -534,25 +551,41 @@
 					count: this.count,
 					sourceType: [ 'camera','album'],
 					success: res => {
-						for (let i = 0; i < res.tempFilePaths.length; i++) {
-							that.$queue.showLoading("上传中...");
-							uni.uploadFile({ // 上传接口
-								// url: that.config("APIHOST1") + '/alioss/upload', //真实的接口地址
-								url: that.config("APIHOST1") + '/alioss/upload',
-								// url: 'https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload',
-								filePath: res.tempFilePaths[i],
-								name: 'file',
-								success: (uploadFileRes) => {
-									if (e == 1) {
-										if (that.goodsPicture1.length < 2) {
-											that.goodsPicture1.push(JSON.parse(uploadFileRes.data)
-												.data)
+						for (let i = 0; i < res.tempFiles.length; i++) {
+							//这里的id和页面中写的html代码的canvas的id要一致
+							let canvasId = 'zipCanvas'
+							//原图的路径
+							let imagePath = res.tempFiles[i].path
+							//大小限制
+							let limitSize = 1024 * 2
+							//初始绘画区域是画布自身的宽度也就是屏幕宽度
+							let drawWidth = uni.getSystemInfoSync().windowWidth
+							let that = this
+							getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, that, (resPath) => {
+								uni.showLoading({
+									title: '上传中'
+								})
+								uni.uploadFile({
+									url: that.config("APIHOST1") + '/alioss/upload',
+									filePath: resPath,
+									name: 'file',
+									success: (uploadFileRes) => {
+										if (e == 1) {
+											if (that.goodsPicture1.length < 2) {
+												that.goodsPicture1.push(JSON.parse(uploadFileRes.data)
+													.data)
+											}
 										}
+										uni.hideLoading();
+									},
+									fail: () => {
+										uni.showToast({
+											title: '上传失败',
+											icon: 'error'
+										})
 									}
-									uni.hideLoading();
-									// this.querenduanxin()
-								}
-							});
+								})
+							})
 						}
 					}
 				})

utils/imageCompress.js

@@ -0,0 +1,109 @@
+//通过canvas将图片压缩至指定大小
+
+//判断图片大小是否满足需求,limitSize的单位是kb
+function imageSizeIsLessLimitSize(imagePath, limitSize, lessCallback, moreCallback) {
+	//获取文件信息
+	wx.getFileSystemManager().getFileInfo({
+		filePath: imagePath,
+		success: (res) => {
+			// console.log("压缩前图片大小", res.size / 1024, 'kb');
+			//如果图片太大了走moreCallback
+			if (res.size > 1024 * limitSize) {
+				moreCallback()
+			}
+			//图片满足要求了走lessCallback
+			else {
+				lessCallback()
+			}
+		}
+	})
+}
+
+//将图片画在画布上并获取画好之后的图片的路径
+function getCanvasImage(canvasId, imagePath, imageW, imageH, that, getImgSuccess) {
+	//创建画布内容
+	const ctx = wx.createCanvasContext(canvasId, that);
+	//图片画上去，imageW和imageH是画上去的尺寸，图像和画布间隔都是0
+	ctx.drawImage(imagePath, 0, 0, imageW, imageH);
+	//这里一定要加定时器，给足够的时间去画（所以每次递归最少要耗时200ms，多次递归很耗时！）
+	ctx.draw(setTimeout(() => {
+		//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
+		wx.canvasToTempFilePath({
+			canvasId: canvasId,
+			x: 0,
+			y: 0,
+			width: imageW,
+			height: imageH,
+			quality: 1, //最高质量
+			success: (res) => {
+				// console.log(res.tempFilePath);
+				//将取出的图片路径通过回调函数返回
+				getImgSuccess(res.tempFilePath);
+			},
+			fail: (err) => {
+				console.log(err);
+			}
+		}, that)
+	}, 500));
+}
+
+//主函数，默认限制大小1024kb即1mb,drawWidth是绘画区域的大小
+//初始值传入为画布自身的边长（我们这是一个正方形的画布）
+function getLessLimitSizeImage(canvasId, imagePath, limitSize = 1024, drawWidth, that, callback) {
+	//判断图片尺寸是否满足要求
+	imageSizeIsLessLimitSize(imagePath, limitSize,
+		(lessRes) => {
+			//满足要求走callback，将压缩后的文件路径返回
+			callback(imagePath);
+		},
+		(moreRes) => {
+			//不满足要求需要压缩的时候
+			wx.getImageInfo({
+				src: imagePath,
+				success: (imageInfo) => {
+					let maxSide = Math.max(imageInfo.width, imageInfo.height);
+					let windowW = drawWidth;
+					let scale = 1;
+					/*
+					这里的目的是当绘画区域缩小的比图片自身尺寸还要小的时候
+					取图片长宽的最大值，然后和当前绘画区域计算出需要放缩的比例
+					然后再画经过放缩后的尺寸，保证画出的一定是一个完整的图片。由于每次递归绘画区域都会缩小，
+					所以不用担心scale永远都是1绘画尺寸永远不变的情况，只要不满足压缩后体积的要求
+					就会缩小绘画区域，早晚会有绘画区域小于图片尺寸的情况发生
+					*/
+					if (maxSide > windowW) {
+						scale = windowW / maxSide;
+					}
+					// 判断图片是否翻转了
+					if (imageInfo.orientation.indexOf('right') !== -1 || imageInfo.orientation.indexOf(
+							'left') !== -1) {
+						//trunc是去掉小数
+						var imgW = Math.trunc(imageInfo.height * scale);
+						var imgH = Math.trunc(imageInfo.width * scale);
+					} else {
+						var imgW = Math.trunc(imageInfo.width * scale);
+						var imgH = Math.trunc(imageInfo.height * scale);
+					}
+					// console.log('调用压缩', imgW, imgH);
+
+					//图片在规定绘画区域上画并获取新的图片的path
+					getCanvasImage(canvasId, imagePath, imgW, imgH, that,
+						(pressImgPath) => {
+							/*
+							再去检查是否满足要求，始终缩小绘画区域，让图片适配绘画区域
+							这里乘以0.95是必须的，如果不缩小绘画区域，会出现尺寸比绘画区域小，
+							而体积比要求压缩体积大的情况出现，就会无穷递归下去，因为scale的值永远是1
+							但0.95不是固定的，你可以根据需要自己改，0到1之间，越小则绘画区域缩小的越快
+							但不建议取得太小，绘画区域缩小的太快，压出来的将总是很糊的
+							*/
+							getLessLimitSizeImage(canvasId, pressImgPath, limitSize, drawWidth *
+								0.95, that, callback);
+						}
+					)
+				}
+			})
+		}
+	)
+}
+
+export default getLessLimitSizeImage