上传头像成功后关闭弹窗

pages/my/userinfo.vue

@@ -14,7 +14,7 @@
 				</view>
 				<!-- #endif -->
 				<!-- #ifndef MP-WEIXIN -->
-				<view @click="uploadImg()">
+				<view @click="toggle()">
 					<jp-cropper-watermark :watermarkType="1" mode="ratio" :width="400" :height="500" :maxWidth="400" :maxHeight="500" :url="url" @cancel="oncancel" @ok="onok"></jp-cropper-watermark>
 					<image src="../../static/logo.png" v-if="avatar==null" mode=""
 						style="width: 111rpx;height: 111rpx;border-radius: 50%;"></image>
@@ -76,6 +76,24 @@
 		<view class="footer-btn">
 			<view class="usermain-btn" @click="messagebtn()">保存</view>
 		</view>
+		<view>
+			<!-- 普通弹窗 -->
+			<uni-popup ref="popup" type="bottom" background-color="#fff" @change="change">
+				<view class="popup-content">
+					<view class="popup-content-top">
+						<view @click="uploadImg(0)" class="popup-content-top-btn" style="border-bottom: 1px solid #ccc;">
+							查看头像
+						</view>
+						<view @click="uploadImg(1)" class="popup-content-top-btn">
+							从相册选择图片
+						</view>
+					</view>
+					<view class="popup-content-bottom" @click="quxiao">
+						取消
+					</view>
+				</view>
+			</uni-popup>
+		</view>
 	</view>
 </template>
 
@@ -101,7 +119,8 @@
 				zhiFuBaoName: '',
 				sex: 1,
 				age: 0,
-				url:''
+				url:'',
+				upUrl:''
 			};
 		},
 		onLoad(e) {
@@ -199,7 +218,7 @@
 					let userId = uni.getStorageSync('userId');
 					uni.uploadFile({
 						url: websocketUtils.uploadFileUrl(), //真实的接口地址
-						filePath:that.url,
+						filePath:that.upUrl,
 						header: {
 							token: token
 						},
@@ -207,6 +226,7 @@
 						success: uploadFileRes => {
 							url = JSON.parse(uploadFileRes.data);
 							// that.avatar = url.data
+							that.$refs.popup.close('bottom')
 							uni.hideLoading();
 						}
 					});
@@ -216,62 +236,56 @@
 				// url设置为空，隐藏控件
 				this.url = "";
 			},
-			uploadImg() {
+			quxiao(){
+				this.$refs.popup.close('bottom')
+			},
+			toggle(type) {
+				this.$refs.popup.open('bottom')
+			},
+			uploadImg(index) {
 				let token = uni.getStorageSync('token')
-
 				if (!token) {
 					this.goLoginInfo();
 					return;
 				}
 				let that = this;
 				var url = null;
-				uni.showActionSheet({
+				if (index === 0) {
-					// itemList按钮的文字接受的是数组
+					// 用户点击了预览当前图片
-					itemList: ["查看头像", "从相册选择图片"],
+					// 可以自己实现当前头像链接的读取
-					success(e) {
+					let url = that.avatar;
-						var index = e.tapIndex
+					let arr = []
-						if (index === 0) {
+					arr.push(url)
-							// 用户点击了预览当前图片
+					uni.previewImage({
-							// 可以自己实现当前头像链接的读取
+						// 预览功能图片也必须是数组的
-							let url = that.avatar;
+						urls: arr
-							let arr = []
+					})
-							arr.push(url)
+				} else if (index === 1) {
-							uni.previewImage({
+					uni.chooseImage({
-								// 预览功能图片也必须是数组的
+						count: 1, //默认9
-								urls: arr
+						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
-							})
+						sourceType: ['album'], //从相册选择
-						} else if (index === 1) {
+						success: function(res) {
-							uni.chooseImage({
+							uni.getImageInfo({
-								count: 1, //默认9
+							  src: res.tempFilePaths[0],
-								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+							  success: (info) => {
-								sourceType: ['album'], //从相册选择
+								  const size = info.size;
-								success: function(res) {
+								  if (size / 1024 / 1024 > 4) {
-									uni.getImageInfo({
+								    // 图片大于2MB
-									  src: res.tempFilePaths[0],
+									uni.showToast({
-									  success: (info) => {
+										icon:'error',
-										  const size = info.size;
+										title:'图片超出4MB限制,请重新选择'
-										  if (size / 1024 / 1024 > 4) {
+									})
-										    // 图片大于2MB
+								  } else {
-											uni.showToast({
+									that.url = res.tempFilePaths[0];
-												icon:'error',
+									that.upUrl=res.tempFilePaths[0];
-												title:'图片超出4MB限制,请重新选择'
+								  }
-											})
-										  } else {
-											that.url = res.tempFilePaths[0];
-										  }
 								
-									  }
+							  }
-									});
-									
-									
-									
-								}
 							});
 						}
-					}, fail: function (err) {
+					});
-							console.log('showActionSheet失败', err);
+				}
-						}
-				})
 			},
 			
 			getUserInfo() {
@@ -356,7 +370,28 @@
 	};
 </script>
 
-<style>
+<style scoped>
+	.popup-content-bottom{
+		width: 100%;
+		text-align: center;
+		padding: 15px 0px;
+		border-radius: 5px;
+		background-color: #fcfcfd;
+		margin: 7px 0px;
+	}
+	.popup-content-top{
+		border-radius: 5px;
+		background-color: #fcfcfd;
+	}
+	.popup-content-top-btn{
+		width: 100%;
+		text-align: center;
+		padding: 15px 0px;
+		
+	}
+	.popup-content{
+		padding: 0 36rpx;
+	}
 	page {
 		background: #f7f7f7;
 	}
@@ -367,7 +402,7 @@
 
 	.usermain {
 		background: #ffffff;
-		padding: 0 36rpx;
+		padding: 0 20rpx;
 	}
 
 	.usermain-item {