小白开发微信小程序43--个人中心页面布局2

1. wxml

<view>
    <!-- 顶部图片 -->
    <view>
        <image class="indeximage" src="/images/person.jpg" mode="widthFix"></image>
    </view>
    <!-- 用户登录 -->
    <view>
        <block>
            <!-- 未登录 -->
            <view wx:if="{{!isLogined}}" class="no-login-title">
                <text>您尚未登录，</text>
                <text class="btn-login">点我登录</text>
            </view>
            <!-- 已登录 -->
            <view wx:else class="no-login-title">
                <button type="primary" class="btn-exit">退出登录</button>
            </view>
        </block>
    </view>
    <!-- 用户背景 -->
    <view class="user-info">
        <!-- 未登录 -->
        <view wx:if="{{!isLogined}}" class="user-info-bg">
            <view class="user-info-wrap">
                <image src="/images/nologin.jpg"></image>
                <view class="user-nickname">匿名用户</view>
            </view>
        </view>
        <!-- 已登录 -->
        <view class="user-info-bg">
            <view class="user-info-wrap">
                <image src="{{userInfo.avatarUrl}}"></image>
                <view class="user-nickname">{{userInfo.nickName}}</view>
            </view>
        </view>
    </view>

    <!-- 操作信息 -->
    <view class="usermenu">
        <view class="address" bindtap="handleaddress">收货地址</view>
        <view class="infocontact" bindtap="contactus">
            <text>联系我们</text>
            <text class="inforight">></text>
        </view>
        <view class="infocontact">
            <text>意见反馈</text>
            <text class="inforight">010-83050808</text>
        </view>
    </view>

</view>

2. wxss

page {
    background-color: #f6f6f6;
}

/* 顶部图片 */
.indeximage {
    width: 100%;
    height: 100%;
}

/* 登录样式 */
.no-login-title {
    text-align: center;
    font-weight: 600;
    margin: 10rpx 0;
    font-size: 16px;
}

.no-login-title .btn-login {
    color: darkorange;
}

/* 用户背景 */
.user-info {
    width: 100%;
    display: flex;
}

.user-info .user-info-bg {
    position: relative;
    height: 34vh;
}

.user-info .user-info-bg .user-info-wrap {
    position: relative;
    top: 30%;
    text-align: center;
    margin-left: 120px;
}

.user-info .user-info-bg .user-info-wrap image {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    margin-top: -70rpx;
}

.user-info .user-info-bg .user-info-wrap .user-nickname {
    color: red;
    font-weight: 600;
    font-size: 36rpx;
}

/* 用户菜单样式 */
.usermenu {
    margin-top: 11rpx;
}

.usermenu .address {
    margin: 15rpx;
    background-color: white;
    padding-left: 35rpx;
    padding: 20rpx;
}

.usermenu .infocontact {
    background-color: white;
    margin: 15rpx;
    padding-left: 35rpx;
    padding: 20rpx;
}

.usermenu .infocontact .inforight {
    float: right;
}

3. js

// pages/personal/personal.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        isLogined: false,//登录标志，默认未登录
        userInfo: {},//用户信息
    },
    //收货地址
    handleaddress() {
        wx.chooseAddress({
            success: (result) => {

            }
        });
    },
    //联系我们
    contactus() {
        wx.navigateTo({
            url: '/pages/we/we',
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

4. 效果