<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
    })
  }
});