首页 > 小程序教程 > 微信小程序商城红色个恶人中心配送地址管理设计制作开发教程

微信小程序商城红色个恶人中心配送地址管理设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序商城红色个恶人中心配送地址管理设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="user">
    <view class="header">
        <view class="login-wrap" bindtap="goDetail">
            <view class="user-img">
                <image src="{{userImg}}" wx:if="{{userImg}}"></image>
                <image src="../../image/defaultuser.png" wx:else></image>
            </view>
            <view class="user-name">{{userName || '去登录'}} ></view>
        </view>
    </view>
    <view class="list section">
        <navigator url="{{isLogin ? '../address/address' : '../login/login'}}" >
            <view class="flex-con">
                <span class="icon icon-map"></span>
                <text>配送地址管理</text>
                <span class="icon icon-right"></span>
            </view>
        </navigator>
        <navigator url="{{isLogin ? '../coupon-list/coupon-list' : '../login/login'}}">
            <view class="flex-con">
                <span class="icon icon-mendianyouhuiquan"></span>
                <text>门店优惠券</text>
                <span class="icon icon-right"></span>
            </view>
        </navigator>

        <view class="flex-con">
            <span class="icon icon-handshake"></span>
            <text>招商加盟</text>
            <span class="icon icon-right"></span>
        </view>

    </view>
</view>
 
二、wxss样式文件代码如下:
.user {
    color: #222;
    -webkit-tap-highlight-color: transparent;
}
.user .header {
    height: 340rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url(../../image/ucenterbg.jpg) no-repeat left top;
    background-size: cover;
}
.user .user-img{
    overflow: hidden;
    margin-bottom: 20rpx;
    text-align: center;
}
.user .user-img  image {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
}
.user .user-name {
    text-align: center;
    font-size: 30rpx;
}
.section {
    background: #fff;
    padding: 0 20rpx;
}

.list .flex-con {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 30rpx 0;
    border-bottom: 1px solid #e8e8e8;
    width: 100%;
}
.list .flex-con .icon {
    font-size: 28rpx;
}
.list .flex-con .icon.icon-map{
    color: #30ba78;
}
.list .flex-con .icon.icon-mendianyouhuiquan{
    color: #e61773;
}
.list .flex-con .icon.icon-handshake{
    color: #4b95fa;
}

.list .flex-con text {
    display: block;
    flex: 1;
    margin: 0 20rpx;
    font-size: 28rpx;
}

@import "../../css/font.wxss";
三、js页面代码如下:
// pages/account/account.js
var util = require('../../utils/util.js');
var ports = require('../../utils/ports.js');
var polyfill = require('../../utils/polyfill.js');
//获取app实例
var appInstance = getApp();
Page({
  data:{
    isLogin: false,
    userImg: null,
    userName: null,
    userInfo: {}
  },
  goDetail: function(){
    if(this.data.isLogin){
        wx.navigateTo({
          url: '../user-detail/user-detail'
        });
    }else{
        wx.navigateTo({
          url: '../login/login'
        });
    }
  },
  getInfo: function(){
    var _self = this;
    util.getToken().then(token => {
      return util.wxRequest({
          url: ports.userInfo,
          header: { 'X-Auth-Token': token }
      })
    }).then((res) => {
        _self.setData({
          isLogin: true
        });
        res.data.hasData = true;
        // 传递给全局变量cartData(购物车数据)
        appInstance.globalData.userInfo = polyfill.object.assignIn(appInstance.globalData.userInfo, res.data);
        _self.setData({
          userImg: appInstance.globalData.userInfo.avatar,
          userName: appInstance.globalData.userInfo.nickname,
          userInfo: appInstance.globalData.userInfo
        });
    }).catch(err => {
        if(err.status === 4002) {
            wx.navigateTo({
              url: '../login/login'
            });
        }
    })
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    this.getInfo();
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
    if(!polyfill.object.isObjectValueEqual(appInstance.globalData.userInfo, this.data.userInfo)){
        this.setData({
          userImg: appInstance.globalData.userInfo.avatar,
          userName: appInstance.globalData.userInfo.nickname,
          userInfo: appInstance.globalData.userInfo
        });
    }
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

模板简介:该模板名称为【微信小程序商城红色个恶人中心配送地址管理设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 15,354次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-20
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
响应式 微信素材 自适应 企业网站 微信公众平台 微信文章 html5 微信模板 微信图片 单页式简历模板
您可能会喜欢的其他模板