<view class="mine-box"> <import src="/template/signin.wxml"/> <template is="signin" data="{{...item}}"/> <view class="user"> <view class="user-pic"><image src="{{userInfo.avatarUrl}}"></image></view> <view class="user-name">{{userInfo.nickName}}</view> <view class="user-text"> <text>悠币:0</text> <text>余额:¥0.00</text> </view> </view> <view class="btn"> <ul> <block wx:for="{{mine_list}}" wx:for-item="mine" wx:key="index" > <li><image src="{{mine.pic_url}}"></image><span>{{mine.title}}</span></li> </block> </ul> </view> <view class="footer"><button type="warn" bindtap="quit" > 退出登录</button></view> </view> |
.mine-box{ width: 100%; height: 100%; font-family: "Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif; display: flex; flex-direction: column } .user{ height: 500rpx; width: 100%; } .user-pic{ height: 400rpx; display: flex; justify-content: center; align-items: center; } .user-name{ display: flex; justify-content: center; align-items: center; } .user-text{ display: flex; height: 100rpx; justify-content: center; align-items: center; font-size: 14px; color: #008842; } .user-text text{ display: flex; justify-content: center; width: 300rpx; } .user image{ height: 260rpx; width: 260rpx; border-radius: 130rpx; } .btn{ flex: 1; width: 100%; } .btn image{ height: 100rpx; width: 100rpx; } .btn ul{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .btn ul li{ width: 30%; height: 200rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 14px; } .footer{ height: 100%; } button{ width: 600rpx; margin: 0 auto; } label{ display: flex; flex-direction: column } label view{ display: flex; margin-top: 20rpx; } label view input{ flex: 1; border-bottom: 1px solid #aaa; } |
var app = getApp() Page({ data:{ userInfo: {}, mine_list:[ { "pic_url": "/images/icons/iocn_home_01.png", "title":"我的订单", }, { "pic_url": "/images/icons/iocn_home_02.png", "title":"优惠券", }, { "pic_url": "/images/icons/iocn_home_03.png", "title":"收货地址", }, { "pic_url": "/images/icons/iocn_home_04.png", "title":"客服电话", }, { "pic_url": "/images/icons/iocn_home_04.png", "title":"提货券", }, { "pic_url": "/images/icons/iocn_home_04.png", "title":"修改密码", } ], item: { signinHidden:false, userlocal:{ nickName:'', nickPwd:'' }, } }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, modalconfirm:function(){ wx.setStorageSync('username', this.data.item.userlocal.nickName); wx.setStorageSync('password', this.data.item.userlocal.nickPwd); this.setData({ 'item.signinHidden':true }) }, modalcancel:function(){ var that = this; wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.setData({ userInfo:res.userInfo }) } }) } }) this.onShow(); this.setData({ 'item.signinHidden':true }) }, quit:function(){ this.setData({ userInfo:'', 'item.signinHidden':false }) }, saveusername:function(event){ this.setData({ 'item.userlocal.nickName': event.detail.value }); }, saveuserpwd:function(event){ this.setData({ 'item.userlocal.nickPwd': event.detail.value }); }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ if(this.data.userInfo==''){ this.setData({ 'item.signinHidden':false }) } }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } }) |
模板简介:该模板名称为【微信小程序绿色电商账号登录弹窗页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。