clsd/app/components/avatar/avatar.vue

<!--头像剪裁上传（单张）-->
<template>
	<view class="avatar">
		<image :src="ip + head" mode="widthFix" class="head" @click="show = true" v-if="head"></image>
		<image style="background-color: white" class="head" @click="show = true" v-else></image>
		<!--头像上传-->
		<u-popup :show="show" @close="show = false" round="15">
			<view class="ppopup">
				<view v-show="desc">
					<view class="form_group">
						<view class="lable">
							<text class="icon right">&#xe612;</text>
							<text>正确示范</text>
						</view>
						<view class="bz"><text>上传真实头像，更容易获得好感</text></view>
						<image src="https://chenglantimes.com/prod-api/profile/upload/2024/06/04/1717489936671.jpg" mode="widthFix" class="avatar" style="border-radius: 5px"></image>
					</view>
					<view class="form_group">
						<view class="lable">
							<text class="icon error">&#xe634;</text>
							<text>不佳示范</text>
						</view>
						<view class="flex" style="margin-top: 5px">
							<view class="f">
								<view class="cdn">
									<image src="https://chenglantimes.com/prod-api/profile/upload/2024/06/04/1717489842705.jpg" class="img"></image>
									<view class="desc">非人物照</view>
								</view>
							</view>
							<view class="f">
								<view class="cdn">
									<image src="https://chenglantimes.com/prod-api/profile/upload/2024/06/04/1717489862536.jpg" class="img"></image>
									<view class="desc">五官遮挡</view>
								</view>
							</view>
							<view class="f">
								<view class="cdn">
									<image src="https://chenglantimes.com/prod-api/profile/upload/2024/06/04/1717489936671.jpg" class="img" style="filter: blur(2px)"></image>
									<view class="desc">模糊不清</view>
								</view>
							</view>
							<view class="f">
								<view class="cdn">
									<image src="https://chenglantimes.com/prod-api/profile/upload/2024/06/04/1717489876080.jpg" class="img"></image>
									<view class="desc">衣着不当</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<button class="btn" @click="chooseImage('camera ')">拍照</button>
				<button class="btn" @click="chooseImage('album')">从相册选择</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'avatar',
		props: {
			value: {
				type: String
			},
			desc: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				show: false,
				head: this.value,
				ip: this.http.ip
			};
		},
		watch: {
			value(newValue) {
				this.head = newValue;
			}
		},
		mounted() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				uni.showLoading({ title: '正在上传...', mask: true });
				// 上传到服务端
				uni.uploadFile({
					url: this.http.ip + '/app/common/upload',
					filePath: path,
					name: 'file',
					header: { Authorization: this.getUser().token },
					success: res => {
						let r = JSON.parse(res.data);
						if (r.code === 200) {
							this.head = r.fileName;
							this.$emit('input', r.fileName);
						} else {
							uni.hideLoading();
							uni.showModal({ content: r.msg, showCancel: false });
						}
					}
				});
			});
		},
		methods: {
			chooseImage(source) {
				this.show = false;
				uni.navigateTo({
					url: '/components/u-avatar-cropper/u-avatar-cropper?destWidth=300&rectWidth=200&fileType=jpg&source=' + source
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.avatar {
		.head {
			width: 55px;
			height: 55px;
			border-radius: 50%;
		}
		.ppopup {
			padding: 30px 20px 40px 20px;
			border-radius: 15px 15px 0px 0px;
			.right {
				font-size: 16px;
				padding-right: 5px;
				color: green;
			}
			.error {
				font-size: 16px;
				padding-right: 5px;
				color: orange;
			}
			.cdn {
				font-size: 13px;
				overflow: hidden;
				margin: 5px;
				.img {
					width: 60px;
					height: 60px;
					margin: 0 auto;
					margin-bottom: 3px;
					border-radius: 5px;
				}
			}
			.btn {
				margin-top: 20px;
			}
		}
	}
</style>