第64讲个人中心用户操作菜单实现

静态页面

bash 复制代码

  <!-- 用户操作菜单开始 -->
  <view class="user_menu">
    <!-- 订单管理开始 -->
    <view class="order_wrap">
      <view class="order_title">我的订单</view>
      <view class="order_content">
        <navigator url="/pages/order/index?type=1">
          <view class="iconfont icon-daifukuan"></view>
          <view class="order_name">待付款</view>
        </navigator>
        <navigator url="/pages/order/index?type=2">
          <view class="iconfont icon-daishouhuo"></view>
          <view class="order_name">待收货</view>
        </navigator>
        <navigator url="/pages/order/index?type=3">
          <view class="iconfont icon-tuikuan"></view>
          <view class="order_name">退款/退货</view>
        </navigator>
        <navigator url="/pages/order/index?type=0">
          <view class="iconfont icon-dingdan"></view>
          <view class="order_name">全部订单</view>
        </navigator>
      </view>
    </view>
    <!-- 订单管理结束 -->

    <!-- 收货地址管理开始 -->
    <view class="address_wrap" bindtap="handleEditAddress">
      收货地址管理
    </view>
    <!-- 收货地址结束 -->

    <!-- 应用相关信息开始 -->
    <view class="add_info_wrap">
      <view class="app_info_item app_info_contact">
        <text>联系客服</text>
        <text>400-699-12345</text>
      </view>
      <view class="app_info_item">
        <button open-type="feedback" class="feedback">意见反馈</button>
      </view>
      <view class="app_info_item">
        关于我们
      </view>
    </view>
    <!-- 应用相关信息结束 -->

  </view>
  <!-- 用户操作菜单结束 -->

样式：

bash 复制代码

  .user_menu{
    margin-top: 15rpx;
    background-color: #F6F6F4;
    .order_wrap{
      margin: 15rpx;
      background-color: #fff;
      .order_title{
        padding: 15rpx;
        padding-left: 35rpx;
        border-bottom: 5rpx solid #F6F6F4;
      }
      .order_content{
        padding: 20rpx;
        display: flex;
        text-align: center;
        navigator{
          padding: 15rpx 0;
          flex:1;
          text-align: center;
          .iconfont{
            font-size: 24px;
          }
          .order_name{

          }
        }
      }
    }
  }

  .address_wrap{
    margin: 15rpx;
    margin-top: 20rpx;
    background-color: #fff;
    padding: 20rpx 0;
    padding-left: 35rpx;
  }

  .add_info_wrap{
    margin: 15rpx;
    margin-top: 20rpx;
    background-color: #fff;
    .app_info_item{
      padding: 20rpx;
      padding-left: 35rpx;
      border-bottom: 5rpx solid #F6F6F4;
    }
    .app_info_contact{
      display: flex;
      justify-content: space-between;
    }

    .feedback{
      margin: 0;
      padding: 0;
      background-color: transparent;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: start;
      align-items: center;
      font-size: 28rpx;
      font-weight: normal;
      flex-grow: 1;
    }
    .feedback::after {
      border: none;
    }
  }

index.js

bash 复制代码

  // 点击 编辑收货地址
  handleEditAddress(){
    wx.chooseAddress({
      success: (result) => {},
    })
  },