uni-id-pages-x-avatar.uvue

<template>
	<view class="avatar-box-root">
		<!-- #ifdef MP-WEIXIN -->
		<button open-type="chooseAvatar" @chooseavatar="bindchooseavatar" @click="uploadAvatarImg" class="box"
			:class="{'showBorder':border}" :style="{width,height,lineHeight:height}">
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view @click="uploadAvatarImg" class="box" :class="{'showBorder':border}"
			:style="{width,height}">
		<!-- #endif -->

			<!-- {{avatar_file!.getString("url")}} -->
      <cloud-image v-if="avatar_file != null" :src="avatar_file!.getString('url')" :width="width" :height="height"></cloud-image>
			<image v-else-if="readOnly" class="default-avatarUrl" src="@/uni_modules/uni-id-pages-x/static/default-avatar.png" mode="widthFix"></image>
      <view v-else class="upload-img-icon">
				<uni-id-pages-x-icons :size="35" color="#eee" type="jiahao"></uni-id-pages-x-icons>
			</view>

			<!-- #ifndef MP-WEIXIN -->
			</view>
			<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		</button>
		<!-- #endif -->
	</view>
</template>

<script>
	import { state, mutations } from '@/uni_modules/uni-id-pages-x/store.uts';
	/**
	* uni-id-pages-x-avatar
	* @description 用户头像组件
	* @property {String} width	图片的宽，默认为：50px
	* @property {String} height	图片的高，默认为：50px
	*/
	export default {
		name: "uni-id-pages-x-avatar",
		data() {
			return {
				isPC: false
			}
		},
		props: {
			//头像图片宽
			width: {
				type: String,
				default: "50px"
			},
			//头像图片高
			height: {
				type: String,
				default: "50px"
			},
			border: {
				type: Boolean,
				default: false
			},
      readOnly: {
				type: Boolean,
				default: false
			}
		},
		mounted() {
			// #ifdef WEB
			this.isPC = !['ios', 'android'].includes(uni.getSystemInfoSync().platform);
			// #endif
		},
		computed: {
			hasLogin() : boolean {
				return state.isLogin as boolean
			},
			userInfo() : UTSJSONObject {
				return state.userInfo
			},
			avatar_file() : UTSJSONObject | null {
				return this.userInfo.getJSON("avatar_file")
			}
		},
		methods: {
			setAvatarFile() {//avatar_file : AvatarFile
				// 使用 clientDB 提交数据
				// mutations.updateUserInfo({avatar_file})
			},
			bindchooseavatar() {
				// res
				// let avatarUrl = res.detail.avatarUrl
				// let avatar_file = {
				// 	extname: avatarUrl.split('.')[avatarUrl.split('.').length - 1],
				// 	name:'',
				// 	url:''
				// }
				// //上传到服务器
				// let cloudPath = this.userInfo._id + '' + Date.now()
				// avatar_file.name = cloudPath
				// try{
				// 	uni.showLoading({
				// 		title: "更新中",
				// 		mask: true
				// 	});
				// 	let {
				// 		fileID
				// 	} = await uniCloud.uploadFile({
				// 		filePath:avatarUrl,
				// 		cloudPath,
				// 		fileType: "image"
				// 	});
				// 	avatar_file.url = fileID
				// 	uni.hideLoading()
				// }catch(e){
				// 	console.error(e);
				// }
				// console.log('avatar_file',avatar_file);
				// this.setAvatarFile(avatar_file)
			},
			uploadAvatarImg() {
        if(this.readOnly){
          return
        }
				// #ifdef MP-WEIXIN
				return // 微信小程序走 bindchooseavatar方法
				// #endif
				// #ifndef MP-WEIXIN
				// if(!this.hasLogin){
				// 	uni.navigateTo({
				// 		url:'/uni_modules/uni-id-pages-x/pages/login/login-withoutpwd'
				// 	})
				//       return
				// }
				const crop : ChooseImageCropOptions = {
					quality: 100,
					width: 600,
					height: 600,
					resize: true
				};
				uni.chooseImage({
					count: 1,
					crop,
					success: (res) => {
						console.log('res', res);
						let tempFiles = res.tempFiles as UTSJSONObject[];
						let tempFile = tempFiles[0];
            let tempFileName = tempFile['name'] as string | null
						let tempFilePath = tempFile['path'] as string | null
						if (tempFileName == null) {
							tempFileName = ""
						}
						if (tempFilePath == null) {
							tempFilePath = ""
						}
						let avatar_file = {
							// #ifdef WEB
							extname: tempFileName.split(".")[tempFileName.split(".").length - 1],
							// #endif
							// #ifndef WEB
							extname: tempFilePath.split(".")[tempFilePath.split(".").length - 1],
							// #endif
							name: tempFileName,
							url: tempFilePath
						} as UTSJSONObject
						// console.log('avatar_file', avatar_file);

						let filePath = res.tempFilePaths[0]
						//非app端剪裁头像，app端用内置的原生裁剪
						// #ifndef UNI-APP-X
						filePath = await new Promise((callback) => {
							// #ifdef WEB
							if (!this.isPC) {
								callback(filePath)
							}
							// #endif

							uni.navigateTo({
								url: '/uni_modules/uni-id-pages-x/pages/userinfo/cropImage/cropImage?path=' +
									filePath + `&options=${JSON.stringify(crop)}`,
								animationType: "fade-in",
								events: {
									success: url => {
										callback(url)
									}
								},
								complete(e) {
									// console.log(e);
								}
							});
						})
						// #endif
						let _id = this.userInfo["_id"] as string
            // console.log("id",_id)
						// if(_id != null){
						//   _id = "" as string
						// }
						let cloudPath = _id + '' + Date.now()
            avatar_file['name'] = cloudPath
						uni.showLoading({
							title: "更新中",
							mask: true
						});
						uniCloud.uploadFile({
							filePath,
							cloudPath,
						})
							.then(function (res) {
                avatar_file['url'] = res.fileID
								mutations.updateUserInfo({ avatar_file } as UTSJSONObject)
							})
							.catch(function (err : any | null) {
								const error = err as UniCloudError
								uni.showModal({
									content: '上传失败，' + error.errMsg,
									showCancel: false
								});
								console.error(error);
							}).finally(() => {
								uni.hideLoading()
							})
					},
					fail:(err)=>{
						console.error('chooseImage fail: ', err)
						uni.showModal({
							content: '失败，' + err.errMsg,
							showCancel: false
						});
					}
				})
				// #endif
			}
		}
	}
</script>

<style>
  .default-avatarUrl{
    width:44px;
    height:44px;
  }
	.avatar-box-root {
		background-color: #fff;
	}

	.box {
		overflow: hidden;
		padding: 0;
	}

	.chooseAvatar {
		/* #ifndef UNI-APP-X */
		display: inline-block;
		box-sizing: border-box;
		/* #endif */
		border-radius: 100px;
		text-align: center;
		padding: 1px;
	}

	.upload-img-icon {
		border: 1px dotted #c8c8c8;
		width: 55px;
		height: 55px;
		justify-content: center;
		align-items: center;
	}

	.showBorder {
		border: solid 1px #ddd;
	}
</style>