上传图片大于2M时压缩

pages/order/feedback.vue

@@ -1,50 +1,47 @@
 <template>
 	<view class="page">
 		<!-- <view class="feedback-title"> -->
-			<!-- <text>评价</text> -->
-			<!-- <text @tap="chooseMsg">快速键入</text> -->
+		<!-- <text>评价</text> -->
+		<!-- <text @tap="chooseMsg">快速键入</text> -->
 		<!-- </view> -->
 		<view class="feedback-body">
 			<textarea placeholder="请输入你的评价..." v-model="sendDate.content" class="feedback-textare" />
 		</view>
 		<!-- <view class="feedback-title"><text>QQ/邮箱</text></view> -->
 		<!-- <view class="feedback-body"><input class="feedback-input" v-model="sendDate.mail" placeholder="方便我们联系你 " /></view> -->
-		
+
 		<view class="text-white padding bg radius margin-tb">
 			<view>
 				<view class="text-lg margin-top-sm text-black">商品评价图（可多张）</view>
-				<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
+				<view class="flex" style="overflow: hidden; flex-wrap: wrap">
 					<view>
 						<view class="margin-top flex margin-right-sm flex-wrap">
-							<view class="flex"
-								style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;"
-								v-for="(image,index) in shopBanner" :key="index">
+							<view
+								class="flex"
+								style="width: 200rpx; height: 200rpx; margin-right: 2rpx; position: relative"
+								v-for="(image, index) in shopBanner"
+								:key="index"
+								@click="viewImg(index, shopBanner)"
+							>
 								<!-- <image :src="image" style="width: 100%;height: 100%;"></image> -->
-								<image :src="image" style="width: 100%;height: 100%;"></image>
-								<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
-									@click="removeImg(index)">
+								<image :src="image" mode="aspectFill" style="width: 100%; height: 100%"></image>
+								<view style="z-index: 9; position: absolute; top: -15rpx; right: -15rpx" @click.stop="removeImg(index)">
 									<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
 								</view>
-		
 							</view>
-							<view class="flex"
-								style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;" @click="addImages(2)" v-if="shopBanner.length<9">
+							<view class="flex" style="width: 200rpx; height: 200rpx; margin-right: 2rpx; position: relative" @click="addImages(2)" v-if="shopBanner.length < 9">
 								<!-- <image :src="image" style="width: 100%;height: 100%;"></image> -->
-								<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
-									class="flex justify-center align-center">
+								<view style="width: 200rpx; height: 200rpx; background: #f4f5f6" class="flex justify-center align-center">
 									<view>
 										<view class="text-center">
-											<image src="/static/images/addimg.png" style="width: 65rpx;height: 55rpx;">
-											</image>
+											<image src="/static/images/addimg.png" style="width: 65rpx; height: 55rpx"></image>
 										</view>
 										<view class="text-center text-black">添加图片</view>
 									</view>
 								</view>
-									
 							</view>
 						</view>
 					</view>
-					
 				</view>
 			</view>
 		</view>
@@ -53,390 +50,429 @@
 			<view class="feedback-star-view">
 				<!-- <text class="feedback-star" v-for="(value, key) in stars" :key="key" :class="key < sendDate.score ? 'active' : ''" @tap="chooseStar(value)"></text> -->
 			</view>
-			<u-rate :count="count" min-count='1' active-color="#FCD202" v-model="value"></u-rate>
+			<u-rate :count="count" min-count="1" active-color="#FCD202" v-model="value"></u-rate>
 		</view>
-		<button type="primary" style="background: #FCD202;margin-top: 32upx;" class="feedback-submit"
-			@tap="send">提交</button>
+		<button type="primary" style="background: #fcd202; margin-top: 32upx" class="feedback-submit" @tap="send">提交</button>
+
+		<!-- 用于图片压缩的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 configUrl from '../../common/config.js'
-	export default {
-		data() {
-			return {
-				shopBanner: [],
-				msgContents: ['界面显示错乱', '启动缓慢，卡出翔了', 'UI无法直视，丑哭了', '偶发性崩溃'],
-				stars: [1, 2, 3, 4, 5],
-				imageList: [],
-				sendDate: {
-					score: 5,
-					content: '',
-					contact: '',
-					goodsId: '',
-					ordersId: '',
-					orderNumber: '',
-					shopId: ''
-				},
-				
-				count: 5,
-				value: 5,
+import configUrl from '../../common/config.js'
+import getLessLimitSizeImage from '@/utils/imageCompress.js'
+export default {
+	data() {
+		return {
+			shopBanner: [],
+			msgContents: ['界面显示错乱', '启动缓慢，卡出翔了', 'UI无法直视，丑哭了', '偶发性崩溃'],
+			stars: [1, 2, 3, 4, 5],
+			imageList: [],
+			sendDate: {
+				score: 5,
+				content: '',
+				contact: '',
 				goodsId: '',
 				ordersId: '',
 				orderNumber: '',
-			};
-		},
-		onLoad(e) {
-			this.sendDate.goodsId = e.goodsId
-			this.sendDate.ordersId = e.ordersId
-			this.sendDate.orderNumber = e.orderNumber
-			this.sendDate.shopId = e.shopId
-			// 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: {
-			// 图片上传
-			addImages(e) {
-				let that = this
-				uni.chooseImage({
-					count: 9,
-					sourceType: ['album', 'camera'],
-					success: res => {
-						for (let i = 0; i < res.tempFilePaths.length; i++) {
-							that.$queue.showLoading("上传中...");
-							uni.uploadFile({ // 上传接口
-								// url: that.config("APIHOST1") + '/alioss/upload', //真实的接口地址
-								// url: 'https://tcwm.xianmaxiong.com/sqx_fast/alioss/upload',
-								url:configUrl.APIHOST+'/alioss/upload',
-								filePath: res.tempFilePaths[i],
+				shopId: ''
+			},
+
+			count: 5,
+			value: 5,
+			goodsId: '',
+			ordersId: '',
+			orderNumber: '',
+			//画板边长默认是屏幕宽度，正方形画布
+			cw: uni.getSystemInfoSync().windowWidth
+		}
+	},
+	onLoad(e) {
+		this.sendDate.goodsId = e.goodsId
+		this.sendDate.ordersId = e.ordersId
+		this.sendDate.orderNumber = e.orderNumber
+		this.sendDate.shopId = e.shopId
+		// 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: {
+		// 图片上传
+		addImages(e) {
+			uni.chooseImage({
+				count: 9,
+				sourceType: ['album', 'camera'],
+				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: '上传中'
+							})
+							uni.uploadFile({
+								url: configUrl.APIHOST + '/alioss/upload',
+								filePath: resPath,
 								name: 'file',
 								success: (uploadFileRes) => {
-									if (that.shopBanner.length < 9) {
-										if(JSON.parse(uploadFileRes.data).data){
-											that.shopBanner.push(JSON.parse(uploadFileRes.data).data)
-										}else{
+									if (this.shopBanner.length < 9) {
+										if (JSON.parse(uploadFileRes.data).data) {
+											this.shopBanner.push(JSON.parse(uploadFileRes.data).data)
+										} else {
 											uni.showToast({
-												title:'图片上传失败，请重试',
-												icon:'none'
+												title: '图片上传失败，请重试',
+												icon: 'none'
 											})
 										}
-										
 									}
-									console.log(that.shopBanner)
-									uni.hideLoading();
+									console.log(this.shopBanner)
+									uni.hideLoading()
+								},
+								fail: () => {
+									uni.showToast({
+										title: '上传失败',
+										icon: 'error'
+									})
 								}
-							});
-						}
-					}
-				})
-			},
-			// 评价图删除
-			removeImg(index) {
-				this.shopBanner.splice(index, 1)
-			},
-			close(e) {
-				this.imageList.splice(e, 1);
-			},
-			chooseMsg() {
-				//快速输入
-				uni.showActionSheet({
-					itemList: this.msgContents,
-					success: res => {
-						this.sendDate.content = 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(this.sendDate,'111111111');
-				// console.log(this.shopBanner.join(','),'22222222222222222')
-				
-				if (!this.sendDate.content) {
-					uni.showToast({
-						icon: 'none',
-						title: '请输入评价内容'
-					});
-					return;
 				}
-				
-				if(!this.shopBanner.length){
-					uni.showToast({
-						icon: 'none',
-						title: '请上传商品评价图'
-					});
-					return;
+			})
+		},
+		// 评价图删除
+		removeImg(index) {
+			this.shopBanner.splice(index, 1)
+		},
+		close(e) {
+			this.imageList.splice(e, 1)
+		},
+		chooseMsg() {
+			//快速输入
+			uni.showActionSheet({
+				itemList: this.msgContents,
+				success: (res) => {
+					this.sendDate.content = 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)
 				}
-				this.$queue.showLoading('加载中...');
-				console.log(this.orderNumber)
-				
-				this.$Request.postJson('/app/order/insertEvaluate', {
+			})
+		},
+		chooseStar(e) {
+			//点击评星
+			this.sendDate.score = e
+		},
+		previewImage() {
+			//预览图片
+			uni.previewImage({
+				urls: this.imageList
+			})
+		},
+		send() {
+			//发送反馈
+			// console.log(this.sendDate,'111111111');
+			// console.log(this.shopBanner.join(','),'22222222222222222')
+
+			if (!this.sendDate.content) {
+				uni.showToast({
+					icon: 'none',
+					title: '请输入评价内容'
+				})
+				return
+			}
+
+			if (!this.shopBanner.length) {
+				uni.showToast({
+					icon: 'none',
+					title: '请上传商品评价图'
+				})
+				return
+			}
+			this.$queue.showLoading('加载中...')
+			console.log(this.orderNumber)
+
+			this.$Request
+				.postJson('/app/order/insertEvaluate', {
 					goodsId: this.sendDate.goodsId,
 					ordersId: this.sendDate.ordersId,
 					orderNumber: this.sendDate.orderNumber,
 					evaluateMessage: this.sendDate.content,
 					score: this.value,
 					shopId: this.sendDate.shopId,
-					pictures:this.shopBanner.length>0?this.shopBanner.join(','):[]
-				}).then(res => {
+					pictures: this.shopBanner.length > 0 ? this.shopBanner.join(',') : []
+				})
+				.then((res) => {
 					if (res.code === 0) {
 						uni.showToast({
 							title: '评价成功'
-						});
-						setTimeout(function() {
-							uni.navigateBack();
-						}, 1000);
+						})
+						setTimeout(function () {
+							uni.navigateBack()
+						}, 1000)
 					} else {
-						uni.hideLoading();
+						uni.hideLoading()
 						uni.showModal({
 							showCancel: false,
 							title: '评价失败',
 							content: res.msg
-						});
+						})
 					}
-				});
-			}
+				})
+		},
+		viewImg(i, list) {
+			uni.previewImage({
+				urls: list,
+				current: i
+			})
 		}
-	};
+	}
+}
 </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: #FFFFFF;
-	}
-
-	view {
-		font-size: 28upx;
-	}
-
-	.input-view {
-		font-size: 28upx;
-	}
-
-	.close-view {
-		text-align: center;
-		line-height: 14px;
-		height: 16px;
-		width: 16px;
-		border-radius: 50%;
-		background: #ff5053;
-		color: #ffffff;
-		position: absolute;
-		top: -6px;
-		right: -4px;
-		font-size: 12px;
-	}
-
-	/* 上传 */
-	.uni-uploader {
-		flex: 1;
-		flex-direction: column;
-	}
-
-	.uni-uploader-head {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-	}
-
-	.uni-uploader-info {
-		color: #b2b2b2;
-	}
-
-	.uni-uploader-body {
-		margin-top: 16upx;
-	}
-
-	.uni-uploader__files {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-	}
-
-	.uni-uploader__file {
-		margin: 10upx;
-		width: 210upx;
-		height: 210upx;
-	}
-
-	.uni-uploader__img {
-		display: block;
-		width: 210upx;
-		height: 210upx;
-	}
-
-	.uni-uploader__input-box {
-		position: relative;
-		margin: 10upx;
-		width: 208upx;
-		height: 208upx;
-		border: 2upx solid #d9d9d9;
-	}
-
-	.uni-uploader__input-box:before,
-	.uni-uploader__input-box:after {
-		content: ' ';
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		-webkit-transform: translate(-50%, -50%);
-		transform: translate(-50%, -50%);
-		background-color: #d9d9d9;
-	}
-
-	.uni-uploader__input-box:before {
-		width: 4upx;
-		height: 79upx;
-	}
-
-	.uni-uploader__input-box:after {
-		width: 79upx;
-		height: 4upx;
-	}
-
-	.uni-uploader__input-box:active {
-		border-color: #999999;
-	}
-
-	.uni-uploader__input-box:active:before,
-	.uni-uploader__input-box:active:after {
-		background-color: #999999;
-	}
-
-	.uni-uploader__input {
-		position: absolute;
-		z-index: 1;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		opacity: 0;
-	}
-
-	/*问题反馈*/
-	.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-quick {
-		position: relative;
-		padding-right: 40upx;
-	}
-
-	.feedback-quick:after {
-		font-family: uniicons;
-		font-size: 40upx;
-		content: '\e581';
-		position: absolute;
-		right: 0;
-		top: 50%;
-		color: #bbb;
-		-webkit-transform: translateY(-50%);
-		transform: translateY(-50%);
-	}
-
-	.feedback-body {
-		font-size: 32upx;
-		padding: 16upx;
-		margin: 16upx;
-		border-radius: 16upx;
-		background: #F2F2F2;
-		color: #FFF;
-	}
-
-	.feedback-textare {
-		height: 200upx;
-		font-size: 30upx;
-		line-height: 50upx;
-		width: 100%;
-		box-sizing: border-box;
-		padding: 10upx 0upx 0;
-		color: #8f8f94;
-	}
-
-	.feedback-input {
-		font-size: 32upx;
-		height: 60upx;
-		padding: 15upx 20upx;
-		line-height: 60upx;
-	}
-
-	.feedback-uploader {
-		padding: 22upx 20upx;
-	}
-
-	.feedback-star {
-		font-family: uniicons;
-		font-size: 40upx;
-		margin-left: 6upx;
-	}
-
-	.feedback-star-view {
-		margin-left: 20upx;
-	}
-
-	.feedback-star:after {
-		content: '\e408';
-	}
-
-	.feedback-star.active {
-		color: #ffb400;
-	}
-
-	.feedback-star.active:after {
-		content: '\e438';
-	}
-
-	.feedback-submit {
-		background: #007aff;
-		color: #ffffff;
-		margin: 20upx;
-	}
-</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: #ffffff;
+}
+
+view {
+	font-size: 28upx;
+}
+
+.input-view {
+	font-size: 28upx;
+}
+
+.close-view {
+	text-align: center;
+	line-height: 14px;
+	height: 16px;
+	width: 16px;
+	border-radius: 50%;
+	background: #ff5053;
+	color: #ffffff;
+	position: absolute;
+	top: -6px;
+	right: -4px;
+	font-size: 12px;
+}
+
+/* 上传 */
+.uni-uploader {
+	flex: 1;
+	flex-direction: column;
+}
+
+.uni-uploader-head {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
+.uni-uploader-info {
+	color: #b2b2b2;
+}
+
+.uni-uploader-body {
+	margin-top: 16upx;
+}
+
+.uni-uploader__files {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+.uni-uploader__file {
+	margin: 10upx;
+	width: 210upx;
+	height: 210upx;
+}
+
+.uni-uploader__img {
+	display: block;
+	width: 210upx;
+	height: 210upx;
+}
+
+.uni-uploader__input-box {
+	position: relative;
+	margin: 10upx;
+	width: 208upx;
+	height: 208upx;
+	border: 2upx solid #d9d9d9;
+}
+
+.uni-uploader__input-box:before,
+.uni-uploader__input-box:after {
+	content: ' ';
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	-webkit-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+	background-color: #d9d9d9;
+}
+
+.uni-uploader__input-box:before {
+	width: 4upx;
+	height: 79upx;
+}
+
+.uni-uploader__input-box:after {
+	width: 79upx;
+	height: 4upx;
+}
+
+.uni-uploader__input-box:active {
+	border-color: #999999;
+}
+
+.uni-uploader__input-box:active:before,
+.uni-uploader__input-box:active:after {
+	background-color: #999999;
+}
+
+.uni-uploader__input {
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+}
+
+/*问题反馈*/
+.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-quick {
+	position: relative;
+	padding-right: 40upx;
+}
+
+.feedback-quick:after {
+	font-family: uniicons;
+	font-size: 40upx;
+	content: '\e581';
+	position: absolute;
+	right: 0;
+	top: 50%;
+	color: #bbb;
+	-webkit-transform: translateY(-50%);
+	transform: translateY(-50%);
+}
+
+.feedback-body {
+	font-size: 32upx;
+	padding: 16upx;
+	margin: 16upx;
+	border-radius: 16upx;
+	background: #f2f2f2;
+	color: #fff;
+}
+
+.feedback-textare {
+	height: 200upx;
+	font-size: 30upx;
+	line-height: 50upx;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 10upx 0upx 0;
+	color: #8f8f94;
+}
+
+.feedback-input {
+	font-size: 32upx;
+	height: 60upx;
+	padding: 15upx 20upx;
+	line-height: 60upx;
+}
+
+.feedback-uploader {
+	padding: 22upx 20upx;
+}
+
+.feedback-star {
+	font-family: uniicons;
+	font-size: 40upx;
+	margin-left: 6upx;
+}
+
+.feedback-star-view {
+	margin-left: 20upx;
+}
+
+.feedback-star:after {
+	content: '\e408';
+}
+
+.feedback-star.active {
+	color: #ffb400;
+}
+
+.feedback-star.active:after {
+	content: '\e438';
+}
+
+.feedback-submit {
+	background: #007aff;
+	color: #ffffff;
+	margin: 20upx;
+}
+</style>

pages/order/index.vue

@@ -26,7 +26,7 @@
 		<!-- 全部订单 -->
 		<view class="cont_one" v-if="orderType != 3 && XCXIsSelect == '是'">
 			<view v-for="(item, index) in orderList" :key="index" @click="goNav('/pages/order/takefood?orderId=' + item.orderId + '&shopId=' + item.shopId)">
-				<view class="cont" v-if="item.orderType == 1 && item.status != 0">
+				<view class="cont" v-if="item.orderType == 1">
 					<view class="order_title" v-if="item.expectDeliveryTime">预约订单：{{ item.expectDeliveryTime }}送达</view>
 					<view class="order_success">
 						<view class="order_name" v-if="item.status == 6">制作中</view>
@@ -50,7 +50,7 @@
 					</view>
 					<view style="padding: 0 30rpx; font-size: 20px" v-if="item.orderSequence">#{{ item.orderSequence }}</view>
 
-					<view class="cont_two_text">{{ item.orderCode }}</view>
+					<view class="cont_two_text" v-if="item.orderCode">{{ item.orderCode }}</view>
 					<view class="cont_two_text2" v-if="item.status == 6">
 						前面还有
 						<text>{{ item.countOrder }}</text>
@@ -79,7 +79,7 @@
 						<view v-if="item.status == 0" class="btn_" @click.stop="goPay_throttle(item)">继续支付</view>
 					</view>
 				</view>
-				<view class="cont" v-if="item.orderType == 2 && item.status != 0">
+				<view class="cont" v-if="item.orderType == 2">
 					<view class="order_title" v-if="item.expectDeliveryTime">预约订单：{{ item.expectDeliveryTime }}送达</view>
 					<view class="order_success">
 						<view class="order_name" v-if="item.status == 3">
@@ -274,9 +274,9 @@ export default {
 				{
 					name: '待取餐'
 				},
-				// {
-				// 	name: '待结算'
-				// },
+				{
+					name: '待结算'
+				},
 				{
 					name: '已完成'
 				},
@@ -297,9 +297,9 @@ export default {
 				{
 					name: '配送中'
 				},
-				// {
-				// 	name: '待结算'
-				// },
+				{
+					name: '待结算'
+				},
 				{
 					name: '已完成'
 				},
@@ -728,21 +728,21 @@ export default {
 				case 3:
 					this.status = 3 //待取餐
 					break
-				// case 4:
-				// 	this.status = 0 //待结算
-				// 	break
-				// case 5:
-				// 	this.status = 4 //已完成
-				// 	break
-				// case 6:
-				// 	this.status = 5 //已取消
-				// 	break
 				case 4:
-					this.status = 4 //已完成
+					this.status = 0 //待结算
 					break
 				case 5:
+					this.status = 4 //已完成
+					break
+				case 6:
 					this.status = 5 //已取消
 					break
+				// case 4:
+				// 	this.status = 4 //已完成
+				// 	break
+				// case 5:
+				// 	this.status = 5 //已取消
+				// 	break
 			}
 			this.getOrderList()
 		},
@@ -780,21 +780,21 @@ export default {
 				case 3:
 					this.status = 3 //配送中
 					break
-				// case 4:
-				// 	this.status = 0 //待结算
-				// 	break
-				// case 5:
-				// 	this.status = 4 //已完成
-				// 	break
-				// case 6:
-				// 	this.status = 5 //已取消
-				// 	break
 				case 4:
-					this.status = 4 //已完成
+					this.status = 0 //待结算
 					break
 				case 5:
+					this.status = 4 //已完成
+					break
+				case 6:
 					this.status = 5 //已取消
 					break
+				// case 4:
+				// 	this.status = 4 //已完成
+				// 	break
+				// case 5:
+				// 	this.status = 5 //已取消
+				// 	break
 			}
 			this.getOrderList()
 		},

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