<view class="my-container"> <modal class="login" title="请登录你的账号" confirm-text="确认" cancel-text="取消" hidden="{{modalHidden}}" bindconfirm="signConfirm"> <label> <view>账号:</view> <input placeholder="请输入你的账号" bindinput="saveUsername" /> </label> <label> <view>密码:</view> <input password="{{true}}" placeholder="请输入你的密码" bindinput="savePassword" /> </label> </modal> <view class="box" wx:if="{{boxHidden}}"> <view class="header"> <view class="headerTop"> <image class="touxiang" src="/images/myImages/hptouxiang.jpg" mode="aspectFit"></image> <view class="info"> <p class="tele">{{modal.username}}</p> <p class="intro"> <b class="puka">普卡</b> <b class="vip">VIP</b> </p> </view> </view> <view class="headerBottom"> <image src="/images/myImages/vip.png" mode="aspectFit"></image> <image class="gray" src="/images/myImages/vip2.png" mode="aspectFit"></image> <image class="gray" src="/images/myImages/vip3.png" mode="aspectFit"></image> <image class="gray" src="/images/myImages/vip4.png" mode="aspectFit"></image> </view> </view> <view class="jifen"> <ul> <li class="nowJiFen"> <text class="num">300</text> <b>积分</b> </li> <li class="youhuijuan"> <text class="num">0</text> <b>优惠券</b> </li> <li class="guanzhu"> <text>关注微信</text> </li> <li class="youhuijuan"> <text class="num">+50</text> <b>签到送积分</b> </li> </ul> </view> <view class="jianju"></view> <view class="person"> <ul> <li wx:for="{{imgBox}}" wx:for-item="item"> <span><image src="{{item.icon}}"></image></span> <b>{{item.info}}</b> <a><image src="/images/myImages/you.png"></image></a> </li> </ul> </view> <view class="tuichu"> <text bindtap="exit">退出登录</text> </view> </view> </view> |
.my-container .login label { display: flex; flex-direction: row; padding-bottom: 20rpx; } .my-container .login label view { width: 120rpx; text-align: right; } .my-container .login label input { flex: 1; border-bottom: 1px solid #000; } .my-container .header { width: 100%; background-color: #66cbff; } .my-container .headerTop { display: flex; } .my-container .headerTop .touxiang { width: 80px; height: 80px; border-radius: 40px; margin: 20px 0 0 25%; } .my-container .info { flex: 1; padding-top: 36px; padding-left: 20px; display: flex; flex-direction: column; } .my-container .tele { flex: 1; color: #fff; font-size: 14px; } .my-container .intro { flex: 1; } .my-container .intro .puka { background-color: #4069ff; padding: 2px 6px; font-size: 10px; color: #fff; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .my-container .intro .vip { padding: 2px 6px; background-color: #fff; font-size: 12px; color: #f5b32b; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .my-container .headerBottom { width: 60%; height: 26px; margin-left: 25%; padding: 5px 0 10px; display: flex; align-items: center; justify-content: center; } .my-container .headerBottom image { height: 26px; flex: 1; } .my-container .headerBottom .gray { -webkit-filter: grayscale(1); filter: gray; filter: grayscale(1); } .my-container .jifen { width: 100%; height: 60px; } .my-container .jifen ul { width: 100%; display: flex; justify-content: space-around; padding: 10px 0; } .my-container .jifen ul li { flex: 1; border-left: 1px solid #C6C7C9; width: 25%; height: 34px; text-align: center; } .my-container .jifen ul .nowJiFen { border: none; } .my-container .jifen ul .nowJiFen .num { color: #e30013; font-size: 14px; display: block; font-weight: bold; } .my-container .jifen ul .nowJiFen b { font-size: 12px; color: #595758; } .my-container .jifen ul .youhuijuan .num { color: #e30013; font-size: 14px; display: block; font-weight: bold; } .my-container .jifen ul .youhuijuan b { font-size: 12px; color: #595758; } .my-container .jifen ul .guanzhu text { padding: 3px; font-size: 12px; color: #fff; background-color: #4b9536; border-radius: 2px; } .my-container .jianju { background-color: #C6C7C9; height: 12px; } .my-container .person ul { width: 100%; } .my-container .person ul li { height: 40px; width: 100%; border-bottom: 1px solid #C6C7C9; display: flex; } .my-container .person ul li span { padding: 7px; } .my-container .person ul li span image { width: 26px; height: 26px; } .my-container .person ul li b { padding-left: 30px; font-size: 12px; line-height: 40px; color: #595758; } .my-container .person ul li a { flex: 1; text-align: right; } .my-container .person ul li a image { width: 8px; height: 16px; margin-top: 12px; margin-right: 36px; } .my-container .tuichu { width: 100%; padding-top: 30rpx; padding-left: 20%; box-sizing: border-box; } .my-container .tuichu text { background-color: #65a51e; display: block; width: 60%; height: 80rpx; line-height: 80rpx; border-radius: 10rpx; text-align: center; color: #fff; font-size: 14px; } |
Page({ data: { modalHidden:false, boxHidden:false, modal:{ "username":"", "password":"" }, nameCheck:false, imgBox:[ { "icon":"/images/myImages/l-dingdan.png", "info":"我的订单" }, { "icon":"/images/myImages/l-shoucang.png", "info":"我的收藏" }, { "icon":"/images/myImages/l-address.png", "info":"收货地址管理" }, { "icon":"/images/myImages/l-jifen.png", "info":"积分商城" }, { "icon":"/images/myImages/l-help.png", "info":"帮助中心" }, { "icon":"/images/myImages/l-kefu.png", "info":"联系客服" }, { "icon":"/images/myImages/l-about.png", "info":"关于我们" } ] }, onLoad: function () { }, onShow: function () { if(wx.getStorageSync("username")==""){ this.setData({ modalHidden:false, boxHidden:false }) console.log("no"); }else{ var getUsername=wx.getStorageSync("username"); var getPassword=wx.getStorageSync("password"); this.setData({ modalHidden:true, boxHidden:true, 'modal.username': getUsername, 'modal.password': getPassword }) console.log("has"); } }, signConfirm:function(){ if(this.data.nameCheck){ wx.setStorageSync('username', this.data.modal.username); wx.setStorageSync('password', this.data.modal.password); this.setData({ modalHidden:true, boxHidden:true }) } }, saveUsername:function(event){ if(event.detail.value!=""){ this.setData({ 'modal.username': event.detail.value, nameCheck:true }); } }, savePassword:function(event){ this.setData({ 'modal.password': event.detail.value }); }, exit:function(){ wx.setStorageSync("username",""); wx.setStorageSync("password",""); this.setData({ modalHidden:false, boxHidden:false }) } }); |
模板简介:该模板名称为【微信小程序饮茶机专题图片页面样式设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。