海报取消按钮

subpkg/complete/complete.vue

@@ -73,7 +73,10 @@
 		<view v-if="showLoad">
 			<view class='imagePathBox'>
 			<!--  <image :src="tempFilePath" class='shengcheng' show-menu-by-longpress="true"></image> -->
-			  <button class='baocun' @click="saveImage()">保存至相册</button>
+			  <view class="btnbox">
+				  <button class='cancel' @click="cancel()">取消</button>
+				  <button class='baocun' @click="saveImage()">保存至相册</button>
+			</view>
 			</view>
 			<view class="mask"></view> 
 	    </view> 
@@ -284,6 +287,12 @@
 			   this.showShare = false
 			   this.showLayer = false 
 			},
+			cancel(){
+				const canvas = this.canvas;
+				const ctx = canvas.getContext("2d");
+				ctx.clearRect(0, 0, 500, 800)  
+				this.showLoad = false
+			},
 			saveImage() {
 			  uni.canvasToTempFilePath({
 			    canvasId: 'photo',
@@ -667,22 +676,34 @@
 		  transform: translate(-50%, -50%);
 		  z-index: 999;
 		}
-		.baocun {
-		  display: block;
+		.btnbox {
+		  display: flex;
 		  width: 70%;
 		  height: 90rpx;
-		  padding: 0;
-		  line-height: 90rpx;
-		  text-align: center;
 		  position: absolute;
 		  bottom: 10%;
 		  left: 15%;	
+		}
+		.baocun ,.cancel{
+		  display: block;
+		  width: 45%;
+		  height: 90rpx;
+		  padding: 0;
+		  line-height: 90rpx;
+		  text-align: center;
 		  color: #fff;
-		  font-size: 32rpx;
+		  font-size: 28rpx;
 		  border-radius: 50rpx;
 		  background: #1367fe;
-		
+		  border: 1px solid #1367fe;
 		}
+		
+		.cancel {
+	display: inline-block;
+	background-color: #fff;
+	color: #1367fe;
+}
+	
 		button[class="baocun"]::after{
 		  border: 0;
 		}