<!--pages/personal/personal.wxml--> <view class="personalWrap"> <view class="personalMe" > <image src="{{userHead}}" style="width:68px;height:68px;border:1px solid #ddd;float:left;margin:20rpx 20rpx;border-radius: 50%;"></image> <view class="personalInfo"> <text>姓名: {{userName}}</text> <text>电话: {{userPhone}}</text> </view> </view> <!-- 列表 --> <view class="personalList"> <view class="iconfont icon-reserve" bindtap="listFirst">我的预定</view> <view class="iconfont icon-about" >关于万科</view> <view class="iconfont icon-edition" >版本号</view> <view class="iconfont icon-password" >密码修改</view> <view class="iconfont icon-feedback" style="border:none;">意见反馈</view> </view> <button type="default" bindtap="defaultLogin" data-login="{{login}}" hover-class="other-button-hover"> {{operation}} </button> </view> <import src="../../template/template.wxml"/> <template is="qrcode" /> |
/* pages/personal/personal.wxss */ /** 修改button默认的点击态样式类**/ page{ /*background-color:#fff;*/ font-size:30rpx; } .personalWrap{ /*margin:10rpx;*/ } .personalMe{ height:210rpx; margin:30rpx 0rpx 30rpx 0rpx; background-color: #fff; } .personalInfo{ float:left; margin: 20rpx 0rpx 0rpx 20rpx; } .personalInfo wx-text{ display: block; line-height:70rpx; height:70rpx; } .personalList{ background-color: #fff; padding:0rpx 20rpx; } .personalList view{ display: block; line-height:70rpx; height:70rpx; border-bottom:1px solid #ddd; } .personalList wx-span{ float:right; font-size:40rpx; margin-top:-63rpx; color:#ddd; } .personalList view{ position:relative; } .iconfont{ font-size:14px; } .personalList view:before{ color:#b02923; font-size:20px !important; font-weight:bold; padding-right: 10rpx; text-align:center; vertical-align:top; } .personalList view:after{ content:''; height:10px; width:10px; display:block; border:1px solid #ccc; border-left-width:0; border-bottom-width:0; position:absolute; top:10px; right:6px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); transform:rotate(45deg); } |
// pages/personal/personal.js const app = getApp(); Page({ data:{ }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示. var userInfo = wx.getStorageSync('userInfo'); if(userInfo.length !== 0){ this.setData({ operation: '退出', login: true, userName:userInfo.userName, userPhone:userInfo.userPhone, userHead: '../../images/userhead.jpg' }) }else{ this.setData({ userName: '', userPhone: '', userHead: '../../images/unuserhead.jpg', operation:'登录', login: false }) } }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 }, defaultLogin:function(e){ let login = e.currentTarget.dataset.login; if(login == true){ // 点击退出 wx.showToast({ title: '退出中', icon: 'loading' }) setTimeout(function(){ wx.hideToast(); wx.removeStorageSync('userInfo'); wx.switchTab({ url: '../index/index' }) },2000); }else{ // 点击登录 wx.navigateTo({ url: '../login/login' }) } }, listFirst:function(){ // 我的预订 if(this.data.login){ wx.switchTab({ url: '../orders/orders' }) }else{ wx.showToast({ title: '请登录', icon: 'loading', duration: 800 }) } }, getScanning: function () { app.getScanning() } }) |
模板简介:该模板名称为【微信小程序个人中心界面样式制作设计教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。