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

静态页面

  <!-- 用户操作菜单开始 --><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><!-- 用户操作菜单结束 -->

样式：

  .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

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