【随心写作】共享充电宝小程序个人中心页

页面

<view class="user-view">
  <image class="user-image-view" src="/static/image/home/logo.png"></image>
  <view class="user-name-view">游客</view>
</view>

<view class="menu-view">
  <!--
  <view class="item-menu-view">
    我的订单
  </view>
  -->
  <view class="item-menu-view" bindtap="goUrl" data-url="/pages/store/add">
    <view>门店入驻</view>
    <mp-icon type="field" icon="arrow" color="#999" size="{{10}}"></mp-icon>
  </view>
</view>

逻辑

const app = getApp()

Page({
  goUrl(e) {
    const url = e.currentTarget.dataset.url
    console.log(e)
    wx.navigateTo({
      url: url,
    })
  },

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

样式

/* pages/my/index.wxss */

page {
  padding: 32rpx;
  width: 100%;
  box-sizing: border-box;
}

.user-view {
  display: flex;
  align-items: center;
}

.user-image-view {
  width: 120rpx;
  height: 120rpx;
  border-radius: 120rpx;
}

.user-name-view {
  margin-left: 24rpx;
  position: relative;
}

.menu-view {
  margin-top: 24rpx;
  font-size: 32rpx;
}

.item-menu-view {
  position: relative;
  padding: 24rpx;
  color: #333;
  display: flex;
  justify-content: space-between;
}

.item-menu-view::after {
  display: block;
  content: "";
  position: absolute;
  left: 24rpx;
  bottom: 0;
  right: 0;
  height: 1rpx;
  background: #ebedf0;
  box-sizing: border-box;
}

配置

{
  "usingComponents": {
    "mp-icon": "weui-miniprogram/icon/icon"
  }
}