微信小程序个人中心、我的界面

微信小程序个人中心、我的界面、自定义顶部状态栏、页面监听跳转、简单界面布局

微信小程序个人中心、我的界面，自定义顶部状态栏，实现滚动隐藏显示状态信息，界面简单，代码粘贴即用。更多微信小程序界面示例，请进入我的主页哦！

1、js代码

const WXAPI = require('../../wxapi/main');
const PAY = require('../../utils/pay');
const app=getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    showPircePop:false,
    baseurl:'',
    freenum:0,
    priceIndex:-1,
	authorize:false,
    barHeight: 30, //  顶部状态栏高度
	navBarHeight: 66, // 顶部高度
	staticlist:[0,0],
	navlist: ['收信箱', '发信箱'],
    navstatus: [1, 2],
  },
    // 查看详情监听
    detailClick() {
        wx.showToast({
            title: '暂未开发',
            icon: 'none'
        })
        // wx.navigateTo({
        //     url: '/pages/index/index',
        // })
	},
	/**
   * 获取订单数据
   */
  getdata(page) {
    let current = this.data.current
    let status = this.data.navstatus
    const that = this
    let apidata = {
      page: this.data.page,
      pagesize: this.data.pagesize,
      status: status[current]
	}
    WXAPI.getnote(apidata).then(function (res) {
      if (res.list.length < apidata.pagesize) {
        that.setData({
          islast: true,
        })
      }
      for (let obj of res.list) {
        obj.payprice=parseFloat(obj.payprice)
      }
      let list = that.data.list;
      list = list.concat(res.list);
      that.setData({
        loading: false,
        list: list,
        staticlist:res.staticlist
      })
	})
  },
  /**打开套餐面板 */
  onPriceOpen(){
    this.setData({
      showPircePop:true,
      priceIndex:-1,
    })
  },
  /**选择价格 */
  onPriceSelected(e){
    const that=this
    let index=e.currentTarget.dataset.index
    if(index==this.data.priceIndex){
        return
    }
    let item=this.data.messlist[index]
    this.setData({
      priceIndex:index
    })

    PAY.pay({
      url:WXAPI.messorderurl,
      payprice:item.price,
      messid:item.id,
      num:item.title,
      freenum:item.title,
    }).then(res=>{
      that.setData({
        showPircePop:false
      })
      if(res.status==1){
        wx.showToast({
          title: res.info,
          success:()=>{
            wx.navigateTo({
              url: '/pages/order/index',
            })
          }
        })
      }else{
        wx.showToast({
          title: res.info,
          icon:"error"
        })
      }
    })
  },
  onError(){
    wx.showToast({
		title: '暂未开发',
		icon: 'error'
	  })
  },
  /*编辑个人信息*/
  toedit(){
    wx.navigateTo({
      url: '/pages/mine/edit',
    })
  },
  onPriceClose(){
    this.setData({
      showPircePop:false
    })
  },

  onCopy(){
      wx.setClipboardData({
        data: this.data.userinfo.openid,
      })
  },

  tofabu(){
    wx.navigateTo({
      url: '/pages/topic/fabu',
    })
  },

  tostar(){
    wx.navigateTo({
      url: '/pages/topic/star',
    })
  },

  toorder(){
    wx.navigateTo({
      url: '/pages/order/index',
    })
  },

  toqa(){
    wx.navigateTo({
      url: '/pages/about/index',
    })
  },

  toabout(){
    wx.navigateTo({
      url: '/pages/about/about',
    })
  },
  tomymy(){
    wx.navigateTo({
      url: '/pages/mine/mymy',
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onShow () {
    const that = this
    let userinfo=wx.getStorageSync('userinfo')
    userinfo.openidcopy=userinfo.openid.substring(0,3)+'****'+userinfo.openid.substring(userinfo.openid.length-5,userinfo.openid.length-1)
    that.setData({
      userinfo
    })
    WXAPI.getfreenum({}).then(res=>{
      that.setData({
        freenum:res.list
      })
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad () {
    const that = this
    WXAPI.getmess({}).then(res=>{
      that.setData({
        messlist:res.list
      })
    })
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (res) {

  },
})

2、wxml代码

<!-- 顶部状态栏 -->
<privacy/>
<login showlogin="{{showlogin}}" id="loginCom"  bindchangelogin="changeLogin" />
    <!-- 个人信息 -->
<view class="bar-box" style="height: {{navBarHeight}}px;">
    <view class="level" style="margin-top: {{barHeight}}px;">
        <view class="level bar" bindtap="toedit" wx:if="{{show}}">
            <image class="top-head" src="{{userinfo.avaturl!=''?userinfo.avaturl:'../../images/nim.png'}}" mode="widthFix"></image>
            <view class="welcome">
                <text class="nick">{{userinfo.nickname}}</text>
                <text class="acount">{{userinfo.openidcopy}}</text>
            </view>
        </view>
        <view class="bar-title" wx:else>个人中心</view>
    </view>
</view>
<view class="head-box" style="padding-top: {{navBarHeight+20}}px;">
    <view class="level">
        <image class="top-head" src="{{userinfo.avaturl!=''?userinfo.avaturl:'../../images/nim.png'}}" mode="widthFix"></image>
        <view class="level head-right">
            <view class="welcome">
                <view class="nick">{{userinfo.nickname}}</view>
				<view class='openid-wrapper'>
        			<view class="id-wrapper">ID</view>
        			<view class="openid">{{userinfo.openidcopy}}</view>
        			<view class="copy" bindtap="onCopy">复制</view>
      			</view>
            </view>
            <view class="level set-center">已认证</view>
        </view>
    </view>
    <view class="level share-box" bindtap="detailClick">
        <view>
            <view class="money">
                <text>开通会员</text>
                <text class="money-text">￥99</text>
            </view>
            <view class="share-text">开启通往成功的道路！</view>
        </view>
        <view class="share-btn">查看详情</view>
    </view>
</view>
<view class="level sign-box">
	<view wx:for="{{navlist}}" wx:key='index' class="tab  {{current == index ? 'tabselect theme-color border-color' : ''}}" data-current="{{index}}" id="{{'tab'+index}}" bindtap='checkCurrenttab'>
        <view>{{item}}</view><text>{{staticlist[index]}}</text>
        <view class="tabline bg-color"></view>
      </view>
	<view class="tpye">
		<view class="type-name">短信剩余</view> 
		<view class="type-num">{{freenum}}</view>
	</view>
</view>
<van-popup show="{{ showPircePop }}" position="bottom" closeable close-icon="close" round bind:close="onPriceClose">
  <view class="pricetitle">信封购买</view>
  <view class="multi-tips">Tips：点击对应套餐即可购买，只支持微信支付！</view>
  <view class="pricelist flex flexwrap">
    <view class="priceitem {{priceIndex==index?'border-color':''}}" catchtap="onPriceSelected" data-index="{{index}}"  wx:for="{{messlist}}" wx:key="index">
      <image src="/images/envelope.png" class="priceitem-logo" mode=""/>
      <view class="price_t">{{item.title}}/封</view>
      <view class="price_p">{{item.price}}￥</view>
    </view>
  </view>
</van-popup>
<!-- 二级菜单 -->
<view class="white-box">
    <button class="row" style="width: 100%;" bindtap="toedit">
        <view class="left">
            <image src="../../images/ocean.png"></image>
            <text class="text">基本信息</text>
        </view>
        <image class="right" src="../../images/right.png" mode="widthFix"></image>
    </button>
    <button class="row" style="width: 100%;" bindtap="tofabu">
        <view class="left">
            <image src="../../images/ocean.png"></image>
            <text class="text">我的烦恼</text>
        </view>
        <image class="right" src="../../images/right.png" mode="widthFix"></image>
    </button>
    <button class="row" style="width: 100%;" bindtap="tostar">
        <view class="left">
            <image src="../../images/star.png"></image>
            <text class="text">我的点赞</text>
        </view>
        <image class="right" src="../../images/right.png" mode="widthFix"></image>
    </button>
    <button class="row" style="width: 100%;" bindtap="toorder">
        <view class="left">
            <image src="../../images/charge.png"></image>
            <text class="text">充值记录</text>
        </view>
        <image class="right" src="../../images/right.png" mode="widthFix"></image>
    </button>
	<button class="row" style="width: 100%;" bindtap="onPriceOpen">
        <view class="left">
            <image src="../../images/order.png"></image>
            <text class="text">信封购买</text>
        </view>
        <image class="right" src="../../images/right.png" mode="widthFix"></image>
    </button>
	<button class="row" style="width: 100%;" bindtap="toqa">
        <view class="left">
            <image src="../../images/qa.png"></image>
            <text class="text">常见问题</text>
        </view>
        <image class="right" src="../../images/right.png" mode="widthFix"></image>
    </button>
	<button class="row" style="width: 100%;" bindtap="toabout">
        <view class="left">
            <image src="../../images/about.png"></image>
            <text class="text">关于我们</text>
        </view>
        <image class="right" src="../../images/right.png" mode="widthFix"></image>
    </button>
</view>
<view class="white-box">
    <button open-type="contact" class="row" style="width: 100%;border-bottom: none;">
        <view class="left">
            <text class="text">在线客服</text>
        </view>
    </button>
	<button class="row" style="width: 100%;border-bottom: none;">
        <view class="left">
            <text class="text">当前版本</text>
        </view>
        <view style="text-align: center;">V2.0</view>
    </button>
</view>
<view class="copy">
    <text>2022-2023 © 码尚有缘</text>
</view>

3、wxss代码

page {
    background-color: #f1f1f1;
}

.level {
    display: flex;
    align-items: center;
}

/* 状态栏 */
.bar-box {
    background-color: #2979ff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 20rpx 0;
}

.bar {
    width: 80%;
    margin-right: 30%;
    margin-top: 1.5%;
    margin-left: 20rpx;
}

.bar-title {
    margin-top: 1.5%;
    margin-left: 20rpx;
    text-align: center;
    font-size: 34rpx;
    color: white;
}

.top-head {
	width: 15%;
    border-radius: 50%;
    background-color: white;
}

.welcome {
    display: flex;
    flex-direction: column;
    margin-left: 20rpx;
    color: white;
}

.nick {
    font-size: 32rpx;
	font-weight: bold;
	margin-bottom: -15rpx;
}

.acount {
    font-size: 22rpx;
    margin-top: 5rpx;
}

.head-box {
    background-color: #2979ff;
    padding: 0 20rpx;
}

.head-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.set-center {
    background-color: #19be6b;
    color: white;
    border-radius: 50rpx;
    font-size: 26rpx;
    padding: 5rpx 20rpx;
}

.share-box {
    justify-content: space-between;
    margin-top: 8%;
    background-color: rgb(65, 64, 64);
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    padding: 20rpx;
}

.money {
    font-size: 30rpx;
    color: rgb(248, 201, 70);
}

.money-text {
    padding-left: 20rpx;
}

.share-text {
    padding-top: 10rpx;
    font-size: 24rpx;
    color: rgba(248, 212, 112, 0.479);
}

.share-btn {
    background-color: rgb(248, 201, 70);
    color: rgb(54, 54, 54);
    border-radius: 50rpx;
    font-size: 26rpx;
    padding: 5rpx 15rpx 8rpx 15rpx;
}

.sign-box {
    margin: 0 20rpx;
    padding: 30rpx 20rpx;
    font-size: 30rpx;
	color: gray;
	text-align: center;
    justify-content: space-around;
    border-bottom-left-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
    background-color: white;
}
/* 二级菜单 */
.tab-box {
    margin: 20rpx;
    background-color: white;
    box-shadow: 0 0 5rpx 5rpx #f1f1f1;
    padding: 30rpx 20rpx;
    border-radius: 20rpx;
}

.tab-list {
    flex: 1;
    text-align: center;
    color: gray;
}

.tab-img {
    width: 50%;
}

.tab-text {
    font-size: 30rpx;
    margin: 5rpx 0;
}

.white-box {
    background-color: white;
    margin: 20rpx;
    border-radius: 20rpx;
    padding: 0 20rpx;
}

.row {
    display: flex;
    align-items: center;
    padding: 36rpx 10rpx;
    font-size: 30rpx;
	font-weight: inherit;
	height: 120rpx;
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 1rpx solid #f1f1f1;
}

.row::after {
    border: none;
}

.text {
    margin-left: 15rpx;
    color: #636262;
}

.left {
    width: 90%;
    text-align: left;
    display: flex;
    align-items: center;
    color: rgb(59, 59, 59);
}
.left image{
	align-self: center;
	width: 35rpx;
	height: 35rpx;
}

.right {
	width: 25rpx;
	height: 25rpx;
    text-align: right;
    color: rgb(148, 147, 147);
}

/* 商标 */
.copy {
    padding: 30rpx;
    text-align: center;
}

.copy text {
    font-size: 25rpx;
    color: gray
}
.openid-wrapper{
    flex: 1;
    display: flex;
    align-items: center;
	justify-content: space-between;
}
.id-wrapper{
    background-color: #4da9ff;
    color: #000000;
    padding: 0rpx 10rpx;
    margin-right: 10rpx;
    border-radius: 8rpx;
}
.openid{
    color: rgb(255, 255, 255);
    font-weight: 500;
}
.copy{
    color: #ffffff;
}
.pricetitle {
    text-align: center;
    padding: 20rpx;
}

.multi-tips{
	color: #999;
	font-size: 24rpx;
	text-align: center;
	position: relative; 
}

.pricelist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;
}


.priceitem {
    display: flex;
    padding: 30rpx;
    box-sizing: border-box;
    border: 1px dashed #ececec;
}

.priceitem-logo {
  padding: 10rpx 0;
  width: 60rpx;
  height: 40rpx;
}

.price_t {
  position:relative;
  font-size: 28rpx;
  width: 40%;
  padding: 10rpx;
  text-align: left;
}

.price_p {
  position:relative; 
  width: 40%;
  padding: 10rpx;
  text-align: right;
  font-size: 28rpx;
  color: #999;
}

4、json代码

{
    "usingComponents": {},
    "navigationStyle": "custom"
}

更多微信小程序示例的分享，请进入我的主页查看哦。