feat:app端上传个人头像新增相机相册权限

fengtao
1 parent 84e7df9f
Showing 1 changed file with 149 additions and 3 deletions
publicLoginSubPage/other/set.vue
--- a/publicLoginSubPage/other/set.vue
View file @21c4acc
+++ b/publicLoginSubPage/other/set.vue
View file @21c4acc
@@ -2,6 +2,7 @@
 	<view class="set-page">
 		<!-- 公共组件-每个页面必须引入 -->
 		<public-module></public-module>
+		<!-- #ifdef MP-WEIXIN -->
 		<view @click="upAvatar" class="u-flex set-main">
 			<view class="main-image">
 				<image class="image" :src="avatar || '../../static/logo.png'"></image>
@@ -10,6 +11,17 @@
 				<image class="image" src="../../static/arrow-right.png"></image>
 			</view>
 		</view>
+		<!-- #endif -->
+		<!-- #ifdef APP-PLUS -->
+		<view @click="upAppAvatar" class="u-flex set-main">
+			<view class="main-image">
+				<image class="image" :src="avatar || '../../static/logo.png'"></image>
+			</view>
+			<view class="main-right-image">
+				<image class="image" src="../../static/arrow-right.png"></image>
+			</view>
+		</view>
+		<!-- #endif -->
 		<view class="u-m-t-20 basic-text"><text class="text">基本资料</text></view>
 		<view class="basic-main">
 			<u--form labelPosition="left" :model="myInfoModel" ref="myForm">
@@ -63,6 +75,8 @@
 			</u-popup>
 		</view>
 		<!-- 解绑账号 -->
+		<u-picker :show="showSelectType" :columns="avgColumns" keyName="label" closeOnClickOverlay
+			@confirm="confirmAvgGap" @cancel="showSelectType=false" @close="showSelectType=false"></u-picker>
 	</view>
 </template>
@@ -75,10 +89,21 @@
 		mapState
 	} from 'vuex';
 	import api from '@/api/index.js'
+	import permission from '@/js_sdk/wa-permission/permission.js'
 	export default {
 		data() {
 			return {
+				avgColumns: [
+					[{
+						label: '相机',
+						value: 1
+					}, {
+						label: '相册',
+						value: 2
+					}, ]
+				],
+				showSelectType: false,
 				showBind: false,
 				PrimaryColor: '#377DFF', //主题色
 				InfoColor: '#00C9A7', //主题色
@@ -119,14 +144,14 @@
 				info: {},
 				openIds: '',
 				isUpdatePersonOrLoginInfo: false,
-				isJudgeBindBtn: true
+				isJudgeBindBtn: true,
+				modify_content: ''
 			};
 		},
 		onReady() {
 			this.$refs.myForm.setRules(this.rules);
 		},
 		onLoad(e) {
-			console.log(e);
 			if (e.data !== null) {
 				let params = JSON.parse(e.data);
 				this.info = params;
@@ -150,7 +175,103 @@
 			...mapState(['userInfo'])
 		},
 		methods: {
+			modify() {
+				uni.showModal({
+					title: '需要下列权限才可以正常使用',
+					content: this.modify_content,
+					confirmText: '前往开启',
+					success: function(res) {
+						if (res.confirm) {
+							permission.gotoAppPermissionSetting(); //动态修改权限
+						}
+					}
+				});
+			},
+			async requestAndroidPermission(permissionID, e) {
+				let resp = await permission.requestAndroidPermission(permissionID, e);
+				if (resp == -1) {
+					this.modify();
+				} else if (resp == 1) {
+					if (e == 1) {
+						this.chooseImage1()
+					} else {
+						this.chooseImage2()
+					}
+				}
+			},
 			...mapMutations(['setUserInfo', 'emptyUserInfo']),
+			chooseImage1() {
+				let token;
+				token = this.userInfo.isToken || uni.getStorageSync('userInfo').isToken || undefined;
+				// #ifdef H5
+				token = window.sessionStorage.getItem('userInfo').isToken;
+				// #endif
+				if (!token) return uni.$u.toast('请登录后上传图片');
+				var cmr = plus.camera.getCamera();
+				var res = cmr.supportedImageResolutions[0];
+				var fmt = cmr.supportedImageFormats[0];
+				cmr.captureImage(
+					(path) => {
+						this.showSelectType = false
+						uni.uploadFile({
+							url: `${baseUrl.baseUrl}/yt/oss/upload`,
+							filePath: path,
+							name: 'file',
+							header: {
+								'content-type': 'multipart/form-data',
+								Authorization: 'Bearer ' + token
+							},
+							formData: {},
+							success: res => {
+								let objImage = JSON.parse(res.data);
+								this.avatar = objImage.fileStaticUri;
+								uni.$u.toast('头像上传成功');
+							}
+						});
+					},
+					function(error) {
+						console.log('Capture image failed: ' + error.message);
+					}, {
+						resolution: res,
+						format: fmt
+					}
+				);
+			},
+			//选择相册
+			chooseImage2() {
+				let token;
+				token = this.userInfo.isToken || uni.getStorageSync('userInfo').isToken || undefined;
+				// #ifdef H5
+				token = window.sessionStorage.getItem('userInfo').isToken;
+				// #endif
+				if (!token) return uni.$u.toast('请登录后上传图片');
+				plus.gallery.pick(
+					(path) => {
+						console.log(path)
+						this.showSelectType = false
+						uni.uploadFile({
+							url: `${baseUrl.baseUrl}/yt/oss/upload`,
+							filePath: path,
+							name: 'file',
+							header: {
+								'content-type': 'multipart/form-data',
+								Authorization: 'Bearer ' + token
+							},
+							formData: {},
+							success: res => {
+								let objImage = JSON.parse(res.data);
+								this.avatar = objImage.fileStaticUri;
+								uni.$u.toast('头像上传成功');
+							}
+						});
+					},
+					function(e) {
+						console.log('取消选择图片');
+					}, {
+						filter: 'image'
+					}
+				);
+			},
 			confrimBind(e) {
 				if (e) {
 					//解绑
@@ -181,8 +302,32 @@
 			clearAccountFunc() {
 				this.showBind = true;
 			},
+			upAppAvatar() {
+				this.showSelectType = true
+			},
+			confirmAvgGap(e) {
+				if (e.value[0].value == 1) {
+					this.modify_content = '摄像头权限(拍摄头像)';
+					//相机
+					switch (uni.getSystemInfoSync().platform) {
+						case 'android':
+							this.requestAndroidPermission('android.permission.CAMERA', 1);
+							break;
+					}
+				} else {
+					this.modify_content = '存储权限(读取相册)';
+					//相册
+					switch (uni.getSystemInfoSync().platform) {
+						case 'android':
+							this.requestAndroidPermission('android.permission.READ_EXTERNAL_STORAGE', 2);
+							break;
+					}
+				}
+				this.showSelectAvg = false
+			},
 			// 修改头像
 			async upAvatar() {
+				let that = this
 				let token;
 				token = this.userInfo.isToken || uni.getStorageSync('userInfo').isToken || undefined;
 				// #ifdef H5
@@ -191,6 +336,7 @@
 				if (!token) return uni.$u.toast('请登录后上传图片');
 				uni.chooseImage({
 					count: 1,
+					sizeType: ['compressed'],
 					sourceType: ['camera', 'album'],
 					success: res => {
 						const tempFilePaths = res.tempFilePaths;
@@ -232,7 +378,7 @@
 								uni.$u.toast('头像上传成功');
 							}
 						});
-					}
+					},
 				});
 			},
 			onSubmitFunc() {