<template>
|
<view class="">
|
<u-modal :show="showUserSculpture" :title="title">
|
<view class="slot-content">
|
<view class="">
|
<u-avatar :src="avatarUrl" size="60"></u-avatar>
|
</view>
|
</view>
|
<view class="" slot="confirmButton">
|
<view class="confirmButton">
|
<button type="primary" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" plain="true"
|
style="border: none;position: relative;">
|
<image :src="avatar" mode="aspectFill"
|
style="width: 150rpx;height: 150rpx;border-radius: 20rpx;" v-if="avatar">
|
</image>
|
<image src="../../static/home/noavatar.jpg" mode="aspectFill"
|
style="width: 150rpx;height: 150rpx;border-radius: 20rpx;" v-else></image>
|
<view class="tips">点击授权头像</view>
|
</button>
|
<button type="primary" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" plain="true"
|
style="border: none;position: relative; width: 200px;">
|
<u-button text="确定" class="buts"></u-button> </button>
|
<button type="primary" plain="true" style="border: none;position: relative; width: 200px;">
|
<u-button text="取消" class="buts"></u-button>
|
</button>
|
</view>
|
</view>
|
</u-modal>
|
</view>
|
</template>
|
<script>
|
export default {
|
props: {
|
showUserSculpture: {
|
type: Boolean,
|
default: false
|
},
|
},
|
data() {
|
return {
|
title: '设置头像',
|
avatarUrl: ''
|
}
|
},
|
methods: {
|
onChooseAvatar(e) {
|
const {
|
avatarUrl
|
} = e.detail // 此返回的路径为临时路径，需转换为永久路径保存使用
|
this.avatarUrl = avatarUrl
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.slot-content {
|
display: flex;
|
width: 100%;
|
align-items: center;
|
flex-wrap: wrap;
|
justify-content: center;
|
}
|
|
.confirmButton {
|
display: flex;
|
}
|
</style>
|
