
<!--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()
}
})
|
模板简介:该模板名称为【微信小程序个人中心界面样式制作设计教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。