<!--头像剪裁上传(单张)--> <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"></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"></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>