【三】鸡汤来咯开发学习笔记-45

1.创建page_self/user/edit.vue，作为个人中心资料编辑页面（记得注册路由）

<template>
    <view class="userLayout">
        <view class="avatar">
            <view class="box">
                <view class="inner">                    
                    <image src="../../static/images/defAvatar.png" mode="aspectFill"></image>
                    <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="btn">按钮</button>   //button是一个透明的按钮，css里面可以看
                    <view class="mask" v-if="false">
                        上传100%
                    </view>
                </view>
                
                <view class="icon">
                    <uni-icons type="camera" color="#fff" size="16"></uni-icons>
                </view>
                <view class="text">点击更换头像</view>
            </view>
        </view>    
        
        <view class="list">            
            <uni-list>  //showArrow是显示右边的箭头的属性，clickable是可以点击的属性，不然不能加入点击事件，这个就是显示右边的文字
                <uni-list-item showArrow title="用户ID" clickable    
                rightText="123123123123" @click="clickID('')"/>
                <uni-list-item showArrow title="昵称" clickable
                rightText="昵称" @click="clickUsername"/>                
                <uni-list-item showArrow title="性别" clickable 
                rightText="男"  @click="clickGender"/>
                <uni-list-item showArrow title="注册时间" clickable 
                rightText="2024-05-01 15:33:22"  @click="clickTime"/>
            </uni-list>             
        </view>
    </view>
    
    <uni-popup ref="usernamePopup" type="dialog">  //点击昵称后的一个弹窗
        <uni-popup-dialog mode="input" title="修改昵称" value=""
        placeholder="请输入昵称" @confirm="usernameConfirm">            
        </uni-popup-dialog>
    </uni-popup>
    
    
    <uni-popup ref="genderPopup" type="dialog">
        <uni-popup-dialog  @confirm="genderConfirm" title="修改性别" mode="input">        
            <view class="genderForm">                
                <radio-group @change="genderChange">
                    <label class="radio" v-for="item in genderGroup" :key="item.value">
                        <radio :value="item.value" :checked="true" style="transform:scale(0.7)"/>//transform:scale(0.7)缩放变小点
                        {{item.text}}
                    </label>                    
                </radio-group>                
            </view>
        </uni-popup-dialog>
    </uni-popup>
    
</template>

<script setup>
import {ref,computed} from "vue";
const userInfo = ref(null);
const usernamePopup = ref(null);  //创建一个对象，对象引入到标签页面中，就能直接操控标签页面
const genderPopup = ref(null);


const genderGroup = ref([
    {
        value:0,
        text:"保密"
    },{
        value:1,
        text:"男"
    },{
        value:2,
        text:"女"
    }
])
//点击id模块复制内容
function clickID(value){    
    console.log(value);
}

//点击获取头像
function onChooseAvatar(e){
    console.log(e);
}

//点击修改昵称
function clickUsername(){
    usernamePopup.value.open(); //打开点击昵称的弹窗
}

//点击修改性别
function clickGender(){
    genderPopup.value.open();
}

//点击注册时间
function clickTime(){
    
}


//修改性别
function genderChange(e){
    console.log(e);    
}

//确认修改性别
function genderConfirm(){    
    
}


//确认修改昵称
function usernameConfirm(e){    
    console.log(e);
}


</script>

<style lang="scss" scoped>
.userLayout{
    .avatar{
        padding:100rpx 0;
        display: flex;
        justify-content: center;
        align-items: center;
        .box{
            height: 150rpx;
            width: 150rpx;
            position: relative;
            .inner{
                width: 100%;
                height: 100%;                
                image{
                    width: 100%;
                    height: 100%;                
                    border-radius: 50%;
                    border:1px solid #eee;
                }
                .btn{
                    position: absolute;
                    top:0;
                    left:0;
                    width: 100%;
                    height: 100%;    
                    border-radius: 50%;
                    opacity: 0;
                }
                .mask{
                    position: absolute;
                    background: rgba(0,0,0,0.6);
                    color:#fff;
                    top:0;
                    left:0;
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 22rpx;                    
                }
            }
            
            .icon{
                width: 50rpx;
                height: 50rpx;
                background: #FE9468;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                border:2px solid #fff;
                position: absolute;
                right:0;
                bottom:0;
                pointer-events: none;
            }
            .text{
                font-size: 25rpx;
                color:#999;
                white-space: nowrap;
                padding:20rpx 0;
                text-align: center;
            }
        }
    }
    .list{
        padding:50rpx 0rpx;        
    }
}

.genderForm{
    .radio{
        padding:0 10rpx;        
    }
}

</style>