欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序商城电商个人会员中心页面制作设计

    2018-05-15 09:25 来源/作者:懒人模板 分类:小程序教程  « »
    微信小程序商城电商整套系列相关推荐:
    1、微信小程序开发页面顶部导航栏制作设计 [图]
    2、微信小程序开发底部导航菜单栏的制作设计 [图]
    3、微信小程序开发广告轮播幻灯图制作设计 [图]
    4、微信小程序开发商城电商首页整体布局制作设计 [图]
    5、微信小程序开发分类页面栅格布局制作与设计 [图]
    6、微信小程序开发商品详情页中sku的弹出属性筛选选择框 [图]
    7、微信小程序商品正文详情页整体布局制作与设计 [图]
    8、微信小程序商城电商购物车页面制作与设计 [图]
    9、微信小程序商城电商个人会员中心页面制作设计 [图]

    今天主要介绍微信小程序商城电商个人会员中心页面制作设计,做好以后可以达到如下效果图:


    一、wxss文件代码如下:

    /* pages/mine/mine.wxss */
    .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f0145a;
    }
    .account-bg {
      width: 100%;
      height: 150rpx;
    }
    .userinfo-avatar {
      width: 108rpx;
      height: 108rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
    .userinfo-nickname {
      color: #fff;
    }
    /* 订单 */
    .order {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      height: 90rpx;
    }
    .myorder-text {
      font-size: 30rpx;
      color: gray;
      margin: 20rpx;
      width: 40%;
    }
    .myorderlook-text {
      font-size: 30rpx;
      color: gray;
      position: relative;
      right: 20rpx;
      width: 60%;
      text-align: right;
    }
    .next-image {
      width: 20rpx;
      height: 25rpx;
      position: relative;
      right: 10rpx;
    }
    .navs {
      display: flex;
    }
    .nav-item {
      width: 25%;
      display: flex;
      align-items: center;
      flex-direction: column;
      padding: 20rpx;
    }
    .nav-item .nav-image {
      width: 40rpx;
      height: 40rpx;
      margin: 5rpx;
    }
    .nav-item text {
      margin-top: 20rpx;
      font-size: 25rpx;
      color: gray;
    }
    /* 列表 */
    .person-list {
      display: flex;
      flex-direction: column;
      align-items: left;
    }
    .list-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 80rpx;
    }
    .item-image {
      width: 40rpx;
      height: 40rpx;
      margin: 20rpx;
    }
    .item-text {
      color: gray;
      font-size: 25rpx;
      margin-left: 20rpx;
    }
    .person-line {
      width: 100%;
      height: 2rpx;
      background: lightgray;
      margin-left: 90rpx;
    }
    二、js测试数据文件:
    // pages/mine/mine.js
    var app = getApp()
    Page({
      data: {
        userInfo: {},
        motto: 'Hello World',
        // orderItems
        orderItems: [
          {
            typeId: 0,
            name: '待付款',
            url: 'bill',
            imageurl: '../../images/person/personal_pay.png',
          },
          {
            typeId: 1,
            name: '待发货',
            url: 'bill',
            imageurl: '../../images/person/personal_shipped.png',
          },
          {
            typeId: 2,
            name: '待收货',
            url: 'bill',
            imageurl: '../../images/person/personal_receipt.png'
          },
          {
            typeId: 3,
            name: '待评价',
            url: 'bill',
            imageurl: '../../images/person/personal_comment.png'
          }
        ],
      },
      //事件处理函数
      toOrder: function () {
        wx.navigateTo({
          url: '../order/order'
        })
      },
      onLoad: function () {
        console.log('onLoad')
        var that = this
        //调用应用实例的方法获取全局数据
        app.getUserInfo(function (userInfo) {
          //更新数据
          that.setData({
            userInfo: userInfo
          })
        })
      }
    })
    以上js文件只需要了解如下两个接口:
     
    1、onLoad:在加载过程中,获取用户的信息
     
    2、toOrder :事件监听,跳转到我的订单界面 

    三、wxml 页面代码如下:
    <!--pages/mine/mine.wxml-->
    <view class="container">
    
      <view class="userinfo">
        <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
        <image src="../../images/person/account_bg.png" class="account-bg">
        </image>
      </view>
    
      <view class="separate"></view>
    
      <view class="order" catchtap="toOrder">
        <text class="myorder-text">我的订单</text>
        <text class="myorderlook-text">查看全部订单</text>
        <image class="next-image" src="../../images/person/next.png"></image>
      </view>
      <view class="line"></view>
    
      <view class="navs">
        <block wx:for-items="{{orderItems}}" wx:key="name">
          <view class="nav-item" catchtap="toOrder" data-type="{{item.name}}" data-typeid="{{item.typeId}}">
            <image src="{{item.imageurl}}" class="nav-image" />
            <text>{{item.name}}</text>
          </view>
        </block>
      </view>
    
      <view class="separate"></view>
      <view class="person-list">
        <view class="list-item">
          <image class="item-image" src="../../images/person/personal_favorite.png"></image>
          <text class="item-text">我的收藏</text>
        </view>
        <view class="person-line"></view>
        <view class="list-item">
          <image class="item-image" src="../../images/person/personal_site.png"></image>
          <text class="item-text">收货地址</text>
        </view>
        <view class="person-line"></view>
        <view class="list-item">
          <image class="item-image" src="../../images/person/personal_sale_record.png"></image>
          <text class="item-text">售后记录</text>
        </view>
        <view class="person-line"></view>
        <view class="list-item">
          <image class="item-image" src="../../images/person/personal_evaluated.png"></image>
          <text class="item-text">我的评价</text>
        </view>
        <view class="person-line"></view>
        <view class="list-item">
          <image class="item-image" src="../../images/person/personal_share.png"></image>
          <text class="item-text">推广邀请</text>
        </view>
      </view>
      <view class="separate"></view>
    </view>

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议